problem in aligning dynamic UI with the static UI

[Former Member]

Hi All,

I have problem in aligning dynamic UI with the static UI, I am using Matrix layout.

Static fields are spread over 2 colums and 3 rows:

lableA SPACE input field SPACESPACE lable B SPACE input field

lableC SPACE dropdown SPACESPACElableD SPACE dropdown

lableE SPACE dropdown SPACESPACElableF SPACE dropdown

Now when a value is selected in C, than E becomes visible, and depending on the values selected in E, there are dynamic UI generated, i.e dynamic lables and depending on some validation it will be either a dropdowns or input fiels or both.

at run time screen is like this:

lableA SPACE input field SPACESPACE lable B SPACE input field

lableC SPACE dropdown SPACESPACElableD SPACE dropdown

lableE SPACE dropdown SPACESPACElableF SPACE dropdown

dynaSPACEdropdown

dynbSPACEinput field

if I change my selection in E than layout looks like:

lableA SPACE input field SPACESPACE lable B SPACE input field

lableC SPACE dropdown SPACESPACElableD SPACE dropdown

lableE SPACE dropdown SPACESPACElableF SPACE dropdown

dynaSPACESPACEdropdown

dynbSPACESPACEinput field

Requirment: I need all the lables as well as dropdown/ input fiels in line with the static fields irrespective of my selection in E.

Something like this:

lableA SPACE input field SPACESPACE lable B SPACE input field

lableC SPACE dropdown SPACESPACElableD SPACE dropdown

lableE SPACE dropdown SPACESPACElableF SPACE dropdown

dyna SPACEdropdown

dynbSPACESinput field

dyncSPACESdropdown

All this elements are in a group and that group has 2 transparent containers, 1 for static and for holding dynamic UI.

I tried playing with the container properties, and also tried fixing width of dynamic UI but still the alignment issue is encountered.

Can U guys plz give in ur valuable inputs as i need to fix this urgently.

Regards,

JJ

[Former Member]

Hi,

MatrixLayout will always set the width of the columns based on the largest element inside your Matrix container. Probably having all of them inside the same would do the trick.

Btw, how can you set the MatrixHeadData property in the IWDLabel object? - Can you post the code?

Cheers,

Daniel

[Former Member]

IWDMatrixHeadData hd = (IWDMatrixHeadData) label.createLayoutData(IWDMatrixHeadData.class);

Armin

[Former Member]

Hi Armin,

If I put the dynamic UI in the parent containet (static & Dynamic both in one container) than I am not able to control the visibilty of dynamic UI & also before placing the dynamic UI in container I am doing destroyAllChildren so if I place the dyn UI in parent container what happens is that all the static UI are destroyed and only dynamic UI are visible.

I need static UI visible all the time and at the same time I need to control dyn UI visibility.

I have creted a context attribute of type visible and it is binded to visibility property of the Dyn container, hence functionaly its wrking fine but the layout is a PROBLEM.

I tried one more thing: I created a Group and placed all static UI in it & than created nested group (header invisible) and in code I am adding all the dyn UI in this dyn group & I ahve fixed the width of dyn labels to 156px (after lot of trail n error) , so now i am getting everything fine but still slight aligment is required on extreme left (this space in left is probably bcos I am using a group inside a group)

but any wrk around???

1 more thing can I bind the dynamic input fields onenter event to an action (basically i am doing search application), i binded static input fields onenter to search action but unable to bind for dyn input fiels??

Regards,

JJ

[Former Member]

One possibility would be to use IWDView.resetView() to clean-up all dynamically created view elements. Another possibility would be to insert some placeholder (e.g. an InvisibleElement) inside the container and use this as a marker for the end of the static elements. Then you would not use container.destroyAllChildren() but loop over all children after the placeholder and only destroy these.

For controlling the visibility you could bind the "visible" property of each dynamically added element to the same context attribute.

In release 7.1 you can use a ColumnLayout to align view elements that live inside different containers or even views/component instances.

Using a fixed width for labels is a bad idea (think of localization).

To assign an action to a programmatically created input field, just use

inputField.setOnAction(wdThis.wdGet<ActionName>Action());

Armin

[Former Member]

Hi Armin,

Can you please elaborate your solution ?, I do not have an idea of InvisibleElement & IWDView.resetView() ,

If you can give me the exact pointer than it would be great and a good learning exp. for me.

Thanks for the action assignment part, it worked.

if (wdContext.nodeMaterialClass().size() > 0 && wdContext.currentContextElement().getActionMatCls()) {

if (wdContext.currentMaterialClassElement().getMaterialClass_Description() != null || !wdContext.currentMaterialClassElement ().getMaterialClass_Description().equalsIgnoreCase(" ")) {

IWDGroup Searchgroup = (IWDGroup) view.getElement("DynGroup");

Searchgroup.destroyAllChildren();

view.getContext().reset(false);

for (int i = 0; i < wdContext.nodeMaterialCharateristcs().size(); i++) {

//this for label

IWDLabel CharLabel = (IWDLabel) view.createElement(IWDLabel.class, "label" + i);

CharLabel.setText(wdContext.nodeMaterialCharateristcs().getMaterialCharateristcsElementAt(i).getDescr_Char());

CharLabel.setDesign(WDLabelDesign.EMPHASIZED);

CharLabel.createLayoutData(MatrixHeadData.class); CharLabel.setWidth("154px"); Searchgroup.addChild(CharLabel);

further there are conditions to create either dropdown or input field

Can you please point where and how to apply your solution.

Regards,

JJ

[Former Member]

IWDView.resetView() resets the complete view to the design-time state. That would be sufficient if you have only a single place with dynamically created view elements and you want to clear that completely.

If you need more fine-grained control you can use separate container (with the mentioned layout issue) or you can mark the position inside the container where the dynamic part begins. You could either compute the corresponding index and store it in the context or you could place e.g. an InvisibleElement in the container and update only the children of the container after that marker.

Something like

wdDoModifyView()
{
  if (firstTime)
  {
    IWDUIElementContainer container = (IWDUIElementContainer) view.getElement("ContainerID");
    wdContext.currentContextElement().setDynamicAreaStart(container.numberOfChildren());
    return;
  }
  if (<dynamic part needs update>)
  {
    IWDUIElementContainer container = (IWDUIElementContainer) view.getElement("ContainerID");
    for (int i = wdContext.currentContextElement().getDynamicAreaStart(); i < container.numberOfChildren(); ++i)
    {
      container.getChild(i).destroy();
    }
    IWDLabel label = (IWDLabel) view.createElement(IWDLabel.class, null);
    container.addChild(label); /* first label in dynamic area */
    ...
  }
}

Armin

[Former Member]

Hi,

I would simply use a prefix for all Dynamic created UI Elements. Something like view.createElement("dynLabel_" + Index), view.createElement("dynElement_" + Index) - Index would be the same index in your creation loop.

It's a very controlled situation. You have a pair of Label / Input. Just create a Method to destroy anything that starts with "dynLabel_" (Index) and "dynElement_" - You can start from 0 and increase till you have a null in view.getElement.

Or, you can have a Context Property and assign your "Material Properties Size" to that, so you know how many Elements you need to destroy.

Regards,

Daniel

[Former Member]

Or you could give the last element in the container that is created at design-time a special ID, say "lastStaticField", and use code like

wdDoModifyView()
{ 
  if (<dynamic area should be updated>)
  {
    IWDUIElementContainer container = (IWDUIElementContainer ) view.getElement("ContainerID");
    IWDUIElement lastStaticChild = (IWDUIElement ) view.getElement("lastStaticField");
    int dynamicAreaStart = container.indexOfChild(lastStaticChild);
    for (int i = dynamicAreaStart + 1; i < container.numberOfChildren(); ++i)
    {
      container.getChild(i).destroy();
    }
    /* add dynamic elements to container ... */
  }
}

Armin

[Former Member]

I'd go for this last Armin suggestion..

[Former Member]

Hi Armin,

Thanks a ton !! for your response, I am trying your recently suggested solution.

points awarded!!

Regards,

JJ

[Former Member]

Don't use separate containers for the static and dynamic UI elements if you need horizontal alignment. Just put them inside a common container and use the same layout data for the dynamic elements in a column that is used for the static UI elements in the same column.

Armin