Hands-on Teaching: Details of HTML5 mobile development framework PhoneJS

Mobile App development frameworks are countless, and now there are more and more HTML5-based frameworks. These new-generation development tools allow developers to directly develop mobile applications without having to be proficient in native sdks, Objective-C, Java, and other programming languages.

Why is HTML5 so popular with developers?

One of the most important reasons why HTML5 is widely used is the emergence of BYOD. The BYOD attack means that developers do not need to be confined to a single platform, because users want to run these apps on the devices they use everyday. With HTML5, developers can develop apps for different devices based on a code library, and their experience is basically the same as that of native apps. You do not need to repeat programming or use multiple languages or sdks. The development of modern Web browsers enables HTML5 to implement cross-platform and suitable solutions for different devices. These solutions are extremely similar to the "native" App experience, it is often difficult to determine whether it is native development or HTML development.

The advantages of HTML/JavaScript are far greater than that of multi-platform support, market release time, and low maintenance costs. In terms of mitigating the long-term risks brought by emerging technologies such as WinRT, Chrome OS, Firefox OS, and Tizen, HTML is not capable of being right-handed. Simply put, HTML/JavaScript is the only programming language that enables cross-platform applications.

Of course, HTML/JavaScript does not have any disadvantages. Compared with HTML5 apps, Native apps consume less memory and respond faster. However, as long as the Web application runs normally, you can make some concessions to create a mobile Web App, or package applications for the App Store and multi-platform from a single code library. At this time, it is best to use the HTML JavaScript mobile development framework PhoneJS. This article describes in detail the entire process of using PhoneJS. Next, let's take a look.

HTML5 Application Development Framework PhoneJS: A New Choice for mobile App development

PhoneJS is a universal, flexible, and efficient cross-platform HTML5 mobile App development framework that adapts to PhoneGap. It is a single-page application framework with View Management and URL navigation. The Layout Engine allows developers to set abstract navigation in the view, so that the same App can be adjusted based on different platforms or factors. PhoneJS includes a complete set of touch screen UI components built into the most popular mobile platforms such as iOS, Android, and Windows Phone 8.

To learn more about PhoneJS development principles and how to create and publish an App, log on to the App Store, Google Play, or Windows Store to download its Demo application Tip Calculator, you can also log on to GitHub to download the complete source code of the application.

PhoneJS layout and navigation

TipCalculator is a single-page application built using HTML5. The start page is a link with the standard element label javasindex.html and CSS and JavaScript resources. It contains a JavaScript file index. js Script Reference, which contains the code for configuring the PhoneJS application framework logic:

 

TipCalculator.app = new DevExpress.framework.html.HtmlApplication({       namespace: TipCalculator,       defaultLayout: "empty"});

 

In this Code, we must specify the default layout of the App. In this example, we use the simplest empty layout, and its more advanced layout can provide complete support for the interactive navigation style.

PhoneJS uses a number of fixed layout methods supported by the server framework, including Ruby on Rails and ASP. net mvc. To learn more about views and la S, click the link to view the PhoneJS online documentation.

To configure view navigation in SPA, you must add a line of code in index. js:
 

TipCalculator.app.router.register(":view", { view: "home" });

This statement is used to register a simple navigation for retrieving view names from URLs. The main image is defined in its HTML file and linked to the main apppage index.html:

 

<link rel="dx-template" type="text/html" href="views/home.html" />

PhoneJS ViewModel (view Model)

Using a view model in a program brings many benefits. A view model represents the data and Operations used by the view. Each view has a base name that is the same as the view and returns a view model to the view. For the Home view, you can use the views/home. js script to define the Home function for creating the corresponding view model.

 

TipCalculator.home = function(params) {      ...};

Here is a simple example of tip calculation. Three input parameters are used in the tip calculation algorithm: total bill, apportioned count, and tip percentage. These variables are defined as visible functions that bind corresponding UI parts. The visible function is provided by Knockout. js in the PhoneJS view model.

Initialize the home variable:
 

var billTotal = ko.observable(),      tipPercent = ko.observable(DEFAULT_TIP_PERCENT),      splitNum = ko.observable(1);

Tip calculation results are represented by four values: totalToPay, totalPerPerson, totalTip, and tipPerPerson. Each value is an interactive calculated value. As long as any value changes, the program automatically recalculates it. This is the standard Knockout. js function.

 

var totalTip = ko.computed(...);var tipPerPerson = ko.computed(...);var totalPerPerson = ko.computed(...);var totalToPay = ko.computed(...);

Next, we will give an example of business logic implementation in the view model to conduct more in-depth research on totalToPay. The total payable amount is usually rounded to an integer. Therefore, we need to set the roundUp and roundDown parameters to adjust the roundMode value. Because the roundMode is related to the totalToPay's accessible value, totalToPay is directly recalculated.
 

var totalToPay = ko.computed(function() {      var value = totalTip() + billTotalAsNumber();      switch(roundMode()) {           case ROUND_DOWN:                if(Math.floor(value) >= billTotalAsNumber())                      return Math.floor(value);                return value;           case ROUND_UP:                     return Math.ceil(value);           default:                     return value;}});

Once the input parameters in the view change, the program should immediately disable the integer function so that users can view the exact amount. We implement this function by changing the UI metric value:
 

billTotal.subscribe(function() {      roundMode(ROUND_NONE);});tipPercent.subscribe(function() {      roundMode(ROUND_NONE);});splitNum.subscribe(function() {      roundMode(ROUND_NONE);});

The preceding is a very simple example of a typical view model. If you want to view the complete view model, see home. js.

PhoneJS View

Let's look at the view tag in view/home.html. The root div element represents the "home" Name of a view, which is a div containing the "content" Placeholder tag.
 

<div data-options="dxView : { name: 'home' }">      <div data-options="dxContent : { targetPlaceholder: 'content' }">            ...      </div></div>

Toolbar at the top of the View:
 

<div data-bind="dxToolbar: { items: [ { align: 'center', text: 'Tip Calculator' } ] }"></div>

A custom control is under the toolbar. Here, we use two special CSS classes that can be compiled by PhoneJS: dx-fieldset and dx-field. The widget contains a text box showing the total bill amount, as well as two slide for the tip percentage and number of diners.

 

<div data-bind="dxNumberBox: { value: billTotal, placeholder: 'Type here...', valueUpdateEvent: 'keyup',min: 0 }"></div><div data-bind="dxSlider: { min: 0, max: 25, step: 1, activeStateEnabled: true, value: tipPercent }"></div><div data-bind="dxSlider: { min: 1, step: 1, max: 10, activeStateEnabled: true, value: splitNum }"></div>

Using the two buttons below the editor, we can adjust the total bill amount, and the remaining view is used to display the calculation result.
 

<div class="round-buttons">      <div data-bind="dxButton: { text: 'Round Down', clickAction: roundDown }"></div>      <div data-bind="dxButton: { text: 'Round Up', clickAction: roundUp }"></div></div><div id="results" class="dx-fieldset">      <div class="dx-field">            <span class="dx-field-label">Total to pay</span>            <span class="dx-field-value" style="font-weight: bold" data-bind="text: Globalize.format(totalToPay(), 'c')"></span>      </div>      <div class="dx-field">            <span class="dx-field-label">Total per person</span>            <span class="dx-field-value" data-bind="text: Globalize.format(totalPerPerson(), 'c')"></span>      </div>      <div class="dx-field">            <span class="dx-field-label">Total tip</span>            <span class="dx-field-value" data-bind="text: Globalize.format(totalTip(), 'c')"></span>      </div>      <div class="dx-field">            <span class="dx-field-label">Tip per person</span>            <span class="dx-field-value" data-bind="text: Globalize.format(tipPerPerson(), 'c')"></span>      </div></div>

At this point, the whole process of developing a simple App using PhoneJS is simple, direct, and clear.

 

Start, debug, and release

Like HTML5 applications, to start and debug a PhoneJS App, you must deploy folders containing HTML and JavaScript sources and other required resources on the Web server. Because PhoneJS has no server-side components, there is no difference in which Web server to use. You only need to support access to the required file resources through the HTTP protocol. Once the deployment is successful, you can open the App on the device or simulator. Of course, you can also enter a URL on the desktop browser for access.

To view the running effect on a smartphone or tablet through a desktop browser, you must reset the UserAgent attribute of the browser. Fortunately, many browsers now provide developers with related development tools, making operations quite simple.

Of course, if you do not want to modify the UserAgent settings, you can also use Ripple Emulator to simulate the running effect of different devices.

Up to now, you have developed a Web App that can run like a native App on a mobile browser. Modern mobile browsers provide local storage, location APIs, and camera interfaces. Therefore, it is ready to create Web apps like native.

PhoneJS + PhoneGap: Web + Native, creating a hybrid App

If you want to create not only a Web App, but applications that can be mounted to the App Store. You can use PhoneGap to create a hybrid application.

For most developers, PhoneGap is a HTML5 application development platform that allows you to compile and easily call APIs and enter the App Store using common Web technologies, it is also the only open-source mobile framework that supports 7 platforms. To use PhoneGap, you must have the SDK for the target platform, but you do not need to know the details of native development. Developers only need to provide the corresponding HTML, CSS, and JS documents, set attributes such as App name, version, and icon.

To publish an App, you must register the developer identity on the corresponding development portal. In addition, you must have the SDK for each platform. If you don't want to worry about it, you can use the PhoneGapBuild service to solve this problem. All in all, if you want your Web application to have the appearance and experience of the native App, PhoneJS will be your best choice. Of course, if you want to go further, you can also use PhoneGap to develop a hybrid application that integrates Web and Native.