You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Bob Harner <bo...@gmail.com> on 2014/03/02 23:42:29 UTC

Use cases for the "any" component

Hi Tapestry users,

Does anyone have any good use cases for the "any" component?

  http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/Any.html

So far I have only come up with two:

1) When you want to dynamically output a different HTML element
depending on a property. This seems to be how the AjaxFormLoop
component uses it.

        <t:any t:id="addRowWrapper" element="prop:element" ... >

2) When you want to use a mixin on an ordinary HTML element. This
seems to be how the BeanDIsplay, GridRows and Palette components use
it.

        <td t:id="column" t:type="any" t:mixins="NotEmpty,renderNotification">

Anything else, anybody?

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


Re: Use cases for the "any" component

Posted by Bob Harner <bo...@gmail.com>.
Thanks, Geoff. Very nice.
On Mar 5, 2014 11:28 PM, "Geoff Callender" <
geoff.callender.jumpstart@gmail.com> wrote:

> Here's an Any div that is a container of things you can click on to
> select, identified by having CSS class "selectable". JavaScript listens for
> click from selectables in the container. It adds css class "active" to the
> selected thing and removes "active" from the others. You can see an
> EventLink in the example, because that's what you'd normally have in a
> situation like this, but the example works the same without it.
>
> This code is adapted from working code, but not tested in this form.
>
>                 <div t:id="thingsDiv" t:type="any">
>                         <t:loop source="things" value="thing"
> formstate="none">
>                                 <t:eventlink event="selected" context="
> thing.id" zone="^">
>                                         <div class="${selectableCssClass}"
> data-value="${thing.id}">
>                                                 <!-- etc -->
>                                         </div>
>                                 </t:eventlink>
>                         </t:loop>
>                 </div>
>
>         @Property
>         private String selectableCssClass = "selectable";
>
>         @InjectComponent
>         private Any thingsDiv;
>
>         void afterRender() {
>                 JSONObject params = new JSONObject();
>                 params.put("containerId", thingsDiv.getClientId());
>                 params.put("selectableCssClass", selectableCssClass);
>                 params.put("selectedCssClass", "active");
>
> javaScriptSupport.require("activate-selectables").with(params);
>         }
>
> define(["jquery"], function($) {
>
>         /**
>          * Adds selectedCssClass to the selected item when clicked, so
> that the server doesn't have to redisplay the container.
>          * Didn't use the jQuery Selectables because it behaves oddly -
> some say it should have been called Lasooable.
>          *
>          * Params:
>          * containerId Eg. "persons".
>          * selectableCssClass Eg. "selectable".
>          * selectedCssClass Eg. "active".
>          */
>         return function(params) {
>                 var containerId = params.containerId;
>                 var selectableClass = params.selectableCssClass;
>                 var selectedClass = params.selectedCssClass;
>
>                 var $container = $("#" + containerId);
>
>                 $container.on("click", "." + selectableClass, function(e) {
>                         var $clicked = $(this);
>                         var $selectables = $("#" + containerId + " ." +
> selectableClass);
>
>                         // Unselect all other selectables.
>
>                         $selectables.each(function() {
>                                 var $this = $(this);
>
>                                 if (!$this.is($clicked)) {
>                                         if ($this.hasClass(selectedClass))
> {
>
> $this.removeClass(selectedClass);
>
> $this.trigger("unselected");
>                                         }
>                                 }
>                         });
>
>                         // Select the clicked selectable.
>
>                         $clicked.addClass(selectedClass);
>                         $clicked.trigger("selected");
>                 });
>
>         };
>
> });
>
>
> On 06/03/2014, at 1:17 PM, Bob Harner wrote:
>
> > Geoff, Kristian, do you have any examples for using the "any"
> > component when you need to generate a unique client id to pass to
> > JavaScript?
> >
> >
> > On Wed, Mar 5, 2014 at 8:23 AM, Bob Harner <bo...@gmail.com> wrote:
> >> javadocs. I meant javadocs
> >>
> >> On Wed, Mar 5, 2014 at 8:23 AM, Bob Harner <bo...@gmail.com> wrote:
> >>> Thanks, everybody! I'll be updating the avocados for that component
> >>> soon, with examples.
> >>>
> >>> On Wed, Mar 5, 2014 at 8:08 AM, Geoff Callender
> >>> <ge...@gmail.com> wrote:
> >>>> My biggest use is the same as Kristian mentioned: to generate a unique
> >>>> client id to pass to javascript. It's usually on a div, span, but
> sometimes
> >>>> on a ul, p, area, or canvas.
> >>>> Option 2 too, but less often.
> >>>>
> >>>>
> >>>> On 3 March 2014 19:51, Kristian Marinkovic <
> kristian.marinkovic@gmail.com>wrote:
> >>>>
> >>>>> i use it if i need unique clientIds for certain dom elements to
> access it
> >>>>> with my javascripts.
> >>>>> g,
> >>>>> Kris
> >>>>>
> >>>>>
> >>>>> On Mon, Mar 3, 2014 at 8:18 AM, Lance Java <
> lance.java@googlemail.com
> >>>>>> wrote:
> >>>>>
> >>>>>> I've used option 2 and I've also extended "any" to make new
> components.
> >>>>>>
> >>>>>
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> > For additional commands, e-mail: users-help@tapestry.apache.org
> >
>
>

Re: Use cases for the "any" component

Posted by Geoff Callender <ge...@gmail.com>.
Here's an Any div that is a container of things you can click on to select, identified by having CSS class "selectable". JavaScript listens for click from selectables in the container. It adds css class "active" to the selected thing and removes "active" from the others. You can see an EventLink in the example, because that's what you'd normally have in a situation like this, but the example works the same without it.

This code is adapted from working code, but not tested in this form.

		<div t:id="thingsDiv" t:type="any">
			<t:loop source="things" value="thing" formstate="none">
				<t:eventlink event="selected" context="thing.id" zone="^">
					<div class="${selectableCssClass}" data-value="${thing.id}">
						<!-- etc -->
					</div>
				</t:eventlink>
			</t:loop>
		</div>

	@Property
	private String selectableCssClass = "selectable";

	@InjectComponent
	private Any thingsDiv;

	void afterRender() {
		JSONObject params = new JSONObject();
		params.put("containerId", thingsDiv.getClientId());
		params.put("selectableCssClass", selectableCssClass);
		params.put("selectedCssClass", "active");
		javaScriptSupport.require("activate-selectables").with(params);
	}

define(["jquery"], function($) {

	/**
	 * Adds selectedCssClass to the selected item when clicked, so that the server doesn't have to redisplay the container. 
	 * Didn't use the jQuery Selectables because it behaves oddly - some say it should have been called Lasooable.
	 * 
	 * Params:
	 * containerId Eg. "persons".
	 * selectableCssClass Eg. "selectable".
	 * selectedCssClass Eg. "active".
	 */
	return function(params) {
		var containerId = params.containerId;
		var selectableClass = params.selectableCssClass;
		var selectedClass = params.selectedCssClass;

		var $container = $("#" + containerId);

		$container.on("click", "." + selectableClass, function(e) {
			var $clicked = $(this);
			var $selectables = $("#" + containerId + " ." + selectableClass);

			// Unselect all other selectables.

			$selectables.each(function() {
				var $this = $(this);
				
				if (!$this.is($clicked)) {
					if ($this.hasClass(selectedClass)) {
						$this.removeClass(selectedClass);
						$this.trigger("unselected");
					}
				}
			});
			
			// Select the clicked selectable.

			$clicked.addClass(selectedClass);
			$clicked.trigger("selected");
		});

	};

});


On 06/03/2014, at 1:17 PM, Bob Harner wrote:

> Geoff, Kristian, do you have any examples for using the "any"
> component when you need to generate a unique client id to pass to
> JavaScript?
> 
> 
> On Wed, Mar 5, 2014 at 8:23 AM, Bob Harner <bo...@gmail.com> wrote:
>> javadocs. I meant javadocs
>> 
>> On Wed, Mar 5, 2014 at 8:23 AM, Bob Harner <bo...@gmail.com> wrote:
>>> Thanks, everybody! I'll be updating the avocados for that component
>>> soon, with examples.
>>> 
>>> On Wed, Mar 5, 2014 at 8:08 AM, Geoff Callender
>>> <ge...@gmail.com> wrote:
>>>> My biggest use is the same as Kristian mentioned: to generate a unique
>>>> client id to pass to javascript. It's usually on a div, span, but sometimes
>>>> on a ul, p, area, or canvas.
>>>> Option 2 too, but less often.
>>>> 
>>>> 
>>>> On 3 March 2014 19:51, Kristian Marinkovic <kr...@gmail.com>wrote:
>>>> 
>>>>> i use it if i need unique clientIds for certain dom elements to access it
>>>>> with my javascripts.
>>>>> g,
>>>>> Kris
>>>>> 
>>>>> 
>>>>> On Mon, Mar 3, 2014 at 8:18 AM, Lance Java <lance.java@googlemail.com
>>>>>> wrote:
>>>>> 
>>>>>> I've used option 2 and I've also extended "any" to make new components.
>>>>>> 
>>>>> 
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
> 


Re: Use cases for the "any" component

Posted by Bob Harner <bo...@gmail.com>.
Geoff, Kristian, do you have any examples for using the "any"
component when you need to generate a unique client id to pass to
JavaScript?


On Wed, Mar 5, 2014 at 8:23 AM, Bob Harner <bo...@gmail.com> wrote:
> javadocs. I meant javadocs
>
> On Wed, Mar 5, 2014 at 8:23 AM, Bob Harner <bo...@gmail.com> wrote:
>> Thanks, everybody! I'll be updating the avocados for that component
>> soon, with examples.
>>
>> On Wed, Mar 5, 2014 at 8:08 AM, Geoff Callender
>> <ge...@gmail.com> wrote:
>>> My biggest use is the same as Kristian mentioned: to generate a unique
>>> client id to pass to javascript. It's usually on a div, span, but sometimes
>>> on a ul, p, area, or canvas.
>>> Option 2 too, but less often.
>>>
>>>
>>> On 3 March 2014 19:51, Kristian Marinkovic <kr...@gmail.com>wrote:
>>>
>>>> i use it if i need unique clientIds for certain dom elements to access it
>>>> with my javascripts.
>>>> g,
>>>> Kris
>>>>
>>>>
>>>> On Mon, Mar 3, 2014 at 8:18 AM, Lance Java <lance.java@googlemail.com
>>>> >wrote:
>>>>
>>>> > I've used option 2 and I've also extended "any" to make new components.
>>>> >
>>>>

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


Re: Use cases for the "any" component

Posted by Bob Harner <bo...@gmail.com>.
javadocs. I meant javadocs

On Wed, Mar 5, 2014 at 8:23 AM, Bob Harner <bo...@gmail.com> wrote:
> Thanks, everybody! I'll be updating the avocados for that component
> soon, with examples.
>
> On Wed, Mar 5, 2014 at 8:08 AM, Geoff Callender
> <ge...@gmail.com> wrote:
>> My biggest use is the same as Kristian mentioned: to generate a unique
>> client id to pass to javascript. It's usually on a div, span, but sometimes
>> on a ul, p, area, or canvas.
>> Option 2 too, but less often.
>>
>>
>> On 3 March 2014 19:51, Kristian Marinkovic <kr...@gmail.com>wrote:
>>
>>> i use it if i need unique clientIds for certain dom elements to access it
>>> with my javascripts.
>>> g,
>>> Kris
>>>
>>>
>>> On Mon, Mar 3, 2014 at 8:18 AM, Lance Java <lance.java@googlemail.com
>>> >wrote:
>>>
>>> > I've used option 2 and I've also extended "any" to make new components.
>>> >
>>>

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


Re: Use cases for the "any" component

Posted by Bob Harner <bo...@gmail.com>.
Thanks, everybody! I'll be updating the avocados for that component
soon, with examples.

On Wed, Mar 5, 2014 at 8:08 AM, Geoff Callender
<ge...@gmail.com> wrote:
> My biggest use is the same as Kristian mentioned: to generate a unique
> client id to pass to javascript. It's usually on a div, span, but sometimes
> on a ul, p, area, or canvas.
> Option 2 too, but less often.
>
>
> On 3 March 2014 19:51, Kristian Marinkovic <kr...@gmail.com>wrote:
>
>> i use it if i need unique clientIds for certain dom elements to access it
>> with my javascripts.
>> g,
>> Kris
>>
>>
>> On Mon, Mar 3, 2014 at 8:18 AM, Lance Java <lance.java@googlemail.com
>> >wrote:
>>
>> > I've used option 2 and I've also extended "any" to make new components.
>> >
>>

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


Re: Use cases for the "any" component

Posted by Geoff Callender <ge...@gmail.com>.
My biggest use is the same as Kristian mentioned: to generate a unique
client id to pass to javascript. It's usually on a div, span, but sometimes
on a ul, p, area, or canvas.
Option 2 too, but less often.


On 3 March 2014 19:51, Kristian Marinkovic <kr...@gmail.com>wrote:

> i use it if i need unique clientIds for certain dom elements to access it
> with my javascripts.
> g,
> Kris
>
>
> On Mon, Mar 3, 2014 at 8:18 AM, Lance Java <lance.java@googlemail.com
> >wrote:
>
> > I've used option 2 and I've also extended "any" to make new components.
> >
>

Re: Use cases for the "any" component

Posted by Emmanuel DEMEY <de...@gmail.com>.
Most of the time I use any with the use case 2 also
Le 3 mars 2014 20:50, "George Christman" <gc...@cardaddy.com> a écrit :

> Like lance, I use it for option 2 as well as extended to make new
> components from it.
>
>
> On Mon, Mar 3, 2014 at 3:51 AM, Kristian Marinkovic <
> kristian.marinkovic@gmail.com> wrote:
>
> > i use it if i need unique clientIds for certain dom elements to access it
> > with my javascripts.
> > g,
> > Kris
> >
> >
> > On Mon, Mar 3, 2014 at 8:18 AM, Lance Java <lance.java@googlemail.com
> > >wrote:
> >
> > > I've used option 2 and I've also extended "any" to make new components.
> > >
> >
>
>
>
> --
> George Christman
> www.CarDaddy.com
> P.O. Box 735
> Johnstown, New York
>

Re: Use cases for the "any" component

Posted by George Christman <gc...@cardaddy.com>.
Like lance, I use it for option 2 as well as extended to make new
components from it.


On Mon, Mar 3, 2014 at 3:51 AM, Kristian Marinkovic <
kristian.marinkovic@gmail.com> wrote:

> i use it if i need unique clientIds for certain dom elements to access it
> with my javascripts.
> g,
> Kris
>
>
> On Mon, Mar 3, 2014 at 8:18 AM, Lance Java <lance.java@googlemail.com
> >wrote:
>
> > I've used option 2 and I've also extended "any" to make new components.
> >
>



-- 
George Christman
www.CarDaddy.com
P.O. Box 735
Johnstown, New York

Re: Use cases for the "any" component

Posted by Kristian Marinkovic <kr...@gmail.com>.
i use it if i need unique clientIds for certain dom elements to access it
with my javascripts.
g,
Kris


On Mon, Mar 3, 2014 at 8:18 AM, Lance Java <la...@googlemail.com>wrote:

> I've used option 2 and I've also extended "any" to make new components.
>

Re: Use cases for the "any" component

Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Mon, 03 Mar 2014 04:18:31 -0300, Lance Java <la...@googlemail.com>  
wrote:

> I've also extended "any" to make new components.

I'm really not following you . . .

-- 
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br

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


Re: Use cases for the "any" component

Posted by Lance Java <la...@googlemail.com>.
I've used option 2 and I've also extended "any" to make new components.

Re: Use cases for the "any" component

Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Sun, 02 Mar 2014 19:42:29 -0300, Bob Harner <bo...@gmail.com> wrote:

> Hi Tapestry users,
>
> Does anyone have any good use cases for the "any" component?

I think there's only one: adding mixins to something that wasn't a  
component before.

-- 
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br

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