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:
wicket:panel xmlns:wicket=http://wicket.apache.org;
div wicket:id=tabs-container class=tab-row
ul
li wicket:id=tabsa href=# wicket:id=linkspan
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=linkspan
wicket:id=title[[tab title]]/span/a
/li
/ul
/div
/td
tdnbsp;/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 tcoll...@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-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
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 tcoll...@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-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?
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 ListITab 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
titleJanus 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=pageTitleimg src=images/janus.png height=120
width=120/br/Janus Inventory File Upload
Service
/div
ul style=list-style-type: none
lia href=network_auth_logoutSign 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=footerOur 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 :
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 tcoll...@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-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 tcoll...@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 ListITab 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
titleJanus 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=pageTitleimg src=images/janus.png height=120
width=120/br/Janus Inventory File Upload
Service
/div
ul style=list-style-type: none
lia href=network_auth_logoutSign 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=footerOur 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 :
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 tcoll...@greatergood.com
wrote:
I am rather new to wicket and am trying to do something that ought to be
