Wednesday, May 21, 2014

Segmented control option change

There was a recent question on StackOverflow that was put on hold almost immediately, but I believed it could easily be answered as posted:

I have used Segmented Control in my application. The qml page name, where I have used Segmented Control, is Details.qml page. Remaining part of Details.qml page contains a Container. As option change from segmented control, I want to show customised page in the Container. Suppose there are two options in segmented control i.e. Option1, Option2. As I selected Option1, I want to show CustomOption1.qml page and if I selected Option2, I want to show CustomOption2.qml page in the Container. If you know how to do this, then please help me.
The way I would do this is with a ControlDelegate which allows the loading of QML source code at run time into a control. This of course requires time to load, compile and display the QML, but it has the advantage of only having the QML that the application actually needs at the moment loaded into memory. For small amounts of QML it may be better to use a different method. My solution is all in QML, I just create an empty Cascades application, modify the main.qml file and add two other files.

Here is my main.qml:

import bb.cascades 1.2

Page {
    Container {
        layout: StackLayout {

        }
        SegmentedControl {
            id: segmented
            Option {
                id: option1
                text: qsTr("Option1") + Retranslate.onLocaleOrLanguageChanged
                selected: true
            }
            
            Option {
                id: option2
                text: qsTr("Option2") + Retranslate.onLocaleOrLanguageChanged
            }
            
            onSelectedIndexChanged: {
                console.log("onSelectedIndexChanged: " + segmented.selectedIndex);
                switch (segmented.selectedIndex) {
                    case 0:
                        controlDelegate.source = "option1.qml";
                        break;
                    case 1:
                        controlDelegate.source = "option2.qml";
                        break;
                }
            }
            
        }
        ControlDelegate {
            id: controlDelegate
            delegateActive: true
            source: "option1.qml"
            onError: {
                console.log("Error loading delegate " + errorMessage);
            }
            horizontalAlignment: HorizontalAlignment.Center
        }
    }
}

The SegmentedControl provides the option selection, the onSelectedIndexChanged signal is used to change the source QML used by the ControlDelegate. The ControlDelegate is set up to be active and start with option1.qml loaded.

The two other files, option1.qml and option2.qml are very simple, and similar, but they need not be so. Almost any valid QML that could be used in place of the ControlDelegate may be used in these files.

option1.qml:
import bb.cascades 1.2

Container {
    Label {
        verticalAlignment: VerticalAlignment.Center
        horizontalAlignment: HorizontalAlignment.Center
        text: "Option 1 Delegate"
    }

}

and option2.qml:
import bb.cascades 1.2

Container {
    layout: DockLayout {
    
    }
    Label {
        verticalAlignment: VerticalAlignment.Center
        horizontalAlignment: HorizontalAlignment.Center
        text: "Option 2 Delegate"
    }

} 

Quite easily solved.

No comments:

Post a Comment