Contents tagged with AJAX

  • Minifying custom JavaScript files in SharePoint 2010

    Tags: Visual Studio, Scripting, AJAX, SharePoint 2010

    As you know the usage of JavaScript has been more and more used in web applications over the past years for technologies such as AJAX. JavaScript can accomplish really cool stuff on the client side and make the user interface more interactive and responsive. Just take a look at SharePoint 2010 - that's some heavy JavaScripts there (a bit to heavy IMHO).

    So lets assume that you are building some new cool stuff, in SharePoint of course, and why not a Page Component for a contextual Web Part. That's a lot of JavaScript (apart from the server side XML chunks)! So now you are making your web page payload even heavier. This is when minifying comes in. Minifying is a way to minimize the payload of a resource such as removing unnecessary comments and whitespace, shortening function and variable names etc - all to make the payload as small as possible. The only problem with these minified scripts are that they are virtually impossible to debug (and believe me if you are building a Page Component for SharePoint - you need to debug).

    If you have noticed SharePoint 2010 supports production and debug JavaScripts side-by-side. When you are debugging your SharePoint site you will see that all JavaScript files have a name like SP.debug.js, SP.Ribbon.debug.js etc. These are files that you actually can debug (even though they are obfuscated somewhat). All this is thanks to the SharePoint ScriptLink control which loads the production or debug version depending on if you are debugging or not.

    To use minified JavaScrips (or CSS files) in your SharePoint 2010 solutions you can do it easy with the Microsoft Ajax Minifier 4.0 and a pre-build event in Visual Studio 2010. Just follow these simple steps when you have installed the Minifier.

    Layouts folderCreate a new SharePoint 2010 project (farm solution - ScriptLink is not supported in the Sandbox)and then add the Layouts SharePoint Mapped folder to the project. Add two empty JavaScript files to the folder that is created. One with the .js extension and one ending with debug.js.

    Add some smart JavaScript code to the debug.js file - this is the file that you will edit from now on. The .js file will automatically be updated with the minified code. Then head on over to Project Properties and the Build Events tab. In the pre-build event enter the following:

    "C:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier 4\ajaxmin.exe" 
        -JS $(ProjectDir)\Layouts\Wictor.Minified\TheScript.debug.js 
        -out $(ProjectDir)\Layouts\Wictor.Minified\TheScript.js  
        -CLOBBER

    This will before building the project invoke the Ajax Minifier and create/update the minified JavaScript file. The -CLOBBER option allows the minifier to overwrite existing files. Replace the file name and folder with your file name and folder.

    Then add a Visual Web Part to your project and add code as follows:

    <SharePoint:ScriptLink runat="server" Name="Wictor.Minified/TheScript.js" Localizable="false"/>
    <asp:Button runat="server" Text="Click me!" OnClientClick="thisIsMyFunction('Hello mini!');" />

    The ScriptLink control will load the correct version of the script. Notice that you do not specify the debug version. Also Localizable is set to false here, since this is not a localized JavaScript (the Ajax Minifier actually supports localization of your JavaScripts - cool huh).

    Make sure that your SharePoint web application does not have debugging configured in the web.config and hit Ctrl-F5. This will start Internet Explorer and you can add the Web Part to a page. Then take a look at the source and look for your script. It should look something like this.

    Uses minified JavaScript file Then you go back to Visual Studio and compare the two JavaScript files. In my case it looks like this:

    Visual Studio 2010 comparing JavaScript files

    The debug JavaScript is 380 characters and the minified is only 147!

    Then hit F5 to run the project in debug mode and inspect the source of the page. You can now see that the debug version is loaded.

    And now in debug mode...

    That's it! Simple! Now go on minifying!

  • A Cheat sheet of Cheat sheets

    Tags: .NET, C#, SharePoint, Visual Studio, Microsoft Office, Scripting, AJAX

    Here is a list of cheat sheets for the Windows and .NET platform that I frequently use and I think are of great interest.

    Visual Studio 2005 Keyboard Shortcut References

    SharePoint and Office stuff

    Web and ASP.NET stuff

    Other stuff

  • ASP.NET AJAX 1.0 Released

    Tags: .NET, XML, Scripting, AJAX

    AJAX or AJAX? Finally ASP.NET AJAX 1.0, known as Atlas, is released in a fully supported version. The Download is available at http://ajax.asp.net.

    Here's a summary from Scott's blog:

    The ASP.NET AJAX 1.0, which is available for free with full Microsoft support, can be extended with the ASP.NET AJAX Control Toolkit - a set of more than 30 controls for ASP.NET.

    Microsoft also releases the client-side ASP.NET AJAX JavaScript library under the Microsoft Permissive License (Ms-PL) which allows you to modify the library and the server-side code is released under Microsoft Reference License (Ms-RL) so your debugging will be easier.

  • JSON vs XML - final debate?

    Tags: XML, Scripting, AJAX

    We have been doing a lot of work, on our product, with dynamic updates of web pages - you know the AJAX stuff. Most of the server side results are returned as XML and are delivered from different Web Services. Since I really like optimizations and like good and nice looking code I have been going back and forth in decision of how to return data to the client; XML or JSON. JSON are in some cases more effective but when the object model it tries to represent gets more complex you neither get nice looking code nor saves that much bytes.

    Don Box led me to an interesting article which really shows this. This is exactly why I am using XML instead of the JSON notation.

  • The ultimate XML Reference Guide

    Tags: XML, Internet and the Web, AJAX

    Xml Referece Guide topics The XML Reference Guide is a great site containing everything you need to know on XML standards, from  the Document Object Model to RSS to AJAX.

    Each topic contains in-depth descriptions and samples wich allows you to easily read up on a technology or just have it as a reference whenever you need to.

    Bookmark this and save for future use.

  • JavaScript closures

    Tags: Scripting, AJAX

    Ever wondered what JavaScript closures are? Morris Johns has put togehter a nice introduction to the mysterious closures - JavaScript closures for dummies. Make sure to read it before you do any more JavaScripting.

    Understanding JavaScript closures will make your JS programming more efficient and you can avoid the dreaded memory leaks in Internet Explorer especially when making home brewed Ajax applications. And of course learning this stuff is fun for us developers...

  • Public release of Windows Live Gadgets SDK

    Tags: SharePoint, Windows XP, Internet and the Web, AJAX

    Microsoft has release the first public release of the Windows Live Gadgets SDK, you can find it MicrosoftGadgets.com. You can also find the Gadgets Development Overview for Microsoft Sidebar for Windows Vista Beta 2 on the site.

    Developing Gadgets for both live.com and Microsoft Sidebar will be really easy and fun. But I see a problem with only having live.com as the only web-based Gadget host (host meaning where the Gadget can execute). I would like to see an implementation in either Microsoft SharePoint Services or as a standalone product, so you can host Gadgets in an Intranet scenario. There are some examples on how to host your own Gadgets; for example Donovan West has an example using an iframe solution. The problem is still that the Gadgets are hosted externally which is not that great if you think about security issues.

    Do you know of any other solutions or implementations of web-based Gadget hostings?

AWS Tracker

About Wictor...

Wictor Wilén is a Director and SharePoint Architect working at Connecta AB. Wictor has achieved the Microsoft Certified Architect (MCA) - SharePoint 2010, Microsoft Certified Solutions Master (MCSM) - SharePoint  and Microsoft Certified Master (MCM) - SharePoint 2010 certifications. He has also been awarded Microsoft Most Valuable Professional (MVP) for four consecutive years.

And a word from our sponsors...

SharePoint 2010 Web Parts in Action