Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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

…details on the client
  • Loading branch information...
commit 6516148e1963af6ddea7e126027fb78685ff63f1 1 parent de5a6b2
Howard M. Lewis Ship authored
25 tapx-core/src/main/java/com/howardlewisship/tapx/core/components/MultipleSelect.java
View
@@ -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)
{
24 tapx-core/src/main/resources/com/howardlewisship/tapx/core/components/MultipleSelect.tml
View
@@ -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>
41 tapx-core/src/main/resources/com/howardlewisship/tapx/core/tapx-multiselect.js
View
@@ -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();
Please sign in to comment.
Something went wrong with that request. Please try again.