[dojox/app] HTML5 pushState/ popState oddities

[Paul Christopher]

Description

The HTML5 history controller seems to be broken in some ways:

1) If you navigate from the home screen (start screen of the app/ "default view") to another view and than press the browser's back button, the evt.state object in history.js onPopState is always null or undefined. Therefore the application can never use the stored transition in the evt.state object. Instead it falls back to a defaultTransition which might be of another type. I think it is confusing for the user, if different transitions are used for showing/hiding a view - especially if the view is hidden by a history.back() action.

2) History.js seems to store the wrong transition types for views, see explanation below.

Steps to reproduce issue 1

In dojox/app/tests/multiSceneApp, set a fade transition for the tab bars in application.html:

<div>
	<ul data-app-constraint="bottom" dojoType="dojox.mobile.TabBar" fixed="bottom" style="position: relative;border-bottom:none;" iconBase="../images/tab-icons.png">
		<li dojoType="dojox.mobile.TabBarButton" iconPos1="0,58,29,29" iconPos2="29,58,29,29" selected="true" transitionOptions='{title:"Home",target:"home",transition:"fade",url: "#home"}'>Home</li> 
		<li dojoType="dojox.mobile.TabBarButton" iconPos1="0,0,29,29" iconPos2="29,0,29,29"  transitionOptions='{title:"Main",transition:"fade", target:"main,main",url: "#main,main"}'>Main</li> 
		<li dojoType="dojox.mobile.TabBarButton" iconPos1="0,29,29,29" iconPos2="29,29,29,29" transitionOptions='{title:"TabScene - Tab1",transition:"fade",target:"tabscene,tab1",url: "#tabscene,tab1"}'>Tabbed Scene</li> 
	</ul> 
</div>

Run the app. In history.js, set a break point in the line, where the state is pushed (line 60). Set another break point somewhere in onPopState, so as to observe the retrieved state object.

Now click on the "Main" icon in the tab bar. A fade transition brings you to the "Main" view. The state is also saved correctly.

Now click on the back button. A slide transition is used to get back to the main screen (which is the default transition set in config.json). In onPopState, the state object is null. The app has forgotten everything and needs to fall back to a default ("slide"), but I should have used "fade".

Steps to reproduce issue 2

Change application.html as follows:

<div>
	<ul data-app-constraint="bottom" dojoType="dojox.mobile.TabBar" fixed="bottom" style="position: relative;border-bottom:none;" iconBase="../images/tab-icons.png">
		<li dojoType="dojox.mobile.TabBarButton" iconPos1="0,58,29,29" iconPos2="29,58,29,29" selected="true" transitionOptions='{title:"Home",target:"home",transition:"fade",url: "#home"}'>Home</li> 
		<li dojoType="dojox.mobile.TabBarButton" iconPos1="0,0,29,29" iconPos2="29,0,29,29"  transitionOptions='{title:"Main",transition:"flip", target:"main,main",url: "#main,main"}'>Main</li> 
		<li dojoType="dojox.mobile.TabBarButton" iconPos1="0,29,29,29" iconPos2="29,29,29,29" transitionOptions='{title:"TabScene - Tab1",transition:"slide",target:"tabscene,tab1",url: "#tabscene,tab1"}'>Tabbed Scene</li> 
	</ul> 
</div>

Run the app. Click on the "Main" icon. A flip transition brings you to the main scene. Now, click on the "Tabbed Scene" icon. A slide animation brings you to the "Tabbed Scene". Now click the back button and in onPopState, examine the retrieved state object: It gives you as target "main, main" but as transition type "flip" (and not "slide").

Discussion

See ​http://stackoverflow.com/a/10004632 for an explanation of issue 1 : "When you call pushState() and then use the back button you aren't going back to the last pushState (which is actually the current state) but to the state before that." And this state does not exist in dojox/app (and "state" is therefore correctly reported as "null").

[Paul Christopher]

Added a proposal for patch which fixes #17056 , #17069 , #17057 (CLA on file)

[Ed Chatelain]

I will try the patch, but it is too late to get it into 1.9, if it works I will try to get it into 1.9.1. But the good news is that these controllers are designed to be easily customizable, so if this patch works for you, your app can use setup a custom history controller in your config which uses a custom history controller with this fix.

[Ed Chatelain]

Thanks for the patch, it looks good to me. I will plan to get this into 1.9.1.

Since dojox/app is one of the few dojo projects that actually exist on github, and use an svn external to get pulled into the dojo svn, it would be better if you could create github issues and pull requests instead of trac tickets and patches for dojox/app in the future.

The github repo for dojox/app is here: ​https://github.com/dmachi/dojox_application

And you would go here to create a new issue. ​https://github.com/dmachi/dojox_application/issues?state=open

Thanks

[Ed Chatelain]

Fixed by ​https://github.com/dmachi/dojox_application/pull/198 Thanks Paul Christopher (CLA).