Announcement Announcement Module
Collapse
No announcement yet.
Custom menu on custom view Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • Custom menu on custom view

    Hi there,

    I am trying to generate custom views for a project. For this i am using tiles, jspx and custom controllers as well.

    I the main window for the application i want to have a header, one fixed horizontal menu bar, one vertical context menu to the left a main tiles for content in the center.

    For the fixed horizontal menu bar i tried to use a dojo menu and the menu used provided by roo (as the one displaying left on the scaffold views).

    The dojo menu worked, but it somehow messed up my tiles structure so i tried to use the menu from roo, but it wont display.

    Here is some of the code of my jspx file for the tiles containing the menu bar:

    Shot at dojo menu:
    HTML Code:
      	<script type="text/javascript">
      		dojo.require("dijit.Menu");
      		dojo.require("dijit.MenuBar");
      		dojo.require("dijit.PopupMenuBarItem");
    
      		var menuBar;
    
      		dojo.addOnLoad(function(){
      			 upMenuBar = new dijit.MenuBar({});
    
      	        var pSubMenu = new dijit.Menu({});
      	        pSubMenu.addChild(new dijit.MenuItem({
      	            label: "Item #1"
      	        }));
      	        pSubMenu.addChild(new dijit.MenuItem({
      	            label: "Item #2"
      	        }));
      	        upMenuBar.addChild(new dijit.PopupMenuBarItem({
      	            label: "Inicio",
      	            popup: pSubMenu
      	        }));
    
      	        var pSubMenu2 = new dijit.Menu({});
      	        pSubMenu2.addChild(new dijit.MenuItem({
      	            label: "Item #1"
      	        }));
      	        .
                    .
                    .
      		});
      	</script>
    Shot at spring menu:
    HTML Code:
    	<menu:menu id="upmenu" z="">
    		<menu:category id="home_upmenu" z="">
    			<menu:item id="home" label="Inicio" url="/domotica" z=""/>
    		</menu:category>
    		<menu:category id="settings_upmenu" z="">
    			<menu:item id="settings" label="Mantenimiento" url="/domotica/devices" z=""/>
    		</menu:category>
    		<menu:category id="scenes_upmenu" z="">
    			<menu:item id="scenes" label="Escenas" url="/domotica/scenes" z=""/>
    		</menu:category>
    		<menu:category id="logs_upmenu" z="">
    			<menu:item id="logs" label="Reportes" url="/domotica/logs" z=""/>
    		</menu:category>
    	</menu:menu>
    Can anyone point me in the right direction?

    Thanks!

  • #2
    I have the same problem, anyone can help? Thanks.

    Comment


    • #3
      Finally, I got my popup menu done by using Css.

      Comment


      • #4
        I think CSS based menus is generally a safer choice given that some people still disable or block JS. Some are also on devices which use Browsers that don't or only partially support JS. From that perspective CSS solutions are better as it is more likely to work for most users. The current Roo scaffolding should still work if JS is not available (it should just fall back to plain HTML + CSS).

        Comment


        • #5
          I also used CSS

          Hi,

          I also end up using CSS to modify the menu provided by roo in order to display ir horizontally.

          The roo menu is built like:
          HTML Code:
          <ul>
                <li>
                    <h2>item1</h2>
                    <ul>
                        <li>subitem1.1</li>
                        <li>subitem1.2</li>
                    </ul> 
                </li>
                <li>
                    <h2>item2</h2>
                    <ul>
                        <li>subitem2.1</li>
                        <li>subitem2.2</li>
                    </ul> 
                </li>
                <li>
                    <h2>item3</h2>
                    <ul>
                        <li>subitem3.1</li>
                        <li>subitem3.2</li>
                    </ul> 
                </li>
          </ul>
          The CSS to position the menu horizontally depends on what you really want to do. Important is to place the first li elements with float:left and the nested li have to be styled separately, maybe something like:

          Code:
          #menuBarHolder ul{
          	list-style: none;		
          }
          
          #menuBarHolder ul li{
          	float: left;	
          }
          
          #mainbarmenu li ul li{
          	position: relative;	
          }
          Thanks for the replies.
          Alles gute!

          Comment


          • #6
            Thanks for sharing this! Horizontal menus only make sense for apps that don't have the need for large menus (dozens of domain objects).

            I think it would be awesome if you could package these bits up in a separate add-on and make it available to interested Roo users.

            Let me know what you think and I can point you to the relevant documentation if you are interested in doing that. It should not take more than an hour or so to develop the add-on.

            Cheers,
            Stefan

            Comment


            • #7
              Hi Stefan,

              Yes, I am interested. I must say that it would be something new to me (I have never developed an add-on), and I consider that i still have to improve my programming skills.

              If you help me with the documentation I can take a look and see what I can do about it.

              Here is my email address in case you need it: [email protected]
              Have a nice day.

              Comment

              Working...
              X