Permalink
Browse files

Render the skeleton of the MultipleSelect on the server, fill in the …

…details on the client
  • Loading branch information...
1 parent de5a6b2 commit 6516148e1963af6ddea7e126027fb78685ff63f1 @hlship committed Mar 17, 2011
@@ -9,6 +9,7 @@
import org.apache.tapestry5.annotations.Environmental;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.Parameter;
+import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.corelib.components.Palette;
import org.apache.tapestry5.dom.Element;
import org.apache.tapestry5.ioc.annotations.Inject;
@@ -53,6 +54,9 @@
@Inject
private ComponentResources resources;
+ @Property(write = false)
+ private String clientId, name;
+
public static class ProcessSubmission implements ComponentAction<MultipleSelect>
{
private static final long serialVersionUID = -5387860921749570953L;
@@ -62,7 +66,6 @@
public ProcessSubmission(String name)
{
this.name = name;
-
}
@Override
@@ -73,28 +76,24 @@ public void execute(MultipleSelect component)
}
- boolean beginRender(MarkupWriter writer)
+ void setupRender()
{
- String clientId = jss.allocateClientId(resources);
-
- String name = formSupport.allocateControlName(resources.getId());
-
- Element element = writer.element("div", "class", "tx-multiselect", "id", clientId);
+ clientId = jss.allocateClientId(resources);
- if (className != null)
- element.addClassName(className);
-
- writer.end();
+ name = formSupport.allocateControlName(resources.getId());
writeJavaScript(clientId, name);
+ }
- return false;
+ public String getComputedClassName()
+ {
+ return className == null ? "tx-multiselect" : "tx-multiselect " + className;
}
@SuppressWarnings("unchecked")
private void writeJavaScript(String clientId, String name)
{
- JSONObject spec = new JSONObject("clientId", clientId, "name", name);
+ JSONObject spec = new JSONObject("clientId", clientId);
for (Object value : values)
{
@@ -0,0 +1,24 @@
+<div id="${clientId}" class="${computedClassName}" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd">
+ <input type="hidden" name="${name}"/>
+ <div>
+ <div class="tx-available">
+ <div class="tx-title">Available:</div>
+ <select multiple="multiple"/>
+ </div>
+ <div class="tx-controls">
+ <span class="tx-select tx-disabled" title="Select"/>
+ <span class="tx-deselect tx-disabled" title="Deselect"/>
+ </div>
+ <div class="tx-selected">
+ <div class="tx-title">Selected:</div>
+ <select multiple="multiple"/>
+ </div>
+ </div>
+ <div class="tx-input">
+ <label>
+ Add:
+ <input type="text" size="40"/>
+ <span class="tx-error"/>
+ </label>
+ </div>
+</div>
@@ -84,38 +84,11 @@ Tapx.extendInitializer(function() {
function initializer(spec) {
var outerDiv = $(spec.clientId);
- var hidden = new Element("input", {
- type : "hidden",
- name : spec.name
- });
- outerDiv.insert(hidden);
-
- var mainDiv = new Element("div", {
- "class" : "tx-multiselect-columns"
- });
-
- outerDiv.insert(mainDiv);
-
- mainDiv.update("<div class='tx-available'>"
- + "<div class='tx-title'>Available:</div>"
- + "<select multiple='multiple'></select></div>"
- + "<div class='tx-controls'>"
- + "<span class='tx-select tx-disabled' title='Select'></span>"
- + "<span class='tx-deselect tx-disabled' title='Deselect'>"
- + "</span></div><div class='tx-selected'>"
- + "<div class='tx-title'>Selected:</div>"
- + "<select multiple='multiple'></select></div>");
-
- inputDiv = new Element("div", {
- class : "tx-input"
- });
- outerDiv.insert(inputDiv);
- inputDiv.update("<label>Add: <input type='text' size='40'>"
- + "<span class='tx-error'></div></label>");
+ var hidden = outerDiv.down("input[type='hidden']");
- var availableSelect = mainDiv.down(".tx-available > select");
- var selectedSelect = mainDiv.down(".tx-selected > select");
+ var availableSelect = outerDiv.down(".tx-available > select");
+ var selectedSelect = outerDiv.down(".tx-selected > select");
(spec.model || []).each(function(row) {
@@ -154,21 +127,21 @@ Tapx.extendInitializer(function() {
rebuildHiddenFieldValue();
- setupButton(availableSelect, mainDiv.down(".tx-select"), function() {
+ setupButton(availableSelect, outerDiv.down(".tx-select"), function() {
transferOptions(availableSelect, selectedSelect);
rebuildHiddenFieldValue();
});
- setupButton(selectedSelect, mainDiv.down(".tx-deselect"), function() {
+ setupButton(selectedSelect, outerDiv.down(".tx-deselect"), function() {
transferOptions(selectedSelect, availableSelect);
rebuildHiddenFieldValue();
});
- var errorDiv = inputDiv.down('.tx-error');
+ var errorDiv = outerDiv.down('.tx-error');
errorDiv.hide();
- var inputField = inputDiv.down('input');
+ var inputField = outerDiv.down('.tx-input input');
function error(message) {
inputField.addClassName("t-error").select();

0 comments on commit 6516148

Please sign in to comment.