QML drop Down Menu or Menu bar



  • Hi,
    I was searching to know if there is a standard method to make a menu bar or menus or Context menu in QML.

    I know it can be done by list and making components but I tough may be there is a standard method to do or apply.

    Kind Regards,



  • The standard way should be using "qt-components":http://qt.gitorious.org/qt-components but it's still in development.



  • If you are working in a desktop application, check the "Qt Quick Components for Desktop":https://qt.gitorious.org/qt-components/desktop ,more info "here":http://labs.qt.nokia.com/2011/03/10/qml-components-for-desktop/

    !http://labs.qt.nokia.com/wp-content/uploads/2011/03/Screenshot-6.png(Qt Quick Components for Desktop)!



  • Thank you for information.
    I checked all and I played with all those methods.
    I think pure QML is not still a good solution because QML is not yet a complete laguage (but I think it is clear working and better than WPF in concepts , even WPF is rich in components but it is something that will be changed due to the Basics of the design in XAML)

    what to do is :
    to design Menu Area ....
    Bind Signals to Press Event:
    For example : as soon as you press over the Area , the a Signal is sent to C++ side.
    then it will open a context menu

    For example in C++

    you need to Define the menu :

    Slot :
    void contextmenu(QPoint pos){
    cutAct = new QAction(tr("&Edit"),this);
    QMenu menu;
    menu.addAction(cutAct);
    menu.exec(GlobalPos);
    }

    Also you need to bind contexts to the function :
    main window is assumed to be the Class we defined for overide .
    Also , Global Position of the mouse is grabed by re-implementing of mousePressEvent.
    rootContext()->setContextProperty("mainwindow",this);-

    As it look and feel native , i recommend it for now , until a good solution become available in QML.
    QML need also Global Mouse position information to be accessible with in QML.



  • by the way , if anybody interested , I can post a sample code



  • Can you post a sample code please? :)
    I'm a newbie in QML and searching the way to provide the context menu, and see your post



  • you should do it like this :
    the menubar should be designed in QML , like this one
    @
    Rectangle{
    width:40
    heigh:10

    Text{
    text: "Help"
    }

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    var posInWidget = parent.mapToItem(null, parent.x, parent.y)
                    posInWidget.x -= parent.x
                    posInWidget.y -= parent.y
                    mainClassFromCplusplus.contextmenu(parent.content,Qt.point(posInWidget.x,posInWidget.y),Qt.point(parent.width,parent.height))
                }
    

    }@

    and on the C++ side you should create this page in a new Class and in the contructor of the class you load the QML file and also pass the Class object as the root object from C++ to be accessible in QML , so the method (context menu) is being called from QML.
    also , QML passes some data about where the menu (rectangle) is located to open the context menu in the correct place on the screen

    @void loginWindow::contextmenu(QString _objectName, QPoint posInWidget, QPoint widgetSize)
    {
    QMenu menu;

    //Calculate where to open Context menu (Usually bottom of the Object)
    QPoint Position = pos();
    Position += posInWidget;
    Position.setY( Position.y()+ widgetSize.y() );
    
    if(_objectName=="Help")
    {
        createMenuHelp(&menu);
    }
    
    menu.setTitle("Meh");
    menu.exec(Position);
    

    }@

    I hope you got it , if not , I will try to make a sample code and send to you here.

    If you are new , let me clear something about QML and Qt at all.
    it is not easy design at the beginning of your projects or learn , but soon you will find out that it is more better than everything else you have tested before.
    Your hand are open to design what you want , and limit is the sky....



  • Yes, i'm understand, thanks!

    With the Qt and QML i'm very impressed and agree with you - haven't seen such an easy interface building for standalone applications for all 10+ years of development )



  • @Satmosc: Thanks for code... as i am new in qt-qml so can you help me to implement menu bar in qml?
    I tried your solution. it is not sending the context name to cpp function...
    and how to take relative position of the pop up when click on menu name? (pos function)
    and how createMenuHelp() function actually creates the popup/list of sub menus??

    thanks



  • @cmjjadhav
    welcome to Qt forum. I am no one to Qt project or Nokia , but I recommend you to learn and use it. it is the best and most stable IDE for programming including SDK.
    I am C# expert but I just trough it away. Qt is not complete but the magic is that you are free to add anything you want. open source and fast .

    For Context menu I am using QMenu . it is not QML and it belongs to Widgets but for now it is the best solution and you will not have any issue. I am on a trip. If I got able to connect my HDD at home , I can send you sample tested codes.

    you use QML to send information about where to open the Context menu. you specify related to which item , then it will open like normal menu.
    or you ca use to open menu anywhere you want . just write the conditions and it will beat!!!

    good luck.
    if you search the forum , you will find the ways , but you have to learn step by step... do not look to do what you want. try to learn Qt , then you will have new ideas , ... the logic is different a bit comparing to MS Studio , but I prefer this.



  • @Satmosc: thanks for reply. yes I will try my best to learn i am also from MS Studio background so that's why approach is like to get the thing in Straight forward. I am trying this to display the menu bar in qml for desktop application. and very few forums are on this issue..So waiting for your Source code ;-)


Log in to reply
 

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