You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Tim Collins <tc...@greatergood.com> on 2014/06/09 16:34:01 UTC
Newbie question : How do I display a tabbed list vertically rather
than horizontally?
I am rather new to wicket and am trying to do something that ought to be
rather easy... I want to make the tabs I display show up vertically
rather than horizontally.
I am currently building a arraylist of tabs and then passing them to
AjaxTabbedPanel, but as far as I can see there is no way to make the
resulting tabs on a page show up down the left side of a page rather
than across the top... Is there an easy way to do that?
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Newbie question : How do I display a tabbed list vertically
rather than horizontally?
Posted by Mihir Chhaya <mi...@gmail.com>.
With CSS I provided, were you able to view your tab controls position
changing any bit?
Though you don't need any kind of animation here; Translate might be
helpful. Something like below in 'div.tabpanel div.tab-row' (in CSS)?
Here is one for chrome: -webkit-transform: translate(Xpx,Ypx); You will
have to make sure the div element has display:block set.
On Mon, Jun 9, 2014 at 1:51 PM, Tim Collins <tc...@greatergood.com>
wrote:
> Hmmm.... That did not work.
>
> To be clear, this is what the code looks like :
>
> package com.charityusa.janus.page.home;
>
> import com.charityusa.config.AppConfig;
> import com.charityusa.janus.panel.footer.Footer;
> import com.charityusa.janus.panel.vendor.CoolibarUpload;
> import com.charityusa.janus.panel.vendor.KettlerUpload;
> import com.charityusa.janus.panel.vendor.OWPUpload;
> import com.charityusa.janus.panel.vendor.PetEdgeUpload;
> import com.charityusa.janus.panel.vendor.StriderUpload;
> import com.charityusa.janus.panel.vendor.TimTestUpload;
> import org.apache.wicket.extensions.ajax.markup.html.tabs.AjaxTabbedPanel;
> import org.apache.wicket.extensions.markup.html.tabs.AbstractTab;
> import org.apache.wicket.extensions.markup.html.tabs.ITab;
> import org.apache.wicket.markup.head.CssUrlReferenceHeaderItem;
> import org.apache.wicket.markup.head.IHeaderResponse;
> import org.apache.wicket.markup.html.WebPage;
> import org.apache.wicket.markup.html.panel.Panel;
> import org.apache.wicket.model.Model;
> import org.apache.wicket.request.mapper.parameter.PageParameters;
> import org.apache.wicket.spring.injection.annot.SpringBean;
>
> import java.util.ArrayList;
> import java.util.List;
>
> /**
> * The home page class.
> */
> public class HomePage extends WebPage {
>
> // For serialization.
> private static final long serialVersionUID = 1L;
> @SpringBean
> private AppConfig appConfig;
>
> /**
> * Constructor with page parameters.
> *
> * @param pageParameters PageParameters
> */
> public HomePage(final PageParameters pageParameters) {
>
> super(pageParameters);
> final List<ITab> tabs = new ArrayList<>();
>
> tabs.add(new AbstractTab(new Model<>("Coolibar")) {
> @Override
> public Panel getPanel(final String panelId) {
> return new CoolibarUpload(panelId);
> }
> });
>
> tabs.add(new AbstractTab(new Model<>("Kettler")) {
> @Override
> public Panel getPanel(final String panelId) {
> return new KettlerUpload(panelId);
> }
> });
> add(new AjaxTabbedPanel<>("tabs", tabs));
> add(new Footer("footer"));
> }
>
> public void renderHead(final IHeaderResponse response) {
> if ("development".equals(this.appConfig.getType())) {
> // dev watermark added into the header via a css include
> response.render(new CssUrlReferenceHeaderItem("css/dev.css",
> null, null));
> }
> response.render(new CssUrlReferenceHeaderItem("css/janus.css",
> null, null));
> }
>
> }
>
> <!DOCTYPE html>
> <html xmlns:wicket="http://www.w3.org/1999/xhtml">
> <head>
> <title>Janus Inventory File Upload Service</title>
> <link rel="shortcut icon" href="images/favicon.ico"
> type="image/vnd.microsoft.icon" />
> </head>
>
> <body>
>
> <div class="content">
> <div class="pageTitle"><img src="images/janus.png" height="120"
> width="120"/><br/>Janus Inventory File Upload
> Service
> </div>
> <ul style="list-style-type: none">
> <li><a href="network_auth_logout">Sign Out</a></li>
> </ul>
>
> <hr/>
> <div wicket:id="tabs" class="tabpanel">[tabbed panel will be
> here]</div>
> <br/>
> </div>
>
> <div style="clear:both;"></div>
>
> <div class="footer">
> <div wicket:id="footer">Our Footer Here</div>
> </div>
> </body>
>
> </html>
>
> (I removed a couple tabs from the Java code since they are just linear
> additions to the code and two ought to be enough to get the pattern).
>
> What that would show is a tab structure like this :
> Coolibar Kettler
> [Stuff in tab that changes based on which tab is shown]
>
> And I want a tab structure like this :
> Coolibar [Stuff in tab that changes based on which tab is shown]
> Kettler
>
>
>
> On 6/9/14, 8:47 AM, Mihir Chhaya wrote:
>
>> Tim,
>>
>> Do you need to show only titles in vertical or tabs in vertical with title
>> displayed horizontally? You can do that with CSS itself as below.
>>
>> div.tabpanel div.tab-row {
>> float: left;
>> background: #F2F9FC url("../images/tabs/bg.gif") repeat-x bottom;
>> line-height: normal;
>> /*-webkit-transform:rotate(270deg);*/ /* Use different element and values
>> for IE, Firefox etc...*/
>> }
>>
>> div.tabpanel div.tab-row ul {
>> margin: 0;
>> padding: 10px 10px 0;
>> list-style: none;
>> }
>>
>> div.tabpanel div.tab-row li {
>> background: url("../images/tabs/left.gif") no-repeat left top;
>> margin: 0;
>> padding: 0 0 0 9px;
>> }
>>
>> Un-commenting transform part in first will yield vertical titles with
>> horizontal tabs.
>>
>> -Mihir.
>>
>>
>>
>>
>>
>> On Mon, Jun 9, 2014 at 10:34 AM, Tim Collins <tc...@greatergood.com>
>> wrote:
>>
>> I am rather new to wicket and am trying to do something that ought to be
>>> rather easy... I want to make the tabs I display show up vertically
>>> rather
>>> than horizontally.
>>>
>>> I am currently building a arraylist of tabs and then passing them to
>>> AjaxTabbedPanel, but as far as I can see there is no way to make the
>>> resulting tabs on a page show up down the left side of a page rather than
>>> across the top... Is there an easy way to do that?
>>>
>>> ---------------------------------------------------------------------
>>> 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: Newbie question : How do I display a tabbed list vertically rather
than horizontally?
Posted by Tim Collins <tc...@greatergood.com>.
Hmmm.... That did not work.
To be clear, this is what the code looks like :
package com.charityusa.janus.page.home;
import com.charityusa.config.AppConfig;
import com.charityusa.janus.panel.footer.Footer;
import com.charityusa.janus.panel.vendor.CoolibarUpload;
import com.charityusa.janus.panel.vendor.KettlerUpload;
import com.charityusa.janus.panel.vendor.OWPUpload;
import com.charityusa.janus.panel.vendor.PetEdgeUpload;
import com.charityusa.janus.panel.vendor.StriderUpload;
import com.charityusa.janus.panel.vendor.TimTestUpload;
import org.apache.wicket.extensions.ajax.markup.html.tabs.AjaxTabbedPanel;
import org.apache.wicket.extensions.markup.html.tabs.AbstractTab;
import org.apache.wicket.extensions.markup.html.tabs.ITab;
import org.apache.wicket.markup.head.CssUrlReferenceHeaderItem;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.Model;
import org.apache.wicket.request.mapper.parameter.PageParameters;
import org.apache.wicket.spring.injection.annot.SpringBean;
import java.util.ArrayList;
import java.util.List;
/**
* The home page class.
*/
public class HomePage extends WebPage {
// For serialization.
private static final long serialVersionUID = 1L;
@SpringBean
private AppConfig appConfig;
/**
* Constructor with page parameters.
*
* @param pageParameters PageParameters
*/
public HomePage(final PageParameters pageParameters) {
super(pageParameters);
final List<ITab> tabs = new ArrayList<>();
tabs.add(new AbstractTab(new Model<>("Coolibar")) {
@Override
public Panel getPanel(final String panelId) {
return new CoolibarUpload(panelId);
}
});
tabs.add(new AbstractTab(new Model<>("Kettler")) {
@Override
public Panel getPanel(final String panelId) {
return new KettlerUpload(panelId);
}
});
add(new AjaxTabbedPanel<>("tabs", tabs));
add(new Footer("footer"));
}
public void renderHead(final IHeaderResponse response) {
if ("development".equals(this.appConfig.getType())) {
// dev watermark added into the header via a css include
response.render(new
CssUrlReferenceHeaderItem("css/dev.css", null, null));
}
response.render(new CssUrlReferenceHeaderItem("css/janus.css",
null, null));
}
}
<!DOCTYPE html>
<html xmlns:wicket="http://www.w3.org/1999/xhtml">
<head>
<title>Janus Inventory File Upload Service</title>
<link rel="shortcut icon" href="images/favicon.ico"
type="image/vnd.microsoft.icon" />
</head>
<body>
<div class="content">
<div class="pageTitle"><img src="images/janus.png" height="120"
width="120"/><br/>Janus Inventory File Upload
Service
</div>
<ul style="list-style-type: none">
<li><a href="network_auth_logout">Sign Out</a></li>
</ul>
<hr/>
<div wicket:id="tabs" class="tabpanel">[tabbed panel will be
here]</div>
<br/>
</div>
<div style="clear:both;"></div>
<div class="footer">
<div wicket:id="footer">Our Footer Here</div>
</div>
</body>
</html>
(I removed a couple tabs from the Java code since they are just linear
additions to the code and two ought to be enough to get the pattern).
What that would show is a tab structure like this :
Coolibar Kettler
[Stuff in tab that changes based on which tab is shown]
And I want a tab structure like this :
Coolibar [Stuff in tab that changes based on which tab is shown]
Kettler
On 6/9/14, 8:47 AM, Mihir Chhaya wrote:
> Tim,
>
> Do you need to show only titles in vertical or tabs in vertical with title
> displayed horizontally? You can do that with CSS itself as below.
>
> div.tabpanel div.tab-row {
> float: left;
> background: #F2F9FC url("../images/tabs/bg.gif") repeat-x bottom;
> line-height: normal;
> /*-webkit-transform:rotate(270deg);*/ /* Use different element and values
> for IE, Firefox etc...*/
> }
>
> div.tabpanel div.tab-row ul {
> margin: 0;
> padding: 10px 10px 0;
> list-style: none;
> }
>
> div.tabpanel div.tab-row li {
> background: url("../images/tabs/left.gif") no-repeat left top;
> margin: 0;
> padding: 0 0 0 9px;
> }
>
> Un-commenting transform part in first will yield vertical titles with
> horizontal tabs.
>
> -Mihir.
>
>
>
>
>
> On Mon, Jun 9, 2014 at 10:34 AM, Tim Collins <tc...@greatergood.com>
> wrote:
>
>> I am rather new to wicket and am trying to do something that ought to be
>> rather easy... I want to make the tabs I display show up vertically rather
>> than horizontally.
>>
>> I am currently building a arraylist of tabs and then passing them to
>> AjaxTabbedPanel, but as far as I can see there is no way to make the
>> resulting tabs on a page show up down the left side of a page rather than
>> across the top... Is there an easy way to do that?
>>
>> ---------------------------------------------------------------------
>> 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: Newbie question : How do I display a tabbed list vertically
rather than horizontally?
Posted by Mihir Chhaya <mi...@gmail.com>.
Tim,
Do you need to show only titles in vertical or tabs in vertical with title
displayed horizontally? You can do that with CSS itself as below.
div.tabpanel div.tab-row {
float: left;
background: #F2F9FC url("../images/tabs/bg.gif") repeat-x bottom;
line-height: normal;
/*-webkit-transform:rotate(270deg);*/ /* Use different element and values
for IE, Firefox etc...*/
}
div.tabpanel div.tab-row ul {
margin: 0;
padding: 10px 10px 0;
list-style: none;
}
div.tabpanel div.tab-row li {
background: url("../images/tabs/left.gif") no-repeat left top;
margin: 0;
padding: 0 0 0 9px;
}
Un-commenting transform part in first will yield vertical titles with
horizontal tabs.
-Mihir.
On Mon, Jun 9, 2014 at 10:34 AM, Tim Collins <tc...@greatergood.com>
wrote:
> I am rather new to wicket and am trying to do something that ought to be
> rather easy... I want to make the tabs I display show up vertically rather
> than horizontally.
>
> I am currently building a arraylist of tabs and then passing them to
> AjaxTabbedPanel, but as far as I can see there is no way to make the
> resulting tabs on a page show up down the left side of a page rather than
> across the top... Is there an easy way to do that?
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
Re: Newbie question : How do I display a tabbed list vertically rather than horizontally?
Posted by Paul Bors <pa...@bors.ws>.
Extend the Wicket class you want like the AjaxTabbedPanel in Java (Model and Controller) and change the HTML (viewer) as you please.
You would need access to Wicket’s source code thus if you use Maven see the sources classifier at:
http://maven.apache.org/pom.html
Perhaps your IDE (Eclipse, Netbeans, IntelliJ IDEA, etc) is already configured to view the sources of your project’s dependencies.
If not download the sources manually from maven central or view the source code in the right branch online at GitHub:
https://github.com/apache/wicket/tree/master/wicket-extensions/src/main/java/org/apache/wicket/extensions/markup/html/tabs
Note the TabbedPanel.html contents:
<wicket:panel xmlns:wicket="http://wicket.apache.org">
<div wicket:id="tabs-container" class="tab-row">
<ul>
<li wicket:id="tabs"><a href="#" wicket:id="link"><span wicket:id="title">[[tab title]]</span></a></li>
</ul>
</div>
<div wicket:id="panel" class="tab-panel"><!-- no panel --></div>
</wicket:panel>
So create your own VerticalTabbedPanel.html and change the HTML mark-up to say a table but preserve the wicket:id hierarchy:
<html xmlns:wicket="http://wicket.apache.org">
<wicket:panel>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td valign="top" nowrap="nowrap">
<div wicket:id="tabs-container" class="tab-row">
<ul>
<li wicket:id="tabs">
<a href="#" wicket:id="link"><span wicket:id="title">[[tab title]]</span></a>
</li>
</ul>
</div>
</td>
<td> </td>
<td valign="top" width="100%">
<div wicket:id="panel" class="tab-panel">[panel]</div>
</td>
</tr>
</table>
</wicket:panel>
</html>
Then you need to extend the AjaxTabbedPanel java class to your own VerticalTabbedPanel.java say:
public class VerticalTabbedPanel extends TabbedPanel {
// In your own VerticalTabbedPanel constructors call super.*
}
From then on, feel free to use your new VerticalTabbedPanel.
Alternately you can use CSS to style the original markup of the TabbedPanel.html to be vertical which might be an easier solution as earlier suggested.
I only provided this answer to you so you can learn how easy it is to override Wicket’s code and its markup if so desired.
On Jun 9, 2014, at 10:34 AM, Tim Collins <tc...@greatergood.com> wrote:
> I am rather new to wicket and am trying to do something that ought to be rather easy... I want to make the tabs I display show up vertically rather than horizontally.
>
> I am currently building a arraylist of tabs and then passing them to AjaxTabbedPanel, but as far as I can see there is no way to make the resulting tabs on a page show up down the left side of a page rather than across the top... Is there an easy way to do that?
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>