Running Dojo-based sample

improve this page | report issue

Agenda

General information

About this task

The Dojo Showcase is a hybrid mobile application designed for several mobile devices.It features various Dojo mobile widgets and illustrates their function in web and hybrid applications for mobile platforms.The Dojo Showcase works in two modes:
  • Single-column: for devices with small screens
  • Two-column:for devices with relatively large screens
For Android: missing_alt For iOS: missing_alt

Generic workflow

The Android and iOS versions of the Dojo Showcase have the same structure.The following workflow is common to both versions when running the demo:
  • Load the Dojo Showcase:the demo menu is displayed, grouped into three sections: Controls, Effects, and Data. Switched to the demo view in single-column mode or displayed in the right column in two-column mode
  • Scroll the demo menu and click the demo item:the demo is loaded then
  • Run the demo: follow the instructions that are provided in Explore the demos
  • Click Source to display the source view
  • Click the HTML tab to see the HTML template of the demo: <missing_alt Click the JavaScript™ tab to see the corresponding JavaScript code for the demo.Note that not all demos have JavaScript code. missing_alt Click Demo to return to the demo view. In single-column mode, you can also click Back
  • Select another demo from the demo menu:
  • In single-column mode, click Back to return to the demo menu and pick other demos. In two-column mode, you can directly click items in the demo menu to jump to different demos

Running the Dojo-based sample for Android

Before you begin, See the following modules for how to build and deploy the Showcase:

Known limitations

There are some known limitations in this Showcase. The following instructions describe how to implement workarounds to these limitations:
  • Zooming on Android tablets
  • On Android 3.0+ tablets, the Showcase is automatically zoomed which gives a poor user experience.To disable zooming, perform the following steps to set the SDK version to 11 or above: 1. Right-click the generated Android project and then click Properties, then click Android in the properties list, change Project Build Target to Android 3.0 or above and click OK missing_alt 2. Edit AndroidManifest.xml in the root of the generated project,set android:minSdkVersion to the API level of the Project Build Target.
  • Enable Showcase features: Edit AndroidManifest.xml in the root of the generated project,add the following permission elements:
  • missing_alt
  • Check also the product Release Notes for information about known defects

Explore the demos

Run a demo by selecting any entry in the demo menu

Buttons

Check that the colors, textures, and shapes are correct missing_alt

Forms

  • Check that the input operations on all controls work correctly
  • missing_alt
  • Click Reset Form to reset fields to their default values
  • missing_alt

Switches

Check that the styles and operations work correctly missing_alt

Swap View

  • Swipe left and right to swap views
  • Note that if the swipe offset is not large enough, the view bounces back
missing_alt

Icons

  • Note: Opens a note book box
  • Flower: Changes to another view with a sliding transition
  • Dojo: Opens a web page with a sliding transition
missing_alt

Tab Bar

Click each icon on the tab bar to switch the view above missing_alt

Headings

  • Check that the styles are correct
  • Check that each button click is reflected in the text below
missing_alt

Map (Google)

Check that Google Maps works correctly, if Geolocation is enabled, by default the current position is located and marked on the map missing_alt

Lists

Check that navigation between lists works correctly missing_alt

List Data

  • Click +and -to add or remove current list items
  • Click Set 1and Set 2to toggle between two lists
missing_alt

Scroll Pane

  • Check that the top table is vertically scrollable
  • Check that the bottom table is horizontally scrollable
alt_missing

Progress

  • ProgressBar: Click 0, 70, 100, and 200 to control the progress bar
  • alt_missing
  • ProgressIndicator: Click Start and Stop to control the progress indicator
  • alt_missing

Badges

  • Enter a numeric value in the Badge value field –badge_value
  • Click app1, app2, and app3 to display badge_valueon the respective icon
alt_missing

Rating

Shows the different rating styles that are supported by Dojo alt_missing

Transitions

Check that each animation effect works correctly. Note: On mobile devices, only Safari mobile on iOS correctly supports all animation effects. And on desktops, Chrome and Safari correctly support all animation effects alt_missing

CSS 3

Check that each CSS 3 animation effect works correctly alt_missing

JSON P

  • Check that Twitter search results are displayed
  • alt_missing
  • Progressive loading of more search results is supported by clicking the link at the bottom
  • alt_missing

AJAX

Click Load using AJAX to load the following content: Text string "I'm using Dojo." Dojo icon Link to Dojo Toolkit website alt_missing

HTML5

  • Click Show Mapto see your location marked on Google Maps. If Geolocation is enabled, the current position is located and marked on the map
  • Enter travel log details in the input area. Travel log details are automatically saved every 30 seconds
  • Click Newto delete the current travel log and create a new one
alt_missing

Related information

For more information about Dojo Mobile widgets, including views, see the following link: http://docs.dojocampus.org/dojox/mobile

Running the Dojo-based sample for iOS

Before you begin, See the following modules for how to build and deploy the Showcase:

Known limitations

There are some known limitations in this Showcase. The following instructions describe how to implement workarounds to these limitations:
  • Importing a MobileFirst project
  • The import window does not close when importing an existing project into the workspace for the first time. This behavior is a known Eclipse defect https://bugs.eclipse.org/bugs/show_bug.cgi?id=337913 To resolve this situation, perform the following steps: 1. Exit the MobileFirst Studio by right-clicking the Eclipse icon and then click Close 2. Restart the Worklight Studio. 3. Delete the partially imported project from the workspace. 4. Import the project again. alt_missing
  • Screen rotation
  • Apache Cordova disables screen rotation by default. To enable free rotation, edit CDVMainViewController.m by updating method shouldAutorotateToInterfaceOrientation to always return YES in the generated native Xcode project. alt_missing
  • Check also the product Release Notes for information about known defects

Explore the demos

Run a demo by selecting any entry in the demo menu

Buttons

Check that the colors, textures, and shapes are correct alt_missing

Forms

  • Check that the input operations on all controls work correctly
  • alt_missing
  • Click Reset Form to reset fields to their default values
  • alt_missing

Switches

Check that the styles and operations work correctly alt_missing

Swap View

  • Swipe left and right to swap views
  • Note that if the swipe offset is not large enough, the view bounces back
alt_missing

Icons

  • Note: Opens a note book box
  • Flower: Changes to another view with a sliding transition
  • Dojo: Opens a web page with a sliding transition
alt_missing

Tab Bar

Click each icon on the tab bar to switch the view above alt_missing

Headings

  • Check that the styles are correct
  • Check that each button click is reflected in the text below
alt_missing

Map (Google)

Check that Google Maps works correctly, if Geolocation is enabled, by default the current position is located and marked on the map alt_missing

Lists

Check that navigation between lists works correctly alt_missing

List Data

  • Click +and -to add or remove current list items
  • Click Set 1and Set 2to toggle between two lists
alt_missing

Scroll Pane

  • Check that the top table is vertically scrollable
  • Check that the bottom table is horizontally scrollable
alt_missing

Progress

  • ProgressBar: Click 0, 70, 100, and 200 to control the progress bar
  • alt_missing
  • ProgressIndicator: Click Start and Stop to control the progress indicator
  • alt_missing

Badges

  • Enter a numeric value in the Badge value field –badge_value
  • Click app1, app2, and app3 to display badge_valueon the respective icon
alt_missing

Rating

Shows the different rating styles that are supported by Dojo alt_missing

Transitions

Check that each animation effect works correctly. Note: On mobile devices, only Safari mobile on iOS correctly supports all animation effects. And on desktops, Chrome and Safari correctly support all animation effects alt_missing

CSS 3

Check that each CSS 3 animation effect works correctly alt_missing

AJAX

Click Load using AJAX to load the following content: Text string "I'm using Dojo." Dojo icon Link to Dojo Toolkit website alt_missing

HTML5

  • Click Show Mapto see your location marked on Google Maps. If Geolocation is enabled, the current position is located and marked on the map
  • Enter travel log details in the input area. Travel log details are automatically saved every 30 seconds
  • Click Newto delete the current travel log and create a new one
alt_missing

Related information

For more information about Dojo Mobile widgets, including views, see the following link: http://docs.dojocampus.org/dojox/mobile

Sample application

Click to download the Studio project.
Last modified on October 26, 2016