This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal



Feb 28, 2012, 10:24 AM
17 Posts
topic has been resolvedResolved

tracking mobile pages - back button

  • Category: Extension Library
  • Platform: All
  • Release: 8.5.3
  • Role: Developer
  • Tags: mobile controls
  • Replies: 5
I'm trying to make a simple mobile application with two views. A document can be opened from any of the views. From the "back" button of the document I would like to send it back to the view the user opened this document from.
 
I am following this tutorial:
http://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPages_Mobile_Controls_Tutorial_
 
however I have some problems putting the mobile page for the document on the same XPage with views. So in the end I have 2 XPages:
1) contains 3 mobile pages - Home (contains 2 links to views), View1, View2
2) contains doc (can be opend either from View1 or View2)
 
In this "mobile" setting I cannot find a way to track which view the doc comes from. While testing in browser I use:
<xe:djxmHeading id="djxmHeading2" back="Back" href="javascript:history.go(-1)">
 
However I'm not at all sure that it will work well on real handsets. And eventually I might need to do a couple more action on doc, such as an edit, and only then, on "save and close", I would like to go back to the correct view.
 
I have tried to calculate "http referer": var rq = facesContext.getExternalContext().getRequest(); return rq.getHeader("Referer");
but it does not return the view url.
 
I have a feeling that the only way to do this properly is to split up each mobile page on one real page. Then I have access to the page events and can store last viewname in the session.
 
But that kind of leaves "single page application" an extremely half backed implementation - I had to drop doc page from it and finally cannot also use view pages in a reasonable scenario.
Feb 28, 2012, 2:21 PM
126 Posts
Re: tracking mobile pages - back button
 Hi,
 
First of all could you explain the reason why you require 2 XPages? The Dsicussion and Teamroom templates that ship with the ExtLib have multiple views and pages to open documents in the same XPage, perhaps there is a different issue you are facing. 
 
I have done up a quick example of computing the "selectedPageName" property of the singlePageApp control, in this example I have 2 XPages, mobile1.xsp has 2 appPages with a button to switch views and a button to move to mobile2.xsp. on mobile2.xsp I have a button that when clicked will return to whatever mobile page you clicked to get to the second page. Here is the code:

** This example requires an application with access to the EXtLib and the "xsp.theme.mobile.pagePrefix" property set to "mobile" in the xsp.properties **

mobile1.xsp 
 
 <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xe:singlePageApp id="DiscussionApp">
<xp:this.selectedPageName><![CDATA[#{javascript:
if(null == sessionScope.selectedPage)
{
print('Inside null');
return "mobile1";
}
else
{
print('Inside value: ' + sessionScope.selectedPage);
return sessionScope.selectedPage;
}
}]]></xp:this.selectedPageName>

<xe:appPage resetContent="true" id="mobile1"
pageName="mobile1">
<xe:djxmHeading id="djxmHeading1" label="All Documents">
</xe:djxmHeading>

<xp:label value="This is page 1, view 1"></xp:label>
<xp:br></xp:br>
<xp:button value="Move to page 2" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:
sessionScope.selectedPage = "mobile1";
context.redirectToPage("/mobile2.xsp");
}]]></xp:this.script>
</xp:executeScript>
</xp:this.action>
</xp:eventHandler>
</xp:button>

<xp:button value="Move to view 2" id="button3">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<xe:moveTo direction="Left to Right"
targetPage="mobile2" transitionType="slide">
</xe:moveTo>
</xp:this.action>
</xp:eventHandler>
</xp:button>

</xe:appPage>

<xe:appPage resetContent="true" id="mobile2"
pageName="mobile2">
<xe:djxmHeading id="djxmHeading2" label="Most recent">
</xe:djxmHeading>

<xp:label value="This is page 1, view 2"></xp:label>
<xp:br></xp:br>
<xp:button value="Move to page 2" id="button2">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:
sessionScope.selectedPage = "mobile2";
context.redirectToPage("/mobile2.xsp");
}]]></xp:this.script>
</xp:executeScript>
</xp:this.action>
</xp:eventHandler>
</xp:button>

<xp:button value="Move to view 1" id="button4">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<xe:moveTo direction="Left to Right"
targetPage="mobile1" transitionType="slide">
</xe:moveTo>
</xp:this.action>
</xp:eventHandler>
</xp:button>

</xe:appPage>

</xe:singlePageApp>

</xp:view>
 
 
 
mobile2.xsp 
 <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xe:singlePageApp id="DiscussionApp" selectedPageName="mobile3Home">

<xe:appPage resetContent="true" id="mobile3Home" pageName="mobile3Home">
<xe:djxmHeading id="djxmHeading1" label="Page 2">
</xe:djxmHeading>
<xp:button value="Back to view #{javascript:param.from}" id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">

<xp:this.action>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:
context.redirectToPage("/mobile1.xsp");
}]]></xp:this.script>
</xp:executeScript>
</xp:this.action></xp:eventHandler>
</xp:button>
</xe:appPage>
</xe:singlePageApp>
</xp:view>
Feb 29, 2012, 9:37 AM
17 Posts
Re: tracking mobile pages - back button
Thanks a lot. That seems to be a workable approach. What about  "javascript:param.from" - where that magic comes from? Something documented?

I was using code like:
            <xe:djxmLineItem id="djxmLineItem1" label="My Opps"
                moveTo="#myOpps">
            </xe:djxmLineItem>
            <xe:djxmLineItem id="djxmLineItem2" label="My Team"
                moveTo="#myTeam">
            </xe:djxmLineItem>
to switch my views. The buttons looked fancy enough, but without an option to make a roundtrip to the server to put anything in session scope so I know which page I open.
 
As for why I needed a second page.  If I try to create a mobile page called "doc" and define the pagename="#doc" for the view, I get dojo message about transition error, page: null.

When I look at url that it tries to open, it is:

.../app.xsp#doc?databaseName=srv!!app.nsf&documentId=C125795A003B9ABFC12579510023985B&action=openDocument

while what IMO it should be is

.../app.xsp?databaseName=srv!!app.nsf&documentId=C125795A003B9ABFC12579510023985B&action=openDocument#doc

 
 I thought that about the only way to deal with this is to create a separate xpage for the document so it does not deal with anchor links.
 
I'll have a look how it is implemented in standard templates. There must be some trick. I assume instead of simply setting pagename="#doc" and selecting "show as link" in View element or using default calculation by the Summary column in Data View (I tried both with no success), I have to calculate the url myself. Edited: just tried, calculate url works...
 
I wonder only what is the gain if I manage to keep them all on the same single application page. I've heard that for iPhone full screen apps, it must all happen on the same page. I haven't tried with real iPhone yet, so not sure how bad my 2 page design is :-)
 
Edited:
Works, two small things with this solution:
  1. I cannot use the fancy buttons generated by "Line Item" (or maybe I can, just somehow need to the provide particular style?)
  2. In order to use action moveTo in normal button, the transition type cannot be empty (was fighting with a this for some time :-)
    <xe:moveTo direction="Left to Right" targetPage="mobile2" transitionType="slide">
 
Mar 16, 2012, 11:38 AM
126 Posts
Re: tracking mobile pages - back button
 Hi,
 
Sorry for the very long delay in getting back. 
 
Ok so the javascript "param.from"  this is an inbuilt variable to allow you to access URL parameters in the same way that  "context.getUrlParameter("from") " does, only this way is shorter.
 
As regards the statement that there was no where to add to the session scope from the <xe:djxmLineItem, well thats not true about any control in XPages below is an example of added script to a property that will work fine. 
 
 <xe:this.label><![CDATA[#{javascript:
sessionscope.from = "previousPage";
return "Option 1";
}]]></xe:this.label>
 
So whats happening here is that your telling XPages you want to compute the label property, it will then run any code inside such as adding to the session scope, it doesn't matter that this has nothing to do with the label, at the end of the day it runs and the label gets printed out, easy way to get around things from time to time. 
 
I haven't seen that issue you mentioned with the url and #, off the top of my head i know that everywhere I set pageName I don't include the hash, I think I might have had weird behaviour with that. Discussion / Teamroom both don't do that.
 
I would recommend looking at the discussion mobile example. In mobile.xsp the main page is inside the custom control "mobile_home" this page has links to several appPages with dataviews, each one of these views then links to an appPage "document", all within the same XPage.
 
XPages adopted the design of a single page page and incorporated dojo javascript library. So when doing a server side request for a new XPage you will then have issues using the client side functionality of dojo from one page to another. While it is possible to do so (as my previous example shows), it just adds a lot of complexity to the app that is handled for you inside the singlePage app design.   
Mar 29, 2012, 7:31 PM
12 Posts
Re: tracking mobile pages - back button
thanks a bunch Simon for getting back with your comments.
 
I. as for backend script with djxmLineItem - what I meant - I do not have a way to change to some variable that says that I have clicked this button not some other. If I put SSJS it in button's label, then if I have two buttons the code will get executed in each button's label. I need it executed only if I click the button.
 
Now in my circumstances however - when each button opens a different page, your idea is workable in a sense that I can put this computed label on the mobile page this button opens - so I can track which view I'm using.
 
II. as for the use of the document mobile page this seems to be very subtle issue. I investigated mobile.xsp in discussion8XL.ntf. And the issue seems to be down to how the XPage engine will interpret pageName tag. Here is how it calculates pageName value in mobile.xsp (down in custom control) :
        <xp:this.pageName><![CDATA[#{javascript:if(isMobile())
                {
                    return "document";
                }
                else
                {
                    return "topicThread.xsp";
                }}]]></xp:this.pageName>

It looks like on the mobile device it returns a mobile page name and on other platforms sends to a different XPage. In theory...
 
1) issue on non-mobile platform - if I just open mobile.xsp in browser and click to open the doc, it will fail. Because it tries to open the mobile page called "topicThread.xsp" - it will try to interpret the name as a mobile page name (that does not exist)
2) if I modify function isMobile() so that it always returns "true" , it will go to the correct mobile page "document". BUT - only in discussion db.
 
In short in Discussion database it interprets pageName value as a mobile page name, while in any other context it interprets it as a normal design element (XPage) name. If I move the mobile.xsp page from the discussion template (along with minimum dependencies - views and custom controls) to my db it will still not work, because it will try to look for "document" as a design element. So what/where is the secret switch that tells how to interpret pageName? Or am I missing something obvious?
 
The pages of course look different in my db - the CSS is missing and I have different data... In discussion database it looks like it formats view entries as fancy buttons (same look as when using djxmLineItem)
 
There is a bunch of things in the theme in discussion db, that I did not pull over, but it's hard to imagine how the frontend JS and CSS could make the difference in this case. Whatever dojo does on frontend - does it (or some other UI script) really rebuild URLs generated in backend (?) This sounds worse than my workaround of simply generating the correct URL in column data.
 
Apr 3, 2012, 8:30 AM
126 Posts
Re: tracking mobile pages - back button
 Hi Normunds,
 
Yes It sounds like your missing the "xsp.theme.mobile.pagePrefix" property in the xsp.properties file  - you'll find it in the package explorer view or press Ctrl + shift , R  (eclipse shortcut for opening a resource) and start typing "xsp.properties" and it will pop up in the list. In the discussion db this property is set as "xsp.theme.mobile.pagePrefix=mobile" so what this does is it will apply a mobile theme to any XPage that starts with or is the string "mobile", so mobile.xsp, or mobileHome.xsp etc, will all receive this styling. The differences your seeing on the dataview where it looks like a line item is a mobile rendering, the form table and outline control will also render differently based on whether on mobile or not (decided by the above property).
 
This work enables a developer to produce much smaller apps, so take what I did for the discussion db. I implemented a "crossover" pattern. If you look at the mobile.xsp and the allDocuments.xsp you'll see that both are using the same custom control, inside this custom control you'll see not a lot of difference for mobile / desktop apart from a few "isMobile()" checks. So from my point of view I had to overhaul the discussion web to use the new ExtLib controls where possible and add a mobile view, thanks to this automatic rendering the mobile section was quite small as after I upgraded to the dataview all I really needed to do was change the page name and load different pagers based on the user agent to see whether its on mobile or not. So the section where you pointed out the computation of the page name either being document or topicThread.xsp, whats happening here is on mobile the pageName is expecting an appPage id and the dataview will render as a list of line items, while on the web the dataview will render similar to the view panel but the pageName is expecting an XPage.
 
This pattern can greatly reduce complexity and error debugging as there shouldn't be anything different between web / mobile and it also offers a huge amount of code reuse. 
 
Simon 

This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal