tapestry-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Leon Derks <leon.de...@cumquat.nl>
Subject Re: What's the easiest way to implement two dependent select lists ?
Date Wed, 10 Dec 2008 14:59:37 GMT
Indeed I agree with Hugo.
I had this use case a couple of times and solved it in the same way as 
Hugo did.

I also hoped there is an easier way to implement dependable selects, 
using zones...

Also filling selects with objects is not really easy. I need to 
implement a selection model and a value encoder.
I have the feeling that things are more complicated than they should be.

For example, it would be easier to add a select into my page and bind a 
list with objects to it with setting the labelField and idField to 
object properties.
So like this;
<select t:type="select" t:id="productSelect" model="productList" 
labelField="name", idField="id" value="selectedProduct" />

I get the feeling that sometimes tapestry 5 is doing things to complicated.

Leon



Hugo Palma wrote:
> Everything i used in the example is built into Tapestry except the 
> OnEvent mixin that is provided by the library 
> t5-components(http://87.193.218.134:8080/t5components/index.html).
> The javascript stuff is part of prototype that is already bundled with 
> Tapestry.
>
> James Hillyerd wrote:
>> Hugo,
>>
>> That's a great example.  I think this belongs on the Wiki!
>>
>> Is the JSON stuff built into Tapestry, or do I need a third party 
>> library
>> for that?
>>
>> -james
>>
>> On Tue, Dec 9, 2008 at 10:17 AM, Hugo Palma <hugo.m.palma@gmail.com> 
>> wrote:
>>
>>  
>>> Here's how i'm doing this now:
>>>
>>> On the source select i'm using the OnEvent mixin to fire the change 
>>> event:
>>>
>>> <select t:id="operator" t:type="select" t:mixins="commons/onEvent"
>>> t:event="change" t:onCompleteCallback="onCompleteOperatorChange" .../>
>>>
>>> The event listener method is then responsible for querying the 
>>> database for
>>> the value to be set in the destination select:
>>>
>>> @OnEvent(component = "operator", value = "change")
>>>    public JSONArray onChangeOperatorEvent(String value) {
>>>        JSONArray jsonArray = new JSONArray();
>>>
>>>        for (Plaza plaza : getDestinationSelectValues(value)) {
>>>            JSONObject jsonObject = new JSONObject();
>>>            jsonObject.put("value", plaza.getId());
>>>            jsonObject.put("label", plaza.getDescription());
>>>
>>>            jsonArray.put(jsonObject);
>>>        }
>>>
>>>        return jsonArray;
>>>    }
>>>
>>> Finally, the onCompleteOperatorChange javascript function has to 
>>> parse the
>>> return JSON and update the select input options:
>>>
>>> function onCompleteOperatorChange(response) {
>>>        selectElement = $("entryPlaza");
>>>        responseJSON = response.evalJSON();
>>>
>>>        while (selectElement .options.length > 0) {
>>>        selectElement .options[0] = null;
>>>    }
>>>
>>>    for (index = 0; index < responseJSON .length; index++) {
>>>        selectElement.options[index] = new Option(responseJSON
>>> [index].label, responseJSON [index].value);
>>>    }
>>>
>>>        Tapestry.ElementEffect.highlight($("entryPlaza"));
>>>    }
>>>
>>> It would make things a little easier if the selects weren't inside a 
>>> form
>>> because then my event listener method could return the component 
>>> instance
>>> itself and then on the client i would just have to replace the current
>>> element with the new rendered one.
>>>
>>> On Sun, Dec 7, 2008 at 10:46 PM, Hugo Palma <hugo.m.palma@gmail.com>
>>> wrote:
>>>
>>>    
>>>>  I'm already using the OnEvent component. Still, because the model 
>>>> of the
>>>> select list i want to update is calculated server-side i need to 
>>>> pass it
>>>>       
>>> in
>>>    
>>>> json to the client, parse it again in javascript and then update the
>>>>       
>>> select
>>>    
>>>> input. This does work but i feel that there should be a simpler way of
>>>>       
>>> doing
>>>    
>>>> this, maybe using zones.
>>>>
>>>> thermus wrote:
>>>>
>>>> I'm a Tapestry novice, but you may want to have a look at
>>>>       
>>> http://code.google.com/p/tapestry5-components/ t5components .  It 
>>> allows
>>> you
>>>    
>>>> to add a mixin to components to respond to an OnChange event with AJAX
>>>>       
>>> (see: http://87.193.218.134:8080/t5c-demo/oneventpage this  and
>>> http://87.193.218.134:8080/t5components/t5c-commons/ref/org/apache/tapestry/commons/mixins/OnEvent.html

>>>
>>>    
>>>> this  for details).  You could then change the data model for the 
>>>> other
>>>> select component with a tiny bit of JavaScript in the 
>>>> onCompleteCallback
>>>> function.
>>>>
>>>> I'm curious how a Tapestry expert would handle it.
>>>>
>>>>
>>>> HugoPalma wrote:
>>>>
>>>>
>>>>  I have a very usual use where in a form i have two selects, and 
>>>> when the
>>>> user selects a value on one the values on the second should be 
>>>> filtered
>>>> accordingly.
>>>> As the Select component doesn't support ajax out-of.the-box i see 
>>>> myself
>>>> forced to implement a lot of plumbing and javascript stuff.
>>>>
>>>> Still, i feel that this kind of use case should be much easier to
>>>> implement.
>>>> Maybe i'm missing something.
>>>> I'd like to hear some ideas about how u would handle this.
>>>>
>>>> Thanks.
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>       
>>
>>
>>
>>   
>
>
>
> __________ NOD32 3680 (20081210) Informatie __________
>
> Dit bericht is gecontroleerd door het NOD32 Antivirus Systeem.
> http://www.nod32.nl
>


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Mime
View raw message