Mobile - Loading external view problem

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Mobile - Loading external view problem

richyevans
Hi

I've noticed that if I load an external view into a group container, the scroll view can be rendered incorrectly. I've created an example to demonstrate

http://jsfiddle.net/monkeybrains/dvxDU/13/

If you click the 'Open dom view' button, view3 is loaded. This works fine.
If you click the 'Open external view button' it attempts to load the same view content dynamically. Note that I don't know how to configure JSFiddle with external files, so I've added the content at the bottom of this post.

What I've noticed is that in _ScrollableMixin in the startup method, the line below contains 44px for the offsetHeight with the view from the dom and 0px for the dynamically loaded view.

        // params.fixedHeaderHeight = node.offsetHeight;   44px 0px

With 0px, it means that 44px of the content is clipped from the ScrollableView. Am I trying to do something  that I shouldn't? Any ideas what I can do to get around this?

Regards

This is the contents of ext.html

                <div id="view4" data-dojo-type="dojox.mobile.ScrollableView">
                   

Categories

                   

Generic
                        Mobile Device

                    <ul data-dojo-type="dojox.mobile.RoundRectList">
                        <li data-dojo-type="dojox.mobile.ListItem"
                            data-dojo-props='rightText:"AcmePhone"'>Network</li>
                    </ul>
                </div>
Reply | Threaded
Open this post in threaded view
|

Re: Mobile - Loading external view problem

Adrian Vasiliu
Hi,

You have tried using a dojox.mobile.View as target for openExternalView and a dojox.mobile.ScrollableView at the top of the external view. The trouble with the header goes away by doing the opposite, that is a dojox.mobile.View at the top of the external view and a scrollable view as target. We will see if this limitation can be removed (if not, it will be better documented).

Side remark regarding the version in the jsfiddle: in the HTML the target view (id="subgroup") has already the content declared in markup. I'm not sure what's the intention here, but I would think it should rather be empty, since the content is loaded from the external fragment.

Hope this helps,
Adrian

2012/8/3 richyevans <[hidden email]>
Hi

I've noticed that if I load an external view into a group container, the
scroll view can be rendered incorrectly. I've created an example to
demonstrate

http://jsfiddle.net/monkeybrains/dvxDU/13/

If you click the 'Open dom view' button, view3 is loaded. This works fine.
If you click the 'Open external view button' it attempts to load the same
view content dynamically. Note that I don't know how to configure JSFiddle
with external files, so I've added the content at the bottom of this post.

What I've noticed is that in _ScrollableMixin in the startup method, the
line below contains 44px for the offsetHeight with the view from the dom and
0px for the dynamically loaded view.

        // params.fixedHeaderHeight = node.offsetHeight;   44px 0px

With 0px, it means that 44px of the content is clipped from the
ScrollableView. Am I trying to do something  that I shouldn't? Any ideas
what I can do to get around this?

Regards

This is the contents of ext.html

                <div id="view4"
data-dojo-type="dojox.mobile.ScrollableView">

Categories


Generic
                        Mobile Device

                    <ul data-dojo-type="dojox.mobile.RoundRectList">
                        <li data-dojo-type="dojox.mobile.ListItem"

data-dojo-props='rightText:"AcmePhone"'>Network</li>
                    </ul>
                </div>



--
View this message in context: http://dojo-toolkit.33424.n3.nabble.com/Mobile-Loading-external-view-problem-tp3988281.html
Sent from the Dojo Toolkit mailing list archive at Nabble.com.
________________________________________________________
Dojotoolkit: http://dojotoolkit.org
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api
Tutorials: http://dojotoolkit.org/documentation

[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


________________________________________________________
Dojotoolkit: http://dojotoolkit.org
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api
Tutorials: http://dojotoolkit.org/documentation

[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: Mobile - Loading external view problem

Yoshiroh Kamiyama
In reply to this post by richyevans
That can happen if you dynamically create a ScrollableView under hidden state (display=none), because the browser does not return correct dimension in such situation. This may not be an ideal solution, but you can avoid the problem by doing this before calling openExternalView().

registry.byId("group").show();
--
ykami

________________________________________________________
Dojotoolkit: http://dojotoolkit.org
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api
Tutorials: http://dojotoolkit.org/documentation

[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: Mobile - Loading external view problem

richyevans
That appears to work for the test although the other view in the group becomes visible.

Is there anyway of avoiding views in the group becoming visible when loading views dynamically using your suggestion? I only want to transition to a dynamically loaded view or make it visible once I've added other data to the loaded view.

The other suggestion of switching ScrollableView to the parent from Adrian means the header is not fixed so that is not appropriate for my use case.

Thank you both for your suggestions.
Reply | Threaded
Open this post in threaded view
|

Re: Mobile - Loading external view problem

Yoshiroh Kamiyama
OK, if you say so.. (^^;
This is not a very good solution either (a bit too complex and relying on some internal stuff), but I believe this will work for you.
The idea is to first create a new view under the body without performing a view transition (this technique can be used to pre-fetch external views for later use), and when the view is ready, move the view to subgroup, and then initiate a transition to the new view.

openextview = function() {
    var vc = ViewController.getInstance();
    var url = "data/ext.html";
    Deferred.when(vc.openExternalView({
      url: url,
      noTransition: true
    }, win.body()), function(){
        var id = vc.viewMap[url]; // id of the new view
        registry.byId("subgroup").containerNode.appendChild(dom.byId(id));
        // ... do whatever necessary for the new view if any ...
        var transOpts = {
          moveTo: id,
          transition: "slide"
        };
        new TransitionEvent(win.body(), transOpts).dispatch();
    });
};
--
ykami

________________________________________________________
Dojotoolkit: http://dojotoolkit.org
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api
Tutorials: http://dojotoolkit.org/documentation

[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest