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.

1. Sencha Touch Development
with ]project-open[
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

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. Install:  Please download the latest ]po[ V4.0
]po[ Notes installer from:
App Demo on http://www.sourceforge.net/projects/project-op
your ]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. Understandin The entire Notes application consists of 406 lines of code.
The code is found in /web/projop/packages/ (Linux) or
g the C:/project-open/servers/projop/packages/ (Windows):
Anatomy of
the 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. Understanding the Anatomy of the Notes App
Communication 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. ]po[ REST  The ]po[ REST API supports a range
Interface: 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 per
Explore the object type and user profile
Generic REST
API  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. ]po[ REST  Works generically
Interface: for all ]po[ object
types.
 Allows for Read,
Generic REST List, Update and
API 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. ]po[ REST  „REST Reports“ allow you to deploy a SQL query
Interface: 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 My
po[ „REST
Timesheet Projects” report in order to review the
Reports“ 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. ]po[ REST  Allows you to access the results of any SQL query
Interface: in JSON or XML format.
 Does not require TCL or other software
development
REST Reports  No Update or Creation operations
Characteristics

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. Create a  A ]po[ package is a
container of code that
New 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. Check That  Please go to
The New /web/projop/packages/senchatouch-
Package is
Accessible
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.