SAPUI5 walkthrough step 5 – controllers, dive in – how does a controller get created?

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 =。=

The source code world is waiting. Ready? Go!

Questions answered in the following section:

– Where does the framework pick up our custom defined controller name?

– How does the framework load in our controller code and execute it?

In order to explain how does a controller get created, we’ll need to get back the the initViewSettings process (please refer to my last post for detail information on how we get to this point), the XML view root nodes will be parsed, that’s what the screenshot below is doing, and also, that’s also where the framework picks up our controller name, this is the starting point of this post.

After that, it moves on to init controller with the fnInitController function, where createAndConnectController will be called with the view object, and the view configuration object (settings) as its arguments.

It calls the factory function.

Within the factory function, it first requires the controller by its name.

It loads in our code (for module loading and executing, please see my first and second post for more detail information).

Then it executes it.

By calling window.eval.

Questions answered in the following section:

– How does sap.ui.define work?

– How does extend method work?

– What does the prototypical inheritance really look like between sap.ui.core.mvc.Controller (parent) and sap.ui.demo.wt.controller.App (child)?

With the module executed, it takes us back to App.controller.js

Next, we dive into the sap.ui.define implementation, sap.ui.define defines a Javascript module with its name, its dependencies and a module factory function.

It first shifts parameters, then converts resource path (sap/ui/demo/wt/controller/App.controller.js) to module name, then declares the module and assigns it to variable oModule.

Then it calls requireAll to resolve the dependencies, we only have one here, the sap.ui.core.mvc.Controller

Its invokes the callback function on aModules, which is a array that holds one item, the constructor of sap.ui.core.mvc.Controller

This is what happen at the end of the callback.

}

vFactory.apply(window, aModules) is essentially:

ControllersConstructor.extend(“sap.ui.demo.wt.controller.App”, { ... });

The extend creates a new subclass of class sap.ui.core.mvc.Controller with name sap.ui.demo.wt.controller.App and enriches it with the information contained in oSCClassInfo, which calls Metadata.createClass method, which returns the fnClass in the end.

Let’s take a look at the prototypical inheritance between the parent “class” sap.ui.core.mvc.Controller and the child “class” sap.ui.demo.wt.controller.App, ( apologise for my bad drawing : )

To verify it in the console, looks like that’s what we expect.

That concludes the sap.ui.define method, our module is now successfully defined. (module state will be set to 3 – READY)

Questions answered in the following section:

– How does the factory function sap.ui.controller work?

– How does view connect to controller and controller connect to view?

Now we have our controller “class”, we’ll need the controller instance, and here’s how the framework does it. It calls the sap.ui.controller, the factory function, which creates an instance of an already defined controller class.

With oController, the controller instance created, it then bounce back to createAndConnectController (the 3rd screenshot as you may recall) where the view is connected to the controller, and controller is connected to the view.

Once connected, it returns the view and place it on the page. (you can find more detail information from my last post about what exactly happen between createAndConnectController and view is returned).

The end 🙂