Calling Server-side JS/Code during Mobile Page Transitions - 1: Transition EventHandlers (9.0.1)

Language

XPages

Tags

Author

Tony McGuckin

Submitted on

November 1, 2013 at 8:17 AM

Rating

Downloads

Notes

Notes/Domino 9.0.1 now provides you with Mobile App Page Transition Events (onBefore/After Transition In/Out) plus onOrientationChange and onResize events. All of these new events support both client and server-side event handling. This eliminates the need to use custom client-side dojo.connect's to invoke jsonRPCService method handlers to further execute server-side logic. Furthermore, these new events react against the appropriate target Mobile App Page within the servers-side component tree. Pre 9.0.1, use of the RPC approach was the only means of achieving a similar outcome but limitations with this approach do not ensure the RPC invocation is executed against the destination Mobile App Page - instead invocations are executed against the currently loaded Mobile App Page. In addition, these new events eliminate request/response redundancy in that less requests are issued during "reset of dynamic content" invocations. A typical RPC "reset of dynamic content" invocation requires three requests, versus these new events only requiring two. In summary, these new "Transition" events are leaner, require no boiler-plate code for connecting to the events, and act against their respective "owner" Mobile App Page. They should be used exclusively in favor over custom dojo.connect's.

<?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">
	<xp:this.beforePageLoad>
		<![CDATA[#{javascript:
			viewScope.invokedBy = "<nobody>";
		}]]>
	</xp:this.beforePageLoad>
	<xe:singlePageApp id="singlePageApp1" selectedPageName="page1">
		<xe:appPage id="appPage1" pageName="page1"
			resetContent="true">
			<xp:text id="p1Text"
				value="#{javascript:println('p1Text'); return 'p1Text';}">
			</xp:text>
			<xp:br></xp:br>
			<xp:text id="computedField1"
				value="#{javascript:viewScope.invokedBy}">
			</xp:text>
			<xp:eventHandler event="onBeforeTransitionIn" submit="true"
				refreshMode="complete">
				<xe:this.script><![CDATA[console.log("onBeforeTransitionIn page1")]]></xe:this.script>
				<xe:this.action>
					<![CDATA[#{javascript:
						viewScope.invokedBy = "onBeforeTransitionIn page1";
						println(viewScope.invokedBy);
					}]]>
				</xe:this.action>
			</xp:eventHandler>
			<xe:djxmHeading id="djxmHeading1">
				<xp:this.facets>
					<xe:toolBarButton id="toolBarButton1"
						xp:key="actionFacet" moveTo="page2" transition="slide">
						<xe:this.label><![CDATA[>]]></xe:this.label>
					</xe:toolBarButton>
				</xp:this.facets>
				Page 1
			</xe:djxmHeading>
		</xe:appPage>
		<xe:appPage id="appPage2" pageName="page2"
			resetContent="true">
			<xp:text id="p2Text"
				value="#{javascript:println('p2Text'); return 'p2Text';}">
			</xp:text>
			<xp:br></xp:br>
			<xp:text id="computedField2"
				value="#{javascript:viewScope.invokedBy}">
			</xp:text>
			<xp:eventHandler event="onBeforeTransitionIn" submit="true"
				refreshMode="complete">
				<xe:this.script><![CDATA[console.log("onBeforeTransitionIn page2")]]></xe:this.script>
				<xe:this.action>
					<![CDATA[#{javascript:
						viewScope.invokedBy = "onBeforeTransitionIn page2";
						println(viewScope.invokedBy);
					}]]>
				</xe:this.action>
			</xp:eventHandler>
			<xe:djxmHeading id="djxmHeading2">
				<xp:this.facets>
					<xe:toolBarButton id="toolBarButton2"
						xp:key="actionFacet" moveTo="page1" transition="slide">
						<xe:this.label><![CDATA[>]]></xe:this.label>
					</xe:toolBarButton>
				</xp:this.facets>
				Page 2
			</xe:djxmHeading>
		</xe:appPage>
		<xp:eventHandler event="onOrientationChange" submit="true"
			refreshMode="norefresh">
			<xe:this.script><![CDATA[console.log("onOrientationChange")]]></xe:this.script>
			<xe:this.action><![CDATA[#{javascript:println("onOrientationChange")}]]></xe:this.action>
		</xp:eventHandler>
		<xp:eventHandler event="onResize" submit="true"
			refreshMode="norefresh">
			<xe:this.script><![CDATA[console.log("onResize")]]></xe:this.script>
			<xe:this.action><![CDATA[#{javascript:println("onResize")}]]></xe:this.action>
		</xp:eventHandler>
	</xe:singlePageApp>
</xp:view>

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.

No comments yetLogin first to comment...