MOB107 SAPUI5 in Mobile Application

Wim VerhelstOctober 2013MOB107Using SAPUI5 in Mobile Application Development 2013 SAP AG or an SAP affiliate compan! All ri"hts reser#e$! 2Disclaimer%his presentation o&tlines o&r "eneral pro$&ct $irection an$ sho&l$ not be relie$ on in ma'in" a p&rchase $ecision! %his presentation is not s&b(ect to o&r license a"reement or an other a"reement )ith SAP! SAP has no obli"ation to p&rs&e an co&rse of b&siness o&tline$ in this presentation or to $e#elop or release an f&nctionalit mentione$ in this presentation! %his presentation an$ SAP*s strate" an$ possible f&t&re $e#elopments are s&b(ect to chan"e an$ ma be chan"e$ b SAP at an time for an reason )itho&t notice! %his $oc&ment is pro#i$e$ )itho&t a )arrant of an 'in$+ either e,press or implie$+ incl&$in" b&t not limite$ to+ the implie$ )arranties of merchantabilit+ fitness for a partic&lar p&rpose+ or non-infrin"ement! SAP ass&mes no responsibilit for errors or omissions in this $oc&ment+ e,cept if s&ch $ama"es )ere ca&se$ b SAP intentionall or "rossl ne"li"ent! 2013 SAP AG or an SAP affiliate compan! All ri"hts reser#e$! 3AgendaSAP ./0 O#er#ie)SAP ./0 for Mobile ApplicationsSAP ./0 Mobile ./ 1ontrols an$ 2eat&resMobile 3oo' an$ 2eel4#ents an$ 5a#i"ationPhone6%ablet Specific 2&nctionalit7eploment an$ 7e#elopment OptionsSAP ./0 an$ SAP 2iori 2013 SAP AG or an SAP affiliate compan! All ri"hts reser#e$! 8What is SAP UI5?A $e#elopment tool'it for 9%M30A cross-bro)ser :a#aScript librar for b&il$in" rich internet applications/ncl&$es toolin" s&pport for $e#elopment an$ testin".se$ for the ./ of stan$ar$ SAP sol&tions an$ c&stom sol&tionsA#ailable on $es'top+ mobile an$ clo&$4,tensible; c&stom ./ controls+ c&stom themin"+< 2013 SAP AG or an SAP affiliate compan! All ri"hts reser#e$! 0Bro)serHow are SAP UI5 Applications developed?SAP ./0 Applications r&n in a bro)ser or a bro)ser component%he start pa"e of a SAP ./0 Application is a 9%M3 pa"e =e!"!+ in$e,!html>SAP ./0 Applications &se the Model-iew-!ontroller concept for the screens an$ lo"ic of the applicationSAP ./0 Applications consist of?the stan$ar$ SAP ./0 3ibraries ?c&stom files =:a#ascript+ @M3+ 1SS+!!>SAP ./0 ApplicationMo$els Vie)sin$e,!htmlOther components =formatter+ app+SAP ./0 3ibrariesMo$els 1ontrollers Vie)s 2013 SAP AG or an SAP affiliate compan! All ri"hts reser#e$! AModel - iew - !ontroller "M!#$he Model-iew-!ontroller concept is %sed in SAP UI5 Applications1ontrollerMo$el Vie)Define and render the UIManage the application dataManage interaction between View and ModelData binding$&pes o' SAP UI5 iews@M3 Vie) ./ is $efine$ in an @M3 file6strin":a#ascript Vie) ./ is constr&cte$ in a tra$itional manner:SO5 Vie) ./ is $efine$ #ia :SO5 in a file6strin"9%M3 Vie) ./ is $efine$ in an 9%M3 file6strin"$&pes o' SAP UI5 ModelsBeso&rce Mo$elMo$el base$ on reso&rce b&n$les+Bo$(...)%new sap.m.6a.el(...)%'ew sap.m.Input(...)% 2013 SAP AG or an SAP affiliate compan! All ri"hts reser#e$! 38SP UI! ControlSP UI! ControlCSSCSSAdapting to Plat'orm and Screen Si6eMan&al A$aptationMobile 7S speci'ic st&ling with !SSSAP ./0 pro#i$es stan$ar$ 1SS classes for each mobile OS tpe;sap-iossap-an$roi$sap-)inphonesap-bb7e#elopers can &se these stan$ar$ 1SS classes to appl c&stom stlin" base$ on the mobile OS tpe!i,SMstleN.sap0ios 1m&Control 2 colorG red3OM6stleNvar o6a.el , new sap.m.6a.el( "my&ontrol",{te$t : "sample te$t"})%non0i,S 2013 SAP AG or an SAP affiliate compan! All ri"hts reser#e$! 30Adapting to Plat'orm and Screen Si6eMan&al A$aptationMobile 7S speci'ic st&ling with !SSSAP ./0 pro#i$es stan$ar$ 9%M3 ta" attrib&tes; $ata-sap-&i-bro)ser G for bro)ser an$ bro)ser #ersion information$ata-sap-&i-osfor OS an$ OS #ersion information7e#elopers can &se these stan$ar$ 1SS attrib&tes to appl c&stom stlin" base$ on the bro)ser an$6or mobile OS tpe =incl&$in" #ersion>!SP UI! ControlSP UI! ControlCSSCSSi,S ! non0i,S !MstleNhtmlP$ata-sap-&i-osHQiOS0!0QR 1m&Control 2 colorG red3O M6stleNvar o6a.el , new sap.m.6a.el( "my&ontrol",{te$t : "sample te$t"})% 2013 SAP AG or an SAP affiliate compan! All ri"hts reser#e$! 3AAgendaSAP ./0 O#er#ie)SAP ./0 for Mobile ApplicationsSAP ./0 Mobile ./ 1ontrols an$ 2eat&resMobile 3oo' an$ 2eel4#ents an$ 5a#i"ationPhone6%ablet Specific 2&nctionalit7eploment an$ 7e#elopment OptionsSAP ./0 an$ SAP 2iori 2013 SAP AG or an SAP affiliate compan! All ri"hts reser#e$! 378avigation1oncept9ecommendation 2 /or SAP UI5 Mobile Applications %se the SAP UI5 : App ; conceptApp %he root element of the mobile app 9an$les na#i"ation 2 $he App receives navigation event and switches the displa& to iew 4 Vie) 11ontroller 1Vie) 21ontroller 25a# B&ttonSwitch to View 7Detect 4a%igation 6%entApp4#entB&sApp Vie)App 1ontroller 2013 SAP AG or an SAP affiliate compan! All ri"hts reser#e$! 82Mobile 5B340>5B!oncl%sion 2013 SAP AG or an SAP affiliate compan! All ri"hts reser#e$! 0E/%rther In'ormationSAP