You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@click.apache.org by sdiener <sh...@gtec-inc.com> on 2011/02/14 18:21:55 UTC

TabbedPanel and Click 2.2.0

Hi! 

I have a Page containing a TabbedPanel where one of the tabs in the
TabbedPanel is a Panel that contains another TabbedPanel. 

This worked great for Click 2.1.0, but when I upgraded to Click 2.2.0 I
suddenly couldn't switch tabs in the inner TabbedPanel (the outer
TabbedPanel still worked correctly).  I could see the inner TabbedPanel's
tab's link address show up correctly when the mouse hovered over the tab but
when I clicked on the tab nothing seemed to happen.  I found that if I added
the inner TabbedPanel to the Page using addControl (even though it isn't
called out in the Page htm, but is instead called out in the Panel's htm)
that tab switching worked as expected again. 

My problem seemed to be solved until I tried to click Submits and
ActionLinks in the inner TabbedPanel's Panels.  These appeared to work fine,
at first, until I selected and submitted a request in one of the other outer
TabbedPanel's Panels and then went back to the inner TabbedPanel's Submits
and ActionLinks where the requests seemed to be ignored. 

It looked like part of the problem was that when I returned to the inner
TabbedPanel after performing an action in another of the outer TabbedPanel's
Panels that the HEAD Elements needed for the inner TabbedPanel weren't being
updated in the page (I didn't see them in the source).  But if I were to
refresh the inner TabbedPanel, like by switching tabs in the inner
TabbedPanel, it seemed that it found what it needed and everything worked
correctly again.   

I was able to work around this second problem by listening for the selection
of the outer TabbedPanel's tab that contains the inner TabbedPanel. Then
using setActivePanel on the inner TabbedPanel to select the tab that was
already selected - which seemed to perform a refresh. 

I'm fairly new to Click and I'm not sure that my workarounds to the problems
listed are the best.  Is there a better solution to these issues? 

Also, I was hoping to find out what happened between Click 2.1.0 and Click
2.2.0 that caused this change in functionality.  I read that the old HTML
imports were removed in favor of the new HEAD elements.  But I'm not using
the old getHtmlImports method in my code, so I'm not sure what went wrong. 

Thanks for your help! 
-- 
View this message in context: http://click.1134972.n2.nabble.com/TabbedPanel-and-Click-2-2-0-tp6024395p6024395.html
Sent from the click-user mailing list archive at Nabble.com.

Re: TabbedPanel and Click 2.2.0

Posted by Bob Schellink <sa...@gmail.com>.
I've opened a JIRA[1] for improving TabbedPanel to support multiple panels per page. I'll try and
submit a patch over the next few days.

Bob

[1]: https://issues.apache.org/jira/browse/CLK-753

On 2011/02/16 09:56 AM, Bob Schellink wrote:
> Or rather only one TabbedPanel per page is supported. There are at least two problem areas:
> 
> - the internal ActionLink is simply called "tabLink", thus clicking on a tab will be processed by
> all TabPanels. My guess is that the tabLink should have the TabbedPanel name appended to it's own
> name to differentiate between different panels on the page
> - a special parameter called tabPanelIndex can be used to programmatically switch tabs. Again this
> parameter needs to be namespaced properly
> 
> If someone wants to work on this feature please open a JIRA and patch and we can include it for
> 2.3.0 final.
> 
> Kind regards
> 
> Bob
> 
> On 2011/02/15 23:34 PM, Bob Schellink wrote:
>> Looking at TabbedPanel code it doesn't look like nested panels is supported. The fact that it worked
>> in 2.1.0 seems somehow based on the fact that stateful pages are used.
>>
>> There was an optimization in 2.2.0 so that only the active panel gets processed, not all panels as
>> in 2.1.0. The issue was that Panel implementations could be expensive and access the DB, so only
>> processing the active Panel makes sense. This optimization however exposes the issue you are running
>> into.
>>
>> You could put together your own proper nested TabbedPanel or customize TabbedPanel by overriding
>> initActivePanel() and removing the two lines which deactivates all panels:
>>
>> // panel.setActive(false);
>>
>> Hope this helps.
>>
>> Kind regards
>>
>> Bob
>>
>>
>> On 2011/02/15 18:21 PM, sdiener wrote:
>>>
>>> Thanks Bob!
>>>
>>> I am using stateful pages, so I appreciate the warning about 2.3.0. I'll
>>> make sure I keep that in mind going forward.
>>>
>>> I'm afraid I don't quite understand what you're suggesting about adding the
>>> inner panel to the outer panel :-( .  I created a simplified version of my
>>> problem:
>>>
>>> --------
>>> SamplePage.java (the main page that contains the outer TabbedPanel
>>> containing Tab 1 and Tab 2:
>>> public class SamplePage extends Page {
>>>
>>> 	private TabbedPanel tabbedPanel = new TabbedPanel("tabbedPanel");
>>> 	private Tab1Panel tab1Panel;
>>> 	private Tab2Panel tab2Panel;
>>>
>>> 	public SamplePage() {
>>> 		setStateful(true);
>>>
>>> 		tab1Panel = new Tab1Panel("tab1Panel", "Tab 1");
>>> 		tab2Panel = new Tab2Panel("tab2Panel", "Tab 2");
>>> 		
>>> 		tabbedPanel.add(tab1Panel);
>>> 		tabbedPanel.add(tab2Panel);
>>> 		
>>> 		addControl(tabbedPanel);
>>> 	}
>>> }
>>>
>>> --------
>>> Sample.htm:
>>> <html>
>>>    <head>
>>>      $headElements
>>>    </head>
>>>    <body>
>>>      $tabbedPanel
>>>    $jsElements
>>>    </body>
>>>  </html> 
>>>
>>> --------
>>> Tab1Panel.java (The first tab of the outer TabbedPanel that contains it's
>>> own TabbedPanel containing Tab 3 and Tab 4):
>>> public class Tab1Panel extends Panel {
>>> 	private TabbedPanel tab1TabbedPanel = new TabbedPanel("tab1TabbedPanel");
>>> 	private Tab3Panel tab3Panel;
>>> 	private Tab4Panel tab4Panel;
>>> 	
>>> 	public Tab1Panel(String name, String label) {
>>> 		super(name, "/sample/Tab1Panel.htm");
>>> 		setLabel(label);
>>> 		
>>> 		tab3Panel = new Tab3Panel("tab3Panel", "Tab 3");
>>> 		tab4Panel = new Tab4Panel("tab4Panel", "Tab 4");
>>> 		
>>> 		tab1TabbedPanel.add(tab3Panel);
>>> 		tab1TabbedPanel.add(tab4Panel);
>>> 		
>>> 		add(tab1TabbedPanel);
>>> 	}
>>> }
>>>
>>> --------
>>> Tab1Panel.htm:
>>> $tab1TabbedPanel
>>>
>>> --------
>>> Tab2Panel.htm (The second tab of the outer TabbedPanel, just contains a
>>> Submit button with a print statement):
>>> public class Tab2Panel extends Panel {
>>> 	Form form = new Form("form");
>>> 	Submit theButton = new Submit("theButton", "Click Me", this,
>>> "onClickTheButton");
>>> 	public Tab2Panel(String name, String label) {
>>> 		super(name, "/sample/Tab2Panel.htm");
>>> 		setLabel(label);
>>> 		
>>> 		form.add(theButton);
>>> 		
>>> 		add(form);
>>> 	}
>>> 	
>>> 	public boolean onClickTheButton() {
>>> 		System.out.println("The button in Tab 2 was clicked");
>>> 		return true;
>>> 	}
>>> }
>>>
>>> --------
>>> Tab2Panel.htm:
>>> $form
>>>
>>> --------
>>> Tab3Panel.java (The first tab of the inner TabbedPanel, contains a Submit
>>> button with a print statement):
>>> public class Tab3Panel extends Panel {
>>> 	Form form = new Form("form");
>>> 	Submit theButton = new Submit("theButton", "Click Me", this,
>>> "onClickTheButton");
>>> 	public Tab3Panel(String name, String label) {
>>> 		super(name, "/sample/Tab3Panel.htm");
>>> 		setLabel(label);
>>> 		
>>> 		form.add(theButton);
>>> 		
>>> 		add(form);
>>> 	}
>>> 	
>>> 	public boolean onClickTheButton() {
>>> 		System.out.println("The button in Tab 3 was clicked");
>>> 		return true;
>>> 	}
>>> }
>>>
>>> --------
>>> Tab3Panel.htm:
>>> $form
>>>
>>> --------
>>> Tab4Panel.java (The second tab of the inner TabbedPanel, just contains a
>>> Submit button with a print statement):
>>> public class Tab4Panel extends Panel {
>>> 	Form form = new Form("form");
>>> 	Submit theButton = new Submit("theButton", "Click Me", this,
>>> "onClickTheButton");
>>> 	public Tab4Panel(String name, String label) {
>>> 		super(name, "/sample/Tab4Panel.htm");
>>> 		setLabel(label);
>>> 		
>>> 		form.add(theButton);
>>> 		
>>> 		add(form);
>>> 	}
>>> 	
>>> 	public boolean onClickTheButton() {
>>> 		System.out.println("The button in Tab 4 was clicked");
>>> 		return true;
>>> 	}
>>> }
>>>
>>> ---------
>>> Tab4Panel.htm:
>>> $form
>>>
>>> -----------------------------------
>>>
>>>
>>> Below is an image of what these TabbedPanels look like initially:
>>>
>>> 	 http://click.1134972.n2.nabble.com/file/n6028187/tabbedPanelSample.jpg 
>>>
>>>
>>> -----------------------------------
>>>
>>> In Click 2.1.0, this works perfectly.  I can click Tab 4 and the Tab4Panel
>>> is displayed.  However, if I run this same sample using Click 2.2.0, when I
>>> click Tab 4 nothing happens.
>>>
>>> If I get a reference to the inner TabbedPanel, "tab1TabbedPanel", from
>>> Tab1Panel and use addControl to add it to SamplePage, I can get
>>> functionality back in the tabs ... but unfortunately when I click the Submit
>>> buttons in the individual Panels, the "onClickTheButton" method is called
>>> twice.  So, this workaround isn't quite right.
>>>
>>> Based on my sample code, I was hoping that you could tell me if I had made a
>>> huge error somewhere that is causing my problems, or if perhaps there is a
>>> workaround I could use with Click 2.2.0 to restore the correct functionality
>>> I was seeing in Click 2.1.0.
>>>
>>> Thanks again!
>>
>>
> 
> 


Re: TabbedPanel and Click 2.2.0

Posted by Bob Schellink <sa...@gmail.com>.
Or rather only one TabbedPanel per page is supported. There are at least two problem areas:

- the internal ActionLink is simply called "tabLink", thus clicking on a tab will be processed by
all TabPanels. My guess is that the tabLink should have the TabbedPanel name appended to it's own
name to differentiate between different panels on the page
- a special parameter called tabPanelIndex can be used to programmatically switch tabs. Again this
parameter needs to be namespaced properly

If someone wants to work on this feature please open a JIRA and patch and we can include it for
2.3.0 final.

Kind regards

Bob

On 2011/02/15 23:34 PM, Bob Schellink wrote:
> Looking at TabbedPanel code it doesn't look like nested panels is supported. The fact that it worked
> in 2.1.0 seems somehow based on the fact that stateful pages are used.
> 
> There was an optimization in 2.2.0 so that only the active panel gets processed, not all panels as
> in 2.1.0. The issue was that Panel implementations could be expensive and access the DB, so only
> processing the active Panel makes sense. This optimization however exposes the issue you are running
> into.
> 
> You could put together your own proper nested TabbedPanel or customize TabbedPanel by overriding
> initActivePanel() and removing the two lines which deactivates all panels:
> 
> // panel.setActive(false);
> 
> Hope this helps.
> 
> Kind regards
> 
> Bob
> 
> 
> On 2011/02/15 18:21 PM, sdiener wrote:
>>
>> Thanks Bob!
>>
>> I am using stateful pages, so I appreciate the warning about 2.3.0. I'll
>> make sure I keep that in mind going forward.
>>
>> I'm afraid I don't quite understand what you're suggesting about adding the
>> inner panel to the outer panel :-( .  I created a simplified version of my
>> problem:
>>
>> --------
>> SamplePage.java (the main page that contains the outer TabbedPanel
>> containing Tab 1 and Tab 2:
>> public class SamplePage extends Page {
>>
>> 	private TabbedPanel tabbedPanel = new TabbedPanel("tabbedPanel");
>> 	private Tab1Panel tab1Panel;
>> 	private Tab2Panel tab2Panel;
>>
>> 	public SamplePage() {
>> 		setStateful(true);
>>
>> 		tab1Panel = new Tab1Panel("tab1Panel", "Tab 1");
>> 		tab2Panel = new Tab2Panel("tab2Panel", "Tab 2");
>> 		
>> 		tabbedPanel.add(tab1Panel);
>> 		tabbedPanel.add(tab2Panel);
>> 		
>> 		addControl(tabbedPanel);
>> 	}
>> }
>>
>> --------
>> Sample.htm:
>> <html>
>>    <head>
>>      $headElements
>>    </head>
>>    <body>
>>      $tabbedPanel
>>    $jsElements
>>    </body>
>>  </html> 
>>
>> --------
>> Tab1Panel.java (The first tab of the outer TabbedPanel that contains it's
>> own TabbedPanel containing Tab 3 and Tab 4):
>> public class Tab1Panel extends Panel {
>> 	private TabbedPanel tab1TabbedPanel = new TabbedPanel("tab1TabbedPanel");
>> 	private Tab3Panel tab3Panel;
>> 	private Tab4Panel tab4Panel;
>> 	
>> 	public Tab1Panel(String name, String label) {
>> 		super(name, "/sample/Tab1Panel.htm");
>> 		setLabel(label);
>> 		
>> 		tab3Panel = new Tab3Panel("tab3Panel", "Tab 3");
>> 		tab4Panel = new Tab4Panel("tab4Panel", "Tab 4");
>> 		
>> 		tab1TabbedPanel.add(tab3Panel);
>> 		tab1TabbedPanel.add(tab4Panel);
>> 		
>> 		add(tab1TabbedPanel);
>> 	}
>> }
>>
>> --------
>> Tab1Panel.htm:
>> $tab1TabbedPanel
>>
>> --------
>> Tab2Panel.htm (The second tab of the outer TabbedPanel, just contains a
>> Submit button with a print statement):
>> public class Tab2Panel extends Panel {
>> 	Form form = new Form("form");
>> 	Submit theButton = new Submit("theButton", "Click Me", this,
>> "onClickTheButton");
>> 	public Tab2Panel(String name, String label) {
>> 		super(name, "/sample/Tab2Panel.htm");
>> 		setLabel(label);
>> 		
>> 		form.add(theButton);
>> 		
>> 		add(form);
>> 	}
>> 	
>> 	public boolean onClickTheButton() {
>> 		System.out.println("The button in Tab 2 was clicked");
>> 		return true;
>> 	}
>> }
>>
>> --------
>> Tab2Panel.htm:
>> $form
>>
>> --------
>> Tab3Panel.java (The first tab of the inner TabbedPanel, contains a Submit
>> button with a print statement):
>> public class Tab3Panel extends Panel {
>> 	Form form = new Form("form");
>> 	Submit theButton = new Submit("theButton", "Click Me", this,
>> "onClickTheButton");
>> 	public Tab3Panel(String name, String label) {
>> 		super(name, "/sample/Tab3Panel.htm");
>> 		setLabel(label);
>> 		
>> 		form.add(theButton);
>> 		
>> 		add(form);
>> 	}
>> 	
>> 	public boolean onClickTheButton() {
>> 		System.out.println("The button in Tab 3 was clicked");
>> 		return true;
>> 	}
>> }
>>
>> --------
>> Tab3Panel.htm:
>> $form
>>
>> --------
>> Tab4Panel.java (The second tab of the inner TabbedPanel, just contains a
>> Submit button with a print statement):
>> public class Tab4Panel extends Panel {
>> 	Form form = new Form("form");
>> 	Submit theButton = new Submit("theButton", "Click Me", this,
>> "onClickTheButton");
>> 	public Tab4Panel(String name, String label) {
>> 		super(name, "/sample/Tab4Panel.htm");
>> 		setLabel(label);
>> 		
>> 		form.add(theButton);
>> 		
>> 		add(form);
>> 	}
>> 	
>> 	public boolean onClickTheButton() {
>> 		System.out.println("The button in Tab 4 was clicked");
>> 		return true;
>> 	}
>> }
>>
>> ---------
>> Tab4Panel.htm:
>> $form
>>
>> -----------------------------------
>>
>>
>> Below is an image of what these TabbedPanels look like initially:
>>
>> 	 http://click.1134972.n2.nabble.com/file/n6028187/tabbedPanelSample.jpg 
>>
>>
>> -----------------------------------
>>
>> In Click 2.1.0, this works perfectly.  I can click Tab 4 and the Tab4Panel
>> is displayed.  However, if I run this same sample using Click 2.2.0, when I
>> click Tab 4 nothing happens.
>>
>> If I get a reference to the inner TabbedPanel, "tab1TabbedPanel", from
>> Tab1Panel and use addControl to add it to SamplePage, I can get
>> functionality back in the tabs ... but unfortunately when I click the Submit
>> buttons in the individual Panels, the "onClickTheButton" method is called
>> twice.  So, this workaround isn't quite right.
>>
>> Based on my sample code, I was hoping that you could tell me if I had made a
>> huge error somewhere that is causing my problems, or if perhaps there is a
>> workaround I could use with Click 2.2.0 to restore the correct functionality
>> I was seeing in Click 2.1.0.
>>
>> Thanks again!
> 
> 


Re: TabbedPanel and Click 2.2.0

Posted by Bob Schellink <sa...@gmail.com>.
Looking at TabbedPanel code it doesn't look like nested panels is supported. The fact that it worked
in 2.1.0 seems somehow based on the fact that stateful pages are used.

There was an optimization in 2.2.0 so that only the active panel gets processed, not all panels as
in 2.1.0. The issue was that Panel implementations could be expensive and access the DB, so only
processing the active Panel makes sense. This optimization however exposes the issue you are running
into.

You could put together your own proper nested TabbedPanel or customize TabbedPanel by overriding
initActivePanel() and removing the two lines which deactivates all panels:

// panel.setActive(false);

Hope this helps.

Kind regards

Bob


On 2011/02/15 18:21 PM, sdiener wrote:
> 
> Thanks Bob!
> 
> I am using stateful pages, so I appreciate the warning about 2.3.0. I'll
> make sure I keep that in mind going forward.
> 
> I'm afraid I don't quite understand what you're suggesting about adding the
> inner panel to the outer panel :-( .  I created a simplified version of my
> problem:
> 
> --------
> SamplePage.java (the main page that contains the outer TabbedPanel
> containing Tab 1 and Tab 2:
> public class SamplePage extends Page {
> 
> 	private TabbedPanel tabbedPanel = new TabbedPanel("tabbedPanel");
> 	private Tab1Panel tab1Panel;
> 	private Tab2Panel tab2Panel;
> 
> 	public SamplePage() {
> 		setStateful(true);
> 
> 		tab1Panel = new Tab1Panel("tab1Panel", "Tab 1");
> 		tab2Panel = new Tab2Panel("tab2Panel", "Tab 2");
> 		
> 		tabbedPanel.add(tab1Panel);
> 		tabbedPanel.add(tab2Panel);
> 		
> 		addControl(tabbedPanel);
> 	}
> }
> 
> --------
> Sample.htm:
> <html>
>    <head>
>      $headElements
>    </head>
>    <body>
>      $tabbedPanel
>    $jsElements
>    </body>
>  </html> 
> 
> --------
> Tab1Panel.java (The first tab of the outer TabbedPanel that contains it's
> own TabbedPanel containing Tab 3 and Tab 4):
> public class Tab1Panel extends Panel {
> 	private TabbedPanel tab1TabbedPanel = new TabbedPanel("tab1TabbedPanel");
> 	private Tab3Panel tab3Panel;
> 	private Tab4Panel tab4Panel;
> 	
> 	public Tab1Panel(String name, String label) {
> 		super(name, "/sample/Tab1Panel.htm");
> 		setLabel(label);
> 		
> 		tab3Panel = new Tab3Panel("tab3Panel", "Tab 3");
> 		tab4Panel = new Tab4Panel("tab4Panel", "Tab 4");
> 		
> 		tab1TabbedPanel.add(tab3Panel);
> 		tab1TabbedPanel.add(tab4Panel);
> 		
> 		add(tab1TabbedPanel);
> 	}
> }
> 
> --------
> Tab1Panel.htm:
> $tab1TabbedPanel
> 
> --------
> Tab2Panel.htm (The second tab of the outer TabbedPanel, just contains a
> Submit button with a print statement):
> public class Tab2Panel extends Panel {
> 	Form form = new Form("form");
> 	Submit theButton = new Submit("theButton", "Click Me", this,
> "onClickTheButton");
> 	public Tab2Panel(String name, String label) {
> 		super(name, "/sample/Tab2Panel.htm");
> 		setLabel(label);
> 		
> 		form.add(theButton);
> 		
> 		add(form);
> 	}
> 	
> 	public boolean onClickTheButton() {
> 		System.out.println("The button in Tab 2 was clicked");
> 		return true;
> 	}
> }
> 
> --------
> Tab2Panel.htm:
> $form
> 
> --------
> Tab3Panel.java (The first tab of the inner TabbedPanel, contains a Submit
> button with a print statement):
> public class Tab3Panel extends Panel {
> 	Form form = new Form("form");
> 	Submit theButton = new Submit("theButton", "Click Me", this,
> "onClickTheButton");
> 	public Tab3Panel(String name, String label) {
> 		super(name, "/sample/Tab3Panel.htm");
> 		setLabel(label);
> 		
> 		form.add(theButton);
> 		
> 		add(form);
> 	}
> 	
> 	public boolean onClickTheButton() {
> 		System.out.println("The button in Tab 3 was clicked");
> 		return true;
> 	}
> }
> 
> --------
> Tab3Panel.htm:
> $form
> 
> --------
> Tab4Panel.java (The second tab of the inner TabbedPanel, just contains a
> Submit button with a print statement):
> public class Tab4Panel extends Panel {
> 	Form form = new Form("form");
> 	Submit theButton = new Submit("theButton", "Click Me", this,
> "onClickTheButton");
> 	public Tab4Panel(String name, String label) {
> 		super(name, "/sample/Tab4Panel.htm");
> 		setLabel(label);
> 		
> 		form.add(theButton);
> 		
> 		add(form);
> 	}
> 	
> 	public boolean onClickTheButton() {
> 		System.out.println("The button in Tab 4 was clicked");
> 		return true;
> 	}
> }
> 
> ---------
> Tab4Panel.htm:
> $form
> 
> -----------------------------------
> 
> 
> Below is an image of what these TabbedPanels look like initially:
> 
> 	 http://click.1134972.n2.nabble.com/file/n6028187/tabbedPanelSample.jpg 
> 
> 
> -----------------------------------
> 
> In Click 2.1.0, this works perfectly.  I can click Tab 4 and the Tab4Panel
> is displayed.  However, if I run this same sample using Click 2.2.0, when I
> click Tab 4 nothing happens.
> 
> If I get a reference to the inner TabbedPanel, "tab1TabbedPanel", from
> Tab1Panel and use addControl to add it to SamplePage, I can get
> functionality back in the tabs ... but unfortunately when I click the Submit
> buttons in the individual Panels, the "onClickTheButton" method is called
> twice.  So, this workaround isn't quite right.
> 
> Based on my sample code, I was hoping that you could tell me if I had made a
> huge error somewhere that is causing my problems, or if perhaps there is a
> workaround I could use with Click 2.2.0 to restore the correct functionality
> I was seeing in Click 2.1.0.
> 
> Thanks again!


Re: TabbedPanel and Click 2.2.0

Posted by sdiener <sh...@gmail.com>.
Thanks Bob!

I am using stateful pages, so I appreciate the warning about 2.3.0. I'll
make sure I keep that in mind going forward.

I'm afraid I don't quite understand what you're suggesting about adding the
inner panel to the outer panel :-( .  I created a simplified version of my
problem:

--------
SamplePage.java (the main page that contains the outer TabbedPanel
containing Tab 1 and Tab 2:
public class SamplePage extends Page {

	private TabbedPanel tabbedPanel = new TabbedPanel("tabbedPanel");
	private Tab1Panel tab1Panel;
	private Tab2Panel tab2Panel;

	public SamplePage() {
		setStateful(true);

		tab1Panel = new Tab1Panel("tab1Panel", "Tab 1");
		tab2Panel = new Tab2Panel("tab2Panel", "Tab 2");
		
		tabbedPanel.add(tab1Panel);
		tabbedPanel.add(tab2Panel);
		
		addControl(tabbedPanel);
	}
}

--------
Sample.htm:
<html>
   <head>
     $headElements
   </head>
   <body>
     $tabbedPanel
   $jsElements
   </body>
 </html> 

--------
Tab1Panel.java (The first tab of the outer TabbedPanel that contains it's
own TabbedPanel containing Tab 3 and Tab 4):
public class Tab1Panel extends Panel {
	private TabbedPanel tab1TabbedPanel = new TabbedPanel("tab1TabbedPanel");
	private Tab3Panel tab3Panel;
	private Tab4Panel tab4Panel;
	
	public Tab1Panel(String name, String label) {
		super(name, "/sample/Tab1Panel.htm");
		setLabel(label);
		
		tab3Panel = new Tab3Panel("tab3Panel", "Tab 3");
		tab4Panel = new Tab4Panel("tab4Panel", "Tab 4");
		
		tab1TabbedPanel.add(tab3Panel);
		tab1TabbedPanel.add(tab4Panel);
		
		add(tab1TabbedPanel);
	}
}

--------
Tab1Panel.htm:
$tab1TabbedPanel

--------
Tab2Panel.htm (The second tab of the outer TabbedPanel, just contains a
Submit button with a print statement):
public class Tab2Panel extends Panel {
	Form form = new Form("form");
	Submit theButton = new Submit("theButton", "Click Me", this,
"onClickTheButton");
	public Tab2Panel(String name, String label) {
		super(name, "/sample/Tab2Panel.htm");
		setLabel(label);
		
		form.add(theButton);
		
		add(form);
	}
	
	public boolean onClickTheButton() {
		System.out.println("The button in Tab 2 was clicked");
		return true;
	}
}

--------
Tab2Panel.htm:
$form

--------
Tab3Panel.java (The first tab of the inner TabbedPanel, contains a Submit
button with a print statement):
public class Tab3Panel extends Panel {
	Form form = new Form("form");
	Submit theButton = new Submit("theButton", "Click Me", this,
"onClickTheButton");
	public Tab3Panel(String name, String label) {
		super(name, "/sample/Tab3Panel.htm");
		setLabel(label);
		
		form.add(theButton);
		
		add(form);
	}
	
	public boolean onClickTheButton() {
		System.out.println("The button in Tab 3 was clicked");
		return true;
	}
}

--------
Tab3Panel.htm:
$form

--------
Tab4Panel.java (The second tab of the inner TabbedPanel, just contains a
Submit button with a print statement):
public class Tab4Panel extends Panel {
	Form form = new Form("form");
	Submit theButton = new Submit("theButton", "Click Me", this,
"onClickTheButton");
	public Tab4Panel(String name, String label) {
		super(name, "/sample/Tab4Panel.htm");
		setLabel(label);
		
		form.add(theButton);
		
		add(form);
	}
	
	public boolean onClickTheButton() {
		System.out.println("The button in Tab 4 was clicked");
		return true;
	}
}

---------
Tab4Panel.htm:
$form

-----------------------------------


Below is an image of what these TabbedPanels look like initially:

	 http://click.1134972.n2.nabble.com/file/n6028187/tabbedPanelSample.jpg 


-----------------------------------

In Click 2.1.0, this works perfectly.  I can click Tab 4 and the Tab4Panel
is displayed.  However, if I run this same sample using Click 2.2.0, when I
click Tab 4 nothing happens.

If I get a reference to the inner TabbedPanel, "tab1TabbedPanel", from
Tab1Panel and use addControl to add it to SamplePage, I can get
functionality back in the tabs ... but unfortunately when I click the Submit
buttons in the individual Panels, the "onClickTheButton" method is called
twice.  So, this workaround isn't quite right.

Based on my sample code, I was hoping that you could tell me if I had made a
huge error somewhere that is causing my problems, or if perhaps there is a
workaround I could use with Click 2.2.0 to restore the correct functionality
I was seeing in Click 2.1.0.

Thanks again!
-- 
View this message in context: http://click.1134972.n2.nabble.com/TabbedPanel-and-Click-2-2-0-tp6024395p6028187.html
Sent from the click-user mailing list archive at Nabble.com.

Re: TabbedPanel and Click 2.2.0

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

Is this on a stateful page? If so please note that stateful pages have been deprecated in 2.3.0
(they had many issues) and replaced with stateful controls.

The fact that the inner tabbedPanel does not navigate seems to indicate that they aren't reachable
for the Page to process them. Either the inner panel is not added to the outer panel or the
AutoBinding feature is used which automatically added the inner panel to the Page. There might be a
change in the autobinding in 2.2.0 which triggers the new behavior. My suggestion is to limit the
use AutoBinding as it is quite confusing. If the inner panel is a public variable, change it to
private and add it manually to the outer panel.

Kind regards

Bob

On 2011/02/14 19:21 PM, sdiener wrote:
> 
> Hi! 
> 
> I have a Page containing a TabbedPanel where one of the tabs in the
> TabbedPanel is a Panel that contains another TabbedPanel. 
> 
> This worked great for Click 2.1.0, but when I upgraded to Click 2.2.0 I
> suddenly couldn't switch tabs in the inner TabbedPanel (the outer
> TabbedPanel still worked correctly).  I could see the inner TabbedPanel's
> tab's link address show up correctly when the mouse hovered over the tab but
> when I clicked on the tab nothing seemed to happen.  I found that if I added
> the inner TabbedPanel to the Page using addControl (even though it isn't
> called out in the Page htm, but is instead called out in the Panel's htm)
> that tab switching worked as expected again. 
> 
> My problem seemed to be solved until I tried to click Submits and
> ActionLinks in the inner TabbedPanel's Panels.  These appeared to work fine,
> at first, until I selected and submitted a request in one of the other outer
> TabbedPanel's Panels and then went back to the inner TabbedPanel's Submits
> and ActionLinks where the requests seemed to be ignored. 
> 
> It looked like part of the problem was that when I returned to the inner
> TabbedPanel after performing an action in another of the outer TabbedPanel's
> Panels that the HEAD Elements needed for the inner TabbedPanel weren't being
> updated in the page (I didn't see them in the source).  But if I were to
> refresh the inner TabbedPanel, like by switching tabs in the inner
> TabbedPanel, it seemed that it found what it needed and everything worked
> correctly again.   
> 
> I was able to work around this second problem by listening for the selection
> of the outer TabbedPanel's tab that contains the inner TabbedPanel. Then
> using setActivePanel on the inner TabbedPanel to select the tab that was
> already selected - which seemed to perform a refresh. 
> 
> I'm fairly new to Click and I'm not sure that my workarounds to the problems
> listed are the best.  Is there a better solution to these issues? 
> 
> Also, I was hoping to find out what happened between Click 2.1.0 and Click
> 2.2.0 that caused this change in functionality.  I read that the old HTML
> imports were removed in favor of the new HEAD elements.  But I'm not using
> the old getHtmlImports method in my code, so I'm not sure what went wrong. 
> 
> Thanks for your help!