Differences

This shows you the differences between two versions of the page.

Link to this comparison view

menus [2012/03/31 21:34]
srdjan.lukovic 		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 =====
Line 14: Line 16:
 ===== 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>

Trace:

Print/export