PDA

View Full Version : ui creation from json data



efendy
15 Oct 2008, 3:21 PM
hi

I have own UI definitions on xml files. I am generating this xml files with own eclipse design studio plugin. I am rendering this XML files for creating Swing UI and qooxdoo UI. (Crossplatform UIs) Now I want to implement GXT render. I started with get xml data in json then creating button and textboxes.

I have a json data like this (my servlet renders xml then pushes this json data)

{"root":[{"name":"textbox"},{"name":"button"},{"name":"textbox"}]}

(will be have advanced features; height,width, location, etc)

I am creating a panel with this definition when pressed a button. Then I am adding this panel to RootPanel.

My code is;


public class MyCallback implements AsyncCallback {

public void onFailure(Throwable caught) {
// TODO Auto-generated method stub

}

public void onSuccess(Object result) {

List<TextField> textFieldList=new ArrayList<TextField>();
List<Button> buttonList=new ArrayList<Button>();
List<TextArea> textAreaList=new ArrayList<TextArea>();
RootPanel.get().add(panel);

for (BaseModelData item: ((BaseListLoadResult<BaseModelData>)result).getData()) {
if (item.get("name").toString().equals("textbox"))
{
textFieldList.add(new TextField());
}
if (item.get("name").toString().equals("button"))
{
buttonList.add(new Button("ad"));
}
if (item.get("name").toString().equals("textarea"))
{
textAreaList.add(new TextArea());
}



}
for (int i=0;i<textFieldList.size();i++)
{
panel2.add(textFieldList.get(i));
}

for (int s=0;s<buttonList.size();s++)
{
panel2.add(buttonList.get(s));
}

for (int k=0;k<textAreaList.size();k++)
{
panel2.add(textAreaList.get(k));
}

RootPanel.get().remove(panel);
RootPanel.get().add(panel2);
}

Is there any good idea better than (if textbox, if textarea, if bla bla bla...) for creating widgets?

and Is there any problem with GXT&GWT creating UI with json data like this?

gslender
15 Oct 2008, 8:11 PM
hi efendy,

i'd probably suggest you consider nesting the objects as this is the natural way things are laid out and added to the page - ie

viewport
-> layout
- - > container
- - - > layout
- - - > field
- - - > field
- - - > field
- - - > button
- - - - > listener

then you'd iteratively call something like WidgetBuilder which would have all ui objects etc and based on the json, and parent object parse the inner json, which if it had children, call itself again with a new parent and parse again etc...

hard to explain, but not as you have below all adding to the root... you need to add or apply an action to the parent object (it might be a layout or adding a listener or something etc).

hope that helped?

cheers,
grant