Tuesday

Getting Started with iPFaces PHP Mobile Application Framework

iPFaces is a flexible solution for easy development of form-oriented network mobile applications. With the iPFaces solution, mobile devices are able to render content received from a server using their native UI components. It uses thin presentation client (must be installed on device) to render application content. Using iPFaces it is possible to build an application where users can use their device's specific component behavior and additional device features, such as location service and additional graphic components of the device (lists, pickers etc.).

Architecture

The solution is based on the use of a thin presentation client installed on the device and an application/web server which generates the content for clients. The client and the server communicate with each other using the network.

The idea is similar to the web browser - web server model. The client sends HTTP(S) requests to the server and receives iPFaces specific HTTP(S) responses, where the content is an XML representation of the application's form which is be rendered on client-side together with the form's data.

image01.png

How to start?

Development of a complex iPFaces application is really simple because the simulation mode can be used. This mode is capable of transfering XML content to a HTML page, which can be displayed in a web browser. It is a helpful tool for developers who can see their iPFaces application in the browser window and they do not need a real iPhone device for main development.

Developers can build and deploy an application to the application server and the browser will show them the GUI which is almost the same as a screen in an iPhone application. There is a difference in the GPS elements. A GPS field is working in a browser only as text field that can be filled by user and GPS coordinates will be submitted. The GPS field is hidden on mobile devices, because the location of the device is detected without interaction with the user.

image02.png
image03.png
Figure 1: Form representation on the iPhone device and in a web browser

Hello World Example

To use PHP iPFaces library, just include "ipfaces-php-lib-1.1.php" file, construct the component tree and call "render()" method on the component form.

  1. require "path/to/ipfaces/library/ipfaces-php-lib-1.1.php";
  2. $ipf_form = new IPFForm();
  3. $ipf_screen = $ipf_form->addScreen("screen", "Hello World Application");
  4. $ipf_screen->addLabel("label", "Hello World!");
  5. $ipf_form->render();
image04.png
image05.png
Figure 2: Hello World example

More complex example

The following example is not complete. It only illustrates how easy it is to define forms for iPhone using iPFaces. For complete examples please visit http://www.ipfaces.org

Example: Use of location service

To obtain a user location from a mobile device use the IPFGsm class. Upon submission of a form, the location data will be sent as a parameter with the selected name (gpsElement in this example).

  1. require "../lib/ipfaces-php-lib-1.1.php";
  2. require "citydatabase.php";
  3. $form = new IPFForm();
  4. $screen = $form->addScreen("How Far Is It?");
  5. $screen->addLabel("You can find distance between your position and selected city.");
  6. $parser = new CityDatabase();
  7. if (isset($_COOKIE["city"])){
  8. $value = $_COOKIE["city"];
  9. }
  10. $select = new IPFSelect("citySelect", $value, "Distance to" ,"list" );
  11. $options = array();
  12. for($row = 0; $row < count($parser->data); $row++){
  13. $options[] = new IPFOption($row, $parser->data[$row]["City"]);
  14. }
  15. $select->Icon = "../img/distcalc.png";
  16. $select->addOptions($options);
  17. $screen->addItem($select);
  18. $screen->addGps("gpsElement");
  19. $screen->addButton("backButton", "1", "Examples", "../index.php", IPFButton::BUTTON_TYPE_LINK, IPFButton::BUTTON_POSITION_BACK);
  20. $screen->addButton("submitButton", "0", "Calculate" , "distance.php", IPFButton::BUTTON_TYPE_SUBMIT, IPFButton::BUTTON_POSITION_FORWARD);
  21. $form->render();
image06.png

curtsy:

No comments:

Financial Engineering