Panel created dynamically is shown on XHTML but missing on getViewRoot - jsf

Question

Panel is created and added to xhtml right but when I get it using findComponent("-formBotones-wizardEventContainer").getChildren() the result is null because its container got 1 children (id=tempTextIdLayer) when really html source show several children.
I've tried a solution with visitTree() but vars target and panel are the same, wizarEventContainer, and the got only 1 children (input hidden)
HtmlPanelGroup panel=(HtmlPanelGroup)FacesContextWrapper.getCurrentInstance().getViewRoot().findComponent("formBotones-wizardEventContainer");
panel.visitTree(VisitContext.createVisitContext(FacesContext.getCurrentInstance()),new VisitCallback() {
#Override
public VisitResult visit(VisitContext context, UIComponent target) {
if (target instanceof HtmlPanelGroup) {
HtmlPanelGroup layer = (HtmlPanelGroup) target;
System.out.println("id: " + layer.getId()); //wizardEventContainer // Collect them in an arraylist orso.
}
return VisitResult.ACCEPT;
}
});
Main xhtml code
<h:form id="formBotones" prependId="true">
<h:panelGroup layout="block" id="wizardEventContainer" styleClass="wizardEventContainer">
<h:inputHidden id="tempTextIdLayer" value="#{eventProvider.tempTextIdLayer}" />
</h:panelGroup>
</h:form>
HTML when panel is added
<form id="formBotones">
<input type="hidden" value="formBotones" name="formBotones">
<div class="wizardEventContainer" id="formBotones-wizardEventContainer">
<div data-widget="widget_formBotones_text_11_0" id="formBotones-text_11_0">
<div class="ui-panel-content ui-widget-content" id="formBotones-text_11_0_content">
<span id="formBotones-editor_text_11_0">Dynamic text</span>
</div>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
</div>
<input type="hidden" value="text_11_0" name="formBotones-tempTextIdLayer" id="formBotones-tempTextIdLayer">
</div>
<input type="hidden" value="e5s4" id="javax.faces.ViewState" name="javax.faces.ViewState">
</form>
Create layers code
Here, it's a method which is setted to button's actionListener. It create a resizable and draggable panel with a span where I'll write dynamic text through javaScript.
public void createTextLayer() throws IOException{
logger.entry("EventProvider.createTextLayer()");
Application app=FacesContextWrapper.getCurrentInstance().getApplication();
UIComponent parent=FacesContextWrapper.getCurrentInstance().getViewRoot().findComponent("formBotones-wizardEventContainer");
CommandButton textBtn=(CommandButton)FacesContextWrapper.getCurrentInstance().getViewRoot().findComponent("formControl-textLayerBtn");
String finalId=null;
if(tempObjs!=null && tempObjs.size()>0 && tempObjs.containsValue("text")){
finalId="text_" + space.getIdSpace() + "_" + createFinalIndex("text");
}
else{
finalId="text_" + space.getIdSpace() + "_" + spaceBo.getDao().countSectionPages(space.getIdSpace(),4);
}
if(parent!=null){
HtmlPanelGroup panel=(HtmlPanelGroup)app.createComponent(HtmlPanelGroup.COMPONENT_TYPE);
panel.setId(finalId);
panel.setStyleClass(panel.getId());
panel.setStyle("display:inline-block;min-width:100px;min-height:100px;background:red;overflow:hidden;");
setTempTextIdLayer(finalId);
HtmlOutputText text=(HtmlOutputText) app.createComponent(HtmlOutputText.COMPONENT_TYPE);
text.setId("editor_" + panel.getId());
panel.getChildren().add(text);
Resizable resizable=(Resizable)app.createComponent(Resizable.COMPONENT_TYPE);
resizable.setFor(panel.getId());
resizable.setMaxWidth(new Integer(800));
resizable.setMaxHeight(new Integer(600));
resizable.setMinWidth(new Integer(50));
resizable.setMinHeight(new Integer(50));
resizable.setContainment(false);
resizable.setFor(panel.getId());
panel.getChildren().add(resizable);
Draggable drag=(Draggable)app.createComponent(Draggable.COMPONENT_TYPE);
drag.setFor(panel.getId());
drag.setOpacity(new Double(0.6));
drag.setContainment(new String("parent"));
drag.setSnap(true);
drag.setSnapMode(new String("outer"));
drag.setSnapTolerance(new Integer(5));
drag.setFor(panel.getId());
panel.getChildren().add(drag);
tempObjs.put(panel,"text");
}
updateViewRoot();
//Disabling text button
textBtn.setDisabled(true);
}
Add layer to container code
Here I get the container, wizardEventContainer, and I add every panel which are saved on tempObjs var.
public void updateViewRoot(){
logger.entry("EventProvider.updateViewRoot()");
UIComponent parent=FacesContextWrapper.getCurrentInstance().getViewRoot().findComponent("formBotones-wizardEventContainer");
if(parent!=null){
for (Entry<UIComponent, String> entry : tempObjs.entrySet()) {
parent.getChildren().add(entry.getKey());
}
}
}

Answer 1

As getViewRoot() only return elements which are written on xhtml file I've decided to save dynamic components in a map and when I place this dragabble component in the right site the I pass css style and other properties through managed bean properties, so every time a new panel is added on xhtml I create a new dynamic component with new properties setted and I replace for old dynamic component saved in the map.
It's a no elegant way but works fine at the moment for me.
public void saveTextLayer(){
logger.entry("EventProvider.saveTextLayer()");
List<UIComponent> list=null;
if(tempObjs.containsValue("text"))
list=getKeysByValue(tempObjs,"text");
for (UIComponent c:list){
if (c instanceof HtmlPanelGroup){
HtmlPanelGroup panel=(HtmlPanelGroup)c;
if(panel.getId().equals(getTempTextIdLayer())){
panel.setStyle(getTempCSS());
if(panel.getChildren().get(0) instanceof HtmlOutputText){
((HtmlOutputText)panel.getChildren().get(0)).setValue(getTempHTML());
}
//Adding delete layer
Application app=FacesContextWrapper.getCurrentInstance().getApplication();
HtmlPanelGroup deleteLayer=(HtmlPanelGroup)app.createComponent(HtmlPanelGroup.COMPONENT_TYPE);
deleteLayer.setId("delete_" + panel.getId());
deleteLayer.setStyle("display:inline-block;width:5px;height:5px;background:white;");
deleteLayer.setOnclick("deleteLayer($(this));");
panel.getChildren().add(0,deleteLayer);
//Replacing UIComponent
tempObjs.remove(c);
tempObjs.put(panel, "text");
updateViewRoot();
//Deleting temp vars
setTempCSS("");
setTempTextIdLayer("");
setTempHTML("");
}
}
}