Sencha Touch Development with ]project-open[

1. Live Demo: Try the app on our demo server

2. Install: Install the app on your own ]po[ V4.0 server

3. Understanding the Anatomy of the app

4. The ]po[ REST Interface

5. Creating your own package and app

Live Demo:]po[ Notes App Demo

The “Sencha Touch ]po[ Notes” app is installed on the ]po[ demo servers:– Point your iPhone, iPad or Android device

to:http://po40demo.project-open.net/You can also use your desktop Google Chrome or Apple Safari (no Firefox, IE or Opera, sorry).

– Select the last demo server “All ]po[ Functionality”

– Login as “Ben Bigboss”– Go to:

http://po40demo.project-open.net/senchatouch-notes/

Install: ]po[ Notes App Demo on your ]po[ V4.0

Please download the latest ]po[ V4.0 installer from:http://www.sourceforge.net/projects/project-open/files/project-open/V4.0/

Please checkout and update the source code:– # cd /web/projop/packages/

# cvs update intranet-rest# cvs checkout senchatouch-v211# cvs checkout senchatouch-notes

Install the new packages in Admin -> Package Manager -> Install packages and select the senchatouch-* packages.

Point your browser (ONLY Google Chrome or Apple Safari work!) to http://<your_server>/senchatouch-notes/

Understanding the Anatomy of the Notes App

The entire Notes application consists of 406 lines of code.The code is found in /web/projop/packages/ (Linux) orC:/project-open/servers/projop/packages/ (Windows):

/senchatouch-v211/ The Sencha Touch Code from www.sencha.com /senchatouch-notes/

– index.tcl + index.adp The index page of the app– app.json The application loader configuration– app.js The main page– app/model/Note.js The definition of the “note” business object– app/store/NoteStore.js The definition of a “table” storing a list of

“notes”– app/view/SplashPage.js A splash page with the ]po[ logo– app/view/NoteList.js A page showing a list of notes– app/view/NoteDetail.js A page showing notes details as a form– app/view/NoteNavigationView.js A container containing the previous two

pages– app/controller/NoteNavigationController.js The event controller– resources/startup/project_open.250x91.gif A ]po[ logo

Please use your favorite text editor and look at the files.Please go to http://docs.sencha.com/touch/2.1.1/ for Sencha help.We recommend the http://docs.sencha.com/touch/2.1.1/#!/video/list

video about the “List Component” as a quick intro.

ServerServer

Understanding the Anatomy of the Notes App

]po[ Server]po[ Server

RESTInterface

RESTInterface

Server:REST API

Mobile ClientMobile Client

NoteNavigationViewNoteNavigationView

NoteListNoteList

NoteDetailNoteDetail

GUI View:Pages & Panels

NoteStoreNoteStore

• Id: 12345• note: „asdf@asdf.com“• note_type_id: 11508• note_status_id: 11400• object_id: 624

• Id: 12346• note: „http://www.test.com/“• note_type_id: 11510• note_status_id: 11400• object_id: 8868

. . .

NoteModelNoteModel• Id: integer• note: text• note_type_id: integer• note_status_id: integer• object_id: integer

„Proxy“„Proxy“

Data:Model & Store

Network:Interface

Communication between Sencha Touch components and the ]po[ REST API

]po[ REST Interface:

Overview

The ]po[ REST API supports a range of techniques suitable for sophisticated mobile applications:– Designed for seamless integration

with Sencha Ext-JS and Sencha Touch– Designed for network efficiency– No need for TCL development skill– Effectively eliminates the need for

server-side development

There are two options available:– Generic REST API:

Allows you to generically Read, List, Update and Create ]po[ objects and.

– “REST Reports”:Allows you to create custom data-sources using SQL queries.

]po[ REST Interface:

Explore the Generic REST API

Please go to /intranet-rest/ on your ]po[ V4.0 server:Here you can set default permissions per object type and user profile

Click on one object type (for instance „im_project“):You will get the list of all projects in the system.

Edit the URL and replace „format=html“ with „format=json“:All REST API pages accept a format=xxx parameter in order to facilitate JavaScript communications.

Please read the REST API documentation at http://<your_server>/intranet-rest/ and on: http://www.project-open.org/en/package_intranet_rest

]po[ REST Interface:

Generic REST API Characteristics

Works generically for all ]po[ object types.

Allows for Read, List, Update and Create operations.

Techniques for reducing network traffic:– Load lists of objects instead of individual

objects. The „query=<sql>“ parameter allows you to limit the return set (example: /intranet-rest/im_project?query=project_status_id=76 for open projects)

– Use the ?columns=project_name,project_status_id parameter to limit the columns returned by the query

– Use the ?gzip_p=1 parameter in order to force the server to compress the data (requires a special version of AOLserver)

– For very specific queries you can use „REST Reports“ (see next slide).

]po[ REST Interface:

Explore ]po[ „REST Reports“

„REST Reports“ allow you to deploy a SQL query and to receive the result set in JSON format

Go to /intranet-reporting/ and click on the „REST My Timesheet Projects“ link for a sample report.

Click on the “wrench” symbol beside the “REST My Timesheet Projects” report in order to review the report SQL statement:– Please observe the %user_id% string in the

SQL. ]po[ will replace this place holder with the user_id of the current user. This is the only predefined variable.

– You can add custom variables in the URL (for example you can add “&project_status_id=76”) and then use “%project_status_id” in the SQL.

Append a „format=json“ behind the report URL in order to request JSON output.

Instead of specifying the report_id in the URL /intranet-reporting/view?report_id=48769 you can use the report code of the report: /intranet-reporting/view?report_code=rest_my_timesheet_projects

Append gzip_p=1 in order to force the server to compress the data (requires a special version of AOLserver)

]po[ REST Interface:

REST Reports Characteristics

Allows you to access the results of any SQL query in JSON or XML format.

Does not require TCL or other software development

No Update or Creation operations

]po[ REST Interface: Generic REST API vs. REST Reports

Generic REST API Allows for Read, List, Update

and Create operations Allows only limited control of

the returned data (no joins with other tables).

No additional work required

=> Use when performance is not that critical

Generic REST API Allows for Read, List, Update

and Create operations Allows only limited control of

the returned data (no joins with other tables).

No additional work required

=> Use when performance is not that critical

REST Reports Only allows for List

operation Allows for complete control

of the returned data User needs to define and

deploy new SQL queries

=> Use for maximum control of the returned data

REST Reports Only allows for List

operation Allows for complete control

of the returned data User needs to define and

deploy new SQL queries

=> Use for maximum control of the returned data

Create a New Package

A ]po[ package is a container of code that can be “mounted” at a specific URL using the ]po[ Package Manager.

Please create a new package using the “APM” ( or /acs-admin/apm/) and click on “Create new Package” at the end of the page.

Fill our the next page with the sample data at the right. Please note that Package Key and Auto-mount URI are the same by convention.

You need to uninstall (on the package main page) and re-install (APM -> Install package) your new package in order to activate the package at the Auto-mount URI. You don’t need to restart the server in this case.

Check That The New Package is Accessible

Please go to /web/projop/packages/senchatouch-notes/www/ and create a new file „index.html“ with the content „<h1>Hello World</h1>“.

Point your browser to /senchatouch-notes/ in order to see the page with the „Hello World“ text.