5 of the dojo mobile tweetview series -- tweetview: Android, packaging, review

Author: David Walsh

Translation: Siqi (siqi.zhong@gmail.com

)

Original article: tweetview: Android, packaging, and review

 

In the first two tutorials, the third part of the dojo mobile tweetview series -- tweets and mentions views

4. tutorials for the dojo mobile tweetview series -- create a setting View

, We created the tweetview

The HTML, CSS, and JavaScript code required for mobile applications. This tutorial will focus on how to implement a set of Android themes and use the dojo Packaging System to make applications more compact. We will review the entire dojox. Mobile-based application.

 

Version: 1.6

Difficulty: Intermediate

Series: tweetview

Implement Android themes

In this series, we hardcoded an iPhone-themed CSS style on the app.html page to beautify the entire application. This allows us to complete the entire development process faster and consider the android theme style after the application functions are complete. Now it's time to design an android style for our applications!

 

).

 

<MCE: Script Type = "text/JavaScript"> <! -- <Br/> (function () {<br/> // create a new link element and obtain the reference of the head label, the link label will be inserted later. <br/> var L = document. createelement ("Link"), H = document. getelementsbytagname ("head") [0]; <br/> // determines whether it is Android <br/> var isandroid = navigator. useragent. indexof ("android")>-1; <br/> // Add the appropriate style table path <br/> L. setattribute ("rel", "stylesheet"); <br/> L. setattribute ("href", "JS/dojox/mobile/themes/" + (isandroid? "Android/android.css": "iPhone/iphone.css"); <br/> // insert a tag <br/> H. insertbefore (L, H. firstchild); <br/>}) (); <br/> // --> </MCE: SCRIPT>

 

! To force your page to use the android mode, you can write the android topic as we used the iPhone topic before.

 

Now your application can load Android themes on devices based on the Android platform. If it is not an Android device, the iPhone themes will be used. However, we may need some images customized for Android. First, set parseonload in djconfig to false:

 

Djconfig = {<br/> isdebug: True, <br/> baseurl :'. /', <br/> modulepaths: {<br/> tweetview: 'js/tweetview' <br/>}, <br/> parseonload: false <br/> };

 

Next, we will add the dojo. Ready code block to change the image path and manually tell dojo to start page parsing.

 

// IOS images are used by default. <br/> // The Android image path is corrected. <br/> dojo. ready (function () {<br/> // if you use android... <br/> If (isandroid) {<br/> var ImagePath = "JS/tweetview/resources/images /"; <br/> // update the image path of the tabbar at the bottom <br/> dojo. foreach (document. getelementsbyclassname ("tweetviewrefresh"), function (BTN) {<br/> dojo. ATTR (BTN, "iconloading", ImagePath + "androidloading.gif"); <br/>}); <br/> // Add a new "iconloading" attribute to the tweetview instance <Br/> dojo. ATTR (Dojo. byid ("tabbar"), "iconbase", ImagePath + "iconstripandroid.png"); <br/>}< br/> // Resolution Page! <Br/> dojox. Mobile. parser. parse (); <br/> });

 

! Note that we use document. getelementsbyclassname and use dojo. foreach traverses the result. Remember, to reduce the code size, avoid using dojo. query, we will see this situation.

 

 

Great! Our simple application can handle both Android and iOS devices.

 

Remove anti-Cache meta tags

Do you still remember the meta tag we used to prevent caching when developing controls?

 

<! -- Prevent caching --> <br/> <meta http-equiv = "cache-control" content = "no-Cache"> <br/> <meta http-equiv = "Pragma "content =" no-Cache ">

 

Remove the above, so that our application can cache normally.

 

Dojox. Mobile and packaging

Usually we can find the packaging script in the util/build directory of the dojo toolkit. However, the packaging script of dojox. Mobile is stored in the dojox. MOBILE/build directory. In these "build. Sh" and "build. Bat" scripts, you can see the following annotations:

 

# Note: <br/> # You may need to manually apply the following patch to your build script <br/> # In order to completely remove all the unused modules from your build. <br/> # The patch disables finding the dojo base modules being used from the <br/> # dependent modules with a simple pattern matching, which sometimes <br/> # Unexpectedly picks up unused modules. <br/> # For example, if you see query. JS and nodelist. JS baked into your build, <br/> # while you are not using them, then it is worth trying the patch. <br/> # the file to be patched is util/buildscripts/jslib/buildutil. JS. <br/> # --- buildutil. JS-orig <br/> # ++ buildutil. JS <br/>#- 1506,7 + 1506,7 <br/> # var addedresources = {}; <br/> #-while (matches = buildutil.basemappingregexp.exe C (tempcontents) {<br/> # + while (false & (matches = Objective C (tempcontents ))) {<br/> # var baseresource = buildutil. basemappings [matches [1]; <br/> # // make sure we do not add the dependency to its source resource.

 

This patch is required when creating your own dojo release package. After you finish, remember to change it back.

 

! Read the preceding notes carefully. Remember how to use a custom method named _ viewmixin. getelements to replace dojo. query? If we only need getelementbyclassname, we do not need to add dojo. query as the dependency. This will reduce the size of our application release package.

 

Dojox. Mobile packaging options

 

You can also see some special packaging parameters in the build. SH and build. BAT files.

 

#! /Bin/sh </P> <p> If [$ #-EQ 0]; then <br/> echo 'usage: build separate | single [WebKit] '<br/> echo 'separate create mobile. JS that supports des only dojox. mobile' <br/> echo 'single create a single dojo. JS layer that supports des dojox. mobile '<br/> echo 'webkit enable webkitmobile = true option (loses PC browser Support) '<br/> Exit 1 <br/> fi </P> <p> optimize = shrinksafe <br/> profile = Mobile <br/> dir = release-mobile-separate <br/> WebKit = <br/> If ["$1" = "single"]; then <br/> profile = Mobile-all <br/> fi <br/> If ["$1" = "single"]; then <br/> dir = release-mobile-single <br/> fi <br/> If ["$2" = "WebKit"]; then <br/> WebKit = webkitmobile = true <br/> fi </P> <p> Cd .. /.. /.. /util/buildscripts </P> <p>. /build. sh profile = $ profile action = release customdijitbase = true optimize = $ optimize layeroptimize = $ optimize cssoptimize = comments releasedir = .. /.. /$ DIR/$ WebKit </P> <p> Cd .. /.. /dojox/mobile/build

 

We will choose to use separate to delegate. But there are some hard-coded values in the build file that we don't want, so let's copy the content in the file and create our own build-tweetview.sh file:

 

Optimize = shrinksafe <br/> profile = tweetview <br/> dir = tweetview-release <br/> WebKit = <br/> If ["$2" = "WebKit" ]; then <br/> WebKit = webkitmobile = true <br/> fi </P> <p> Cd .. /.. /.. /util/buildscripts </P> <p>. /build. sh profile = $ profile action = release customdijitbase = true optimize = $ optimize layeroptimize = $ optimize cssoptimize = comments releasedir = .. /.. /$ DIR/$ WebKit </P> <p> Cd .. /.. /dojox/mobile/build

 

We updated the profile and Dir configurations for the tweetview requirements.

 

Tweetview build Profile

Let's create a mobile-all.profile-based build profile for tweetview:

 

Dependencies = {<br/> stripconsole: "normal", <br/> layers: [<br/>{< br/> name: "dojo. JS ", <br/> custombase: True, <br/> dependencies: [<br/>" dojo. _ base. declare ", <br/>" dojo. _ base. lang ", <br/>" dojo. _ base. array ", <br/>" dojo. _ base. window ", <br/>" dojo. _ base. event ", <br/>" dojo. _ base. connect ", <br/>" dojo._base.html ", <br/>" dijit. _ widgetbase ", <br/>" dijit. _ base. manager ", <br/>" dojox. mobile. parser ", <br/>" dojox. mobile "<br/>] <br/>}, <br/>{< br/> name :".. /dojox/mobile/compat. JS ", <br/> dependencies: [<br/>" dijit. _ base. sniff ", <br/>" dojo. _ base. FX ", <br/>" dojox. mobile. compat "<br/>] <br/>}, <br/>{< br/> name :".. /tweetview/tweetview-app.js ", <br/> dependencies: [<br/>" tweetview. tweetview ", <br/>" tweetview. settingsview ", <br/>" dojox. mobile. tabbar "<br/>] <br/>}< br/>], </P> <p> prefixes: [<br/> [" dijit ",".. /dijit "], <br/> [" dojox ",".. /dojox "], <br/> [" tweetview ",".. /tweetview "] <br/> };

 

The mobile profile provided by the dojo toolkit contains the dojox. Mobile. app class we need, so I removed them. I also added a tweetview-app.js for this build that contains the tweetview, seetingsview, and dojox. Mobile. tabbar (a class that is not included by default in dojox. Mobile ). Then, the tweetview namespace is added to the prefixes array.

 

Execute build

Let's switch to the command line and use the build profile above to package our widgets:

 

./Build. Sh single WebKit

 

After the build is complete, you can view the result in JS/tweetview-release/dojo/tweetview/directory:

 

Contents of the packaged directory

 

Use build

Now you can use the packaged file to open app.html, update the dojo path, and create a new script node to import the packaged tweetview-app.js.

 

<MCE: script src = "JS/tweetview-release/dojo. JS "mce_src =" JS/tweetview-release/dojo. JS "> </MCE: SCRIPT> <br/> <MCE: script src = "JS/tweetview-release/dojo/tweetview/tweetview-app.js" mce_src = "JS/tweetview-release/dojo/tweetview/tweetview-app.js"> </MCE: SCRIPT>

 

! We can use dojo. require is used to import resources required for tweetview, but some mobile operating systems do not support xhr synchronization, which causes dojo. require is invalid. In this case, direct resource import is more reliable. The use of requires in our application will not cause problems, because we have packed all the code and loaded all the required dependencies.

 

Tweetview Review

Tweetview complete! We have created templates (HTML), Style Sheets (CSS), and code (JavaScript) for our simple mobile apps, and packaged them! Let's review what we learned in creating a tweetview:

 

• Basic controls in dojox. Mobile
• How to customize iOS and Android styles for dojox. Mobile. Application
• How to declare dojox. Mobile. widgets as a tag and how to create these controls using code
• How to Use dojo. Io. Script and dojo. deferredlist to get JSON content from Twitter
• How to extend the basic dojox. Mobile Control
• The policy behind the Javascript best practices, while ensuring that the code is compact and the dependencies are minimal.
• The unique packaging process required by the dojox. Mobile Application.

I hope that when you complete this project, you can also. mobile has the same feeling: dojox. mobile is an outstanding mobile application framework that provides controls and style themes that match the mobile device style. Dojox. Mobile is easy to learn, scalable, and can dynamically load content. Tweetview, a basic application with three views, can be easily created by using dojox. Mobile!

Dojox. Mobile will become better!

Driven by the dojo Development Team, dojox. Mobile is growing at an astonishing speed and will provide us with the best mobile solution. In the near future, dojox. Mobile will have more and more efficient controls and various new features for devices. I hope you can take some time to try the content under dojox. Mobile and share your experience with the entire dojo community!

 

Click here

View the complete application!

 

Chinese tutorials for the tweetview Series

One of the dojo mobile tweetview series tutorials -- dojox. Mobile getting started

Dojo mobile tweetview series tutorial 2 -- start with tweetview

Dojo mobile tweetview Series 3-tweets and mentions views

Dojo mobile tweetview Series 4-create a setting View