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

/wp-content/uploads/2015/12/01_845625.png

We’ll be looking into the JSON Model in this post, the JSON model alone seems a bit boring…

/wp-content/uploads/2015/12/02_845626.png


Let’s expand our digging, try to find the answers to these three questions:


(1) How does the input control pick up these attributes (we’ll focus on the value attribute)?

/wp-content/uploads/2015/12/03_845657.png


(2) How does the “World” end up in the input field without we setting it explicitly?

/wp-content/uploads/2015/12/04_845658.png


(3) How come the description value get live updated when input field value changes.

/wp-content/uploads/2015/12/05_845659.png


Sounds interesting? let’s dive in 🙂


(1) How does the input control pick up these attributes (we’ll focus on the value attribute)?

/wp-content/uploads/2015/12/06_845660.png


With the knowledge we had on “how does a xml view get created?” We go straight to the XMLTemplateProcessor class’s createRegularControls method, where the input control is created. The framework calls createRegularControls with node, node holds all the attributes in its attributes property.

/wp-content/uploads/2015/12/07_845661.png


Within it, it calls parseScalarType function, to have all the attributes set to the mSettings map.

/wp-content/uploads/2015/12/08_845662.png


Then it calls the control constructor with mSettings map.

/wp-content/uploads/2015/12/09_845663.png


Which leads to the parent class ManagedObject’s constructor method, it calls applySettings where settings will be processed.

/wp-content/uploads/2015/12/10_845664.png


In the applySettings method, it extracts settings into bindingInfo object (we’ll rely heavily on this object in the next section to do the binding stuff), then it calls bindProerty method.

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


bindProperty creates a new key on the mBindingInfos map of the input control object. With that, the first question is answered.

/wp-content/uploads/2015/12/12_845666.png



(2) How does the “World” end up in the input field without we setting it explicitly?

/wp-content/uploads/2015/12/13_845667.png


We create a JSONModel object called oModel, then call the setModel method, to set the oModel object to the view, we’ll start from here.

/wp-content/uploads/2015/12/14_845668.png


Let’s take a break from the one after another screenshot, I’ll try to explain this section with this simple diagram which contains the key methods that invoked and the arguments passed in.

/wp-content/uploads/2015/12/15_845669.png


The oBinding object looks like a important middle man, let’s take a look at what it holds before ending this section. It holds the JSONModel object, the oValue which will be set to the input field, the sPath which points to the oValue in the model, the fModelChangeHandler (in the mEventRegistry) as well as some other stuff. Good enough, next question awaits, let’s continue.

/wp-content/uploads/2015/12/16_845670.png



(3) How come the description value get live updated when input field value changes.

/wp-content/uploads/2015/12/17_845672.png

Well, both value and description attributes were set with the same sPath, clearly one change would effect the other. Let’s find out how exactly that happens.


The input field change triggers the oninput event, which first checks valueLiveUpdate value (which set this attribute to true in the xml document as you may recall), then calls setProperty method.

/wp-content/uploads/2015/12/18_845673.png


setProperty calls updateModelProperty to have our JSON model object oModel’s property updated since it two way binding.

/wp-content/uploads/2015/12/19_845674.png


updateModelProperty calls setExternalValue with the changed value ‘x’.

/wp-content/uploads/2015/12/20_845675.png


setExternalValue calls setValue.

/wp-content/uploads/2015/12/21_845676.png

Which leads to have oModel to call setProperty, to set the oValue from ‘World’ to ‘x’.

/wp-content/uploads/2015/12/22_845677.png


Since oModel had been changed, the fModelChangeHandler function which listens to the model change will be involved, it calls the updateProperty method on the ‘description’ attribute, which leads its value to be changed to ‘x’ as well.

/wp-content/uploads/2015/12/23_845678.png

To summarize the last finding, looks like here’s what happened: change Input field value -> input control ‘value’ property changed -> model property updated as for two way binding -> model change handler invoked -> ‘description’ property updated -> value set.

/wp-content/uploads/2015/12/24_845679.png


The end, happy coding 🙂

To report this post you need to login first.

1 Comment

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

Leave a Reply