Use Dreamweaver 5.5 + jquery + phonegap + ArcGIS javascript API to develop cross-platform mobile apps

ESRI provides APIs for iOS, Android, and Windows phones. GIS developers need to use different ArcGIS mobile APIs to develop the same Mobile GIS application for different platforms, this not only increases development costs, increases development difficulty, but also wastes resources and manpower.

So can applications be applied to various mobile terminals at one time? Although mobile Web applications have not yet emerged, the answer is yes:HTML5 + jquery + phonegapTo achieve cross-platform and cross-Terminal application development, we can learn only one technology to develop a native app that can run on all mobile phone platforms, tablets, and various PC platforms!

HTML5 + jquery + phonegap what is sacred?

What are HTML5, jquery, and phonegap? I will search for some online materials. Here we will not talk nonsense and take out one or two sentences:

1) HTML5 is the next-generation HTML standard specification following html4. it provides some new elements and attributes (such as <nav> website navigation blocks and <footer> ). The new tags facilitate search engines and semantic analysis, and help small screen devices and People with Visual Impairment better. In addition, they also provide some new functions, for example, <video> and <audio> are used for video and audio.

2) css3 is an upgraded version of CSS technology. The development of css3 language is towards modularization. The previous specification as a module is too large and complex. Therefore, it is divided into small modules and more new modules are also added. These modules include: Box Model, list module, hyperlink mode, language module, background and border, text effects, and multi-column layout.

3) jquery is another excellent protocol Cr protocol PT framework after prototype. It is a lightweight JS Library (only 21 K after compression). It is compatible with css3 and various browsers (IE 6.0 +, FF 1.5 +, safari2.0 +, and opera 9.0 + ). Jquery allows you to easily process HTML documents, events, and animation effects, and provides Ajax interaction for websites. Another major advantage of jquery is its comprehensive documentation and detailed description of various applications. There are also many mature plug-ins to choose from. Jquery can ensure that the user's HTML page is separated from the code and HTML content, that is, there is no need to insert
Run a bunch of JavaScript code to call the command. You only need to define the ID.

4) jquery mobile is a version of jquery on mobile phones and tablets. Jquery mobile not only brings jquery core libraries to mainstream mobile platforms, but also releases a complete and unified jquery Mobile UI framework. Supports mainstream mobile platforms around the world.

5) phonegap is a fast development platform that uses HTML, CSS, and JavaScript to create mobile cross-platform mobile applications. It allows developers to take advantage of the core features of iPhone, Android, palm, Symbian, WP7, bada, and BlackBerry smartphones-including geographic positioning, accelerators, contacts, sounds, and vibrations, in addition, phonegap has a variety of plug-ins, which can be used to expand unlimited functions. Phonegap is free, but it requires additional software from a specific platform, such as the iPhone
Android SDK and Android SDK for Android can also be developed with dw5.5.

6) use the "multi-screen preview" Panel in Adobe Dreamweaver cs5.5 to design mobile phones, tablets, and PCs simultaneously. Use "Media query" to write and present a separate style for each device. Use the component browser to quickly add jquery mobile user interface components.

Let's get started with cross-platform Mobile GIS development!

1. After Dreamweaver cs5.5 is installed, the development environment will be set up. We will create a new site and open site/new site ..., Enter the site name and specify the site path;

2. Create a jquery + phonegap application;

Open File/New, select page from sample-> mobile starters-> jquery mobile (phonegap), and select HTML5 for doctype. Click "CREATE". Dreamweaver automatically creates an application development template. Save this template as a website created just now and name it index.html. The template of the mobile application is created. Let's see what the template is.

You can see the appearance of the application on a mobile device. The code and design view are as follows:

You can see that jquery mobile uses the data-role attribute added to the tag to implement the Mobile UI design. <Div data-role = "page" id = "page"> represents a screen in a mobile device, you can see that an HTML page contains four pages, that is, you can switch between the four pages on a mobile device.

3. Map the GIS;

After the template of the Mobile GIS application is created, add the GIS function, remove page2, page3, and page4, and add the DIV used for map display to the content of the page, add three buttons To footer to draw points, lines, and faces. The Code is as follows:

After the interface design is complete, import the arcgisjavascript API on the page to complete the corresponding initialization and functional code, and then complete a simple GIS application.

4. Build a cross-platform native app.

Phonegap can be used to package the just-created GIS application into native apps on different mobile platforms. Fortunately, Dreamweaver has integrated phonegap, and it takes only a few steps to generate native apps. Take the Android platform as an example. Open the SITE/mobileapplications/build and emulate/Android window, Dreamweaver automatically generates the android project, and packs the application into an installation package that can be installed on a real mobile phone and saves it on the desktop;

You can find the “gis_mobile-debug.apk file in the com. esrichina. gis_mobile_android/bin directory on the desktop. This is the installation package. You can copy the file to the SD card of your mobile phone and click Install.

Note:

This file is a debug file. You can only install it on your mobile phone through the SD card to entertain yourself. If you need to upload it to the App Store, you also need to sign the file. Currently, Dreamweaver cannot implement automatic signature, but the installation package generated by Dreamweaver supports eclipse import. You can use eclipse to import the installation package and re-export a signed installation package.

Now we can use the application we just created on the simulator, as shown in:

Note: manually install APK to the simulator

1. Copy the generated APK to the Directory D: \ ProgramFiles \ Android-SDK \ platform-tools.

2. Click Start/run, Enter cmd to enter DOS, and CD all the way to the D: \ ProgramFiles \ Android-SDK \ platform-tools directory.

3. Enter ADB install + your application name. APK.