Cloud-connected mobile applications [Building Mobile Applications]

Zend Studio now offers a CCM tool enabling developers to build native mobile applications using the cloud platform. CCM supports development of RPC-based or REST-based web services for the cloud using Zend Framework 2 and Zend Server Gateway.

CCM also offers support for developing native mobile applications by integrating with various mobile SDKs (Android SDK/ADT for Android, Xcode for iOS, and Windows Phone SDK for Windows Phone). This enables developersto build and test the applications in native environments/devices.

CCM tool also offers a simple and easy-to-use mobile GUI editor which helps developers to effortlessly build great user interfaces for their mobile applications.

Zend Studio 10

As a first step towards building your mobile application, please ensure that you install Zend Studio 10 on your development machine. Zend Studio 10 offers integrated support for building cloud-connected mobile applications and allows developers to deploy their mobile application on the cloud.

Zend Studio 10 is available for purchase from the Zend Online Store; there is a free

30-day trial as well. For further information visit http://www.zend.com/en/products/

studio/.

phpCloud

Zend Developer Cloud is a cloud-based PHP development environment, which enables developers to build and deploy applications on the cloud, without undergoing the hassle of setting up a PHP development environment, and configuring and maintaining the environment.

This environment has Zend Framework 2 installed with a large set of PHP extensions; developers can make use of various development tools such as Zend Studio, Eclipse PDT,

and CLI to build and deploy their applications on the developer cloud. Zend Developer Cloud also provides capabilities to push your application to other external cloud services such as Amazon and IBM SmartCloud.

Zend Developer Cloud is currently in free developer beta. For further information about Zend Developer Cloud, please refer to their website: http://www.phpcloud.com/.

In this task we will set up our phpCloud account and configure the cloud environment in Zend Studio 10 using the following steps:

1.       Visit https://my.phpcloud.com/user/login, register for a new account, and log in to your phpCloud account.

2.       After the login, you will be asked to create a container. You can specify a container name which will be a part of the container URL; you can also choose to generate a SSH key pair or use your own SSH keys; in this case,we will generate a new SSH key pair. The following screenshot describes the container creation screen:

3.       Now download the SSH keys; we will be using these keys to set up our deployment target in Zend Studio:

       4.       In Zend Studio, navigate to Window | Show View | Targets:

      5.       Click on the Add Target icon and choose phpcloud as shown in the following screenshot:

6.       On the phpcloud Target Details page, you will be asked to provide the following details:

‰        Username: Used to specify your Zend Developer Cloud username

‰        Password: Used to specify your Zend Developer Cloud password

‰        SSH Private Key: Used to point to the SSH key that was just generated in the phpcloud container creation screen

7.       After you click on Finish, you will see that the new target is added to the list of targets:

What just happened?

We have successfully created our first mobile application using Zend's cloud-connected mobile application projects. In the subsequent sections we will understand how to extend these web services using Zend Framework 2 to build additional functionality into mobile applications.

HTML5 attributes [HTML5 Support]

You might have noticed in the beginning of the chapter that we were using new attributes such as min, max, and step. These are new attributes that are defined

in the HTML5 specification that allow developers to specify additional configuration on the input element. Some important attributes are discussed in the following list:

◆        max: Applicable to the Number, Range, and Date fields; allows specification of

maximum value in the input.

◆        min: Applicable to the Number, Range, and Date fields; allows specification of a

minimum value in the input.

◆        step: Applicable to the Number, Range, and Date fields; allows specification of an increment value in the input.

◆        list: Applicable to various textbox style inputs. Allows developers to map the field to a data list, thus allowing end users to pick them from the list.

◆        placeholder: Applicable to various textbox style inputs. Allows developers to show placeholder text until the element gains focus.

◆        pattern: Applicable to various textbox style inputs. Allows developers to validate the user input against a regular express-and-throw-a-validation error.

◆        required: Prevents users from submitting the form with empty values in the required fields.

◆        multiple: Applicable to file input; allows multiple file uploads from a single file control.

Multiple file uploads

For implementing multiple file uploads, you will need to set the multiple attribute on the file input element to TRUE. If the browser supports multiple file uploads, then the user will be allowed to select multiple files, otherwise the control will limit to just one file selection.

Perform the following steps for HTML5 multiple file uploads:

1.       Create a new ImageUpload form; make sure that the multiple attribute for the

File element is set to TRUE:

<?php

// filename : module/Users/src/Users/Form/MultiImageUploadForm.php namespace Users\Form;

use Zend\Form\Form;

use Zend\Form\Element; use Zend\InputFilter;

class MultiImageUploadForm extends Form

{

public function   construct($name = null, $options = array())

{

parent:: construct($name, $options);

$this->addElements();

$this->addInputFilter();

}

public function addElements()

{

$imageupload = new Element\File('imageupload');

$imageupload->setLabel('Image Upload')

->setAttribute('id', 'imageupload')

->setAttribute('multiple', true);

//Enables multiple file uploads

$this->add($imageupload);

$submit = new Element\Submit('submit');

$submit->setValue('Upload Now');

$this->add($submit);

}

public function addInputFilter()

{

$inputFilter = new InputFilter\InputFilter();

// File Input

$fileInput = new InputFilter\FileInput('imageupload');

$fileInput->setRequired(true);

$fileInput->getFilterChain()->attachByName( 'filerenameupload',

array(

'target' => './data/images/temp.jpg', 'randomize' => true

)

);

$inputFilter->add($fileInput);

$this->setInputFilter($inputFilter);

}

}

2.       Set up an action to handle the file uploads, and to redirect the user to an upload confirmation page:

public function multiUploadAction()

{

// prepare form

$form = $this->getServiceLocator()->get('MultiImageUploadForm');

$request = $this->getRequest(); if ($request->isPost()) {

$post = array_merge_recursive(

$request->getPost()->toArray(),

$request->getFiles()->toArray()

);

$form->setData($post);

if ($form->isValid()) {

$data = $form->getData();

// Form is valid, save the form!

return $this->redirect()->toRoute('users/html5-test', array('action' => 'processMultiUpload'));

}

}

$viewModel  = new ViewModel(array('form' => $form)); return $viewModel;

}

3.       Now test the form in your browser that supports multiple file uploads with HTML5, for example, Opera 12. You will see that the file selector interface allows the selection of more than one file as shown in the following screenshot:

5.      You can verify if the files are uploaded successfully and the filters are applied by navigating through the data/images directory and looking up for the uploaded files. You can see that all files start with temp and have a _<random_number> suffix in their filenames:

What just happened?

We have now created an HTML5 multiple file upload form using HTML5 attributes and Zend form elements. We have also applied a filter to rename the uploaded files and have also seen how filters work in multiple file uploads.

Q1. Which of the following methods is a newly supported HTML5 input type?

1.       text

2.       radio

3.       checkbox

4.       number

Which of the following input types do not have a Form element defined in ZF 2.1?

1.       tel

2.       date

3.       color

4.       search

Summary

HTML5 is a very robust and powerful specification of HTML which is still partially supported by most browsers. As newer versions of browsers come out in the market, you will get to see much more enhanced support for this specification. In our next chapter, we will be using ZF2 to build mobile web applications.