Currently the codebase in Umbraco 4.0.x uses quite a few iframes to render ‘controls’ as this functionality has existed this way from way back in the day and had never been upgraded… until now!

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)

• /umbraco/controls/Tree/TreeControl.ascx
  • 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
  • There’s also a very in-depth JavaScript API
• /umbraco/controls/Images/ImageViewer.ascx
  • This is a nifty ajax control that will take a media item id and display the image
  • There’s a simple JavaScript library attached to it that allows you to dynamically update the media id to force an ajax request to refresh the image (amongst other methods)
  • 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" />

    
    
• /umbraco/controls/UploadMediaImage.ascx
  • 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.
  • There’s a handy JavaScript callback method you can define so that it’s executed once the upload is complete. Tons of parameters are passed to the callback containing all of the information about the file/image.
  • 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)
  • This pretty much handles everything for a basic tree picker and the JavaScript has been refined to use real classes! Wow! ;)
• umbraco.editorControls.mediaChooser (in the umbraco.editorControls assembly)
  • This is the umbraco data type to select a media item from the media tree
  • It’s been upgraded to inherit from BaseTreePicker and overrides the JavaScript rendered to support Tim’s new fandangled media picker (similar to the TinyMCE media picker)
• 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 basically, everything will look pretty much the same, but will be a lot faster and MUCH easier to develop with if you’re creating custom packages or whatever. It’s all backwards compatible (apart from the JavaScripting) but under the hood is much different.

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!