MobiOne Studio 1.1

New and Noteworthy

Design for Any Device Orientation and Display Size (phase-1)

We are revamping the Visual Designer to enable the design of mobile user interfaces that look good in any device orientation, e.g., landscape, and on any-sized device display. To make this possible, we have introduced two new designer features: “Component Auto-Resize Layout” and “Scrollable Panel.” These features are described in more detail below.

Auto-Resize Layout

While the Design Center presents the standard iPhone 320x480 display area for composing your user interface, this size is only one of many possible target screen sizes that MobiOne application may appear in. Thus, we introduce the new concept of auto-resize. A MobiOne user interface design (.mobi file) consists of a UI component hierarchy. Each component has auto-resize properties that define how its parent container should resize it when rendered on a device that has different size or orientation than that of the Design Center.

The following screenshot illustrates a Navbar and its auto-resize settings.

The auto-resize settings control enables you to specify how to adjust a component’s margin and size. A component’s margins can be fixed (pixel units) to its container by selecting the specific I. The component’s size can be enabled to resize proportionally (%) by selecting the appropriate .

Scrollable Panel

The standard Panel component has been enhanced to support vertical scrolling. This enables you to create user interface designs in the Design Center that are taller than the iPhone display height (480px) or create resizable user interfaces such as a landscape orientation.

This screenshot illustrates a tall scrollable panel in the Design Center and the
panel’s appearance in landscape mode.

In the Visual Designer, a Panel’s vertical scrollbar is visible only when the Vertical Scrollbar property is checked and the panel is selected as shown below. All other times the scrollbar is invisible. Use the vertical scrollbar to adjust the panel’s viewable area up or down. The buttons above the panel and on the Properties Editor can be used to increase or decrease the panel’s Content Area Height property by 20 pixels per click.  

Transparent Panel

As a convenience, a transparent panel component has been added to the palette. Transparent panels are especially important in the creation of resizable user interfaces for portrait and landscape orientations.

In addition to a transparent background property, this component’s other default properties include 320px width and 0 width border and corner radius.

Make Phone Calls and Send SMS Messages

You can now configure Design Center components to make phone calls or sending SMS messages. The key is setting the Link property of a component to a tel: URL for placing a phone call or to an sms: URL for sending a text message. See the Apple URL Schema Reference for a description of these URL formats.

The following screenshot illustrates use of the tel: and sms: URL schemas . In this example the Phone Home button is configured with the URL, tel:123-456-7890. When this button is clicked in on your iPhone or in the Test Center, it will open the iPhone’s phone application and call the number 123-456-7890.  The SMS Home button’s Link property is set to sms:123-456-7890

The Test Center’s iPhone Emulator does not provide telephone or SMS services. When a tel: or sms: URL is loaded, the emulator provides user feedback in the form of an informational dialog as shown below.

Improved PhoneUI Framework and Code-Gen

The PhoneUI (ver 0.1.2) framework used by MobiOne has been updated with two new public utility JavaScript functions.

1. phoneui.gotoPage(pageId, tranditionEffect)

The gotoPage() function makes it possible to programmatically control the current page being shown using the gotoPage. This function can be found in the phoneui.js file


 * Callback from phoneui when document is loaded.

 * Add your custom initialization logic here.


 * @param pageId: String -  Each design page has an  

 *   identifier that is generated in the designs

 *   corresponding HTML file.

 * @transitionEffect: String - the string name of

 *   the visual effect to use when transitioning to

 *   pageId.  Values: “DEFAULT”, “NONE”, SLIDE_LEFT”,



phoneui.gotoPage(pageId, transitionEffect)

2.  phoneui.documentReady()

In some cases an application will need to perform custom initialization. When PhoneUI completes initialization it will call your custom phoneui.documentReady() function if it exists. A stubbed version of this callback function can be found in the custom generated <design>_custom.js file.


 * Called when document is loaded.

 * Add your custom initialization here.



File Upgrade Policy

There are occasions when the addition of new  product features requires the revision of the MobiOne Visual Designer file format (.mobi files). When the Design Center attempts to load a design file created with an old version of MobiOne, you will be consulted for how to handle the file. See the screenshot of the File Format Notification Dialog below for your options.

MobiOne’s default file upgrade policy is configured using the system settings as shown below.

New Design Center Template Gallery - Online

The Design Center template system has been improved with access to an online gallery of templates. The template gallery will be frequently updated with new and interesting community design templates.

Click More Templates... to open template gallery in your web browser.

Online Template Gallery