×

Discussion Board

Results 1 to 2 of 2
  1. #1
    Registered User
    Join Date
    Mar 2011
    Posts
    14

    How to use Accordion List to link?

    I used the qml templates but fail to make them to link to other qml. Have anyone can help me?

    AccordionList.qml


    import QtQuick 1.0

    // Accordion list
    Item {
    id: container

    signal showScreen(string msg)

    // Default width
    width: 360
    // Default height
    height: 640
    // Subitem expansion duration
    property int animationDuration: 100
    // Subitem indentation
    property int indent: 30
    // Scrollbar width
    property int scrollBarWidth: 10
    // Background for list item
    property string bgImage: 'MPGuide/gfx/list_item.png'
    // Background image for pressed list item
    property string bgImagePressed: 'MPGuide/gfx/list_item_pressed.png'
    // Background image for active list item (currently not used)
    property string bgImageActive: 'MPGuide/gfx/list_item_active.png'
    // Background image for subitem
    property string bgImageSubItem: "MPGuide/gfx/list_subitem.png"
    // Arrow indicator for item expansion
    property string arrow: 'MPGuide/gfx/arrow.png'
    // Font properties for top level items
    property string headerItemFontName: "Helvetica"
    property int headerItemFontSize: 12
    property color headerItemFontColor: "black"
    // Font properties for subitems
    property string subItemFontName: "Helvetica"
    property int subItemFontSize: headerItemFontSize-1
    property color subItemFontColor: "black"

    signal itemClicked(string itemTitle, string subItemTitle)

    AccordionListModel {
    id: mainModel
    }

    ListView {
    id: listView
    x: 0
    y: 90
    width: 360
    height: 480
    anchors.rightMargin: 0
    anchors.leftMargin: 0
    anchors {
    left: parent.left
    right: parent.right
    }
    model: mainModel
    delegate: listViewDelegate
    focus: true
    spacing: 0
    }

    Component {
    id: listViewDelegate
    Item {
    id: delegate
    // Modify appearance from these properties
    property int itemHeight: 64
    property alias expandedItemCount: subItemRepeater.count

    // Flag to indicate if this delegate is expanded
    property bool expanded: false

    x: 0; y: 0;
    width: container.width
    height: headerItemRect.height + subItemsRect.height

    // Top level list item.
    ListItem {
    id: headerItemRect
    x: 0; y: 0
    width: parent.width
    height: parent.itemHeight
    text: itemTitle
    onClicked: expanded = !expanded

    bgImage: container.bgImage
    bgImagePressed: container.bgImagePressed
    bgImageActive: container.bgImageActive
    fontName: container.headerItemFontName
    fontSize: container.headerItemFontSize
    fontColor: container.headerItemFontColor
    fontBold: true

    // Arrow image indicating the state of expansion.
    Image {
    id: arrow
    fillMode: "PreserveAspectFit"
    height: parent.height*0.3
    source: container.arrow
    rotation: expanded ? 90 : 0
    smooth: true
    anchors {
    right: parent.right
    verticalCenter: parent.verticalCenter
    rightMargin: 10
    }
    }
    }

    // Subitems are in a column whose height depends
    // on the expanded status. When not expandend, it is zero.
    Item {
    id: subItemsRect
    property int itemHeight: delegate.itemHeight

    y: headerItemRect.height
    width: parent.width
    height: expanded ? expandedItemCount * itemHeight : 0
    clip: true

    opacity: 1
    Behavior on height {
    // Animate subitem expansion. After the final height is reached,
    // ensure that it is visible to the user.
    SequentialAnimation {
    NumberAnimation { duration: container.animationDuration; easing.type: Easing.InOutQuad }
    ScriptAction { script: ListView.view.positionViewAtIndex(index, ListView.Contain) }
    }
    }

    Column {
    width: parent.width

    // Repeater creates each sub-ListItem using attributes
    // from the model.
    Repeater {
    id: subItemRepeater
    model: attributes
    width: subItemsRect.width

    ListItem {
    id: subListItem
    width: delegate.width
    height: subItemsRect.itemHeight
    text: subItemTitle
    bgImage: container.bgImageSubItem
    fontName: container.subItemFontName
    fontSize: container.subItemFontSize
    fontColor: container.subItemFontColor
    textIndent: container.indent
    onClicked: {
    container.selectedUrl=url
    console.log("Clicked: "+itemTitle + "/" + subItemTitle)
    itemClicked(itemTitle, subItemTitle)
    }
    }
    }
    }
    }
    }
    }
    }




    AccordionListModel.qml



    import QtQuick 1.0

    ListModel {
    id: model

    ListElement {
    itemTitle: "Church"
    attributes: [
    ListElement { subItemTitle: "Christ Church" },
    ListElement { subItemTitle: "St Paul Church" }
    ]
    }
    ListElement {
    itemTitle: "Monument"
    attributes: [
    ListElement { subItemTitle: "A Famosa"},
    ListElement { subItemTitle: "Dutch Graveyard" },
    ListElement { subItemTitle: "Hang Li Poh Well" },
    ListElement { subItemTitle: "Portuguese Square" },
    ListElement { subItemTitle: "Stadthuys" }
    ]
    }
    ListElement {
    itemTitle: "Musuem"
    attributes: [
    ListElement { subItemTitle: "Baba Nyonya Heritage Musuem" },
    ListElement { subItemTitle: "Cheng Ho Cultural Musuem" },
    ListElement { subItemTitle: "Musuem Istana" }
    ]
    }
    ListElement {
    itemTitle: "Park/Zoo"
    attributes: [
    ListElement { subItemTitle: "Butterfly Farm" },
    ListElement { subItemTitle: "Taman Mini Malaysia" },
    ListElement { subItemTitle: "Zoo Malacca" }
    ]
    }
    ListElement {
    itemTitle: "Temple"
    attributes: [
    ListElement { subItemTitle: "Chen Hoon Teng" },
    ListElement { subItemTitle: "Sam Po Kong Temple" }
    ]
    }
    ListElement {
    itemTitle: "Viewport"
    attributes: [
    ListElement { subItemTitle: "Jonker Street" },
    ListElement { subItemTitle: "Malacca Cruise" },
    ListElement { subItemTitle: "Menara Taming Sari" }
    ]
    }
    }


    If i want the A Famosa link to asd.qml. What should I do?

  2. #2
    Nokia Developer Moderator
    Join Date
    Jul 2006
    Location
    Tampere, Finland
    Posts
    13

    Re: How to use Accordion List to link?

    Have you checked out the RSS Reader example (https://projects.forum.nokia.com/QMLRSSReader)? It has an AccordionList that is used for navigation.
    - Late

Similar Threads

  1. Replies: 3
    Last Post: 2009-12-11, 00:05
  2. Replies: 3
    Last Post: 2009-10-07, 06:08
  3. How to use List????
    By daut in forum Mobile Java Tools & SDKs
    Replies: 1
    Last Post: 2007-04-27, 10:23
  4. How to use List????
    By daut in forum Mobile Java General
    Replies: 0
    Last Post: 2007-04-25, 05:05
  5. which lib to link against to use CIntConnectionInitiator?
    By smallfish_ntu in forum Symbian Networking & Messaging (Closed)
    Replies: 1
    Last Post: 2003-05-28, 18:39

Posting Permissions

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