01 UI5 Training Session(WD) - HTML.pptx

7/25/2019 01 UI5 Training Session(WD) - HTML.pptx

1/57


2/57

Eclipse is free. Easy to use. It is used in all the companies to do dev. ForUI5 apps.

1. Install jdk in our system.2. Download and etract eclipse!. "hen we open eclipse #rst time$ It will ask for workspace. It%s folder in

our computer which will store all the #les &"e'content(.


3/57

)*+, - )yper*et +arkup ,anuaeIts 'ased on html tas. "!/ - www consortium. - 0ll 'rowserrowsers can directly understand the html.

Every html #le is also known as html document.1. ersion of html used to create that doc. It will also inform the 'rowser

that the content which is written is an )*+, content.

2. Every doc will also have 2 components . 1. head 2. 'ody1. )ead - which contains the meta information a'out the htmldocument.2. ody - the content what we wish to display to the user.

Version When

)*+, 1331

)*+, 2.4 1335

)*+, !.2 133

)*+, 6.41 1333

7)*+, 2444

)*+,5 2416


4/57

+eta tas are used to store metadata a'out the document.*ypes of chars.8eywords.0uthor.Description.

9ther :0; UI tech. v


5/57

)eader

=aviation

:ection 0rticles

Footer


6/57

>h1?"elcome>font? >color?>h1?>font-@/ali'riA?>color?"elcome>style? ta at the pae level!. Eternal B Usin a eternal /:: #le

Selector { prop : val ; prop2 : val2 }Selector = id of the element -> #id class name -> .classname

tagname -> tagname

o ma!e all the h" from html docment in red colorh"{ color: red }$ %ant to ma!e m& inp 'eld color as (le for %hich id is

inp"

#inp"{color:(le}


7/57

1. locks are not proper

2. 0pplyin the style at ta level is aectin non desired elements also.

Element Element

;addin

order

+arin

:iCe of )*+, element on a pae - element siCe paddin 'order marin


8/57

Gesponsive "e' desin 0 responsi'le we' desin is a desin of a we'

pae$ which is capa'le of adaptin the content accordin to screen siCe.

+ *D


9/57

Hava script is a prorammin lanuae which 'rowsers understands.Fast response time.

*ypes1. /lientside - H: which ets eecuted in 'rowser.2. :erverside - Guns on the server$ usually used to prepare results from

D or D lookups.

H: and Hava are completely dierent lanuaes$ 'oth in concept and desin.H: was invented 'y renden Eich in 1335.

! "ays!. Inline - at element level - onevent=ame - @js codeA6. Internal - use >script?>


10/57

Hs can chane )*+, element&s( content and attri'utesH: can chane /::alidate the inputUsin H: code we call server reJuests also"e can dynamically add more html elements to the pae

9utput

1. window.alert&( 9G alert&(2. Document.write&(!. /onsole.lo6. inner)*+,

Eternal /::

Do+ - Document 9'ject +odel ? structure of )*+, document

F12 - Internet Developer *ool'ar


11/57

Function in H:function name&(K

L

function&(KL

var varia'leMname - @valuesAN

:ynta to create an o'jectKprop=ame @valA$ prop=ame2 @valueAL

0rray in H:

ar name - O@val1A$Aval2A$Aval!AP

If we com'ine the concept of 0rray and 9'ject$ It 'ecomes H:9=.H:9= :tands for Hava:cript 9'ject =otation. &Internal ta'le of o'jects(OKL$KL$KL$KL$KLP


12/57

jQuery - is not a D Juery lanuae &:E,E/*(. Is a Hava script li'rary.@"GI*E ,E:: and D9 +9GEA

1. )ow to load the H: #le which contains jQuery functions

a. Geference the H: #le'. Download and reference

1. )ow to consume jQuery.

"e use R sym'ol.R&@selectorA(

:elector - Sid$ .classname$ taname

document.etElementyId&@idA(

R&@SidA(


13/57

0enda1. :0; UI5 framework2. )ow to setup eclipse!. :D8

It is a java script li'rary which is responsi'le for renderin )*+,5 paes.

:0; UI5 FrameworkDesin time

GuntimeDev.

:ap.ui.commons$ sap.m$:ap.ui.ta'le$ sap.ui.u!

Usin UI5 ,i's

)*+,5 /::


14/57

Install :0;UI5 0pplication *oolkit

https


15/57

s


16/57

Eercise Desin a screen for user to enter user name. 0lso place a'utton with click la'el as :how my name. 9n click of this 'utton$ Displaythe user name in popup.

User =ame

:how my=ame


17/57

Sap.i.core.4ontrol0ll common method and

attri'utes which can 'e applied

on any control

utton *etField


18/57

1. *here is no alinment of controls on the screen.2. /ontrols are intervenin each other.!. Every time we create a control$ we need to create the 'ody element in

html and call place0t method to place it in 9DV.

,ayout - +atri$ rid$ vertical$ horiContal:ap.ui.commons.layout sap.ui.layout

567 567

User =ame User =ame Field

;assword ;assword #eldutton

Desin an application header with a user name #eld. "hen user clicks on

,oo 'utton in application header$ /hane the entire D9+ to loed osuccessfully$ >username?.Doc.write&(


19/57

+/ - +odel iew /ontroller0 desin pattern to create end to end UI applications. Usin +/ we makeour application ready for future chanes.

/ontroller

+odel iew

iew - screens what user will see. &H:$ 7+,$ H:9=$ )*+,(+odel - Data of the application. &H:9=$ 7+,$ Gesourse$ 9data(/ontroller - /ontain the 'usiness loic &H:(

action

notify

reJuest

response

inding


20/57

0 view will always consist of 2 methods1. create/ontent&( - Is responsi'le for creatin the UI elements of the

entire view.2. et/ontroller=ame&( - 0'out the controller of this view. +any views

can share one controller.

Inde.html/ode to createview o'ject andplace it in 'ody

of )*+,

iew+0I=.view.js/reate UIelemento'jects

/reates the o'ject of theview

:0;UI5

Framework


21/57

;ackae &;8TM0=U)0(

/lass/,M0=U)0

4ar+&pe

8 S,9,


22/57

iew1

iew2

iew!

/ontroller


23/57

7+, B e7tensi'le +arkup ,anuae*he main purpose of ml was to echane the data 'etweenmultiple technoloies. Unlike )*+,$ in 7+, we will have ourown ta names.

00;&0;Is(

IfMimlMW

H00&0;Is(

7+,&:trin(

>Employees?>Employee?

>Id?14>=ame?0nu'hav>Employee?

>Id?24>=ame?Hack>Employee?

>Id?!4>=ame?:piderman>


24/57


25/57

0nu'hav$ /an you please show an eample where we can naviate 'etweenviews.In we'dynpro$ we have concept of plus to naviate 'etween views$ how dowe achieve hereX

=et

ack

+ain

;anel


26/57

:hell control is mainly used to com'ine multiple views in a sinle screen.*he shell control is similar to o'ject Instance Floorplan in we'dynpro.:ap.ui.u!

+ain

1 2 !

:hell /ontent 0rea

1 2 !


27/57

0ssociation Gelationship 'etween two o'jects.0reation B lose 'indin$ 'oth o'jects can work independently./omposition B *iht 'indin$ 9'jects cannot function independently./ardinality 11$ 1n

ase

GefMasso.

/hild

0ssociatio

n


28/57


29/57

+odels 9'ject of D0*0 in application.

H:9=7+,Gesource

9Data

/lient :ide +odels B small amount of #ed data

:erver side model B actual data model for

/UGD

iew+odel

Data 'indin

9ne"ay*wo"ay

9ne*ime1. 4reate o()ect of model class:ap.ui.model.>model class?.>model type?2. Set or load data into modelsetData or loadData!. Set the model to0pplication$ iew$ /ontrol

H:9= - 0rray of o'jects


30/57

H:9= 0rray of o'jectsK

Yprod:trY KYprod=ameY Y,aptopY$YpriceY Y544Y

L$Yprod*a'Y OKYprod=ameY Y,aptopY$YpriceY Y544Y

L$ KYprod=ameY Yi;honeY$

YpriceY Y!44YL$ K

Yprod=ameY Y;rinterY$YpriceY Y144Y

L$ KYprod=ameY Y+ouseY$

YpriceY Y54YLP

L


31/57

/olumn1. *itle for the column

2. *emplate - control what type of UI element we want the column to 'e.!. 0lon with the template property we need to also do the 'indin &From

which property of H:9=$ it will pick up values(

7+, - e7tensi'le +arkup ,anuae B unlike )*+,$ 7+, can have customtas.

7mls can 'e processed 'y prorammin lanuaes usin D9+ model.>employee?

>row?>empId?>e=ame?>ender?>row?

>empId?>e=ame?>ender?>


32/57

InternationaliCation:upportin the application developed in UI5 with multilinual support.

,9TI= :creen


33/57

:ap.ui.et/ore&(.et+odel&(0ll lo'al varia'les for the controller are de#ned in onInit method.

"ith pre#$ this.

1. Formatters2. :olve the pro'lem of data type!. )ow to process 7+,

Formatters many times when we develop the application$ "e wouldneed to format our data at runtime.

UI;rop Kpath @model pathA$

formatter formatterMfunction$ function&value(KL

L

alue Kpath @model?e=ameA$formatter function&input(K convertandreturnL

L


34/57

Faceless /omponents /ustom controller it%s a H: #le with reusa'lefunctions.

jQuery.sap.declare&@path of the #leA(N

/onsume it$ we need to declare 'elow 'efore

jQuery.sap.reJuire&@path of the #leA(N

UI *a'le /9ntrol

=ew sap.uita'le.ta'le&KId - @my*a'leA

L(N

FI9GI U i f UI5 li ti


35/57

FI9GI User eperience of a UI5 application.Device /ompati'ilityGesponsive;latform independent/oherent

Gole 'ased

It is a application 'uilt usin +/ model with sap.m as control li'rary.:ap.ui.layout.


36/57

Inde.html

0pp

sap.m.0pp

;aes


37/57

;ae1 ;ae2

Toto

ack

0pp

,ist /ontrol 0 list control is a sinle column ta'le


38/57

,ist /ontrol 0 list control is a sinle column ta'le.

title

Item1

Item2

Item!

)eader

/ontent B collectionof items OP

;ath of the'indin

*emplate type of list

*ypes of templates Display ,ist Item &l$v(

:tandard ,ist Item&icon$l$d(/olumn ,ist Item&multiple( /ustom ,ist Item

&customiCe li(

9'ject ,ist Item&9(0ction ,istItem&clicka'le( Input ,ist Item


39/57


40/57

/omin "ednesday will 'e holiday.FI9GI B is all a'out user eperience.

Inde.html

:ap.m.0pp -? sap.m.:plit0pp

id+ain id;ae2

+asterview

Detailsview Empty

view

*ypes of Fiori 0pps

*ransactional 0ppsFactsheets0nalytical 0pps


41/57

:earch #eld with a list control."hen we apply #lter$ y default the #lters were workin with 0=D operator.e.. et the results in the list where =ame 9G description of productmatches.


42/57

Framents liht weiht UI parts. 0 frament would not have anycontroller$ *he functionality of the frament will 'e de#ned 'y thecontroller who invokes the frament.0s a UI template.

/hk productsData

/ontroller 1

/ontroller 2

/ontroller !

frament

iew 1

iew 2

iew !

UI5 doesn%t 'ecome 'ottleneck for developin we' applications.


43/57

UI5 doesn t 'ecome 'ottleneck for developin we' applications./ustom /ontrolX0 custom control is a control which developer can de#ne in case if astandard sap control doesn%t serve the purpose.In case a standard control provides some functionality 'ut we need to

enhance it$ we can create a custom control to enhance the standardcontrol also.

..

...

:0; UI5Framework

rowsers)*+,5 /::


44/57

:ap.ui.core./ontrol

:ap.ui.commons.utton

:ap.ui.commons.*etiew

*etField

"e need to desin our control 'y inheritin from sap.ui.core./ontrol

class.Ultimate op of our control is oinin to 'e an )*+,5 /:: code.

:teps to desin a custom control


45/57

p 1. UniJue control name.2. +etadata of the control which consists of properties$ methods$ events.

whenever we have a property- setter Z etter methods for thatproperty

whenever we have an event - attach>Event=ame? also totrier the event we will

have #re>Event=ame? method.!. Implementation of control

Init B to initialiCe the control attri'utes. renderer B function&oGenderer$o/ontrol(K

oGenderer - which will tell the 'rowser a'out how to show thecontrol. o/ontrol - o'ject of control itselfL

S&nta3

:ap.ui.core./ontrol.etend&@/ontrol=ameA$K metadata Kproperties$events$methodsL$ renderer function&oGm$o/ontrol(KL$

Init function&(KLL(N


46/57

:0; UI5 Framework

sap.m$

sap.ui.commons

/reate o'ject of apisand add it to the

html 'ody

ootstrap

1. ,ocation of mapapi

Toole.mapsToole.eocodeToole.marker

/reate o'ject of apisand add it to the

html 'ody

http://maps.google.com/maps/api/js?sensor=falseToole.maps.+ap -? *his will create a new map o'jectToole.maps.+arker -? to mark a location on the mapToole.maps.eocoder -? pass the address$ returns the

ln Z lat

/9+;9=E=*.H:


47/57

HUI /omponent which encapsulates entire functionality of our 0pplication. =aviation &Gouter( ersionin Information Dependencies

Tlo'al methods and varia'les /on#urations +odel Instantiate the main 0pp view InitialiCation

1. "e want structure our app 'y keepin all the entities in separate folders.2. Interatin the app with :0; ,aunchpad. &:hell and /ontainer(

sap ui core UI/omponent declare&@path of componentA(N


48/57

sap.ui.core.UI/omponent.declare& path of component (Nsap.ui.core.UI/omponent.etend&@compMnameA$K

metadata Krouters$dependencies$li's$con#uration$menifestL$init function&(KL$destroy function&(KL$

L(N

componentname.prototype.create/ontent - function&(K

LN

"henever we use component.js concept the app will 'e called #orilike app.

+ ;


49/57

Inde.html

split0pp

+aster;aes

Details;aes

iews

iews

Inde.html

:hell/omponent/ontainer

/omponent.js

+ain 0pp iews

:plit0pp

+aster;aes

Details;aes

9data 9pen Data ;rotocol$ this allows us to consume the data over http.


50/57

Vou do not need to worry a'out underlyin data 'ase and its Jueries.

GE:*ful 0;Is - Gepresentational :tate *ransfer

9data.or

0ny odata service we use has ! parts1. :ervice Document B de#nes the entity sets of the services2. +etadata document B allows us to look at the meta data Rmetadata!. Data


51/57

Entity *ype B template of sinle entity data. For every entity which is partof service we will create entity type specifyin properties of it.

Entity :et B "ill represent the data of the entity at runtime. 0ssociation B "e need relation 'etween dierent entities.

Function Import B allows us to eecute operations on entity.

ImplementationGuntime 0rtifacts

+;/ B +odel ;rovider /lass+;/ME7*

D;/ B Data ;rovider /lassD;/ME7*

Geistration

"e have a company which is usin :0; EG; today. *his company wants to


52/57

"e have a company which is usin :0; EG; today. *his company wants toimprove the user eperience and implement #ori screens. *hey still wantdata from eistin erp system.

Fiori

EG;

0pplication

D

:0; =etweaverTateway .6

GF/

Features of odata


53/57

:elect some of the #elds Rselect - #eld names ;ain Rtop Rskip Repand to check dependent entities data toether. Rformat - json

0;IME;+M;G9DU/*MTE*M,I:*0;IME;+M;G9DU/*MTE*MDE*0I,:0;IME;+M;G9DU/*M/reateapiME;+M;G9DU/*MU;D0*E0;IME;+M;G9DU/*MDE,E*E

;G9DU/*:9GDEG::U;;,IEG:

WA W$?? @ 8,VA SASS$@ @@BB@WCCC


54/57


55/57


56/57


57/57

Documents

01 UI5 Training Session(WD) - HTML.pptx