3.2. Working with Javascript

A Javascript file can be added to the project  just like in GCv2, however the Designer will not automatically add the import (link in GCv2) reference when generating the index.html. The user will need to switch the index.gui file into source mode and enter the reference manually. Here are some of the issues that are GCv3 resolves by requiring this manual step.

  • Control the load order of the Javascript file, GCv2 loads the file ordered by filename

  • Can create Javascript file in the project without automatic included by the Designer

  • Javascript will be loaded in-place inside the Designer, such as creating binding in Javascript between widget to widget will work and click event listener for a button will be triggered when the button is clicked

To include a Javascript reference to the index.gui, switch to source mode and add the following include statement at the top of the file

  • <script type=”module” src=”./myscript.js”></script>

  • Type needs to be a module, so that the script can use the ECMAScript 2015 (ES6) module import statement to include additional GUI Composer library modules

To import additional GUI Composer library files to myscript.js, add the import statements before referencing the imported modules. For exaample:

import { GcConsole } from ‘./components/@ti/gc-core-assets/lib/GcConsole’;

import { GcWidget } from ‘./components/@ti/gc-widget-base/lib/GcWidget’;

import { bindingRegistry } from ‘./components/@ti/gc-core-databind/lib/CoreDatabind’;

import { ActionRegistry } from ‘./components/@ti/gc-widget-menu/lib/ActionRegistry’;

The available library modules are placed in the lib folder in each component folder. Application should only be accessing the public properties and methods for each WebComponent and should only be importing the modules in the lib folder. Select the Help | Components Help | Components v3 menu item in the Designer to open the Component help page. The help contains the available public methods and properties for a WebComponent and click on the Component Core Library link at the top of the component navigation list at the left to open the core library modules.

Here are some of the examples on how to use the imported modules in myscript.js file:

  • Create a console log instance for the application without flooding the DevTools console window will messages. Add the snippet below to the Javascript file before referencing the console. The code below sets the console log to level 5 to output everything. Set it to 0 to disable logging. To enable logging while debugging the app, open the DevTools console window and enter gc.console.setLevel(‘myapp’, <level>).

let console = new GcConsole(‘myapp’);

GcConsole.setLevel(‘myapp’, 5);T

  • Create a databinding using Javascript.

bindingRegistry.bind(‘widget.gc_widget_led.on’, ‘streaming.led_on’);

  • Add an event listener to a button. Due the asynchronous nature of WebComponent, it needs to be waited until it is defined before accessing it’s property and method. The helper function GcWidget.querySelector() returns a promise, it waits for the element to be defined using its tagName before returning. The input argument to the querySelector helper function accepts a CSS selector query string.

const init = () => {

GcWidget.querySelector(‘#mybutton’).then(button => {

myButton.label = ‘Click Me!’;

myButton.addEventListener(‘click’, () => alert(‘I am clicked’));

});

};

document.readState = ‘complete’ ? init() : document.addEventListener(‘DOMContentLoaded’, init);

  • Register for menu action and toolbar action event callbacks.

ActionRegistry.registerAction(‘cmd_action_id’, {

run() { /…/ },

isEnabled() { /* … */ },

isVisible() { /* … */ },

isChecked()( { /* … */ }

});