Mobile Client-side Development

From HTML5 Builder
Jump to: navigation, search

The client-side part of a mobile application is the part responsible for the logic that is processed in the stand-alone version of the application, the one deployed to mobile devices. This logic will not require a working internet connection on the device running the application, unlike server-side logic.

Client-side logic is implemented using JavaScript code, that is printed on the pages of your application by defining (PHP) event handlers for JavaScript events of components (preferred method), or by using the header of the pages to either write JavaScript code directly or to include external files.

For example, to make a message pop up once a page is loaded, you can use MPage’s OnLoad event. Define an event handler like the one below, and link it to the event:

function MPageJSOnLoad($sender, $params) {
  ?>
    alert("This is a pop-up message coded with JavaScript!");
  <?php
}

When developing mobile applications‘ client side logic, you will also have some JavaScript libraries available by default, so you should take advantage of them:

  • jQuery, a popular and powerful JavaScript library.
  • jQuery Mobile, an extension of jQuery with controls and features designed for mobile applications.
  • PhoneGap, an application platform to get access to mobile devices’ APIs through HTML and JavaScript.

Components

To access components using JavaScript, you can use the following RPCL JavaScript method:

var component = jQuery('#ComponentName');

ComponentName would be the value of the Name property of the component.

Many components are located inside a container div, which is used to move them around the form and add them features such as borders. If you want to change the position of a component through JavaScript, or even hide or delete that component from the page, you will need to reference the component’s container instead of its main element. To do so, follow the procedure above appending _outer to the component Name:

var component = jQuery('#ComponentName_outer');

Help Resources

Documentation

See Also