Creating a Design Template

Contents

1. Using Templates

Having templates of frequently used design layouts can make the job of creating new designs much faster. If you’re creating an app with multiple screens and they all require the same navigation bar and toolbar, you don’t want to spend time creating those screens from scratch every time. In Design Center, you can save any design as a template to be recalled again and again.

For example, say you want to create a series of gallery screens, each displaying an image and a text description. You want each screen to have a navigation bar with the same label and buttons. You also want each screen to contain a toolbar with Previous and Next icons. Each screen also contains a solid background, an image, and a text widget. You can save each of these items on the template screen.

Back to Contents

2. Creating a Template

1. Using the Visual Designer, create the interface design you want to reuse as a template.
2. Select File>Save from the menu, and name the file. You must save the file as a design before saving as a template.
3. To save as a template, select File>Save As Template from the menu. MobiOne saves the file into the template gallery.

Note: MobiOne automatically saves the design in the appropriate device template browser.

Back to Contents

3. Creating a New Design from a Template

1. Select File>New>Device templates from the menu. Device is the device for which you are opening a template, e.g. iPad or iPhone.
   
   Template Browser window
2. Navigate to and select your template. A new design screen based on the template displays in the Visual Designer.

Back to Contents

4. Deleting a Template

1. Select File>New>Device templates from the menu. Device is the device for which you are opening a template, e.g. iPad or iPhone.
2. Navigate to the template you want to delete, and click the Delete Template link at the bottom of the window. The link contains the name of your template so you can verify your deletion.

Note: System templates installed with MobiOne Studio cannot be deleted.

Back to Contents

5. How Templates are Stored

A template consist of two files, a Visual Designer file (*.mobi) and an image of the design. These files are stored in the .mobione folder found in your user home folder as shown below.

Back to Contents

5.1 Images and Linked Resources

To increase the portability of a template, image widgets are stored within the template design file. Thus, if you modify the original image on your file system, the template will not display the updated image. You must manually re-insert the updated image into the design template.

Linked elements that reference other design files or JavaScript functions are saved within the template design file. Therefore, when you create a new design from a template that contains custom Link properties, you must manually update the Link values.

Back to Contents

6. Where Do I Learn More about MobiOne Studio?

The MobiOne online Learning Center site provides documents, tips, tutorials and videos to help answer your questions. Remember to check the Learning Center site for new and updated material.