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.
Any screenshots of it running on Maemo?
ReplyDeleteActually, scratch that, I can't get it to work on an N900:
ReplyDelete1) Enable extras-devel
2) Install qtwrt-experimental
3) Put the above HTML file (as index.htm) and the barebones config.xml from part 1 in a zip
4) Open zip in File Manager
5) Install package
6) Launch from the normal grid menu
7) Press and hold on "There is a context menu" and select "item", title doesn't change. It stays as "Menu Sample"
8) Press view menu/titlebar - despite showing a dropdown arrow, nothing happens.
Reversing the order of (7) and (8) doesn't seem to have an effect.
@jaffa
ReplyDeleteI tried again with your step, it works fine for me. Can you try again with my code at: http://gitorious.org/xizzhu-samples/qtwrt-menu-sample
Where are the screenshots :-) we all love screenshots!
ReplyDeleteIs there a complete online API documentation for QTWRT somehwere around ?
ReplyDeleteAlso wondering, will it be possible to access the radio API to scan the FM band, observe the radio API (to know which frequency is being listened) and to retrieve RDS data ?
Anyway QTWRT looks very promising ! :)
@kael:
ReplyDeleteCurrently, we're working on the docs ;)
So far as I know, there isn't any API for radio yet.