Tutorial: Writing Sencha Touch Mobile Apps using ]project-open[

  • View

  • Download

Embed Size (px)


This tutorial presents a sample "Notes" app for iPhone and Android in 400 lines of code using ]project-open[ back-end and Sencha Touch as a front-end.

Text of Tutorial: Writing Sencha Touch Mobile Apps using ]project-open[

  • 1. 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

2. 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 GoogleChrome or Apple Safari (no Firefox, IE orOpera, sorry). Select the last demo server All ]po[ Functionality Login as Ben Bigboss Go to:http://po40demo.project-open.net/senchatouch-note 3. Install: Please download the latest ]po[ V4.0]po[ Notes installer from:App Demo onhttp://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:///senchatouch-notes/ 4. UnderstandinThe 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.adpThe index page of the app app.json The application loader configuration app.js The main page app/model/Note.jsThe 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[ logoPlease 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/listvideo about the List Component as a quick intro. 5. Understanding the Anatomy of the Notes AppCommunication between Sencha Touch components and the ]po[ REST APIMobile ClientMobile Client ServerServerGUI View: Data: Network: Server:Pages & Panels Model & StoreInterface REST APINoteNavigationView NoteNavigationView NoteModel NoteModel ]po[ Server]po[ Server Id: integer note: text note_type_id: integerNoteList NoteList note_status_id: integer object_id: integer NoteDetailNoteDetailNoteStore NoteStore ProxyProxyRESTREST Id: 12345Interface Interface 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 ... 6. ]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. 7. ]po[ REST Please go to /intranet-rest/ on your ]Interface: po[ V4.0 server: Here you can set default permissions perExplore theobject type and user profileGeneric RESTAPI 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:///intranet-rest/ and on: http://www.project-open.org/en/package_intran 8. ]po[ REST Works genericallyInterface:for all ]po[ objecttypes. Allows for Read,Generic RESTList, Update andAPI Create operations.Characteristics Techniques for reducing network traffic: Load lists of objects instead of individual objects. Thequery= parameter allows you to limit the returnset (example: /intranet-rest/im_project?query=project_status_id=76 for open projects) Use the ?columns=project_name,project_status_idparameter to limit the columns returned by the query Use the ?gzip_p=1 parameter in order to force theserver to compress the data (requires a specialversion of AOLserver) For very specific queries you can use REST Reports(see next slide). 9. ]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 thecurrent user. This is the only predefined variable. You can add custom variables in the URL (forexample you can add &project_status_id=76) andthen 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) 10. ]po[ REST Allows you to access the results of any SQL queryInterface:in JSON or XML format. Does not require TCL or other softwaredevelopmentREST Reports No Update or Creation operationsCharacteristics 11. ]po[ REST Interface: Generic REST API vs. REST ReportsGeneric REST API REST ReportsREST Reports Generic REST API Allows for Read, List, Update Only allows for List operation Only allows for List operationAllows for Read, List, Update Allows for complete control of and Create operationsand Create operationsAllows for complete control ofthe returned data the returned data Allows only limited control ofAllows only limited control of User needs to define and User needs to define and the returned data (no joins withthe returned data (no joins withdeploy new SQL queries deploy new SQL queries other tables).other tables). No additional work requiredNo additional work required => Use for maximum control of => Use for maximum control of => Use when performance is=> Use when performance isthe returned data the returned data not that criticalnot that critical 12. Create a A ]po[ package is acontainer of code thatNew Package can be mounted at aspecific URL using the ]po[ Package Manager. Please create a newpackage using the APM( or /acs-admin/apm/)and click on Create newPackage at the end ofthe page. Fill our the next pagewith the sample data atthe right. Please notethat Package Key andAuto-mount URI are thesame by convention. You need to uninstall (onthe package main page)and re-install (APM ->Install package) yournew package in order toactivate the package atthe Auto-mount URI. Youdont need to restart theserver in this case. 13. Check That Please go toThe New/web/projop/packages/senchatouch-Package isAccessible notes/www/ and create a new file index.html with the content Hello World. Point your browser to /senchatouch-notes/ in order to see the page with the Hello World text.