You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by F Da Costa <da...@xs4all.nl> on 2004/10/11 16:06:21 UTC

Tab-based menu component question.

Hi,

I'm working on a site that will be using a tab-based menu.
Got a basic working component but the active tab does not change with 
the page selected.
Before actually going into that area i thought asking the list whether 
someone has already done something similar might not be a bad idea.

So herewith, does anybody has a working (or limping) component like this 
  that could be shared?

tia,
Fermin DCG


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


Re: Tab-based menu component question.

Posted by Borut BolĨina <bo...@najdi.si>.
Hello David and others,

I was searching through Tapestry archives for tab panel components and 
found your posting. The thing that got my immediate attention was that 
you used CSS (sliding doors) for tab display purposes. This CSS is, as I 
saw a week ago pointed out by my co-worker, very clean and the HTML to 
display it is the shortest I have ever seen.

I tried to download your example, but the link does not exist any more. 
Is by your (or anyone's on this list) knowledge this CSS integrated in 
any public Tapestry tab component? That would be awesome.

Regards,
Borut


David Wellington wrote:

>I have been working with Tapestry for a few weeks and did not
>find an example of a stateful tab panel implementation, so I rolled my own
>'limping' implementation. Here are some characteristics:
>
>Pros:
>
>(1) uses CSS for tab generation thru text (courtesy of Douglas Bowman,
>http://www.alistapart.com/articles/slidingdoors/)
>(2) uses a tabpanel component to do some of the (slightly) tricky work (but
>the rest is done in an enclosing page - so this is mainly a 'con')
>(3) Preserves state across tab clicks (and hence for the form submit)
>
>Cons:
>
>(1) All panes are contained in the enclosing page - this can make
>for a large html page, as some pointed out
>(2) Not fully componentized (see #2 above)
>(3) can be improved upon greatly, and hopefully will be (maybe this
>is a 'pro')
>
>My roadblocks may be old hat to the experienced Tapestry users out there,
>but the following were the cause of of quite a few hours of head-banging:
>
>(1) in order to get state preserved across the tabs (i.e. a form rewind on a
>tab change),
>I ended up using LinkSubmit and FormConditional - the Block/RenderBlock
>example
>in the docs does not seem to lend itself to stateful tabs - OTOH, if
>someone can do it that way, it would be cleaner.
>(2) I needed a separate listener for the LinkSubmit in order to inform the
>form
>submit listener that this particular rewind was the result of a tab click
>(3) I finally figured out that the way to get the current tab to display
>correctly
>was to use @Any - I, too, will probably learn to love @Any
>
>There is a zip file with a build tree you can use to deploy the example,
>along with an example.png image which you can look at to see if such
>deployment is useful. These may be found at
>http://www.crosswind.com/tapestry.html.
>Extract the zip image, edit build.properties, and do an 'ant deploy'.
>Then, point your browser to http://hostname:8080/tabpanel/start (or whatever
>...)
>If anyone cares to suggest improvements, I look forward to getting them.
>
>David Wellington
>
>  
>
>>-----Original Message-----
>>From: Andreas Pardeike [mailto:andreas@pardeike.net]
>>Sent: Monday, October 11, 2004 10:19 AM
>>To: Tapestry users
>>Subject: Re: Tab-based menu component question.
>>
>>
>>Hi,
>>
>>on a similar topic one of my questions is if it's easy to make each
>>page know it's own menu item and have the menu ask all pages for their
>>items, collect them and display them (including hilighting the current
>>item). What would be the basics for that?
>>
>>Andreas Pardeike
>>
>>
>>---------------------------------------------------------------------
>>To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
>>For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
>>    
>>
>
>
>---------------------------------------------------------------------
>To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
>For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
>
>  
>


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


RE: Tab-based menu component question.

Posted by David Wellington <da...@crosswind.com>.
I have been working with Tapestry for a few weeks and did not
find an example of a stateful tab panel implementation, so I rolled my own
'limping' implementation. Here are some characteristics:

Pros:

(1) uses CSS for tab generation thru text (courtesy of Douglas Bowman,
http://www.alistapart.com/articles/slidingdoors/)
(2) uses a tabpanel component to do some of the (slightly) tricky work (but
the rest is done in an enclosing page - so this is mainly a 'con')
(3) Preserves state across tab clicks (and hence for the form submit)

Cons:

(1) All panes are contained in the enclosing page - this can make
for a large html page, as some pointed out
(2) Not fully componentized (see #2 above)
(3) can be improved upon greatly, and hopefully will be (maybe this
is a 'pro')

My roadblocks may be old hat to the experienced Tapestry users out there,
but the following were the cause of of quite a few hours of head-banging:

(1) in order to get state preserved across the tabs (i.e. a form rewind on a
tab change),
I ended up using LinkSubmit and FormConditional - the Block/RenderBlock
example
in the docs does not seem to lend itself to stateful tabs - OTOH, if
someone can do it that way, it would be cleaner.
(2) I needed a separate listener for the LinkSubmit in order to inform the
form
submit listener that this particular rewind was the result of a tab click
(3) I finally figured out that the way to get the current tab to display
correctly
was to use @Any - I, too, will probably learn to love @Any

There is a zip file with a build tree you can use to deploy the example,
along with an example.png image which you can look at to see if such
deployment is useful. These may be found at
http://www.crosswind.com/tapestry.html.
Extract the zip image, edit build.properties, and do an 'ant deploy'.
Then, point your browser to http://hostname:8080/tabpanel/start (or whatever
...)
If anyone cares to suggest improvements, I look forward to getting them.

David Wellington

> -----Original Message-----
> From: Andreas Pardeike [mailto:andreas@pardeike.net]
> Sent: Monday, October 11, 2004 10:19 AM
> To: Tapestry users
> Subject: Re: Tab-based menu component question.
>
>
> Hi,
>
> on a similar topic one of my questions is if it's easy to make each
> page know it's own menu item and have the menu ask all pages for their
> items, collect them and display them (including hilighting the current
> item). What would be the basics for that?
>
> Andreas Pardeike
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
> For additional commands, e-mail: tapestry-user-help@jakarta.apache.org


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


Re: Tab-based menu component question.

Posted by Andreas Pardeike <an...@pardeike.net>.
Hi,

on a similar topic one of my questions is if it's easy to make each
page know it's own menu item and have the menu ask all pages for their
items, collect them and display them (including hilighting the current
item). What would be the basics for that?

Andreas Pardeike


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


Re: Tab-based menu component question.

Posted by F Da Costa <da...@xs4all.nl>.
Hi Alex,

Thx for the reply, looks quite nice actually.
One small question though.
Is it save to assume the pagelink referred to is retrieved from the page 
like getComponent("pageLink")?

tia
Fermin DCG

Alex Reid wrote:
> There is probably a much, much better way as I did this in my first week 
> of learning Tapestry.
> Actually I'd be interested in hearing of better solutions.
> 
> I have tabs as graphics. tab_page_off.gif and tab_page_on.gif, supplied 
> to me by my designer.
> 
> I have a list of Tab objects which I iterate over using a Foreach 
> component.
> 
> <span jwcid="@Foreach" 
> source="ognl:@com.myapp.admin.app.Constants@MAIN_SYSTEM_TABS" 
> value="ognl:tab">
>         <td><a jwcid="@PageLink" page="ognl:tab.pageLink">
>         <img jwcid="@Any" border='0' width='113' height='25' 
> alt="ognl:tab.description" 
> src="ognl:'/images/tabs_'+tab.graphic+tab.tabStatus(page)+'.gif'"/></a>
>     </td>
> </span>
> 
> To get the "on" or "off" bit of a the graphic's filename, the current 
> page object is passed to the current Tab object.
> 
>     public String tabStatus(BasePage page) {
>         if(page.getPageName().equals(pageLink)) {
>             return "_on";   
>         }
>         return "_off";
>     }
> 
> 
> On 11 Oct 2004, at 15:06, F Da Costa wrote:
> 
>> Hi,
>>
>> I'm working on a site that will be using a tab-based menu.
>> Got a basic working component but the active tab does not change with 
>> the page selected.
>> Before actually going into that area i thought asking the list whether 
>> someone has already done something similar might not be a bad idea.
>>
>> So herewith, does anybody has a working (or limping) component like 
>> this  that could be shared?
>>
>> tia,
>> Fermin DCG
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
>> For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
>>
> 
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
> For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
> 
> 


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


Re: Tab-based menu component question.

Posted by Alex Reid <al...@phiz.biz>.
There is probably a much, much better way as I did this in my first 
week of learning Tapestry.
Actually I'd be interested in hearing of better solutions.

I have tabs as graphics. tab_page_off.gif and tab_page_on.gif, supplied 
to me by my designer.

I have a list of Tab objects which I iterate over using a Foreach 
component.

<span jwcid="@Foreach" 
source="ognl:@com.myapp.admin.app.Constants@MAIN_SYSTEM_TABS" 
value="ognl:tab">
     	<td><a jwcid="@PageLink" page="ognl:tab.pageLink">
		<img jwcid="@Any" border='0' width='113' height='25' 
alt="ognl:tab.description" 
src="ognl:'/images/tabs_'+tab.graphic+tab.tabStatus(page)+'.gif'"/></a>
	</td>
</span>

To get the "on" or "off" bit of a the graphic's filename, the current 
page object is passed to the current Tab object.

	public String tabStatus(BasePage page) {
		if(page.getPageName().equals(pageLink)) {
			return "_on";	
		}
		return "_off";
	}


On 11 Oct 2004, at 15:06, F Da Costa wrote:

> Hi,
>
> I'm working on a site that will be using a tab-based menu.
> Got a basic working component but the active tab does not change with 
> the page selected.
> Before actually going into that area i thought asking the list whether 
> someone has already done something similar might not be a bad idea.
>
> So herewith, does anybody has a working (or limping) component like 
> this  that could be shared?
>
> tia,
> Fermin DCG
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
> For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
>


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