Enyo, phonegap, IOS, Webview

edited February 2012 in Enyo 1.0

I have an app (TouchTax) for webOS that relies on opening locally stored html files in a WebView. I understand that WebViews in enyo on PhoneGap on IOS don't work. Is there an alternative to viewing html content within the app without opening the external browser? I understand htmlcontent kinds can't take large amounts of html... Any advice??

Comments

  • WebView just maps into an iframe on iOS and Android. That should be able to load the local file just as easily as the WebView on webOS does.
  • edited February 2012
    Thanks unwiredben. For the longest time, changing enyo.WebView did not work. Now it does. I looked at the Demo.js file in one of the sample directories. However, now my problem is that I can't scroll up and down within the loaded URL.

    Scrolling works properly in this test .js:
    enyo.kind({
    	name: "TouchTax",
    	kind: enyo.HFlexBox,
    	components: [
            {flex: 1, components: [
                {name: "view", kind: enyo.Iframe, className: "enyo-fit"}
    		]},
    	],
        create: function() {
    		this.inherited(arguments);
    	},
    	ready: function() {
    		alert("Ready!");
            this.$.view.setUrl("./htmls/test.html");
    	},
    });
    BUT, when I implement Iframe in my normal document, the entire screen swipes up and down, but I can't scroll the actual HTML that I am loading. What am I doing incorrectly? Here's a sample:
    enyo.kind({
    	name: "TouchTax",
    	kind: enyo.VFlexBox,
    	components: [
    		{name: "slidingPane", kind: "SlidingPane", flex: 1, components: [
    			
    			//////////////////////////////////////////////
    			// This is the first pane
    			{name: "searchPane", width: "230px", kind:"SlidingView", components: [
    				// Bla bla bla
    
    			//////////////////////////////////////////////
    			// This is the second pane
    			{name: "webViewPane", flex: 1, kind:"SlidingView", peekWidth: 0, components: [
    				{kind: "Header", name: "webHeader", style: "background-color: grey", components: [
    					{kind: enyo.HFlexBox, style: "margin-top:-12px; margin-bottom:-12px", flex: 1, components: [
    						{kind: "Spacer"},
    						{content: "TouchTax Code and Regulations", name: "webViewTitle", style: "text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"},
    						{kind: "Spinner", name: "webViewSpinner", align: "right"}
    					]}
    				]},
                    {kind: "Scroller", name: "webScroller", flex: 1, components: [
                        {kind: (window.PalmSystem ? enyo.WebView : enyo.Iframe), flex: 1, name: "currentIframe", className: "enyo-fit", onPageTitleChanged: "actionPageChange", onLoadComplete: "actionHideWebViewSpinner", onLoadStarted: "actionShowWebViewSpinner"}
                    ]},
    			]},
    			
    			//////////////////////////////////////////////
    			// THIS IS THE THIRD PANE
    			{name: "notePane", width: "200px", peekWidth: 50, dismissible: true, onHide: "actionHideNote", onShow: "actionShowNote", kind:"SlidingView", components: [
    				// Bla bla bla
    			]}
    		
    		]},
    	],

    See above, where I insert the Iframe in the second pane. When I load a URL into that frame using setUrl(), the URL loads, but I can't scroll up and down within the frame. Instead, the entire application window moves up and down, as if it were trying to scroll. What am I missing?

    Also, I noticed the API for Iframe shows the kind as "IFrame" (capitalizing I and F), but when I write is with the capital I and F, the system creates an error, stating that there is no constructor for an IFrame. Only Iframe works. Is this a bug?

    Thanks!
  • Yeah, that looks like a documentation error with the inconsistent spelling.

    As for scrolling -- that's a general system issue. IFRAME scrolling on touch devices is something that's only started working on recent versions of webOS, iOS, and Android. Sometimes you can do it with a two-finger scroll... you'll probably need to use your own enyo.Scroller wrapper around it, but I've not really tried it myself.
  • Hmm... I just read the PSA about using pre together with the code block. Thanks for cleaning this one up! I'll remember next time.
Sign In or Register to comment.