You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@click.apache.org by "Andrey P.Rybin" <ap...@gmail.com> on 2010/02/03 18:21:39 UTC

Click features: modal window/dialog box and Field Layout

Hello, All!

1) Is here some plans to add modal window/dialog box functionality to Click?

What I mean:

I have big form with many fields and I have field 'customer' (simple
input text) there.
Customer is a large object itself (with many properties) and I have a
lot of those objects.

I want to have "select" link/button/image after customer field.
If user will click this "select" control then modal window/dialog box
with customers table should be shown.
User can select customer with pleasure (Click's Table is great).
Then selected customer should be inserted in 'customer' field.

I can (with some voodoo magic) made it with handwritten javascript
(@see window.showModalDialog Method), but will be much better to have
out-of-box support for this.



2) How to do form with this layout:

Label   [input field] [question-mark image with tooltip]

This code
form.add(field1);
form.add(new Label("my html "));

shows field and [question-mark image with tooltip] in two lines
Label   [input field]
[question-mark image with tooltip]

?


3) May be I just can't find...
Do Click have simple AbstractContainerField descendants with div and
span tags (as in AbstractContainerField javadoc)?

If Click has then I can solve question #2.

It is good to have them.
Then layout can be made programmatically like this:

DivContainerField line1 = new DivContainerField();
line1.add(field11);
line1.add(field12);
form.add(line1);

DivContainerField line2 = new DivContainerField();
line2.add(field21);
line2.add(label22);
form.add(line2);

Result:
Label11  [field11]  Label12  [field12]
Label 21 [field21] label22 (== [question-mark image with tooltip] for example).

Re: Click features: modal window/dialog box and Field Layout

Posted by "Gilberto C. Andrade" <gi...@gmail.com>.
One more example:
http://stuq.nl/weblog/2008-06-05/wicket-how-to-write-a-reusable-modal-window-popup

kind regards

Gilberto

On Thu, Feb 4, 2010 at 10:27 AM, Gilberto C. Andrade
<gi...@gmail.com>wrote:

>
>
> On Wed, Feb 3, 2010 at 2:21 PM, Andrey P.Rybin <ap...@gmail.com> wrote:
>
>> Hello, All!
>>
>> 1) Is here some plans to add modal window/dialog box functionality to
>> Click?
>>
>> What I mean:
>>
>> I have big form with many fields and I have field 'customer' (simple
>> input text) there.
>> Customer is a large object itself (with many properties) and I have a
>> lot of those objects.
>>
>> I want to have "select" link/button/image after customer field.
>> If user will click this "select" control then modal window/dialog box
>> with customers table should be shown.
>> User can select customer with pleasure (Click's Table is great).
>> Then selected customer should be inserted in 'customer' field.
>>
> You are talking about (List of Values - LOV)Something like ...
>
>
> http://download-east.oracle.com/otn_hosted_doc/jdeveloper/1012/developing_mvc_applications/adf_alovbindings.html
>
>
> http://www.oracle.com/technology/obe/obe_as_1012/j2ee/develop/client/uix_lov_obe/images/a40218.gif
>
> http://www.oracle.com/technology/obe/obe_as_1012/j2ee/develop/client/uix_lov_obe/images/a40219.gif
>
> In the wicket list has a similar discussion (
> http://old.nabble.com/Pass-form-input-from-modal-window-back-to-the-caller-page-td14944556.html
> ).
>
> Yes, that would be very handy!
>
>
> Gilberto
>

Re: Click features: modal window/dialog box and Field Layout

Posted by "Gilberto C. Andrade" <gi...@gmail.com>.
On Wed, Feb 3, 2010 at 2:21 PM, Andrey P.Rybin <ap...@gmail.com> wrote:

> Hello, All!
>
> 1) Is here some plans to add modal window/dialog box functionality to
> Click?
>
> What I mean:
>
> I have big form with many fields and I have field 'customer' (simple
> input text) there.
> Customer is a large object itself (with many properties) and I have a
> lot of those objects.
>
> I want to have "select" link/button/image after customer field.
> If user will click this "select" control then modal window/dialog box
> with customers table should be shown.
> User can select customer with pleasure (Click's Table is great).
> Then selected customer should be inserted in 'customer' field.
>
You are talking about (List of Values - LOV)Something like ...

http://download-east.oracle.com/otn_hosted_doc/jdeveloper/1012/developing_mvc_applications/adf_alovbindings.html

http://www.oracle.com/technology/obe/obe_as_1012/j2ee/develop/client/uix_lov_obe/images/a40218.gif
http://www.oracle.com/technology/obe/obe_as_1012/j2ee/develop/client/uix_lov_obe/images/a40219.gif

In the wicket list has a similar discussion (
http://old.nabble.com/Pass-form-input-from-modal-window-back-to-the-caller-page-td14944556.html
).

Yes, that would be very handy!


Gilberto

Re: Click features: modal window/dialog box and Field Layout

Posted by "Andrey P.Rybin" <ap...@gmail.com>.
Thank you Bob!

2,3)
I have made simple component, that solves my need.
Can You look at source - is it right?

Source file is attached.


==========
From: Bob Schellink <sabob1 <at> gmail.com>
Date: 2010-02-04 08:49:29 GMT (2 days, 5 hours and 39 minutes ago)

Hi Andrey,

On 4/02/2010 04:21 AM, Andrey P.Rybin wrote:
>
> 1) Is here some plans to add modal window/dialog box functionality to Click?

I'm not aware of anyone working on this but it would be a great addition.

We'd need to think how to solve this in a cross browser way. I just
had a look at showModalDialog
and it seems that only Firefox and IE supports it properly. Chrome
displays a dialog but it is not
modal. Opera didn't work either.

Another option is to use a JavaScript based solution but that could be
a bit heavy weight.

> 2) How to do form with this layout:
>
> Label   [input field] [question-mark image with tooltip]
>
> This code
> form.add(field1);
> form.add(new Label("my html "));
>
> shows field and [question-mark image with tooltip] in two lines
> Label   [input field]
> [question-mark image with tooltip]

I've found that for flexible layouts the HTML list (<ul>) is quite
useful. You can see a demo here:
http://www.avoka.com/click-examples/form/contact-details.htm

>
> 3) May be I just can't find...
> Do Click have simple AbstractContainerField descendants with div and
> span tags (as in AbstractContainerField javadoc)?

There are no descendants of this container but its pretty easy to add
a custom control:

public class DivContainerField extends ContainerField {
   public String getTag() {
     return "div";
   }
}

Whether we add this to Click itself is up for debate. We should be
careful not to bloat the library
too much for those less common use cases. One option is to host these
controls in the ClickClick[1]
project and incorporate them into Click if they are popular. I know
ClickClick is currently a pain
because there are no builds available but once Click 2.1.0 is out we
can start building ClickClick
binary artifacts.

kind regards

bob

[1]: http://code.google.com/p/clickclick/


On Wed, Feb 3, 2010 at 22:21, Andrey P.Rybin <ap...@gmail.com> wrote:
> Hello, All!
>
> 1) Is here some plans to add modal window/dialog box functionality to Click?
>
> What I mean:
>
> I have big form with many fields and I have field 'customer' (simple
> input text) there.
> Customer is a large object itself (with many properties) and I have a
> lot of those objects.
>
> I want to have "select" link/button/image after customer field.
> If user will click this "select" control then modal window/dialog box
> with customers table should be shown.
> User can select customer with pleasure (Click's Table is great).
> Then selected customer should be inserted in 'customer' field.
>
> I can (with some voodoo magic) made it with handwritten javascript
> (@see window.showModalDialog Method), but will be much better to have
> out-of-box support for this.
>
>
>
> 2) How to do form with this layout:
>
> Label   [input field] [question-mark image with tooltip]
>
> This code
> form.add(field1);
> form.add(new Label("my html "));
>
> shows field and [question-mark image with tooltip] in two lines
> Label   [input field]
> [question-mark image with tooltip]
>
> ?
>
>
> 3) May be I just can't find...
> Do Click have simple AbstractContainerField descendants with div and
> span tags (as in AbstractContainerField javadoc)?
>
> If Click has then I can solve question #2.
>
> It is good to have them.
> Then layout can be made programmatically like this:
>
> DivContainerField line1 = new DivContainerField();
> line1.add(field11);
> line1.add(field12);
> form.add(line1);
>
> DivContainerField line2 = new DivContainerField();
> line2.add(field21);
> line2.add(label22);
> form.add(line2);
>
> Result:
> Label11  [field11]  Label12  [field12]
> Label 21 [field21] label22 (== [question-mark image with tooltip] for example).
>

Re: Click features: modal window/dialog box and Field Layout

Posted by AndreyRybin <ap...@gmail.com>.
Thank you Marco!

I will try your solution in near time.
-- 
View this message in context: http://n2.nabble.com/Click-features-modal-window-dialog-box-and-Field-Layout-tp4508490p4565169.html
Sent from the click-user mailing list archive at Nabble.com.

Re: Click features: modal window/dialog box and Field Layout

Posted by Marco Gattei <ma...@gmail.com>.
Bob Schellink ha scritto:
> Hi Andrey,
>
> On 4/02/2010 04:21 AM, Andrey P.Rybin wrote:
>>
>> 1) Is here some plans to add modal window/dialog box functionality to 
>> Click?
>
>
> I'm not aware of anyone working on this but it would be a great addition.
>
> We'd need to think how to solve this in a cross browser way. I just 
> had a look at showModalDialog and it seems that only Firefox and IE 
> supports it properly. Chrome displays a dialog but it is not modal. 
> Opera didn't work either.
>
> Another option is to use a JavaScript based solution but that could be 
> a bit heavy weight. ù
Recently i needed ssuch a componente for one of my projects....
I ended up modifiyng ClickClick jQuery UI dialog component.
Code ( Component calss, JqHelper class, js template and example page )  
in attachment

Hope this helps .

Marco



>
>
>> 2) How to do form with this layout:
>>
>> Label   [input field] [question-mark image with tooltip]
>>
>> This code
>> form.add(field1);
>> form.add(new Label("my html "));
>>
>> shows field and [question-mark image with tooltip] in two lines
>> Label   [input field]
>> [question-mark image with tooltip]
>
>
> I've found that for flexible layouts the HTML list (<ul>) is quite 
> useful. You can see a demo here: 
> http://www.avoka.com/click-examples/form/contact-details.htm
>
>>
>> 3) May be I just can't find...
>> Do Click have simple AbstractContainerField descendants with div and
>> span tags (as in AbstractContainerField javadoc)?
>
>
> There are no descendants of this container but its pretty easy to add 
> a custom control:
>
> public class DivContainerField extends ContainerField {
>   public String getTag() {
>     return "div";
>   }
> }
>
> Whether we add this to Click itself is up for debate. We should be 
> careful not to bloat the library too much for those less common use 
> cases. One option is to host these controls in the ClickClick[1] 
> project and incorporate them into Click if they are popular. I know 
> ClickClick is currently a pain because there are no builds available 
> but once Click 2.1.0 is out we can start building ClickClick binary 
> artifacts.
>
> kind regards
>
> bob
>
> [1]: http://code.google.com/p/clickclick/
>
>


Re: Click features: modal window/dialog box and Field Layout

Posted by Marco Gattei <ma...@gmail.com>.
Hi Andrey

ClickClick project as an example of of integratiting JQuery Dialog  in a 
click page
JQuery dialog can be set to work as modal....

net.sf.clickclick.examples.jquery.control.ui.UIDialog.

But it's almost a wrapper for jQuery calls ..... i does't have any way 
to control the dialog server side,
which is what i want form such a component

but it's a  start !

Marco

Bob Schellink ha scritto:
> Hi Andrey,
>
> On 4/02/2010 04:21 AM, Andrey P.Rybin wrote:
>>
>> 1) Is here some plans to add modal window/dialog box functionality to 
>> Click?
>
>
> I'm not aware of anyone working on this but it would be a great addition.
>
> We'd need to think how to solve this in a cross browser way. I just 
> had a look at showModalDialog and it seems that only Firefox and IE 
> supports it properly. Chrome displays a dialog but it is not modal. 
> Opera didn't work either.
>
> Another option is to use a JavaScript based solution but that could be 
> a bit heavy weight.
>
>
>> 2) How to do form with this layout:
>>
>> Label   [input field] [question-mark image with tooltip]
>>
>> This code
>> form.add(field1);
>> form.add(new Label("my html "));
>>
>> shows field and [question-mark image with tooltip] in two lines
>> Label   [input field]
>> [question-mark image with tooltip]
>
>
> I've found that for flexible layouts the HTML list (<ul>) is quite 
> useful. You can see a demo here: 
> http://www.avoka.com/click-examples/form/contact-details.htm
>
>>
>> 3) May be I just can't find...
>> Do Click have simple AbstractContainerField descendants with div and
>> span tags (as in AbstractContainerField javadoc)?
>
>
> There are no descendants of this container but its pretty easy to add 
> a custom control:
>
> public class DivContainerField extends ContainerField {
>   public String getTag() {
>     return "div";
>   }
> }
>
> Whether we add this to Click itself is up for debate. We should be 
> careful not to bloat the library too much for those less common use 
> cases. One option is to host these controls in the ClickClick[1] 
> project and incorporate them into Click if they are popular. I know 
> ClickClick is currently a pain because there are no builds available 
> but once Click 2.1.0 is out we can start building ClickClick binary 
> artifacts.
>
> kind regards
>
> bob
>
> [1]: http://code.google.com/p/clickclick/
>
>


Re: Click features: modal window/dialog box and Field Layout

Posted by Bob Schellink <sa...@gmail.com>.
Hi Andrey,

On 4/02/2010 04:21 AM, Andrey P.Rybin wrote:
>
> 1) Is here some plans to add modal window/dialog box functionality to Click?


I'm not aware of anyone working on this but it would be a great addition.

We'd need to think how to solve this in a cross browser way. I just had a look at showModalDialog 
and it seems that only Firefox and IE supports it properly. Chrome displays a dialog but it is not 
modal. Opera didn't work either.

Another option is to use a JavaScript based solution but that could be a bit heavy weight.


> 2) How to do form with this layout:
>
> Label   [input field] [question-mark image with tooltip]
>
> This code
> form.add(field1);
> form.add(new Label("my html "));
>
> shows field and [question-mark image with tooltip] in two lines
> Label   [input field]
> [question-mark image with tooltip]


I've found that for flexible layouts the HTML list (<ul>) is quite useful. You can see a demo here: 
http://www.avoka.com/click-examples/form/contact-details.htm

>
> 3) May be I just can't find...
> Do Click have simple AbstractContainerField descendants with div and
> span tags (as in AbstractContainerField javadoc)?


There are no descendants of this container but its pretty easy to add a custom control:

public class DivContainerField extends ContainerField {
   public String getTag() {
     return "div";
   }
}

Whether we add this to Click itself is up for debate. We should be careful not to bloat the library 
too much for those less common use cases. One option is to host these controls in the ClickClick[1] 
project and incorporate them into Click if they are popular. I know ClickClick is currently a pain 
because there are no builds available but once Click 2.1.0 is out we can start building ClickClick 
binary artifacts.

kind regards

bob

[1]: http://code.google.com/p/clickclick/