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


Published on

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.

Published in: Real Estate, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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

  1. 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. 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 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
  3. 3. 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/
  4. 4. 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.
  5. 5. 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: „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. 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. 7. ]po[ REST  Please go to /intranet-rest/ on your ]Interface: po[ V4.0 server: Here you can set default permissions perExplore the object 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://<your_server>/intranet-rest/ and on: http://www.project-open.org/en/package_intran
  8. 8. ]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).
  9. 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 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)
  10. 10. ]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
  11. 11. ]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
  12. 12. 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.
  13. 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 „<h1>Hello World</h1>“.  Point your browser to /senchatouch-notes/ in order to see the page with the „Hello World“ text.