Pergola menus

The Menu class instantiates its components and you don't normally need to instantiate explicitly the MenuList and MenuItem classes. The menu bar group, whether visible or not, is the container of the menu. The Window class automatically builds a Menubar instance if the property menu has been set during instantiation.

Using theme "herman" with skin "rubber" as defined in config file.

View as standalone SVG

In this example you can see one of the advantages of the split construction method. For a given object you can just define its components, keeping a clean structure that gives you at a glance control. The advantage is more apparent as you work in more complex environments, it can reduce development time and can facilitate maintenance:

var myObject = {
  menubar : new pergola.Menubar(),
  menu : {
    menu1 : new pergola.Menu("Menu 1"),
    menu2 : new pergola.Menu("Menu 2")
  },
  ...
};

The deferred construction of the components:

myObject.menubar.build({
  x : 200,
  y : 100
});

myObject.menu.menu1.build({
  owner : myObject,
  parent : myObject.menubar.group,
  title : myObject.menu.menu1.name,
  items : {
    item1 : {
      string : "Menu Item #1",
      check : true,
      fn : myObject.message
    },
    item2 : {
      string : "Menu Item #2",
      check : false,
      fn : myObject.message
    },
    food : {
      string : "Food",
      submenu : {
        items : {
          organic : {
            string : "Organic (OOS)",
            active : false,
            fn : myObject.message
          },
          fruits : {
            string : "Fruits",
            submenu : {
              items : {
                bananas : {
                  string : "Bananas",
                  check : false,
                  fn : myObject.message
                },
                pears : {
                  string : "Pears",
                  check : false,
                  fn : myObject.message
                },
                cherries : {
                  string : "Cherries",
                  check : false,
                  fn : myObject.message
                },
                plums : {
                  string : "Plums",
                  check : false,
                  fn : myObject.message
                }
              }
            }
          },
          vegetables : {
            string : "Vegetables",
            submenu : {
              items : {
                carrots : {
                  string : "Carrots",
                  check : false,
                  fn : myObject.message
                },
                potatoes : {
                  string : "Potatoes",
                  check : false,
                  fn : myObject.message
                },
                beans : {
                  string : "Beans",
                  check : false,
                  fn : myObject.message
                },
                tomatoes : {
                  string : "Tomatoes",
                  check : false,
                  fn : myObject.message
                }
              }
            }
          }
        }
      }
    },
    item4 : {
      string : "Menu Item #4",
      fn : myObject.message
    }
  }
});