how to add a component to the page from a managed bean in jsf / primefaces [duplicate]

问题

A click on a commandButton should trigger an action in a ManagedBean: to add a new "outputText" component to the current page.

The overall idea is to have the page changed dynamically with user action, with server side action because new elements added to the page need data from a db to be laid out.

-> How do I add a component to the page from a managed bean in jsf / primefaces? Let's say that the elements should be added in an existing div like:

<div id="placeHolder">
</div>

(this div could be changed to a jsf panel if needs be)

Note: if alternative methods are better to achieve the same effect I'd be glad to learn about them.

回答1:

I'll provide you another solution apart from the one you posted. Basically it has a List of given outputs, which is increased everytime the button is pushed. That should render exactly the same DOM tree as the solution you stated:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
    <title>Tiles</title>
    <h:outputStylesheet name="css/320andup_cle.css" />
</h:head>
<h:body>
    <h:form>
        <h:commandButton actionListener="#{bean.createNewTile}" title="new"
            value="new" />
    </h:form>

    <h:panelGroup layout="block" id="tiles">
        <ui:repeat var="str" value="#{bean.strings}">
            <h:panelGroup>
                <h:outputText styleClass="tile" value="#{str}" />
            </h:panelGroup>
        </ui:repeat>
    </h:panelGroup>
</h:body>
</html>

@ManagedBean
@SessionScoped
public class Bean {

    List<String> strings = new ArrayList<String>();

    public List<String> getStrings() {
        return strings;
    }

    public void createNewTile() {
        strings.add("output");
    }
}

Apart from being much simpler IMHO, it has a main advantage: it doesn't couple your server side code to JSF implicit API. You can change the @ManagedBean annotation for @Named if you want it to be a CDI managed bean.

回答2:

The solution:

This is a jsf page with a button creating a new div each time it is clicked:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Tiles</title>
        <h:outputStylesheet name="css/320andup_cle.css" />
    </h:head>
    <h:body>
        <h:form>
            <h:commandButton actionListener="#{bean.createNewTile()}" title="new" value="new"/>
        </h:form>

        <h:panelGroup layout="block" id="tiles">
        </h:panelGroup>    
    </h:body>
</html>

The Managed Bean:

@Named
@SessionScoped
public class Bean implements Serializable {

    private UIComponent found;

    public void createNewTile() {

        HtmlPanelGroup div = new HtmlPanelGroup();
        div.setLayout("block");


        HtmlOutputText tile = new HtmlOutputText();
        tile.setValue("heeeeeRRRRRRRRRRRRRR         ");
        tile.setStyleClass("tile");
        div.getChildren().add(tile);

        doFind(FacesContext.getCurrentInstance(), "tiles");
        found.getChildren().add(div);

    }

    private void doFind(FacesContext context, String clientId) {
        FacesContext.getCurrentInstance().getViewRoot().invokeOnComponent(context, clientId, new ContextCallback() {
            @Override
            public void invokeContextCallback(FacesContext context,
                    UIComponent component) {
                found = component;
            }
        });
    }
}

See this app built with this logic of dynamically generated components: https://github.com/seinecle/Tiles

来源：https://stackoverflow.com/questions/20931735/how-to-add-a-component-to-the-page-from-a-managed-bean-in-jsf-primefaces

标签

jsf

jsf-2

primefaces