MobiOne Studio Quick Start Tutorial

Contents

1. Introduction

Welcome to MobiOne Studio! We think the best way to give you a quick overview of MobiOne Studio is to guide you through creating your first mobile application. In this tutorial, you will design an iPhone mobile web application for MyCo, Inc. The app will have two screens - a home screen and a contact screen. You will learn how to layout user interface elements in the Visual Designer and create navigation links between the screens. Finally, you will test the design in Test Center and then on your phone.

Note: MobiOne Studio is optimized for iPhone/iTouch and iPad website and web app development. Features for developing apps for other phones and devices are planned for MobiOne Studio.

Here is a look at how the finished app will look on your phone.

    

Back to Contents

2. Opening MobiOne Design Center

1. Click the Windows Start button on the taskbar, and choose All Programs.
2. Open the MobiOne folder in the list, and click MobiOne Design Center.

Design Center opens to a blank design screen. In the center is the Visual Designer, a UI builder that represents your phone’s screen. On the left are the palettes from which you can add design elements to the Visual Designer. The Properties view on the right allows you to change the attributes of a design element.

Back to Contents

3. Creating a Home Screen

The home screen is the first screen the app user sees. It links to all other screens in the app. Begin by placing a branding logo image on the screen. Right-click the following image, and save it to your computer.

3.1 Adding an Image

1. From the Widgets palette, drag the Image widget to the Visual Designer. When you drop the widget, you are prompted to select an image. Navigate to the location where you saved the logo above, and select the logo file.
2. Drag the image to the top of the screen. By default, guidelines appear to assist you in aligning elements. Center the image, and align it to the top of the screen.

Back to Contents

3.2 Adding a Header

1. Drag the List Header widget into your design. Drop it just below the logo image. It doesn’t need to snap to the bottom of the logo image.
2. Double-click the label on the list header, and type Who We Are.

Back to Contents

3.3 Adding a Panel with a Gradient Background

The design requires a gradient panel, which will contain a paragraph of text about the company. You will begin by adding a panel and then modifying the properties to create a gradient colored background.

1. Drag a Panel widget into the design placing it under the list header as shown below. Use the guidelines to center the panel, and leave a space between it and the header.
2. Size the panel by either dragging one of the sizing handles on the perimeter of the panel or type 301 in the Width field and 109 in the Height field of the Properties view.

Home screen with the addition of a panel
3. With the panel selected, choose Gradient Color from the Background Style drop-down in the Properties view.
4. In the Gradient Start Color field, type 210,210,210,255 (or click the More button to select a color).
   
   Note: The numbers in the Color fields represent the red, green, and blue values of an RGB color. The fourth value is the alpha channel, or transparency. To make a color more transparent, reduce the alpha channel value. 255 is solid, and 0 is completely transparent. To access the color values after a color is already selected, double-click the color to reveal the color values.


5. In the Gradient End Color field, type 255,255,255,255 (or click the More button to select a color).
6. In the Gradient End Point field, type [50,200]. You can also use relative positioning by using percentages, e.g. [50%,50%].
7. Deselect the Vertical Scrollbar checkbox to remove any scrollbar effects that panels have by default.
8. Deselect the green vertical resize arrow in the Auto-resize field to disable vertical resizing.

Now, you should have a smooth gradient color background on your panel.

Back to Contents

3.4 Adding Text

Use the Text widget to add custom text to your design. If you have more than one line of text, the text wraps automatically when it exceeds the width of your text widget.

1. Drag the Text element from the Widgets palette to the Visual Designer. Position the text so it is layered on top of the gradient panel, leaving a margin between the edge of the panel and the text.

Text widget placed on the gradient panel
2. With the text widget selected, notice the handles on each end. Drag the right handle to widen it.

Sizing a text widget
3. Highlight the following company description text, and press CTRL+C to copy it to the clipboard.

You need products - products that enhance your company image. MyCo has those products. Explore the options below to see how partnering with us can give you the edge over your competition.

4. Double-click the text in the text widget to enable in-line editing. Press CTRL+V to paste the text. Notice the text widget expands automatically to accommodate the paragraph. When you type text directly into a text widget, the same will happen.

Back to Contents

3.5 Adding List Items

Next, you will add two list items. List items are commonly used for navigating to other screens in your app. You will learn how to create a navigation link to another screen later in this tutorial.

1. Drag a Rounded List Item from the Widgets palette into your design below the panel. The guidelines help you align the list item with the panel.
2. Double-click the label, and type What We Do. Press Enter or click away from the text to accept text changes.

Tip: When you move a text widget within a list box, predefined areas known as landing zones appear into which the text snaps. Landing zones automatically align and style text according to the phone’s user interface guidelines. To position the text somewhere other than in these landing zones, press the CTRL key while moving the text widget.

3. Drag another Rounded List Item from the Widgets palette to the Visual Designer. Notice it is a rounded rectangle. However, you want to combine these two list items into a single list. To do so, drag the list item directly below the first list item until they touch. When you release, they automatically merge into a single list.
4. Double-click the label, and type How to Reach Us.

Home page with the addition of a list
5. Click the Save icon on the toolbar, or press CTRL+S to save the page. Type MyCoHome as the filename.

Back to Contents

4. Creating a Contact Screen

The How to Reach Us list item on the home screen must link to a contact screen. Now, you will create a contact screen so you can link to it from the home screen.

4.1 Opening a New Blank Design Screen

1. Click the New Design tab, marked with a +, in the tab bar just below the toolbar. This opens a screen that allows you to choose either an iPhone or iPad design.

New Design tab
2. Choose iPhone, and then choose the Basic template.

Back to Contents

4.2 Adding a Navigation Bar

1. Drag the Navigation element from the Widgets palette into the design. Snap it to the top of the screen.

Contact screen with navigation bar
2. For this app, you don’t need the navigation button. Select it, and press Delete. The Back button by default has a behavior assigned to it. Therefore, it needs no changes.
3. Double-click the title, and type MyCo, Inc.
4. Click the Save icon on the toolbar, or press CTRL+S to save the page. Type MyCoContact as the filename.

Back to Contents

4.3 Creating Navigation Links Between Screens

1. Click the MyCoHome tab to open the home screen design.
2. Select the How to Reach Us list item.
3. In the Properties view, click the On Click drop-down, and select Go to Screen.
4. Type MyCoContact.mobi in the Screen field, or click the More button , and navigate to the file.
5. In the Transition drop-down, select Slide Left to specify how this screen transitions to the next when clicked.

List item properties
6. Because you will not link the What We Do list item to a screen, select the arrow, and press Delete.
7. Save the changes.

Back to Contents

5. Testing What You’ve Done So Far

Now that you have a home screen linked with a contact screen, you can run the phone emulator and see how your app will work on your phone.

1. With the MyCoHome file open in the Visual Designer, click the Run Design button . The HTML, CSS and JavaScript code for running your app are generated, and then Test Center’s phone emulator displays your app for testing. The pointer appears as a gray circle called a touch finger that represents the average size and touch precision of a finger on the phone’s screen.



2. Click How to Reach Us. The screen slides left and opens the contact screen.
3. Click the Back button to return to the home screen.
4. Close the Test Center window.

Back to Contents

6. Adding Contact Information

Say you want a simple way for your clients to email or call you from your contact screen. You can add buttons to your design that allow them to do so with a tap. You also want to include your address and phone number on the screen.

6.1 Changing Text Properties

When you add text to the screen, use the Properties view to customize the look of the text such as by changing the font, color, or shadow properties.

1. Click the MyCoContact tab to open the contact screen design.
2. Drag a Text widget into the Visual Designer below the navigation bar.
3. Double-click the text, and type the following:

We are standing by to hear from you!

Notice the text widget expands to include all the text.

4. Center-align the text widget with the help of the guidelines.
5. In the Properties view, deselect the Text Shadow Enabled checkbox.
6. Add another text widget, and type an address and phone number. Remove the shadow from the text, and center the text near the bottom of the screen.

Tip: To start a new line when typing in a text widget, press SHIFT+Enter.


Contact screen with text widgets
7. Add another text widget above the address text. Use the guidelines to align it with the address.
8. Type MyCo, Inc. in the new text widget, and in the Font field of the Properties view, click the More button .
9. Select the Bold font style, change the font size to 16, and click OK.
10. Remove the text shadow.

Note: When you change text properties, it affects all text in the text widget. Therefore, you cannot mix text properties within the same text widget.

Back to Contents

6.2 Adding an Email Button

1. Drag a Push button from the Widgets palette to the Visual Designer. Use the guidelines to center the button.
2. Double-click the button label, and type Send an Email. Press Enter to exit text editing.
3. In the Properties view, select Go to URL from the On Click drop-down, and type mailto: and an email address, e.g., mailto:john.doe@company.com in the URL field. When the user taps the Email button, the user’s email window opens with the email address in place.

Back to Contents

6.3 Adding a Call Button

1. Drag a Push button from the Widgets palette to the Visual Designer. Use the guidelines to align the button below the Email button.
2. Double-click the button label, and type Call Us Now. Click away from the button to exit text editing.
3. In the Properties view, select Dial Phone from the On Click drop-down, and type a telephone number, e.g., tel:555-123-4567, in the Phone Number field.

Tip: To have the button allow the user to send a text message instead of a phone call, select Send SMS from the On Click drop-down.

4. Save the changes.

When the user taps the Call button, the phone opens a message allowing the user to confirm the phone call.

Back to Contents

7. Testing the Final App

You have now completed the app design. Let’s test the final version.

1. With the MyCoHome file open in the Visual Designer, click the Run Design button .
2. In the phone emulator, click How to Reach Us. The screen slides left and opens the contact screen.
3. Click the Send an Email button. Your desktop email client opens a new email addressed to the recipient you specified. When you run this on your phone, the phone’s email window opens with the email address in place.
4. Click the Call Us Now button. A window appears containing the phone number you provided in the button’s On Click property. Test Center is unable to make actual phone calls. Instead it simulates phone calls and SMS messages by opening a window containing the call details. When you run this on your phone, your phone’s dialing application is activated.

Testing the Call button
5. Click the Back button to return to the home screen.
6. Close the Test Center window.

Back to Contents

8. Sending the App to Your Phone

After you’ve tested in Test Center, you can send the app to your phone to try it live. MobiOne includes access to an AppCenter cloud service designed to allow you to test designs on your phone.

Note: The Upload as Web Application function requires your phone to be configured to receive notifications by either SMS text or email. If you are testing on a device that isn’t a phone, e.g., iTouch, it must be configured to receive email notifications.

1. With the MyCoHome file open in the visual designer, click the Upload as Mobile Web Application icon on the toolbar. A window opens containing information about the MobiOne AppCenter cloud service. Enter your email address, and click Next.

Upload as Mobile Web Application wizard - page 1
2. The files to be uploaded appear on the page. You can add additional files by clicking the Import icon . Click Next.

Upload as Mobile Web Application - page 2
3. Type your email or text address in the Email Recipients field. You can send to multiple recipients by separating the addresses with a semicolon.

Upload as Mobile Web Application - page 3
4. Click Next, and click the Upload button to upload your app to the AppCenter cloud service.

Upload as Mobile Web Application - page 4
5. When the upload is complete, click Finish. You receive a notification on your phone from the AppCenter server containing a link to your app. Click the link to view and test your app. The wizard also provides you with the link to the app.

Upload as Mobile Web Application - page 5

Note: The total size of your app files cannot exceed 20MB. If the total file size of your exceeds 20MB, use the Export to HTML feature in Design Center to save your design files to a folder you specify. You can then upload those files for testing to your own hosted website via any FTP or SCP upload tool.

Back to Contents

9. 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.