Custom component development
Hi there,
I am having problem with my simple custom component which consists of two a4j buttons. I have left out most of the code for simplicity. The output is quite strange. Two buttons are rendered without any html layout, and after that the same buttons are rendered again but this time, the table layout defined in encodeEnd method is also outputed. I have attached output further down the post. What am I doing wrong? Is it even possible to create custom components this way or do I have to use CDK?
public class UIButtonPanel extends UICommand implements ActionListener {
public static final String COMPONENT_TYPE = "hr.virtus.ButtonPanel";
@Override
public void encodeEnd(FacesContext context) throws IOException {
if (task != null && getChildCount() == 0) {
generateButton("btnSave", "Save");
generateButton("btnCancel", "Cancel");
}
ResponseWriter out = context.getResponseWriter();
out.startElement("div",this);
out.writeAttribute("id", getClientId(context), null);
if (getChildCount() != 0) {
out.write("<table cellpading='4' cellspacing='0'>");
for (Object button : getChildren()) {
out.write("<tr><td>");
((UIComponent)button).encodeEnd(context);
out.write("</td></tr>");
}
out.write("</table>");
}
out.endElement("div");
}
@SuppressWarnings("unchecked")
private void generateButton(String id, String label) {
HtmlAjaxCommandButton btn = new HtmlAjaxCommandButton();
btn.setId(id);
btn.addActionListener(this);
btn.setValue(label);
btn.setStyle("width:150px");
getChildren().add(btn);
}
public void processAction(ActionEvent actionEvent)
throws AbortProcessingException {
}
}
Output...
<html>
<head>
<script type='text/javascript' src='/alfresco/faces/a4j_3_1_0org.ajax4jsf.javascript.AjaxScript'></script>
</head>
<body>
<td valign="top"><input id="browse:btnSave" name="browse:btnSave"
onclick="A4J.AJAX.Submit('_viewRoot',null,event,{'parameters':{'browse:btnSave':'browse:btnSave'} ,'actionUrl':'/alfresco/faces/jsp/task-management/test.jspx'} );return false;"
value="Save" style="width: 150px" type="button" /><input id="browse:btnCancel" name="browse:btnCancel"
onclick="A4J.AJAX.Submit('_viewRoot',null,event,{'parameters':{'browse:btnCancel':'browse:btnCancel'} ,'actionUrl':'/alfresco/faces/jsp/task-management/test.jspx'} );return false;"
value="Cancel" style="width: 150px" type="button" />
<div id="button-panel">
<table cellpading='4' cellspacing='0'>
<tr>
<td><input id="browse:btnSave" name="browse:btnSave"
onclick="A4J.AJAX.Submit('_viewRoot',null,event,{'parameters':{'browse:btnSave':'browse:btnSave'} ,'actionUrl':'/alfresco/faces/jsp/task-management/test.jspx'} );return false;"
value="Save" style="width: 150px" type="button" /></td>
</tr>
<tr>
<td><input id="browse:btnCancel" name="browse:btnCancel"
onclick="A4J.AJAX.Submit('_viewRoot',null,event,{'parameters':{'browse:btnCancel':'browse:btnCancel'} ,'actionUrl':'/alfresco/faces/jsp/task-management/test.jspx'} );return false;"
value="Cancel" style="width: 150px" type="button" /></td>
</tr>
</table>
</div>
</td>
<!-- MYFACES JAVASCRIPT -->
</body>
</html>
