How to make Collapsible Items using Cascades and QML

Native SDK Development

Expandable Item on an Expandable Framework

One of the great things about jQuery mobile and other web technologies is that you can find a lot of components and examples out there. Almost every single type of visual element can be found online and there is no need to build it yourself. This is kind of the opposite of the native environment, where most of the times you need to build your own components; this commonly ends with taking a different direction in order to avoid that path. But with Cascades and QML, that’s old news.

Today we were asked if we have a QML component that behaves like the Collapsible on jQuery. And the answer is no – unless you wait for 10 minutes and you build it yourself. Yes, it only took me 10 minutes to have that component ready to be used by anybody within Cascades.

So, let’s see how that happened.

First of all I created a QML file called ExpandableItem.qml. I created on a separated file so we can then reuse the code on any screen within the application.

Second step was to include the visual components. In this case, I included a Button and a Label:

    Button {
        id: btnHeader
        text: "default header"
    }
    Label {
        id: lblBody
        text: "default body"
    }

This will give us the two components we need to build our new expandable component. Then I added some styling:

    Button {
        id: btnHeader
        text: "default header"
        preferredWidth: maxWidth
    }
    Label {
        id: lblBody
        text: "default body"
        textStyle.fontStyle: FontStyle.Italic
    }

And this was the first result we got:

TITLE_IMAGE

After defining our components, it was then time to define our properties, which allows us to interact with the UI component. In this case, we needed at least these ones to control the basic behavior:

    property alias headerText: btnHeader.text
    property alias bodyText: lblBody.text
    property alias bodyVisible: lblBody.visible
    property string collapseImage
    property string expandImage

I said “at least” because you can include as many properties you want to tweak your inside components. These are the basics to control the behavior of the expandable component. You can set the default imageSource of your button by including this line on your Button element:

        imageSource: collapseImage

It was then time to include our user interaction scripts. This allowed the user to interact with the component, and it reflects the user’s will.

I included two pieces of code:

a) for handling the click event on the Button:

        onClicked: {
            if (bodyVisible) {
                lblBody.visible = false;
                btnHeader.imageSource = expandImage;
            } else {
                lblBody.visible = true;
                btnHeader.imageSource = collapseImage;
            }
        }

b) to handle the change of the visibility of the body text:

    onBodyVisibleChanged: {
        if (bodyVisible) {
            btnHeader.imageSource = collapseImage;
        } else {
            btnHeader.imageSource = expandImage;
        }
    }

And this is what our new UI component looks like:

 

Now it is time to use it! And it is as easy as this, for example:

        ExpandableItem {
            headerText: "click to expand"
            bodyText: "this is my custom body text"
            expandImage: "asset:///images/expand.png";
            collapseImage: "asset:///images/collapse.png";
            bodyVisible: false
        }

And you will see this:

Or, you can have the body displayed by default:

        ExpandableItem {
            headerText: "click to expand"
            bodyText: "this is my custom body text"
            expandImage: "asset:///images/expand.png";
            collapseImage: "asset:///images/collapse.png";
            bodyVisible: true
        }

With this as a result:

As you can see, it is easy to create your custom components and replicate some standard logic out there. Keeping in mind the fact that these UI components are Native components, I think this is a big deal!

This example can be found on our Github page.

If you have Cascades questions, please don’t hesitate to ping me on Twitter at @bryantafel.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus