PDA

View Full Version : Change to AutoLoad Property


geoffrey.mcgill
Dec 16, 2008, 2:45 PM
For the v0.7 release we will be implementing a breaking change to the .AutoLoad property.

The .AutoLoad property allows for the dynamic (Ajax) loading of an external Page into the the <Body> of any Control that inherits from Panel, such as <ext:Panel>, <ext:Window> and <ext:Tab>.

In an early release of the Coolite Toolkit, the .AutoLoad property was implemented using a simple "string" data type which expected a local or remote url.

In v0.6 we introduced the .AutoLoadIFrame property which would automatically add an <iframe> to the Panels <Body> and load the url into that <iframe>.

With v0.7 we're adding support for many more AutoLoad properties and need more flexibility in the object/markup model. The .AutoLoad property will now accept a LoadConfig object which includes new extra and enhanced functionality.

The following code sample demonstrates the syntactic differences between the old AutoLoad[typeof string] property and new AutoLoad[typeof LoadConfig] property.

Example


// Existing (v0.6)
<ext:Panel
ID="Panel1"
runat="server"
Title="Parent"
Height="200"
AutoLoad="Child.aspx"
/>

// New (v.07)
<ext:Panel
ID="Panel1"
runat="server"
Title="Parent"
Height="200">
<AutoLoad Url="Child.aspx" />
</ext:Panel>

The move to the new <AutoLoad> property also affects the existing (v0.6) .AutoLoadIFrame property. We've added a new "Mode" Enum property to the LoadConfig which enables the developer to specify whether the url should be set to "Merge" the url's html into the <Body> of the Panel, or "IFrame" which creates an <iframe> in the <Body> and loads the url into that <iframe>.

The following code sample demonstrates how to replicate the functionality of the previous .AutoLoadIFrame property.

Example


// Existing (v0.6)
<ext:Panel
ID="Panel1"
runat="server"
Title="Parent"
Height="200"
AutoLoadIFrame="http://www.google.com/"
/>

// New (v0.7)
<ext:Panel
ID="Panel1"
runat="server"
Title="Parent"
Height="200">
<AutoLoad Url="http://www.google.com/" Mode="IFrame" />
</ext:Panel>

"Merge" creates one document, "IFrame" creates two documents. With Merge, the two Pages become one, which functions differently that using a UserControl (.ascx). The two documents/Pages, HTML and DOM structure become one. If the Parent Panel is contained within a <form>, the Child Page can not contain a <form>.

All Coolite Toolkit controls DO NOT require a <form runat="server">. They can be placed both inside and outside of a <form runat="server">.
geoffrey.mcgill
Dec 16, 2008, 3:27 PM
The new <AutoLoad> property has been committed to SVN and will be available with the public release of v0.7.
Timothy
Dec 16, 2008, 5:00 PM
Great idea, I've been meaning to comment on the concatenated property names ;)

Cheers,
Timothy
Timothy
Dec 16, 2008, 5:04 PM
What about the AfterIFrameLoad on the Panel Listeners? Wouldn't that make sense under the AutoLoad property now?
Timothy
Dec 16, 2008, 5:08 PM
Also the ShowIFrameMask ;)

Cheers,
Timothy
jchau
Dec 16, 2008, 5:24 PM
*Hmm...this probably broke a custom DialogWindow control I made that inherits from window. *Were there much change to the clientside code? *I have a custom ux.DialogWindow class too that depends on the AutoLoadIFrame property and some of the events associated with it. *
geoffrey.mcgill
Dec 16, 2008, 7:29 PM
@Timothy - agreed. We're making some more changes to the <AutoLoad> property.*
Timothy
Dec 17, 2008, 5:35 PM
geoffrey.mcgill (12/16/2008)@Timothy - agreed. We're making some more changes to the <AutoLoad> property.



Great, as of revision 958 where did the AfterIFrameLoad listener go to?

Cheers,
Timothy
Vladimir
Dec 18, 2008, 4:25 AM
Hi,

In new revision:

BeforeUpdate - works with IFrame and Merge modes
Update - (successful update) works with IFrame and Merge modes
Failure- (failure update) works with Merge mode

It is panel listeners. Also there are same ajax events.

Also properties ShowMask, MaskMsg and MaskCls have been moved to the AutoLoad object
Timothy
Dec 18, 2008, 8:00 AM
vladimir (12/18/2008)Hi,

In new revision:

BeforeUpdate - works with IFrame and Merge modes
Update - (successful update) works with IFrame and Merge modes
Failure- (failure update) works with Merge mode

It is panel listeners. Also there are same ajax events.

Also properties ShowMask, MaskMsg and MaskCls have been moved to the AutoLoad object




Thanks vladimir, great changes!

Cheers,
Timothy
iansriley
Jan 02, 2009, 1:26 PM
I was using the autoloadiframe property for dynamic portlets on a portal page



Dim PortletTemp As New Portlet
PortletTemp.ID = String.Format("Component{0}", ID)
PortletTemp.Title = Title
PortletTemp.Collapsed = Collapsed
PortletTemp.Height = Height
'ERRORS
PortletTemp.AutoLoadIFrame = PageURL
PortletTemp.ShowIFrameMask = "true"
'ERRORS


With the new changes to v.7 that gives an error. How should I code this with the new LoadConfig option? I tried:



Dim al As New LoadConfig
al.Url = PageURL
al.ShowMask = True
PortletTemp.Load(al)


but get an "unknown runtime error" on the page when I open it in the browser and the loading mask just appears and the page never loads. Any advice? Thanks in advance.
Vladimir
Jan 02, 2009, 1:53 PM
Hi*iansriley,

Try to set al.Mode =*LoadMode.IFrame;


*
iansriley
Jan 02, 2009, 3:14 PM
Thanks, I just found that answer on one of your other posts, and it works great. Sorry for the double post, and thanks for the quick answer.
anup
Feb 04, 2009, 6:32 AM
Hi,

I have been looking at the AutoLoad property, and the AutoLoad example that loads Ajaxian on the Examples site (https://examples1.ext.net/#/Window/Basic/AutoLoad_Website/) is close to what I need, but with a subtle difference:

The example kind of "pre-loads" the ajaxian site into an iframe, so when you click the button to launch the window, it appears straight away.

Is there a way to load the iframe (or create the window) when the launching button is clicked, instead of at page load?

I'd like to avoid an Ajax request just to do this, and while I believe there are some JavaScript based options (e.g. ManagedIFrame extension that people are talking about on the ExtJs forums), it would be nice if there is a code-behind/.NET way to do this?

Thanks!
geoffrey.mcgill
Apr 22, 2009, 5:55 AM
FYI, there are a couple of minor "Breaking Changes" related to the <AutoLoad> property in the v0.8 release, see items #1 and #2 at http://forums.ext.net/showthread.php?threadid=11993-12-1.aspx