New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add a sub-navigation bar for the navbar #80

Closed
rbalusup opened this Issue Oct 16, 2012 · 8 comments

Comments

Projects
None yet
2 participants
@rbalusup
Copy link

rbalusup commented Oct 16, 2012

Hi,

I am newbie to wicket & bootstrap and trying to add a sub-navigation bar for the navbar. The navbar component is very good. I am wondering how to add the sub-navigation bar. For each NavbarButton on the navbar, there should be corresponding sub-navigation bar buttons. That is what I am trying to achieve but couldn't succeed. Can you please help me out to achieve that?

Thanks in Advance.
rbalusup

@l0rdn1kk0n

This comment has been minimized.

Copy link
Owner

l0rdn1kk0n commented Oct 17, 2012

do you need something like this? (Dropdown Button)

DropDownButton dropdown = new NavbarDropDownButton("button", Model.of("More..."))
                .addButton(new MenuPageButton<HomePage>(HomePage.class, Model.of("Overview")).setIcon(new Icon(IconType.Home)))
                .addButton(new MenuDivider())
                .addButton(new AjaxLink<String>("button", Model.of("AjaxLink")) {
                    @Override
                    protected void onInitialize() {
                        super.onInitialize();

                        setBody(getDefaultModel());
                        add(new ButtonBehavior(ButtonType.Menu));
                    }

                    @Override
                    public void onClick(AjaxRequestTarget target) {
                        target.appendJavaScript("alert('clicked');");
                    }
                })
                .addButton(new MenuHeader(Model.of("Themes"))).setIcon(IconType.AlignJustify);

This code comes from the samples BasePage (https://github.com/l0rdn1kk0n/wicket-bootstrap/blob/master/samples/src/main/java/de/agilecoders/wicket/samples/pages/BasePage.java)

Or do you mean an Affix component like twitter bootstrap uses it for their subnavigation? (http://twitter.github.com/bootstrap/javascript.html#affix)

@rbalusup

This comment has been minimized.

Copy link
Author

rbalusup commented Oct 17, 2012

Thanks for the quick response. Sorry, I am not aware of the Affix component and how to use it. Here is what I am trying to do....

My Html for the navbar:
<wicket:panel>
<div class="nav_wrap">
<nav class="wrap clearfix">
<ul wicket:enclosure="navLeftList" id="navigation" class="clearfix">
<li wicket:id="navLeftList">
<a wicket:id="button">Home</a>
</li>
</ul>
<ul wicket:enclosure="navRightList" id="sub-navigation" class="clearfix">
<li wicket:id="navRightList">
<a wicket:id="button">Home</a>
</li>
</ul>
</nav>
</div>
</wicket:panel>

Usage of the navbar in the BasePage:

.....

protected AdminNavbar newNavbar(String markupId) {
Navbar navbar = new Navbar(markupId);

    navbar.setPosition(Navbar.Position.NONE); // show dark navbar
    navbar.invert(false);

    navbar.addButton(
            Navbar.ButtonPosition.LEFT,
            new NavbarButton<HomePage<T>>(HomePage.class, Model.of("Dashboard")),
            new NavbarButton<ApplicationsPage<T>>(ApplicationsPage.class, Model.of("Applications")),
            new NavbarButton<KeysPage<T>>(KeysPage.class, Model.of("Keys")),
            new NavbarButton<ServersPage<T>>(ServersPage.class, Model.of("Servers")), 
            new NavbarButton<ReportsPage<T>>(ReportsPage.class, Model.of("Reports")),
            new NavbarButton<UsersPage<T>>(UsersPage.class, Model.of("Users")));

    navbar.addButton(
            AdminNavbar.ButtonPosition.RIGHT,
            new NavbarButton<HomePage<T>>(HomePage.class, Model.of("Home")),
            new NavbarButton<ApplicationsPage<T>>(ConfigureApplicationPage.class, Model.of("Configure Application")),
            new NavbarButton<ApplicationsPage<T>>(AddApplicationPage.class, Model.of("Add Application")),
            new NavbarButton<KeysPage<T>>(KeysPage.class, Model.of("Keys")),
            new NavbarButton<KeysPage<T>>(EncryptionSchemesPage.class, Model.of("Encryption Schemes")),
            new NavbarButton<ServersPage<T>>(ServersPage.class, Model.of("Servers")), 
            new NavbarButton<ReportsPage<T>>(CloudActivityPage.class, Model.of("Cloud Activity")),
            new NavbarButton<ReportsPage<T>>(AdminActivityPage.class, Model.of("Admin Activity")),
            new NavbarButton<UsersPage<T>>(UsersPage.class, Model.of("Users")));

    return navbar;
}

CSS:
.nav_wrap {
background: url("../img/nav_bg.png") repeat-x scroll left top
transparent;
height: 78px;
margin: 35px 0 20px;
min-width: 1024px;
}

#navigation {
text-align: left;
}

#navigation li {
float: left;
background: url("../img/separator.png") no-repeat right bottom;
}

#navigation li.active {
background: #fff url("../img/nav_hover.png") no-repeat left top;
height: 41px;
}

#navigation li.remove {
background: none;
}

#navigation li.active a,#navigation li.active a:link,#navigation li.active a:visited
{
color: #017BB6;
text-shadow: none;
}

#navigation li a,#navigation li a:link,#navigation li a:visited {
display: block;
font: 14px/37px Helvetica, sans-serif;
color: #fff;
width: 128px;
text-align: center;
text-shadow: none;
}

#navigation li a:hover {
background: transparent url("../img/navhover.png") repeat-x left top;
text-decoration: none;
}

#sub-navigation {
text-align: left;
margin-left: 5px;
}

#sub-navigation li {
float: left;
background: url("../img/separator1.png") no-repeat right bottom;
}

#sub-navigation li a,#sub-navigation li a:link,#sub-navigation li a:visited
{
color: #60605E;
display: block;
font: 12px/32px Arial, Helvetica, sans-serif;
height: 35px;
text-align: center;
width: 142px;
}

#sub-navigation li a:hover,#sub-navigation li a.selected {
text-decoration: none;
color: #969696;
}

On the whole, what I am trying to do is, If I click a button on the top nav bar (not a dropdown), the corresponding Button(s) should be displayed on the sub-navigation bar. If we click another button on the navbar, the buttons on the sub-navigation bar should be replaced with the corresponding active button.

I've tried using the wicket RepeatingView to iterate over the menuItems but could not able to succeed. breaking my head since 3 days :(.

Can you please help me out providing me right direction?

Thanks in advance!
RBalusup

@l0rdn1kk0n

This comment has been minimized.

Copy link
Owner

l0rdn1kk0n commented Oct 17, 2012

ah, ok, i understand. You mean something like this: http://www.techyv.com/questions/how-can-i-add-sub-navbar-my-navigation-bar

@rbalusup

This comment has been minimized.

Copy link
Author

rbalusup commented Oct 17, 2012

Yeah, you got it what I am asking. Thank you!! But the only thing that I need is, The sub-navigation menu items should change based on the navbar menu item button. Each sub-navigation button action should show respective page.

@ghost ghost assigned l0rdn1kk0n Oct 18, 2012

@rbalusup

This comment has been minimized.

Copy link
Author

rbalusup commented Oct 19, 2012

Can you please throw some light on the issue that I am facing and help me out. Please provide me some direction.

Thanks in advance!

@l0rdn1kk0n

This comment has been minimized.

Copy link
Owner

l0rdn1kk0n commented Oct 26, 2012

you can use the wicket event system to propagate a button click on navbar to show/hide different button groups on sub-navbar.

// add new link to navbar
new NavbarAjaxLink("button") {

            @Override
            protected void onClick(AjaxRequestTarget target) {
                send(getPage(), Broadcast.BREADTH, new ToggleSubNavbarState(target, SubNavGroup.A));
            }

}

// define groups
public enum SubNavGroup {
   A, B;
}

// event to propagate
public class ToggleSubNavbarState {
        private final AjaxRequestTarget target;
        private final SubNavGroup group;

        /**
         * Constructor
         * 
         * @param target
         */
        public ToggleSubNavbarState(AjaxRequestTarget target, SubNavGroup group) {
            this.target = target;
            this.group = group;
        }

        /** @return nav bar button group id */
        public SubNavGroup getGroup() {
            return group;
        }

        /** @return ajax request target */
        public AjaxRequestTarget getTarget() {
            return target;
        }
}

// on sub navbar
[...]
        /**
         * @see org.apache.wicket.Component#onEvent(org.apache.wicket.event.IEvent)
         */
        @Override
        public void onEvent(IEvent<?> event)
        {
            super.onEvent(event);

            if (event.getPayload() instanceof ToggleSubNavbarState) {
                ToggleSubNavbarState stateEvent = (ToggleSubNavbarState)event.getPayload();

                hideAllGroups();
                showGroup(stateEvent.getGroup());

                stateEvent.getTarget().add(this);
            }
        }
[...]
@rbalusup

This comment has been minimized.

Copy link
Author

rbalusup commented Oct 27, 2012

Thank you very much for the response.

I really appreciate your time to look at my problem and helping me out.

How and where should we call the onEvent method? How should we add the SubNavbar buttons/links?

Here is my understanding...

  1. For every NavbarAjaxLink, we need to have respective SubNavbar group.
  2. I am adding the NavbarAjaxLink's like this for the Navbar...
    navbar.addButton(Navbar.ButtonPosition.LEFT,
    new NavbarAjaxLink("button", Model.of("Dashboard")) {
    private static final long serialVersionUID = 1L;
    public void onClick(org.apache.wicket.ajax.AjaxRequestTarget target) {
    send(getPage(), Broadcast.BREADTH, new ToggleSubNavbarState(target, DashNavGroup.dashboard));
    };
    },
    new NavbarAjaxLink("button", Model.of("Applications")) {
    private static final long serialVersionUID = 1L;
    public void onClick(org.apache.wicket.ajax.AjaxRequestTarget target) {
    send(getPage(), Broadcast.BREADTH, new ToggleSubNavbarState(target, AppNavGroup.applications));
    };
    }, ...};
    Am I going in right direction?
@l0rdn1kk0n

This comment has been minimized.

Copy link
Owner

l0rdn1kk0n commented Nov 21, 2012

please have a look at IssuesPage in samples module. There is a demo that shows how to sync two navbars.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment