03-09-2021, 09:52 PM
Hi all!
I just wanted to share the result of a little experiment I did to use Vue.js in Tactic
First of all we need to include vue.js, edit "tactic_data/config/tactic-conf.xml" and add:
this will work only if your browser have internet access, in a closed LAN you will have to internalize Vue.js, just put it anywhere your browser will have access to it (for example in tactic/src/context/ or in a plugin folder)
Than we restart Tactic and create a new custom layout.
In the HTML tab we enter:
than we create e new behavior, for the load event on "app_div" (or whatever name you chose for the div class):
That's all!
Running the new custom layout should display "Hello world" in place of the {{ message }}
I believe with Vue.js and tactic.js we can add modern and easy to create/maintain UIs
Few notes:
- The "vue_test" app creation can be added to the onload event of any div as long as the div comes before the vue_test div
- I still didn't do any extensive test but Vue.js seems to get along with the rest of tactic js logic very well
- I also managed to use GoldenLayout (nice modern layout in js) and BabylonJs (I use it to show assets 3D models in realtime), just add them to "tactic_data/config/tactic-conf.xml"
- I can't be sure there are not going to be any interferences between all the involved JS libraries but in my (small) tests worked very well
I just wanted to share the result of a little experiment I did to use Vue.js in Tactic
First of all we need to include vue.js, edit "tactic_data/config/tactic-conf.xml" and add:
Code:
<include_js>
https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js
</include_js>
this will work only if your browser have internet access, in a closed LAN you will have to internalize Vue.js, just put it anywhere your browser will have access to it (for example in tactic/src/context/ or in a plugin folder)
Than we restart Tactic and create a new custom layout.
In the HTML tab we enter:
Code:
<div id="vue_test" class="app_div">
{{ message }}
</div>
than we create e new behavior, for the load event on "app_div" (or whatever name you chose for the div class):
Code:
var app = new Vue({
el: '#vue_test',
data: {
message: 'Hello World!'
}
});
That's all!
Running the new custom layout should display "Hello world" in place of the {{ message }}
I believe with Vue.js and tactic.js we can add modern and easy to create/maintain UIs
Few notes:
- The "vue_test" app creation can be added to the onload event of any div as long as the div comes before the vue_test div
- I still didn't do any extensive test but Vue.js seems to get along with the rest of tactic js logic very well
- I also managed to use GoldenLayout (nice modern layout in js) and BabylonJs (I use it to show assets 3D models in realtime), just add them to "tactic_data/config/tactic-conf.xml"
Code:
<include_js>
https://cdn.babylonjs.com/viewer/babylon.viewer.js,https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js,https://golden-layout.com/files/latest/js/goldenlayout.min.js
</include_js>
<include_css>
https://golden-layout.com/files/latest/css/goldenlayout-base.css,https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css
</include_css>
- I can't be sure there are not going to be any interferences between all the involved JS libraries but in my (small) tests worked very well