Will back button and loadContent() work on sub pages?

[Jim_A_4]

Note: I have googled days and cannot find any solutions for my issues. I hope all the xdk and app framework experts can help me on the follow questions. I have also uploaded a xdk project for demo the issues. Thanks so much! I also hope that this post can serve as a future reference for those who experiences the same issue.

Background:

As I know, Intel xdk has two type of pages: Page and Sub Page. Pages are individual without sharing the header (if header is used), while Sub Pages shares the header.

In the uploaded demo app, all my pages and sub pages have a back button on the header. The back button is created by checking the Back Button option on the header properties within Intel xdk.

In my demo app, I have 2 pages (page A, page B) and 2 sub pages (subpage 1, subpage 2). All sub pages belongs to page B. I have buttons for going from page A to sub page 1 and a button for going from sub page 1 to sub page 2. On each of the button click event (you can find them in the js/index_user_script.js file), the XDK program uses activate_subpage() method to go to another sub pages. That works fine except that:

1)  I do not know how to apply page transition E.g. pop, flip, etc.

===> QUESTIONS 1: how can i set page transition in this case?

2) My sub page 1 has a long list (~40 items on the list). There is a button on the bottom of the list. When the button is clicked, the app will go to sub page 2 (using the activate_subpage() method). On the sub page 2, I also have a long list. The problem here is, since on sub page 1, we scrolled to the bottom of the list, when sub page 2 is displayed, the sub page 2 is also scrolled to the bottom of the page automatically.

===> QUESTIONS 2: how come and how can I fix that? I want sub page 2 to be not scrolled to the bottom to begin with.

3) I have tried to replace activate_subpage() method with loadConent() method like this: $.ui.loadContent("#sub_page1", false, false, 'flip');, but I see a blank page once the button is clicked. Notice that page transition is working with loadContent. I have tried using the loadContent() method with Pages (instead of sub pages) and it works flawlessly. It seems like loadContent() does not work for sub page???

===> QUESTIONS 3: how can I use loadContent method to work with sub pages? (I personally like loadContent more than activate_subpage())

4) Back button issue: When I am on sub page 2, when I click the back button on my app's header, it will bring me back to page A (instead of sub page 1). It seems like the back button will only work on pages but not within sub pages?

===> QUESTIONS 4: how can I use the back button (created using the xdk) on the header to work with sub pages?

Thanks in advance for all of you help! I really appreciate it!

The reason I am using Sub Pages is because I need to use sidebar later and sidebar can (only?) share within Sub Pages. And also, I want to share the header bar within pages.

I amusing Intel XDK 2366 and app framework 2.

Thanks again,

Jim.

[PaulF_IntelCorp]

Hi Jim, thanks for the excellent questions and feedback. I am not much of an App Designer expert, but I know that our key engineer for App Designer will be very interested in your questions and feedback. I'll make sure he sees this.

[Chris_P_Intel]

===> QUESTIONS 1: how can i set page transition in this case?

Some of the UI Frameworks have their own support for pages, and that sometimes includes page transitions and support for "Back".   jQueryMobile and App Framework are both examples of this.  None of he UI Frameworks have their own support for "sub-pages". That is a convenience that App Designer provides for you.  As they are independent of any paging system they do not support page transitions, nor integration with Back/History.

===> QUESTIONS 2: how come and how can I fix that? I want sub page 2 to be not scrolled to the bottom to begin with.

Good question. One solution would be to edit the activate_subpage function to also scroll the page back to top.

===> QUESTIONS 3: how can I use loadContent method to work with sub pages? (I personally like loadContent more than activate_subpage())

That'll be tricky. loadContent() is a JQM (and maybe AF) construct and its designed to work with the paging system of JQM. It knows nothing about sub-pages.  Also, if I remember correctly, loadContent() has the option to preserve the header/footer.  To me it is sounding like you shouldn't use sub-pages at all. 

===> QUESTIONS 4: how can I use the back button (created using the xdk) on the header to work with sub pages?

If you want that, you'll have to programatically muck with this history stack. But I'll warn you, JQM and AF are already mucking with the history stack to get their Back button to work between pages. Getting their Back button to also work with sub-pages will be challenging...at least in a generic way...you might be able to get just what you need in shimmed in without too much effort. How good at JS are you?

Instead of thinking of the sub-pages as underpowered pages, think of them as a simple way of getting a tab-like experience onto any page. This is their primary usage.

Hope this helps,

Chris

[Jim_A_4]

Thanks so much Chris! I have learned a lot just by reading the answers.

Editing the activate_subpage() is a great idea! I will definitely do that.

===> Questions: I am thinking to use $.ui.scrollToTop(pageDivId) method. Or is there a better one I can use?

===> Questions: I am curious if I do not use sub-pages, would i still be able to use sidebar and share within multiple pages?

To solve the back button issue, I have created a function to keep track of which pages a user had visited. When he clicks my back button, I will just track back one page and direct him to that page. Using the build-in back button will definitely save time.

Thanks again Chris.

Jim.

[Brian_W_Intel]

Hey Jim,

I'm currently implementing App Framework 3 inside of App Designer and let me start by saying a lot of the issues you have are solved there. You can load subpages using loadContent and they'll use page transitions. I've spent a lot of the last week going over the exact issues you're describing, so I'm sure you'll be happy with how AF3 works within AD.

I'll echo a lot of what Chris says, but if you want to change the backButton to do something different than what it's doing you can simply change the id of the button in Code view and then add an instance inside index_user_scripts.js to handle a click on the id. In App Framework 3 you'll just drag a button up in the header and you can have it do whatever you want, similar to other buttons. We can keep the back button option in there, but I'm of the opinion that a button widget gives you a lot more options to work with.

Let me know if you have any other issues you run into with AF2 and I can take a peek at how they work with AF3. If you want to switch right now, here's the link to App Framework 3: http://app-framework-software.intel.com/documentation.php#intro/welcome

AD may have some issues if you switch to AF3 inside of an AF2 project, but you can play around with some of the new functionality before we roll it out in a future release.

Brian

[Vlad_P_]

So close....

activate_subpage() works for subpages.

For main pages you want to use ui.loadContent()