Re: Client-side treeView

2009-10-07 Thread PaulH98



Michael O'Cleirigh wrote:
> 
> Hi Paul,
> 
> Most of the wicket + javascript integrations in wicket-stuff 
> (http://wicketstuff.org/confluence/display/STUFFWIKI/Wiki) will show how 
> communication between wicket and javascript can work.  They can get a 
> little messy but once implemented are nice/simple to deal with since 
> they are self contained.
> 
> When the page is rendered custom javascript is also rendered that 
> connects the component javascript (in your case the stock tree table) 
> with the wicket components (in your case the hiddenField.getMarkupID() 
> that will be used to fill in the selection details).
> 
> This can be done by rendering out the wicket markup id details into a 
> global variable in the DOM or as a property in a custom object in the DOM.
> 
> In the case of Palette it uses its own DOM object called Wicket.Palette 
> (see palette.js which is adjacent to Palette.java) This is where the 
> work is done to move values between the choicesComponent and 
> selectionComponent.  The recorderComponent is a customized HiddenField 
> that stores the list of values that are shown in the 
> selectionComponent. The buttons are configured with onclick actions 
> which are connected to the contextualized Wicket.Palette.action functions.
> 
> Each of the Wicket.Palette.action functions expect three arguments:
> 1. the markup id of  the choices component
> 2. the markup id of the selection component
> 3. the markup id of the recorder component.
> 
> Which are filled in automatically for the palette being rendered.
> 
> For your example you could create a custom hidden field like this and 
> define the converter so that it will have a comma seperated string 
> content but resolve into a list of Elements:
> 
> new HiddenField>(id) {
> 
>  
> /* (non-Javadoc)
>  * @see 
> org.apache.wicket.Component#getConverter(java.lang.Class)
>  */
> @Override
> public IConverter getConverter(Class type) {
> return new IConverter() {
>
> @Override
> public String convertToString(List 
> valueList, Locale locale) {
> 
>  // convert value list into a comma seperated 
> string like A,B,C...
> return string;
> }
>
> @Override
> public Object convertToObject(String value, Locale 
> locale) {
>
>   // convert a comma seperated string A,B,C... back 
> into the list of elements
> String[] elements = value.split(",");
> 
> List elementList = new 
> LinkedList();
> 
>  for (String e : elements) {
> 
>// convert
>  }
>  
> return elementList;
> }
> };
> }};
> 
> Then your javascript hooks for the on selection will append the id value 
> of the selected element into the hidden field.
> 
> When the form posts the formsubmittingComponent.onSubmit() action can 
> just call hiddenField.getModelObject() to get the list of selected 
> elements to process.
> 
> Hope this helps you get started,
> 
> Mike
> 
> 
> 
> -
> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
> 
> 

Hi, Mike - thank you very much for your reply. I am following the examples
on wicket-stuff and jweekend to write my own js tree-selector component. If
I shall finish it, I will post my code to this forum to thank all the help I
got. 


-- 
View this message in context: 
http://www.nabble.com/Client-side-treeView-tp25775360p25788264.html
Sent from the Wicket - User mailing list archive at Nabble.com.


-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org



Re: Client-side treeView

2009-10-07 Thread PaulH98



jWeekend wrote:
> 
> Paul,
> 
> Take a look at Alastair's  presenttaion called something like "A Drag And
> Drop List Editor" [1] and the accompanying source code.
> 
> I don't think we have a tree publicly available yet in WiQuery [2] but for
> sure you should get some good ideas there even if you don't want to use
> it.
> 
> Regards - Cemal
> jWeekend
> OO & Java Technologies, Wicket Training and Development 
> http://jWeekend.com
> 
> [1] http://jweekend.com/dev/ArticlesPage
> [2] http://code.google.com/p/wiquery/
> 
> 

Thanks Cemal, The jweekend example is quite helpful, I'm trying to
understand it better to write my own js component.

-- 
View this message in context: 
http://www.nabble.com/Client-side-treeView-tp25775360p25788056.html
Sent from the Wicket - User mailing list archive at Nabble.com.


-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org



Re: Client-side treeView

2009-10-06 Thread Michael O'Cleirigh

PaulH98 wrote:


Michael O'Cleirigh wrote:
  

Hi Paul,

What I would do would be to find a javascript implementation that does 
what you want and then have the selection events fill in a hidden field 
which will then be available on the server side when the form is 
posted.   This would be similar to how the Palette works in 
wicket-extensions


You then define a custom IConverter to convert the string input from the 
hidden field into the IModel> or IModel> or what 
ever makes sense for your model..


There is probably something in wicket-stuff already but here is a link 
to a jquery plugin for a tree table:

http://blog.cubicphuse.nl/2008/11/12/jquery-treetable-2-0

Regards,

Mike




Thanks Mike... Is there any document on how to write such a component like
Palette that communicates with javascript? I just skipped through the
Palette java an js source code and found they are kind of hard to
understand. "Wicket in Action" does not seem to cover this topic either.

  

Hi Paul,

Most of the wicket + javascript integrations in wicket-stuff 
(http://wicketstuff.org/confluence/display/STUFFWIKI/Wiki) will show how 
communication between wicket and javascript can work.  They can get a 
little messy but once implemented are nice/simple to deal with since 
they are self contained.


When the page is rendered custom javascript is also rendered that 
connects the component javascript (in your case the stock tree table) 
with the wicket components (in your case the hiddenField.getMarkupID() 
that will be used to fill in the selection details).


This can be done by rendering out the wicket markup id details into a 
global variable in the DOM or as a property in a custom object in the DOM.


In the case of Palette it uses its own DOM object called Wicket.Palette 
(see palette.js which is adjacent to Palette.java) This is where the 
work is done to move values between the choicesComponent and 
selectionComponent.  The recorderComponent is a customized HiddenField 
that stores the list of values that are shown in the 
selectionComponent. The buttons are configured with onclick actions 
which are connected to the contextualized Wicket.Palette.action functions.


Each of the Wicket.Palette.action functions expect three arguments:
1. the markup id of  the choices component
2. the markup id of the selection component
3. the markup id of the recorder component.

Which are filled in automatically for the palette being rendered.

For your example you could create a custom hidden field like this and 
define the converter so that it will have a comma seperated string 
content but resolve into a list of Elements:


   new HiddenField>(id) {


   /* (non-Javadoc)
* @see 
org.apache.wicket.Component#getConverter(java.lang.Class)

*/
   @Override
   public IConverter getConverter(Class type) {
   return new IConverter() {
  
   @Override
   public String convertToString(List 
valueList, Locale locale) {


// convert value list into a comma seperated 
string like A,B,C...

   return string;
   }
  
   @Override
   public Object convertToObject(String value, Locale 
locale) {
  
 // convert a comma seperated string A,B,C... back 
into the list of elements

   String[] elements = value.split(",");

   List elementList = new 
LinkedList();
   
for (String e : elements) {


  // convert
}

   return elementList;

   }
   };
   }};

Then your javascript hooks for the on selection will append the id value 
of the selected element into the hidden field.


When the form posts the formsubmittingComponent.onSubmit() action can 
just call hiddenField.getModelObject() to get the list of selected 
elements to process.


Hope this helps you get started,

Mike



-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org



Re: Client-side treeView

2009-10-06 Thread jWeekend

Paul,

Take a look at Alastair's  presenttaion called something like "A Drag And
Drop List Editor" [1] and the accompanying source code.

I don't think we have a tree publicly available yet in WiQuery [2] but for
sure you should get some good ideas there even if you don't want to use it.

Regards - Cemal
jWeekend
OO & Java Technologies, Wicket Training and Development 
http://jWeekend.com

[1] http://jweekend.com/dev/ArticlesPage
[2] http://code.google.com/p/wiquery/


PaulH98 wrote:
> 
> 
> Michael O'Cleirigh wrote:
>> 
>> Hi Paul,
>> 
>> What I would do would be to find a javascript implementation that does 
>> what you want and then have the selection events fill in a hidden field 
>> which will then be available on the server side when the form is 
>> posted.   This would be similar to how the Palette works in 
>> wicket-extensions
>> 
>> You then define a custom IConverter to convert the string input from the 
>> hidden field into the IModel> or IModel> or what 
>> ever makes sense for your model..
>> 
>> There is probably something in wicket-stuff already but here is a link 
>> to a jquery plugin for a tree table:
>> http://blog.cubicphuse.nl/2008/11/12/jquery-treetable-2-0
>> 
>> Regards,
>> 
>> Mike
>> 
> 
> Thanks Mike... Is there any document on how to write such a component like
> Palette that communicates with javascript? I just skipped through the
> Palette java an js source code and found they are kind of hard to
> understand. "Wicket in Action" does not seem to cover this topic either.
> 
> 
> 

-- 
View this message in context: 
http://www.nabble.com/Client-side-treeView-tp25775360p25776375.html
Sent from the Wicket - User mailing list archive at Nabble.com.


-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org



Re: Client-side treeView

2009-10-06 Thread PaulH98



Michael O'Cleirigh wrote:
> 
> Hi Paul,
> 
> What I would do would be to find a javascript implementation that does 
> what you want and then have the selection events fill in a hidden field 
> which will then be available on the server side when the form is 
> posted.   This would be similar to how the Palette works in 
> wicket-extensions
> 
> You then define a custom IConverter to convert the string input from the 
> hidden field into the IModel> or IModel> or what 
> ever makes sense for your model..
> 
> There is probably something in wicket-stuff already but here is a link 
> to a jquery plugin for a tree table:
> http://blog.cubicphuse.nl/2008/11/12/jquery-treetable-2-0
> 
> Regards,
> 
> Mike
> 

Thanks Mike... Is there any document on how to write such a component like
Palette that communicates with javascript? I just skipped through the
Palette java an js source code and found they are kind of hard to
understand. "Wicket in Action" does not seem to cover this topic either.


-- 
View this message in context: 
http://www.nabble.com/Client-side-treeView-tp25775360p25776230.html
Sent from the Wicket - User mailing list archive at Nabble.com.


-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org



Re: Client-side treeView

2009-10-06 Thread Michael O'Cleirigh

Hi Paul,

What I would do would be to find a javascript implementation that does 
what you want and then have the selection events fill in a hidden field 
which will then be available on the server side when the form is 
posted.   This would be similar to how the Palette works in 
wicket-extensions


You then define a custom IConverter to convert the string input from the 
hidden field into the IModel> or IModel> or what 
ever makes sense for your model..


There is probably something in wicket-stuff already but here is a link 
to a jquery plugin for a tree table:

http://blog.cubicphuse.nl/2008/11/12/jquery-treetable-2-0

Regards,

Mike



I would like show a treeview like the following,

root
 |---dir1
 ||leave 1.1
 ||leave 1.2
 |-leave 0. 1
 |-leave 0.2

This view should also allow a user to select multiple leave nodes (think of
selecting multiple catagories to charaterized a product).

I checked the TreeView/TreeTable components in Wicket-Ext and found that
they need to communicate with the sever-side every time a node is expanded
or collapsed. This is a waste of bandwidth in my case, as my tree model
never changes. Any suggestion on how I should implement a "fixed" treeview
on the client side, and only pass data to the server after the user clicks a
submit button?

  



-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org



Client-side treeView

2009-10-06 Thread Paul Huang
Hello,

I would like show a treeview like the following,

root
 |---dir1
 ||leave 1.1
 ||leave 1.2
 |-leave 0. 1
 |-leave 0.2

This view should also allow a user to select multiple leave nodes (think of
selecting multiple catagories to charaterized a product).

I checked the TreeView/TreeTable components in Wicket-Ext and found that
they need to communicate with the sever-side every time a node is expanded
or collapsed. This is a waste of bandwidth in my case, as my tree model
never changes. Any suggestion on how I should implement a "fixed" treeview
on the client side, and only pass data to the server after the user clicks a
submit button?