Melodion

A light-weight alternative to Accordion.

View larger

Close

A light-weight accordion menu, loosely based on com.vaadin.addon.chameleon.SidebarMenu and org.vaadin.jouni.animator.Disclosure.

This add-on depends on the Animator add-on. Make sure you include that jar in your project, too. (If you're using Maven, then that should happen automatically.)

To use the default styles, as shown in the demo and the screenshot, add the following CSS to your application's theme:

@IMPORT url("../chameleon/styles.css"); @IMPORT url("../melodion/melodion.css");

Otherwise, you will have to style it yourself.

Note that Melodion actually does functionally work in IE 6 and 7, but the default styling will not show correctly in those browsers. You will have to provide your own compatible stylesheets in those cases.

Sample code

        Melodion melodion = new Melodion();

        Tab templates = melodion.addTab(new Label("Templates"));
        templates.addButton(new NativeButton("Site-wide templates"));
        templates.addButton(new NativeButton("Cross-site templates"));

        melodion.addTab(new Label("Security"));
        melodion.addTab(new Label("Configuration"));

        melodion.addSpacer();

        Tab tools = melodion.addTab(new Label("Tools"));
        tools.addButton(new NativeButton("Browser"));
        tools.addButton(new NativeButton("Export your design"));
        tools.addButton(new NativeButton("Import templates"));

        melodion.addTab(new Label("Packager"));
        melodion.addTab(new Label("Store"));

        melodion.addSpacer();

        Label workItems = new Label("Work items");
        workItems.setCaption("5 new");
        melodion.addTab(workItems);

        Label moderation = new Label("Moderation");
        moderation.setCaption("2 new");
        melodion.addTab(moderation);
        melodion.addTab(new Label("Internal messages"));

        melodion.addSpacer();

        Label welcomeBoard = new Label("Welcome board");
        welcomeBoard.setIcon(new ThemeResource("../runo/icons/16/note.png"));
        melodion.addTab(welcomeBoard);

        Label settings = new Label("Settings");
        settings.setIcon(new ThemeResource("../runo/icons/16/settings.png"));
        melodion.addTab(settings);

        Label profile = new Label("Profile");
        profile.setIcon(new ThemeResource("../runo/icons/16/user.png"));
        melodion.addTab(profile);

        melodion.addSpacer();

        Label systemMessagesLabel = new Label("System messages");
        systemMessagesLabel.setCaption("3 new");
        Tab systemMessagesTab = melodion.addTab(systemMessagesLabel);
        systemMessagesTab.addButton(new NativeButton("Warnings"));
        systemMessagesTab.addButton(new NativeButton("Errors"));

        melodion.addTab(new Label("Audit log"));

Links

• Author Homepage
• Online Demo
• Issue Tracker
• Source Code
• Discussion Forum

Compatibility