Unofficial Qt Web Runtime tutorial 2: Menu APIs



  • From my blog: "http://xizhizhu.blogspot.com/2010/09/unofficial-qt-web-runtime-tutorial-2.html":http://xizhizhu.blogspot.com/2010/09/unofficial-qt-web-runtime-tutorial-2.html

    If there is no API, Qt WRT is merely nothing but a naive web browser. Then what APIs are supported other than standard HTML and JavaScript now? You can first get a list of features already supported, or to be supported in the near future "here":http://bugs.meego.com/showdependencytree.cgi?id=2772&hide_resolved=0.

    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>
    <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.



  • I think you forgot nokia.device.menu.addMenuItem() from your first example. Otherwise it would not make much sense.



  • [quote author="Benjamin Poulain" date="1284494951"]I think you forgot nokia.device.menu.addMenuItem() from your first example. Otherwise it would not make much sense.[/quote]

    Yes, thanks for pointing that out!


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.