Test Center User Guide

Contents

1. Introduction

When developing an application in MobiOne Studio, you begin with Design Center, designing both the look of each screen and the user interactivity. Test Center then lets you test your application, and if necessary, develop it further using development tools.

Although the basic HTML 5 and JavaScript source files are generated for you when you run your design from Design Center, your application might require custom scripting for advanced application features. This is where Test Center development tools come in. Not only can you view and try out your application design in the device emulator, you can use the testing and development tools to customize code to fit your requirements.

Back to Contents

2. Using the Device Emulator

The device emulator allows you to view and test your mobile web applications. Your design opens automatically into the emulator when you click the Run Design icon in Design Center. In addition, you can use the emulator to browse the Internet, add web applications to the Home screen, and perform other browsing functions just as if you were using your actual device.

Click the Home button to open the device's Home screen. From there, you can use the browser application to open any website or click an app icon to open a site from the Home screen. Right-click menus allow you to reset the Home screen, change wallpaper, or delete an app icon.

Back to Contents

2.1 Devices & Device Management

MobiOne Design Center and Test Center support development for iPhone and iPad devices. In Test Center, you can change the device view to see how apps appear on either device, as well as in either landscape or portrait orientation.

2.1.1 Changing the Device

With the device emulator open, click the arrow on the Change Device icon , and select the device you want to view.

  

Back to Contents

2.1.2 Scaling

When viewing the device emulator in iPad mode, you can set the scaling of the device. Click the arrow on the Scale icon , and select a scaling percentage. In iPhone mode, the only scaling option is 100%.

Back to Contents

2.1.3 Rotating

When designing an application, you want to consider the screen orientations of the device. If you are designing an application to run in both portrait and landscape orientations, you want to test both orientations.

To rotate the device screen in the emulator, click the Rotate icon to toggle between portrait and landscape orientations.

Back to Contents

2.2 Using the Home Screen

Use the device emulator Home screen just as you would the Home screen of your actual device. Open the Home screen by clicking either the Home button on the device emulator faceplate, or clicking the Show Home Screen icon on the toolbar. You can customize your Home screen by changing the wallpaper and adding and removing app icons.

2.2.1 Changing Home Screen Wallpaper

1. To change the wallpaper, right-click the Home screen, and select Change Wallpaper from the menu. The Wallpaper setting opens in the Tool panel.

Wallpaper setting
2. Click the More button beside the device for which you are selecting wallpaper, and navigate to an image. You can download free test center wallpaper images from the MobiOne Wallpaper Gallery.

Back to Contents

2.2.2 Adding/Removing App Icons

1. Open a website by clicking the Browser icon and navigating to the site you want to add to the Home screen, or run your design from Design Center.
2. Click the Open Action icon in the button bar, and select Add to Home Screen from the menu.

Note: If the button bar is not available, select Browser>Button Bar from the menu to toggle the button bar on.

  


      
Open Action menu and Add to Home screen
3. Click the Add button to add the app icon to the Home screen.

App icon added to the Home screen

Tip: Using the Home screen is a great way to test the custom app icon and startup image that you included in your app design. When you click the icon on the Home screen, the startup image appears, and then the app opens.

To remove an app icon from the Home screen, right-click the icon, and select Delete from the menu. 

Back to Contents

2.3 Using the Web Browser

You can use the device emulator to browse the web. This is useful for seeing how other websites appear on mobile devices.

2.3.1 Address and Button Bars

The address bar allows you to enter a web address, search for a site, or reload a page. The button bar contains the Back, Forward, Menu, Bookmark, and Page actions. These bars can be toggled on or off using the Browser menu.

Select Browser>Button Bar or Button Bar + Address Bar to toggle the button and address bars. When these bars are visible, the Reload, Back, and Forward icons are available.

Tip: Click the screen header to toggle the address bar on/off.

When the address and button bars are disabled, use the Reload, Back, and Forward actions on the Browser menu, or use the Back , Forward , and Reload icons on the toolbar.

Back to Contents

2.3.2 Panning, Scrolling, & Zooming

There are two methods for panning/scrolling a page that is larger than the screen.

To use traditional Windows scrollbars, select Browser>Scroll Bars to toggle on/off horizontal and vertical scrollbars.

To pan the view, press the CTRL key while moving the mouse in the direction you want to pan. Vertical and horizontal page position indicators appear on the screen.

Use the mouse wheel to vertically scroll the browser or web app. No page position indicators are shown during vertical scrolling.

Zooming a page can be done with the zoom slider or by using the pinch-zoom method. To use a zoom slider, select Browser>Zoom, and use the slider to adjust the zoom amount.

To use pinch-zoom, press ALT to display two touch-finger pointers. Move the mouse to space the pointers. While holding the left mouse button down, move the finger pointers toward each other to zoom out. Move them away from each other to zoom in.

Back to Contents

2.3.3 Using Bookmarks

You can bookmark websites using the Open Action icon on the button bar. Retrieve bookmarked pages using the Bookmark icon .

1. Open a website by clicking the Browser icon , and navigating to the site you want to bookmark.
2. Click the Open Action icon , and select Add Bookmark from the menu.
3. Enter the name you want to display in the bookmark list, and click Save.

Adding a bookmark
4. To open a bookmarked site, click the Bookmark icon on the button bar, and select a site from the list.

Opening a bookmarked site

Back to Contents

2.4 Sending a URL to a Device

When using the Test Center device emulator to view a URL, you can easily send the URL to your device or to other recipients via email. The email is sent using the MobiOne AppCenter cloud service, by default.

Note: See the Upload as AppCenter Website Tools setting to disable the AppCenter email service.

1. With the device emulator open, click the Browser icon , and navigate to a web page.
   
Viewing a web page in the device emulator
2.  Click the Send URL to Phone icon .

Sending a URL to an email recipient
3. The URL of the page you are viewing in the device emulator appears in the URL field. You can enter any URL to send.
4. Enter one or more email addresses in the Email Recipients field. Separate multiple addresses with a semi-colon.
5. You can choose whether or not to open the URL in the device emulator, and you must be sure the AppCenter Policy Review checkbox is selected to continue.
6. Click Finish. The URL is sent to the email address(es) you specified.

Back to Contents

2.5 Uploading a Mobile Web Application

To test your application live, you can send the app to your device. MobiOne includes access to an AppCenter cloud service for testing designs on your device.

Note: The Upload as Web Application function requires your device 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 your design open in the device emulator, 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 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 device 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 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

2.6 Other Tools

2.6.1 Toggling the Device Faceplate

If you prefer to see only the device screen without the faceplate, hide the faceplate by clicking the Show/Hide Faceplate icon . By default, the faceplate is visible.

Back to Contents

2.6.2 Capturing a Screen Image

You can capture a screen image of what appears in the device emulator by clicking the Capture Image of Emulator icon . An image preview opens from where you can save the image, copy to the clipboard, or print.

Back to Contents

2.6.3 Viewing Source Code

Viewing source code of other websites is a useful learning tool. With a web page open, select Tools>View Source from the menu. The Tools panel opens containing a list of source files you can view. If you view source files of a local design, you can make modifications using the source files list. Remote files cannot be edited.

Back to Contents

2.6.4 Strict WebClip Mode

When you open a web application on your device using the Mobile Safari address bar, by default, the button bar displays. If you add the site to your home screen and run it using the app icon, the button bar does not appear.

When you run a design from Design Center, by default the device emulator displays your design as if it were launched from an app icon on the Home screen, i.e. without the button bar. When you use the Upload as Web Application tool, a link to your web app is emailed to you. When you click the link, the app opens as if launched from the address bar, with the button bar visible. If you want to view your web app in the device emulator as it will appear when opened from a link, enable Strict WebClip Mode on the Browser menu.

Back to Contents

3. Viewing and Editing Source Code

The Tools panel contains the testing and development tools for further customizing your application. Most importantly, you can view source files and add custom JavaScript to your app. Click the Show Tool Panel icon to open the Tools panel.

The MobiOne Design Center generates a web application equivalent of your user interface screen layouts and page flows. The code generated is based on the HTML5 standards and consists of HTML, JavaScript (JS), and cascading style sheets (CSS3). MobiOne Design Center generates these files when you click the Run Design icon in Design Center or when you export to HTML. Because design files are automatically generated, you should do all interface design through Design Center. If you manually change the HTML or CSS files, any subsequent design changes you make in Design Center will overwrite your manual changes when you run the design in Test Center. However, MobiOne does allow JavaScript modifications and additions without these changes being overwritten. See Editing JavaScript below.

Note: MobiOne detects when you’ve made manual changes and prompts you to choose whether or not to overwrite the file(s) when you run the design.

If you want to generate all files in your application, open the home page of your app in Design Center, and click the Run Design icon or select File>Export>Export to HTML. If you generate source files from a secondary page, MobiOne generates only the files associated with that page, which might not be all the files in your app.

Back to Contents

3.1 Location of Generated Files

If you select File>Export>Export as HTML from the Design Center menu, you choose the folder in which MobiOne generates the files. Clicking the Run Design icon creates files in a folder with the same name as your design file, appended with “_export”. This folder is found in the same location as your design (.mobi) file. For example, running MyCoHome.mobi creates the folder MyCoHome_export in the same folder as MyCoHome.mobi.

When you use the Upload as Web Application tool, files are generated in a folder with the same name as your design file, appended with "-www".

Back to Contents

3.2 Viewing and Modifying Source Files

When viewing your app in Test Center, select View>Show Tool Panel from the menu. From the Tools panel, select Tools, and then View Source. This displays a list of all generated files. When you click a file, it opens into the editor where you can make changes or additions to code.

Notes:

• You should complete your design in Design Center before modifying generated code.
• If you manually change the HTML or CSS files, any subsequent design changes you make in Design Center will overwrite your manual changes when you run the design in Test Center. See Editing JavaScript for more information.

Back to Contents

3.2.1 Source File Reference

Back to Contents

3.3 Editing JavaScript

One of the files MobiOne generates is a custom JavaScript file where you can place your own JavaScript code. The file has the same name as your design file, appended with “_custom”. In the example above, you can see the file zipcode-details_custom.js in the source file list. The custom file is not overwritten when you update your design files.

The project_name_custom.js file includes example life-cycle event callback functions such as documentReady, prePageTransition, postPageTransition and postOrientationChange. You can add your own JavaScript code in the body of any of these functions that needs to be triggered by its corresponding event. The functions are invoked by the phoneui library. You can also include your own functions.

When you save the file with your changes, the screen is automatically reloaded by the emulator to render your new code
changes. You can also use the JavaScript debugger if you need to set breakpoints in modified JavaScript code to debug it.

Back to Contents

4. Debugging and Monitoring

The Tools panel contains tools for debugging Javascript, viewing the DOM, profiling, and monitoring resources and local storage.

4.1 DOM Inspector

The DOM Inspector allows you to view the document object model. As you hover over an element in the inspector, the element is highlighted in the device emulator.

To open the DOM Inspector, click the Show Tool Panel icon , and select DOM Inspector from the tools list.

Back to Contents

4.2 Resource Monitor

Use the Resource Monitor to view how each of your resources affect your application performance. The monitor displays a graph allowing you to quickly see which resources take the most processing time or require the most space.

To open the Resource Monitor, click the Show Tool Panel icon , and select Resource Monitor from the tools list. Click either Time or Size in the top left corner to view the respective graph.

Back to Contents

4.3 Profiler

Use the Profiler to analyze your JavaScript functions for application optimization. Access the Profiler by clicking the Show Tool Panel icon , and selecting Profiler from the tools list.

To generate a profiler report, click the Start Profiler icon , run through activities in your app using the emulator, and then click the Stop Profiler icon.

Back to Contents

4.4 Debugger

There are two types of JavaScript programming errors that can be difficult to isolate and resolve. They are syntax errors and logic errors. MobiOne’s Test Center provides powerful runtime inspectors - a JavaScript debugger and a JavaScript console for executing JavaScript snippets.

Syntax errors are easily isolated when you follow the guidance of this document and place your custom JavaScript code in the project’s project_name_custom.js file.

To open the JavaScript debugger, click the Show Tool Panel icon , and select Debugger from the tools list. Select the project_name_custom.js file. If the _custom.js file is not listed in the file list, this implies that Test Center’s
browser was unable to load the file due to a serious syntax error.

To set break points, click the line number beside the points at which you want to pause execution. Run through activities in your app that cause the break point to be hit. When execution pauses at the breakpoint, examine call stack and variable details on the right.

To continue running the script after hitting a breakpoint, use the toolbar icons to resume, step over, or step into or out of functions. Click a breakpoint to toggle it on and off.

Logic errors are typically easier to detect by using breakpoints and stepping through the execution of a function or program.

Open the JavaScript console by clicking the Show/Hide Console icon . The console displays errors and other messages, and allows you to execute JavaScript snippets.

Back to Contents

4.5 Local Storage Inspector

A quick and easy way to persist user data for your web application is to use the HTML5 Local Storage mechanism. Local storage is a simple key-value dictionary storage for up to 5MB of user data. The JavaScript API is simple to learn and use:

localStorage.getItem(key)

localStorage.setItem(key,value)

localStorage.clear()

The Local Storage Inspector allows you to view data stored in local storage. Access the Local Storage Inspector by clicking the Show Tool Panel icon , and selecting Local Storage from the tools list.

In the following example, a user can enter a key name and a value, and then store it to local storage. The JavaScript used to interact with local storage is shown in the image below.

After data is entered and saved using the emulator, you can use the Local Storage Inspector to view the data. You can also edit data from the inspector.

Back to Contents

5. Test Center Settings

Test Center settings allow you to manage and customize Test Center preferences.

5.1 Network & Updates

Proxy settings in MobiOne share the Windows Internet Explorer network settings. When you select the Proxy setting, the IE Internet Properties window opens.

The Software Updates setting allows you to set your preferences for how you want to receive updates to MobiOne Studio.

The Local Web Server setting allows you to test forms and resource requests to remote servers from Test Center.

Note: Enabling the Local Web Server provides users of this computer and computers on the same network access to the mobile web content created when you export Design Center .mobi files to HTML or when you run the app from Design Center. While MobiOne employs a "hard to guess" semi-cryptic URL generation strategy for all resources, be aware that the content of
*_export folders is not guaranteed to be private.

Back to Contents

5.2 Browser

The Home Page settings allows you to set the default page that opens when you open the browser in the device emulator.

The Cache settings allow you to clear various caches. Select either all caches, or select specific caches to clear.

The device emulator implements the HTML5 geolocation API. The gelocation implementation uses a static location defined in the Geolocation setting. You can enter your geolocation for running apps in the device emulator that provide information based on your geolocation. The location value is a longitude, latitude coordinate. The default value provided with MobiOne is the location of Genuitec's north Dallas, Texas office. You can change this coordinate to any value you choose.

Back to Contents

5.3 Home Screen

The Wallpaper setting allows you to customize the background image of the device emulator Home screen. MobiOne provides a gallery of free wallpapers that you can download for the iPhone device emulator.

The Shortcuts setting allows you to change the name of the Browser shortcut, or reset the Home screen to the default.

Back to Contents

5.4 Tools

The Editor setting allows you to enable a dark editor background.

  

The Screen Capture setting allows you to capture the device emulator screen without the faceplate. The resulting image is similar to what you get if you capture the screen on your actual device.

The Upload as AppCenter Website setting allows you to enable email notification via the AppCenter email service when the upload is complete. If you disable this setting, your email client opens a new email containing a link to your web application.

Enter the default email address that appears on the notification page of the wizard. The Shorten Application URLs setting redirects to a shorter, more manageable URL.

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.