Dynamic Page Loading for PhoneGap
来源:互联网 发布:知乎知名药娘 编辑:程序博客网 时间:2024/06/16 06:23
原文地址
https://www.ibm.com/developerworks/mydeveloperworks/blogs/94e7fded-7162-445e-8ceb-97a2140866a9/entry/dynamic_page_loading_for_phonegap1?lang=en
可以看看相关的其他文章:
https://www.ibm.com/developerworks/community/groups/service/html/communityview?communityUuid=94e7fded-7162-445e-8ceb-97a2140866a9
Introduction
Mobile PhoneGap applications vary in complexity and size from simple, one-screen applications to large, multi-screen apps. To simplify development of applications that have more than one screen, JavaScript frameworks such as Dojo, jQuery or jQTouch can be used. They provide a way to display one screen while hiding the remaining screens. This is accomplished by using a single HTML file containing div elements for each screen. The current screen is made visible by setting it's css style properties. As the application grows to include more screens and function, the HTML file also grows in size. Since mobile devices have limited resources, larger HTML files load and run slower - particularly upon application launch.
To improve application performance, dynamic page loading can be used. For an application that uses dynamic page loading, the app launches and loads only the first screen. Based upon user interaction a new screen can be displayed by retrieving the new HTML content and replacing the current screen with it.
This blog post will describe how a PhoneGap mobile application can be structured to utilize dynamic page loading. Source code is provided for readers who want to build and run the application.
Dynamic Page Loading
The main HTML page for our application contains a div element to display dynamic content. It also loads the JavaScript code used by our application. Referring to the HTML code below, the container div is where we will place our content.
The content is retrieved using XHR (also referred to as Ajax) from the same location that our HTML page was loaded.
PhoneGap applications typically load their main HTML page from the device; thus, XHR can access both local files or server files. However, if the main HTML page is loaded from a server, then only XHR requests to that server are allowed. This is a security restriction to prevent cross-domain security concerns.
The loadPage() function makes an XHR call to load the specified url. Once the content is available, the container div is updated by setting it's innerHTML property.
The final step is to specify the initial content to be displayed. This is done inside the init() function, which is run after the HTML page is loaded (defined by the onload property of the body element).
Application Screens
With our dynamic loading function completed, it's time to write the screens that comprise our application. There is an HTML file for each screen in the app. Navigation between screens is accomplished by calling loadPage()from within a screen, or using global navigation links from outside thecontainer div as shown below.
To navigate from within a screen, loadPage() can be called from an event handler. For example, screen1 can load screen2 using the onclick button event.
You don't need to specify the head or body tags in the screen files, since the content is HTML and will be set to the container's innerHTML.
Running JavaScript
When setting innerHTML with content, none of the embedded script tags are run - only the HTML content is rendered. To execute JavaScript when a new screen is loaded the JavaScript function must already exist. It can be included as part of the main HTML file for an application, or be located in a script file that is loaded by the main HTML file.
Referring to the code snippet above, the PhoneGap library is loaded, since the application will use PhoneGap APIs. In particular, we will call the compass API in screen3.html.
Several JavaScript functions are used by screen3.html to access the compass API, so we include them by loading screen3.js.
We have modified loadPage() to include two additional parameters. Theonleave parameter is a function that is called when leaving the current screen, and the onenter function is called after the new screen is loaded.
We add a new button to screen1 that loads screen3, and runs thedeviceInfo() function necessary to initialize the screen3 contents. This is accomplished by setting the onenter parameter.
As shown below, screen3 calls functions defined in screen3.js to obtain the current compass heading and display it.
There are several helper functions defined in screen3.js that invoke the compass APIs directly.
When screen3.html is passed to load
Transitions between Screens
JavaScript toolkits such as Dojo have transitions or animations when navigating from one screen to another. This feature can be easily added to our example by using the css webkitTransition property. Instead of replacing the container div with our new screen, two divs can be used as HTML containers between which we animate.
The following code slides both div0 and div1 left at the same rate, with div0sliding off the screen to the left and div1 sliding onto the screen from the right.
Once the transition has completed after 0.5 seconds, we reposition div0 atleft=100% so that it can be used by the next screen to slide in from the right. With the transitions specified above, all screens will slide from right to left. You can reverse this by specifying a different direction in thewebkitTransition property.
Summary
This blog post showed how to write mobile applications that use dynamic page loading to load each screen of an app individually, instead of loading all screens at once inside a single HTML file. The result is a shorter startup time for large, complex mobile applications, and simplified development and management of individual screens.
Code
The source code for this blog post is available as a PhoneGap Android project at http
The index.html file has links for two examples. The first one, simple.html, demonstrates how to do a simple replace of content in a container div. The second file, transition.html, demonstrates how to use two divs to animate the transition between screens.
Links
0 0
- Dynamic Page Loading for PhoneGap
- Page and Form for dynamic Loading Control
- Dynamic Class Loading for C++ on Linux
- dynamic loading
- Dynamic loading
- Dynamic loading
- Dynamic loading
- Dynamic Loading
- Dynamic Prompt Table for Record Field on PeopleSoft Page
- Loading page,loading是遮罩页面
- dynamic Jpanel loading
- show dynamic loading process
- makefile dynamic loading
- iOS loading page
- loading and rendering page
- HTML LOADING PAGE
- Make sure DBMS client is installed and this required library is available for dynamic loading
- JavaScript Madness: Dynamic Script Loading
- android 应用停止后无法接收到广播
- android SlidingTabLayout实现ViewPager页卡滑动效果
- error: The requested URL returned error: 403 Forbidden while accessing https://github.com/blah/blahb
- openstack_配额管理
- 4.17
- Dynamic Page Loading for PhoneGap
- 项目报错解决方案(持续更新) by-昊哥
- 神州数码易拓TIOTOP ERP查询作业模板-上单头下单身查询作业
- 统一资源管理与调度平台(系统)介绍
- IOS设备中进行抓包【转载】备用
- Android说明设置界面布局
- 出现老是弹出Visual Studio 实时调试器 的问题
- Java 8 新的时间日期库的20个使用实例
- OpenCV_人脸检测