Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
367 lines (274 sloc) 15.8 KB
---
layout: tutorial
title: Running Dojo-based sample
relevantTo: [hybrid]
downloads:
- name: Download Studio project
url: http://public.dhe.ibm.com/software/products/en/MobileFirstPlatform/docs/v630/DojoShowcase.zip
---
<h2>Agenda</h2>
<ul>
<li><a href="#General_information">General information</a></li>
<li><a href="#for_Android">Running the Dojo-based sample for Android</a></li>
<li><a href="#for_iOS">Running the Dojo-based sample for iOS</a></li>
</ul>
<h2 id="General_information">General information</h2>
<h3>About this task</h3>
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:
<ul>
<li>Single-column: for devices with small screens</li>
<li>Two-column:for devices with relatively large screens</li>
</ul>
For Android:
<img src="{{site.baseurl}}/assets/backup/1.png" alt="missing_alt"/>
For iOS:
<img src="{{site.baseurl}}/assets/backup/3.png" alt="missing_alt"/></a>
<h3>Generic workflow</h3>
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:
<ul>
<li>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</li>
<li>Scroll the demo menu and click the demo item:the demo is loaded then</li>
<li>Run the demo: follow the instructions that are provided in <a href="#Explorethedemos">Explore the demos</a></li>
<li>Click Source to display the source view</li>
Click the HTML tab to see the HTML template of the demo:
<<img src="{{site.baseurl}}/assets/backup/5.jpg" alt="missing_alt"/>
Click the JavaScript™ tab to see the corresponding JavaScript code for the demo.Note that not all demos have JavaScript code.
<img src="{{site.baseurl}}/assets/backup/7.jpg" alt="missing_alt"/>
Click <strong>Demo</strong> to return to the demo view. In single-column mode, you can also click <strong>Back</strong>
<li>Select another demo from the demo menu: </li>
In single-column mode, click <strong>Back</strong> 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
</ul>
<h2 id="for_Android">Running the Dojo-based sample for Android</h2>
Before you begin, See the following modules for how to build and deploy the Showcase:
<ul>
<li><a href="../../setting-up-your-development-environment/setting-mobilefirst-development-environment/">Setting up your MobileFirst development environment</a></li>
<li><a href="../../setting-up-your-development-environment/setting-android-development-environment/">Setting up your Android development environment</a></li>
</ul>
<h3>Known limitations</h3>
There are some known limitations in this Showcase. The following instructions describe how to implement workarounds to these limitations:
<ul>
<li>Zooming on Android tablets</li>
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
<img src="{{site.baseurl}}/assets/backup/9.png" alt="missing_alt"/>
2. Edit AndroidManifest.xml in the root of the generated project,set <code>android:minSdkVersion</code> to the API level of the Project Build Target.
<li>Enable Showcase features: Edit AndroidManifest.xml in the root of the generated project,add the following permission elements:</li>
<img src="{{site.baseurl}}/assets/backup/8.png" alt="missing_alt"/>
<li>Check also the product Release Notes for information about known defects</li>
</ul>
<h3 id="Explorethedemos">Explore the demos</h3>
Run a demo by selecting any entry in the demo menu
<h4>Buttons</h4>
Check that the colors, textures, and shapes are correct
<img src="{{site.baseurl}}/assets/backup/10.jpg" alt="missing_alt"/>
<h4>Forms</h4>
<ul>
<li>Check that the input operations on all controls work correctly</li>
<img src="{{site.baseurl}}/assets/backup/12.jpg" alt="missing_alt" /></a>
<li>Click <strong>Reset Form</strong> to reset fields to their default values</li>
<img src="{{site.baseurl}}/assets/backup/11.jpg" alt="missing_alt" /></a>
</ul>
<h4>Switches</h4>
Check that the styles and operations work correctly
<img src="{{site.baseurl}}/assets/backup/13.jpg" alt="missing_alt" /></a>
<h4>Swap View</h4>
<ul>
<li>Swipe left and right to swap views</li>
<li>Note that if the swipe offset is not large enough, the view bounces back</li>
</ul>
<img src="{{site.baseurl}}/assets/backup/14.jpg" alt="missing_alt" /></a>
<h4>Icons</h4>
<ul>
<li>Note: Opens a note book box</li>
<li>Flower: Changes to another view with a sliding transition</li>
<li>Dojo: Opens a web page with a sliding transition</li>
</ul>
<img src="{{site.baseurl}}/assets/backup/16.jpg" alt="missing_alt" /></a>
<h4>Tab Bar</h4>
Click each icon on the tab bar to switch the view above
<img src="{{site.baseurl}}/assets/backup/17.jpg" alt="missing_alt" /></a>
<h4>Headings</h4>
<ul>
<li>Check that the styles are correct</li>
<li>Check that each button click is reflected in the text below</li>
</ul>
<img src="{{site.baseurl}}/assets/backup/18.jpg" alt="missing_alt" /></a>
<h4>Map (Google)</h4>
Check that Google Maps works correctly, if Geolocation is enabled, by default the current position is located and marked on the map
<img src="{{site.baseurl}}/assets/backup/19.jpg" alt="missing_alt" /></a>
<h4>Lists</h4>
Check that navigation between lists works correctly
<img src="{{site.baseurl}}/assets/backup/20.jpg" alt="missing_alt" /></a>
<h4>List Data</h4>
<ul>
<li>Click <strong>+</strong>and <strong>-</strong>to add or remove current list items</li>
<li>Click <strong>Set 1</strong>and <strong>Set 2</strong>to toggle between two lists</li>
</ul>
<img src="{{site.baseurl}}/assets/backup/21.jpg" alt="missing_alt" /></a>
<h4>Scroll Pane</h4>
<ul>
<li>Check that the top table is vertically scrollable</li>
<li>Check that the bottom table is horizontally scrollable</li>
</ul>
<img src="{{site.baseurl}}/assets/backup/22.png" alt="alt_missing"/>
<h4>Progress</h4>
<ul>
<li>ProgressBar: Click <strong>0</strong>, <strong>70</strong>, <strong>100</strong>, and <strong>200</strong> to control the progress bar</li>
<img src="{{site.baseurl}}/assets/backup/23.png" alt="alt_missing"/>
<li>ProgressIndicator: Click <strong>Start</strong> and <strong>Stop</strong> to control the progress indicator</li>
<img src="{{site.baseurl}}/assets/backup/24.png" alt="alt_missing"/>
</ul>
<h4>Badges</h4>
<ul>
<li>Enter a numeric value in the <strong>Badge value</strong> field –badge_value</li>
<li>Click <strong>app1</strong>, <strong>app2</strong>, and <strong>app3</strong> to display badge_valueon the respective icon</li>
</ul>
<img src="{{site.baseurl}}/assets/backup/25.png" alt="alt_missing"/>
<h4>Rating</h4>
Shows the different rating styles that are supported by Dojo
<img src="{{site.baseurl}}/assets/backup/26.png" alt="alt_missing"/>
<h4>Transitions</h4>
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
<img src="{{site.baseurl}}/assets/backup/27.jpg" alt="alt_missing"/>
<h4>CSS 3</h4>
Check that each CSS 3 animation effect works correctly
<img src="{{site.baseurl}}/assets/backup/28.jpg" alt="alt_missing"/>
<h4>JSON P</h4>
<ul>
<li>Check that Twitter search results are displayed</li>
<img src="{{site.baseurl}}/assets/backup/30.jpg" alt="alt_missing"/>
<li>Progressive loading of more search results is supported by clicking the link at the bottom</li>
<img src="{{site.baseurl}}/assets/backup/29.png" alt="alt_missing"/>
</ul>
<h4>AJAX</h4>
Click <strong>Load using AJAX</strong> to load the following content:
Text string "I'm using Dojo."
Dojo icon
Link to Dojo Toolkit website
<img src="{{site.baseurl}}/assets/backup/31.jpg" alt="alt_missing" />
<h4>HTML5</h4>
<ul>
<li>Click <strong>Show Map</strong>to see your location marked on Google Maps. If Geolocation is enabled, the current position is located and marked on the map</li>
<li>Enter travel log details in the input area. Travel log details are automatically saved every 30 seconds</li>
<li>Click <strong>New</strong>to delete the current travel log and create a new one</li>
</ul>
<img src="{{site.baseurl}}/assets/backup/32.png" alt="alt_missing"/>
<h4>Related information</h4>
For more information about Dojo Mobile widgets, including views, see the following link: <a href="http://docs.dojocampus.org/dojox/mobile" title="http://docs.dojocampus.org/dojox/mobile" target="_blank">http://docs.dojocampus.org/dojox/mobile</a>
<h2 id="for_iOS">Running the Dojo-based sample for iOS</h2>
Before you begin, See the following modules for how to build and deploy the Showcase:
<ul>
<li><a href="../../setting-up-your-development-environment/setting-mobilefirst-development-environment/">Setting up your MobileFirst development environment</a></li>
<li><a href="../../setting-up-your-development-environment/setting-ios-development-environment/">Setting up your iOS development environment</a></li>
</ul>
<h3>Known limitations</h3>
There are some known limitations in this Showcase. The following instructions describe how to implement workarounds to these limitations:
<ul>
<li>Importing a MobileFirst project</li>
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 <a href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=337913" title="https://bugs.eclipse.org/bugs/show_bug.cgi?id=337913" target="_blank">https://bugs.eclipse.org/bugs/show_bug.cgi?id=337913</a>
To resolve this situation, perform the following steps:
1. Exit the MobileFirst Studio by right-clicking the Eclipse icon and then click <strong>Close</strong>
2. Restart the Worklight Studio.
3. Delete the partially imported project from the workspace.
4. Import the project again.
<img src="{{site.baseurl}}/assets/backup/33.png" alt="alt_missing"/>
<li>Screen rotation</li>
Apache Cordova disables screen rotation by default. To enable free rotation, edit CDVMainViewController.m by updating method <code>shouldAutorotateToInterfaceOrientation</code> to always return YES in the generated native Xcode project.
<img src="{{site.baseurl}}/assets/backup/2.png" alt="alt_missing"/>
<li>Check also the product Release Notes for information about known defects</li>
</ul>
<h3 id="Explorethedemos">Explore the demos</h3>
Run a demo by selecting any entry in the demo menu
<h4>Buttons</h4>
Check that the colors, textures, and shapes are correct
<img src="{{site.baseurl}}/assets/backup/34.png" alt="alt_missing"/>
<h4>Forms</h4>
<ul>
<li>Check that the input operations on all controls work correctly</li>
<img src="{{site.baseurl}}/assets/backup/36.png" alt="alt_missing"/>
<li>Click <strong>Reset Form</strong> to reset fields to their default values</li>
<img src="{{site.baseurl}}/assets/backup/35.png" alt="alt_missing"/>
</ul>
<h4>Switches</h4>
Check that the styles and operations work correctly
<img src="{{site.baseurl}}/assets/backup/37.png" alt="alt_missing"/>
<h4>Swap View</h4>
<ul>
<li>Swipe left and right to swap views</li>
<li>Note that if the swipe offset is not large enough, the view bounces back</li>
</ul>
<img src="{{site.baseurl}}/assets/backup/38.png" alt="alt_missing"/>
<h4>Icons</h4>
<ul>
<li>Note: Opens a note book box</li>
<li>Flower: Changes to another view with a sliding transition</li>
<li>Dojo: Opens a web page with a sliding transition</li>
</ul>
<img src="{{site.baseurl}}/assets/backup/40.png" alt="alt_missing"/>
<h4>Tab Bar</h4>
Click each icon on the tab bar to switch the view above
<img src="{{site.baseurl}}/assets/backup/41.png" alt="alt_missing"/>
<h4>Headings</h4>
<ul>
<li>Check that the styles are correct</li>
<li>Check that each button click is reflected in the text below</li>
</ul>
<img src="{{site.baseurl}}/assets/backup/42.png" alt="alt_missing"/>
<h4>Map (Google)</h4>
Check that Google Maps works correctly, if Geolocation is enabled, by default the current position is located and marked on the map
<img src="{{site.baseurl}}/assets/backup/43.png" alt="alt_missing"/>
<h4>Lists</h4>
Check that navigation between lists works correctly
<img src="{{site.baseurl}}/assets/backup/44.png" alt="alt_missing"/>
<h4>List Data</h4>
<ul>
<li>Click <strong>+</strong>and <strong>-</strong>to add or remove current list items</li>
<li>Click <strong>Set 1</strong>and <strong>Set 2</strong>to toggle between two lists</li>
</ul>
<img src="{{site.baseurl}}/assets/backup/45.png" alt="alt_missing"/>
<h4>Scroll Pane</h4>
<ul>
<li>Check that the top table is vertically scrollable</li>
<li>Check that the bottom table is horizontally scrollable</li>
</ul>
<img src="{{site.baseurl}}/assets/backup/46.png" alt="alt_missing"/>
<h4>Progress</h4>
<ul>
<li>ProgressBar: Click <strong>0</strong>, <strong>70</strong>, <strong>100</strong>, and <strong>200</strong> to control the progress bar</li>
<img src="{{site.baseurl}}/assets/backup/47.png" alt="alt_missing"/>
<li>ProgressIndicator: Click <strong>Start</strong> and <strong>Stop</strong> to control the progress indicator</li>
<img src="{{site.baseurl}}/assets/backup/48.png" alt="alt_missing"/>
</ul>
<h4>Badges</h4>
<ul>
<li>Enter a numeric value in the <strong>Badge value</strong> field –badge_value</li>
<li>Click <strong>app1</strong>, <strong>app2</strong>, and <strong>app3</strong> to display badge_valueon the respective icon</li>
</ul>
<img src="{{site.baseurl}}/assets/backup/49.png" alt="alt_missing"/>
<h4>Rating</h4>
Shows the different rating styles that are supported by Dojo
<img src="{{site.baseurl}}/assets/backup/50.png" alt="alt_missing"/>
<h4>Transitions</h4>
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
<img src="{{site.baseurl}}/assets/backup/51.png" alt="alt_missing"/>
<h4>CSS 3</h4>
Check that each CSS 3 animation effect works correctly
<img src="{{site.baseurl}}/assets/backup/52.png" alt="alt_missing"/>
<h4>AJAX</h4>
Click <strong>Load using AJAX</strong> to load the following content:
Text string "I'm using Dojo."
Dojo icon
Link to Dojo Toolkit website
<img src="{{site.baseurl}}/assets/backup/53.png" alt="alt_missing"/>
<h4>HTML5</h4>
<ul>
<li>Click <strong>Show Map</strong>to see your location marked on Google Maps. If Geolocation is enabled, the current position is located and marked on the map</li>
<li>Enter travel log details in the input area. Travel log details are automatically saved every 30 seconds</li>
<li>Click <strong>New</strong>to delete the current travel log and create a new one</li>
</ul>
<img src="{{site.baseurl}}/assets/backup/54.png" alt="alt_missing"/>
<h4>Related information</h4>
For more information about Dojo Mobile widgets, including views, see the following link: <a href="http://docs.dojocampus.org/dojox/mobile" title="http://docs.dojocampus.org/dojox/mobile" target="_blank">http://docs.dojocampus.org/dojox/mobile</a>
<h2>Sample application</h2>
<a href="http://public.dhe.ibm.com/software/products/en/MobileFirstPlatform/docs/v630/DojoShowcase.zip">Click to download</a> the Studio project.
You can’t perform that action at this time.