Developing Mobile Applications with Force.com and Sencha Touch – Part 1

Overview

If you are a Force.com or Sencha developer, you already understand the power and leverage of using a framework-based approach for building applications. You know from first-hand experience how patterns, pre-built functionality, metadata driven configuration, and a robust and structured architecture speed the creation of business solutions. But, the leverage of a framework-based approach gets tremendously greater when you can integrate multiple complementary frameworks. Mobile application development that brings Sencha Touch and Force.com together is a great example, and can yield great Force.com-based apps that can run on any touch device.

This series of articles will introduce you to the Sencha Touch mobile framework for building HTML5 applications with JavaScript, HTML and CSS, and will cover how to use it to build Force.com apps. Sencha Touch integrates very easily with Visualforce and the Force.com platform, and makes it relatively simple to build powerful business apps linked to a Salesforce or Force.com back-end. It renders a robust, touch-style user experience by manipulating the HTML Document Object Model (DOM) in a browser. Sencha Touch applications are typically written entirely in JavaScript, leveraging a rich hierarchical class system, a UI component library, and an MVC package.

The Sencha Touch application itself is typically hosted in an HTML home page, and all elements and components that render the touch style user interface are created dynamically in JavaScript, with the framework providing a consistent and predictable architectural foundation. You define, create and extend your classes from an object oriented component framework, providing for all aspects of a modern touch style user experience and powerful data management. A Visualforce page can host any HTML content, and is therefore a natural host for a Sencha Touch application.

A Richer JavaScript Framework

The Sencha Touch framework provides a full set of UI controls, over 300 built-in icons, full support for theming, MVC support, data binding, and more. It is designed to take advantage of hardware acceleration, and includes a native packager with native device APIs that work on both iOS and Android. This is all topped off with on-line documentation, screencasts and other learning resources including examples of all components plus full reference applications.

Sencha Touch uses minimal HTML in the hosting page and is dependent upon pure JavaScript for all of its features and functionality. This suggests that a developer would require a deeper knowledge of JavaScript, Yet, one of the greatest benefits of Sencha Touch is that it ‘tames’ JavaScript with its hierarchical class system that provides a structure to ease development and maintenance.

It is a perfect fit for building enterprise mobile applications, as it promotes a component based modular approach, resulting in an organized code base. This helps to keep applications manageable as they grow, and enables collaborative development.

A Sencha Touch application can be deployed within Visualforce as raw JavaScript, or with other architectural approaches available depending on the desired modularity and optimization required by your application. Sencha’s libraries are available from a hosted cloud server, or Sencha’s SDK builder tools can compile and minify an application into highly compressed and optimized JavaScript files which can in turn be easily deployed as Force.com Static Resources. Sencha also provides a mechanism to patch and update mobile JavaScript applications in a very smart and efficient manner after they are cached locally on a mobile device . The Sencha MVC Data Package can integrate directly with Apex controller @RemoteAction methods, as well as with the Force.com REST API, providing options for highly scalable and maintainable data transport mechanisms.

Let’s Build Something Simple and Grow its Complexity Incrementally

To help you get to know the framework, we’re going to build a very simple mobile application using Sencha Touch with Visualforce. Our application will not require any user authentication; we’ll expect our users to login from a mobile phone browser directly to Salesforce. Nor will we require you to download, install or configure any Sencha SDKs or toolsets; all of our development will be performed in the cloud.

Our application will be a one page mobile web application to display Lead information. We’ll name our application PocketCRM, and slowly build it out over a number of iterative steps. Initially our application will work with mock data provided by hardcoded JSON rather than fetching records from a Force.com controller or web service. Once everything else is working, we’ll swap out that JSON and call a simple Apex controller method to serve up Lead records directly from Salesforce. We’ll also make sure to include a unit test in our controller class, both to insure our Apex logic is working as expected before we try to bind it to our Sencha data store, and because it is a Force.com requirement to provide code coverage for our classes.

In a followup article, we will extend our application to include a drill down form for our Leads, and add some Create, Read, Update, Delete (CRUD) and validation capability on the client, and we’ll extend our Apex controller to bind @RemoteAction methods to our data proxy to serve up and process the data from the server.

In subsequent iterations, we would expect to migrate our Sencha Touch application from its Visualforce Component host into a local development environment so we can explore and take advantage of the MVC file and folder development paradigm. This would allow us to deliver an optimized and minified JavaScript application file deployed as a Force.com cached Static Resource.

Let’s Go!

Our initial objective is to gain a general understanding of the Sencha Touch framework and the benefit of its structured class system and MVC implementation model. It is most important that you perform your development work in Safari as it supports WebKit and will display the touch style interface on your desktop. It will also allow calling unsecured JavaScript and CSS libraries on the Sencha.io cloud, (Chrome may not allow them.)

From start to finish, our Force.com Sencha Touch application will be contained in just four Salesforce metadata items:

  1. A custom Visualforce component to contain our JavaScript application.
  2. A custom Visualforce component to contain our application’s custom CSS styles.
  3. A custom Visualforce page to host our application components.
  4. A custom Apex controller class to manage the data processing.

Step 1: Prepare a Force.com Development Environment

If you don’t already have a Salesforce.com development org that you can use, you’ll want browse over to the Force.com Developer Portal and register to get your own free Developer Edition org. Once there, just click the Join Now link, enter your information and create a username; you will be sent an email with login instructions.

If you know little or nothing about Force.com development, you’ll want to familiarize yourself with the basics. You can browse the Getting Started area where you’ll find a ton of material. Your best bet is to spend some time with the Workbook tutorials, and in particular to work through the Force.com Workbook and the Visualforce Workbook.

You can develop your code from the Setup menu Develop->Pages and Develop->Components editors, or you can use the Developer Console. If you have experience with the Force.com IDE and Eclipse, you are certainly welcome to use it for your development environment; any of these will do. Assuming you’re all set with your Force.com development environment, you can jump to the next step.

Step 2: The Sencha Touch Libraries

One of the more challenging aspects of getting starting with any new platform or framework can be setting up a local development environment. However, since we’re building on the Force.com cloud, and able to reference Sencha Touch libraries from the Sencha.io Cloud, we simply don’t have to bother! Later, you may want to setup a local development environment by downloading the libraries and tools, and perhaps maintain your own versions of the Sencha libraries as Static Resources in your Salesforce orgs. However, for our immediate purposes, we’ll reference the libraries across the web.

Step 3: Build a Visualforce Custom Component to host our JavaScript application.

We’re going to build our JavaScript application code inside a custom Visualforce component which will subsequently be hosted in a Visualforce Page. Launch the Force.com editor of your choice and create a new Visualforce Component. Name it PocketCRM_App and replace the starting code stub with the following code. Make sure you contain all of your JavaScript code inside the Visualforce <apex:component> and <script> tags, and take special care to close all braces {} and parentheses ():



This initial JavaScript component is the launch point of our mobile web application. It contains a name property, instantiates a Sencha Touch Panel component to display a simple HTML message, and loads that component to the application’s Viewport, (the container for the application’s user interface.) We will return here later to add additional components as we build out our application, but for now this will act as our initial application shell.

Step 4: Build a Host Visualforce Page

Now we’re going to build a host Visualforce page that will contain our custom Visualforce component, so launch the editor of your choice and create a new Visualforce page. Name it PocketCRM and replace the existing code with the following Visualforce:



Comments

  1. Zoltan, MAGDO says

    Hi Kazuhiro Kotsutsumi,

    I’m only Sencha beginner/hobbyist …

    I open your very professional http://www.xenophy.com/javascript/3283
    Have You some English/Francais/Espaniol/Romanian/Hungarian … translation to your page ?
    (Of course, I can use some translation robot… but it’s not main option ! )
    I will highly apperiaciate If You have and you Sir can send to me one short link about translated pages.

    Best regards,
    Zoltán

  2. says

    Hi Zoltan, MAGDO.

    I transtating now to Japanese.
    Probably I will show it several hours later.

    I’m Japan Sencha User Group Manager(organizer).
    because I translate to Japanese, but I can’t understand Francais/Espaniol/Romanian/Hungarian etc, only English to Japanese.

    By the way, I am a Japanese.

  3. Zoltan, MAGDO says

    I’m only Sencha fan/hobbyist.
    it’s one great product !

    Thank You for your time spended with me Kasuhiro…

    Of course, maybe all will buy Sencha team license , I don’t know yet.

    Best/Kind regards,
    Zoltan

  4. Zoltan, MAGDO says

    Hi Abdat El Mehdi,
    It’s end of week, rest time/days…
    I think, You Sir, can wait some days for second/… part for this article.
    I’m also very curious for the seqond/… parts of this article !

    Best regards,
    Zoltan
    (Sencha fan/hobbyist)

  5. Zoltan, MAGDO says

    Pls., take more easy bloggers,
    This kind of work it’s not one day work/study !
    You/We need to wait…

    Thank You Don
    (Sencha fan/hobbist)

  6. Jihane says

    Hello there, thank you for this tutorial, i am wondering whether i can use sencha touch effects such as animateActiveItem in other framework like bootstrap twitter or zurb foundation.
    Thank’s a lot, knowing this is hugely crucial to me :)

  7. says

    Larry: Chrome and IE do not easily allow insecure content. The CDN serving up the Sencha library and CSS is not running https, which is why I suggest in the post to run the app on the desktop using Safari which does allow it. If you prefer not to use Safari, you can download the Sencha Touch library and CSS and upload to your Salesforce.com org as a static resource. You will then have to set the library links to point to the JS and CSS $Resources that you establish by name, which would look something like this:

    [removed][removed]
    <link rel=”stylesheet” href=”{!URLFOR($Resource.SenchaTouchCSS_v_2_0_1_1)}” type=”text/css” />

    We chose to use the CDN for JS and CSS so that the tutorial could be performed with a minimum of infrastructure configuration. Hope this helps.

  8. says

    Hmm…of course I can’t embed examples of script tags here – so I’ll try again this way:

    EMBED IN AN HTML SCRIPT TAG:
    script type=”text/javascript” src=”{!$Resource.SenchaTouchAll_v_2_0_1_1}”

    EMBED IN AN HTML LINK TAG:
    link rel=”stylesheet” href=”{!URLFOR($Resource.SenchaTouchCSS_v_2_0_1_1)}” type=”text/css”

  9. says

    @Jihane…I don’t know the answer to your question regarding merging functionality, but suggest you post your question on the Sencha forums where you will get more exposure. You might also post on StackOverflow as there is a sizable Sencha community there as well.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">