My Journey to UI5 - Part 1

[SimoneMilesi]

A little preamble

I’m writing this document more for my help in keep track of my success and, even more, my errors, following Fiori’s master rule “fall first, fall often”.

I’m using a real case from my company to try UI5: it’s a bit scaring since if things will not sort out well, it will be a real problem!

This will not be a pure technical blog, but a more descriptive one, with links over links to the sources I used.

The tech parts will follow in later entries.

 

My background

When I read about UI5, I was scared. Literally.

It has been almost 12 years since I developed anything for the web (in early 2Ks I worked with PHP) and surely I do not remember the last time I worked with JavaScript!

So it has been mandatory and useful get the bases to avoid running around like a drunken chicken trying to understand what a single row of code does.

There are a bunch of sources where you can learn and refine your JS skill:

1. https://developer.mozilla.org/en-US/Learn/JavaScript


2. http://javascriptissexy.com/how-to-learn-javascript-properly/


3. http://www.w3schools.com/js/


4. https://www.codecademy.com/


5. https://mva.microsoft.com/training-topics/web-development#!level=100&jobf=Developer&lang=1033

 

I focused on Codeacademy (I heard a lot of stories about it and I was curious to try it out) and JavascriptIsSexy (hot name!).

I know the choice is not brain-guided, but it ended up with me understanding the basics and the core concepts of JavaScript so I’m pretty satisfied.

I encourage everyone to try out as many tutorials and site as possible to find which methodology and style fit better for herself.

 

Learn UI5’s basics

I was aware about the difference between OpenUI5 and SAPUI5 and, even if in a far away future my company will probably require to switch to OpenUI5, I sticked as starting point with SAPUI5 due the larger (and more familiar to me) community on SCN.

So I downloaded Eclipse ADT with all the option except the one for SAP Hana (we are on 7.31) and then… well, where I start from?

 

The best way I found out to learn something about UI5 has been following the tutorial "Walkthrough" https://sapui5.netweaver.ondemand.com/#docs/guide/3da5f4be63264db99f2e5b04c5e853db.html

And with “following the tutorial” I mean, following it step by step, deleting everything and trying to redo it by myself, adding or removing the pieces just to try.

This procedure (“fall first, fall often”, do you remember?) reminded me when I was a child and play with Lego: the first couple of times I followed the instructions, then I always tried to build my galleon or my spaceship just “guessing” the right way.
I do not need to say how many times I failed and throw everything away (yes, I’m still talking about my first app), but I think that’s the best way to catch up with the mechanisms of something.

It has been hard, really hard due my steamy temper, discovering that my ABAP skill were useless in this world and that I keep crushing and crashing against silly things I never ever cared about (because with common SAPGUI and ABAP objects/FM we many nice features out of the box while with UI5 you have to think about them).

But they really were? No, as you'll find out in later blogs if you find interesting following them, exactly the opposite.

 

O Data, OData, wherefore art thou OData?

Even if you can build a standalone app without any connection with SAP, we all know that we HAVE to communicate with SAP, reading and writing data, so, when I somehow mastered the basic concepts of MVC and UI5, I moved to study how SAP can generate an OData service.

After a bit of googling, I found this guide (maybe not so recent since it’s from 2012) which is written really well by bertram.ganz and bernhard.siewert

http://sapassets.edgesuite.net/sapcom/docs/2012/11/44779e8c-5b7c-0010-82c7-eda71af511fa.pdf

If you, like me, are new to OData Services, follow this guide and in a couple of hours you’ll have your Service ready and running.

Another guide, a bit more recent, I used a lot is http://scn.sap.com/docs/DOC-61821 from  mohamed.meeran3

 

Both of the guides rely on FMs to manage the data retrieval and update and, even if there is nothing wrong with them, I looked for something more… nice: http://www.abap-developers.com/2014/07/simple-openui5-application-i-how-to-create-odata-model-using-...

peter.marcely ’s guide showed me how to bypass the FM and to use directly the classes generated for the Services.

I found it better, since I got less objects to manage (a dictionary structure and the classes) and I stick with OOP which is always nice in my opinion.

 

I got the ropes now, and all the tools available for my first app: I got my Lego’s pieces, all scattered around, a full set of instructions and a monster headache because I do not know from where to start…
Here you can find my Part 2 

Here you can find my Part 3