You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by "Mathias P.W Nilsson" <ma...@snyltarna.se> on 2008/09/01 17:09:34 UTC
Panel with css styling
Hi!
I often come across this problem. A panel, let's say for checkout. ( So that
a user knows wich step he/she is in)
1. Cart
2. address
3. payment and delivery
4. control order
5. receipt
This panel should be on top of each page showing the purchase steps. Of
course then the user is at step 3 the ( 3. Payment and delivery ) should be
highlighted in some way.
What is your approach on solving this.
What I have done so far is something like this.
Create a panel with the steps in
in every page do something like
CheckoutPanel p = new CheckoutPanel();
add( p ); // Add panel to page
p.setActiveTab( 2 ) ; ... cssing the tab
Can anyone give any suggestions on this. This is not very maintainable.
Let's say I want to change the order of the tabs, Add extra tabs, then I
have to go into all pages and add, alter the index. I could of course use a
string instead but I have a feeling this could be solved in a much better
way. Suggestions?
The tabs are not clickable but could of course be a link panel of some sort.
Almost every site has one or many panels like this. A menu that should be
added on each page and highlighting the link that the user is currently
using. Like border in some way.
--
View this message in context: http://www.nabble.com/Panel-with-css-styling-tp19256267p19256267.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Panel with css styling
Posted by Martin Makundi <ma...@koodaripalvelut.com>.
Here is some Tab technique which I have used and is quite flexible and
you can even add autorization levels to the tab handling:
public class TabPage extends WebPage {
private static final List<Class<? extends Panel>> tabs = Arrays.asList(
/**
* Panels
*/
XyzPanel.class,
ZyzPanel.class,
FooPanel.class,
BarPanel.class
// ... etc ...
);
protected static final String NAVIGATION_TABS = "navigationTabs";
protected SimpleAttributeModifier current;
private final TabbedPanel tabbedPanel;
private final List<NamedTab> namedTabs;
public TabPage(PageParameters parameters) { // If you want to set
default tab from parameters
this();
String tabSelectionKey = Panel.class.getSimpleName();
String tabClassName = parameters.getString(tabSelectionKey);
if (tabClassName != null) {
for (NamedTab namedTab : namedTabs) {
if (tabClassName.equals(namedTab.getTabClass().getName())) {
tabbedPanel.setSelectedTab(namedTabs.indexOf(namedTab));
break;
}
}
}
}
public TabPage() {
current = new SimpleAttributeModifier("class", "current");
namedTabs = getNamedTabs();
add(tabbedPanel = (TabbedPanel) new TabbedPanel(NAVIGATION_TABS,
namedTabs) {
/**
* Generates a loop item used to represent a specific tab's
* <code>li</code> element.
*
* @param tabIndex
* @return new loop item
*/
@Override
protected LoopItem newTabContainer(int tabIndex) {
return new LoopItem(tabIndex) {
private static final long serialVersionUID = 1L;
protected void onComponentTag(ComponentTag tag) {
super.onComponentTag(tag);
String cssClass = (String) tag.getString("class");
if (cssClass == null) {
cssClass = " ";
}
NamedTab namedTab = namedTabs.get(getIteration());
String context;
if (namedTab.isSpecialTab()) {
context = "adminTab";
} else {
context = "normalTab";
}
cssClass += " " + context;
if (getIteration() == getSelectedTab()) {
cssClass += " selected_" + context;
}
if (getIteration() == getTabs().size() - 1) {
cssClass += " last";
}
tag.put("class", cssClass.trim());
}
};
}
@Override
protected WebMarkupContainer newLink(String linkId, int index) {
WebMarkupContainer link = super.newLink(linkId, index);
NamedTab namedTab = namedTabs.get(index);
String tooltip = (String) namedTab.getTitle().getObject();
if (namedTab.isSpecialTab()) {
tooltip = getString("admin_panel_prefix") + " " + tooltip;
}
link.add(new SimpleAttributeModifier("title", tooltip));
return link;
}
}.setVisible(0 < namedTabs.size()));
}
/**
* @return List<Class<? extends TakpPanel>>
*/
private List<NamedTab> getNamedTabs() {
List<NamedTab> filteredTabs = new LinkedList<NamedTab>();
for (Class<? extends Panel> tabClass : tabs) {
boolean specialTab = false;
// Here you could actually do some role-based
filtering and show some tabs while hiding others etc.
filteredTabs.add(new NamedTab(tabClass, specialTab));
}
return filteredTabs;
}
}
public class NamedTab extends AbstractTab {
private final Class<? extends Panel> tabClass;
private final boolean specialTab;
/**
* @param tabClass
*/
public NamedTab(Class<? extends Panel> tabClass) {
this(tabClass, false);
}
public NamedTab(Class<? extends Panel> tabClass, boolean specialTab) {
// TODO Tässä tabit nimetään, olettaen, että properti tiedostosta löytyy nimi
super(new Model(new Localizer().getString("tab_" +
tabClass.getSimpleName(), (Component) null, (IModel) null))); // TODO
Component -> parent?
this.tabClass = tabClass;
this.specialTab = specialTab;
}
@Override
public Panel getPanel(String id) {
try {
return (Panel)
tabClass.getConstructor(String.class).newInstance(id).setOutputMarkupId(true);
} catch (Exception e) {
throw new IllegalArgumentException(e);
}
}
public Class<? extends Panel> getTabClass() {
return tabClass;
}
public boolean isSpecialTab() {
return specialTab;
}
}
**
Martin
2008/9/1 Mathias P.W Nilsson <ma...@snyltarna.se>:
>
> Hi!
>
> I often come across this problem. A panel, let's say for checkout. ( So that
> a user knows wich step he/she is in)
> 1. Cart
> 2. address
> 3. payment and delivery
> 4. control order
> 5. receipt
>
> This panel should be on top of each page showing the purchase steps. Of
> course then the user is at step 3 the ( 3. Payment and delivery ) should be
> highlighted in some way.
>
> What is your approach on solving this.
>
> What I have done so far is something like this.
>
> Create a panel with the steps in
> in every page do something like
>
> CheckoutPanel p = new CheckoutPanel();
> add( p ); // Add panel to page
> p.setActiveTab( 2 ) ; ... cssing the tab
>
> Can anyone give any suggestions on this. This is not very maintainable.
>
> Let's say I want to change the order of the tabs, Add extra tabs, then I
> have to go into all pages and add, alter the index. I could of course use a
> string instead but I have a feeling this could be solved in a much better
> way. Suggestions?
>
> The tabs are not clickable but could of course be a link panel of some sort.
> Almost every site has one or many panels like this. A menu that should be
> added on each page and highlighting the link that the user is currently
> using. Like border in some way.
> --
> View this message in context: http://www.nabble.com/Panel-with-css-styling-tp19256267p19256267.html
> Sent from the Wicket - User mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> 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: Panel with css styling
Posted by "Mathias P.W Nilsson" <ma...@snyltarna.se>.
Thanks!
I have tested Igors idé and this is what I have so far
public abstract class CheckoutStepPanel extends Panel{
private static final long serialVersionUID = 1L;
public String CSS_ACTIVE_STEP = "selected";
/**
* Add Steps as enum. If the Checkout changes then
* A serious amount of refactoring must be done
*/
public enum Step{
CART( "checkout.step.cart" ),
ADDRESS( "checkout.step.address" ),
PAYMENT( "checkout.step.payment" ),
CONTROL( "checkout.step.control" ),
RECEIPT( "checkout.step.receipt" );
private String resourceKey;
Step( String resourceKey ){
this.resourceKey = resourceKey;
}
public String getResourceKey(){
return this.resourceKey;
}
}
// TODO: Add back navigation if the active step is minor to the current
step
public CheckoutStepPanel( String id ){
super( id );
add( new ListView( "steps" , Arrays.asList( Step.values() ) ){
private static final long serialVersionUID = 1L;
@Override
protected void populateItem(ListItem listItem ) {
Step step = ( Step ) listItem.getModelObject();
Label item = new Label( "step", new ResourceModel( step.getResourceKey()
) );
if( getActiveStep().equals( step ) ){
// Support multiple css classes
item.add( new AttributeAppender( "class", new Model( CSS_ACTIVE_STEP ),
" " ));
}
listItem.add( item );
}
} );
}
protected abstract Step getActiveStep();
}
Implementation
add( new CheckoutStepPanel( "Steper" ){
@Override
protected Step getActiveStep() {
return Step.ADDRESS;
}
});
I have made the steps in an enum because I can't just add another step
without adding a new page, markup etc.
Questions:
1. Is the resource implementation ok?
2. Other suggestions?
--
View this message in context: http://www.nabble.com/Panel-with-css-styling-tp19256267p19257876.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Panel with css styling
Posted by Igor Vaynberg <ig...@gmail.com>.
use markup inheritance and a base panel class:
class basecheckoutpanel extends panel {
protected abstract int getmystepnumber();
public basecheckoutpanel() {
add(some component that displays all steps and highlights one
returned by getmystepnumber());
}
}
class addressstep extends basecheckoutpanel {
protected int getmystepnumber() { return 1; }
}
-igor
On Mon, Sep 1, 2008 at 8:09 AM, Mathias P.W Nilsson
<ma...@snyltarna.se> wrote:
>
> Hi!
>
> I often come across this problem. A panel, let's say for checkout. ( So that
> a user knows wich step he/she is in)
> 1. Cart
> 2. address
> 3. payment and delivery
> 4. control order
> 5. receipt
>
> This panel should be on top of each page showing the purchase steps. Of
> course then the user is at step 3 the ( 3. Payment and delivery ) should be
> highlighted in some way.
>
> What is your approach on solving this.
>
> What I have done so far is something like this.
>
> Create a panel with the steps in
> in every page do something like
>
> CheckoutPanel p = new CheckoutPanel();
> add( p ); // Add panel to page
> p.setActiveTab( 2 ) ; ... cssing the tab
>
> Can anyone give any suggestions on this. This is not very maintainable.
>
> Let's say I want to change the order of the tabs, Add extra tabs, then I
> have to go into all pages and add, alter the index. I could of course use a
> string instead but I have a feeling this could be solved in a much better
> way. Suggestions?
>
> The tabs are not clickable but could of course be a link panel of some sort.
> Almost every site has one or many panels like this. A menu that should be
> added on each page and highlighting the link that the user is currently
> using. Like border in some way.
> --
> View this message in context: http://www.nabble.com/Panel-with-css-styling-tp19256267p19256267.html
> Sent from the Wicket - User mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> 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