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 be looking into the JSON Model in this post, the JSON model alone seems a bit boring...
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)?
(2) How does the “World” end up in the input field without we setting it explicitly?
(3) How come the description value get live updated when input field value changes.
Sounds interesting? let’s dive in :smile:
(1) How does the input control pick up these attributes (we’ll focus on the value attribute)?
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.
Within it, it calls parseScalarType function, to have all the attributes set to the mSettings map.
Then it calls the control constructor with mSettings map.
Which leads to the parent class ManagedObject’s constructor method, it calls applySettings where settings will be processed.
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.
bindProperty creates a new key on the mBindingInfos map of the input control object. With that, the first question is answered.
(2) How does the “World” end up in the input field without we setting it explicitly?
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.
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.
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.
(3) How come the description value get live updated when input field value changes.
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.
setProperty calls updateModelProperty to have our JSON model object oModel’s property updated since it two way binding.
updateModelProperty calls setExternalValue with the changed value ‘x’.
setExternalValue calls setValue.
Which leads to have oModel to call setProperty, to set the oValue from ‘World’ to ‘x’.
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.
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.
The end, happy coding :smile:
- SAP Managed Tags:
1 Comment
