layoutskin-140304115443-phpapp02

8/9/2019 layoutskin-140304115443-phpapp02

1/82

Advanced Oracle ADF

Oracle A-Team

Layout Managers and Sins


2/82

Layout Managers


3/82

Introduction to layout managers

The case for layout managers We are not web designers!

Abstraction from HTML (

etc" #onsistent layout behavior

#onsistent behavior across browsers

Manages browser geometry (stretchingand flowing"


4/82

!oring "it# layout managers

To stretch or to flow$

%tretching Ma&imi'es browsers view)ort usage

#an also stretch its child com)onents

*lowing +solated com)onents not su))osed to stretch

Where do + start$ %tart with a stretchable outer frame

+nside this frame have flowing islands eg scrollable areas


5/82

Stretc#a$le %I e&am'le


6/82

Flo"ing ()i&ed si*e+ %I e&am'le


7/82

%I layout "it# ,SF general ti's

Try to minimi'e the number of layoutcontainers on the )age +t will ma,e it smaller

and faster

Minimi'e the number of com)onents you

need to stretch- it will ma,e the )age faster

.se spacerinstead of )adding/margin0

.se 12ev built3in )age style gallery

Ma,e sure to test everything in multi)le

browsers 4es it can still behave differently

(0 instructor5s note"


8/82

Poetry o)

!isdom

The cost of geometry management is directly

related to the complexity of child components.

Therefore, try minimizing the number of child

components that are under a parent geometry-

managed component.

Oracle. Fusion Middle"are !e$ %ser Inter)ace Develo'er/s 0uide - 1#a'ter 23 section 245464


9/82

Stretc#a$le Layout Managers

a)7'anelStretc#Layout a)7'anelS'litter

a)7'anel0rou'Layout a)7'anelDas#$oard


10/82

Flo" vs Stretc#


11/82

Poetry o)

!isdom

You cannot place components that cannot stretch into

facets of a component that stretches its child

components. Therefore, if you need to place a

component that cannot be stretched into a facet of the

panelStretchLayout component, rap that component

in a transition component that can stretch (eg3

'anel0rou'Layout8scroll+.



12/82


13/82

ADF Faces Page Layout DOTS

Do OT em$ed ra" HTML in your 'ages4

Do OT use inlineStyle4 %se sinning instead or at least a

'eer 1SS )ile4 %se t#e a)7resource tag

Do OT try to stretc# somet#ing vertically "#en inside o) a

)lo"ing (non-stretc#ed+ container4

Do OT s'eci)y a heightvalue "it# 'ercent unit4

Do OT use t#epositionstyle4


14/82

Poetry o)

!isdom

!o not attempt to stretch any of the

components in the list of components that

cannot stretch by setting their idth to "##$.

You may get unexpected results. %nstead,

surround the component to be stretched ith

a component that can be stretched



15/82

Deconstructing Face$oo

'anelStretc#Layout

'anel0rou'L

ayout8=scroll>

'anel0rou'

Layout8=vertical>

'anel0rou'Layout8=vertical

'anel0rouLayout8=#ori*ontal


16/82

Leverage ,Develo'er ?uic Layouts@


17/82

Page Tem'lates


18/82


19/82

1ode revie"

%witching the tem)late dynamically


20/82

Ho" ,avaServer Faces enders t#e %I

1ava%erver *aces com)onents are dis)layagnostic now about state

now about behavior

The com)onent dis)lay is device s)ecific

handled by com)onent renderers =&ternal classes

?ne renderer )er com)onent

2evice related renderers are grou)ed to renderer ,its

To customi'e a layout you don@t change the

renderer

A2* *aces )rovides #%% hoo,s instead


21/82

ADF Faces ic# 1lient 1om'onents

ADF Binding

ADF Data1ontrol

DBMS

;,B C4 !e$ Service BP;L E

Aa& ender

Git %I 1om'onent

=$indings O$ect;&'r4 Language

MOD;L %I ;D;I0

ADF Aa& Page Li)ecycle

1lient


22/82

A$out Sins

A s,in is a style sheet based on the #%% B synta& that iss)ecified in one )lace for an entire a))lication

2evelo)ers can change the styles icons )ro)erties and te&t ofan A2* *aces com)onent using s,inning

%,ins use #%% to define the layout of A2* *aces and Trinidad

com)onents 2o not o)erate on HTML elements

.se com)onent selectors

#onsistent change of the a))lication loo, and feel

%,ins are located relative to )ublicChtml directory

%,ins consist of

#%% file

+mages

Locali'ed strings


23/82

A$out Sins

Any changes to the s,in is )ic,ed u) at runtime

Do change to code is needed

With custom s,ins the com)onent@s default css styles li,e color

font bac,ground3images images default te&t strings and

com)onent )ro)erties can be changed

=ach com)onent has s,inning @hoo,s@

Also ,nown as ,eys or selectors

2efine what )ieces of a com)onent you can s,in

%,in information can be created for a )articular agent or

reading direction %,ins automatically transform into the a))ro)riate #%%3E )age

and com)onent styles

%,ins can be switched dynamically at runtime


24/82

Sin ;&am'les


25/82

Sin ;&am'les


26/82

1ascadingStyle S#eets

Basics


27/82

1ascading Style S#eets (1SS+

W# %tandard

#urrent Fersion is #%%

%e)arates Mar,u) from ;resentation

%tores )resentation definition in central

location

Hel)s reducing HTML )age si'es

#ascading rules define that local definitions

overrule global rules


28/82

Document O$ect Model

2ocument ?bGect Model (2?M" is a W#s)ecification and re)resents an in memoryhierarchy re)resentation of the )age

+n web )ages com)onents may be nested inother com)onents

#%% definitions set on the inner com)onent)recede the definition on the )arent

com)onent +f the )arent com)onent has defined styles that are not

e&)licitly overridden on the child com)onent then the child

com)onent inherits this style

%tyles are added through styling rules thatim act a sin le com onent or man at once


29/82

1SS ules

#%% rules are a))lied to elements attributesor +2 selectors as )ro)erty3value )airs %electorattributevalue- attributeEvalueI

hJcolorred- bac,groundyellowI

Kules can be grou)ed hJ hE h colorred- bac,groundyellowI

=lement selectors

Mar,u) identifers li,e table hJ hE h button etc #lass selectors

some#lassDamecolorredI

hJsome#lassDamecolorredI


30/82

1SS ules

+2 selectors %ome+d colorredI

#an only be used once )er document because it is a uniNue

identifier

Attribute selectors hJ OclassP references all elements that have a class

attribute

hJ Oclass 8 valueP references all elements that have aclass attribute with e&act the iven vaue

Allows to reference attributes with )artial value matches as

well


31/82

1SS Pattern Matc#ing

Source: http://www.w3.org/TR/REC-CSS2/selector.html


32/82

1SS in ADF Faces

#ontent%tyle

controls the width of a form

control

%tyles bo& around value

Wor,s for

+n)ut com)onents

listbo&es

#hoices

richTe&t=ditor

%huttle

content%tyle a))lied to

each list in a shuttle


33/82

1SS in ADF Faces

%tyle#lass

#an be used in conGunction with

s,inning

A))lies styles to the root 2?M

element

#an use =L for conte&t s)ecific#%%

+nline%tyle

%tyles the root 2?M element

#an use =L for conte&t s)ecific

#%%


34/82

Adding Inline Styles Dynamically

Keference +nline%tyle string inmanaged bean method using =L

+n managed bean access table cell

value and determine #%% to return

%alary > JBBB

bac,ground3colorgreen

width JBB Qheight JBB Q

%alary > RBBB

bac,ground3colororange

width JBB Q

height JBB Q

%alary > JBBBB

bac,ground3colorredwidth JBB Q

height JBB Q


35/82


36/82

Ho" Sinning !ors

A2* *aces s,ins are created as server side

#%% files using defined A2* *aces

com)onent %electors

The s,inning framewor, )rocesses the s,infile and generates regular #%%3E documents

that are lin,ed to the rendered )age

%,in selectors are resolved to #%% classes afin)utTe&tlabel to afCin)utTe&tClabel


37/82

Sinning vs4 1SS

+n #%% the element is styled

; color red I

+n A2* *aces the afin)utTe&t com)onent is styled using a s,in

selector

afSin)utTe&t colorred I

To s,in )ieces of a com)onent #%% uses the )seudo3element

synta&

)first3line te&t3transform u))ercase I

;seudo3elements also e&ist in A2* *aces com)onents li,e

in)utTe&t The entire com)onent afSin)utTe&t I

The label afSin)utTe&tlabel I

The content (the in)ut" afSin)utTe&tcontent I


38/82

Arte)acts

A s,in consists of the following artifacts

A #%% file that defines the actual loo, of the com)onents

A configuration file trinidad3s,ins&ml 3 that lists all s,ins

available for this a))lication trinidad3s,ins&ml has to be located in your a))lications

W=73+D* directory

An entry in the A2* *aces configuration file trinidad

3config&ml

Any other resources need to create the actual loo, of thecom)onets 3 additional #%% files +mages


39/82

Develo'ing 1ustom Sins


40/82

9%,inning is artwor, 4ou cannot teach good

taste but you can show the techniNues to

achieve the goal:


41/82

Ho"-to $uild 1ustom Sins

#onsult the s,in3selectorshtml )age for all

s,inning ,eys defined for each com)onent

and global ,eys

#reates a s,inning css file that uses thes,inning ,eys to style the icons )ro)erties

and styles

The #%% file for your s,in must be stored

under the root of your Web a))lication

Ma,e sure that all resources li,e images and

other #%% files reNuired for the s,in are

accessible


42/82

Ho"-to $uild 1ustom Sins

#reate a trinidad3s,ins&ml that gives the s,in

an id family render3,it3id resource bundle

%et the trinidad3config&ml@s

element value to the s,in family name ;lace trinidad3s,ins&ml into W=73+D*

directory or a 1AK file@s M=TA3+D* directory


43/82

1on)iguration in trinidad-con)ig4&ml

%tatic name

=&)ression


44/82

Sin 1on)iguration ;lements

.sed when referencing a s,in in an =L e&)ression

#onfigures an a))lication to use a )articular family of s,ins

=&tends an e&isting s,in

2etermines render ,it to use for the s,in

orga)achemyfacestrinidaddes,to)

orga)achemyfacestrinidad)da

*ully Nualified )ath to the custom #%% file

Dot needed if no custom resource bundle e&ists


45/82

trinidad-sins4&ml ;&am'le

enoding=I-?9@@A916"


46/82

1reating a 1ustom esource Bundle

Ke)lace default string labels of A2* *aces #om)onent labels

Falidator message te&t

#reate message bundle class =&tending GavautilListKesource7undlepu*li la%% 0d%e%oureBundle e4tend% Ci%te%oureBundle {

pu*li ?*3et&(&( get,ontent%/ { return ontent%5 !

%tati final ?*3et&(&( ontent% =

{

{afdialog.?DE?;ay!E

{afpanelFindow.,C?-GE ,lo%e!E

{afdoument.-2C0-H-,GG$G--0JGEHello and Felome!!5

!


47/82

In#erit )rom Selector

3tr3rule3ref Avoids #%% code du)lication

+m)roves readability

.Kar;Ba;ground:alia%{*a;ground9olor:#LMLMLM!

.$ediumBa;ground:alia%{*a;ground9olor:#N>N>N>!

afOdoument{

9tr9rule9ref:%eletor.Kar;Ba;ground:alia%/5

!

afOpanelTa**ed::*ody {

9tr9rule9ref:%eletor.$ediumBa;ground:alia%/5

!


48/82

In#i$it In#eritance

3tr3inhibit inhibits styles from a base s,in

3tr3inhibitall

3tr3inhibitbac,ground3color

3tr3inhibit U

afOdoument::%pla%9%reen9ontent{

9tr9ini*it:*a;ground9image5

9tr9ini*it:*a;ground9repeat5

*order:tran%parent5

*a;ground9olor:tran%parent5

!


49/82

Sinning Geys

%,in %elector

A s,in ,ey is used to style a com)onent or com)onents in an

a))lication not a )articular instance

A s,in ,ey usually starts with afS contains the name of the

com)onent the )iece of the com)onent to s,in via a )seudo3

element

label

content

read3only

A s,in ,ey might loo, li,e styleclass but ends with alias s,in ,eys can only be used in a %,inning #%% file

%,in ,ey cannot be used in a com)onent@s style#lass attribute


50/82

1onnecting t#e Dots

2o not use leading dot for selectors

2o not use leading dot in styleclass )ro)erties

.se to define style class in #%% files

Kefers to a #%% element of an A2* *aces or Trinidad com)onent

Kefers to a )art of the com)onent

afSin)utTe&tcontent

Mi&ing styles afS)anelHeader afSin)utTe&tcontent

Kefers to the content )art of a te&tfield in a )anelHeader

S


51/82

Functionality Availa$le to Sinners

%,inning ,eys to s,in )ieces of a com)onent including icons Kesource bundle ,eys to s,in te&t of a com)onent

V)latform /s,in definitions go here/I

;ossible values are windows macos linu& solaris ))c

2oes not wor, for icons

Vagent /s,in definitions go here/I 3 >

;ossible values are netsca)e ie mo'illa gec,o web,it ice

2oes not wor, for icons

lang or locale

rtl )seudo3class to create a style or icon definition when thebrowser is in a right3to3left language

alias s,inning ,eys

% i I i Si


52/82

%sing Images in Sins

Absolute A*=rrro+conalias content url(htt)//foocom/images/err3logogif"I-

Kelative

Do )rotocol and no leading /

A*=rrro+conalias content url(images/err3logogif"I-

#onte&t relative Kesolved relative to the web a))lication conte&t root

%tarts with a single /

A*=rrro+conalias content url(/images/err3logogif"I-

Kelative to server

Allows to reference resources that are not )art of the a))lication

de)loyment

.KL starts with //

A*=rrro+conalias content url(///images/err3logogif"I-

Si 1 t T I


53/82

Sin 1ustom Tree Icons

afOtree::e4panded9ion

{

ontent: url)%;in%)myompany)%;inimage%)e4pand.gif/5

widt:1Pp45

eigt:1Pp45

!

afOtree::ollap%ed9ion

{

ontent: url)%;in%)myompany)ollap%e.gif/5

widt:1Pp45

eigt:1Pp45

!


54/82

,Develo'er Sinning Su''ort

Si D l t S t


55/82

Sin Develo'ment Su''ort

#ode editing su))ort

A2* *aces %,in =&tension Tool > ;references >#%%

=ditor

#hec, A2* *aces =&tension %ynta& Hel)

+mage selection

#ode #om)letion =g ty)e afSin)utr then )ress

ctrl=nter #ode *olding

#olla)ses #%% style definitions

Mouse3over code info

Synta& Hel'

Si D l t S t


56/82

Sin Develo'ment Su''ort

%tructure Window %u))ort #lasses

=lements

+2

.se to navigate and

uncomment entries

=rror Margin

=g synta& error

T#


57/82

T#eme

;rovide a consistent loo, and feelacross multi)le com)onents for a

)ortion of a )age

A com)onent that sets a theme

e&)oses that theme to its children

com)onents

#ommon usage for themes is in a

)age tem)late where certain areas

have a distinct loo,

afdocument

afdecorative7o&

af)anel%tretchLayout

af)anel6rou)Layout

T#


58/82

T#eme

A theme is e&)osed to s,inningdevelo)ers as an attribute

7LA* s,ins that )rovide themesu))ort are medium and richdes,to) s,ins

dar, medium

light

none (default"

afOpanelTa**ed&teme=dar;( {olor: red5!


59/82

T#eme

=nabling themes in web&ml


60/82

1om'onent Sin;&am'le

PanelBo& Sin Selectors


61/82

PanelBo& Sin Selectors

The )anel7o& com)onent has attributes ram) and bac,groundto )rovide X color schemes

core highlight

default light medium dar,

=&am)le afS)anel7o&header3centercoremedium

%,in selectors afS)anel7o& afS)anel7o&header3start afS)anel7o&header3center afS

)anel7o&header3endafS)anel7o&contentafS)anel7o&icon3style afS

)anel7o&disclosure3lin,

Alias

A*;anel7o&Header#ore2efaultalias A*;anel7oontent#ore2efaultalias

A*;anel7o&Header#oreLightalias

A*;anel7oontent#oreLightalias

more

PanelBo& 1om'onent Sin ;&am'le


62/82

PanelBo& 1om'onent Sin ;&am'le

afOpanelBo4 {widt:@>Q5!

afOpanelBo4::ontent {eigt: M>>p45!

afOpanelBo4::eader9%tart:ore:default

{*a;ground9image:

url)%;in%)image%)ontpeader%tart.png5

!

afOpanelBo4::eader9enter:ore:default

{*a;ground9image:

url)%;in%)image%)ontpeader*g.png/5!

afOpanelBo4::eader9end:ore:default

{*a;ground9image:url)%;in%)image%)ontpeaderend.png/5!

PanelBo& 1om'onent Instance Sin


63/82

PanelBo& 1om'onent Instance Sin

;&am'le

.se additional style#lass)ro)erty value

#lass name doesn@t need to

e&ist

.se style class name with

s,in selector .panelBo4In%tane,la%%afOpanelBo4::di%lo%ure9lin;{

di%play:none5!


64/82

1onte&tual Sins

+nstance s)ecific s,ins that are based on the)age the com)onent is in

#om)onents that are added on a tem)late

may need to be s,inned based on the conte&tthey are in

.se style#lass )ro)erty on com)onent Keference class )ro)erty by =L

.se Tem)late )arameters if com)onen )art of a tem)late

Kesolve conte&t in managed bean

1onte&tual Sins


65/82

1onte&tual Sins

=&am)le references the current view +2 for instance s)ecifics,inning of a ;anel7o& that is )art of a tem)late

tem'late

'anelBo&

'ageC 'age5

'anelBo&

'age6

,--:

page1afOpanelBo4::eader9enter:ore:default

{*a;ground9image: url)%;in%)image%)ontp*lueeader*g.png/5!

afOpanelBo4::eader9enter:ore:default

{*a;ground9image: url)%;in%)image%)ontpeader*g.png/5!

pu*li -tring getRiewId/ {

Sae%,onte4t ft4 = Sae%,onte4t.get,urrentIn%tane/5

-tring viewIK = ft4.getRiewoot/.getRiewId/5

return viewIK.%u*%tring1/5 !


66/82

1#anging t#e S'las# Screen

The %)lash %creen can be s,inned #hange image

#hange load message

#hange bac,ground color

From 444 To 444

afOdoument::%pla%9%reen9ontent{*a;ground9olor:Jreen5!

afOdoument::%pla%9%reen9ion {ontent:url..)image%)ow.gif/5!

Sin t#e %nsinna$el


67/82

Sin t#e %nsinna$el

%ome of the generated HTML is not

accessible by a s,in selector because it is anim)lementation detail of the com)onent

rendering

How to s,in a generated HTML fragmentanyway$ .se your #%% ,nowledge


68/82

Sin De'loyment

O'tion 67 Adding t#e Sin Sources to


69/82

O'tion 67 Adding t#e Sin Sources to

t#e A''lication Sources

The %,in definition file is contained in the a))lication@sW=73+D* directory

Trinidad3s,ins&ml

The s,in #%% is located in the a))lication@s ;.7L+#CHML

directory

The images are located relative to the #%% file +n ;.7L+#CHTML directory

%ubfolder of ;.7L+#CHTML directory

%ubfolder of #%% folder

All sources are de)loyed with the a))lication

=asy to do but hard to maintain if a consistent loo, and

feel should be ensured across a))lications

O'tion 57 De'loying a 1ustom Sin in


70/82

O'tion 57 De'loying a 1ustom Sin in

a ,A )ile

A s,in can be de)loyed and develo)ed se)arately from thea))lication

%)ecific rules must be followed when creating the 1AK file

The trinidad3s,in&ml file that defines the s,in and thatreferences the #%% file must be within the M=TA3+D*directory

All image resources and #%% files too must be under theM=TA3+D* directory

The images 3 and this is im'ortant3 must be in adirectory that starts with an adf root directory or anydirectory name that is ma))ed in the web&ml file for the

resource servlet ;lace the 1AK file in the W=73+D*/lib directory of the

FiewLayer )roGect of the a))lication to de)loy

Ho"-to7 De'loy 1ustom Sins in ,A (I+


71/82

Ho"-to7 De'loy 1ustom Sins in ,A (I+

#reate a directory structure similar to the

following

The image directory in the M=TA3+D*

directory must start with adf or whatever

string that is defined as the resource loader

)ath in web&ml

:temp$GT09ISadforale%;inimage%

$GT09IS%;in%u%tom.%%

$GT09IStrinidad9%;in%.4ml

afOinput,olor::%wat9overlay9ion:rtl {

ontent:url..)adf)orale)%;in)image%)f%ortl.gif/5

widt: 1M5 eigt: 1M5

!

Ho"-to7 De'loy 1ustom Sins in ,A (II+


72/82

Ho"-to7 De'loy 1ustom Sins in ,A (II+

trinidad3s,in&ml file in the M=TA3+D*directory has the following content

=&am)le to create custom s,in

enoding=I-?9@@A916"


73/82

Ho"-to7 De'loy 1ustom Sins in ,A (III+

#reate Gar file Gar 3cvf custom%,inGar M=TA3+D*/

#o)y 1AK file to W=73+D*Ylib

#onfiger trinidad3config&ml enoding=window%91MAM6"


74/82

;&am'le7 Sin Discovery at untime

1#anging Sins at untime


75/82

1#anging Sins at untime


76/82

Discover Sins at untime ;&am'le

pu*li la%% -;in,oo%erHandler {

pu*li -;in,oo%erHandler/ {

)) -et te default %;in to *e *lafplu%9ri

0KS,onte4t adft4 = 0KS,onte4t.get,urrent/5

$ap %e%%ion-ope = adft4.get-e%%ion-ope/5

%e%%ion-ope.put%;inSamilyE ?rale/5

!

...

!



77/82


pu*li Ci%t get-;in,oie%/ {

Ci%t oie% = new 0rrayCi%t/5

-tring %;inSamily5

-tring %;inCa*el5

-;inSatory %f = -;inSatory.getSatory/5

Sae%,onte4t onte4t = Sae%,onte4t.get,urrentIn%tane/5

Coale loale = onte4t.getRiewoot/.getCoale/5

for Iterator i = %f.get-;inId%/5 i.a%e4t/5 / {

-tring %;inIK = -tring/i.ne4t/5

-;in %;in = %f.get-;inonte4tE %;inIK/5

%;inSamily = %;in.getSamily/5

if %;in.getenderDitId/.inde4?fde%;top/ " >/ {

oie%.addnew -eletItem%;inSamilyE %;inCa*el//5

!

!

return oie%5

!


78/82

Product Demonstration

Sin Discovery and Setting at untime


79/82

Sin De$ugging

Disa$le 1ontent 1om'ression


80/82

Disa$le 1ontent 1om'ression

web&ml


81/82

Fire$ug

.se within *ire*o&

+ns)ect and edit HTML

Fiew and Fisuali'e #%%

+nstantly change #%% definitions

=&)loring the 2?M tree

=&ecute 1ava%cri)t

htt)s//addonsmo'illaorg/firefo&/JXZ/

!e$ Develo'er PlugIn


82/82

!e$ Develo'er PlugIn

*irefo& and Mo'illa Menu and a toolbar various

web develo)er tools

htt)//chris)ederic,com/wor,

/web3develo)er/

Documents

layoutskin-140304115443-phpapp02