Question

My question is a bit complex, I have a managed bean, possibly A session scoped one, Now In this bean I retrieve information stored in a database about some elements(their width, their height, their X,Y coordinates..etc), But these elements’number are dynamically stored, meaning they don’t have a certain number, And the other thing is they also might have another element nested inside.

Like storing a div’s position and coordinates, and the p elements inside it with thier information as well, then now i want to use managed beans to create elements accordingly.

1- What should I use ? (now I am using JSF 2 Facelets and Javascript/jQuery).

2- What would be the right way to do it using the tools that you recommend.

I am looking for something that would act like this in the JSF page

Can this be done using jsf and javascript/jquery ??

for(every i in elements.div)
{
     create a div element
    then
     for(every i in div.p )
     create a p element in that div
     width of p element = p.width
    .
    .
    .
    load all element info 
}

Answer 1

You can use component binding. On your JSF page you refer your backing bean, which provides prepared JSF tree components.

<p>Here comes a dynamic content</p>
<h:panelGroup binding="#{myBackingBean.generatedElements}"/>

In your backing bean you create and nest elements as you wish

...
public class MyBackingBean {
...

private HtmlPanelGroup generatedElements = new HtmlPanelGroup();

public void init() {
     for (Element e : myElements) {
         // Take any element type you want
          HtmlOutputText subElement = new HtmlOutputText();
          subElement.setValue(e.getText());
          generatedElements.getChildren().add(subElement);
     }
}

You can also use subElement.setValueExpression method to build components with dynamic attributes defined by JSF expressions. For example for internationalization.