Sencha Touch MVC Application Tutorial

I have been catching up on the work of CAM, who has an excellent, so far 3 part series on how to build a MVC mobile application using Sencha Touch. The Sencha Touch tutorials seem to leave a lot of people confused so CAM hand holding and informative approached is quite refreshing. Head over to the site:

http://www.onlinesolutionsdevelopment.com/blog/mobile-development/creating-a-sencha-touch-mvc-application-from-scratch-part-1/

The First Rule Of Development: Nothing will work as expected!

Allow me to be bold with this one, but today I ran again into another one of those environment set up issues that make you question your sanity. No need to get into the details, but ever since the beginning of my career, which has involved quite a bit of J2EE development, one of the things that have amazed me is the ramp up time it took to get started on a project. I am not talking about merely perusing through the code, trying to understand the architecture, get a feel for what’s going on, but simply checking out a project from repository, into Eclipse, and being able to run it on my localhost. “What about the documentation?” I hear you say, you smug devil,  and I smile with full teeth at your foolish smugness. Documentation? Who has time for “Documentation”. “Documentation” means one eager programmer like you was kind enough to flesh out the major steps that should get you to where you need, but in development: THE DEVIL IS IN THE DETAILS…

Why is it that nothing ever works as expected?(Hint: Because we need enjoy the gift of debugging to become expert debuggers)  “Copy the so and so .jar to the WEB-INF folder, change this line in web.xml and you are good to go!” said the instructions, yet it’s one week later and Tomcat still won’t start.   I remember on one of the J2EE projects that i worked on, which was an offshoot of an existing project with a 50+ pages outdated development environment set up document, it took me close to two months to get an environment going. I followed the steps, but with each one a pitfall, a bug, that I had to extract a solution for from the minds of not-always-willing-to-share previous developers. It was so obvious in their minds, but not written in the documentation:

“Oh yeah, we had to change this because this and this happened, this is what you need to do…” Thanks, that could have saved me two days!

“Oh that piece of code, unless you are working on this and that you won’t need that!” Thanks, I just spent the last three days trying to get it to work.

Bottom line is that we as developers have to do a better job at documenting what we do (I hope the developers that came upon my documentation agree), and that for the sake of other developers, and not assume that a) it is not such a big deal or b) others will be able to fill in the gaps. I thought J2EE development environments were the worst but I’ve had my share of mishaps in LAMP environments as well.  I am curious, though, as I always assumed that .Net programmers must be somewhat free of those problems being that the word was MS did a good job of providing a polished development environment,  is the grass greener on the other side? Is it an open source software issue? I am interested in hearing about your experience with how easy (or not) it is to become productive within your chosen programming language and associated development environment.

How to create site thumbnail images

If you have ever in need of create a thumbnail image of a site, or just get an image of a site, there are a lot of services out there that offer that capability online. The best one I have found so far for casual usage is:

Thumbalizr

By providing it with a URL, Thumbalizr will return you a screenshot of the site in a variety of formats. You can even specify a custom size. Their prices seem to be reasonable for a heavier type of usage but if your goal us just to capture a quick screenshot and you don’t want to worry about editing it, Thumbalizr is the way to go.

 

Installing SSH2 manually on Debian Linux

Phew. I’ve just succeeded in installing SSH2 on my DreamHost hosting account, which happens to run on Debian. I am more of a Windows guy which explains why it took me so long but I am none the wiser for the experience. Let me show you how I did it. I used these two excellent articles as my points of reference:

Installing SSH2

Make SSH Connections with PHP

First of all, let it be said that I am running on PHP 5.3. So if you are using DreamHost as your hosting provider, follow this guide here to update your account:

PHP Upgrade Guide

If you are already running 5.3 you might want to skip a few of these steps down and read ahead:

Upgrading to PHP 5.3

PHP 5.3 supports several new configuration hooks which make custom php.ini configuration super-easy! DreamHost recommends that all users needing custom PHP setup use PHP 5.3 or later, as the configuration changes required to set it up are much simpler than for PHP 5.2.
Log into the panel at https://panel.dreamhost.com/index.cgi?tree=domain.manage& and change your domain to use php5.3 (probably fast cgi)
Create a directory under your user called .php, with a subdirectory called 5.3. Files under this directory will be used by all domains under that user which are set to use PHP 5.3.
Example for the terminal
mkdir ~/.php
mkdir ~/.php/5.3
Once this directory exists, there are two files you can create in it:
To add custom directives to PHP, create a file under .php/5.3/ called “phprc” and add configuration directives to it. You do not need to copy the default php.ini to this file, as it is used in addition to the system php.ini; if a directive appears in both files, the one in this file will take precedence.
nano phprc
and then type in the commands you need.
Sample directive which turns off error reporting level Notice and Deprecated
error_reporting = E_ALL & ^(E_DEPRECATED|E_NOTICE)
Replace the system php.ini entirely
To replace the system php.ini entirely, create a file under .php/5.3/ called “phpini”. If this file exists, PHP will not read the system php.ini at all, so you should probably start by copying /etc/php53/php.ini here as a starting point. In most cases, this file is not necessary — please use a phprc if at all possible.
You may need to force PHP to reload its configuration file for changes to take effect. You can do this by running “killall php53.cgi” from a shell, or by waiting several minutes.
Loading PHP 5.3 extensions
Our build of PHP 5.3 contains a number of additional extensions which are not loaded by default (for instance: soap). You can load them by simply adding the following line to a file at /home/username/.php/5.3/phprc:
extension = soap.so

That last paragraph about loading php5.3 extensions is important because that’s exactly what we will do once we build and compile the ssh2 extension. For the mean time, make sure you are running PHP 5.3 by typing the command “which php” which should give you something like /usr/local/etc/php53. Your mileage might vary. If it still says /usr/local/etc/php5 on Dreamhost, you are still running 5.2.

Libraries Needed

Once you are running 5.3, the next step would be to download the necessary files you will need to compile and install. Download the archives for LibSSH and SSH2. I have used:

Once downloaded, I uploaded them manually to a “src” folder on my server and unzipped them. You could use the wget command to download the files, you know, pack it all up nice  in a shell script(Try this script on your machine, make sure you edit the values for PHPDIR and PREFIXDIR, specially for PHPDIR, make sure it points to your PHP 5.3 installation) but for some reason, it did not work for me. I just ran the following commands manually:

#Keep in mind I am using the following values for the {} variables you are seeing below
SRCDIR=${HOME}/src
PHPDIR=usr/local/etc/php53
PREFIXDIR=${HOME}/sshprefix
LIBSSH2="libssh2-1.8"
LIBSSH2FEATURES="--prefix=${PREFIXDIR}"
SSH2="ssh2-0.11.2"
SSH2FEATURES="--prefix=${PREFIXDIR} --with-php-config=${PHPDIR}/bin/php-config --with-ssh2=${PREFIXDIR}"
# Push the install dir's bin directory into the path. Important step not miss export PATH=${PREFIXDIR}/bin:$PATH export PHP_PREFIX=${PHPDIR}/bin

# Extract the src files into the src directory.
cd ${SRCDIR}

tar xzf ${SRCDIR}/${LIBSSH2}.tar.gz 

tar xzf ${SRCDIR}/${SSH2}.tgz 

## Compile

#AUTOCONF
cd ${SRCDIR}/${AUTOCONF}
./configure --prefix=${PREFIXDIR}
make install

#LIBSSH2
cd ${SRCDIR}/${LIBSSH2}
./configure ${LIBSSH2FEATURES}
make all install

#SSH2
cd ${SRCDIR}/${SSH2}
$PHP_PREFIX/phpize
./configure
make

Once this is done, your ssh2.so extension file should be avaible in the {SRCDIR}/ssh2-0.11.2/modules directory. What is important to remember for installing on DreamHost shared account is that since you don’t have access to the system’s regular folder, you need to specify a prefix directory to append to the path to support all the libssh and ssh2 related commands. That’s a very important step to complete. Copy the file to the .php/5.3 folder you created earlier and edit your phprc file to :

cp ~/src/ssh2-0.11.2/modules/ssh2.so !/.php/5.3
Edit your phprc file also to load the ssh2.so extension

extension=ssh2.so

Verify that the ssh2 extension was loaded by entering in the command line:

php -m

You should see the ssh2 extension loaded in the list. That’s it. You are free now to return to your code and use SSH2 connections to your liking!

Hope It Helps!

ExtJS: Show a loading mask during Ajax calls

This is my first ExtJS post in a long while and sorry it’s not related to ExtJS4; maybe in the near future.Recently I was asked to implement a page wide mask during Ajax calls to prevent user from interfering with the current call by clicking on the screen or doing something they otherwise should not be doing while the call is running. I initially used the “wait:true” option of the Ext.MessageBox configuration, but the stakeholders did not like it since the progress bar it displayed was not synced to the actual length of the call. This is how I ended up implementing it:

function showLoadingMask(loadingMessage)
{
if (Ext.isEmpty(loadingMessage))
loadText = 'Loading... Please wait';
//Use the mask function on the Ext.getBody() element to mask the body element during Ajax calls
Ext.Ajax.on('beforerequest',function(){Ext.getBody().mask(loadText, 'loading') }, Ext.getBody());
Ext.Ajax.on('requestcomplete',Ext.getBody().unmask ,Ext.getBody());
Ext.Ajax.on('requestexception', Ext.getBody().unmask , Ext.getBody());
}

Hope it helps!

 

The meat of the functionality is in binding the mask() and unmask() function of the Ext.Element object to the ‘beforerequest’, ‘requestcomplete’ and ‘requestexception’ events of the Ext.Ajax object. I need a custom message to be displayed depending on the context that’s the reason why i encapsulated that logic in a function. I also tweaked my CSS a little to customize the mask style, overriding the ExtJS style, as well as the style of the message displayed to the user:


.ext-el-mask
{
color:gray;
cursor:default;
opacity:0.6;
background-color:grey;
}

.ext-el-mask-msg div {
background-color: #EEEEEE;
border-color: #A3BAD9;
color: #222222;
font: 1.2em tahoma,arial,helvetica,sans-serif;
}

.ext-el-mask-msg {

padding: 10px;

}

Leverage your web developer skills for mobile development

In the world of mobile application development, you can either build applications the standard way, which means using Objective-C to write Apple iOs applications, or Java with the Android SDK for your Android applications etc etc, you get the point. But a new paradigm has appeared that is very appealing to web developers like me as complementary to a skill set I already possess: writing mobile applications using HTML, CSS and Javascript. The tool that makes this magic possible is called PhoneGap and version 1.0 has just been released to I bet, the delight of many mobile developers out there. The concept behind PhoneGap is simple:

  • Build your app using HTML and Javascript
  • Access the native phone APIs through the PhoneGap wrappers
  • Deploy to multiple platforms

The appeal here is reminiscent of the early Java slogan, “Write Once Run Anywhere” or WORA, for those who still remember, and PhoneGap is even lauching a beta for PhoneGap Build, a service that will allow you to “write your app using HTML, CSS or JavaScript, upload it to the PhoneGap Build service and get back app-store ready apps for Apple iOS, Google Android, Palm, Symbian, BlackBerry and more”.  There are a  number of Javascript frameworks out there that can be used to build apps in conjunction with PhoneGap, the  two most popular are JQuery Mobile and Sencha Touch. Both are very capable frameworks that make use of the latest advances in CSS3 and HTML5. Your choice in a guttural way would depend on your familiarity with their browser counterpart (JQuery or ExtJS). What you have to understand at the end of the day with the PhoneGap architecture is that your finished app would basically be a web page running within a browser. Here are a couple tutorials to get you going either on Sencha Touch or JQuery Mobile.

Combined as I mentioned earlier with the fact that by using HTML, CSS and Javascript the learning curve for a web developer is suddenly cut into mere hours instead of the days or even weeks required to learn and master a new heavy language like Objective C or Java, you have to wonder how come every mobile developer out there is not rushing to adopt PhoneGap. Well there are limitations when it comes to building an application using PhoneGap and here is a shortlist (By no means exhaustive, feel free to inform me of more in the comments, I will add them to the list) :

  • Running from within a browser your app won’t have the native built-in styles available unless you use CSS to mimic them. There are frameworks that have been created to that effect. Sencha Touch comes with two default themes for iOs and Android and there are JQuery Mobile Themes available as well.
  • Performance will take a hit because of the extra layer between the app and the OS.
  • Access to the some of the native phone high level functionality is sometimes limited.
  • Support is sometimes hard to come by for specific issues, since this is a community supported project.

Those issues withstanding, I still think that PhoneGap is only poised to get better, and improve support for more native functionality. I think it is complimentary to my web development skills and allow me to expand into a new market without really stepping out of my comfort zone. If you are worried about native feature support or exploiting more of the native SDK, you should definitely look into Titanium, from Appcelerator which offers to “translates your hard won web skills into native applications that perform and look just like they were written in Objective-C [iPhone and iPad] or Java [Android]”.

Here is a list of links I found useful on the matter: