Skip to Content

Welcome to my SAPUI5 Walkthrough, And Dive In blog series, where I’ll not only walkthrough the tutorial, but dive in, to explore the magic behind SAPUI5. Buckle up and sit tight, it’s gonna be a bumpy ride as I’m no expert in any way shape or form, just a humble learner who loves coding and likes to get to the bottom of things =。=

We’ll continue our journey with step 4 of the walkthrough. The XML view introduced is very simple, which makes a good example for us to take a closer look at how the XML view is created behind the scene 🙂

/wp-content/uploads/2015/11/01_830827.png

Here’s our index.html, where we instantiate a XML view with the view configuration object which holds the view name.

/wp-content/uploads/2015/11/02_830828.png

Our framework source code treasure hunt starts here.

/wp-content/uploads/2015/11/03_830829.png

Which leads us to the factory function of sap.ui.view.

/wp-content/uploads/2015/11/04_830830.png

Where it prepares the parameters, moves our configuration object from sId to vView to oView.

/wp-content/uploads/2015/11/05_830831.png

It adds a type (XML) to the oView configuration object.

/wp-content/uploads/2015/11/06_830832.png

Then, base on the view type, it instantiates a sap.ui.core.mvc.XMLView with the configuration object, and assigns it to our view object.

/wp-content/uploads/2015/11/07_830833.png

If we step into it, we’ll be taken to the constructor method of the Control class, you may wonder what XMLView has anything to do with Control, turns out XMLView was extended from Control, well, not exactly, before we dive into the source code, let’s take a high-level look at the inheritance chain of the classes we’ll about to get into:

sap.ui.core.mvc.XMLView

                    |

               extend

                    |

sap.ui.core.mvc.View

                    |

               extend

                    |

sap.ui.core.Control (base class for Controls, creates and initializes a new control with the given sId and settings)

                    |

               extend

                    |

sap.ui.core.Element (base class for UI elements, constructs and initializes an UI Element with the given sId and settings)

                    |

               extend

                    |

sap.ui.base.ManagedObject (base class that introduces some basic concepts like state management or data binding)

                    |

               extend

                    |

sap.ui.base.EventProvider (provides internal eventing facilities for objects)

                    |

               extend

                    |

sap.ui.base.Object (base class for all SAPUI5 Objects)

Alright, with this information in mind, let’s continue with our source code debugging, Control’s constructor calls Element’s constructor with the configuration object as the argument. (from this point onwards, you’ll probably find a lot of similarity between the following content and second part of my last blog – how does a control get created, well, view and control they are all came from the same chain after all. I do think I explain things better this time around : )

/wp-content/uploads/2015/11/08_830834.png

/wp-content/uploads/2015/11/09_830835.png

Element’s constructor calls ManagedObject’s constructor.

/wp-content/uploads/2015/11/10_830836.png

ManagedObject’s constructor calls EventProvider’s constructor.

/wp-content/uploads/2015/11/11_830837.png

EventProvider’s constructor calls BaseObject’s constructor.

/wp-content/uploads/2015/11/12_830838.png

BaseObject’s constructor, end of the chain, it throws error if the view we’re creating is not a instance of the BaseObject, other than that, it does not do anything else.

/wp-content/uploads/2015/11/13_830839.png

After that, we get pop back to the EventProvider’s constructor, it creates the mEventRegistry map and sets it to an empty object.

/wp-content/uploads/2015/11/14_830840.png

Then, we’re taken another stack back, to the ManagedObject’s constructor, where quite a few things happen. First, it shifts the sId (configuration object) to mSettings, and sets our view’s sId to null since there’s no sId given explicitly.

/wp-content/uploads/2015/11/15_830841.png

Then it generates a sId for the view object.

/wp-content/uploads/2015/11/16_830842.png

It creates a bunch of properties and sets them with default values, we see a lot of familiar faces here, like the properties map, aggregations map, model object, binding related properties, turns out this is where they were born 🙂

/wp-content/uploads/2015/11/17_830843.png

Then it registers the object in the Core.

/wp-content/uploads/2015/11/18_830844.png

By calling the registerElement method.

/wp-content/uploads/2015/11/19_830845.png

Which essentially adds our view object to the global mElements map.

/wp-content/uploads/2015/11/20_830846.png

After the registration, it calls InitCompositeSupport, which initializes the view and connects it to the controller.

/wp-content/uploads/2015/11/21_830847.png

There’s 4 method / function calls within InitCompositeSupport, we’ll focus on the first 2 calls (the last 2 does not really do anything in our case).

/wp-content/uploads/2015/11/22_830848.png

Instead of showing screenshot after screenshot, which will most likely get people confused, I’ll try to explain what the first 2 calls in below format, hopefully the hierarchy layout plus my super expressive argument names plus right amount of comments could make things easier 🙂


initViewSettings(mSettingsAKAconfigurationObject)
     |—> jQuery.sap.loadResource(“App.view.xml”).documentElement // to loads in our xml document then sets its content to xmlContent
     |—> fnProcessView
          |—> XMLTemplateProcessor.parseViewAttributes(xmlContent, viewObject, mSettings) // to parse only the attributes of the XML root node
fnInitController()
     |—> createAndConnectController(viewObject, mSettings) // which does nothings in our case
     |—> onControllerConnected(oControllerWhichDoesNotExistInOurCase)
          |—> ManagedObject.runWithPreprocessors()
               |—> XMLTemplateProcessor.parseTemplate(xmlContent, viewObject) // to parse a complete XML template definition the full node hierarchy, it returns an array containing Controls and/or plain HTML element strings
                    |—> parseChildren(xmlNode)
                         |—> parseNode(childNode)
                              |—> createControlOrExtension(childNode)
                                   |—> createRegularControls(childNode) // to create a plain and simple regular UI5 control
                                        |—> handleChildren(childNode, oDefaultAggregation, mAllAggregations) // there’s no children to be handled in our case
                                             |—> createControls(node)
                                                  |—> createControlOrExtension(node) // recursive call, it gets in a loop to have all UI5 controls required for the application created out of children nodes and their aggregations
                              |—> oView.addAggregation("content”, oChildControlJustCreatedAndReturned)




Now, we’re back. Then we continue with runPreprocessor (there’s no preprocessor registered in our case).

/wp-content/uploads/2015/11/23_830849.png

It calls fireAfterInit, which does not do anything neither in our case, this is the end of InitCompositeSupport.

/wp-content/uploads/2015/11/24_830850.png

After InitCompositeSupport, the init method will be called if it exists which is not in our case, then, it applies settings, sets all properties, aggregations, associations and event handlers as given in.

/wp-content/uploads/2015/11/25_830851.png

It only does one thing in our case, which is to set the viewName property.

/wp-content/uploads/2015/11/26_830852.png

In the end, it returns the view object.

/wp-content/uploads/2015/11/27_830853.png

And lastly, it places it at HTML document body.

/wp-content/uploads/2015/11/28_830854.png

The End 😀

Not yet…

With our findings above, we now know how the control object was created out of xml, but something seems missing between the control object and what we see on the web page, hmm…right, HTML, thanks to Mr. Sankara Rao Bhatta’s question, let’s continue our journey, to find out how does the control object get turn into HTML.

It’s actually simpler than you may think, allow me to dive into it with a new example.

Here we have an UI5 button control. (not sure if my post had reached the limit of images can be inserted, I’m not able to insert any new images…I’ll upload the images onto my dropbox, and insert the public links here, please let me know if you can not see them).

https://dl.dropboxusercontent.com/u/10907694/UI5/theAcceptButton.png

Here’s its underlying HTML we see in the Chrome elements tab. Which part of the UI5 framework code is responsible for creating these HTML markups?

https://dl.dropboxusercontent.com/u/10907694/UI5/html.png

And…here’s the ‘man’ of the hour, the renderControl method.

renderControl.png

Once we get the right renderer object, the render method will be invoked upon it.

/wp-content/uploads/2015/11/render_857842.png

Within the render method, things are pretty straight forward.

https://dl.dropboxusercontent.com/u/10907694/UI5/buttonRenderStart.png

And here’s the end of the HTML button element markup.

https://dl.dropboxusercontent.com/u/10907694/UI5/buttonRenderEnd.png

THE END 😀

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. sankara rao bhatta

    Excellent blog. one question here. browser only understands HTML right? somewhere in the code there should  be some conversion of what we entered in XML view into plain HTML code inorder to render the ui elements on the browser?  or Am i missing something?

    (0) 
    1. Ji Wu Post author

      Thanks sankara for your great question, I’ve updated the post, check it out, see how does the UI5 control created out of xml get turn into HTML 🙂

      (0) 
  2. Yoppie Ariesthio

    Hi Ji Wu,

    Awesome, you open it up one by one with console.

    Do you have any idea how to debug when we develop sapui5 application? It’s pretty hard for me if i just read docs API and read the red text through console chrome

    Than you for sharing Ji Wu 🙂

    (0) 
    1. Ji Wu Post author

      Hello Yoppie, I tried webstorm but still came back to Chrome at end of the day, Chrome is our best friend when it comes to debugging as far as I can tell 🙂 Happy New Year~

      (0) 

Leave a Reply