4/19/2015

UI5Boilerplateexplained(Part1)|SCN

GettingStarted Newsletters

LogOn

Hi,Guest

JoinUs

Store

SearchtheCommunity

Products

Services&Support

AboutSCN

Downloads

Industries

Training&Education

Partnership

DeveloperCenter

Activity

LinesofBusiness

UniversityAlliances

Events&Webinars

Innovation

Browse

Communications

Actions

SAPUI5DeveloperCenter

UI5Boilerplateexplained(Part1)
PostedbyHPSeitzinSAPUI5DeveloperCenteronFeb1,20143:56:51PM
2

Share

Tweet

Like

InthisblogIwilldescribethestructureandconceptsbehindtheUI5SplitApp
Boilerplate.Itisatemplate/skeletonforMobileUI5Appsandfollowsthe"MobileFirst"
approach,butalsoworksondesktop(Thankstothegreatsap.mcontrols).
TheUI5BoilerplatecanbeunderstoodasstartingpointforyourownUI5Development,bothforOpenUI5
andSAPUI5Apps.

TheBoilerplateprovidesabasicapplicationandfilestructure,implementssomecorefeatures(navigation,
i18n)andcontainsexampleviews/controllersfordifferentpurposes.TheUI5SplitAppBoilerplatecodeis
hostedonGithub:6of5/UI5SplitAppBoilerplateGitHub

TheUI5BoilerplatealsosupportsSAPandalsoNonSAPDevelopmentapproach,thisisreflectedintwo
differentgitbranches:

nonSAPcentricDevelopmentScenario

SAPcentricDevelopmentScenario

Development AnyIDEwithGitSupport(SublimeText,Eclipse,
Tool
IntelliJ,)

Eclipse4.3withSAPUIDevelopmentToolkitfor
HTML5(SAPUI5Toolkit)

GitBranch

master

eclipseKepler

GitClone
Command

gitclone

gitclonebeclipseKepler

https://github.com/6of5/UI5SplitApp https://github.com/6of5/UI5SplitApp

Boilerplate.git

Boilerplate.git

More
Information

http://scn.sap.com/community/developer
center/frontend/blog/2014/01/13/ui5mobile
splitappboilerplate/

UI5BoilerplatewithEclipse+SAPUI5Toolkit

localDev
Runtime
Options

node.js,ApacheHTTP,ApacheTomcat

WebAppPreview,ApacheTomcat,HANACloud
LocalRuntime

ApplicationStructureandFileStructure
UI5Boilerplateisstructuredviathefollowingfolders:
Folder

contains

app

UI5ApplicationComponent,whichisresponsibleforgeneraltasks,likeinitializecoremodelslikei18n

css

CSSfilesgohere

i18n

resourcebundlesforinternationalization(i18n)arestoredinthisfolder

img

assetslikeimages,logos,.

js

generaljavascriptfiles,e.g.app.js

model UI5modelinformation(likejson,xmlfiles)
view

UI5viewfiles(XMLViews,JSViews)andthecorrespondingcontrollers

Let'shavealookattheindex.htmlfilefirst:

http://scn.sap.com/community/developercenter/frontend/blog/2014/02/01/ui5boilerplateexplainedpart1

1/10

4/19/2015

UI5Boilerplateexplained(Part1)|SCN

ItisanormalHTML5documentfile.AfterthemetadeclarationforIEtheUI5bootstrapscriptisdeclared.The
boilerplateoffershereincommentssomealternativesourcesfortheUI5bootstrap(OpenUI5external,SAPUI5
external,localSAPUI5fromSAPUI5Toolkitorprovidingitvialocalwebserver).Withlocaloptionsyoucandefine
yourselfwhichdedicatedUI5versionyouwanttouse.Theindex.htmllinkstotheJavaScriptfileapp.js:

app.js(declareUI5resources/'start'ApplicationComponent)

intheapp.jswedefinewhereUI5resourcesarelocated.Theseareinthefoldersapp,modelandview.SoUI5willbe
abletouseresourceswithinthesefolders.Andwespecifythatwerequireapp.Component.ThisComponent
representsourApplication.WecreateanComponentContainerwithname"app"andattachittotheDOMelementwith
theid"root",whichinourcaseisthebodytag<bodyclass="sapUiBody"id="root">.Thiswillcreateandrunour
Component(Application):

Component.js(ApplicationComponent)

IntheComponent(Application)wecreatetheApp.view(whichrepresentstheUIofourApplication)andcreatethe

http://scn.sap.com/community/developercenter/frontend/blog/2014/02/01/ui5boilerplateexplainedpart1

2/10

4/19/2015

UI5Boilerplateexplained(Part1)|SCN

i18nmodelandattachthistotheApp.View.Withinthecomponentfurthergeneraltaskscouldbeexecuted,like
loadingmasterdata,whichcanthenbeusedthroughouttheapplication.NowletshavealookattheAppView:

App.view.js(ApplicationUI)

IntheAppViewwecreateaSplitAppwhichwillenablethe"iPad"likeUIStyle.WecanthendefinetheMaster
Page(s)whichwillbeonthesmallerleftsideofthescreen(heretheMenuView)andalsotheDetailPages
(CoffeeListViewandInfoView).BothJSViewsorXMLViewsarepossibleasyoucansee.Andofcourseyou

couldalsousetheotherviewtypeshere.TheAppViewisnowreturningtheSplitAppasmemberofthe
mobileShell.Theresultcanbeseeninthebrowser(withUI5BoilerplateVersion0.6.0):

Next
InthenextblogarticleIwanttoexplain,howyoucaneasilyextendtheUI5BoilerplatewithfurtherPages.
YoucanfindanarticlewhichdescribesHowtoeasilyaddfurtherpagesinthisexternalblogpost.

Updates/Changesinversion0.7.0

WiththeupdatedversionoftheUI5boilerplatetherearesomefundamentalchangeswhichIshortlywilldescribe.

ShellandComponentwereremoved

AstheShellandalsotheComponentarenotreallynecessaryfora'normal'App(hereinthesenseofasingle,
independentApp),theyhavebeenremoved.
ThismakestheDOMmoreleanandremovesunnecessarycomplexity.

ThehomeIcondefinitionisdonebytheSpliAppitselfnow.Initialisationoftheglobalmodels(i18nandthenewdevice
model)istakenoverformtheComponentbytheAppView(RootView).ThismakesalsotheComponentContainer
obsolete.ThereforesimplytheAppViewisplacedintheDOMintheapp.'sfile:

http://scn.sap.com/community/developercenter/frontend/blog/2014/02/01/ui5boilerplateexplainedpart1

3/10

4/19/2015

UI5Boilerplateexplained(Part1)|SCN

DeviceModelintroduced
Toimplementdifferentbehaviourondifferentdevices(smartphone,tablet,desktop)thedevicemodelwasadded.
MoreInfosindedicatedpost:
http://scn.sap.com/community/developercenter/frontend/blog/2014/04/15/responsivedesignofui5splitapp

FioriEditionofUI5Boilerplate

ThereisnowaFioriEditionoftheUI5Boilerplateavailable,whichcanbeintegratedintotheSAPFioriLaunchpad.
Moreinformationunderthefollowinglinks:
TheFioriEditionwasintroducedontheSAPInsideTrackFrankfurt2015.Motivationandsomefundamental
conceptscanbefoundinthisblogpostsitFRA2015BirthdayofUI5BPFioriEdition
StepbystepinstructionshowtouseSAPWebIDEtodeployUI5BPFioriEditiononSAPHANACloudPlatform
(HCP)andregisterinSAPFioriLaunchpadonHCP: DeployUI5BoilerplateonFioriLaunchpadofHANA
CloudPlatform
SourceofUI5BoilerplateFioriEditiononGitHub

sitFRA 2015 Birthday of UI5BP Fiori Edition

4909Views
Topics:mobileTags:html5,javascript,ui5,sapui5,github,splitapp,openui5,ui5boilerplate,boilerplate,ui5template

AverageUserRating
(8ratings)

Share

Tweet

Like

25Comments
GarethRyanFeb3,20141:37PM

ThisisagreatstartingpointforpeoplewantingtounderstandhowbesttostarttheirSAPUI5app's.If
onlyI'dwaitedafewdaysIwouldn'thavehadsomanystupidquestionsinmyownblogpostinglast
week,asthisanswersalotofthethingsIwasthinkingabout.

OnethingIwouldsay,itwouldbeusefultounderstandwhat,ifany,differencestherearefora
boilerplatethatisn'tmobilefirst,i.e.isn'tbasedonthecommonSplitApptypeapproach.I'msure
manydevelopers,likemyself,areusingSAPUI5fordesktop/Portalbasedsolutionsjustasmuchas
mobile.Isuspectthedifferenceswillbeminimal(i.e.simplyuseadifferentlayout)howeveritwould
beusefulforsomeconfirmationaroundthisandhighlightofanypossiblytrapsandpitfalls.

Cheers,

Gareth.
Like(3)

HPSeitzFeb3,20142:44PM(inresponsetoGarethRyan)

Thanksforyourcomments.

Toyourquestionregarding"mobilesecond"or"nomobile",Iwouldsay:

http://scn.sap.com/community/developercenter/frontend/blog/2014/02/01/ui5boilerplateexplainedpart1

4/10

4/19/2015

UI5Boilerplateexplained(Part1)|SCN
ApplicationandFileStructurecanstaythesame
DifferencewillstartattheApp.View,youwon'tusethem.Shellofcourseandalsonot
theSplitApp,insteadyouwouldusesap.ui.ux3.Shell(Note:Ihaveonlylimited
experienceinthisarea)
youwillnotbelimitedtomobilecontrolsandwillbeabletousefullsizeofthedesktop
but,but,butyouwon'tfullymobileenabledanymore

ForthatpurposeweneedtheUI5DesktopBoilerplate,butmobilefirstandtimeislimited!

Cheers,HP
Like(1)

GarethRyanFeb5,20143:44PM(inresponsetoHPSeitz)

HiHP,

Thanksforthesecomments.I'mhavingaplayatthemomentcreatinga
sap.ui.ux3.Shelldesktopbasedboilerplate,basedonyourworkabove.Asyou
say,itisn'ttoodifferentinrealityandforthetypicalcustomerrequestsI'mreceiving
atthemoment,Ineedtobeabletoshowbothmobilefirstand"oldschool"
approaches.

Cheers,

Gareth.
Like(2)

HPSeitzFeb6,20148:47AM(inresponsetoGarethRyan)

HiGareth,

let'skeepsyncedonthistopic.Buthowshouldwecallthe"Desktop"
boilerplate?Shellisnotauniquenameasthereisalsothemobileshell?
Desktop,OldSchool,Classic,UX3Shell,..??

Iwouldsuggest,wecreateasecondrepoongithub,baseistheUI5
SplitAppBoilerplate,soitwillautomaticallysupportEclipsewithUI5
Toolkitand"allIDE"developmentscenarios.

Cheers,HP
Like(2)

PatrickSDec5,20149:59AM(inresponsetoHPSeitz)

HiGareth,
greatidea!HaveyoualreadycontinuedworkontheUI5
DesktopBoilderplate?Iamveryinterestedin.

Regards,Patrick
Like(0)

MathiasMaerkerFeb13,20141:47PM

Whileitiscertainlyaniceidea,isn'tthereamavenpluginforthiskindofstuff?OrmaybeYeoman
Modernworkflowsformodernwebapps?Ithinkyounotonlygetyourboilerplatebutstufflike
dependencymanagement,unittestingetc.
Like(0)

HPSeitzFeb13,20146:51PM(inresponsetoMathiasMaerker)

aboilerplateisaboutappstructureandappconceptsnotaboutdevelopmentprocesses
likeTDD,CIorCD.Thiscanbeaddedaroundit.
Like(0)

MathiasMaerkerFeb13,20148:59PM(inresponsetoHPSeitz)

Wellthatiscorrect,butf.e.Yeomandoesbothandinaveryeasycustomizable
way.YoucanwriteaveryeasyscriptwhichpromptsforUserdecisionsandthan
youcanchangeyourboilerplatecodeaccordingtothesetupwishes,justsaying..
Therearealreadyalotoftoolsouttherenoneedtoreinventthewheel.
Regards

Edit:AnobviouslyBoilerplatescanhavedependenciestootherstuffandyeoman
ormorepreciselybowerwilltakecareofthatandgruntisusedfordeploymentetc.

Editedit:Justdiscoveredthereisalreadyaopenui5generator,whichgenerates
boilerplateetc..
Like(1)

HPSeitzFeb14,20149:22AM(inresponsetoMathiasMaerker)

http://scn.sap.com/community/developercenter/frontend/blog/2014/02/01/ui5boilerplateexplainedpart1

5/10

4/19/2015

UI5Boilerplateexplained(Part1)|SCN
Isharemyfindingsandexperience,I'vemadewithUI5,withtheUI5
boilerplate.AndItrytocomposeit,sothatpeople(especiallywhoare
newtoUI5)caneasilyuseit,withlessprerequitesaspossible.Itcanbe
usedwithEclipse+UI5ToolkitoranyotherIDE,likeSublimeText.The
conceptswhicharebehindthecodeandstructureareexplained.Thisis
mycontribution.

IfyouwanttohaveanoverviewofUI5Toolshavealookat:UI5Tools
6of5WikiPage

Cheers,HP
Like(2)

MathiasMaerkerFeb14,20149:26AM(inresponsetoHPSeitz)

Nicelink,thanksforthat

andniceBlog
Like(1)

VishnupriyaVaradharajanMar25,20145:16AM(inresponsetoHP
Seitz)

Hi,Excellentblog!IunderstoodtheSplitAppconcepthere.Have
onequery.IhaveanapplicationwithaLoginpage,Masterpage
andDetailspage.
IfIuseSplitApp,thenmyLoginpagealsocomesasSplitView
alongwithMasterpage.

IamunsucessfulindisplayingtheLoginPagealonefirst.If
Loginsuccessful,IneedtodisplaytheMasterandDetailsas
splitview.Isthisposible?andhow?Couldyouplsthrowsome
lighthere?
Thanks
Like(1)

JeroenCustersApr15,201411:50AM(inresponseto
VishnupriyaVaradharajan)

HiHP,

Niceblog!Thanksforsharing!

@ VishnupriyaVaradharajan
IhadthesamechallengeandImanagedtosolvethis.I
startedwithanAppandloadedtheSplitAppafterthe
loginwassuccessful.Iwilltrytomakeanexampleto
sharethis.
MyappisnotbasedonthisBoilerplatetemplate.I
usedthisreference:
Documentation/AdvancedTopics/Mobile/BestPractice
SAPUI5Wiki(TIPCOREUserInterface)

Bestregards,
Jeroen
Like(1)

VishnupriyaVaradharajanApr15,201411:55AM
(inresponsetoJeroenCusters)

ThanksJeroenforthereply.Itwillbeofgreat
helpifyoucansharethatexample.

Regards,
Vishnupriya
Like(0)

JeroenCustersApr15,20143:05PM(in
responsetoVishnupriyaVaradharajan)

HiVishnupriya,

Ihavejustcreatedasampleapp
withthisfunctionality.Youcanfind
anexamplehere:SplitAppwith
Logonscreenandthesourcecode
isavailablehere:
sapui5poc/splitapp_with_loginat
masterPyramidAS/sapui5poc
GitHub.Ihopethishelps.

Regards,
Jeroen
Like(0)

http://scn.sap.com/community/developercenter/frontend/blog/2014/02/01/ui5boilerplateexplainedpart1

6/10

4/19/2015

UI5Boilerplateexplained(Part1)|SCN
VishnupriyaVaradharajanApr
16,20146:52AM(inresponse
toJeroenCusters)

ThanksalotJeroen!The
appworkedlikeCharm

Regards,
Vishnupriya
Like(0)

SagarMainkarMar25,20147:05AM

HiHP,
ThisisgreatOpenUI5beingnewweneedmoreofsuchblogsexplainingbasicstonewcomers.
Thanksagainandwaitingforthenextpartseagerly.
Like(0)

HPSeitzApr2,20141:44PM(inresponsetoSagarMainkar)

ThanksSagar,

youstillhavetowaitformynextSCNpost,sorryforthat.Onmyregularblogyoucanfinda
postaboutaddingadditionalpagestotheUI5boilerplate:AddPagetoUI5SplitApp
Boilerplate|MYPROConsulting

Perhapsthisisalsoofinterestforyou.

Cheers,HP
Like(0)

DanielRegerMar3,201510:44AM

HiHP,
oncemore:that'sareallyawesomeblogwhichhelpedmealottogetstartedwithSAPUI5!
I'mnowverycurioustoknowaboutpotentialfutureenhancements.Forexample,I'dliketoknowhow
tointegratethisappintoa"real"SAPFioriLaunchpad.Wouldbegreatiftherecouldbeasmall
tutorialhowtodoit.
ThanksandregardsDaniel
Like(1)

HPSeitzMar3,201511:12AM(inresponsetoDanielReger)

HiDaniel,

thxforyourfeedback.TherewillbeaFioriEditionoftheUI5Boilerplate.Iwillintroduce
andpresentitat

SAPInsideTrack2015Frankfurt
on21thofMarch.Soyouneedtohavesomepatience.Therearesomefundamental
changesnecessary,sothatUI5BPcanrunintheFioriLaunchpad,asithastobeself
containingSAPUI5component.
BR,HP
Like(2)

DanielRegerMar3,201511:20AM(inresponsetoHPSeitz)

Worldclass..can'twait...
Idohopeyou'llletusknowonceyoucansharetheinnovationswithus.
Thanksinadvance!
Like(0)

DeanDavisMar3,20154:53PM

I'vewrappedyourlatestcodeintoaCordovacontainertorunasanativeapponaniPad.
TheissueI'mseeingisthattheappthinks,atstartup,theiPadisintheportraitorientationnomatter
whattheactualphysicalorientationoftheiPadisatstartup.
I'veset"LaunchpadMode"tofalseintheconfig.jsfile.
IsetmyiPadsimulatortolandscapemodeandrantheCordovaapp.Attachedisthescreenshotof
theappafterstartup.Thesecondimageistheappafterrotatingtoportraitmode.
Asyoucanseetheapplicationconfigurationsarereversed.
IfIstarttheappwiththeiPadsimulatorinportraitmodetheneverythingworkswell.
I'mjuststartingonSAPUI5soIthinkImaybetoonewtofigurethisoneout,I'vetried.
Anysuggestions?

http://scn.sap.com/community/developercenter/frontend/blog/2014/02/01/ui5boilerplateexplainedpart1

7/10

4/19/2015

UI5Boilerplateexplained(Part1)|SCN

Like(0)

HPSeitzMar3,20156:25PM(inresponsetoDeanDavis)

HiDean,

strange,IguessthereasonliesinyourCordovaprojectsettingsorversion,ifIputthe
currentversion(v0.8.0)ofUI5BPwithLaunchpadMode=falseintotheCordovaContainerI
gotcorrectbehaviour.I'mworkingwithCordovav3.5.0andOpenUI5v1.26.7Mobile.

WhathappensifyouopenuptheDemoSiteinMobileSafariofyouriPad?
LinkscanbefoundintheUI5BPWikiSiteUI5Boilerplate6of5WikiPageunderSection
"PublicDemoSite"

HeremyscreenshotsfromXCodeiPadSimulator

http://scn.sap.com/community/developercenter/frontend/blog/2014/02/01/ui5boilerplateexplainedpart1

8/10

4/19/2015

UI5Boilerplateexplained(Part1)|SCN

Like(0)

DeanDavisMar3,20156:53PM(inresponsetoHPSeitz)

I'musingCordova4.3.0andOpenUI5from
"https://openui5.netweaver.ondemand.com/resources/sapuicore.js"asthesource
ofmybootstrapscript.
Yourdemofromthe6of5siteworksasexpectedonmyiPadregardlessofthe
iPadsstartingorientation.So,that'sgood.
AnychanceyoucouldsendmeazippedcopyofyouriOSprojectfolderfromyour
Cordovafolder?
Like(0)

HPSeitzMar4,20158:50AM(inresponsetoDeanDavis)

YoushouldcopyOpenUI5Mobileresourcesintoyourprojectfolder
(underwww)tobenefitfromthecontainerusecase,bundletheUI5stuff
withtheappandgainmassiveperformanceimprovement(forinitialload).

Ididnotmakeanychangesinthecordovaproject,simplycreatedwith
thecordovaCLI.TosimplyruntheUI5BPwithincordovaonlyachangein
theindex.htmlisnecessary.Therewouldbemoremodifications
necessarytomakeitlooknicerofcourse.

PleasecheckoutthenewbranchcordovaonGithub
6of5/UI5SplitAppBoilerplateatcordovaGitHub

http://scn.sap.com/community/developercenter/frontend/blog/2014/02/01/ui5boilerplateexplainedpart1

9/10

4/19/2015

UI5Boilerplateexplained(Part1)|SCN
Like(1)

DeanDavisMar5,201510:12PM(inresponsetoHPSeitz)

Thanks,thatbranchfixedmyissue.
IthinkIwastryingtostartmyUI5applicationbeforetheCordova
wrapperindicatedthatthedevicewasready.Iusedyour
initializationcodeintheindex.htmlfileandeverythinglookslike
itisworkingnow.
Like(0)

SiteIndex
Privacy

ContactUs
TermsofUse

SAPHelpPortal
LegalDisclosure

Copyright

http://scn.sap.com/community/developercenter/frontend/blog/2014/02/01/ui5boilerplateexplainedpart1

FollowSCN

10/10