How To: Custom Widgets
Ares allows you to include custom Mojo widgets within your application. This document will cover how to add it to your Ares project.
Create the custom widget JavaScript file inside your application
- With an existing application open, select the New Document from the New
Application menu at the top of the Ares UI.
- In the New File dialog box, select your application’s root folder /app directory and set a file name for your widget (i.e. myWidget.js) and click OK. This will open myWidget.js in the code editor. (so you have something like Applications/myapp/app/myWidget.js)
- Create the javascript for your mojo widget in myWidget.js and save it.
Optional - Create the widget template HTML file
- In the File tree, create a new folder called “myWidget” (or whatever you called your widget above) under your application’s app directory. (Applications/myapp/app/myWidget/)
- With an existing application open, select the New Document from the New Application menu at the top of the Ares UI.
- In the New File dialog box, select the folder you created in the step above and set a file name for your widget’s template (i.e. myWidget.html) and click OK. This will open myWidget.html in the code editor. (so you have something like Applications/myapp/app/myWidget/myWidget.html)
- Create the widget template html in this file and save it.
Add your new widget to sources.json
- Open the sources.json file in your application root directory and add
myWidget.js with the correct path to the file in the standard Mojo way
Use the widget in Ares
- Place an <html> widget onto your canvas from the palette, size and place it as desired to contain your widget.
- In the property inspector, select the button in the content property to
launch a popup code editor, and put in something like the following code:
<div id="myWidget1" x-mojo-element="myWidget"></div> - In the scene assistant file for your scene, at the bottom of the setup
method, add something like (adjusting to your widget’s name, the widget instance
on the canvas name, and your widget’s properties - this is an example):
this.controller.setupWidget(“myWidget1”,{},{someproperty:”Yay!”});