Building Sencha Touch Apps for ]project-open[

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.


Contents

  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/

 

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

]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)

 

 

  Contact Us
  Project Open Business Solutions S.L.

Calle Aprestadora 19, 12o-2a

08902 Hospitalet de Llobregat (Barcelona)

Spain

 Tel Europe: +34 609 953 751
 Tel US: +1 415 200 2465
 Mail: info@project-open.com