© 2013 Genuitec, LLC. All rights reserved
The MobiOne Visual Designer provides a palette of visual widgets you can place on a form and customize through a properties editor. At runtime, your application might need to interact with and update these widgets. This document describes a brief description of each widget implementation along with JavaScript snippets for accessing or updating the widget's value.
MobiOne apps and web apps are configured with the JQuery JavaScript library. The following JavaScript snippets make use of JQuery's selectors and related APIs. To learn more about JQuery, see jquery.org.
To read and update widget states, unique widget IDs are required across all UI screens. When Design Center's code generator converts UI screen layouts into HTML, the HTML elements that make up each widget must be assigned a unique ID. Design Center creates unique HTML element IDs by concatenating the name of the widget's container and the widget's ID property assigned in the Visual Designer, e.g., screen1-text1.
When you run your design or generate application files, the app generator adds another prefix to all IDs as an indicator that the IDs were generated by MobiOne. So, for example, if a text widget has an ID of text1, it will be generated as an HTML element with id='m1-containerName-text1' ('m1-' is the default prefix). Take this into account when using the code snippets below. Wherever you see #someId in the jQuery selector, you should change it to #m1-someId. This prefix is set in the HTML Generation settings in Design Center. If you prefer, you can change the setting to a blank value to avoid the prefix, thus allowing you to use the code snippets as written. To change the setting in Design Center, select Window>Settings from the menu, choose HTML Generation, and clear the prefix in the CSS Class Prefix field.
The text widget is implemented as a styled <div> element.
Hint: If you plan to dynamically update a text widget, be sure to set the widget size in the Visual Designer to a sufficient size to hold the maximum content.
<div id="form1-text1" class="text">abc</div> |
$('#form1-text1').text() |
$('#form1-text1').text('hello world') |
The Checkbox implementation renders a custom checkbox presentation. Therefore, the traditional HTML <input type="checkbox"...> element is wrapped in a styled <div> element, which provides the custom checkbox presentation.
<div id="form1-checkbox1">
<input class="iscroll-no-prevent-default checkbox" type="checkbox"
checked="true" value="checkbox1Value"/>
</div> |
<!-- method-1 -->
$('#form1-checkbox1 > input').is(':checked')
<!-- method-1 -->
$('#form1-checkbox1 > input').attr('checked') |
$('#form1-checkbox1 > input').val() |
//check the checkbox
$('#form1-checkbox1 > input').attr('checked',true)
//uncheck the checkbox
$('#form1-checkbox1 > input').attr('checked',false) |
The Radio Button implementation renders a custom radio button presentation. Therefore the traditional HTML <input type="radio"...> element is wrapped in a styled <div> element which provides the custom radio button presentation. Radio buttons with the same name property form a radio button group. With in a radio button group only one button can be selected.
<div id="form1-radio1" class="clickable"> <input class="radiobutton" type="radio" name="radio-group1" value="radio1Value" checked="true"/> </div> <div id="form1-radio2" class="clickable"> <input class="radiobutton" type="radio" name="radio-group1" value="radio2Value"/> </div> |
//get the checked radio button
$('input[name="radio-group1"]:checked')
//get the value of the checked radio button
$('input[name="radio-group1"]:checked').val() |
//check radio button 2
$('#form1-radio2 > input').attr('checked',true) |
The Toggle widget (a.k.a., Switch) is implemented as a checkbox widget with a custom presentation. Therefore, a traditional <input type="checkbox"> element is wrapped in a styled <div> that provides the toggle button's presentation. The On visual state is represented by the checkbox's checked property set to true.
<div id="form1-toggle1" class="toggle iscroll-no-prevent-default">
<div>
<input type="checkbox" checked="true"/>
</div>
</div>
|
//method-1: test the Toggle for ON state set
$('#form1-toggle1 input').is(':checked')
//method-2: test the Toggle for ON state set
$('#form1-toggle1 input').attr('checked') |
//get the Toggle ON/OFF state. Returns a String with value On when checked.
$('#form1-toggle1 input').val() |
//set Toggle state ON
$('#form1-toggle1 input').attr('checked',true)
//set Toggle state OFF
$('#form1-toggle1 input').attr('checked',false) |
The list-based widgets, combobox, select list, and select list menu, are implemented using separate HTML components for the visual and model functions, respectively. In the case of the combobox, the list is implemented using traditional styled HTML5 list tags, <ul><li>... The model or state function is implemented using an HTML <select> component.
Note: To see a comprehensive list of snippets, download the JQuery <select> cheatsheet.
The Combobox widget implementation renders a custom drop-down menu that presents selectable list items. The selection mode is single-select only. The visual presentation is implemented as a styled <div> with the menu items listed in a drop-down menu. The state of the selection is held in a hidden <select> element.
<div id="form1-combobox1" class="select-list-menu-spinner iscroll-no-prevent-default combobox" name="combobox1" data-hiddenInputId="form1-hidden-select-combobox1" data-selectionInfoId="form1-combobox1" data-multiple="false"> </div> <div class="aux-hidden-div"> <select id="form1-hidden-select-combobox1" name="combobox1"> <option value="value1" label="Item 1" selected>Item 1</option> <option value="value2" label="Item 2">Item 2</option> <option value="value3" label="Item 3">Item 3</option> <option value="value4" label="Item 4">Item 4</option> <option value="value5" label="Item 5">Item 5</option> </select> </div> |
//single select list: get selected option
$('select[name="combobox1"] :selected')
//get value of selected option
$('select[name="combobox1"]').val()
//get label/text of selected option
$('select[name="combox1"] :selected').text() |
//select the first option in list
$('select[name="combobox1"] option:first').attr('selected','selected')
phoneui.preprocessDOM('#screenId'); //force UI to update
//select the last option in list
$('select[name="combobox1"] option:last').attr('selected','selected')
phoneui.preprocessDOM('#screenId'); //force UI to update
//select the nth option in list
$('select[name="combobox1"] option:eq(2)').attr('selected','selected')
phoneui.preprocessDOM('#screenId'); //force UI to update |
The list-based widgets, combobox, select list, and select list menu, are implemented using separate HTML components for the visual and model functions, respectively. In the case of the select list, the list is implemented using traditional styled HTML5 list tags, <ul><li>... The model or state function is implemented using an HTML <select> component.
Note: To see a comprehensive list of snippets, download the JQuery <select> cheatsheet.
The SelectList implementation renders a custom list presentation with selectable list items. The selection mode can be single select or multiple select. The visual presentation is implemented as a styled <ul><li> list. The state of the selected items is held in a hidden <select> element.
<!-- visual representation --> <ul id="form1-selectlist1" class="rounded-list selection-list list" data-multiple="false" data-hiddenInputId="form1-hidden-select-selectlist1"> <li id="form1-" class="first selected clickable effect-1" data-val="selectListItem1"> <label id="form1-2">Item 1</label> </li> <li id="form1-3" class="clickable effect-1" data-val="selectListItem2"> <label id="form1-4">Item 2</label> </li> <li id="form1-5" class="last clickable effect-1" data-val="selectListItem3"> <label id="form1-6">Item 3</label> </li> </ul> <!-- SelectList model --> <div class="aux-hidden-div"> <select id="form1-hidden-select-selectlist1" name="selectlist1"> <option value="selectListItem1" label="Item 1" selected>Item 1</option> <option value="selectListItem2" label="Item 2">Item 2</option> <option value="selectListItem3" label="Item 3">Item 3</option> </select> </div> |
//single select list: get selected item
$('select[name="selectlist1"] :selected')
//multiple select list: get selected items as array
$('select[name="selectlist1"] :selected').each(
function(i, selected) {
//do something with selected option
// e.g., print value of selected item
console.log( $(selected).val() );
}
)
//get value of selected item
$('select[name="selectlist1"]').val()
//get label/text of selected item
$('select[name="selectlist1"] :selected').text()
|
The list-based widgets, combobox, select list, and select list menu, are implemented using separate HTML components for the visual and model functions, respectively. In the case of the combobox and select list, the list is implemented using traditional styled HTML5 list tags, <ul><li>... The model or state function is implemented using an HTML <select> component.
Note: To see a comprehensive list of snippets, download the JQuery <select> cheatsheet.
The SelectListMenu implementation is similar to SelectList. It renders as a single list item that when selected will expand and present its selectable list items in either a SelectList mode or in a spinner widget. The selection mode can be single select or multiple select. The visual presentation is implemented as a styled <ul><li> list. The state of the selected items is held in a hidden <select> element.
<!-- visual representation -->
<ul id="form1-list1" class="rounded-list list">
<li id="form1-selectListMenu1" class="first last select-list-menu clickable
hyperlink-internal"data-action-click-id="action1"
data-hiddenInputId="form1-hidden-select-selectListMenu1"
data-selectionInfoId="form1-selectListMenu1-selinfo" data-multiple="false">
<label id="form1-selectListMenu1-label">Menu Label</label>
<div id="form1-selectListMenu1-selinfo"></div>
</li>
</ul>
<!-- SelectListMenu model -->
<div class="aux-hidden-div">
<select id="form1-hidden-select-selectListMenu1" name="selectListMenu1">
<option value="value1" label="Item 1" selected>Item 1</option>
<option value="value2" label="Item 2">Item 2</option>
<option value="value3" label="Item 3">Item 3</option>
<option value="value4" label="Item 4">Item 4</option>
<option value="value5" label="Item 5">Item 5</option>
</select>
</div> |
See the Select List snippets above.
The InputField widget is a styled HTML5 <input> element. The content of the input field is stored in the value attribute.
<input id="form1-textField1" class="textfield textfield-border" value="" type="text" name="textField1" placeholder="input field"/> |
//get the text of the input field
$('#form1-textField1').val() |
//update the text of the input field
$('#form1-textField1').val('hello world') |
The PasswordField widget is a styled HTML5 <input> element. The content of the input field is stored in the value attribute.
<input id="form1-passwordField1" class="textfield textfield-border" value="" type="password" name="passwordField1" placeholder="Password"/> |
See the Input Field snippets above.
The TextArea widget is implemented as a styled HTML5 <textarea> element.
<textarea id="form1-textArea1" class="textfield textarea textfield-border iscroll-no-prevent-default" name="textArea1" wrap="soft">Sample text </textarea> |
//get the textual content of text area
$('#form1-textArea1').text() |
//update the textual content of text area
$('#form1-textArea1').text('hello world') |
All button widgets are implemented as a styled <div> element. The div's content is rendered as the button label. CSS classes give the div its personality. Below is the code for the two button and push-button classes. The "clickable" class is a marker that identifies elements that have a click behavior.
<!-- html impl -->
<div id="m1-pushbutton1" name="pushbutton1" class="m1-clickable m1-push-button
m1-button">Button Text here</div>
/* css */
.m1-button{
-webkit-tap-highlight-color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);
color: white;
cursor: pointer;
font-family: Helvetica;
font-size: 12px;
font-weight: bold;
overflow: hidden;
padding: 0px 0px 0px 0px;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
.m1-push-button{
-webkit-border-image: url(res/images/pushButton.png) 5 5 5 5 stretch stretch;
background-image: url(res/images/pushButton_touch.png);
background-position: -1000px -1000px;
background-repeat: no-repeat;
height: 30px;
width: 100px;
} |
//hide button
$('#form1-button1').css('visibility', 'hidden');
//show button
$('#form1-button1').css('visibility', 'visible'); |
Image button is a clickable image with optional text label. Similar to other buttons, it is implemented as a styled <div> element. The button's position, size and image src are implemented as a CSS ID.
<!-- html impl --> <div id="m1-imagebutton1" name="imagebutton1"class="m1-clickable m1-button">Image Button</div> /* css */
#m1-imagebutton11{
-webkit-border-image: url(images/foo.png) 1 1 1 1 stretch stretch;
border-width: 1px 1px 1px 1px;
height: 227px;
left: 0px;
line-height: 225px;
top: -9px;
width: 320px;
} |
$('#m1-stopwatch-startBtn').css('-webkit-border-image', 'url(' + newUrl + ') 1 1 1 1 stretch |
The Image widget is implemented as a styled <img> element. The image size and position are specified by CSS ID.
<img id="form1-image1" src="images/sample.png"/> |
$('#form1-image1').attr('src', newImagePath); |