Documentation
API
Q&A
Read
AnnouncementsArticlesWebsite tips
Learn
Getting StartedManagerMaestroAnalyticsExchangeWorkspaces
Resources
VideosDownloadsExchange PackagesRelease Notes
Ideas
Contact
Platform
Manager
Maestro
Exchange
Workspaces
Analytics
Springboard

Native Component Development Toolkit

   MaestroThe UI design product.  |   Form Builder |  All versions This feature is related to all versions.

The Temenos Journey Manager platform provides you with the Maestro Native Component Development Toolkit to simplify the creation of custom native components through the use of templates, and automated tasks. This toolkit is based on the gulp automation tool, which executes custom tasks defined in a gulpfile.js JavaScript file.

Installation

To install the toolkit:

  1. Install NodeJs.
  2. Download avoka-native-component-tools.zip.
  3. Extract the zip file into an empty directory on your computer. You can do this by executing the following command:

    unzip avoka-native-component-tools.zip

  4. Open a NodeJs command prompt window and change directory to the directory you just created.
  5. Type npm install and wait for the npm installer to finish.

Using the Toolkit

You can define the following tasks:

  • new – Generate a new component in the src folder, based on files in the template folders.
  • zip – Create a Maestro Library in the dist folder by bundling all files in the src folder into a Zip file.
  • watch – Helps automate the code generation and packaging process. It continuously monitors all files in the src folder structure and runs the zip task to generate a Maestro library, if it has been changed. It also continuously monitors new-component.properties and runs the new task to generate a new component if it has been changed.
  • redist – Create a new toolkit distribution file by packaging all of the templates into a new toolkit. This is useful if you customize your templates and want to share them with others.

To run any of these tasks in the toolkit installation folder, type gulp <task>. A few examples are provided below:


gulp new
gulp zip
gulp watch

The gulp new task takes an optional parameter to identify which template to use as a model for your new component. Usage is gulp new -templateName, where templateName is the name of a sub-folder in the template folder. If you don't supply this optional parameter, a default (-default) is assumed, which uses the component template files in template/default directory.

Note

The gulp new task regenerates your component's source files from the files in the template folder that overwrites any changes in the 'src/<componentName> directory. To avoid this, change the value of the 'component_filename property in the 'new-component.properties file immediately after you generate a new component, so the gulp new task uses the component_filename and it won't overwrite your original code.

To generate a new Maestro library with the default example component provided with the toolkit:

  1. Type gulp new to create a new component, based on the values in the two .properties files, in a src folder.
  2. Type gulp zip to package the new component as a Maestro library and named as the dist/maestro-lib-<filename>.zip.

To create a new component with customized filenames and metadata, follow the steps below:

  1. Edit library.properties and new-component.properties to set your preferences.
  2. Type gulp new to generate a new component in the src directory.
  3. Edit the new component's files in the src/widgets/<filename> directory.
  4. Type gulp zip to package all the components in the src directory as a Maestro library.

Next, learn how to create a native component library automatically.