Sencha Example

To building a web app, you must build the server and the client. The following example shows how you can build your project as a Sencha app and connect it to a RESTful SQL server. You can build a complete RESTful server for SQL data, including logic and security using Live API Creator. The process is largely point-and-click, so you can build a server in minutes. This example uses a pre-built server, but you can adopt this process to your own database.

Verify Prerequisites

If you don't already have them, download and install the following:
  • Live API Creator. For more information, see Install Live API Creator.
  • Sencha Architect, which is a desktop utility that provides a designer to build web/mobile interfaces/apps, and run the installer. For more information about installing Sencha Architect, see the Sencha site.
  • Sencha Cmd, which provides testing services to deploy/run your application. For more information about Sencha Cmd, see the Sencha site.

Build a RESTful Server

You can create a project/database using the API Creator setup process. API Creator includes default API projects which we'll use for this example. It is called Demo (Customers, Orders, Items).  At the completion of the signup process, ensure you are running the API Creator on this project (upper red box in the diagram below; it should be the default).

API Creator consists of a server, and a Browser-based API Creator for defining ResourcesLogic and Security. API Creator includes a Rest Lab you can use to test your server without having to write a program.  It's shown below. This shows your REST URL (middle red box in the diagram shown below). We use the Customers Resource (predefined in the signup process) in this tutorial.

Click GET - this issues the command and shows the JSON response, like this:

Building a Server for your own Database

While it is not necessary for this exercise, you can adapt this to your own databases, by following this simple procedure. Create a project, unzip the Jetty package and start and your server is running. For databases on-premises, arrange for connectivityYour base tables are REST Resources, and you can create additional ones with a simple point and click. The build servers, build REST Listeners (e.g., Jersey), SQL, and JSON (e.g., Jackson) are included out of the box.

Building the Sencha App

Use Sencha Architect to create your application as described below.

Create Project

Create a new project and save it supplying the name RestSencha.

Create Model

Click Create > Model.

Configure Model name, attributes

Specify the name of your Model (CustomersModel), and define the attributes (Name, CreditLimit, Balance) returned in the REST response. Note you can determine these from the Rest lab.

Create a JSON Store and a REST Proxy

Click the upper [+] to create a new Store > Json Store.  

Transform the JSON Store to a REST Proxy

Select the Proxy, and right click to Transform > Rest Proxy.Associate the Store to the Model
Select the Store, right-click and select the Model.

Configure the REST Proxy URL

Configure the REST proxy to use the URL of your Resource. You can obtain this from the Rest Lab in the Logic Designer, a string such as http://server.acme/rest/default/demo/v1/Customers.

There are many of properties. Narrow the properties by filling in the first red box.
Configure the REST Proxy Headers
You must also configure the HTTP header.  Select the Proxy > Headers > Edit . The code window opens. Paste in the following:

{
    Accept: 'application/json',
    Authorization: 'CALiveAPICreator demo_full:1'
}


(Optional) Create Container on View

Create the visual elements of the form. Optionally, you can first create a Container (this is not necessary, but may facilitate organizing components for more complex forms):

Create a Grid in the Container

Drag a Grid onto the Container.  If you did not create a container above, you should also specify the grid width and height.

Link the Grid to the Store

Select the Grid's store property, and select the store as shown below.


Grid AutoColumns

Right click the grid in the Navigator, and specify Auto columns.  The columns should then appear in the Design view as shown below.

Store > Load Data

Sencha Architect provides a "live data" feature to assist in screen layout, where you can retrieve actual data.  Alternatively, you can set the Store to AutoLoad.


Add a ToolBar and Buttons

Add a toolbar to your grid and two buttons to the Toolbar. Specify the text property you want to load, and then save your changes.




Add Button Event Code

Select a button, and click the [+] on the Event Bindings - select the onButtonClick events.

Then, right click the click event, and paste in the code supplied below.


Save - button click event
var custStore = Ext.getStore('CustomersDataStore');
custStore.sync();

Load - button click event
var custStore = Ext.getStore('CustomerJsonStore');
if (custStore != null) {
    custStore.load();
    var customerStore = Ext.getStore("CustomerJsonStore");

    Ext.Msg.alert('Status', "REST Loaded successfully, store: " + customerStore);
    console.log("Load ok"); //logs go where??
} else {
    Ext.Msg.show({
        title:'Load Failed',
        msg: 'Cannot find CustomerJsonStore',
        buttons: Ext.Msg.YESNOCANCEL,
        fn: processResult,
        animEl: 'elId'
    });
}

Deploy Project

We have created the project in a folder structure as shown below. 
  1. Create a sencha-pub folder.
  2. Register this in Sencha Architect: Settings > Project >.

    URL Path = http://localhost:1841/sencha/RestSencha
    Publish Path = /Users/val/ABL/Frameworks/sencha/sencha-pub
  3. Click Publish. Check inside the sencha-pub folder to verify your project artifacts are created.

Start Sencha Web Server

Open a command window, and start the Web Server provided by Sencha Cmd with a command like this:

sencha fs web start -map /Users/val/ABL/Frameworks/sencha/sencha-pub

The following response is expected:
Run Project
You can now run the project at URL http://localhost:1841/app.html. The app should start. Click Load to retrieve and display the data:

Next Steps

This example illustrated very basic connectivity to a RESTful server. You can download the project from the RESTSENCHA.zip file. API Creator provides services to support client applications, including:
  • Multi-table results. For example, showing orders and line items for a customer.
  • Security. Authentication and authorization for row/column-level security.
  • Pagination. Scrolling over large result sets.
  • Filtering
  • Update. Sending update with business logic enforcement and optimistic locking.
  • Update refresh. Reflecting server-based computations on the client.
ċ
Espresso Logic Demo.png
(197k)
Val Huber,
Feb 16, 2016, 2:33 PM
ċ
Google ChromeScreenSnapz001.png
(105k)
Val Huber,
Feb 16, 2016, 2:34 PM
ċ
Google ChromeScreenSnapz002.png
(194k)
Val Huber,
Feb 16, 2016, 2:33 PM
ċ
RestSencha.zip
(10k)
Val Huber,
Feb 16, 2016, 2:34 PM
ċ
Screen Shot 2015-11-05 at 3.10.50 PM.png
(241k)
Val Huber,
Feb 16, 2016, 2:32 PM
ċ
grid autocolumns.png
(308k)
Val Huber,
Feb 16, 2016, 2:33 PM
ċ
secha store new.png
(299k)
Val Huber,
Feb 16, 2016, 2:33 PM
ċ
sencha button click.png
(202k)
Val Huber,
Feb 16, 2016, 2:33 PM
ċ
sencha button event.png
(257k)
Val Huber,
Feb 16, 2016, 2:34 PM
ċ
sencha container grid.png
(326k)
Val Huber,
Feb 16, 2016, 2:33 PM
ċ
sencha container new.png
(285k)
Val Huber,
Feb 16, 2016, 2:34 PM
ċ
sencha customers rest lab.png
(177k)
Val Huber,
Feb 16, 2016, 2:34 PM
ċ
sencha files.png
(222k)
Val Huber,
Feb 16, 2016, 2:34 PM
ċ
sencha grid buttons.png
(263k)
Val Huber,
Feb 16, 2016, 2:33 PM
ċ
sencha grid store.png
(287k)
Val Huber,
Feb 16, 2016, 2:32 PM
ċ
sencha grid toolbar.png
(287k)
Val Huber,
Feb 16, 2016, 2:33 PM
ċ
sencha model config.png
(319k)
Val Huber,
Feb 16, 2016, 2:33 PM
ċ
sencha model new.png
(272k)
Val Huber,
Feb 16, 2016, 2:33 PM
ċ
sencha new project.png
(208k)
Val Huber,
Feb 16, 2016, 2:34 PM
ċ
sencha proxy headers.png
(272k)
Val Huber,
Feb 16, 2016, 2:33 PM
ċ
sencha proxy transform.png
(334k)
Val Huber,
Feb 16, 2016, 2:33 PM
ċ
sencha proxy url.png
(290k)
Val Huber,
Feb 16, 2016, 2:32 PM
ċ
sencha settings.png
(223k)
Val Huber,
Feb 16, 2016, 2:33 PM
ċ
sencha store loadData.png
(317k)
Val Huber,
Feb 16, 2016, 2:32 PM
ċ
sencha store to model.png
(326k)
Val Huber,
Feb 16, 2016, 2:32 PM
ċ
sencha web server.png
(331k)
Val Huber,
Feb 16, 2016, 2:32 PM
ċ
transform.png
(277k)
Val Huber,
Feb 16, 2016, 2:32 PM
Comments