Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Sample Code - Swipe down menu for BlackBerry WebWorks SDK for Tablet OS

by Administrator ‎04-21-2011 07:25 PM - edited ‎03-20-2012 10:32 PM (14,109 Views)

Application menus are a great way to provide convenient access to global and/or contextual actions from within your application, as well as providing a native "look and feel".

 

Using the BlackBerry® WebWorks™ SDK for Tablet OS, you can easily add a menu to your application in 4 simple steps.

 

swipemenu.js is a JavaScript framework designed to easily add a swipe-down menu to your WebWorks application for Tablet OS. Download the swipemenu.js framework, and a sample application, from our WebWorks-Samples repo in Github.

 

How it works?

 

1. HTML content is defined for the menu bar structure

 

The menu bar is simply going to be HTML content, styled using CSS and dynamically shown / hidden using JavaScript®.  In the following example, list items will become interactive fields that the user can click on and invoke actions.  Two lists of buttons will be displayed, each on opposite sides of the menu bar.

 

 

<div id="menuBar">
<ul id="menuBarLeftButtons">
<li onclick="doButton()"> Action 1 </li>
<li onclick="doButton()"> Action 2 </li>
<li onclick="doButton()"> Action 3 </li>
<li onclick="doButton()"> Action 4 </li>
</ul>
<ul id="menuBarRightButtons">
<li onclick="doButton()"> Help </li>
<li onclick="swipemenu.close()"> Close </li>
</ul>
</div>

 

 

2. onSwipeDown event captured

 

Using the blackberry.app.event WebWorks API, register a callback method to be raised whenever the onSwipeDown event occurs.  This event is raised when the user swipes down from the top bezel:

 

 

//call this JavaScript method from the body onload() event 
function doPageLoad() {
blackberry.app.event.onSwipeDown(showMenuBar);
}

 

 

3. JavaScript and CSS used to show & hide the menu

 

When the user invokes the swipeDown event, a function named "showMenuBar" is called which changes the active style of the HTML element:

 

function showMenuBar() {
document.getElementById("menuBar").className = "showMenuBar";
}
function hideMenuBar() {
document.getElementById("menuBar").className = "hideMenuBar";
}
function doButton()
{
//Change the following alert() to the action you wish to invoke from the menu.
alert("Button clicked");
hideMenuBar();
}

 

 

4. CSS used to style the menu bar with your application

 

Use CSS to customize the menu so that it captures the look and feel that you wish to have within your application.  Using CSS3 transform constructs, you can add animated effects to showing & hiding the menu bar.

 

Menus can be very specific to an application. You can display images or text in the menu, or customize the color, border, background and style of the menu.  You can make your menu look like other BlackBerry® PlayBook™  tablet application menus, or be as creative as you'd like and invent your own look & feel.

 

 

#menuBar {
position: fixed;
left:0px;
top:-3em;
width:100%;
padding: 0.25em;
clear: both;

border-bottom: solid 2px black;
font-size: 1.5em;

background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.31, rgb(122,121,121)), color-stop(0.66, rgb(79,77,77)), color-stop(0.83, rgb(56,54,56)) );
}

/* Use CSS3 transition to produce an animation effect for opening/closing the menuBar from the top bezel */
.showMenuBar {
-webkit-transition: all 0.5s ease-in-out;
-webkit-transform: translate(0, 3em);
}
.hideMenuBar {
-webkit-transition: all 0.5s ease-in-out;
-webkit-transform: translate(0, -3em);
}

/* Use list elements to define and organize 'buttons' that the user can interact with from the menuBar */
#menuBar ul {
list-style: none;
margin: 0;
padding:0;
}
#menuBar ul li {
float: left;
margin-right: 0.5em;
padding: 0.25em;
background-color: #96999e;
border-radius: 0.5em;
cursor: pointer;
}

/* Position groups of buttons on each side of the menuBar */
#menuBarLeftButtons {
float: left;
}
#menuBarRightButtons {
float: right;
}

 

 

  

 

Menu bar opened by onSwipeDown event:

 

swipemenu.png

 

 

More Info:

 

A sample application can be downloaded from Github.  Download swipemenu and build it using the BlackBerry WebWorks SDK Packager.  Deploy and run it on the BlackBerry® Tablet OS to observe how an application menu can be displayed after a swipe down event from the top bezel.

 

Contributors
Comments
by Developer on ‎06-20-2011 05:35 PM

This example doesn't work with OS 1.0.5. The event is detected, but the menu doesn't show up.