James' Sandbox

Using Built-In Styles in Adobe Fireworks

noreply@blogger.com (James Curtis) — Sat, 19 May 2012 04:00:00 +0000

Did you know that Adobe Fireworks has built-in styling that you can use? Say what? Just like the built-in gradients and textures, there's also built-in styling that can help rapid develop any images you are doing, perhaps for a quick mockup design or wire frame-type of image.

First things First

To make things simple, just start a new image and throw some shapes and text out onto the canvas.

Applying Styles

Go ahead and select one of your shapes. Then in the panels section, click on Styles to open the Styles Window Flyout. There will be a drop-down menu that says "Current Document". Go ahead and click on that to expose the built-in styles of Adobe Fireworks. In my example below, I'm choosing Old Paper Styles.

Next, you can select one of the thumbnail displayed in the type of style you chose to see the effect on your shape that you had selected.

Next, go ahead and select another shape and we'll apply a different style to it. In my example below, I selected the rectangle and applied a diagonal style to it, applied a 50% transparency and changed the canvas from white to transparent (so you could see the effect).

Lastly, let's apply a style to that boring text. Select the text and then choose one of the Text Style groups in the Style drop-down. In my example below, I'm using the blue-white style under the Text Creative Styles group. You can see the desired effect below.

The Conclusion

The Styles from Adobe Fireworks are very handy, especially if you are just trying to brainstorm about different look and feels for shapes and text to make your image. We've all been there, just staring at a blank canvas, not knowing where to start. This at least makes it a tad easier. :)

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Optimize Image File Sizes in Adobe Fireworks

noreply@blogger.com (James Curtis) — Fri, 18 May 2012 04:09:00 +0000

One thing that usually (not always) I'm pretty particular about is maximizing the performance of my web applications by making sure that the images we're using, regardless if they are GIF, PNG or JPG, are all looking great and are the smallest file size that they can be (best of both worlds).

Set up your Image in Adobe Fireworks

Just create an image or open one that you may already have handy.

Working with the Image

The first thing you want to do us just under the image name, click on the "2 Up" tab to show what the image will look like in your Export mode from what you select under the Optimize category in the windows sections.

Next, click on the Optimize section to force the flyout window to open. If you set your Image Type to PNG 32, you'll notice in the bottom of the Image Window (bottom left of the image below) the file size if you export this image in a PNG 32 format. In this case, it's 33.4K in size.

Next, change the Image Type to PNG 8 (bit), and see if the image still looks OK. If the image is fine, then check the file size now. In my example below, the image is still acceptable, and the file size just dropped to 14.2K! We just saved 19.4K off of one image! That may not seem like much in this age of broadband Internet, but multiply that by 10's of thousands of users, let alone millions and that unnecessary addage of the file size sure becomes a big deal then.

Just to be fair, PNG 8 (bit) may not be the smallest size versus quality image we can achieve. So, let's look at GIF next to see if there are any file size savings. Switch the Image Type to GIF. As you can see in the image below, the file size jumped to a whopping 29.3K! Oops, that was the wrong direction to go. So, in this case, GIF is not the export of choice.

Next, lets try JPG as the export. Change the Image Type to JPG and set the Quality to 72 (web standard -- only things destined for printing need to go higher). Look at the file size now for the export -- it's 12 K! What? Smaller than the PNG 8 (bit) image? Yup, that's right. In this particular case the JPG wins in the smallest file size export of the image from Adobe Fireworks.

The Conclusion

The examples above worked out the way they did, JPG being the smallest versus best looking of the bunch, based on the image used. Depending on if you are using a photo, hand drawing, or a lot of text, your export flavor of PNG, GIF or JPG will vary. So, this walkthrough takes care of the images individually, next post on this topic will be around using Sprites where you can to save on HTML Requests. :)

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Check if UserName exists via jQuery, AJAX and ASP.NET MVC

noreply@blogger.com (James Curtis) — Thu, 17 May 2012 04:11:00 +0000

Here is a little nugget of code that I use on our gaming site SocialCow.com. If you are comfortable already with jQuery, then this will be a no-brainer. You can take the same ".post" jQuery method and switch out the MVC call for like a web service or call like an ASP.NET / Web Method. It doesn't matter as the guts of what it's doing is in JavaScript / jQuery. :)

HTML

The HTML here is pretty simple (if you didn't notice I like to have it that way for the people reading my blogs ;) ). Essentially, you need just a input box and somewhere to put the status text. I ended up just using a simple Div layer.

<input type="text" name="UserName" id="UserName" />
<div id="divStatus"></div>

JavaScript / jQuery

The JavaScript isn't too bad either here. Basically, we're looking for the keyup on the UserName field and we only care when they enter in more than 3 characters, otherwise it ignores the AJAX call (and saves a call to the service / database too).

<script type="text/javascript">
    $("#UserName").keyup(function () {
        var name = $("#UserName").val(); //Value entered in the text box
        var status = $("#divStatus"); //DIV object to display the status message
        var user = $.trim(name);
        if (user.length > 3) {
            status.html("Checking....") //While our Thread works, we will show some message to indicate the progress
            //jQuery AJAX Post request
            $.post("/Account/CheckName", { username: name },
                        function (data) {
                            if (data == true) {
                                status.html("<font color=green>'<b>" + name + "</b>' is available!</font>");
                            } else {
                                status.html("<font color=red>'<b>" + name + "</b>' is not available!</font>");
                            }
                        });
        } else {
            status.html("Need more characters...");
        }
    });
</script>

This code above is a nice little gem to have. I've had it for a few years now, and thought that I'd pull it from the James vault of code to share.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Adding Custom Link to Telerik RadScheduler Header Navigation

noreply@blogger.com (James Curtis) — Wed, 16 May 2012 04:00:00 +0000

Do you have a need to add a custom link or action to your Telerik RadScheduler? I had a need, even though rarely used, to add a "Refresh" link to slap the calendar around when someone might be viewing the calendar, but appointments may be added via the booking process by a custom and/or another user in the system (talking about my project @TimeGears, btw). I know what you're thinking: "James, isn't that what AJAX is for?" -- yes, I know, but sometimes things hang for whatever reason, and some of our business users like having a manual button there as if it's an "Easy button" from Staples to make appointments appear.

The Code

The code is pretty simple (as most of my posts strive to be), and the idea is this is to be intermixed with the other JavaScript code you have for your Telerik RadScheduler.

<script type="text/javascript">
    function loadRefreshButton() {
        $('.rsHeader UL LI .rsLast').removeClass('rsLast');
        $('.rsHeader UL').append('REFRESH')
                    .click(function () {
                        location.reload(true);
                    });
    }
</script>

The JavaScript function is straight forward. It is just called in the $(function(){ }); command after the DOM is loaded and adds the Link Action "Refresh". In my case, my Telerik RadCalendar is being loading in a Modal IFrame. It is very complex and I didn't want it to mingle with the main page code nor want it to be pushed down by the site's navigation header.

The Result

As expected, the JavaScript and jQuery code add a "Refresh" link to the UL list of links atop of the Telerik RadScheduler.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Why UX People Rule with an Iron Fist!

noreply@blogger.com (James Curtis) — Tue, 15 May 2012 04:00:00 +0000

I've been called several names on several projects, mostly good, but people that know me know that I usually will be overbearing and stop just short of micro-managing the interface and user experience of the project. Well, first, that's what I'm good for (that was a "duh" moment). Secondly, us in the UX arena usually are the first line of defense for a project. So, you should be thanking me for being such an @$$hole. :)

Why UX People Take Heat

Great UX People have been molded into their personalities from experience. Sure, there are great designers and developers out there, and some that are good at the gambit of them, but most fall into strict design-only in UI, or middle-tier with "almost-good enough" skills at the UI. The UX guy gets the job of marrying the UI and the functionality kingdom of the middle-tier. See the UI guy is happy once the client has signed off on the design (and is usually out the door at that moment), the middle-tier guy usually will hide behind the project manager if something is functionally "off", and well the UX guy gets the job of taking the heat for all of it because it doesn't matter if something is wrong with the design, or a web service blows up the beautiful feed you have in a dynamic JavaScript section on the front page.

Crazy?

If you are a UX person, you already know the answer to this question: Do you have to be crazy or a little psychotic to be a great UX developer? My answer and my answer is: Yes

UX Helpline

So, you want to help out a UX developer? If you are the UI designer, talk to the UX developer before your meetings with the client just to make sure your design is remotely even possible. :) If you are the middle-tier developer, talk to the UX developer just to make sure that most of your theories of how the front-end works are crap and you need their help. :)

Can I be a UX Developer?

Yes, but like any martial art, you need to earn and prove yourself along the way. For instance, I'm not nearly the best when it comes to practicing and learning new UX techniques. Everyone is constantly learning, and even things you do 10,000 times, you could learn a new technique on the 10,001 time. I would recommend getting very comfortable in JavaScript, a back-bone client-side language. From there, you can branch off into jQuery, jQuery UI, MooTools, YUI Tools, etc. Also, you need to know CSS and design along with JavaScript as if it was your twin. You need to be able to whiteboard your ideas on-the-fly and design in your head on how things will work in a web application.

The writings above are my opinion, of course, and I don't really dislike my team at all. I'm just the narcissistic UX guy.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Change Associated Content Type for SharePoint 2010 Page Layout

noreply@blogger.com (James Curtis) — Mon, 14 May 2012 13:03:00 +0000

I have found out over time that my "usual problems" that I run into are very common occurrences, but problems like this one are those that usually happen pretty rarely, and we all forget how to deal with them. :) So, this is a reference for everyone (and myself) of how to quickly update this via the Internet Browser as I know there are many articles how to do that via programming, but what if you can't deploy a WSP but have SharePoint Designer access? ;)

The Issue

The issue usually arises when you have a Page Layout (custom one usually) and it's currently associated to a Content Type like "Welcome Page". What happens if you want to associate it to another Content Type, like a custom one? Well, you have to re-associate it with the other one. Luckily, it's not that bad and you don't need custom programming to pull it off. One thing to note though, changing Content Types means changing fields that the Page Layout uses, so you may loose some functionality if your Page Layout is dependent on certain fields.

The Solution

First, assuming you have Site Administrator or Owner access, go to Site Settings > Master pages and page layouts.

Next, find your Page Layout in the list, hover over it and use the alternate menu to select Edit Properties.

Lastly, scroll down a bit to the middle of it, and you can see the area where you can change the Associated Content Type for that Page Layout. :)

Hopefully that was short enough and to the point.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Masking Layers with Transparency Gradient in Adobe Fireworks

noreply@blogger.com (James Curtis) — Mon, 14 May 2012 01:38:00 +0000

Have you ever wanted to create a custom shape in Fireworks and don't want to take the time to use the pen tool and make every curve and point (and be frustrated when it's not "perfect")? Well, here is a shortcut way (with practice) to get into making that custom stuff even faster. :)

Also to fan the flames, I'm going to show how to make a fade from transparency to a solid gradient within the mask.

Create the Images

Create two images to start. Feel free to make them anything you want. Note: if you want to use these shapes later, you may want to make a copy of those shapes.

Ghost that Image!

Select the image on the top, make sure you have a type of gradient selected (I have linear selected), and then click the color square. In the marker on the left side of the gradient, ABOVE the color selection, click that marker and set the opacity to 0.

Mask that B!

Alright kids, we're almost home. In order to make the mask, we have to select the images that we want to be part of the mask. Now, the masking process basically will take the shape of the image that is on top. So, in my example, it will allow anything within the gradient oval to show up.

Once you have them selected, go to Modify > Mask > Group as Mask.

And wah-la! You should how have a custom shape like below. :)

James' Thoughts

So, as you can see, it's not a pain to get some custom flair going on in Fireworks. You just need a short and sweet example with no frills. :) Just another example why I use Fireworks for Web Development imaging.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Windows Metro Style JavaScript / jQuery Library

noreply@blogger.com (James Curtis) — Sat, 12 May 2012 04:00:00 +0000

I haven't had a chance to do more than play with this JavaScript library that Drew Greenwell has created that is for a Windows Metro-style JavaScript library, but it is pretty amazing what it does. I'm sure it wasn't just a "sit down for an hour and it's done" type of project. If you have seen the dashboard on an XBOX 360, Windows 8 Preview, or a Windows Phone 7.5, then you have seen the "Metro" interface.

You will either love it or hate it. I personally love it. I have a Windows Phone that is running the Mango version, and it's great. I used to have an HTC D2, and I have an iPod Touch, so I know I didn't want an iPhone because I didn't like the interface of the Apple OS.

Screens

Code Example (borrowed from this page)

<div id="tiles" class="blue">
    
    <div class="live-tile" data-stops="100%" data-speed="750" data-delay="3000">
        <span class="tile-title">slide tile (figure 2a)</span>
        <div>
            <img src="/images/sample/1tw.gif" alt="1" /></div>
        <div>
            <img src="/images/sample/2t.gif" alt="2" /></div>
    </div>
    
    <div class="red live-tile" data-mode="flip" data-delay="4000">
        <div>
            <img src="/images/sample/3tw.gif" alt="3" />
            <a class="tile-title">flip tile front (figure 2b)</a>
        </div>
        <div>
            <img src="/images/sample/4tw.gif" alt="4" />
            <a class="tile-title">flip tile back (figure 2b)</a>
        </div>
    </div>
    
    <div class="mango list-tile">
        <span class="tile-title">flip list (figure 2c)</span>
        <ul class="flip-list fourTiles" data-mode="flip-list" data-delay="3000">
            <li>
                <div>
                    <img src="/images/sample/1t.gif" alt="1" /></div>
                <div>
                    <img src="/images/sample/1tw.gif" alt="1" /></div>
            </li>
            <li>
                <div>
                    <img src="/images/sample/2t.gif" alt="2" /></div>
                <div>
                    <img src="/images/sample/2tw.gif" alt="2" /></div>
            </li>
            <li>
                <div>
                    <img src="/images/sample/3t.gif" alt="3" /></div>
                <div>
                    <img src="/images/sample/3tw.gif" alt="3" /></div>
            </li>
            <li data-direction="horizontal">
                <div>
                    <img src="/images/sample/4t.gif" alt="4" /></div>
                <div>
                    <img src="/images/sample/4tw.gif" alt="4" /></div>
            </li>
       </ul>
    </div>
    
    <div class="green live-tile exclude">
        <span class="tile-title">static tile (figure 2d)</span>
        <p>
            Static tiles can take advantage of theming too!</p>
    </div>
</div>
 

<script type="text/javascript">    
    // apply regular slide universally unless .exclude class is applied
    // NOTE: The default options for each liveTile are being pulled from the 'data-' attributes
    $(".live-tile, .flip-list").not(".exclude").liveTile();
</script>

James' Thoughts

Drew has done a very thorough job of bring the Windows Metro style to a JavaScript library. For my project @TimeGears, I have started a Metro-style interface with my dashboard for the back-end, however didn't yet create any of the cool animations as what Drew has put together. So, show Drew some love and go check out MetroJS.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Tighten up your Loose JavaScript

noreply@blogger.com (James Curtis) — Fri, 11 May 2012 04:00:00 +0000

Being a .NET developer as well as a UX developer has me trying techniques between languages like C# .NET and JavaScript. Most of us know (and if you don't, you do now) that JavaScript is a loosely typed language. In other words, variables are declared without a specific type.

Loosely Typed JavaScript Example

var x = 50;
var y = "50";
 
x == y;  // Returns True

Structured Global Variables

One of the things that I figured out over time from dealing with JSON style data from doing many web services calls from AJAX is to use the JSON structure to build my equivalent of a "constant" list of variables in JavaScript. Since JavaScript is loosely typed, there really are no such things as constants, but we can get it closer to that concept with strong-naming variables in a global JS file to help prevent fat-fingering values throughout the web application. I currently do this with our latest web application @TimeGears.

var site = {
    calendar: {
        current: {
            day: {
                value: new Date().currentDay(),
                name: new Date().currentDayName()
            },
            month: {
                value: new Date().currentMonth(),
                name: new Date().currentMonthName()
            },
            year: new Date().currentYear()
        },
        today: new Date().currentDate(),
        tomorrow: new Date().tomorrowDate(),
        weight: {
            min: 'min',
            mid: 'mid',
            max: 'max'
        }
    },
    global: {
        ajax: {
            text: {
                holder: 'Please Wait...

'
            }
        },
        session: {
            proxypage: '/handler.ashx',
            value: 30000    // 30 seconds
        }
    }
};

Example Use 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script src="js/test.js" type="text/javascript"></script>
    <script type="text/javascript">
 
   $(function () {
        $('#VarList').append('<li>Current Day: ' + site.calendar.current.day.value + '</li>')
            .append('<li>Current Day Name: ' + site.calendar.current.day.name + '</li>')
            .append('<li>Current Month: ' + site.calendar.current.month.value + '</li>')
            .append('<li>Current Month Name: ' + site.calendar.current.month.name + '</li>')
            .append('<li>Current Year: ' + site.calendar.current.year + '</li>')
            .append('<li>Today: ' + site.calendar.today + '</li>')
            .append('<li>Tomorrow: ' + site.calendar.tomorrow + '</li>')
            .append('<li>Weight Min: ' + site.calendar.weight.min + '</li>')
            .append('<li>Weight Mid: ' + site.calendar.weight.mid + '</li>')
            .append('<li>Weight Max: ' + site.calendar.weight.max + '</li>')
            .append('<li>Global AJAX Holder Text: ' + site.global.ajax.text.holder + '</li>')
            .append('<li>Global Session Proxy: ' + site.global.session.proxypage + '</li>')
            .append('<li>Global Session TimeOut ' + site.global.session.value + '</li>');
    });
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul id="VarList">
        </ul>
    </div>
    </form>
</body>
</html>

The Result

As you can see from the results below that this use of a global JS file can come in handy much like the

use of classes in .NET for centralization name-spacing, etc.

Current Day: 7
Current Day Name: Monday
Current Month: 4
Current Month Name: May
Current Year: 2012
Today: 5/7/2012
Tomorrow: 5/8/2012
Weight Min: min
Weight Mid: mid
Weight Max: max
Global AJAX Holder Text:
Please Wait...
Global Session Proxy: /handler.ashx
Global Session TimeOut: 30000

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Designing and Developing for SharePoint 2013 (#15)

noreply@blogger.com (James Curtis) — Thu, 10 May 2012 04:00:00 +0000

SharePoint 2013 branding, even though it's been updated, will still more than likely consist of Master Pages, Page Layouts and the usual fixings we've come to love (or hate) in SharePoint. Just check out these screen shots that were leaked already:

Design:

The main takeaway is that Master Pages, Page Layouts, etc., will still be around regardless of what new "Look and Feel" Redmond comes up with for SharePoint 2013. Below are some images found on the Internet that seem to be circulating. According to some, they were idea mockups of what SharePoint 2013 "could" look like and are not actual screen shots. As a designer myself, I can totally see doing that and others taking it to promote as the real deal.

Awesome "Metro" interface (if it's really going to look like this -- possibly a fake):

Updated "Mango"-style landing page of a new Team Site (if it's really going to look like this -- possibly a fake) (much better than a previous versions of the Team Site, especially WSS 3.0!!)

Development:

The development for SharePoint 2013 looks promising (assuming they're going to be supporting it with Visual Studio 2012). Visual Studio 2012 has more designers and templates than were included in Visual Studio 2010.

Here's some of the new stuff for VS 2012 (beta):

Create Lists and Content Types by Using New Designers
Create Site Columns
Create Silverlight Web Parts
Publish SharePoint Solutions to Remote SharePoint Servers
Test SharePoint Performance by Using Profiling Tools
Create Sandboxed Visual Web Parts
Improved Support for Sandboxed Solutions.
Support for JavaScript Debugging and IntelliSense for JavaScript
Streamlined SharePoint Project Templates

If you would like to read more, go to the source (MSDN Article).

My take on it is that I think it's a great step forward in SharePoint development with Visual Studio. I can assume that most, if not all of the same, will be available for SharePoint 2013 development..

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Extending JavaScript Prototype for Date Functions: Part Deux

noreply@blogger.com (James Curtis) — Wed, 09 May 2012 04:00:00 +0000

In my first post, Extending JavaScript Prototype for Date Functions, I introduced adding to the Date type in JavaScript to make life easier for developing in JavaScript for the given project. In this post, I'm giving away some more goodies for everyone around the Date object in JavaScript. Like before, you can drop these nuggets in your primary JS file for your project. Don't forget to ultimately Minify your $#1+. :)

Prototype Methods

Save the following code off in a JS file. For my example, I saved the file as "test.js" in the ".js" folder, so from the point where my HTML file lives the path will be "js/test.js" as you can see in the Example section's code

Date.prototype.addDays = function (days) {
    this.setDate(this.getDate() + days);
};
Date.prototype.subtractDays = function (days) {
    this.setDate(this.getDate() - days);
};
Date.prototype.addMonths = function (months) {
    this.setMonth(this.getMonth() + months);
};
Date.prototype.currentDate = function () {
    var month = this.getMonth() + 1;
    return month + "/" + this.getDate() + "/" + this.getFullYear();
};
Date.prototype.tomorrowDate = function () {
    var month = this.getMonth() + 1;
    var day = this.getDate() + 1;
    return month + "/" + day + "/" + this.getFullYear();
};
Date.prototype.currentYear = function () {
    return this.getFullYear();
};
Date.prototype.currentMonth = function () {
    return this.getMonth();
};
Date.prototype.MonthName = ["January", "February", "March", "April", "May", "June", "July", 
    "August", "September", "October", "Novemmber", "December"];
Date.prototype.currentMonthName = function () {
    return this.MonthName[this.getMonth()];
};
Date.prototype.currentDay = function () {
    return this.getDate();
};
Date.prototype.DayName = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", 
"Saturday"];
Date.prototype.currentDayName = function () {
    return this.DayName[this.getDay()];
};

Example Use

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script src="js/test.js" type="text/javascript">script>
    <script type="text/javascript">
 
        $(function () {
            var theDate = new Date();
            $('#VarList').append('.<Current Date (formatted): ' + theDate.currentDate() + '.</li>')
                .append('.<li>Tomorrow Date (formatted): ' + theDate.tomorrowDate() + '.</li>')
                .append('.<li>Current Year: ' + theDate.currentYear() + '.</li>')
                .append('.<li>Current Month: ' + theDate.currentMonth() + '.</li>')
                .append('.<li>Current Month Name: ' + theDate.currentMonthName() + '.</li>')
                .append('.<li>Current Day: ' + theDate.currentDay() + '.</li>')
                .append('.<li>Current Day Name: ' + theDate.currentDayName() + '.</li>');
        });
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul id="VarList">
            
        </ul>
    </div>
    </form>
</body>
</html>

The Result (run on 5/7/2012):

Current Date (formatted): 5/7/2012
Tomorrow Date (formatted): 5/8/2012
Current Year: 2012
Current Month: 4
Current Month Name: May
Current Day: 7
Current Day Name: Monday

Not much to it once you get the hang of it. Like .NET, these type of little additions go a long way to make your UX code more consistent as you have a central place to call JavaScript functions (almost called them methods ;) ).

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

SharePoint 2013 (#15) Branding - First Look (and look back)

noreply@blogger.com (James Curtis) — Tue, 08 May 2012 04:00:00 +0000

In my curiosity the other day, I decided to look to see what I could find on the Internet for SharePoint 15 (2013). I was really wanting to see the Look and Feel of it more than anything. Seems like every version that comes out tries to 1 up (or destroy) the previous version (none more so than MOSS 2007 to SP 2010). I'd like to take this opportunity to do a brief look back at the previous versions of SharePoint branding.

So, here we go. From SharePoint 2001 to 2013. Buckle up.

SharePoint 2001

An oldie but goodie. This gem (sorry only image I could find on the web since I've upgraded since then) was a trendsetter. While this was great for internal collaboration (which was still pretty new concept at the time), it wasn't very pretty. Also, forget about making it public facing. We could thank this version of SharePoint for driving needs for public-facing web applications that are similar in nature like DotNetNuke.

SharePoint 2003

Ok, we're getting better. We're still light years away from what is expected for a public facing site in terms of branding. I know, it's a collaboration site, and doesn't necessarily need to be on the up and up in branding style. Well, I agree to disagree. If users have a not-so-good experience with the application and it looks bad too, they're going to trash it.

SharePoint 2007 (#12)

Master page? WTF is that. :) The introduction of the Master Page concept was awesome in SharePoint 2007. Finally, the designers of SharePoint had something to work with that wasn't a complete hack of the SharePoint system (not saying we still didn't have to hack the hell out of SharePoint to get it to play nice).

SharePoint 2010 (#14)

Hard to believe at the time of this posting, SharePoint 2010 is 2 years old. When the new branding came out, it was a much needed improvement over 2007, however there were still the things of old we had to work around plus a new Ribbon bar we had to deal with in designing for SharePoint 2010.

SharePoint 2013 (#15)

I found this from this guy's web post about it. Like any good car prototype that gets the masses of people to drool over it, if this ends up being what we have to start with I'll be doing kart wheels down the hallway. Seeing where SharePoint 2001 started and where SharePoint 2013 potentially will be, it's quite amazing to see the product development.

Now, the real question is: is the SharePoint Navigation control still generating nested tables on the front end and UL's on the back end? If you haven't experienced this fun time, you should. :)

Update: 5/8/2012 - Apparently the following images are fakes from some time ago according to some Twitter friends. Nonetheless, they are good for talking around the water cooler. :)

I'm not surprised that Microsoft is going the route with the branding that we have seen with the XBOX, Windows Phone (Mango +) and Windows 8. The "Metro" style is one they are betting big on and I'm a fan. I know some don't care for it, but I love when typography is integrated into the design experience of any application as it just seems to be richer than some fancy graphics.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Slicing and Exporting Images from Adobe Fireworks

noreply@blogger.com (James Curtis) — Mon, 07 May 2012 04:00:00 +0000

I've been using Adobe (formally Macromedia) Fireworks for a long time now. So, recently when I was working with a colleague of mine and forcing him to use Fireworks since it's more efficient in Web Development (my opinion of course), I didn't realize how second nature Fireworks commands were to me. So, I figured I would break this down for folks since it's not as "second nature" to non-Fireworks users as I was assuming (my bad =)). This will also be helpful for Adobe Photoshop users wondering WTF Fireworks is doing in their Adobe Master Collection. LOL

First Things First: Create some "things"

Open up Adobe Fireworks and create a new PNG image. The size doesn't really matter for this tutorial. In the image below, I created three rectangle shapes.

Prepare for Export

Select all the shapes that you want to Export into individual images. Then click Edit > Insert > Rectangle Slice.

When Prompted for Individual or Multiple, choose Multiple.

New Layers

The rectangle slices have created new layers that match the size of the object(s) you had selected previously. You can adjust the size of your new web slices just like any other shape in Fireworks.

Got Slice?

One of the easiest ways to export a newly created slice is to Right-Click the web slice of your choosing, then click Export Selected Slice.

Then give it a filename.

The Result

If you open up the file you just exported (aka Created), you'll see it's exactly what was showing in the web slice you created. Once you get the hang of this, designing and slicing full web layouts to buttons to photos will be super fast.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Top 5 Telerik Controls for ASP.NET AJAX UI Web Applications

noreply@blogger.com (James Curtis) — Sun, 06 May 2012 04:00:00 +0000

Telerik, for ASP.NET UI, has over 70 components to choose from in the suite. Think about the first time, if ever, you created your own component. Then, if you did, think about how much time you took out of your day to make it extremely extensible. After that (if you made it this far), think about the time you also took to allow it to work with over a dozen themes. Yeah, I figured. Nothing.

I figured I'd share my Top 5 controls that I absolutely love that I've been lucky enough to implement on projects. Telerik is a good company, but alas I'm not getting paid here (attn: Telerik people -- email me for payment info). This will be the Top 5 controls that I use or have used for ASP.NET web applications that are truly exceptional. I'm not going to WordSmith their descriptions of each, so I just borrowed their descriptions since they're ten times better than what I could come up with. :)

The Top 5 List for ASP.NET AJAX UI

#1 Telerik RadGrid

When working with DataGrids, fast loading of large data while having advanced Excel-like operations has always been a challenge. Having solid experience in web technologies, we designed our AJAX powered ASP.NET Grid to eliminate this tradeoff. Codeless databinding, rich client-side operations, and a myriad of features topped with unbeatable performance is what defines the Telerik RadGrid for ASP.NET AJAX.

#2 Telerik RadRibbonBar

The Telerik ASP.NET AJAX RibbonBar control allows you to easily organize the navigation of your application in a simple, structured way. What is more, RadRibbonBar mimics the UI of the RibbonBar used in Microsoft Office 2007, thus providing your end-users with a familiar way to navigate around your application.

#3 Telerik RadScheduler

RadScheduler is powerful control which allows users to create and manage tasks. It supports variety of data binding options which enables you to work with data sources that are as simple or as powerful as you want. Having the ability to use different skins, form templates, custom attributes, localization and much more, makes the RadScheduler a highly configurable control letting you adapt the user interface exactly to your own special purposes. Now you can add rich scheduling UI to any ASP.NET application and enjoy a lightweight, yet highly customizable, component. Impress your users with intuitive drag-and-drop functionality, handy inline or pop-up edit forms, and no-refresh AJAX experience!

#4 Telerik FormDecorator

How do you feel when you cannot style adequately simple elements like buttons or checkboxes on your web apps? Well, the new Telerik FormDecorator control can unload you from this task. This is a unique control that steps in to fill the gap and provide you with a simple to use, flexible and configurable control that can deliver the "finishing touch" for a true rich UI. It integrates seamlessly into the page and doesn't require any changes to the existing page's layout.

#5 Telerik RadImageEditor

RadImageEditor is powerful and flexible graphics editing component that enables the users to modify their images directly in the browser, without the need of installing any third party plugins. The actions on the image are performed on the client or, through a light callback, on the server, giving the possibility to perform the editing quickly and see the changes on the fly. The control is fully customizable, intuitive to work with and provides many features.

That's my list for ASP.NET UI from Telerik. There are many more great components that they make and it doesn't just stop with the list above. To pull off what they did would take most of us thousands of hours to develop, so show them some love!

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Adding a Custom Item Style in XSL: Part Deux

noreply@blogger.com (James Curtis) — Sat, 05 May 2012 04:00:00 +0000

As 3 1/2 years have passed since I wrote my original article, Add a Custom Item Style in XSL for SharePoint, I've had time to reflect.

Ok, reflection's over. Back to the task at hand. In the previous article, I showed you how to create a new Item Style in a copy of the ItemStyle.xsl from the Style Library\XSL Style Sheets location. The reason for making a copy of the ItemStyle.xsl versus just editing the one that is there is to preserve the Site Definition of the Site Collection in SharePoint. This keeps everything out of the box (OOTB) working as normally and only your custom web parts dependent on the custom XSL you create could break then.

Here's the Standard template that shows the parameters and values being passed to your custom web part (by the way, these templates are all being used by a Content Query Web Part CQWP):

CQWP Get Parameters and Values

<xsl:template name="ShowVariables" match="Row[@Style='ShowVariables']" mode="itemstyle">
    <xsl:for-each select="@*">P:
        <xsl:value-of select="name()" />
        <br />V:
        <xsl:value-of select="." />
        <br />
        <br />
    </xsl:for-each>
</xsl:template>

So, that helps, but what if you have a situation where you have some psuedo-dynamic building of code going on? XSL is a one-way piece of code and not like .NET with being very unforgiving of almost everything. I have learned a few tricks over the years in SharePoint development that make life a little easier to cope with the shortcomings (or short-sidedness) of using XSLT 1.0 in SharePoint 2010. I did a little of this on an earlier on my post, Passing the LastRow XSL Parameter to Custom ItemStyle in SharePoint 2010.

Force CQWP to be your GIMP

The CQWP, by default, wants to wrap all your data rows as <LI> (aka List Items). This is fine if you just want use unordered lists and just style the data from there. But, if you want to do some of the really cool stuff, you have to cut it's short and build your own. Granted, what I'm going to show you isn't 100% HTML standards-compliance, but SharePoint generally isn't either, so that's my excuse and I'm sticking to it. =)

The first thing you have to do in your Custom Item Style is cut off the <UL> on the first pass. To ensure that this happens, create a variable for the code (for portability)

<xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']" 
    mode="itemstyle">  
    <xsl:param name="CurPos" />
    <xsl:param name="Last" />   
    <xsl:variable name="scripts">
     <xsl:if test="$CurPos=1">    
     <![CDATA[
        </li></ul>
     ]]> 
     </xsl:if>
    </xsl:variable>
</xsl:template>

Become the Lawnmower Man

Next, you have complete control (sort of) to do what you want for every item row being passed to this CQWP. The trick here is using the Cursor Position to your advantage. There are some things that you only want to show or write on the "first pass", and then everything else afterwards. Also, passing in the LastRow variable (see other post referenced above) helps big time in doing this kind of hacking in XSL.

<xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']" mode="itemstyle">  
   <xsl:param name="CurPos" />
   <xsl:param name="Last" />

     <xsl:variable name="scripts">
     <xsl:if test="$CurPos=1">    
       <![CDATA[
         </li></ul>
       ]]> 
     </xsl:if>
    </xsl:variable>
    <xsl:variable name="startblock">  
        <xsl:if test="$CurPos=1">    
         <![CDATA[
       <div class="container" id="main">
              <div class="main_image">
         ]]>
        </xsl:if>
    </xsl:variable>
    <xsl:variable name="closeblock">
        <xsl:if test="$CurPos=1">   
         <![CDATA[
              </div>
         ]]>   
        </xsl:if>
    </xsl:variable>
    <xsl:variable name="startul">
        <xsl:if test="$CurPos=1">   
         <![CDATA[
               <div class="image_thumb">
          <ul>
         ]]>   
        </xsl:if>
    </xsl:variable>
    <xsl:variable name="createli">
        <xsl:if test="$CurPos=1">   
         <![CDATA[
            <li class="dummy">
         ]]>   
        </xsl:if>
    </xsl:variable>
    <xsl:variable name="closediv">
        <xsl:if test="$CurPos=$Last">   
         <![CDATA[
                </div> 
              </div>
              <div class="splash-footer">
                <a href="/Pages/">More...</a>
              </div>
         ]]>   
        </xsl:if>
    </xsl:variable>
    <xsl:variable name="sample">
        <xsl:if test="$CurPos=5000">   
         <![CDATA[
              ---- TEST EXAMPLE ----
         ]]>   
        </xsl:if>
    </xsl:variable>
    <xsl:value-of select="$scripts" disable-output-escaping="yes" />   
    <xsl:value-of select="$startblock" disable-output-escaping="yes" />  
    <xsl:if test="$CurPos=1">
        ---- CONTENT ON FIRST PASS ----
    </xsl:if>
    <xsl:value-of select="$closeblock" disable-output-escaping="yes" />  
    <xsl:value-of select="$startul" disable-output-escaping="yes" />  
    <xsl:if test="$CurPos = 1">
        ---- CONTENT ON FIRST PASS ----
 <li class="active">
   <a href="{@DisplayImage}" title="{@CustomLinkUrl}"><img alt="{@Title}" 
             src="{@ThumbImage}"/></a> 
   <div class="block">
     <h2><a href="#"><xsl:value-of select="@Title" /></a></h2>
     <p><xsl:value-of select="@Description" /></p>
   </div>
 </li>
    </xsl:if>
    <xsl:if test="$CurPos > 1">
        ---- CONTENT ON EVERY PASS AFTER FIRST ----
 <a href="{@DisplayImage}" title="{@CustomLinkUrl}"><img alt="{@Title}" 
           src="{@ThumbImage}"/>a> 
 <div class="block">
   <h2><a href="#"><xsl:value-of select="@Title" /></a></h2>
   <p><xsl:value-of select="@Description" /></p>
        </div>
    </xsl:if>
    <xsl:value-of select="$closediv" disable-output-escaping="yes" /> 
</xsl:template>

The Result

The result of the hack above is something like the following:

</li></ul>
<div class="container" id="Div1">
  <div class="main_image">

    ---- CONTENT ON FIRST PASS ----
  </div>
  <div class="image_thumb">
    <ul>
 <li class="active">
          ---- CONTENT ON FIRST PASS ----
   <a href="#" title="Some Text"><img alt="Some Title" src="SomeImage.jpg"/></a> 
   <div class="block">
      <h2><a href="#">Some Title</a></h2>
             <p>Some Description Text.</p>
   </div>
        </li>
        <li>
           ---- CONTENT ON EVERY PASS AFTER FIRST ----
           <a href="#" title="Some Text 2"><img alt="Some Title 2" src="SomeImage2.jpg"/></a> 
    <div class="block">
      <h2><a href="#">Some Title 2</a></h2>
             <p>Some Description Text 2.</p>
           </div>
        </li>
    </ul>
  </div>
</div>
<div class="splash-footer">
  <a href="/Pages/">More...</a>
</div>

The Takeaway

The main thing you have to keep in mind when taking on the challenge from the CQWP is that it's going to try to wrap your Items, row by row, with <LI> and </LI> to be happy. If you want to interject other elements (like DIVS -- which btw will work but are not HTML-compliant). This is an example of how to pull off the crazy in XSL. The advantage here is that it's "just a style" for a CQWP. So, theoretically you can train users to drop a CQWP on a page and select one of your styles.

Also, if you are not comfortable with XSL and fall more on the .NET side of things, by all means do this in a custom .NET web part if you are able to deploy solutions!

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Extending JavaScript Prototype for Date Functions

noreply@blogger.com (James Curtis) — Fri, 04 May 2012 04:00:00 +0000

I have created a few JavaScript prototype add-ons that allow you to call them as native JavaScript methods from within your JavaScript code. This extends the "Date" of the JavaScript framework.

Prototype Methods

Date.prototype.addDays = function (days) {
    this.setDate(this.getDate() + days);
};
Date.prototype.subtractDays = function (days) {
    this.setDate(this.getDate() - days);
};
Date.prototype.addMonths = function (months) {
    this.setMonth(this.getMonth() + months);
};

Example Use

function tomorrowDate() {
    var currentDate = new Date();
    var newDate = currentDate.addDays(1);
    return newDate;
}
 
function nextMonthDate() {
    var currentDate = new Date();
    var newDate = currentDate.addMonths(1);
    return newDate;
}

The idea is obvious and pretty simple. For those that use programs like Eclipse or Visual Studio (with ReSharper), it's nice having the Intellisense for JavaScript extended methods.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

AJAX in Telerik RadDock as the Advanced Edit Form in Telerik RadScheduler

noreply@blogger.com (James Curtis) — Thu, 03 May 2012 04:00:00 +0000

If you are reading this and can tell by the title of this post that this is one of those situations where most of us have a WTF moment and battle it out with the Telerik controls. After searching, it seems that either I really suck at searching the Internet, or this particular problem has not been addressed.

The Problem

If you end up using Telerik's RadDock as your Advanced Edit Form, you get the ability to have the form behave however you want it to behave. The trick is that the form by default is non-AJAXified, so you have to make it that way otherwise your PostBacks (if you have them) will change the "mode" of the form from Insert to Edit, for example, if you were doing an Insert.

First Pass

The first pass I took, I figured "ok, let me just wrap this in a Telerik AJAX Panel". Done deal like below:

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Width="256px" Height="64px">
    <div class="modal-overlay" />
    <div class="modal-window">
        <div class="center width250pixels height150pixels marginAuto">
            <h3><asp:Label ID="Label2" runat="server">Loading... asp:Label>h3>
            <asp:Image ID="Image1" runat="server" ImageUrl="/Images/Animation/32-1.gif" 
                 AlternateText="Loading..." />
        </div>
        <div class="clear">div>
   </ div>
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" EnableAJAX="True" 
     LoadingPanelID="RadAjaxLoadingPanel1">
    <asp:Panel runat="server" ID="DockPanel">
        <telerik:RadDock runat="server" ID="RadDock1">
            <Commands>
                <telerik:DockCloseCommand />
            </Commands>
            <ContentTemplate>
                ---- CUSTOM FORM ITEMS GO HERE ----
            </ContentTemplate>
        </telerik:RadDock>
    </asp:Panel>
    <telerik:RadScheduler ID="RadScheduler1" runat="server">
    </telerik:RadScheduler>

</telerik:RadAjaxPanel>

I was wrong. Normally, just wrapping your Control with an AJAX wrapper like RadAjaxPanel does the trick. I will say that this does work for the RadScheduler, but not RadDock. So, this again puts me back to my WTF scenario.

A Few Beers Later...
This time around, after mulling over what could be the issue and trying different things, I figured out that RadDock's contents live in their own special little world, thus not allowing any part of them to be AJAXified by the surrounding RadAjaxPanel1.

The Solution

The solution to the problem, now that I was seeing double, was to double up my RadAjaxPanels (code below). The first RadAjaxPanel "RadAjaxPanel1" encompasses the entire block of ASP.NET code for the page. The second RadAjaxPanel "RadAjaxPanel2" is within the ContentTemplate of the RadDock "RadDock1" to AJAXify the form that we're using as a custom form for the RadScheduler.

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Width="256px" Height="64px">
    <div class="modal-overlay" />
    <div class="modal-window">
        <div class="center width250pixels height150pixels marginAuto">
            <h3><asp:Label ID="Label2" runat="server">Loading... asp:Label>h3>
            <asp:Image ID="Image1" runat="server" ImageUrl="/Images/Animation/32-1.gif" AlternateText="Loading..." />
        div>
        <div class="clear">div>
    </div>
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" EnableAJAX="True" 
     LoadingPanelID="RadAjaxLoadingPanel1">
    <asp:Panel runat="server" ID="DockPanel">
        <telerik:RadDock runat="server" ID="RadDock1">
            <Commands>
                <telerik:DockCloseCommand />
            </Commands>
            <ContentTemplate>
                <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" EnableAJAX="True" 
                     LoadingPanelID="RadAjaxLoadingPanel1">
                    ---- CONTENT GOES HERE ----
                telerik:RadAjaxPanel>
            </ContentTemplate>
        </telerik:RadDock>
    </asp:Panel>
</telerik:RadAjaxPanel>
<telerik:RadScheduler ID="RadScheduler1" runat="server">
</telerik:RadScheduler>

That wraps that up and hopefully I saved someone time out there trying to do something similar!

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Minify your $#1+ (talking CSS and JavaScript) - Part Deux

noreply@blogger.com (James Curtis) — Wed, 02 May 2012 04:00:00 +0000

As promised as a follow-up to the first post, I'm going to mention a little blurb about the YUI Compressor add on that allows to you run MSBuild Tasks in Team Foundation Server (TFS). Now, I could go into a lengthy post on how to set it up, how to use it, bla bla bla. The reality is, the folks behind the Codeplex project have done a ton of this work already. Here are the main points of the YUI Compressor for TFS:

Main Features for YUI Compressor (copied from this page for convenience)

Stock YUI Css compression.
Stock YUI JavaScript compression.
Visual Studio post-build event intergration! :) (with detailed instructions here and the download section has a sample solution showing this)
MsBuild task which can be used in a Web Deployment Project build. (The download section has a sample solution showing this)
The MsBuild task also compiles all compressed files into a single destination file (aka. file combining).
Can now handle Encoding Types (eg. Unicode) from v1.2.2.0 onwards and ThreadCulture from v1.3.0.0 onwards.
Can handle wildcards (eg. *.js), because it uses MSBuild as the core engine :)

Links for YUI Compressor on CodePlex

Happy Minifying!

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Passing the LastRow XSL Parameter to Custom ItemStyle in SharePoint 2010

noreply@blogger.com (James Curtis) — Tue, 01 May 2012 04:00:00 +0000

Ever have a need to get the LastRow to your Custom ItemStyle, but decided to abandon that in favor of going to a .NET solution? What happens if you don't have the option of going to .NET to solve the SharePoint problem? Do you say no to the client? Didn't think so.

Luckily, it's not too bad. There are two ways of doing this, both with essentially the same result. They are not about the content, but the way you go about it and the repercussions of choosing one way over the other.

Using Existing XSL Style Sheets of the SharePoint Site Collection
(Not recommened since you are breaking the Site Definition. Your SharePoint Architects and Admins will hunt you down.)

Open up SharePoint Designer (2010 for this exercise)
Navigate to All Files > Style Library > XSL Style Sheets
Right-Click on ContentQueryMain.xsl and choose Edit in Advanced Mode
Choose to Check Out the document when prompted

Find this line in the code (should be around line 148):

<xsl:template name="OuterTemplate.CallItemTemplate">

Underneath that template, you'll see this code (below).  I have called 
out the custom code that I want to pass so you know what to copy to a custom ItemStyle called "MyCustomStyle".  The takeaway is that I'm passing the "CurPosition" 
and the "LastRow" parameters to my custom style for it to use.

<xsl:param name="CurPosition" />
<xsl:param name="LastRow" />
<xsl:value-of disable-output-escaping="yes" select="$BeginListItem" />
<xsl:choose>
    <xsl:when test="@Style='NewsRollUpItem'">
        <xsl:apply-templates select="." mode="itemstyle">
            <xsl:with-param name="EditMode" select="$cbq_iseditmode" />
        </xsl:apply-templates>
    </xsl:when>
    <xsl:when test="@Style='NewsBigItem'">
        <xsl:apply-templates select="." mode="itemstyle">
            <xsl:with-param name="CurPos" select="$CurPosition" />
        </xsl:apply-templates>
    </xsl:when>
    <xsl:when test="@Style='NewsCategoryItem'">
        <xsl:apply-templates select="." mode="itemstyle">
            <xsl:with-param name="CurPos" select="$CurPosition" />
        </xsl:apply-templates>
    </xsl:when>
    
    <xsl:when test="@Style='MyCustomStyle'">
        <xsl:apply-templates select="." mode="itemstyle">
            <xsl:with-param name="CurPos" select="$CurPosition" />
            <xsl:with-param name="Last" select="$LastRow" />
        </xsl:apply-templates>
    </xsl:when>
    
    <xsl:otherwise>
        <xsl:apply-templates select="." mode="itemstyle">
        </xsl:apply-templates>
    </xsl:otherwise>
</xsl:choose>

Save your ContentQueryMain.xsl file

Navigate to All Files > Style Library > XSL Style Sheets

Right-Click on ItemStyle.xsl and choose Edit in Advanced Mode

Choose to Check Out the document when prompted

Find the following code (all the way at the bottom):

</xsl:stylesheet>

Just before this closing tag, paste in the following code:

<xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']" 
mode="itemstyle">  
   <xsl:param name="CurPos" />
   <xsl:param name="Last" />   
    <xsl:variable name="Scripts">
        <xsl:if test="$CurPos=1">
            [CDATA[
                <script type="text/javascript">
                    // You can put custom code or css styles in a CDATA tag 
                    // to run the first time in the result set
                </script>
            ]]> 
        </xsl:if>
    </xsl:variable>
    <xsl:variable name="StartDiv">
        <div>
    </xsl:variable>
    <xsl:variable name="CloseDiv">
        <xsl:if test="$CurPos=$Last">
            </div>
        </xsl:if>
    </xsl:variable>
    <xsl:value-of select="$Scripts" disable-output-escaping="yes" />
    <xsl:value-of select="$StartDiv" disable-output-escaping="yes" />
        <xsl:value-of select="@Title" />
    <xsl:value-of select="$CloseDiv" disable-output-escaping="yes" />
</xsl:template>

Above you can see how I'm using the LastRow parameter (identified by the in-template parameter "Last". Another thing that I'm doing is showing how to make life easier for yourself by wrapping code in XSL variables. This allows you to easily construct your generated output in a normal fashion opposed at an ugly hack.
Save the ItemStyle.xsl file
Back up to the XSL Style Sheets folder, and check in both the ContentQueryMain.xsl and the ItemStyle.xsl files. If you want read-only users to view the changes, then you need to Publish these two files.
Add a Content Query Web Part to the page, and then choose the new Item Style underneath the Web Part Properties > Presentation

Create copy of XSL Style Sheets of the SharePoint Site Collection

(This is the preferred way of extending the XSL ItemStyles for the SharePoint Site Collection and should keep the SharePoint Architect and SharePoint Admins from beating you to a pulp)

Instead of editing the ContentQueryMain.xsl and ItemStyle.xsl files mentioned above, make copies of them in the XSL Style Sheets folder
Make the changes as mentioned above in your copied XSL files
In your Internet Explorer browser, navigate to your SharePoint Site, then to Site Settings
Under the Galleries category, click on web parts

Highlight / Check the ContentQuery.webpart file
In the Ribbon Bar, (near the middle) click on Download a Copy to download the CQWP.webpart file
Edit the CQWP webpart file in an Editor (Notepad will be fine)
Add the property for "XSL" (In SP 2007 you can modify the MainXslLink and ItemStyleLink properties)  In the code below, I am calling CustomContentQueryMain.xsl and CustomItemStyle.xsl files in lieu of the default xsl files.
xml version="1.0" encoding="utf-8"?>
<webParts>
  <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
    <metaData>
      <type name="Microsoft.SharePoint.Publishing.WebControls.ContentByQueryWebPart, 
       Microsoft.SharePoint.Publishing,Version=14.0.0.0,Culture=neutral,
       PublicKeyToken=71e9bce111e9429c" />
      <importErrorMessage>Cannot import this Web Part.importErrorMessage>
    metaData>
    <data>
      <properties>
        <property name="Title" type="string">Content Queryproperty>
        <property name="Description" type="string">
        Displays a dynamic view of content from your site.property>
        <property name="ChromeType">TitleOnlyproperty>
        <property name="ChromeState">Normalproperty>
        <property name="ItemLimit" type="int">15property>
        <property name="SortBy" type="string">{8c06beca-0777-48f7-91c7-6da68bc07b69}property>
        <property name="SortByDirection" 
        type="Microsoft.SharePoint.Publishing.WebControls.ContentByQueryWebPart+SortDirection,
        Microsoft.SharePoint.Publishing,Version=14.0.0.0,Culture=neutral,
        PublicKeyToken=71e9bce111e9429c">Descproperty>
        <property name="GroupStyle" type="string">DefaultHeaderproperty>
        <property name="ItemStyle" type="string">Defaultproperty>
        <property name="ServerTemplate" type="string">property>

 <property name="Xsl" type="string"><xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" 
        version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
        xmlns:cmswrt="http://schemas.microsoft.com/WebPart/v3/Publishing/runtime" 
        exclude-result-prefixes="xsl cmswrt x" > 
        <xsl:import href="/Style Library/XSL Style Sheets/Header.xsl" /> 
        <xsl:import href="/Style Library/XSL Style Sheets/CustomItemStyle.xsl" /> 
        <xsl:import href="/Style Library/XSL Style Sheets/CustomContentQueryMain.xsl" /> 
        </xsl:stylesheet>property>

      properties>
    data>
  webPart>
webParts>

Save the .webpart file with a new name like "Custom Content Query".webpart

Upload the .webpart back to the Web Part gallery and put it in a folder like 
"Custom" or whatever folder you want to distinguish it from the OOTB CQWP

Add the new .webpart to a page to test

I know that this post may seem long-winded just to talk about the LastRow parameter, but I did feel a need to have a Post that walked through all of the process of how to implement it instead of the "here's the snippet -- enjoy" type of Post.  If you found this informative, feel free to share.  :)

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

James' Way: Default Starter CSS

noreply@blogger.com (James Curtis) — Mon, 30 Apr 2012 05:00:00 +0000

Like many things that I do over and over, I have like a "default" set of CSS styles that I generally use to jumpstart any project that I work on. These styles also allow you to compound them when calling CSS classes and/or addClass or removeClass with jQuery. Below is an example of compounding classes for an element:

<div class="greyBG orange border-none margin5 padding10">
   Some Text Here
</div>

The result of the above CSS classes being applied would be:

Grey Background
Orange Font Color
No border
Margin all the way around for 5px
Padding all the way around for 10px

The CSS styles for the previous example look like this:

.greyBG { background-color: #e2e2e2 }
.orange { color: #FF6600; }
.border-none { border: none; }
.margin5 { margin: 5px; }
.padding10 { padding: 10px; }

The CSS above gives the developers of the project a repeatable way to color and size properties without the need for using inline styles of an element (that's a no-no).  My example for the starter CSS is below:

a:link { color: #0000FF; }
a:visited { color: #0000FF; }
a:hover { color: #FF6600; }
a:active { color: #FF6600; }

.no-decoration { text-decoration: none; }
.no-decoration a { text-decoration: none;}

.bold { font-weight: bold; }
.clear { clear: both; }
.black { color: #000000 !important; }
.black a:link { color: #666666; }
.black a:link { color: #666666; }
.black a:link { color: #FF6600; }
.blue { color: Blue; }
.grey-dark { color: #333333;}
.grey-medium { color: #666666;}
.grey-light { color: #999999;}
.greyBG { background-color: #999999; }
.orangeBG { background-color: #FF6600; }
.orange { color: #FF6600; }
.orange a:link { color: #FF6600; }
.orange a:visited { color: #FF6600; }
.orange a:hover { color: #666666; }
.red { color: #FF0000;}
.white { color: #FFFFFF; }
.white a:link { color: #FFFFFF; }
.white a:visited { color: #FFFFFF; }
.white a:hover { color: #EEEEEE; }
.whiteBG { background-color: White; }

.hide { display: none; }
.show { display: block; }
.left { float: left; }
.center { text-align: center; }
.right { float: right; }
.pointer { cursor: pointer;}
.underline {text-decoration: underline;}
.padding0 { padding: 0px;}
.padding5 { padding: 5px; }
.padding10 { padding: 10px; }
.padding15 { padding: 15px; }
.paddingBottom20{padding-bottom: 20px;}
.paddingLeft5 { padding-left: 5px; }
.paddingLeft15 { padding-left: 15px; }
.paddingLeft15Neg { padding-left: -15px; }
.paddingRight5 { padding-right: 5px; }
.paddingRight15 { padding-right: 15px;}
.paddingTop0 { padding-top: 0px;}
.paddingTop15 { padding-top: 15px; }
.paddingTop15Neg { padding-top: -15px;}
.marginAuto { margin: 0px auto 0px auto;}
.margin0 { margin: 0px; }
.margin5 { margin: 5px; }
.margin15 { margin: 0px 15px; }
.marginBottom5 { margin-bottom: 5px;}
.marginBottom15 { margin-bottom: 15px;}
.marginLeft5 { margin-left: 5px; }
.marginLeft15 { margin-left: 15px; }
.marginLeft50 { margin-left: 50px; }
.marginLeft100 { margin-left: 100px; }
.marginLeft200 { margin-left: 200px; }
.marginRightNeg10 { margin-right: -10px; }
.marginRight0 { margin-right: 0px; }
.marginRight5 { margin-right: 5px;}
.marginRight15 { margin-right: 15px; }
.marginTop0 { margin-top: 0px;}
.marginTop5 { margin-top: 5px;}
.marginTop10 { margin-top: 10px; }
.marginTop15 { margin-top: 15px; }
.marginTop20 { margin-top: 20px; }
.marginTop410 { margin-top: 410px; }
.marginTop5Neg { margin-top: -5px; }
.marginTop15Neg { margin-top: -15px; }
.marginTop25 { margin-top: 25px; }
.marginTopBig { margin-top: 280px; }
.width25pixels { width: 25px; }
.width50pixels { width: 50px; }
.width50percent { width: 50%;}
.width75pixels { width: 75px; }
.width100pixels { width: 100px; }
.width100percent { width: 100%; }
.width125pixels { width: 125px; }
.width130pixels { width: 130px; }
.width145pixels { width: 145px;}
.width150pixels { width: 150px;}
.width200pixels { width: 200px; }
.width225pixels { width: 225px; }
.width250pixels { width: 250px; }
.width275pixels { width: 275px; }
.width288pixels { width: 288px; }
.width300pixels { width: 300px; }
.width318pixels { width: 318px; }
.width350pixels { width: 350px; }
.width375pixels { width: 375px; }
.width400pixels { width: 400px; }
.width450pixels { width: 450px; }
.width550pixels { width: 550px; }
.width650pixels { width: 650px; }
.width675pixels { width: 675px; }
.width980pixels { width: 980px; }
.width1020pixels { width: 1020px; }
.height5pixels { height: 5px; }
.height25pixels { height: 25px; }
.height50pixels { height: 50px; }
.height65pixels { height: 65px; }
.height70pixels { height: 70px; }
.height75pixels { height: 75px; }
.height100pixels { height: 100px; }
.height125pixels { height: 125px; }
.height150pixels { height: 150px; }
.height200pixels { height: 200px; }
.height250pixels { height: 250px; }
.height300pixels { height: 300px; }
.height350pixels { height: 350px; }
.height400pixels { height: 400px; }
.height455pixels { height: 455px; }
.height485pixels { height: 485px; }
.minHeight100pixels { min-height: 100px;}
.font0 { font-size: 4.0em; }
.font1 { font-size: 3.0em; }
.font2 { font-size: 2.0em; }
.font3 { font-size: 1.5em; }
.font4 { font-size: 1.0em; }
.font5 { font-size: 0.7em; }
.lineHeight20px { line-height: 20px;}
.lineHeight25px { line-height: 25px;}
.lineHeight30px { line-height: 30px;}
.text-align-top { vertical-align: text-top;}
.text-align-bottom { vertical-align: bottom;}
.text-indent20 { text-indent: 20px;}
.border-none { border: none !important; }
.border-thick { border: 3px #999999 solid; }
.zIndex1 { z-index: 1; }
.zIndex1000 { z-index: 10000;}
.overflowHidden { overflow: hidden; }

Thats a good chunk of my Starter CSS.  I end up removing what I don't use in the site, but starting out, I have plenty of CSS options available for compounding classes in the HTML elements.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Embedding JavaScript / CSS in XSL for SharePoint

noreply@blogger.com (James Curtis) — Sun, 29 Apr 2012 05:00:00 +0000

I had a requirement to inject a script block into a custom template for a Content Query Web Part (CQWP) so that the web part could be added from an Out-Of-The-Box (OOTB) CQWP to any page in SharePoint. The page designer would just have to select the "MyCustomTemplate" style under the Presentation tab of the Web Part Properties of the CQWP.

The code I have below is a custom template that I added to the ItemStyle.xsl located in the Style Library > XSL Style Sheets > folder.

Note: by editing this document, you are breaking it from the Site Definition of the Site Collection. If you are not comfortable doing this, then please don't. :)

<xsl:template name="MyCustomTemplate" 
        match="Row[@Style='MyCustomTemplate']" mode="itemstyle">  
   <xsl:param name="CurPos" />
    <xsl:variable name="scripts">
     <xsl:if test="$CurPos=1">    
      <![CDATA[
        <style type="text/css">
         .block H2 A:LINK { color: white !important; 
                     text-decoration: none; }
    .block H2 A:VISTED { color: white !important; 
                 text-decoration: none; }     
    .block H2 A:HOVER { color: #eaeaea !important; 
                 text-decoration: underline; }
    .block H2 A:ACTIVE { color: white !important;}
        </style>
         <script type="text/javascript">
             $(function () {
                 //Show Banner
                 $(".main_image .desc").show();
                 $(".main_image .block").animate({ opacity: 0.85 }, 1); 
             });     
         </script> ]]> 
        </xsl:if>
   </xsl:variable>
</xsl:template>

It's worth mentioning that the above code loads the scripts into a variable called "Scripts" and is set to do this only before the first data row.  

The main parts you need to wrap CSS code or JavaScript are the following tags:

<[CDATA[

   -- scripts go here --
]]> 

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

James' Way: Structuring JS files in Web Apps

noreply@blogger.com (James Curtis) — Sat, 28 Apr 2012 05:00:00 +0000

Anyone that knows me can tell you that I seem to always have an opinion on things, especially something that I live and breathe every day (which is UX if you are late to the party). I figured that I would take time out of my day to let the Internet community taste some of the "secret sauce".

JS Folder Layouts

In some of the IDE's, when you create a new web application, it may create a "scripts" folder that would be laid out like this ([root] is the top directory of your web app):

[root]\scripts

This is fine, or if you want to do something like what I do to keep it short, you can do this:

[root]\js

From this point-forward, you can do one of two things: A) put all of your JS files for the entire site in the "js" folder, or B) create a 2nd level folder to further seperate your JS files (do this if you anticipate having a bunch of files). I have an example of this below:

[root]\js\global    (JS files used across different areas of the site)
[root]\js\pub        (JS files used for specific public pages of the site)
[root]\js\mbr       (JS files used for specific member pages of the site)

Folders Created: What's Next?

The next step would essentially be creating your JS files. Now, we can borrow some naming conventions from our server-side programming languages so that we can keep tracking of "what's what", especially with the individual JS files for one-off pages. Below is an example of what a site may look like that I have done (only the .min files shown for example):

[root]\default.aspx
[root]\about.aspx
[root]\contact.aspx
[root]\members\login.aspx
[root]\js\global\master.min.js (JS files used across different areas of the site)
[root]\js\pub\pages.default.min.js (JS files used for specific public pages of the site)
[root]\js\pub\pages.about.min.js (JS files used for specific public pages of the site)
[root]\js\pub\pages.contact.min.js (JS files used for specific public pages of the site)
[root]\js\mbr\pages.login.min.js (JS files used for specific member pages of the site)

The idea here is to balance readability of the structure from your IDE, but also to keep the folder structure abbreviated since your JS file names can be longer depending on what you're naming them. I have found that this pattern that I established above works well for the sites that I have done and allows you to really hone in on any troublesome code. Above all else, it keeps any JS code out of the

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Minify your $#1+ (talking CSS and JavaScript)

noreply@blogger.com (James Curtis) — Fri, 27 Apr 2012 05:00:00 +0000

I've learned several years ago that speed can make or break these web sites. As we get fancier CSS and JavaScript, the page load and requests get heavier and heavier. I used to think that you don't have to worry about minification unless you were going to Production with your code. Well, I'll be the first to admit that I'm changing my tune about that because I need to see how these web applications will perform at their best so I can adjust if still slow later. The last thing you want is to think your slowness is just caused by lack of minification, then find out after minification that your site is still slow. :)

Things to do for minification:

Make "copies" of your JS files and name them accordingly
(Ex. "page.contact.js" has a minified version of "page.contact.min.js")
Make "copies" of your CSS files and name them accordingly
(Ex. "styles.css" has a minified version of "styles.min.css")
Point your Pages to the minified versions
Check out two sites that I use for minification and copy your code there:

JavaScript Minification: JS Compress
CSS Minification: CSS Minify

Paste the minified code back into the .min files

OK, am I done now?

Ha! No way. Guess what? You need to lower the amount of HTML requests your pages are calling. Many examples of this are referencing too many JavaScript files. If you just run YSlow, it will point them out for you. :)

So, how do I lower my HTML requests?

Combine as many JS files into one large minified JS file

Keep copies of the files you're merging into one
Only do this with JS files that are most commonly used, you can still have 3-4 JS files, just not 20!

Images as CSS Sprites

The reality is that it would be difficult to make all images as a large sprite, but many common icons, etc., especially "themes", should be made into a large sprite

The main idea here is to let the web browsers whether it's Google Chrome, Internet Explorer, Safari, Firefox or Opera, to load your CSS and JS code as fast as possible. This does make an impact for sites like @TimeGears where we have a public section (what you'll see by that link), a booking section and administration section. On our booking section, it's all AJAX and WCF (web services), so it's really heavy on JavaScript. If you run the "unminified" version it will slow each page down considerably. By minifying it, the pages are "snappy" since the browser doesn't have to work as hard. :)

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Form Submit in jQuery Dialog Window in ASP.NET

noreply@blogger.com (James Curtis) — Thu, 26 Apr 2012 12:31:00 +0000

Using forms in modals is a very common practice. Things like Contact pages, etc., are very common in many of the web sites today just because it keeps the end user on the same page when all that they want to do is fill out a quick form and stay on the same page. The issue in ASP.NET is that it does not recognize the form that is added to the DOM by way of jQuery since it technically "wasn't there" to begin with (even if hidden). So, what to do you say? Well, keep reading.

Step One: Create your dialog window somewhere in your ASPX page

This is the easy part which you probably already have some awesome dialog that blows my little example out of the water. If you don't, then you can use this snippet below:

<div id="dialog-loading" title="Loading..." class="hide">
    <div>
        Please Wait...
        <br />
        <img src="/Images/Animation/32-1.gif" alt="Processing..." />
    div>
div>

One thing to note from the CSS perspective is that I have a CSS class called "hide".  This is simply a CSS class that is constructed like this:

.hide { display: none; }

This allows me to easily hide pieces of the HTML code that I know that I'll be flipping on and off with JavaScript / jQuery code and is definitely a James "Best Practice." 

Step Two:  Create your JavaScript / jQuery Code

This part is the crucial part.  Remember how I was saying that ASP.NET isn't paying your dialog any attention in regards to the form?  Well, this little snippet of code below attaches the dialog that is opening up to the form within the ASPX page to force it to be dealt with:

var dlga = $("#dialog-loading").dialog({
        closeOnEscape: false,
        autoOpen: true,
        modal: true,
        resizable: false,
        open: function () {
            $(".ui-dialog-titlebar-close").hide();
        },
        close: function () {
            $(".ui-dialog-titlebar-close").show();
        }
    });
    dlga.parent().appendTo($("form:first"));

Things to note in the code above are that this is one of those "processing" notifications that I do on @timegears booking process, but is exactly the same for the contact dialogs (or other form-centric dialogs).  What you will want to remove is the "open" function where I'm hiding the close button which in turn means that you'll have to provide a way to close the modal.  If you don't, then you won't be able to close the modal window and will really tick off your end users!

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

.NET 4 Routing in ASP.NET Web Forms (like MVC)

noreply@blogger.com (James Curtis) — Wed, 25 Apr 2012 15:05:00 +0000

Having done several MVC sites, I was a big fan of the routing you could do with it being baked into MVC. In .NET 4, it has a flavor of the same thing, so I thought that I would share some code with you on how to do it very easily.

Modify your Global.asax

void RegisterRoutes(System.Web.Routing.RouteCollection routes)
    {
        routes.Ignore("{resource}.axd/{*pathInfo}");
        routes.Ignore("pages/{resource}.axd/{*pathInfo}");
        routes.Ignore("{resource}.ascx/{*pathInfo}");
        routes.Ignore("pages/{resource}.ascx/{*pathInfo}");

        routes.MapPageRoute(
            "pages-browse",     // Route Name
            "{pagename}",       // URL with parameters
            "~/pages/{pagename}.aspx"      // Web Forms page to handle it
            );
    }
    void Application_Start(object sender, EventArgs e)
    {
        // Code that runs on application startup
        RegisterRoutes(System.Web.Routing.RouteTable.Routes);
    }

Create a folder in your ASP.NET Web App

Create a folder called "Pages" in the root of your web app and dump any ASPX files there.

The Result: Look Mom, No Extensions!

http://yourdomain.com/About

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)