Monday, April 15, 2013

Easy Task Navigation With PageStack (Fixed)


Thanks to an update to the documentation for Ubuntu Components, I discovered that I was using PageStack all wrong. I've gone ahead and deleted my old blog post about PageStack, and now here is a corrected one.

My Feedzilla app has a very simply page by page structure. Each bit of UI that the user interacts with is a wholly separate task so can take over the whole screen to present to the user.

Turns out, that Ubuntu Components have a component to support this in a standard, and very convenient, manner. It's called PageStack.

Here's how it works.

First, I created a PageStack component, and named it "rootStack". The categories view is always the starting point of the app, so I made it a Page inside the PageStack, and named it "rootPage". Then I added SubCategoriesPage (which is a ListView that shows the list of Technology sub-categories from Feedzilla:

It looks like this.
    PageStack
    {
        id: rootStack
        Page
        {
            title: "Categories"
            id: rootPage
            SubCategoriesComponent
            {
                id: subCategoriesComponent
                anchors.fill: parent
            }
        }
    }

Now, even though rootPage is visible, it's not actually on the PageStack yet. PageStack is a "stack" in the programming sense. That means you can push items on top of the stack, and pop items off. So I need to write some code to push rootPage onto the PageStack. I do this by adding an onCompleted handler to the PageStack and pushing the rootPage onto the PageStack there.

    PageStack
    {
        id: rootStack
        Page
        {
            title: "Categories"
            id: rootPage
            SubCategoriesComponent
            {
                id: subCategoriesComponent
                anchors.fill: parent
            }
        }
      Component.onCompleted:
      {
            push(rootPage)
      }
   }

So, how does the user navigate? I added a signal to SubCategoriesComponent for when the user has selected a category.

I made two other Components. One for displaying a list of articles and one for displaying articles themselves. I host these components inside of pages. I also set the pages to be invisible.


    Page
    {
       visible: false
       id: articlesListPage;
       ArticlesListComponent
        {
            id: articlesList
            anchors.fill: parent;
            onArticleSelected:
            {
                articleComponent.url = url
                rootStack.push(articlePage)
            }
            onTitleChanged:
            {
                articlesListPage.title = articlesList.title
            }
        }
      }
      Page
      {
        visible: false
        id: articlePage
        ArticleComponent {
            id: articleComponent
            anchors.fill: parent;
        }
      }

When the user selects a category, they need to see a list of articles. I made ArticlesListComponent todo that job. When they select a specific article, the user should see the article, I created ArticleComponent for that. Note:

So, getting back to the story, how do we push these onto the PageStack?

        Page
        {
            title: "Categories"
            id: rootPage
            SubCategoriesComponent
            {
                id: subCategoriesComponent
                anchors.fill: parent
                onSubCategorySelected:
                {
                    articlesList.subCategoryId = subCategoryId;
                    rootStack.push(articlesListPage)
                }
            }
        }

You may recall that I added a onSubCategorySelected signal to my SubCategoriesComponent component. All I have to do is respond to that signal. First I configure my ArticlesListPage to use the sunCategoryId passed into the signal handler. Then I tell the PageStack to push articlesListPage (the instance of ArticlesListPage declared in the QML above). Pushing 'pushes' pushes the component on top of the categories list.

I use similar code to push the ArticlesComponent when the user selects an article.
            onArticleSelected:
            {
                articleComponent.url = url
                rootStack.push(articlePage)
            }

The ArticleComponent can only be on top, so it doesn't push anything.

But what about going back? That's where popping comes in. I added an action to rootPage which simply tells rootStack to pop. Pop is opposite of push. Instead of adding something to the top of the stack, it takes whatever is on top off. It pops off the top. rootPage can't be popped off, though, because it is at the root. This makes the code easy. If I wanted to, I could handle popping myself with code like this:
            tools: ToolbarActions
            {
                Action
                {
                    id: backAction
                    text: "Back"
                    iconSource: "back.png"
                    onTriggered:
                    {
                        rootStack.pop();
                    }
                }
            }
     

However, this is not necessary because PageStack automatically creates and maintains a back button for me!

I pushed a branch with my corrected code.

19 comments:

  1. So nice and great article it's also very helpful information so thanks a lot for sharing us
    clipping path service

    ReplyDelete
  2. Very stunning and excellent post it's also useful information for us so thanks a lot for sharing us
    clipping path service

    ReplyDelete

  3. Here the information you included is very important to match the area of focus, besides we will be very happy if you regular set up like this post. Thanks in advance!!

    ReplyDelete
  4. This is a very nice article. I have very glad to read your article. You are a really brilliant person. I have read your full article and I have got much important news that was very helpful to me. Thanks a lot for sharing a nice article. For portrait photography, e-commerce business, Photoshop needs product photo editing making images pop up. We provide all kinds of high-quality photo editing services at a competitive price from Clipping Expert Asia. That helps to make your e-commerce business pop-up. If you want to know about the best high-quality product photo editing service can you visit Clipping Expert Asia.
    product photo background remove services

    best clipping path service

    image masking service

    shadow creation service

    image manipulation service

    high-end photo retouching services

    real estate image editing services

    ReplyDelete
  5. Thanks for providing valuable information for what I was waiting, please keep it to share such info. Get erotic entertainment at Escorts agency in Manchester.

    ReplyDelete
  6. Manchester Escort Directory - right place to find agency escorts and independent escorts in Manchester city. Visit escorts in Manchester

    ReplyDelete
  7. Thank you for posting such a great article! It contains wonderful and helpful posts. Keep up the good work

    tnsc bank net banking

    ReplyDelete
  8. 카지노사이트 Hurrah! Finally I got a webpage from where I know how to genuinely take valuable facts concerning my study and knowledge.


    ReplyDelete
  9. Nice information, valuable and excellent design, as share good stuff with good ideas and concepts, lots of great information and inspiration, both of which I need, thanks to offer such a helpful information here.
    토토사이트

    ReplyDelete
  10. 토토사이트 Amazing! Its really awesome paragraph, I have got much clear idea concerning from this post.

    ReplyDelete
  11. 바카라사이트 Hi there! I simply wish to offer you a big thumbs up for the great information you’ve got
    here on this post. I am coming back to your blog for more soon.

    ReplyDelete
  12. Simply desire to say your article is as amazing. The clarity on your post is just excellent and that i can think you’re knowledgeable in this subject. Fine together with your permission allow me to grasp your RSS feed to keep updated with impending post. Thanks one million and please continue the rewarding work. Feel free to visit my website; 야설

    ReplyDelete
  13. I used to be checking continuously this weblog and I am impressed! Appreciate it for your efforts. Feel free to visit my website; 한국야동


    ReplyDelete
  14. Really satisfied with all the information I have found in this article. It gives immense knowledge on physical education, it is very helpful and quite generous to spread a good message. Feel free to visit my website;
    국산야동

    ReplyDelete
  15. Everything is very open with a really clear explanation of the challenges. It was definitely informative. Your site is useful. Thank you for sharing. Feel free to visit my website;
    일본야동


    ReplyDelete
  16. Hi! I just would like to give you a huge thumbs up for the great info you have got right here on this post. I'll be coming back to your site for more soon. Feel free to visit my website; 일본야동

    ReplyDelete