Using Json Model for Binding purpose.

[Former Member]

HI All,

I am new to the binding concept. I read 'OpneUI5' demokit articals on model and Ui binding.

But i am running into trouble in implementing it on real time component.

Component Background.

I am developing FontChooser component, which has FontName Select, FontSize Select, B, I  and U button, colopicker and segmnted buttons for Alignment.

The basic component is have created and its working .

The other requirement is to place this fontchooser in responsive popover. This part also done.

The problem comes when i want to preserve the state of this controls, that is FontName, FontSize, B, I , U buttons.

The requirement is user clicks on text, popover comes up. Suppose he selects 'B' button, the text becomes Bold. Then responsive popover closes. Again if user opens it, since the text is 'Bold' i want 'B' button to be pressed/selected.

My thinking is using Json model should be the way to go.I Is there any other better approach? Please let me know.

can some share example of using json model in this context. It would be great help!!

regards

Fehmina.

[Qualiture]

That is indeed the correct approach. You should bind the state of anything you want to preserve to a model.

I.e.

<HBox>
    <ToggleButton id="bold" text="Bold" pressed="{/isBold}"/>
    <ToggleButton id="italic" text="Italic" pressed="{/isItalic}"/>
    <ToggleButton id="underline" text="Underlined" pressed="{/isUnderline}"/>
</HBox>

would then be bound to your model:

var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
    isBold : false,
    isItalic : false,
    isUnderline : true
});
this.getView().setModel(oModel);

this way you preserve the state of the buttons

[Former Member]

Hi Robin,

Thank you very much for your help. I have one query I am maintaining FontChooserVO, and updating it whenever any action happens on composite control. And then sending this VO with valueCommit Event.

please see this line  this.fontVo.isBold = this._isBoldButtonStateChanged;

Can I use this FontChooserVO as model? if so how?

Here is my code. Please see its not working on this link but just to give you the idea

JS Bin - Collaborative JavaScript Debugging

Thank you very much for all your help in advance.

Regards

Fehmina.

[Qualiture]

I am not quite sure what your code is intended to do, but if you send an object via eventing, you ca of course receive that event ('subscribe') and add that object to your model.

But to me this seems a bit over-complicated, a direct model binding is much simpler to accomplish.

Or, if this is a custom control, link the control properties to your control's defined metadata properties which can be bound to your model