×

Discussion Board

Results 1 to 6 of 6
  1. #1
    Registered User
    Join Date
    Feb 2012
    Posts
    32

    How to create container in qml

    I have one (maybe stupid) question. I have component that can expanding (I called it "spoiler"). Here how it works:
    Code:
    import QtQuick 1.1
    
            Rectangle {
                id: spoiler_innerRect
    
                function toggleState() {
                    if (state === "expanded") state = "compact"
                    else                      state = "expanded"
                }
    
                width: parent.width;
                height: spoiler_topBar.height
    
                color: "red"
    
                Rectangle {
                    id: spoiler_topBar
    
                    property string pr_arrowImage: "spoiler_arrow.png"
    
                    anchors {
                        top: parent.top
                        left:parent.left
                        right: parent.right
                    }
    
                    height: 60
    
                    Image {
                        id: spoiler_topBar_image
    
                        property int pr_angle: 0
    
                        anchors {
                            right: parent.right
                            verticalCenter: parent.verticalCenter
                        }
    
                        //smooth: true
                        source: "../images/" + spoiler_topBar.pr_arrowImage
                        transform: Rotation {
                            origin.x: spoiler_topBar_image.width / 2;
                            origin.y: spoiler_topBar_image.height / 2;
                            angle: spoiler_topBar_image.pr_angle
                        }
                    }
    
                    MouseArea {
                        anchors.fill: parent
                        onClicked: spoiler_innerRect.toggleState()
    
                        onPressed: {
                            spoiler_topBar.color = "blue"
                            spoiler_topBar.pr_arrowImage = "spoiler_arrow_enabled.png"
                        }
                        onReleased: {
                            spoiler_topBar.color = "white"
                            spoiler_topBar.pr_arrowImage = "spoiler_arrow.png"
                        }
                    }
                }
    
                states: [
                    State {
                        name: "expanded"
                        PropertyChanges { target: spoiler_innerRect; height: 400 }
                        PropertyChanges { target: spoiler_topBar_image; pr_angle: 180 }
                    },
    
                    State { name: "compact" }
                ]
    
                transitions: Transition {
                     NumberAnimation { properties: "height"; duration: 250 }
                 }
            }
    Is this some way to use this component like standart qml components? Something like this:
    Code:
        Spoiler {
            Rectangle {
                /* ~SOMETHING~ */
            }
        }

  2. #2
    Nokia Developer Champion
    Join Date
    Feb 2008
    Location
    Ahmedabad, Gujarat, India
    Posts
    3,852

    Re: How to create container in qml

    Hello s.maks again ;-) ,

    why you are making a rectangle inside the spoiler ??

    I guess you can directly use spoiler like :

    Spoiler {
    }
    What i do is whenever i make an component i make it the type item instead of a rectangle and then i place all the ui and logic inside that and than use it wherever i want.

  3. #3
    Registered User
    Join Date
    Feb 2012
    Posts
    32

    Re: How to create container in qml

    I think you have misunderstood me. I have my component that can expande and collapse. Then I want to use other components inside my "spoiler".

    Code:
    Spoiler {
       /* 
          here I want to use another component. Soiler must show this another component
          inside. Spoiler only implement expanding/collapsing logic
       */
    }
    
    /* some other qml components */
    
    /*
       Then I want to create another spoiler with some other data inside
    */
    Spoiler {
       /* some other data inside */
    }

  4. #4
    Nokia Developer Champion
    Join Date
    Feb 2008
    Location
    Ahmedabad, Gujarat, India
    Posts
    3,852

    Re: How to create container in qml

    oh sorry for misunderstanding you. :-(

    its simple if you only some data to be changed in your spoiler. like if you have an image and a text component inside your Spoiler than its quite easy to change the data.

    You can make two properties in your Spoiler one for imageurl and other for text, change these properties where you want to change the data thats all.

    Now regarding using different components i guess you can do that also but i dont have any concrete idea and example for that i am looking for that and will update the thread. :-)

    Regards,

  5. #5
    Registered User
    Join Date
    Feb 2012
    Posts
    32

    Re: How to create container in qml

    I found the solution. I'm using qml Loader inside my component. Now I can change Loader "source" or "sourceComponent" properties and load data inside my component.

  6. #6
    Registered User
    Join Date
    Feb 2012
    Posts
    32

    Re: How to create container in qml

    Oh God! I just found better solution!
    Look at this documentation article - Writing QML Components: Properties, Methods and Signals
    We are interested in a line:
    The optional default attribute for a property marks it as the default property for a type. This allows other items to specify the default property's value as child elements. For example, the Item element's default property is its children property. This allows the children of an Item to be set like this:
    Code:
     
    Item {
         Rectangle {}
         Rectangle {}
     }
    And then I want to know what is the "children" property.
    QML Item Element
    Code:
    children : list<Item> | read-only
    The children property contains the list of visual children of this item.
    And on this point I understand - that it is!
    We can do so here:
    Code:
    /* MyObject.qml */
    
    Rectangle {
        default property alias children /* name can be any */ : inner_space.children
    
        /* ... some many other elements ... */
        Item {
           id: inner_space
    
           /* ... some other params ... */
        }
        /* ... some many other elements ... */
    }
    And now we can do all we want!
    Code:
    /* main.qml */
    
    Rectangle {
        MyObject {
            Button {
                 /* ... */
            }
        }
    }
    Last edited by s.maks; 2012-04-06 at 09:00.

Similar Threads

  1. create listview on container view....
    By satish1985 in forum Symbian User Interface
    Replies: 6
    Last Post: 2012-03-01, 10:01
  2. How to create multiple container and single view
    By santoshpatil123 in forum Symbian
    Replies: 1
    Last Post: 2010-06-02, 11:34
  3. How to create RadioButton list in container
    By hrushij in forum Symbian
    Replies: 2
    Last Post: 2009-12-29, 08:55
  4. Create scroll bar on container
    By vineet.jain in forum Symbian User Interface
    Replies: 1
    Last Post: 2009-04-25, 09:28
  5. How to create a check box in a container?
    By esusantapatra in forum Symbian
    Replies: 2
    Last Post: 2008-01-04, 13:19

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×