Enyo controls to replace HTML Frames

easports82 · June 2012

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?

omastudios · June 2012

What errors are you receiving in the JS console when you try to load a page?

rafa_bernad · 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).

easports82 · June 2012

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)".

rafa_bernad · June 2012

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.

easports82 · June 2012

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" .

easports82 · June 2012

Also, can't use the 'iframe' tag as it seems the iPad renders that as a static frame, overriding the panel.

rafa_bernad · June 2012

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();

easports82 · June 2012

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.

Sgcheco · June 2012

great community this solution is what I was looking for days. Thanks Rafa I will try it on my code

littlefirecode · 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

FIREFOX

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.

littlefirecode · September 2012

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.

littlefirecode · September 2012

Actually, that doesn't work - apologies. It does solve the issue itself, but in doing so now my main top toolbar no longer exists.

Enyo controls to replace HTML Frames

Comments

Howdy, Stranger!

Quick Links

Categories