HTML5

How to combine Sencha Touch and PhoneGap to create a native app for android

Leave a comment

Prerequisites:

  • Phonegap (Version 2.9 or later)
  • Sencha Command Line Tool (Version 5.0.0 or later)

Firstly I’ve downloaded the Phonegap package (from the phonegap archive) and extracted it to my folder /opt/phonegap-2.9

Afterwards I’ve downloaded the Sencha Touch Framework from Sencha and placed it on my Linux Ubuntu 14.04 into the folder /opt/senchatouch2

Combination of Sencha Touch and Phonegap

Create a Sencha Touch application

To make use of this combination, we need to create a touch application.

Open a terminal and type in:

cd /opt/senchatouch2/
sencha generate app AppName /var/www/AppName
cd /var/www/AppName
sencha app build package

Now if you open your favorite web browser (webkit-browser work best for sencha touch), you should be able to see your created application:

http://localhost/AppName

If this works and you can see your application, you can try to have a look for the package build we’ve just done in addition:

http://localhost/AppName/build/package/AppName.

This version is a minified version of all the individual sencha touch files, merged into one single file.

If you are able to open the build package in your web browser, we are ready now to take one further step and go on with the Phonegap project creation.

Create the Phonegap project

cd /opt/phonegap-2.9/lib/android/bin/
./create /var/www/AppName/build/package/AppName/android com.yourdomainnamespace.AppName AppName
cd /var/www/AppName/build/package/AppName/android/
ant debug && adb install -r ./bin/AppName-debug.apk

The first line changes from the current directory to the phonegap folder. There we use the create script to create a phonegap project for us. Afterwards we change to the build directory and create a apk file which will be installed directly in your running android emulator. If you don’t want to test it in an emulator, just copy the apk file onto your android device.

Warning: Test the apk on your device on your own risk! This may be harmful for your device and therefore testing on an emulator is recommended!

At this moment, what you will see, will just be like the Apache Cordova splash screen which shows the device is ready animation. If this is also works on your side, you’ve done a good job so far.

Open now the file /var/www/AppName/app.json and add the lines marked in bold to the js section of this file:

"js": [
     {
         "path": "cordova.js"
      },
      {
         "path": "touch/sencha-touch.js",
         "x-bootstrap": true
      },
      {
         "path": "bootstrap.js",
         "x-bootstrap": true
      },
      {
         "path": "app.js",
         "bundle": true,
         "update": "delta"
      }
   ]

And kick off a build:

cd /var/www/AppName/
sencha app build package

When you refresh now your application in the browser and open the developer tools (most probably F12) you should see that the app loads the cordova.js file properly.

Well, at this point, we need to change a few code lines in the build.xml file. We need to copy our desired application files into the cordova web root which is located in /android/assets/www/.

Copy following code lines below the section:

<import file="${basedir}/.sencha/app/build-impl.xml"/>
<target name="-after-build">

		<delete dir="${build.dir}/android/assets/www" />

		<copy todir="${build.dir}/android/assets/www">
		    <fileset dir="${build.dir}" />
		</copy>

		<delete dir="${build.dir}/android/assets/www/android" />
    	</target>

Afterwards kick off a build again:

cd /var/www/AppName
sencha app build package
cd /var/www/AppName/build/package/AppName/android/
ant debug && adb install -r ./bin/AppName-debug.apk

In your android emulator now should your Sencha Touch application as a native app combined with phonegap features.

To make use of them either visit phonegap.com and have a look to the api, or just give it a try with following commands which you add to /var/www/AppName/app/view/Main.js to the items section:

items: [
            {
                title: 'Welcome',
                iconCls: 'home',

                styleHtmlContent: true,
                scrollable: true,

                tpl: [
                    'device name: {name}<br />',
                    'phonegap version: {cordova}'
                ].join(''),
                listeners: {
                    initialize: function() {
                        this.setData(device);
                        navigator.notification.vibrate(250);
                        navigator.notification.alert('Testing the Notification feature of cordova (Phonegap)');
                        
                    }
                }
            }
        ]

Let’s kick off our last build for this how to:

cd /var/www/AppName
sencha app build package
cd /var/www/AppName/build/package/AppName/android/
ant debug && adb install -r ./bin/AppName-debug.apk

And now switch to your emulator and see the final result.

How to install Zend Framework 2 (ZF2) & ZFTool (Command Line Tool) in Linux Ubuntu 14.04

Leave a comment

Introduction:

The Zend Framework 2 is a MVC Framework developped by the PHP developpers called Zend.

I am using an Ubuntu 14.04 Desktop with an installed Apache2 web server, php5 (5.3+ required for ZF2).

Installation Process:

Download Zend Framework 2

First you will have to download the Zend Framework you desire to install (version >= 2.0.0 for this tutorial)

Visit Zend Archive and download your Zend package. 
Extract it to /usr/share/php/ZendFramework2

Download ZFTool

Afterwards you will need to install ZFTool. It is a command line tool which gives you the ability to create projects, models, viewtemplates and so on.

Download ZFTool from GitHub.
Extract it now to /usr/share/php/ZFTool

Now you need to grab a file called zftool.phar.

Download it directly from Zend packages.
And then extract it to the previously created folder
/usr/share/php/ZFTool/bin/.

For the extraction process you are free to choose between handling it over the terminal or the graphical way.

Notice: You will need permission rights to add content to the /usr/share/php/ folder!

You can use sftp://root@localhost to get access to this folder with root permissions, but use this way carefully!

Now you have installed the ZFTool but it is a pity to write the whole path to the executable file to use this tool.
However, as linux gives us the possibility, we can make use of aliases (for the standard user).

Create Alias

cd /etc/php5/conf.d/
sudo touch zend-framework2.ini
sudo gedit zend-framework2.ini

Now you should be able to edit this recently created file. Add the following content to it:

[Zend]
php.include_path = "/usr/share/php/ZendFramework2/library"

Save and close the file afterwards.

Let’s define the alias now:

sudo gedit ~/.bashrc

Add the following lines to your bashrc if they aren’t already defined or uncomment them
(keep in mind to edit from you standard user!):

# Alias definitions.
# You may want to put all your additions into a separate file like
# ~/.bash_aliases, instead of adding them here directly.
# See /usr/share/doc/bash-doc/examples in the bash-doc package.

if [ -f ~/.bash_aliases ]; then
   . ~/.bash_aliases
fi

Save and close again.
Now we have to create the file we are looking for in the previous bashrc:

sudo touch ~/.bash_aliases
sudo gedit ~/.bash_aliases

We add the following line(s) to the file:

alias zf2='export ZF_CONFIG_FILE=/etc/php5/conf.d/zend-framework2.ini; sudo /usr/share/php/ZFTool/bin/zftool.phar'

Finally save and close it.
Now use following command to reload your bashrc file to make the changes taking effect:

. ~/.bashrc

Now you can try to use ZFtool:

zf2 --version

You should get something like this:

ZFTool - Zend Framework 2 command line Tool
The ZFTool is using Zend Framework 2.2.4

Basic usage

For the basic commands of this tool please check the manual / help.

zf2 --help

Debugging

If you get an error, for instance, you wouldn’t have the required permissions,
you could try to give your user the permissions to access the zend directory.

sudo -i
cd /usr/share/php/
chown -R yourUser:yourUser ZFTool/
chmod a+x ZFTool/*
exit

Afterwards try again zf2 --version while logged into the command line with yourUser.