A while back I created a component that is a simple accordian component that can be used in any swing application.
I have massively improved this component. Let’s have a look at it :
Improvements are :
- Animation! Yes animation in a Swing application! The segments actually slide up and down.
- Inner accordians. You can imbed an accordian in an accordian.
- Icon support
- Look and feel options. Background and arrows.
Here are some more options :
The normal plain look :
Gradient on top level and no icons :
How to use this
Using this component is fairly straight forward. First construct a SideBar object. You define :
- Button type
- Text
- Texture Type
- Width
- Animation Mode
Example :
|
1 2 3 4 5 |
SideBar sideBar = new SideBar(SideBarMode.TOP_LEVEL, ButtonType.OFF, 300, AnimationMode.ON, TextureMode.GRADIENT); |
All top level SideBars should have SideBarMode.TOP_LEVEL set. All embedded sidebars should have SideBarMode.INNER_LEVEL set.
Next, add some SidebarSections. These objects define the subsections or segments that make up the accordian component. The SidebarSections need a reference to the parent Sidebar object, a title, and the component that is to be displaed in its expanded state (this might be a JList or a JTree).
|
1 2 3 4 5 6 |
SidebarSection ss1 = new SidebarSection(sideBar, "Calendars", tree, iconCal24); sideBar.addSection(ss1); SidebarSection ss1 = new SidebarSection(sideBar, "Calendars", tree, iconCal24); sideBar.addSection(ss1); SidebarSection ss1 = new SidebarSection(sideBar, "Calendars", tree, iconCal24); sideBar.addSection(ss1); |
Download Now |
||
|
||
Example Configuration Code
This is the code I used for the first screenshot
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
Icon iconMail24 = new ImageIcon("src/main/resource/img/Mail/Mail_24x24.png"); Icon iconMail16 = new ImageIcon("src/main/resource/img/Mail/Mail_16x16.png"); Icon iconCal24 = new ImageIcon("src/main/resource/img/Calendar/Calendar_24x24.png"); Icon iconGlobe24 = new ImageIcon("src/main/resource/img/Globe/Globe_24x24.png"); JPanel mainPanel = new JPanel(new BorderLayout()); JTabbedPane tabbedPane = new JTabbedPane(); JPanel listPanel = new JPanel(new BorderLayout()); SideBar sideBar = new SideBar(SideBarMode.TOP_LEVEL, ButtonType.OFF, 300, AnimationMode.ON, TextureMode.GRADIENT); JTree tree = new JTree(); SidebarSection ss1 = new SidebarSection(sideBar, "Calendars", tree, iconCal24); sideBar.addSection(ss1); SideBar innerSideBar = new SideBar(SideBarMode.INNER_LEVEL, ButtonType.OFF, -1, AnimationMode.ON, TextureMode.PLAIN); innerSideBar.addSection(new SidebarSection(innerSideBar, "American Partners", getInner1(), iconMail16)); innerSideBar.addSection(new SidebarSection(innerSideBar, "Internal", getInner2(), iconMail16)); innerSideBar.addSection(new SidebarSection(innerSideBar, "Promotions", getInner3(), iconMail16)); SidebarSection ss2 = new SidebarSection(sideBar, "Mail Groups", innerSideBar, iconMail24); sideBar.addSection(ss2); SidebarSection ss3 = new SidebarSection(sideBar, "Logistics Partners", getInner4(), iconGlobe24); sideBar.addSection(ss3); listPanel.add(sideBar, BorderLayout.WEST); listPanel.add(new JLabel("central panel", JLabel.CENTER)); tabbedPane.add("Slider Bar", listPanel); mainPanel.add(tabbedPane); |
Icons used in this component example are ‘Must Have Icons’ by VisualPharm. URL : http://www.iconarchive.com/show/must-have-icons-by-visualpharm.html
Hi,
I have downloaded the sources from Github, but it seem not to be the version you describe here.
No Texture, for example.
Where could I find the latest code ?
Thanks
Alain
Sorry, the code snippet there is a bit out of date. Look at the SliderTester.java class in the downloaded ZIP. It should show you how to setup the component.
I have one question, how I know which SideBarSection is selected to return de value of the text.
Thanks Juan.