01 ui5 training session(wd) - html.pptx
TRANSCRIPT
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
1/57
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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(.
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
4/57
+eta tas are used to store metadata a'out the document.*ypes of chars.8eywords.0uthor.Description.
9ther :0; UI tech. v
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
5/57
)eader
=aviation
:ection 0rticles
Footer
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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?>
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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(
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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 /::
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
14/57
Install :0;UI5 0pplication *oolkit
https
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
15/57
s
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
17/57
Sap.i.core.4ontrol0ll common method and
attri'utes which can 'e applied
on any control
utton *etField
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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&(
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
21/57
;ackae &;8TM0=U)0(
/lass/,M0=U)0
4ar+&pe
8 S,9,
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
22/57
iew1
iew2
iew!
/ontroller
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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>
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
24/57
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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 !
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
28/57
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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?>
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
32/57
InternationaliCation:upportin the application developed in UI5 with multilinual support.
,9TI= :creen
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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.
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
36/57
Inde.html
0pp
sap.m.0pp
;aes
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
37/57
;ae1 ;ae2
Toto
ack
0pp
,ist /ontrol 0 list control is a sinle column ta'le
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
39/57
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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.
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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.
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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 /::
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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:
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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.
+ ;
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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.
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
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
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
54/57
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
55/57
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
56/57
-
7/25/2019 01 UI5 Training Session(WD) - HTML.pptx
57/57