E4 development: examples, methods and tools Eclipse Con France 2014 - PDF document

E4 development: examples, methods and tools Eclipse Con France 2014 18 - 19 June 2014

Table des matières I - E c l i p s e 4 W o r k s h o p 5 A. OPCoach...................................................................................................................................................... 5 B. Workshop Eclipse 4 : Building an E4 application....................................................................................... 6 C. Setting the tooling....................................................................................................................................... 9 D. Step 1 : Creating application project..................................................................................................... 12 E. Application Model..................................................................................................................................... 17 F. Step 2 : Adding a dashboard view........................................................................................................... 21 G. Step 3 Reminder on the injection............................................................................................................ 26 H. Step 4 : Context Spy.................................................................................................................................. 30 I. Step 5 : Adding an engine to update values........................................................................................... 31 J. Step 6 : Adding the engine control panel.............................................................................................. 33 K. Step 7 : E4 Event Bus................................................................................................................................... 35 L. Creating an alarm system using event spy.............................................................................................. 38 M. step 9 : Add an alarm viewer.................................................................................................................. 41 N. Step 10 : application styling...................................................................................................................... 43 O. Conclusion................................................................................................................................................. 47 3 Workshop E4, Econ France 2014

I - Eclipse 4 Workshop I OPCoach 5 Workshop Eclipse 4 : Building an E4 application 6 Setting the tooling 9 Step 1 : Creating application project 12 Application Model 17 Step 2 : Adding a dashboard view 21 Step 3 Reminder on the injection 26 Step 4 : Context Spy 30 Step 5 : Adding an engine to update values 31 Step 6 : Adding the engine control panel 33 Step 7 : E4 Event Bus 35 Creating an alarm system using event spy 38 step 9 : Add an alarm viewer 41 Step 10 : application styling 43 Conclusion 47 A. OPCoach OPCoach About us ➢ Olivier Prouvost ➢ ➢ Eclipse expert trainer and committer (E4 Tools) olivier.prouvost@opcoach.com ➢ @OPCoach_Eclipse ➢ Emmanuel Benjamin ➢ Eclipse expert and trainer in Eclitech ➢ Responsible for training and consulting in Spain ➢ ebenjamin@eclitech.com ➢ About OPCoach ➢ Company founded in June 2009 ➢ Member of the Eclipse Foundation (as Solution Member) ➢ Web site : http://www.opcoach.com ➢ Provides Eclipse training and consulting ➢ ➢ Recruitment activity to link companies and applicants 5 Workshop E4, Econ France 2014

Some references : ➢ Image 1 B. Workshop Eclipse 4 : Building an E4 application Introduction This workshop will explain how to create a basic Eclipse 4 Application It will show you : how to use the application model ➢ how to create a sample dashboard part ➢ how to manage injection ➢ how to deal with events ➢ how to debug and to trace information using spies ➢ 6 Workshop E4, Econ France 2014

Application sample We will create an application containing : ➢ an engine simulator (to provide sample data) an engine UI (to start/stop the engine and to accelerate/brake) ➢ a dashboard to display the speed and rpm value ➢ ➢ an alarm manager to trigger alarms depending on conditions Basically the application will be like this : Main screen 7 Workshop E4, Econ France 2014

Architecture ➢ To make this application properly we will create 3 plugins ecf14.eap : the main plugin containing application model and dashboard ➢ ecf14.engine.ui : the UI for engine, containing the engine panel and alarm viewer ➢ ecf14 engine.core : the core for engine, containing simulator and alarm checker ➢ These plugins depend on the E4 Luna target platform ➢ Architecture Resources ➢ The goal of the workshop is to create the application from scratch and to help you Feel free to ask questions or any help if you have a problem ➢ All the code of this workshop is available on github : ➢ ➢ https://github.com/opcoach/Conferences/ 1 2 Import in workspaces only the 'ecf14_files' project ➢ The history is like this (you can get the project from any step you want) 1 - https://github.com/opcoach/Conferences/tree/master/ECF14 2 - https://github.com/opcoach/Conferences/ 8 Workshop E4, Econ France 2014

Git History You will may be remark that master has not been yet pushed on repository. C. Setting the tooling Eclipse 4 IDE installation Install the latest release of Eclipse Luna for RCP developpers ➢ Unzip and launch it with a new workspace folder. ➢ You need to have the JRE 1.7 to launch luna ➢ Luna Eclipse 4 tooling installation Install the latest release of E4 tools. To find it ➢ go to this URL http://download.eclipse.org/e4/downloads/ and select latest release ➢ o r u s e d i r e c t l y t h i s u p d a t e s i t e : ➢ http://download.eclipse.org/e4/downloads/drops/I20140615-2200/repository/ or get it from the USB stick and import it as an archive update site ➢ 9 Workshop E4, Econ France 2014

Select the following tools: ➢ core tools ➢ css spy ➢ event spy ➢ ➢ context spy Nebula installation For this workshop, we will also use Nebula. ➢ ➢ Nebula is a library of cool graphical widgets (gauge, ...) Install it from : ➢ the USB Stick (there is a zipped update site) ➢ o r f r o m t h e n e b u l a u p d a t e s i t e : ➢ http://download.eclipse.org/technology/nebula/snapshot Select all features ➢ Restart your Eclipse. ➢ Target platform setting The target platform is the set of plugins needed for the application For this workshop we will use the running platform containing: Luna ➢ E4 tools ➢ Nebula. ➢ Getting the workshop files To help you to make the workshop, some files are available ➢ You must import the git repository from : ➢ ➢ the github web site : https://github.com/opcoach/Conferences.git ➢ the USB stick To install it just copy the git url in the git repository view (access from git perspective) ➢ 10 Workshop E4, Econ France 2014

Git import Then import the ecf14_files project in your workspace using the import command ➢ 11 Workshop E4, Econ France 2014

Import ECF14_files project D. Step 1 : Creating application project New project The easiest way to start a new E4 application is to use the wizard and to create a sample content. 12 Workshop E4, Econ France 2014

E4 Project wizard 13 Workshop E4, Econ France 2014

Name your project (eap is used for the top level plugin) : Page 1 14 Workshop E4, Econ France 2014

Skip the 2nd page (do not contribute to UI) and finally create a sample content : Page 3 15 Workshop E4, Econ France 2014

You sample project is ready You can launch it directly by creating a new launch configuration : Launch config And you get the default application : 16 Workshop E4, Econ France 2014

Default appli E. Application Model User Interface skeleton Any user interface contains always the same elements (views, commands ... 17 Workshop E4, Econ France 2014

Image 2 UI anatomy Eclipse 3 to Eclipse 4 Eclipse 3: All these components are defined using extensions defined in different plugins ➢ The main menus and the main perspective are defined by different classes (advisors) ➢ 18 Workshop E4, Econ France 2014

Eclipse 4: defines an application model combining all these concepts: ➢ Image 3 UI in application model The E4 application model It is a global model that brings together the usual extension points: ➢ View, perspective, menus (visual) ➢ ➢ Command handlers, key bindings (non-visual) It simply describes the structure of the UI without detailing its contents ➢ Its structure is defined by an Ecore meta model ➢ ➢ It can be edited with a dedicated editor It can be modified and UI is refreshed ➢ This model is independent from the display ➢ A 'renderer' allows specific display (swt and javafx) ➢ ➢ Classes referenced in the application model are simple annotated POJOs The application model The application model is stored in the e4 project 19 Workshop E4, Econ France 2014