Tutorial: Writing Sencha Touch Mobile Apps using ]project-open[
Sencha Touch Development with ]project-open[1. Live Demo: Try the app on our demo server2. Install: Install the app on your own ]po[ V4.0 server3. Understanding the Anatomy of the app4. The ]po[ REST Interface5. Creating your own package and app
Live Demo: The “Sencha Touch ]po[ Notes” app is]po[ Notes installed on the ]po[ demo servers:App Demo – 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-note
Install: Please download the latest ]po[ V4.0]po[ Notes installer from:App Demo on http://www.sourceforge.net/projects/project-opyour ]po[ 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/
Understandin The entire Notes application consists of 406 lines of code. The code is found in /web/projop/packages/ (Linux) org the C:/project-open/servers/projop/packages/ (Windows):Anatomy ofthe Notes App /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.
Understanding the Anatomy of the Notes AppCommunication between Sencha Touch components and the ]po[ REST API Mobile Client Mobile Client Server Server GUI View: Data: Network: Server: Pages & Panels Model & Store Interface REST API NoteNavigationView NoteNavigationView NoteModel NoteModel ]po[ Server ]po[ Server • Id: integer • note: text • note_type_id: integer NoteList NoteList • note_status_id: integer • object_id: integer NoteDetail NoteDetail NoteStore NoteStore „Proxy“ „Proxy“ REST REST • Id: 12345 Interface Interface • note: „firstname.lastname@example.org“ • 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 ...
]po[ REST The ]po[ REST API supports a rangeInterface: of techniques suitable for sophisticated mobile applications:Overview – 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 Works genericallyInterface: for all ]po[ object types. Allows for Read,Generic REST List, Update andAPI Create operations.Characteristics 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 „REST Reports“ allow you to deploy a SQL queryInterface: 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.Explore ] Click on the “wrench” symbol beside the “REST Mypo[ „REST Timesheet Projects” report in order to review theReports“ 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 Allows you to access the results of any SQL queryInterface: in JSON or XML format. Does not require TCL or other software developmentREST Reports No Update or Creation operationsCharacteristics
]po[ REST Interface: Generic REST API vs. REST Reports Generic REST API REST Reports REST Reports Generic REST API Allows for Read, List, Update Only allows for List operation Only allows for List operation Allows for Read, List, Update Allows for complete control of and Create operations and Create operations Allows for complete control of the returned data the returned data Allows only limited control of Allows only limited control of User needs to define and User needs to define and the returned data (no joins with the returned data (no joins with deploy new SQL queries deploy new SQL queries other tables). other tables). No additional work required No additional work required => Use for maximum control of => Use for maximum control of => Use when performance is => Use when performance is the returned data the returned data not that critical not that critical
Create a A ]po[ package is a container of code thatNew Package 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 Please go toThe New /web/projop/packages/senchatouch-Package isAccessible 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.