You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Alec Swan <al...@gmail.com> on 2010/08/31 04:51:35 UTC
Custom AjaxEditableLabel with an X in the upper right corner
Hello,
I would like to customize AjaxEditableLabel so that every time it is
rendered it has a letter X in the right-upper corner which allows the
user to remove the label from the screen. I would also like to
customize other components, such as panels, the same way. So, ideally
the solution should be applicable to any type of component.
I would also like to generate the X label at runtime and not have the
web designer create a separate HTML element with a wicket:id for each
X.
Any ideas on how to best approach this?
Thanks,
Alec
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Custom AjaxEditableLabel with an X in the upper right corner
Posted by Pedro Santos <pe...@gmail.com>.
Sure, the onclick handler can invoke an callback for an
AbstractDefaultAjaxBehavior for instance.
take a look at:
http://wicket.apache.org/apidocs/1.4/org/apache/wicket/ajax/AbstractDefaultAjaxBehavior.html#getCallbackScript%28%29
On Tue, Aug 31, 2010 at 3:48 PM, Alec Swan <al...@gmail.com> wrote:
> Thanks for the suggestion, Pedro.
>
> When the user clicks on the X label, I need to store the user decision
> in the database so that the next time they load the page the component
> does not show up.
>
> Can this behavior be implemented with the server-side code?
>
> Thanks,
>
> Alec
>
> On Tue, Aug 31, 2010 at 8:13 AM, Pedro Santos <pe...@gmail.com> wrote:
>> actually, if you re-render the component after hide it, it will to be
>> visible... perhaps you can add some callback on the close handler that
>> updates the visibility property on the wicket component.
>>
>> On Tue, Aug 31, 2010 at 11:08 AM, Pedro Santos <pe...@gmail.com> wrote:
>>> Use javascript to do that, for example:
>>>
>>> var target = document.getElementById('somecomponentid');
>>> target.style.position = 'relative';
>>> var close = document.createElement("span");
>>> close.innerHTML = 'x';
>>> close.style.position = 'absolute';
>>> close.style.top = 0;
>>> close.style.right = 0;
>>> close.onclick = function(){target.style.display = 'none'};
>>> target.appendChild(close);
>>>
>>> With Wicket, you can create some behavior that calls this javascript
>>> for the target component and then add this behaviour on those
>>> component you want.
>>>
>>> On Mon, Aug 30, 2010 at 11:51 PM, Alec Swan <al...@gmail.com> wrote:
>>>> Hello,
>>>>
>>>> I would like to customize AjaxEditableLabel so that every time it is
>>>> rendered it has a letter X in the right-upper corner which allows the
>>>> user to remove the label from the screen. I would also like to
>>>> customize other components, such as panels, the same way. So, ideally
>>>> the solution should be applicable to any type of component.
>>>>
>>>> I would also like to generate the X label at runtime and not have the
>>>> web designer create a separate HTML element with a wicket:id for each
>>>> X.
>>>>
>>>> Any ideas on how to best approach this?
>>>>
>>>> Thanks,
>>>>
>>>> Alec
>>>>
>>>> ---------------------------------------------------------------------
>>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>>
>>>>
>>>
>>>
>>>
>>> --
>>> Pedro Henrique Oliveira dos Santos
>>>
>>
>>
>>
>> --
>> Pedro Henrique Oliveira dos Santos
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
--
Pedro Henrique Oliveira dos Santos
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Custom AjaxEditableLabel with an X in the upper right corner
Posted by Alec Swan <al...@gmail.com>.
Thanks for the suggestion, Pedro.
When the user clicks on the X label, I need to store the user decision
in the database so that the next time they load the page the component
does not show up.
Can this behavior be implemented with the server-side code?
Thanks,
Alec
On Tue, Aug 31, 2010 at 8:13 AM, Pedro Santos <pe...@gmail.com> wrote:
> actually, if you re-render the component after hide it, it will to be
> visible... perhaps you can add some callback on the close handler that
> updates the visibility property on the wicket component.
>
> On Tue, Aug 31, 2010 at 11:08 AM, Pedro Santos <pe...@gmail.com> wrote:
>> Use javascript to do that, for example:
>>
>> var target = document.getElementById('somecomponentid');
>> target.style.position = 'relative';
>> var close = document.createElement("span");
>> close.innerHTML = 'x';
>> close.style.position = 'absolute';
>> close.style.top = 0;
>> close.style.right = 0;
>> close.onclick = function(){target.style.display = 'none'};
>> target.appendChild(close);
>>
>> With Wicket, you can create some behavior that calls this javascript
>> for the target component and then add this behaviour on those
>> component you want.
>>
>> On Mon, Aug 30, 2010 at 11:51 PM, Alec Swan <al...@gmail.com> wrote:
>>> Hello,
>>>
>>> I would like to customize AjaxEditableLabel so that every time it is
>>> rendered it has a letter X in the right-upper corner which allows the
>>> user to remove the label from the screen. I would also like to
>>> customize other components, such as panels, the same way. So, ideally
>>> the solution should be applicable to any type of component.
>>>
>>> I would also like to generate the X label at runtime and not have the
>>> web designer create a separate HTML element with a wicket:id for each
>>> X.
>>>
>>> Any ideas on how to best approach this?
>>>
>>> Thanks,
>>>
>>> Alec
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>
>>>
>>
>>
>>
>> --
>> Pedro Henrique Oliveira dos Santos
>>
>
>
>
> --
> Pedro Henrique Oliveira dos Santos
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Custom AjaxEditableLabel with an X in the upper right corner
Posted by Pedro Santos <pe...@gmail.com>.
actually, if you re-render the component after hide it, it will to be
visible... perhaps you can add some callback on the close handler that
updates the visibility property on the wicket component.
On Tue, Aug 31, 2010 at 11:08 AM, Pedro Santos <pe...@gmail.com> wrote:
> Use javascript to do that, for example:
>
> var target = document.getElementById('somecomponentid');
> target.style.position = 'relative';
> var close = document.createElement("span");
> close.innerHTML = 'x';
> close.style.position = 'absolute';
> close.style.top = 0;
> close.style.right = 0;
> close.onclick = function(){target.style.display = 'none'};
> target.appendChild(close);
>
> With Wicket, you can create some behavior that calls this javascript
> for the target component and then add this behaviour on those
> component you want.
>
> On Mon, Aug 30, 2010 at 11:51 PM, Alec Swan <al...@gmail.com> wrote:
>> Hello,
>>
>> I would like to customize AjaxEditableLabel so that every time it is
>> rendered it has a letter X in the right-upper corner which allows the
>> user to remove the label from the screen. I would also like to
>> customize other components, such as panels, the same way. So, ideally
>> the solution should be applicable to any type of component.
>>
>> I would also like to generate the X label at runtime and not have the
>> web designer create a separate HTML element with a wicket:id for each
>> X.
>>
>> Any ideas on how to best approach this?
>>
>> Thanks,
>>
>> Alec
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>
>
>
> --
> Pedro Henrique Oliveira dos Santos
>
--
Pedro Henrique Oliveira dos Santos
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Custom AjaxEditableLabel with an X in the upper right corner
Posted by Pedro Santos <pe...@gmail.com>.
Use javascript to do that, for example:
var target = document.getElementById('somecomponentid');
target.style.position = 'relative';
var close = document.createElement("span");
close.innerHTML = 'x';
close.style.position = 'absolute';
close.style.top = 0;
close.style.right = 0;
close.onclick = function(){target.style.display = 'none'};
target.appendChild(close);
With Wicket, you can create some behavior that calls this javascript
for the target component and then add this behaviour on those
component you want.
On Mon, Aug 30, 2010 at 11:51 PM, Alec Swan <al...@gmail.com> wrote:
> Hello,
>
> I would like to customize AjaxEditableLabel so that every time it is
> rendered it has a letter X in the right-upper corner which allows the
> user to remove the label from the screen. I would also like to
> customize other components, such as panels, the same way. So, ideally
> the solution should be applicable to any type of component.
>
> I would also like to generate the X label at runtime and not have the
> web designer create a separate HTML element with a wicket:id for each
> X.
>
> Any ideas on how to best approach this?
>
> Thanks,
>
> Alec
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
--
Pedro Henrique Oliveira dos Santos
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org