3.1. GUI Composer Components Library v3

3.1.1. Introduction

GUI Composer Components Library v3 has a number of goals to improve on from lessons learned during development and support of GUI Composer Components Library v2.

  • Utilize Web Components standard widget library (https://www.webcomponents.org)

  • Utilize StancilJS framework (https://stenciljs.com) to align with ti.com widget library

  • Utilize Typescript/JSX with type safety validation during development cycle

  • Improve load/startup performance of GUI Composer applications

  • Scriptable NodeJS target communication library with minimal external dependencies, can be used to facilitate automated device validation

  • Simplify and optimize available widgets to improve efficiency

  • Improve documentation with fully functional demo and usage guide. Accessed through Help -> Component Help -> Components v3

3.1.2. Getting started

GUI Composer Designer now includes v2 Component library with all existing project templates and also the new v3 Component library that also includes a single v3 project template. Users can choose which Component library is used at project creation time.

3.1.3. High-level changes

3.1.3.1. Designer

  • Designer supports both v2 and v3 projects using the same workspace. v2 projects will not be automatically migrated to v3, application developers can make a decision when to migrate the projects to use the v3 component library.

  • A new Application v3 project template is available in the project wizard to create project using the new v3 components library.

  • Target communication components that have no visible UI elements have been added to components palette along with widget components. This approach allows to have consistent developer experience with visible and non-visible elements for configuration through properties. This means that for v3 projects, project wizard is not used to configure target communication.

    • Transport, model, and program loader can be added by dropping the components into the index.gui file from the Component Palette panel

    • Setting properties (system.json/register.json for Analog project) for these components can be done with the Properties panel

  • Improved component documentation page for widgets, transports, models, and codecs. Including library module files, i.e Services, GcFile, GcConsole, etc… Click on the Component Core Library link in the Component Help to access the library module documentation

  • Project structure is flattened, all files within the project are visible and editable in the project Files view

    • Including index.json and project.json : Simple double click on these files to make changes using built in GC Designer editor.

  • Comprehensive component documentation, demos, and code snippets

    • Detail properties, methods, events, and CSS variables documentation for each component

    • Live demo for each widget component

    • Code snippets that can be copy and paste into index.gui file

3.1.3.2. Application

  • Usage of template_obj is no longer supported, see [working with web components] (working_WebComponent.html) for more information

  • New Application Javascript file, CSS file, and Custom Codec Javascript file will need to be manually included into the index.gui file, see [Working with JS] (workingwithjs.html) for more information

  • Core components import links are on longer required to be included in the index.gui file, the component module will be automatically loaded when the component tag is added to the application during runtime

3.1.3.3. Components

  • Component tags are changed from ti- to gc- prefix

  • The core set of common components has been ported from v2, however, not all widgets have been migrated.

  • Components with similar functionality are merged into one component, properties are simplified and optimized

  • Styling properties are no longer supported, widget styling can be set using native CSS styling or CSS variables exposed by the widget, see [working with web components] (working_WebComponent.html) for more information

3.1.4. Getting started with a new project

  • Open [GC Designer] (http://dev.ti.com/gc)

  • Select Project | New Project from the main menu

  • In the Project wizard dialog

    • Choose Application v3 from the Project Template list

    • Fill the required information

    • Press OK to exit and create the project

  • The GUI file editor should be opened with the default getting started example

  • Add components by dragging them from the Component Palette panel and dropping them into the index.gui file

    • Add target communication components to the project can be accomplished by following one of two v3 tutorials [Tutorials] (index_tutorials.html).

    • Add a new widget such as LED widget or Toggle switch widget, open the Properties panel and click on the link icon beside a property to enable binding to a data source variable. Select the model id in the droplist from the previous step and enter the variable name in the textbox

  • Click on the Play toolbar button to run the application