0% found this document useful (0 votes)
73 views47 pages

E4 Development: Examples, Methods and Tools: Eclipse Con France 2014

This document provides steps for a workshop on building an application with Eclipse 4 (E4). It will cover: 1) Creating an application project with the wizard and setting up the required tooling and target platform. 2) Adding a sample dashboard view to display speed and RPM values from an engine simulator. 3) Adding an engine control panel to start, stop, and accelerate/brake the simulator, and connecting it to the dashboard with events. 4) Creating an alarm manager and view to trigger alarms based on simulator conditions. The workshop will build an application with plugins for the main UI, engine UI, and engine core to demonstrate basic E4 concepts like the application model, injection,

Uploaded by

roheat09
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
73 views47 pages

E4 Development: Examples, Methods and Tools: Eclipse Con France 2014

This document provides steps for a workshop on building an application with Eclipse 4 (E4). It will cover: 1) Creating an application project with the wizard and setting up the required tooling and target platform. 2) Adding a sample dashboard view to display speed and RPM values from an engine simulator. 3) Adding an engine control panel to start, stop, and accelerate/brake the simulator, and connecting it to the dashboard with events. 4) Creating an alarm manager and view to trigger alarms based on simulator conditions. The workshop will build an application with plugins for the main UI, engine UI, and engine core to demonstrate basic E4 concepts like the application model, injection,

Uploaded by

roheat09
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 47

E4 development: examples,

methods and tools


18 - 19 June 2014
Eclipse Con France 2014


a!le des mati"res



I - Eclipse 4 Workshop 5
A. OPCoach...................................................................................................................................................... #
B. Workshop Eclipse 4 : Building an E4 application.......................................................................................$
C. Setting the tooling....................................................................................................................................... 9
D. Step 1 : Creating application project..................................................................................................... 12
E. Application odel..................................................................................................................................... 1%
!. Step " : Adding a dash#oard $ie%........................................................................................................... 21
&. Step ' (e)inder on the injection............................................................................................................ 2$
*. Step 4 : Conte+t Sp,.................................................................................................................................. &0
-. Step . : Adding an engine to update $alues...........................................................................................&1
/. Step 0 : Adding the engine control panel.............................................................................................. &&
1. Step 2 : E4 E$ent Bus................................................................................................................................... &#
3. Creating an alar) s,ste) using e$ent sp,..............................................................................................&8
. step 4 : Add an alar) $ie%er.................................................................................................................. 41
5. Step 16 : application st,ling...................................................................................................................... 4&
O. Conclusion................................................................................................................................................. 4%

Workshop E47 Econ !rance "614 '


'- Eclipse 4 (or)shop
I




OPCoach .
Workshop Eclipse 4 : Building an E4 application 0
Setting the tooling 4
Step 1 : Creating application project 1"
Application odel 12
Step " : Adding a dash#oard $ie% "1
Step ' (e)inder on the injection "0
Step 4 : Conte+t Sp, '6
Step . : Adding an engine to update $alues '1
Step 0 : Adding the engine control panel ''
Step 2 : E4 E$ent Bus '.
Creating an alar) s,ste) using e$ent sp, '8
step 4 : Add an alar) $ie%er 41
Step 16 : application st,ling 4'
Conclusion 42





*+ ,-Coach

,-Coach
A#out us
,livier -rouvost
Eclipse e+pert trainer and co))itter 9E4 :ools;
oli$ier.prou$ost<opcoach.co)
<OPCoach=Eclipse
Emmanuel .en/amin
Eclipse e+pert and trainer in Eclitech
(esponsi#le >or training and consulting in Spain
e#enja)in<eclitech.co)
A#out ,-Coach
Co)pan, >ounded in /une "664
e)#er o> the Eclipse !oundation 9as Solution e)#er;
We# site : http://www.opcoach.com
Pro$ides Eclipse training and consulting
(ecruit)ent acti$it, to link co)panies and applicants
Workshop E47 Econ !rance "614 .
So)e re>erences :


Image 1

.+ (or)shop Eclipse 4 : .uildin0 an E4 application

'ntroduction
:his %orkshop %ill e+plain ho% to create a #asic Eclipse 4 Application
-t %ill sho% ,ou :
ho% to use the application )odel
ho% to create a sa)ple dash#oard part
ho% to )anage injection
ho% to deal %ith e$ents
ho% to de#ug and to trace in>or)ation using spies
Workshop E47 Econ !rance "614 0

*pplication sample
We %ill create an application containing :
an engine si)ulator 9to pro$ide sa)ple data;
an engine ?- 9to start@stop the engine and to accelerate@#rake;
a dash#oard to displa, the speed and rp) $alue
an alar) )anager to trigger alar)s depending on conditions
Basicall, the application %ill #e like this :


Main screen

2 Workshop E47 Econ !rance "614

*rchitecture
:o )ake this application properl, %e %ill create ' plugins
ec114+eap : the )ain plugin containing application )odel and dash#oard
ec114+en0ine+ui : the ?- >or engine7 containing the engine panel and alar) $ie%er
ec114 en0ine+core : the core >or engine7 containing si)ulator and alar) checker
:hese plugins depend on the E4 3una target plat>or)


Architecture


2esources
:he goal o> the %orkshop is to create the application >ro) scratch and to help ,ou
!eel >ree to ask Auestions or an, help i> ,ou ha$e a pro#le)
All the code o> this %orkshop is a$aila#le on githu# :
https://github.com/opcoach/Conferences/
1"
-)port in %orkspaces onl, the Bec>14=>ilesB project
:he histor, is like this 9,ou can get the project >ro) an, step ,ou %ant;
1 C https:@@githu#.co)@opcoach@Con>erences@tree@)aster@EC!14
" C https:@@githu#.co)@opcoach@Con>erences@
Workshop E47 Econ !rance "614 8


Git History

Dou %ill )a, #e re)ark that )aster has not #een ,et pushed on repositor,.
C+ 3ettin0 the toolin0

Eclipse 4 '4E installation
-nstall the latest release o> Eclipse 3una >or (CP de$eloppers
?nEip and launch it %ith a ne% %orkspace >older.
Dou need to ha$e the /(E 1.2 to launch luna


Luna


Eclipse 4 toolin0 installation
-nstall the latest release o> E4 tools. :o >ind it
go to this ?(3 http://downoad.ecipse.org/e!/downoads/ and select latest release
o r u s e d i r e c t l , t h i s u p d a t e s i t e :
http://downoad.ecipse.org/e!/downoads/drops/I"#1!#$1%&""##/repository/
or get it >ro) the ?SB stick and i)port it as an archi$e update site
4 Workshop E47 Econ !rance "614
Select the >ollo%ing tools:
core tools
css sp,
e$ent sp,
conte+t sp,

5e!ula installation
!or this %orkshop7 %e %ill also use 5e#ula.
5e#ula is a li#rar, o> cool graphical %idgets 9gauge7 ...;
-nstall it >ro) :
the ?SB Stick 9there is a Eipped update site;
o r > r o ) t h e n e # u l a u p d a t e s i t e :
http://downoad.ecipse.org/technoogy/nebua/snapshot
Select all >eatures
(estart ,our Eclipse.

ar0et plat1orm settin0
:he target plat>or) is the set o> plugins needed >or the application
!or this %orkshop %e %ill use the running plat>or) containing:
3una
E4 tools
5e#ula.

6ettin0 the 7or)shop 1iles
:o help ,ou to )ake the %orkshop7 so)e >iles are a$aila#le
Dou )ust i)port the git repositor, >ro) :
the githu# %e# site : https://github.com/opcoach/Conferences.git
the ?SB stick
:o install it just cop, the git url in the git repositor, $ie% 9access >ro) git perspecti$e;
Workshop E47 Econ !rance "614 16


Git import

:hen i)port the ec>14=>iles project in ,our %orkspace using the i)port co))and
11 Workshop E47 Econ !rance "614


Import 'C(1!)fies pro*ect

4+ 3tep 1 : Creatin0 application pro/ect

5e7 pro/ect
:he easiest %a, to start a ne% E4 application is to use the %iEard and to create a sa)ple content.
Workshop E47 Econ !rance "614 1"


'! +ro*ect wi,ard

1' Workshop E47 Econ !rance "614
5a)e ,our project 9eap is used >or the top le$el plugin; :


+age 1

Workshop E47 Econ !rance "614 14
Skip the "nd page 9do not contri#ute to ?-; and >inall, create a sa)ple content :


+age -

1. Workshop E47 Econ !rance "614

8ou sample pro/ect is read9
Dou can launch it directl, #, creating a ne% launch con>iguration :


Launch config

And ,ou get the de>ault application :


Workshop E47 Econ !rance "614 10
.efaut appi

E+ *pplication :odel

;ser 'nter1ace s)eleton
An, user inter>ace contains al%a,s the sa)e ele)ents 9$ie%s7 co))ands ...
12 Workshop E47 Econ !rance "614


Image " /I anatomy


Eclipse & to Eclipse 4
Eclipse ':
All these co)ponents are de>ined using e+tensions de>ined in di>>erent plugins
:he )ain )enus and the )ain perspecti$e are de>ined #, di>>erent classes 9ad$isors;
Workshop E47 Econ !rance "614 18
Eclipse 4:
de>ines an application )odel co)#ining all these concepts:


Image - /I in appication mode


he E4 application model
-t is a glo#al )odel that #rings together the usual e+tension points:
Fie%7 perspecti$e7 )enus 9$isual;
Co))and handlers7 ke, #indings 9nonC$isual;
-t si)pl, descri#es the structure o> the ?- %ithout detailing its contents
-ts structure is de>ined #, an Ecore )eta )odel
-t can #e edited %ith a dedicated editor
-t can #e )odi>ied and ?- is re>reshed
:his )odel is independent >ro) the displa,
A BrendererB allo%s speci>ic displa, 9s%t and ja$a>+;
Classes re>erenced in the application )odel are si)ple annotated PO/Os

he application model
:he application )odel is stored in the e4 project
14 Workshop E47 Econ !rance "614


Image ! Appication Mode


;2's in the application model
:he application )odel re>erences classes or resources 9icons7 properties ...;
Class identi1ication:
#undleclass:@@[email protected])e
#undleclass:@@co).opcoach.training.e4.rental.ui@co).opcoach.training.rental.e4.ui.$ie%s.A
genc,Fie%
2esource identi1ication:
plat>or):@plugin@Bundle-D@path@>ilena)e
plat>or):@plugin@co).opcoach.training.e4.rental.ui@icons@Agenc,.png

he visuali<ation o1 the model at runtime
At an, ti)e ,ou can see the actual application )odel
Shortcut: *lt 3hi1t F9
Dou )ust add the plugin or0+eclipse+e4+tools+em1+liveeditor in the launch con>iguration
Dou can edit the )odel and see the changes
Workshop E47 Econ !rance "614 "6
F+ 3tep 2 : *ddin0 a dash!oard vie7

*ddin0 the dash!oard vie7


.ashboard

!or the )o)ent7 this dash#oard %ill stand in eap plugin 9#ut it could #e )o$ed later in
engine.ui;
:o do this :
Cop, the Dash#oard >ro) the step" >older in the parts package o> ,our plugin
And )anage the dependencies...
Check the code to see ho% >igures are created
(eplace the Sa)ple Part in application )odel

*dd the dependencies to ne!ula +++
:he dash#oard part uses ne#ula7 dra%"d...
With Ctrl Shi>t O7 #e care>ul to not i)port the classes >or s%t.&rid3a,out and s%t.3a#el 9it )ust
co)e >ro) dra%"D;
"1 Workshop E47 Econ !rance "614
Add the reAuired #undles >or each co)pilation error :


Image % Add re0uired bundes

Workshop E47 Econ !rance "614 ""


dependencies


;pdate the application model
/ust s%itch the sa)ple part to the ne% dash#oard part.
"' Workshop E47 Econ !rance "614


1et dashboard


=aunch the application and chec) the live model
:he application is launched using the sa)e launcher :
-> ,ou ha$e the de>ault application instead o> the dash#oard7 check the clear option in the launch
con>iguration
Workshop E47 Econ !rance "614 "4


Launch

Dou can check the d,na)ic )odel using the shortcut : Alt Shi>t !4
:he B)odel sp,B appears in a dedicated %indo% : E4 spies
Dou can change the )odel 9na)e o> part7 $isi#le7 not $isi#le...;


'! 1pies

". Workshop E47 Econ !rance "614
6+ 3tep & 2eminder on the in/ection

'ntroduction > -rinciple
:he goal o> injection is to delegate the >ield or para)eters initialiEations to a >ra)e%ork
-njection uses a conte+t containing the $alues
We use the annotation ? 'n/ect 9/a$a+.inject; to inject the $alues
-t can #e applied to a constructor7 a )ethod or a >ield.
:he >ra)e%ork introspects classes to )anage the arti>acts that o%n an ?'n/ect annotation


Image $ 1ampe in*ected cass


Context'n/ectionFactor9 Class
A class %ith injection annotations:
)ust #e instantiated using the Context'n/ectionFactor9
can not !e instantiated 7ith a call to ne7
Context'n/ectionFactor9 instantiates o#jects and injects the conte+t.
:his is a static class


Workshop E47 Econ !rance "614 "0
Image 2 Conte3tIn*ection(actory


he in/ection context
:he conte+t stores the $alues associated %ith ke,s or classes
:he conte+t is hierarchical 9application CG perspecti$e CG parts...;
Branches in conte+t are acti$ated #, the >ra)e%ork 9?- >ocus7 part acti$ation7 ...;
Branch acti$ation gi$es an access to the a$aila#le $alues in this #ranch
-> a $alue is not >ound7 the conte+t %ill ask its parent 90et-arent9;;
:he conte+t is an i)ple)entation o> 'EclipseContext

*dditional annotations 1or ?'n/ect
' additional annotations are used to )anage o#ject creation:
?-ostConstruct : is used to annotate a )ethod that )ust #e called at the end o> initialiEation
?,ptional : is used to indicate that a >ield or a para)eter could #e null
?5amed : is used to get an o#ject #, its na)e

Call order
:he injection is processed in the >ollo%ing order:
?'n/ect Constructor call
?'n/ect !ields initialiEation
?'n/ect ethods call
?-ostConstruct ethod call
"2 Workshop E47 Econ !rance "614


Image 4 Ca order


Constructor call @1A
Context'n/ectionFactor9 %ill choose a constructor %ith an ? 'n/ect annotation
-> se$eral constructors are annotated7 it chooses the constructor ha$ing the )a+i)u)
para)eters that can #e injected
!ields )arked %ith ?'n/ect ha$e a null $alue in the constructor.
Other >ields can #e used nor)all,
Parent constructors are called #, the super@A 9i)plicit; or #, super@+++A 9e+plicit;

Fields 'n/ection @2A
Each >ield preceded #, a ?'n/ect annotation is initialiEed a>ter the constructor call
:he order o> initialiEation is unspeci>ied
-> a >ield can not #e injected the injector generates an e+ception
'1 the value chan0es a1ter the in/ection, it 7ill !e re-in/ected automaticall9
-> a >ield can ha$e no $alue7 it )ust #e annotated %ith ?,ptional
:he inherited ?'n/ect >ields are initialiEed #e>ore the others
Workshop E47 Econ !rance "614 "8

? 'n/ect methods invocation @&A
ethods annotated %ith ?'n/ect are called:
a>ter the constructor call
a>ter the injected >ields initialiEation
i1 an in/ected parameter value has chan0ed
-> se$eral )ethods are annotated %ith ?'n/ect7 the call order is unde>ined
:he inherited ?'n/ect )ethods are called #e>ore the others
:he inherited and o$erriden ?'n/ect )ethods are not called

? -ostConstruct methods invocation @4A
:he )ethod annotated %ith ?-ostConstruct is called:
a>ter the calls to each ?'n/ect )ethods
:he inherited ?-ostConstruct )ethods are called #e>ore the others
:he inherited and o$erriden ?-ostConstruct )ethods are not called
:he )ethods annotated %ith ?-ostConstruct are called once



Fondament al : .asic rule o1 in/ection
-> a $alue pre$iousl, injected into the injector changes a>ter injection:
it %ill auto)aticall, #e reCinjected into the rele$ant ?'n/ect >ields
?'n/ect )ethods that ha$e recei$ed this $alue as a para)eter are auto)aticall, reCcalled.


3ample 7ith ?5amed


Image 5 6In*ect 67amed 68ptiona


3ample 7ith ?-re1erence
:he ?-re1erence retrie$es the $alue o> a pre>erence.
-t can #e used >or a class >ield or >or a para)eter )ethod
:he pre>erence $alue is co)puted using O#jectConte+tSupplier


Image 1# 6+reference

"4 Workshop E47 Econ !rance "614
B+ 3tep 4 : Context 3p9

,pen the context sp9
?se the shortcut Alt Shi>t !16 or the #utton in E4 spies %indo%


Conte3t spy


(hat are the local values mana0ed !9 this context C
:his part o> the tree contains >or the selected conte+t7 all the $alues directl, set in this
conte+t.
Parent conte+t can not see these $alues
Onl, the current conte+t and child conte+t can access the)

(hat are the 'nherited values in/ected or updated usin0 this context C
:his part o> the tree displa,s onl, $alues de>ined in parent conte+t9s;
:hese $alues are injected using the current selected conte+t
-t is possi#le to open it and to check %here injection is used 9)ethod or >ield;
:he $alues injected %ith <PostConstruct are ne$er displa,ed 9#ecause called once;

;se the search to 1ind o!/ect in context
!or instance search >or HCo)positeH
Check there is a parent Co)posite >or the dash#oard part.
Dou can see that a sa)e instance is stored in conte+t using di>>erent ke,s corresponding to
ancestor classes
Workshop E47 Econ !rance "614 '6
'+ 3tep # : *ddin0 an en0ine to update values

Create an en0ine
We %ill create an engine updating $alues o>
speed
rp)
:his engine %ill contain :
a ti)er task to change the $alues
a speci>ic ?- to start@stop or accelerate@#rake

he core en0ine
:his is the si)ulator.
!or )odularit, reason7 it %ill stand in a speci>ic core plugin
-n this step %e %ill not ,et create the ?-.

:a)in0 the plu0in
Create the com+opcoach+ec12014+en0ine+core plugin
:his plugin %ill use injection so set these dependencies :


'ngine core dependencies

Create the co).opcoach.ec>"614.engine.core package
Cop, the EngineSi)ulator.ja$a >ro) >iles@step. >older
E+port the package
'1 Workshop E47 Econ !rance "614

Chec) the source code
:he EngineSi)ulator de>ines the constants to get@set the $alues
-t recei$es the Conte+t using -njection
-t contains a ti)er updating the $alues.

'nte0ratin0 en0ine and dash!oard
ake the eap plugin depend on the engine.core
Write the code to create the Engine :
-t )ust #e created using Context'n/ectionFactor9 and %ith the application conte+t
And Start engine

Create 'ngine

:hen add the code to inject the $alues :


Listen to 9aue

Do the sa)e >or the speed.

=aunch the dash!oard application
:he counters )ust change
Check the conte+t and >ind in the application conte+t the speed and rp) $alues
Workshop E47 Econ !rance "614 '"


Launch 1tep %

J+ 3tep $ : *ddin0 the en0ine control panel

*rchitecture
:o separate ?- and Core %e %ill create a ne% ?- pure E4 plugin
:o do it create an OS&i Bundle and then add the dependencies on :
j>ace
core.runti)e
dra%"d
ne#ula $isualiEation %idgets...
But donBt %orr, the reAuired #undles %ill #e proposed


'' Workshop E47 Econ !rance "614
.ependencies


*dd the En0ineControl-anel
Create a package and cop, the EngineControlPart >ro) step 0 >older
E+port this package
Check the code :
the engine si)ulator is optional, injected
it %ill #e updated %hen it %ill #e added in conte+t
%e )ust )anage the case o> BnullB
the Engine Si)ulator is updated in listeners and %ill update the conte+t

*dd the panel in the main 7indo7
-n the eap project :
Add the dependenc, to the ne% plugin
?pdate the application )odel and add the part in a sash container
Set the siEe ratios in the container data >ield 90. I >or top7 '. I >or engine control;
?pdate the siEe o> the %indo% 9066+.2.;


/I 8rgani,ation

Workshop E47 Econ !rance "614 '4

;pdate the dash!oard creation
5o% itBs not necessar, to start the engine %hen it is created :
re)o$e the start in Dash#oard.

=aunch the application
Dou should o#tain this ui :


1tep $ aunch

D+ 3tep % : E4 Event .us

'ntroduction
A good >ra)e%ork )ust pro$ide an e$ent )anage)ent )echanis)
?suall,7 to #e noti>ied o> an e$ent7 a listener )ust #e de>ined
And >or each case a speci>ic )ethod )ust #e de>ined
E+a)ple: i> ,ou %ant to listen to %hat is going on %ith +++7 %e %ould ha$e:
+++3istener %ith +++Created 9+++E$ent;7 +++odi>,ed 9+++E$ent; ...
or ,ou can use the E! adapters.
'. Workshop E47 Econ !rance "614
-n E4 there is a )ore si)ple )echanis): the 'Event.ro)er+
-t )anages the E4 e$ent #us

'Event.ro)er
With the E$entBroker ,ou can:
send an e$ent identi>ied %ith the rele$ant o#ject
recei$e e$ent auto)aticall, %hen it appears 9#, injection;
su#scri#e and #e noti>ied %ith an EventBandler 9ja$a.#eans;


Image 11 '9ent :ro;er A+I


3endin0 an event
Sending an e$ent is si)pl, a call to send or post
:he -E$entBroker is recei$ed #, injection


Image 1" '9ent :ro;er send


2eceipt and processin0 an event
We can do it in an injected )ethod that recei$es a ?;'Eventopic para)eter
:he )ethod #eing injected is called >or each sent e$ent
3trin0 patterns can !e used to receive events


Workshop E47 Econ !rance "614 '0
Image 1- '9ent:ro;er recei9e


;'Events
:he ?-E$ents class declares the >ra)e%ork e$ents :
?-3i>eC,le 9B(-5&:O:OP7 AC:-FA:E...;
application )odel updates 9?-Ele)ent.F-S-B3E...;


Image 1! /I'9ents


Event 3p9
:here is a dedicated sp, to displa, e$ents
Dou can open it using the shortcut : *lt 3hi1t F8
Or use the e$ent sp, #utton in E4 sp, %indo%
:he or0+eclipse+e4+tools+event+sp9 plugin )ust #e launched
'2 Workshop E47 Econ !rance "614


'9ent 1py

=+ Creatin0 an alarm s9stem usin0 event sp9

En0ine 7atcher
:he Engine %atcher %ill :
get speed and rp) $alues
co)pute an alar) e$ent depending on conditions
send an e$ent %ith an alar) in>or)ation depending on conditions

En0ine 7atcher implementation
We %ill create this class in the engine core si)ulator
Cop, it >ro) the step 8 >older and add also the Alar) class
-t is a si)ple class that %ill #e instantiated in the )ain dash#oard
-t %ill de>ine the e$ent topics
-t %ill recei$e the $alues and the E$entBroker #, injection
-t sends instances o> Alar) class in E$ent Broker
Workshop E47 Econ !rance "614 '8


'ngine <atcher


*larm implementation
-t is a si)ple #ean %ith %hen7 %hat and $alue :


Aarm cass

'4 Workshop E47 Econ !rance "614

En0ine 7atcher initiali<ation+
:he %atcher is created in the constructor o> the dash#oard :


Create the engine watcher


=aunch the application and chec) the event sp9
(elaunch the application and open the e$ent sp,.
Set the >ilter to Alar)@H in e$ent sp,
Start the engine and accelerate
A>ter a )o)ent alar)s should appear in e$ent sp,.


Launch

Workshop E47 Econ !rance "614 46
:+ step 9 : *dd an alarm vie7er

he alarm part 7ill receive event usin0 in/ection
-t is a ta#le $ie%er displa,ing alar)s :


Aarm +art


'mplementation
:he Alar) Part is a standard E4 part
-t stands in the engine.ui plugin
-t %ill recei$e the e$ent #, injection :


=ecei9ing e9ents


*pplication model update
O> course the part )ust #e added in application )odel.
Set the proportions #et%een sash containers
41 Workshop E47 Econ !rance "614


Appication mode update

Workshop E47 Econ !rance "614 4"

Final result
!inall, ,ou can launch it and ,ou get ,our application :


Main screen

5+ 3tep 10 : application st9lin0

'ntroduction
E4 has its o%n CSS rendering engine
4' Workshop E47 Econ !rance "614
A css >ile can #e set in the properties o> the product e+tension 9see eap plugin.+)l;
Si)pl, create a css re>erencing :
the na)e o> a SW: %idget
the na)e o> the speci>ic o#jects
the na)e o> class in application )odel
or ,our o%n css class de>ined using the -St,lingEngine

Css 3ample


Image 1% css sampe


C33 3p9
We can e+plore the e>>ects o> the CSS %ith CSS Sp,
:o open it use the Auick search at the top o> the screen or Ctrl 3hi1t F# 9%in'"; or *lt 3hi1t F#
9ac;
:he ite) in Auestion is $isualiEed on the screen
Dou can get the CSS >rag)ent and cop, it in ,our css >il
Workshop E47 Econ !rance "614 44


Image 1$ Css spy

4. Workshop E47 Econ !rance "614

C33 2esult
With the pre$ious Css ,ou get this result :


css resut

Workshop E47 Econ !rance "614 40

(or)shop
/ust cop, the de>ault.css >ile >ro) the step16 >older into the css >older o> the eap plugin
And relaunch ,our application.
Dou can pla, %ith the CSS $alues.
,+ Conclusion

E4 status
E4 >ra)e%ork is a great >ra)e%ork to )ake ,our applications
:he spies are $er, help>ul to understand %hat is happening
:he E4 tools %ill #e i)pro$ed in the co)ing )onths 9%e are %orking on it;
!eel >ree to ask Auestions to :
oli$ier<opcoach.co)
e))anuel.#enja)in<eclitech.co)
:raining on these technologies are a$aila#le in >rench7 english and spanish.
Just as) at the ,-Coach !ooth+

*n9 Euestions C

42 Workshop E47 Econ !rance "614

You might also like