eclipsecon europe 2012 tabris workshop

Copyright EclipseSource Inc, all rights reserved

Tabris Workshop

Jordi Böhme López Johannes EickholdTabris iOS Tabris Android

Copyright EclipseSource Inc, all rights reserved

Goals of the Workshop

● Get your HandsOnHandsOn the code!● Learn how to...

● Setup your IDE for Tabris● Write a Tabris app● Launch and test your app

http://developer.eclipsesource.com/tabris/

Copyright EclipseSource Inc, all rights reserved

HandsOnHandsOn Tasks

1. Hello world (Shell & Button)

2. Dialog (JFace)

3. List (JFace TreeViewer)

4. Geolocation

5. Client Canvas

Copyright EclipseSource Inc, all rights reserved

● Who has an …

● iOS device?● Android device?

● Who has an already prepared …

● Mac + Xcode?● Eclipse + Android Development Tools (ADT)?

Prerequisites

Copyright EclipseSource Inc, all rights reserved

Technology

● Open Source● RAP Server● Browser Client (HTML 5 + JavaScript)● Tabris Server Bundles

● Commercial (developer preview free of charge)● Native Clients (iOS, Android)

http://developer.eclipsesource.com/tabris/downloads/

RAP & Tabris (Open Source)+ Tabris Native Clients (Commercial)

Copyright EclipseSource Inc, all rights reserved

Architecture

Copyright EclipseSource Inc, all rights reserved

Content of USB Stick

● EclipseSDK/● Linux, Mac and Windows versions

● Tabris-0.8.0-SDK.zip

● workshop-projects.zip● tabris-0.8_I386_2012-10-19_12-14-19.apk

● slides_tabris-workshop.pdf● android/

● ADT● SDK

Copyright EclipseSource Inc, all rights reserved

HandsOnHandsOn IDE Setup

1. Extract and start Eclipse<USB stick>/EclipseSDK/<your system>

2. Import “Existing Projects into Workspace”<USB stick>/workshop-projects.zip

3. Set “Target Platform”: /tabris.target/tabris.target

Copyright EclipseSource Inc, all rights reserved

HandsOnHandsOn First Project

Open the project:

com.eclipsesource.tabris.workshop

● Dependencies (MANIFEST.MF)● Activator● Configuration● EntryPoint → createUI()

● SWT Event Loop vs. RWT-JEE compatibility

Copyright EclipseSource Inc, all rights reserved

HandsOnHandsOn Task 1

Widget: Shell & Button

Task: Let a button say“Hello World”.

c.e.t.workshop.task1

Entry Point: /helloworld

Copyright EclipseSource Inc, all rights reserved

RAP Protocol and Clients

● RAP browser client: HTML 5 + JavaScript● Tabris native clients:

● Generic “Developer” Client● App-Specific-Client

Copyright EclipseSource Inc, all rights reserved

HandsOnHandsOn Task 1: Launch it

● Launch Configuration:

/tabris.target/server.launch

→ starts the server on port 9090

● EntryPoint for the Tabris application on http://localhost:9090/helloworld● Access it with your browser

(HTML 5 + JavaScript client)

Copyright EclipseSource Inc, all rights reserved

Client Deployment

iOS:● Pre-built generic workshop client on demand● App-specific client template

(part of Tabris SDK)

Android:● Direct .apk download (e.g. web or mail)● Google Play● As part of the Tabris SDK (USB stick, website)

Copyright EclipseSource Inc, all rights reserved

HandsOnHandsOn Task 1: Native client

● EntryPoint for the Tabris application on http://tabrismac.local:9090/helloworld● Access it with native clients

Copyright EclipseSource Inc, all rights reserved

Entrypoint Discovery

● Simplifies developer's life● Lists all available entry points on server

http://tabrismac.local:9090/index.json

● We provide two entry points for each HandsOn task in this workshop:http://tabrismac.local:9090/helloworldhttp://tabrismac.local:9090/helloworld-solution

Copyright EclipseSource Inc, all rights reserved

HandsOnHandsOn Task 2

Widget: JFace Dialog

Task: Click a button toopen a dialog.

c.e.t.workshop.task2

Entry Point: /dialog

Copyright EclipseSource Inc, all rights reserved

HandsOnHandsOn Task 3

Widget: JFace TreeViewer

Task: Connect a Treeto a simple data model.

c.e.t.workshop.task3

Entry Point: /tree

Copyright EclipseSource Inc, all rights reserved

Differences between platforms

● Target platformsiOS vs. Android vs. Browser

● Tablet vs. Phone

Copyright EclipseSource Inc, all rights reserved

Mobile UX: Do's and Dont's

● No Workbench on mobile clients● Fast start-up● Invest time in your design!● Don' try to unify

desktop & mobile● Lazy loading● Do work asynchronously

Copyright EclipseSource Inc, all rights reserved

HandsOnHandsOn Task 4

Widget: Geolocation

Task: Display the currentlocation of your device.

c.e.t.workshop.task4

Entry Point: /geo

Copyright EclipseSource Inc, all rights reserved

HandsOnHandsOn Task 5

Widget: ClientCanvas

Task: Touch and drawin your app.

c.e.t.workshop.task5

Entry Point: /draw

Copyright EclipseSource Inc, all rights reserved

State of Tabris, Roadmap

Q: When will 1.0 be released?

A: Q1 2013

Q: Can I deploy via the App Store / Play Store?

A: Yes, as long you comply with the App Store rules.The decision is up to the Store provider.

Q: What about pricing?

A: Final pricing is not yet available.It will be in the same range as othercommercial offerings in the space.

Copyright EclipseSource Inc, all rights reserved

Example Resources

● Available widgetshttp://developer.eclipsesource.com/tabris/docs/ui-controls/

● Code examples→ GitHub

Copyright EclipseSource Inc, all rights reserved

Community & Support

Demos: https://github.com/eclipsesource/tabris-demos/

Git: https://github.com/eclipsesource/tabris

Issues/Bugs:https://github.com/eclipsesource/tabris/issues

Questions & Answers:http://stackoverflow.com/search?q=tabris

Professional Support:http://developer.eclipsesource.com/tabris/docs/services/

Copyright EclipseSource Inc, all rights reserved

Thank you

For any questions please contacttabris@eclipsesource.com