Open Source & Free  

On The Side, Up On Top

On The Side, Up On Top

Header Image


A lot has happened with the side menu bar (the

Hamburger Menu

) since we initially launched it. We now support a lot of new features seamlessly such as swiping the sidemenu in/out and various other capabilities. The other day we added support for side menus on the right and top as well as multiple buttons on the side menu title bar.

So lets get started with the features, first is one of the newer features up our sleeve, the ability to place a side menu on the right, top or on both sides of the title (as in the facebook app). You can

accomplish this by using something like cmd.putClientProperty(SideMenuBar.COMMAND_PLACEMENT_KEY, SideMenuBar.COMMAND_PLACEMENT_VALUE_RIGHT);

Or as you might see in this more detailed example where you can just swap menu placements on the fly:

One of the nice things about the side menu bar is that you can add just about anything into the side menu bar by using the SideComponent property e.g.:

This is remarkably useful but its also somewhat problematic for some developers, the SideMenuBar is pretty complex so if we just set a button to the custom component and invoke showForm() we will not have any transition out of the side menu bar. Thankfully we added several options to solve these issues.

The first is actionable which you enable by just turning it on as such: cmd

.putClientProperty(“Actionable”, Boolean.TRUE);

This effectively means that the custom

component will look exactly the same, but when its touched/clicked it will act like any other command on the list. This uses a lead component trick to make the hierarchy (or component) in customCmp act as a single action.

There are several additional options that allow you to just bind action events and then “manage” the SideMenuBar e.g.:

  • SideMenuBar.

    isShowing() – useful for writing generic code that might occur when the SideMenuBar is on the form.
  • SideMenuBar.closeCurrentMenu() – allows you to close the menu, this is useful if you are not navigating to another form.

  • SideMenuBar.closeCurrentMenu(Runnable) – just like closeCurrentMenu() however it will invoke the run() method when complete. This allows you to navigate to another form after the menu close animation completed.

The TitleCommand property allows you to flag a command as something you would want to see in the right hand title area and not within the SideMenu area. Just place it into a component using cmd.putClientProperty(“TitleCommand”, Boolean.TRUE);

Last but not least w

e also have some helpful theme constants within the side menu bar that you might not be familiar with:

  • sideMenuImage – pretty obvious, this is the hamburger image we use to open the menu.
  • sideMenuPressImage – this is the pressed version of the image above. Its optional and the sideMenuImage will be used by default.
  • rightSideMenuImage/rightSideMenuPressImage – identical to the sideMenuImage/sideMenuPressImage only specific to the right side navigation.
  • sideMenuFoldedSwipeBool – by default a swipe will open the side menu. You can disable that functionality by setting this theme constant to false.
  • hideBackCommandBool – often comes up in discussion, allows hiding the back command from the side menu so it only appears in the hardware button/iOS navigation.
  • hideLeftSideMenuBool – allows hiding the left hand menu which is useful for a case of top or right based side menu.
  • sideMenuShadowImage – image that represents the drop shadow drawn on the side of the menu.
  • sideMenuTensileDragBool – allows disabling the tensile draw within the side menu command area.

I hope you will have fun exploring the new features of the side menu bar.

Notice: This post was automatically converted using a script from an older blogging system. Some elements might not have come out as intended…. If that is the case please let us know via the comments section below.


Leave a Reply