Drag and Drop Your Mobile App Script

[dfoelber]

Hi all,


A few of you requested the script that Phil and I used in our session.


Start new Touch 2.2 Project
= Views =
Add a top level navigation view and set these configs
- userClassName: MainNav
- userAlias: mainnav
Add a navigation bar (we did it via the config pane)
Add a button to that navigation bar and set these configs
- align: right
- itemId: logoutBtn
- text: Log out
Add a list to the navigation view and set these configs
- title: Orders
- itemId: orderList
- itemCls: order-list-element
Install the attached OrderDetailsPanel.xdc (Edit->Import Component), add it as a top level component, and make sure the userClassName is set to 'OrderDetailsPanel' and the userAlias is orderdetailspanel
Install the attached LoginPanel.aux.zip extension (change the filename to LoginPanel.aux, the forums don't allow .aux files yet), add it as a top level component, and set these configs
- userClassName: LoginPanel
- userAlias: loginpanel
Unset the initial view from the navigation view
= Data =
Create a top level model and set these configs
- userClassName: OrderModel
- fields: id, orderNo, customerId, orderData, shipDate, total, tax, paid, shipping
Create a top level JsonP store and set these configs
- userClassName: OrdersStore
- storeId: OrdersStore
- model: OrderModel
Set these configs on the proxy
- extraParams: { unfulfilled: true }
- url: http://senchapingpongstore.com/orders


This service doesn't actually required authentication (so you can easily test/view orders list). If you wish to test mock data, enter this array in the data config and check the 'mock data' box:

[{orderNo:'CA1007',customerId:1000,orderDate:'2012-11-12 12:34:56',shipDate:'2013-05-22 17:02:31', total:204.695,paid:100.00,tax:8.795,shipping:10},{orderNo:'CA1008',customerId:1000,orderDate:'2012-10-12 12:34:56',shipDate:null,total:154.74,paid:154.72,tax:6.8925,shipping:10},{orderNo:'CA1009',customerId:1001,orderDate:'2013-02-12 12:34:56',shipDate:null,total:534.99,paid:500.00,tax:24.9995,shipping:10},{orderNo:'CA1010',customerId:1001,orderDate:'2013-01-12 12:34:56',shipDate:null,total:230.447,paid:null,tax:10.4975,shipping:10},{orderNo:'CA1011',customerId:1002,orderDate:'2012-10-12 12:34:56',shipDate:null,total:1584.47,paid:null,tax:74.975,shipping:10},{orderNo:'CO1012',customerId:1003,orderDate:'2012-10-12 12:34:56',shipDate:null,total:7585.2,paid:null,tax:360.247,shipping:10},{orderNo:'MD1013',customerId:1004,orderDate:'2013-01-12 12:34:56',shipDate:null,total:953.95,paid:null,tax:44.95,shipping:10}]

Associate store with list by setting the 'store' config in the orderList to OrdersStore
Set the itemTpl in the orderList to:

<div><div class="orderNo">{orderNo}</div><div class="total">{total}</div></div>

Add a BasicEventBinding to the NavigationView, set the name config to 'activate' and add this code:

Ext.getStore('OrdersStore').load();

= Controllers =
Add a launch config to your Application node and add this code:

host = 'senchapingpongstore.com';


Ext.Ajax.request({
    url: 'http://' + host + '/user/loggedin',
    withCredentials: true,
    useDefaultXhrHeader: false,
    success: function(response){
        var obj = Ext.decode(response.responseText);
        if (obj.logged) {
            Ext.create('MyApp.view.MainNav', {fullscreen: true});
        } else {
            Ext.create('MyApp.view.LoginPanel', {fullscreen: true});
        }
    }
});

In the LoginController, set this code to the register action:

if (!values.email || !values.password || !values.confirm) {
    Ext.Msg.alert('Error', 'Please enter the required information');
    return;
}


if (values.password !== values.confirm) {
    Ext.Msg.alert('Error', 'Passwords do not match');
    return;
}


var user = {
    email: values.email,
    password: values.password
};


Ext.Ajax.request({
    url: 'http://' + host + '/user/register',
    method: 'POST',
    jsonData: user,
    withCredentials: true,
    useDefaultXhrHeader: false,
    success: function(response){
        Ext.Viewport.removeAll();
        Ext.create('MyApp.view.MainNav', {fullscreen: true});
    },
    failure: function() {
        Ext.Msg.alert('Unable to register, please try again later');
    }
});

In the LoginController, set this code to the login action:

if (!values.email || !values.password) {
    Ext.Msg.alert('Error', 'Please enter your information');
    return;
}


var user = {
    email: values.email,
    password: values.password
};


Ext.Ajax.request({
    url: 'http://' + host + '/user/login',
    method: 'POST',
    jsonData: user,
    withCredentials: true,
    useDefaultXhrHeader: false,
    success: function(response){
        Ext.Viewport.removeAll();
        Ext.create('MyApp.view.MainNav', {fullscreen: true});
    },
    failure: function() {
        Ext.Msg.alert('Unable to login, please try again later');
    }
});

Add a contoller action to the LoginController and set these configs
- controlQuery: mainnav #logoutBtn
- targetType: Ext.Button
- name: tap
- fn: onLogout (optional)
Add this code:

Ext.Ajax.request({
    url: 'http://' + host + '/user/logout',
    method: 'POST',
    withCredentials: true,
    useDefaultXhrHeader: false,
    success: function(response){
        Ext.Viewport.removeAll();
        Ext.create('MyApp.view.LoginPanel', {fullscreen: true});
    },
    failure: function() {
        Ext.Msg.alert('Unable to logout, please try again later');
    }
});

Add another controller and set the userClassName to OrderController
Add a controller action to that controller and set these configs
- controlQuery: mainnav #orderList
- targetType: Ext.dataview.List
- name: itemtap
Add this code:

var nav = Ext.Viewport.down('mainnav');


nav.push({
    xtype: 'orderdetailspanel',
    title: 'Order Details',
    order: record.data
});

Add another controller action and set these configs
- controlQuery: mainnav #fulfillOrderBtn
- targetType: Ext.Button
- name: tap
- fn: onFulfillBtnTap (optional)
Add this code:

var id = button.up('formpanel').getOrder().id,
    nav = button.up('mainnav'),
    store = Ext.getStore('OrdersStore'),
    index = store.find('id', id),
    date = new Date();


Ext.Ajax.request({
    url: 'http://' + host + '/order/' + id,
    method: 'POST',
    jsonData: { shipDate: date.toString() },
    withCredentials: true,
    useDefaultXhrHeader: false,
    success: function(response){
        if (~index) {
            store.removeAt(index);
        }
        nav.pop();
    },
    failure: function() {
        Ext.Msg.alert('Unable to save order, please try again later');
    }
});

Add (yet) another controller action and set these configs
- mainnav #saveOrderBtn
- targetType: Ext.Button
- name: tap
- fn: onSaveOrderBtnTap (optional)
Add this code:

var form = button.up('formpanel'),
    values = form.getValues(),
    id = form.getOrder().id,
    nav = button.up('mainnav'),
    store = Ext.getStore('OrdersStore'),
    index = store.find('id', id),
    record;


Ext.Ajax.request({
    url: 'http://' + host + '/order/' + id,
    method: 'POST',
    jsonData: values,
    withCredentials: true,
    useDefaultXhrHeader: false,
    success: function(response){
        if (~index) {
            record = store.getAt(index);
            for (var key in values) {
                record.set(key, values[key]);
            }
        }


        nav.pop();
    },
    failure: function() {
        Ext.Msg.alert('Unable to save order, please try again later');
    }
});

Add a controller route to the OrderController and set these configs
- url: order/:id
- action: orderDetail
Add this code:

Ext.Ajax.request({
    url: 'http://' + host + '/order/' + id,
    method: 'GET',
    withCredentials: true,
    useDefaultXhrHeader: false,
    success: function(response){
        var obj = Ext.decode(response.responseText),
            nav = Ext.Viewport.down('mainnav');


        nav.push({
            xtype: 'orderdetailspanel',
            title: 'Order Details',
            order: obj
        });
    }
});

= Extras =
If you add little css snippet, create a CSS resource, set the url to 'app.css', and add this code:

.order-list-element .total {
    right: 12px;
    position: absolute;
    top: 12px;
    color: purple;
}

For osx users that want to deploy to the iOS simulator:
Download the latest version of Cmd (http://www.sencha.com/products/sencha-cmd/download)
Select the package button and select the first tab (Install plug-ins)
Enter in the location of Cmd
Select the second tab (Setup project with cmd) and point to where Touch 2.2 is located on your harddrive
Select the 'Setup project with cmd' button - it should pop up a console window and setup the project
Select the third tab (Package settings) and create a package settings


Open the app.json file in your project root and add this object to the css array:

{
    "path": "app.css"
}

Add "LoginPanel" to the requires array in that file as well.


At this point, you can select package->simulate!

[Yazid]

How do you add LoginPanel to the requires array?

[dfoelber]

In the app.json file, there should be an empty "requires" array near the bottom. Adding "LoginPanel" will have cmd search along it's known package paths.

/**
 * List of package names to require for the cmd build process
 */
"requires": [
    "LoginPanel"
],

[wemerson.januario]

Any github repo? Thanks!