Właśnie modyfikowanie DOM w JSF jest fajowe, bo robi się to tak jakby się programowało aplikację desktopową. Tutaj krótki i prosty przykład dodawania/usuwania/aktualizowania komponentów (użyłem 'HTML5 friendly markup'):
<form jsf:id="fajnyForm" >
<input jsf:id="addBaton" type="submit" value="dodaj na koniec" >
<f:ajax event="click" listener="#{simple.ajaxDodajNaKoniec}" render="lista" />
</input>
<input jsf:id="delBaton" type="submit" value="usun ostatni" >
<f:ajax event="click" listener="#{simple.ajaxUsunOstatni}" render="lista" />
</input>
<span jsf:id="najezdzca">
najedz mnie
<f:ajax event="mouseover" render="czas" />
</span>
</form>
lista: <span jsf:id="lista" ></span>
<br />
<span jsf:id="czas" >sekundy #{simple.czas}</span>
@Named
@ViewScoped
public class Simple implements Serializable
public void ajaxDodajNaKoniec( AjaxBehaviorEvent abe ){
HtmlOutputText newText = new HtmlOutputText();
newText.setValue( (new Date().getSeconds())+" " );
FacesContext.getCurrentInstance().getViewRoot().findComponent("lista").getChildren().add( newText );
}
public void ajaxUsunOstatni( AjaxBehaviorEvent abe ){
List<UIComponent> children = FacesContext.getCurrentInstance().getViewRoot().findComponent("lista").getChildren();
if(children.size()>0)
children.remove( children.size()-1 );
}
public String getCzas(){
return (new Date().getSeconds())+"";
}
}
Jeszcze można chyba wykorzystać bindowanie komponentu (atrybut 'binding' tagów).
Jeżeli chodzi o canvas... myślę, że trzeba by go samemu oprogramować/opakować w komponent JSF, ale pomysł jest fajny :)