Building Sencha Touch Apps
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. The app allows listing, editing and creation of new notes.
- Live Demo: Try the app on our demo server
- Install: Install the app on your own ]po[ V4.0 server
- Understanding the Anatomy of the app
- The ]po[ REST Interface
- 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/
Installation: ]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) or C:/project-open/servers/projop/packages/ (Windows):
- /senchatouch-v211/ - The Sencha Touch Code from www.sencha.com
- 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.
]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.
- 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)