Directory

← Back

Melodion

A light-weight alternative to Accordion.

Author

Rating

Popularity

<100

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"));

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Initial release.

Released
2011-12-01
Maturity
BETA
License
GNU Affero General Public License v3.0

Compatibility

Framework
Vaadin 6.2+
Browser
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Internet Explorer
iOS Browser
Android Browser

Melodion - Vaadin Add-on Directory

A light-weight alternative to Accordion. Melodion - Vaadin Add-on Directory
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.
Online