As a summary, we have already supported the APIs of menus, widget object, URI schemes, web inspector, console log, some Device APIs, as well as some HTML 5 features and standard JavaScript from Qt WebKit. Let's start with the menu API.
1 view menu
You can create the menu items to the chrome's menu bar (we call it view menu) with the following JavaScript code:
var menuItem = new nokia.device.MenuItem("Menu item", changeTitle);
nokia.device.menu.addMenuItem(menuItem);
function changeTitle()
{
nokia.device.menu.title = "New title";
}Here, you have created a menu item named "Menu item" and added it to the menu bar. When it's triggered, the function changeTitle() will be called to set the menu's title to "New title".
Note that since on the device the menu's title is also the same as the window's title, it actually changes the window's title too.
2 context menu
The context menu can be created with the following piece of code:
var contextMenu = new nokia.device.ContextMenu("contextMenuArea");
var changeTitleItem = new nokia.device.MenuItem("Change Title");
changeTitleItem.onselect = changeTitle;
contextMenu.addMenuItem(changeTitleItem);Here, a context menu is created and an item named "Change Title" is added to the menu. When you long tap on the HTML element with id "contextMenuArea", this context menu will pop up. Then if you select the "Change Title" item, the changeTitle() function will be called.
Of course, only the widgets in the windowed or fullscreen mode could have context menus; and only the widgets in the windowed mode can have view menus.
Note that there's a known bug (already fixed for the next release) that if you long tap on the area where no context menu is defined, an empty context menu is popped-up.
3 sample
Only the HTML file this time ;)
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu sample</title>
<script type="text/javascript">
function changeTitle()
{
if (nokia.device.menu.title == "Title 1")
nokia.device.menu.title = "Title 2";
else
nokia.device.menu.title = "Title 1";
}
function init()
{
var menuItem = new nokia.device.MenuItem("item", changeTitle);
nokia.device.menu.addMenuItem(menuItem);
var contextMenu = new nokia.device.ContextMenu("contextMenuArea");
contextMenu.addMenuItem(menuItem);
}
</script>
</header>
<body onload="init()">
<div id="contextMenuArea">There is a context menu.</div>
</body>
</html>As you can see, one menu item can be added to multiple menus, exactly the same as native Qt apps. Here goes some screenshots:
The first one shows the simple sample when launched. The second and third one show the view menu and the context menu, respectively, while the last one shows that the title has been updated after you tap on the menu. More screenshots can be found here, while the sample code is available here.
