Differences
This shows you the differences between two versions of the page.
|
menus [2012/03/31 21:29] srdjan.lukovic created |
menus [2012/07/09 10:44] (current) srdjan.lukovic [GUI Code] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Menus Sample ====== | + | ====== Menus ====== |
| - | This sample introduces menu components and presents different menu styles. | + | |
| + | **Menus** is a [[SOLoist Sample Applications|SOLoist sample application]] that demonstrates menu components and different menu styles. | ||
| ==== Live example ==== | ==== Live example ==== | ||
| - | [[http://soloistdemo.org/SampleApplications/menus.html]]\\ | + | [[http://soloistdemo.org/SampleApplications/menus.html]] |
| + | |{{screen:menus.png?250}}| | ||
| ===== UML Model ===== | ===== UML Model ===== | ||
| - | {{menus.png}} | + | None. |
| ===== Business Logic Code ===== | ===== Business Logic Code ===== | ||
| - | <code java> | + | None. |
| - | //... | + | |
| - | </code> | + | |
| ===== GUI Code ===== | ===== GUI Code ===== | ||
| <code java> | <code java> | ||
| - | //... | + | package rs.sol.sampleapps; |
| + | |||
| + | import org.apache.commons.lang.ArrayUtils; | ||
| + | |||
| + | import rs.sol.soloist.helpers.init.Initializer; | ||
| + | import rs.sol.soloist.helpers.init.InitializerFailedException; | ||
| + | import rs.sol.soloist.server.builtindomains.builtindatatypes.Text; | ||
| + | import rs.sol.soloist.server.guiconfiguration.components.GUIApplicationComponent; | ||
| + | import rs.sol.soloist.server.guiconfiguration.components.GUIDeckComponent; | ||
| + | import rs.sol.soloist.server.guiconfiguration.components.GUILabelComponent; | ||
| + | import rs.sol.soloist.server.guiconfiguration.components.GUILinkComponent; | ||
| + | import rs.sol.soloist.server.guiconfiguration.components.GUIMenuComponent; | ||
| + | import rs.sol.soloist.server.guiconfiguration.components.GUIMenuItemComponent; | ||
| + | import rs.sol.soloist.server.guiconfiguration.components.GUIPanelComponent; | ||
| + | import rs.sol.soloist.server.guiconfiguration.construction.GUIComponentBinding; | ||
| + | import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIBufferComponent; | ||
| + | import rs.sol.soloist.server.server.SoloistServiceServlet; | ||
| + | |||
| + | public enum Menus implements Initializer { | ||
| + | |||
| + | INSTANCE; | ||
| + | |||
| + | private GUIPanelComponent[] array; | ||
| + | private String[] strings; | ||
| + | |||
| + | @Override | ||
| + | public void init() throws InitializerFailedException { | ||
| + | GUIApplicationComponent application = new GUIApplicationComponent(); | ||
| + | application.setName("MenusSample"); | ||
| + | SoloistServiceServlet.registerApplication(application); | ||
| + | GUIPanelComponent root = GUIPanelComponent.createFlow(application); | ||
| + | |||
| + | GUILabelComponent title = GUILabelComponent.create(root, "Menus"); | ||
| + | title.setStyle("titleStyle"); | ||
| + | |||
| + | GUIPanelComponent menuPanel = GUIPanelComponent.createFlow(root); | ||
| + | GUIDeckComponent deck = GUIDeckComponent.create(root); | ||
| + | |||
| + | strings = new String[] { "", "A", "A1", "A2", "B", "B1", "B2", "C", "C1", "C2", "D", "D1", "D2", "E", "E1", "E2", "F", "F1", "F2", "G", "G1", "G2", "H" }; | ||
| + | array = new GUIPanelComponent[strings.length]; | ||
| + | for (int i = 0; i < strings.length; i++) { | ||
| + | array[i] = GUIPanelComponent.createFlow(deck); | ||
| + | GUILabelComponent.create(array[i], strings[i]).setStyle("largeText"); | ||
| + | } | ||
| + | |||
| + | createGWTMenu(menuPanel, true); | ||
| + | createGWTMenu(menuPanel, false); | ||
| + | createDropDownMenu(menuPanel); | ||
| + | } | ||
| + | /** | ||
| + | * Custom drop down menu using links, depends highly on CSS | ||
| + | */ | ||
| + | private void createDropDownMenu(GUIPanelComponent mainPanel) { | ||
| + | GUIPanelComponent menu = GUIPanelComponent.createFlow(mainPanel); | ||
| + | menu.setStyle("#menu"); | ||
| + | |||
| + | GUIPanelComponent menuWrapper = GUIPanelComponent.createFlow(menu); | ||
| + | menuWrapper.setStyle("#menu_wrapper"); | ||
| + | |||
| + | GUILinkComponent[] links = new GUILinkComponent[strings.length]; | ||
| + | |||
| + | for (int i = 0; i < strings.length; i++) { | ||
| + | if (i == 0) { | ||
| + | links[i] = GUILinkComponent.create(menuWrapper, "Home", "javascript:void"); | ||
| + | links[i].setStyle("sol-Link-active"); | ||
| + | } else if (i == strings.length - 1) { | ||
| + | links[i] = GUILinkComponent.create(menuWrapper, "H", "javascript:void"); | ||
| + | } else if (i % 3 == 1) { | ||
| + | GUIPanelComponent top = GUIPanelComponent.createFlow(menuWrapper); | ||
| + | top.setStyle("#topmenu"); | ||
| + | links[i] = GUILinkComponent.create(top, strings[i], "javascript:void"); | ||
| + | GUIPanelComponent sub = GUIPanelComponent.createFlow(top); | ||
| + | sub.setStyle("#submenu"); | ||
| + | links[i + 1] = GUILinkComponent.create(sub, strings[i + 1], "javascript:void"); | ||
| + | links[i + 2] = GUILinkComponent.create(sub, strings[i + 2], "javascript:void"); | ||
| + | } | ||
| + | GUIComponentBinding.create(links[i].opOpenLink(), array[i].ipShow()); | ||
| + | } | ||
| + | |||
| + | menuHighlighter(mainPanel, links[0], (GUILinkComponent[]) ArrayUtils.subarray(links, 1, strings.length)); | ||
| + | } | ||
| + | |||
| + | /** | ||
| + | * Highlights selected menu or sub-menu. | ||
| + | */ | ||
| + | private void menuHighlighter(GUIPanelComponent container, GUILinkComponent home, GUILinkComponent... orderedMenuLinks) { | ||
| + | GUIBufferComponent[] highlightBuffers = new GUIBufferComponent[orderedMenuLinks.length / 3 + 1]; | ||
| + | GUIBufferComponent homeBuffer = GUIBufferComponent.create(container, false, Text.fromString("active")); | ||
| + | GUIComponentBinding.create(homeBuffer.opOutput(), home.ipAddStyle()); // addStyle pin changes CSS class adding "active" | ||
| + | GUIComponentBinding.create(home.opOpenLink(), homeBuffer.ipSend()); | ||
| + | for (int i = 0; i < orderedMenuLinks.length; i++) { | ||
| + | if (i % 3 == 0) { | ||
| + | highlightBuffers[i / 3] = GUIBufferComponent.create(container, false, Text.fromString("active")); | ||
| + | GUIComponentBinding.create(highlightBuffers[i / 3].opOutput(), orderedMenuLinks[i].ipAddStyle()); | ||
| + | GUIComponentBinding.create(orderedMenuLinks[i].opOpenLink(), highlightBuffers[i / 3].ipSend()); | ||
| + | for (int j = 0; j < orderedMenuLinks.length; j += 3) | ||
| + | if (!orderedMenuLinks[j].equals(orderedMenuLinks[i])) | ||
| + | GUIComponentBinding.create(highlightBuffers[i / 3].opOutput(), orderedMenuLinks[j].ipRemoveStyle()); | ||
| + | GUIComponentBinding.create(homeBuffer.opOutput(), orderedMenuLinks[i].ipRemoveStyle()); | ||
| + | GUIComponentBinding.create(highlightBuffers[i / 3].opOutput(), home.ipRemoveStyle()); | ||
| + | } else { | ||
| + | GUIComponentBinding.create(orderedMenuLinks[i].opOpenLink(), highlightBuffers[i / 3].ipSend()); | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | private void createGWTMenu(GUIPanelComponent mainPanel, boolean isHorizontal) { | ||
| + | GUIMenuComponent myMainMenu = GUIMenuComponent.create(mainPanel, isHorizontal); | ||
| + | GUIMenuItemComponent[] items = new GUIMenuItemComponent[strings.length]; | ||
| + | |||
| + | for (int i = 0; i < strings.length; i++) { | ||
| + | if (i == 0) { | ||
| + | items[i] = GUIMenuItemComponent.create(myMainMenu, "Home"); | ||
| + | } else if (i == strings.length - 1) { | ||
| + | items[i] = GUIMenuItemComponent.create(myMainMenu, strings[i]); | ||
| + | } else if (i % 3 == 1) { | ||
| + | items[i] = GUIMenuItemComponent.create(myMainMenu, strings[i]); | ||
| + | GUIMenuComponent subA = GUIMenuComponent.createSubMenu(items[i], !isHorizontal); | ||
| + | items[i + 1] = GUIMenuItemComponent.create(subA, strings[i + 1]); | ||
| + | items[i + 2] = GUIMenuItemComponent.create(subA, strings[i + 2]); | ||
| + | } | ||
| + | GUIComponentBinding.create(items[i].opClick(), array[i].ipShow()); | ||
| + | } | ||
| + | } | ||
| + | } | ||
| </code> | </code> | ||