Todo List App using Sencha – Part 2

In the 1st Part we generate, build and run sencha touch project using terminal/command prompt. In this part we’ll start create controller and model using terminal/command prompt.

To create controller with Sencha CMD it is enough to execute the following command:

sencha generate controller Task
Sencha Controller

Sencha Controller

It generates for us controllers/Main.js file. It is generic and has minimum content:

Ext.define('RevivalxSenchaTodolist.controller.Task', {
    extend: 'Ext.app.Controller',
    
    config: {
        refs: {
            
        },
        control: {
            
        }
    },
    
    //called when the Application is launched, remove if not needed
    launch: function(app) {
        
    }
});

To instantiate controller automatically we have to add it into controllers configuration section (app.js) in application next way:

controllers: [ 'Task' ]

Then we generate a Task model using this command:

com.revivalx.sencha.todolist MNurdin$ sencha generate model Task tasId:int,name:string,description:string,dateCreated:string,dateUpdated:string
Sencha Model

Sencha Model

And in model folder, we should see file Task.js:

Ext.define('RevivalxSenchaTodolist.model.Task', {
    extend: 'Ext.data.Model',
    
    config: {
        fields: [
            { name: 'tasId', type: 'int' },
            { name: 'name', type: 'string' },
            { name: 'description', type: 'string' },
            { name: 'dateCreated', type: 'string' },
            { name: 'dateUpdated', type: 'string' }

        ]
    }
});

To work with this model in our application we should add RevivalxSenchaTodolist.model.Task to requires section, usually we do it in controllers or stores.

Continue..

Todo List App using Sencha – Part 1

In this tutorial, I will show you how to create a simple todo list app using Sencha.

Sencha provides HTML5-based app development tools and services for building universal apps that run on any device.

Sencha Touch, a high-performance HTML5 mobile application framework, is the cornerstone of the Sencha HTML5 platform. Built for enabling world-class user experiences, Sencha Touch is the only framework that enables developers to build powerful apps that work on iOS, Android, BlackBerry, Windows Phone, and more.

Sencha

Sencha

Setting up your development environment

Download and unzip Sencha Touch, http://www.sencha.com/products/touch/download. You can unzip the software to any directory. Sencha Touch 2.3.1 requires Sencha Cmd 4.0.1, 4.0.2, or later. Download and install Sencha CMD, http://www.sencha.com/products/sencha-cmd/download . To check that you have correctly installed Sencha Cmd, type the sencha command, for example:

Sencha

Sencha

Create a sencha project using command below in your terminal/cmd:

sencha -sdk /Applications/touch-2.4.1 generate app RevivalxSenchaTodolist /Applications/MAMP/htdocs/com.revivalx.sencha.todolist
Sencha generate project

Sencha generate project

Sencha Touch already has a good integration with PhoneGap and with Sencha CMD, we can easily add Cordova infrastructure to our project.

sencha cordova init com.revivalx.sencha.todolist RevivalxSenchaTodolist
Sencha init cordova

Sencha init cordova

Open app.json file in text editor, find section builds in it and uncomment row with platforms list. So your builds section will be something like this:

"builds": {
        "web": {"default": true},
        "native": {
            "packager": "cordova",
            "cordova" : {
                "config": {
                    // Uncomment the line below and add the platforms you wish to build for
                    "platforms": "ios android",

                    "id": "com.revivalx.sencha.todolist",
                    "name": "RevivalxSenchaTodolist"
                }
            }
        }
    },

Here you can see that by default build for web is turned on and as a packager Sencha Touch uses Cordova. Also in the config section you can see id and name properties, which we got from our cordova init command.

Now we can run our application in iOS and Android emulators simply by executing next command:

sencha app build -run native
iOS and android simulator

iOS and android simulator

Next we will learn how to create controller using CMD.

Eclipse Plug-in (Aptana 3) Installation for Sencha Touch

I decided to post a tutorial to show how to install Aptana 3 eclipse plugin into your eclipse for Sencha Touch development.

Prerequisite

Go to Help > Install New Software…

install new software

install new software

Click Add.

install new software

install new software

Enter Aptana 3 for name and http://download.aptana.com/studio3/plugin/install for location. Click Ok.

add repository

add repository

Select All and click Next.

install new software

install new software

Click Next.

install new software

install new software

Select I accept the terms of the license agreement and click Finish.

install new software

install new software

Wait until it finish installing.

install new software

install new software

Click Yes to restart your eclipse.

software updates

software updates

I’d appreciate any feedback for this tutorial. Next tutorial I will post about simple Sencha app.

IBM Worklight training – Day 1

I just finished my training for day 1 at IBM Plaza near One Utama. I attend this training with my boss, Mr Lee Yong Tan. He is our technical director. It was a second time I attend the worklight training. Before this, I already attend the training on November last year. It’s quite challenging for those learn this new technology from IBM. My trainer is mr Ed Grossman. He is a one of IBM consultant from mobile development background came from US to teach all of us about worklight.

I already prepared a few of questions regarding to worklight issues here to ask him during the training. I’m quite impressive about the answers that he replied to us. He looks more professional compare to previous trainer, I’m not really remembered his name. But for what I knew about him, he also from IBM Hong Kong. His team codename is Tiger Team. Really scary uhh?

I just knew a few of them. I mean the trainee that attend the training along with me. I saw a guy, I dont know which company, he always ask a lot of questions to the trainer. But the funniest part is the trainer dont want to argue about the competitor and the other products that not related to IBM. Let say, when I ask him about how to integrate sencha framework with worklight in proper way. I didn’t find any documentation that related to sencha. If has, it not sufficient enough for me to understand. He replied to me, ” I think you need to ask sencha about this issue. It’s not our problem”. Wow.

I think it is enough for today. If anyone want to learn about the IBM worklight, don’t hesitate to contact me or want to know more details about it. Besides that, you can visit this website for more tutorials and sample codes that provided by IBM.

http://www.ibm.com/developerworks/mobile/worklight/getting-started.html

IBM Worklight Training

IBM Worklight Training