Enyo controls to replace HTML Frames

edited June 2012 in General
I'm trying to prototype a change to my company's web application to replace the current frames with enyo controls so that we can easily transition it for use on tablets, mainly iPads. I've been playing with the panels control, ajax and webservices to try and load the pages and have been unsuccessful in getting the current html pages to load as content. I've been looking for a simple example of a control being used as a web widget; does anyone have one handy?

Comments

  • What errors are you receiving in the JS console when you try to load a page?
  • edited June 2012
    If you want iframes, there is not an official iframe control yet, but you can do the trick with:
    enyo.kind({
    	name: "newness.iframe",
    	published: {
    		url: null
    	},
    	components: [{
    		name: "iframe",
    		tag: "iframe",
    		classes: "enyo-fill",
    		style: "border: none;"
    	}],
    	create: function() {
    
    		this.inherited(arguments);
    		this.urlChanged();
    	},
    	urlChanged: function() {
    		if(this.url) this.$.iframe.setSrc(this.url);
    	}
    });

    (This is as basic as it could be).
  • rafa - can this be implemented as a component for another kind (Slideable in this case)? It works fine on its own, but when I make it a component, I get an error in create:function() with "this.inherited(arguments)".
  • I'm using that exact code without issues as a Panel. Are you sure it's failing in this.inherited(arguments);? Try changing create with rendered.
  • Here's what I've been trying:
    new (enyo.kind({
    name: "App",
    kind: "Control",
    classes: "pullout enyo-slideable",
    style: "overflow: hidden;",
    components: [
    	{   kind: "Slideable",
    		axis: "h",
    		unit: "%",
    		min: -99,
    		max: 0,
    		overMoving: false,
    		classes: "enyo-fit",
    		style: "background: blue; width:40%;",
    		components: [
    		{
    			
    				name: "newness.iframe",
    				published: {
    					url: "browse.htm"
    				},
    				components: [{
    					id: "browse",
    					name: "iframe",
    					tag: "iframe",
    					classes: "enyo-fill",
    					style: "border: none;"
    				}],
    				rendered: function() {
    
    					this.inherited(arguments);
    					this.urlChanged();
    				},
    				urlChanged: function() {
    					if(this.url) this.$.iframe.setSrc(this.url);
    				}
    		}]
    	},
    	{ kind: "Control",
    		style: "background: green; width:100%; align: right",
    		components: [
    			{ content: "main frame" }
    		]
    	}
    ],
    animateFinish: function(inSender) {
    	if (inSender.value == 0) {
    		inSender.max = 0;
    		inSender.min = -99;
    	}
    }
    }))({ fit: true }).write();
    Made the change, and still having a problem. Error comes back as "a.callee._inherited is undefined" .
  • Also, can't use the 'iframe' tag as it seems the iPad renders that as a static frame, overriding the panel.
  • You're doing it wrong. What I posted is a kind definition, not a component to put inside your kind definition. newness.iframe is a kind by itself, so you must declare it and use it as any other component:
    enyo.kind({
    			
    				name: "newness.iframe",
    				published: {
    					url: "browse.htm"
    				},
    				components: [{
    					name: "iframe",
    					tag: "iframe",
    					classes: "enyo-fill",
    					style: "border: none;"
    				}],
    				rendered: function() {
    					this.inherited(arguments);
    					this.urlChanged();
    				},
    				urlChanged: function() {
    					if(this.url) this.$.iframe.setSrc(this.url);
    				}
    		});
    
    new (enyo.kind({
    name: "App",
    kind: "Control",
    classes: "pullout enyo-slideable",
    style: "overflow: hidden;",
    components: [
    	{   kind: "Slideable",
    		axis: "h",
    		unit: "%",
    		min: -99,
    		max: 0,
    		overMoving: false,
    		classes: "enyo-fit",
    		style: "background: blue; width:40%;",
    		components: [
    		{
    			        name: "browse",
    				kind: "newness.iframe",
    				url: "browse.htm"
    		}]
    	},
    	{ kind: "Control",
    		style: "background: green; width:100%; align: right",
    		components: [
    			{ content: "main frame" }
    		]
    	}
    ],
    animateFinish: function(inSender) {
    	if (inSender.value == 0) {
    		inSender.max = 0;
    		inSender.min = -99;
    	}
    }
    }))({ fit: true }).write();
  • Thanks, rafa. First round with enyo development; appreciate the patience. Have to do some other wiring of the existing code to get it to fully drop in, but looks like I'm over this hump.
  • great community this solution is what I was looking for days. Thanks Rafa I will try it on my code
  • edited September 2012
    I've been trying to use the newness.iframe control and have it working nicely on Chrome. Then I noticed that it is behaving oddly in Firefox.

    Here's my code:
    var panels = [
    	{name: "home", url: "lib/littlefirecode/MainLayout.html"},
    	{name: "twitter", url: "lib/littlefirecode/ListPulldownSample.html"},
    	{name: "delicious", url: "lib/littlefirecode/ListPulldownSampleDel.html"},
    	{name: "cloudcalx", url: "lib/littlefirecode/InputSample.html"}
    ];
    
    enyo.kind({		
    	name: "newness.iframe",
    	published: {
    		url: "lib/littlefirecode/MainLayout.html"
    	},
    	components: [{
    		name: "iframe",
    		tag: "iframe",
    		classes: "enyo-fill",
    		style: "border: none;"
    	}],
    	rendered: function() {
    		this.inherited(arguments);
    		this.urlChanged();
    	},
    	urlChanged: function() 
    	{
    		if(this.url) this.$.iframe.setSrc(this.url);
    	}
    });	
    
    enyo.kind({
    	name: "iframecontainer",
    	kind: "Control",
    	classes: "pullout enyo-slideable",
    	style: "overflow: hidden;",
    	components: [
    	{ components: [
    			{name: "browse", kind: "newness.iframe", url: "lib/littlefirecode/ListPulldownSample.html"}
    		],		
    	},
    	],
    	changeURL: function(urlChange) 
    	{
    		this.$.url = urlChange
    		this.$.browse.url = urlChange;
    		this.$.browse.urlChanged();
    	}		
    });
    
    enyo.kind({
    	name: "enyo.panels.Littlefirecode",
    	kind: "Control",
    	classes: "pullout enyo-slideable enyo-fit",
    	style: "overflow: hidden;",
    	components: [
    		{kind: "FittableColumns", noStretch: true, classes: "onyx-toolbar onyx-toolbar-inline", components: [
    			{kind: "Scroller", thumb: false, fit: true, touch: true, vertical: "hidden", style: "margin: 0;", components: [
    				{classes: "onyx-toolbar-inline", style: "white-space: nowrap;", components: [
    					{kind: "onyx.RadioGroup", onActivate:"radioActivated", components: [
    						{content: "about me", ontap: "aboutmePanel", active:true},
    						{content: "twitter", ontap: "twitterPanel"},
    						{content: "delicious", ontap: "deliciousPanel"},
    						{content: "cloudcalx", ontap: "cloudcalxPanel"}
    					]},					
    					{name: "searchSpinner", kind: "Image", src: "assets/splash_beta_lightgreen32x32.png", showing: true, style: "float: right; margin: 3px 8px 9px 0;"},
    					{content: "littlefirec de", classes:"littlefirecode-title-font", style: "float: right; margin: 0 -8px 0px 0;"},					
    					{kind: "onyx.Grabber", style: "float: right; margin: 6px -275px 0px 0;"},
    				]}
    			]}
    		]},
    		{name: "iframecontainerall", kind: "iframecontainer", fit: true}
    	],
    	...
    	...
    });
    CHROME
    image

    FIREFOX
    image

    As you can see from the second image (Firefox), a big white container/frame appears on the screen. I've also noticed right aligned images/text in toolbars don't render as I'd expect either.

    Apologies if my code is poor here - still learning! Any help would be so appreciated.

    Frank.
  • The fix for the above is in the "iframecontainer" - add classes: "enyo-fit"

    {name: "browse", kind: "newness.iframe", url: "lib/littlefirecode/MainLayout.html"}

    to

    {name: "browse", kind: "newness.iframe", classes: "enyo-fit", url: "lib/littlefirecode/MainLayout.html"}

    Thanks,

    Frank.
  • Actually, that doesn't work - apologies. It does solve the issue itself, but in doing so now my main top toolbar no longer exists.
Sign In or Register to comment.