Opened 10 years ago

Closed 10 years ago

#14004 closed enhancement (invalid) nested views transition event performTransition should be called on nesting view

Reported by: ebengtso Owned by: ykami
Priority: high Milestone: 1.8
Component: DojoX Mobile Version: 1.7.0b1
Keywords: Cc: Eric Durocher
Blocked By: Blocking:


If you have a button in a nested view with a moveTo, rather than considering the leaf node as current view, the current view should the node sibling to the moveTo node.

I could see several todos for version 1.8 in View, ViewController?, to support nested views.

Can you please consider implementing this on version 1.7 since this is a quite common case?

Change History (9)

comment:1 Changed 10 years ago by ebengtso is a subclass of (to support dojox.grid.EnhancedGrid?) soa.widget.Service is a widget with dojox.grid.EnhancedGrid?

A click on a cell of gridService, triggers a, which causes enhancedgridnestedviewto be replaced by serviceview. The correct would be servicelistnestingviewto get replaced by serviceview.

<div id="servicelistnestingview" dojoType="" selected="true">
    <h1 dojoType="" label="Services">
    <div dojoType="" id="enhancedgridnestedview">
        <div id="gridService" dojoType="soa.widget.Service" moveTo="serviceview">
     <h1 dojoType="" label="A bottom" fixed="bottom">
<div id="serviceview" dojoType="">
Last edited 10 years ago by ebengtso (previous) (diff)

comment:2 Changed 10 years ago by ykami

Then, you should not use View for enhancedgridnestedview. How about using a <div> or instead?

comment:3 Changed 10 years ago by ebengtso

I could not make a nesting to work. The calculated height did not subtract the bottom's Heading height from it's height, and the bottom Heading was not displayed in the screen.

So I decided to subclass and take Headings height in consideration when calculating the space left to show the view. Now all the widgets shows correctly, but the event is not dispatched to the view.

In the meanwhile I found a solution to my problem. overwrite the performTransition method and delegate to the parent view.

Let me know if this solution makes sense and it's future proof.

performTransition: function(/*String*/moveTo, /*Number*/dir, /*String*/transition,
		/*Object|null*/context, /*String|Function*/method /*optional args*/){
	var dm = lang.getObject("", true);

	//trick to set super view as currentView
	var node = this.domNode.parentNode;
		var n = node;
		if(n.nodeType === 1 && domClass.contains(n, "mblView") && domStyle.get(n, "display") !== "none"){
			var view = registry.byNode(n);
			view.performTransition(moveTo, dir, transition, context, method);
		node = node.parentNode;

comment:4 Changed 10 years ago by ykami

Milestone: tbd1.7
Resolution: invalid
Status: newclosed

Even if it works, it is not a proper usage of the View. If you need a fixed header and a fixed footer, ScrollableView is provided for that purpose. fixed="bottom" in you sample does not work with View. It is for ScrollableView. If you do not need the scrollable capability and still want to have the fixed header/footer by calculating the height of the content area, I still think <div> or ContentPane is the one for your content area. If you want to explicitly make a transition from servicelistnestingview to serviceview, you should call performTransition of servicelistnestingview as follows. Overriding performTransition is not necessary, and I don't think it is a good idea.

    var view1 = dijit.byId("servicelistnestingview");
    view1.performTransition("serviceview", 1, "slide");

comment:5 Changed 10 years ago by ebengtso

Resolution: invalid
Status: closedreopened

Thanks. You helped me to proceed further, yet performTransition is not targeting the right "source" view when the inner view is the current view:

Rather than transitioning from outerview1 to outerview2, it transitions from innerview2 to outerview2. As result, outerview2 is shown as a child view of outerview1.

<div dojoType="" id="outerview1">
  <h1 dojoType="" label="Outer View 1">
    <div dojoType="" barType="segmentedControl" style="float:right;">
      <div dojoType="" moveTo="innerview1" selected="true">
        Inner View 1
      <div dojoType="" moveTo="innerview2">
        Inner view 2
  <div dojoType="" id="innerview1">
    inner view 1
  <div dojoType="" id="innerview2">
     <script type="dojo/event" event="onAfterTransitionIn">
        //just for test 
	var v = dijit.byId('outerview1');
        v.performTransition('#outerview2', 1, "slide");

    inner view 2
<div dojoType="" id="outerview2">
  <h1 dojoType="" label="Outer View 2"></h1>
  outer view 2

comment:6 Changed 10 years ago by ykami

Current view does not matter. Can you please take a look at test_grouped-views.html, test_grouped-scrollable-views.html, or test_iPhone-ScrollableView-demo.html to learn what grouped view is for and how it works?

comment:7 Changed 10 years ago by ebengtso

I don't see the difference from my example above to test_grouped-views.html, except that I'm using hashs.

Without the hash, the transition works. Yet, I would like to have a bookmarkable page.

 v.performTransition('outerview2', 1, "slide");

comment:8 Changed 10 years ago by ykami

I am sorry, it looks I missed your last response. Do you still see the problem? Did you require bookmarkable.js to enable the bookmarkable feature?

comment:9 Changed 10 years ago by ykami

Cc: Eric Durocher added
Resolution: invalid
Status: reopenedclosed

If you still see a specific problem, please feel free to reopen this with more information.

Note: See TracTickets for help on using tickets.