Mobile version for your app backend

Contents...

Webasyst framework offers tools for creating a special application version for mobile devices with touch screens (smartphones and tablets). The current version contains a limited set of such tools, which does not yet allow creating native applications to work in mobile operating systems. Only creation of web interfaces optimized for such devices is currently supported.

In the framework is included the jQuery Mobile library, which facilitates fast designing of finger-controlled web interfaces. It should be noted that jQuery Mobile library is still in the alpha development stage and its stable operation on the entire variety of available devices is not guaranteed.

The framework kernel automatically detects a user's device type and offers the standard or the mobile interface version depending on the result. The framework includes a built-in mobile version of the login page and the main backend page, which do not have to be created by each application developer.

Within an application the type of the client device (standard or mobile) can be determined simply by calling method isMobile() of system class waRequest:

//This method determines the type of the device, from which an HTTP request has been sent,
//and returns true, if it is a mobile device (smartphone, tablet);
//otherwise it returns false

waRequest::isMobile()

Methods of creating a mobile application version

One of the main tasks arising during the development of a mobile application version is creation of alternative (usually simplified) web page templates. Since a template file is rigidly tied to the corresponding action as described in section Naming rules and recommendations", i.e. execution of an action always results in the processing of a related template file, a logical question arises: how can the system select an alternative template file for a mobile device?

There are several methods of solving this problem. Below are provided two methods, though other solutions are also possible including various combinations of the methods described below.

Method 1. Creation of separate standard and mobile modules and actions

This method actually requires creation of two independent application versions: standard and mobile. With this approach each application version will have its own URL space, available functions, and interface pages. This will allow a developer to create a separate set of controllers, actions, and templates for the mobile version.

The single intersection point of both application versions would be only its main page, which can also be modified: a separate web interface accessible via a different URL can be created for the mobile version, and the operating logic of the standard version can be enhanced by a condition to redirect mobile clients to the URL of the mobile version:

if (waRequest::isMobile()) {
    this->redirect('mobile/');
    return;
}

Method 2. Customization of the default action-to-template relationship

In the cases when the standard and the mobile application versions are functionally identical or very close to each other, creation of a parallel application version for mobile devices would be time-expensive and logically incorrect (because of large duplicate portions of the source code in each version).

The architecture of the Webasyst framework allows overriding the default relationship between actions and template files by including a condition verifying the value returned by method waRequest::isMobile(). To achieve that, you should override method getTemplate of the appropriate action class (extending class waViewAction or waViewActions; read more in section "Actions and controllers"), which implements the logic used to determine the name of the action's template file. Below is provided an example for Stickies application to illustrate this approach:

<?php

class stickiesBackendAction extends waViewAction
{

    ...
    
    public function getTemplate()
    {
        $template = parent::getTemplate();
        if (waRequest::isMobile()) {
            $template = str_replace('templates/actions/', 'templates/actions-mobile/', $template);
        }
        return $template;
    }

}