@Shazwazza

Shannon Deminick's blog all about web development

ASP.Net Client Dependency Framework RC1 Released!

March 19, 2010 09:13
This post was imported from FARMCode.org which has been discontinued. These posts now exist here as an archive. They may contain broken links and images.
With the community feedback, bug reports, patches, etc… I’ve managed to find time to upgrade this library to a release candidate status. We do use this framework in many production websites but it was great to hear from other in regards to specific bugs that were found relating to particular environments. These bugs have all been fixed up and this library is looking very stable.

You can download the binaries here.

Better yet, I’ve put together a near complete documentation library on CodePlex here !!

I still think the best way to learn about this project is to download the source code from CodePlex here and have a look at the demo web application included.

Moving forward, the next phase for this library is to add MVC support and another file registration provider called PlaceholderProvider which will give you even more granular control over where dependencies can be rendered in your markup. MVC support should be fairly straight forward and we’ll include a demo project for this as well.

Well definitely be releasing a final version soon after the next Umbraco 4.1 release candidate is released (which will hopefully be fairly soon!)

Happy day! Any and all feedback, bug reports and patches are definitely appreciated!

A Few New Controls in Umbraco 4.1

January 20, 2010 09:07
This post was imported from FARMCode.org which has been discontinued. These posts now exist here as an archive. They may contain broken links and images.
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!

Client Dependency Framework Beta Released

September 30, 2009 00:06
This post was imported from FARMCode.org which has been discontinued. These posts now exist here as an archive. They may contain broken links and images.
I’ve posted a new Beta release on CodePlex, you can get it here: http://clientdependency.codeplex.com/Release/ProjectReleases.aspx. On the releases tab includes a sample web site that has most of the functionality that you can do so please download it for a documentation reference.

Newest changes & additions

  • Namespace and codebase changes/steamlining
  • Proper versioning added
    • Versioning is done on a global basis in the config
    • Old versions are retained and can still be accessed from the Client Dependency URL that was previously used (if necessary)
    • Versioned composite files names are prefixed with the version number (i.e. version 2 files will be prefixed with '2_') so it's easy to figure out which files are old
    • The composite file map also reflects which composite file sets are under a specific version
  • Provider model extended to support 2 types of providers:
    • File Registration Providers
      • Still comes with 2 providers: page header provider and a lazy loading JavaScript client based provider
    • Composite File Providers:
      • Comes with the standard provider: CompositeFileProcessor
      • You can implement your own provider to customize the way that files are combined, compressed, minified, etc... if the standard provider isn't exactly what you are after
  • Forced providers! You can now force a dependency to use a particular provider. This can be useful if you want to ensure that a particular script or stylesheet is rendered on to the page differently. For example, you may want to ensure that a script is lazy loaded (using the lazy load provider) but the rest are rendered in the page header.
  • Utility methods added to the ClientDependencyLoader for more dynamic implementations
  • A test website is included in the release which doubles as documentation, it includes:
    • Standard page header provider example
    • Forced providers example
    • Lazy load provider example
    • Dynamically registering dependencies in your code behind
    • Registering dependencies with attributes and via aspx controls

Things //TODO:

I’ve finished off versioning so at least i can cross that off from the previous list. But there’s still more to do:

  • Implement functionality for jQuery CDN
    • This will be a new control/attribute to easily include jQuery in your project
    • You will have the option to select which CDN you want to use (Microsoft or Google), or you can supply an address (like your own CDN/web server)
    • Though this framework will be included in Umbraco 4.1, we’ll be leaving this functionality out of the Umbraco build as we realize that there are quite a few installs that operate behind a firewall that won’t have access to the CDN.
  • Implement skeleton for Microsoft AJAX 4 CDN
    • Again, this will be another new control/attribute to easily include Microsoft’s new brand of AJAX with their CDN solution
  • Add support for MVC
  • Support for JS/CSS Minification with options to disable per dependency
    • The reason this hasn’t been implemented yet is that I’ve found a lot of scripts/stylesheets break with minification so we need to be able to turn this on/off on a per file basis
  • Some more documentation/examples in the example web application

jQuery Vertical Align

April 7, 2009 22:09
This post was imported from FARMCode.org which has been discontinued. These posts now exist here as an archive. They may contain broken links and images.
UPDATED! (2009-04-29)

An easy way to vertical align elements with one line of code:

$('.innerText').VerticalAlign();  

I've removed the parameters as it turns out if you pass in a negative offset using padding, IE6 throws an error and JavaScript fails to continue executing. If you get the following error in IE6 debugging, it may be due to passing in a negative value to a padding css attribute, or similar:

  • invalid argument jquery J[G]=K

It's fairly easy to structure your html to not require a vertical align offset so it's really not needed anyways.

It also supports a couple of parameters:

  • offset = the number of pixels to offset the vertical alignment
  • usePadding = true/false. the default is false which uses a margin to align, if set to true, it uses padding
$('.innerText').VerticalAlign({offset:-20, usePadding:true})

Get the source:  VerticalAlign.zip (290.00 bytes)

jQuery popup bubble extension

April 7, 2009 06:30
This post was imported from FARMCode.org which has been discontinued. These posts now exist here as an archive. They may contain broken links and images.
UPDATED (2009-05-25)!

Here's a quick and extensible framework to enable popup windows, popup bubbles, or popup anything. Currently the framework doesn't create extra DOM elements or style anything differently. It relies on the developer to create the DOM element that will be the popup bubble (or whatever). This extension give you the flexibility to bind any number of events to show or hide the bubble. It also supports having the bubble hide on a timer and comes with a complete event model allowing you to intercept the hide and show bubble events (and cancel them if needed) and fire your own methods upon completion.

I've included a full demo html page to demonstrate some different implementations.

Here's an example of the usage:

$(".bubble").AlertBubble(
{
	fadeTime: 500,
	hideEvent: [
		{selector: $("#hideButton"), event: "click"}
	],
	showEvent: [
		{selector: $("#showButton"), event: "click"}
	],
	showOnStart: true,
	text: "I am a bubble",
	hideTimer:2000
});
The above code turns the elements with the class of .bubble into an AlertBubble. The parameters passed in are the parameters that are supported by this class:
  • fadeTime: the milliseconds to fade in/out. Default = 200 
  • text: the text to show in the html element. If set to false (by default) it will use the markup that currently exists in the element.
  • hideEvent/showEvent
    • Allows you to add/remove as many event handlers to show or hide the alert bubble
  • showOnStart: if the bubble should show on page load or only when showOnStart exists
  • hideTimer: If set, then the bubble will hide after the set number of milliseconds after shown. Default is false.
  • onBeforeShowCallback: a function to call before the bubble is shown. If a callback is specified, it must return true for the code to proceed to show the bubble.
  • onBeforeHideCallback: a function to call before the bubble is hidden. If a callback is specified, it must return true for the code to proceed to hide the bubble.
  • onAfterShowCallback: a function to call after the bubble is shown.
  • onAfterHideCallback: a function to call after the bubble is hidden.

The extension also has a simple API that can be accessed to show/hide the bubble on demand as well as using events. This is done by storing the API object for the popup bubble extension in the jQuery data object for the popup bubble selector.

API methods:

  • showBubble()
  • hideBubble()

To access the API, you can retrieve it from the jQuery data object with the key "AlertBubble":

var api = $(".myselector").data("AlertBubble"); 

Example:

$(".bubble").each(function() {
	var api = $(this).data("AlertBubble");
	if (api != null) {
		api.hideBubble();
	}
});

Super easy jQuery events

March 26, 2009 10:08
This post was imported from FARMCode.org which has been discontinued. These posts now exist here as an archive. They may contain broken links and images.

I've been using jQuery for a while but haven't really been using it much in the form of building custom classes or libraries. I've been working on re-developing Umbraco's JavaScript tree using jsTree (which is great by the way!) and have been writing a JavaScript library to support it. As with most code libraries, events play an important role in writing clean and effective code. In the past I've always used simple callback methods for "event handling" in JavaScript, but this isn't really an event system since it doesn't allow more than one subscriber. After some quick research, jQuery has this all built into the core, and by adding a couple very simple methods to your JavaScript classes, they will instantly support an event model!

Quick example: 

var myObject = {
	addEventHandler: function(fnName, fn) {
		$(this).bind(fnName, fn);
	},
	removeEventHandler: function(fnName, fn) {
		$(this).unbind(fnName, fn);
	},
	doSomething: function() {
		$.event.trigger("somethingHappening", [this, "myEventArgs"]);
	}
}

The above example is an object defining 2 functions to manage it's event model and another method which raises an event called "somethingHappened" with an array of arguments that will get bubbled to the event handlers.

To subscribe to the events is easy:

function onSomethingHappening(EV, args) {
	alert("something happened!");
	alert("sender: " + args[0]);
	alert("e: " + args[1]);
}
//subscribe to the event:
myObject.addEventHandler("somethingHappening", onSomethingHappening);

You'll notice that the above event handler function has 2 arguments, one called "EV" and one called "args". The EV parameters is the jQuery event object and the second one is the custom arguments object that was created when raising the event.

Since Umbraco's admin section uses an iframe approach, i though that managing events between the iframes would be an issue since they are all using seperate jQuery instantiations, but by raising and consuming events with the above method, this is no problem.