IFrames should be used sparingly, they have their uses but to render an iframe instead of a User Control is just adding overhead to the page, the client and server cpu/memory consumption and is not so cool. Here’s a nice benchmark on iframe performance: http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/ . As you can see, you should use iframes ONLY when completely necessary.
So on to the good news… Here’s some new controls that have been created in 4.1 (which will remove many of these iframes and make things a whole lot nicer to use)
- Will render a new tree based on the properties set
- This makes the following Obsolete: treeInit.aspx, treePicker.aspx (though, these pages are still used to load trees in modal windows for pickers but shouldn’t be used directly in your code)
- Both of these pages now simply wrap the TreeControl
- Example usage:
<umb2:Tree runat="server" ID="DialogTree" App="media" TreeType="media" IsDialog="true" CustomContainerId="TinyMCEInsertImageTree" ShowContextMenu="false" DialogMode="id" FunctionToCall="dialogHandler" />
- There’s quite a few other properties that allow you to customize the tree to your needs
- This is a nifty ajax control that will take a media item id and display the image
- This makes the following Obsolete: /umbraco/dialogs/imageViewer.aspx
- The old codebase for imageViewer has been retained (though it should probably just wrap this control :)
- Example usage:
<umb3:Image runat="server" ID="ImageViewer" ViewerStyle="ThumbnailPreview" LinkTarget="_blank" ClientCallbackMethod="onImageLoaded" />
- This control is essentially what you see when you load up TinyMCE, select the insert image button, then click on the ‘Create New’ tab. It contains the logic to enter a name, select a file to upload and select the media tree node to upload it to.
- This makes the following Obsolete: /umbraco/dialog/uploadImage.aspx
- Example usage:
<umb4:MediaUpload runat="server" ID="MediaUploader" OnClientUpload="onFileUploaded" />
Now, on to the ‘pickers’! There’s quite a few picker controls in the codebase that all essentially do the same thing but the code for them was pretty much replicated everywhere, so i decided to streamline the whole thing which should make it quite easy for anyone to make their own pickers!
- umbraco.controls.BaseTreePicker.BaseTreePicker (in the umbraco.controls assembly)
- (yes i know the namespace and control are the same name, but that’s the way it is currently! :)
- From the name, you would probably determine that this control is an abstract control… and you’d be correct.
- This control implements: IDataEditor (so that it can be used as the data editor for Umbraco data type controls), and INamingContainer for obvious reasons.
- This control exposes many properties and methods for you to modify and override to customize the picker.
- The abstract properties are ModalWindowTitle (the title of the window that gets displayed) and TreePickerUrl (the URL to load in the modal window that is displayed)
- umbraco.editorControls.mediaChooser (in the umbraco.editorControls assembly)
- This is the umbraco data type to select a media item from the media tree
- umbraco.editorControls.pagePicker (in the umbraco.editorControls assembly)
- This is the umbraco data type to select a content node from the content tree
- It’s been upgraded to inherit from BaseTreePicker … it really doesn’t have any special functionality apart from setting the title and the tree picker url since all of the required functionality is in the BaseTreePicker
- umbraco.controls.ContentPicker (in the umbraco assembly)
- This pretty much does the same thing as all of the above controls, actually it’s nearly identical to the pagePicker only you have to specify the AppAlias and TreeAlias to load for the picker.
- It’s been upgraded to inherit from BaseTreePicker also
So now at least when you load up the TinyMCE insert image dialog, you end up with 1 frame (the modal dialog) instead of 4!
Oh yeah, and this hasn’t been checked in to the 4.1 branch as of today… perhaps next week!