Example:
Scene:
<!-- Adding text field within a drawer and group box -->
<div id='feedDrawer' x-mojo-element="Drawer">
<div class="palm-group">
<div class="palm-group-title">
<!-- Title and error status for invalid feeds -->
<span id="add-feed-title" x-mojo-loc="">Add News Feed Source</span>
</div>
<div class="palm-group unlabeled">
<div class="palm-list">
<div class='palm-row first'>
<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
<div class="title">
<div class="label">URL</div>
<div id="newFeedURL" x-mojo-element="TextField" align="left"></div>
</div>
</div>
</div>
<div class='palm-row last'>
<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
<div class="title">
<div class="label">Title</div>
<div id="newFeedName" x-mojo-element="TextField" align="left"></div>
</div>
</div>
</div>
</div>
</div>
<div x-mojo-element="Button" id="okButton"></div>
</div>
</div>
Scene assistant:
// Setup Drawer for add Feed; closed to start
//
this.controller.setupWidget('feedDrawer', {property:'myOpen
Property'}, this.feedDrawerModel={myOpenProperty:false});
// Setup text field for the new feed's URL
//
this.controller.setupWidget(
"newFeedURL",
this.urlAttributes = {
property: "value",
hintText: "RSS or ATOM feed",
focus: true,
limitResize: true,
textReplacement: false,
enterSubmits: false
},
this.urlModel = {value : ""});
// Setup text field for the new feed's name
//
this.controller.setupWidget(
"newFeedName",
this.nameAttributes = {
property: "value",
hintText: "Optional",
limitResize: true,
textReplacement: false,
enterSubmits: false
},
this.nameModel = {value : ""});
// Setup button and event handler
//
this.controller.setupWidget("okButton",
this.attributes = {
},
this.model = {
buttonLabel: "Add Feed",
buttonClass: "addFeedButton",
disabled: false
});
this.controller.listen('okButton', Mojo.Event.tap, this.checkIt.
bindAsEventListener(this));