How to apply deep linking in the mobile controls

Question

I'm trying to use mobile controls in a recent extension library. I've setup the basic structure and it seems to be working. However when I navigate to a page I don't get a # with the page name applied to the end. When I hit the back button I DO get a "#home" applied.

How do get the # to apply to the indivudal pages so they will stick if a full refresh is issued from the browser or someone wants to do deep linking?

Thanks!

<xe:singlePageApp id="singlePageApp1"
    selectedPageName="home">
    <xe:appPage id="home" pageName="home">
        <xe:djxmHeading id="djxmHeading0"
            label="My Home Page">
        </xe:djxmHeading>
        <xe:djxmLineItem id="djxmLineItem3" label="Sell Items"
            moveTo="mobilePage1">

        </xe:djxmLineItem>
        <xe:djxmLineItem id="djxmLineItem4" label="Sold Items"
                moveTo="mobilePage2">
            </xe:djxmLineItem>
    </xe:appPage>
    <xe:appPage id="appPage1" pageName="mobilePage1"
        autoCreate="true">
        <xe:djxmHeading id="djxmHeading1" label="Sell an Item"
            moveTo="home" back="Back">
        </xe:djxmHeading>
        <xc:cc_SellItem></xc:cc_SellItem>
    </xe:appPage>
    <xe:appPage id="appPage2" pageName="mobilePage2">
        <xe:djxmHeading id="djxmHeading2" moveTo="home" back="Back"
            label="Sold Items">
        </xe:djxmHeading>

        <xp:panel>List of Sold Items will go here.</xp:panel></xe:appPage>
    </xe:singlePageApp>

Answer 1

You just need to add the hash (#) prefix to the page name in the moveTo property:

<xe:djxmLineItem id="djxmLineItem3" label="Sell Items" moveTo="#mobilePage1"></xe:djxmLineItem>
<xe:djxmLineItem id="djxmLineItem4" label="Sold Items" moveTo="#mobilePage2"></xe:djxmLineItem>

Have a look at "The moveTo property" in the XPages Mobile Controls Tutorial.

Answer 2

The Extension Library also includes a Dynamic Content component. This component has a useHash property, which refers to the # in the URL. This should allow you to specify which portion of the app is loaded based on the hash value.