Re: Newbie question : How do I display a tabbed list vertically rather than horizontally?
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:
http://wicket.apache.org";>
[[tab title]]
So create your own VerticalTabbedPanel.html and change the HTML mark-up to say
a table but preserve the wicket:id hierarchy:
http://wicket.apache.org";>
[[tab title]]
[panel]
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 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-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
Re: Newbie question : How do I display a tabbed list vertically rather than horizontally?
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
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 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));
> }
>
> }
>
>
> http://www.w3.org/1999/xhtml";>
>
> Janus Inventory File Upload Service
> type="image/vnd.microsoft.icon" />
>
>
>
>
>
> width="120"/>Janus Inventory File Upload
> Service
>
>
> Sign Out
>
>
>
> [tabbed panel will be
> here]
>
>
>
>
>
>
> Our Footer Here
>
>
>
>
>
> (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 :
> CoolibarKettler
> [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
>> 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
>>> AjaxTab
Re: Newbie question : How do I display a tabbed list vertically rather than horizontally?
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 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));
}
}
http://www.w3.org/1999/xhtml";>
Janus Inventory File Upload Service
type="image/vnd.microsoft.icon" />
width="120"/>Janus Inventory File Upload
Service
Sign Out
[tabbed panel will be
here]
Our Footer Here
(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 :
CoolibarKettler
[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
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-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
Re: Newbie question : How do I display a tabbed list vertically rather than horizontally?
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
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-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
>
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-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
