MobiOne Studio 1.5 Highlights

The following features are new for the MobiOne Studio 1.5 release.

 

Design with Multiple Design Form Factors

Use the new View>Device menu or the Change Device icon to change the Visual Designer’s device form factor between iPhone and iPad.


Device menu

 

The following image shows a login user interface design laid out in the Visual Designer using various form factor and orientation adjustments.


One design shown with various form factor adjustments

 


Form Improvements

MobiOne has two new additions for making forms more robust - additional result types and Submit and Reset On Click event actions.

 

New Form Result Types

The Form Result Type property has been updated to recognize the following data types:

  • • XML
  • • JSON
  • • JSONP
  • • Text
  • • HTML
  • • RAW (undefined)
  • • Remote Screen
  • • Web Page

 

The return types of XML, JSON, JSONP, Text, and HTML are data. For these types, you must provide a data handler function to process the data and control the UI screen flow. A result type of Remote Screen loads a MobiOne UI screen generated by the Visual Designer. Lastly, a result type of Web Page navigates the UI to an external URL or website.

 

Form Actions

The On Click event has two new actions: Submit Form and Reset Form. Now you can create custom form Submit and Reset buttons using the Custom button widget.


Submit Form On Click action

 


Code Generation Improvements

Two new HTML generation settings give you more flexibility, and improvements to the code generator automatically provide better memory optimization.

 

JQuery Library versions 1.3 - 1.7 Supported

With the new JQuery version setting, you can now specify the version of the JQuery JavaScript library to use in your projects. The Design Center code generator includes the appropriate version of the jquery.js file in the project output and includes the library the <HEAD> section of each generated HTML file. To access the setting, select Window>Settings from the Design Center menu, expand General>HTML Generation, and select JQuery Version.


JQuery version setting

 

Cross-Platform Spinner Setting

The internal spinner selection control used by the ComboBox and SelectListMenu has been reimplemented to use the native spinner implementation on iOS devices and to emulate the spinner control on non-iOS platforms such as Android or a webkit-based desktop browser such as Chrome. In Design Center, select Window>Settings from the menu, expand HTML Generation>iOS to access the spinner emulation setting.


Spinner emulation setting

 

Note: If your applications are targeted only to iOS devices, you can disable this setting to help reduce application size.

 

Memory Optimization

The Design Center code generator has been enhanced to perform more reliably on platforms where memory is limited. The code generator automatically adapts its memory settings to a level necessary to complete the code generation and optimization processes.

 


New Panel Content-Height Attribute

If your webapp uses server-side scripting (e.g., PHP, JSP, ASP) to dynamically modify a panel's content-height, then the script must inform the MobiOne layout engine of the new panel content-height. This is accomplished by adding the HTML attribute data-layout-content-height="<integer height>" on a panel's HTML scroller element (see code sample below; the scroller is identified by the class="m1-iscroll-scroller" attribute). When the data-layout-content-height attribute is present, the layout engine uses its value as the panel widget's content-height during the screen layout process.

<div id="m1-list-panel1" class="m1-iscroll-wrapper">
 <div id="m1-list-panel1-scroller" class="m1-iscroll-scroller" data-bounce="true"
  data-layout-content-height="220">

 


For further information, see the release notes.