jQuery Festivities…yes it’s nearly Christmas!

by Kev Ritchie 18. November 2010 13:39

After reading The Beebs post on how to create a jQuery rollover like the one on Dribbble.com.  It got me thinking about how this or other effects could be used to create an Advent Calendar.

The animate function has been in the jQuery library for a while now (v1.0 I think, correct me if I’m wrong), but I thought that even though it’s not a new function of jQuery, it’s exactly what I need to achieve my goal…a door sliding effect.

Click here for a demo

If you want to replicate it, here are a few steps to help:

1. Add a reference to the jQuery library:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js" language="javascript"
        type="text/javascript"></script>

2. Next write a little HTML mark-up to build each of the calendar doors:

<div class="day">
    <div class="overlay">
        <img src="bells25.jpg" />
        <h2>1</h2>
    </div>
    <img class="image" src="1.jpg" />
</div>

3. And now for some styling.  Or in my case an attempt Smile

<style>
        .day
        {
            position: relative;
            border: solid 2px black;
            width: 150px;
            height: 150px;
            display: inline-block;
            overflow: hidden;
            margin: 5px;
        }
        
        .overlay
        {
            font-size: 2.0em;
            text-align: center;
            width: 150px;
            height: 150px;
            background-color: #ffffff;
            /*  Setting the position to absolute here keeps the image and text on top */
            position: absolute;
            z-index: 1;
        }    

        .image
        {
            position: relative;
            width: 150px;
            height: 150px;
        }

        h2
        {
            color: red;
        }
</style>

4. Now for the jQuery magic.  In step 2 we defined our layout using DIVs, each DIV had a class name, these names are important for this step to work.

First we add a jQuery ready function that will fire when the document is ready.  In this function, we immediately start to hook up our methods to create the “sliding door” effect.  We search the document for a DIV called .day and attach a hover function to it.  We then search that DIV for another DIV called .overlay.  When this element is found, we add the animation using the animate function.

We use two animate methods.  One to change the position of the overlay to the day DIV width and the second to set it back.

<script>

    $(document).ready(function() {

        $('.day').hover(function(){
        
        /* Get the day div width */
        var width = $(this).outerWidth();
        
        /* Change the position of the overlay to the day div width with an animation effect */
        $(this).find('.overlay').animate({ right : width },
                {queue:false,duration:300});
    }, function() {
        /* When the mouse is no longer hovering over the div set the position back. */
        $(this).find('.overlay').animate({ right : '0px' },
                {queue:false,duration:300});
        });

        /* queue:false = start the animation immediately, it won't wait for the previous 
animation to stop */
        /* duration:300 = how long the animation will take to finish in this case 0.3 
seconds. */
    });
    
</script>

Try the demo above.  Feel free to add to it criticise it, let me know how you get on!

MS Access vs. Visual Studio LightSwitch

by Kev Ritchie 14. November 2010 11:59

On 3rd August at VSLive! 2010 in Redmond; Corporate Vice President of Visual Studio, Jason Zander, unveiled Visual Studio LightSwitch.

Yes, it’s taken this long for me to get around to writing about it.

What is LightSwitch?  LightSwitch is a member of the Visual Studio family targeted at developers who need to rapidly build LOB (Line of Business) Applications.

What relevance does this have to Access?

Well, recently a colleague of mine was asked to look into LightSwitch as an alternative to building database applications using Access.  Yes, there are still applications in use today that use Access!  So, I thought I’d take this opportunity to find out if LightSwitch really is; what has been seen by some developers, as a replacement for Access.

It seems that even though Access was developed as a package to help business end users store, report on and share business data with other business end users, the Access package has been leveraged by developers to create what you could class as LOB applications.

This brings to light a common issue with this type of development. Whilst this method of application development fits personal or small business usage, scalability of the application is limited.  As a business grows the reliance on the application grows and with it the data.  It wouldn’t be long before you had to compress and archive off the data, to allow for further storage.

Oh, and let’s not forget, have you ever seen a nice looking Access application UI? J  If you have or have created one, then I apologise.

To overcome the issues of using Access as a platform for developing business applications, I believe, is where LightSwitch comes in.

I fully understand that at first glance, LightSwitch seems to be a glorified version of Access with a Visual Studio IDE.  But look closer!  You are getting so much more.  Here are a few that I thought were worth mentioning:

Out-of-the-box you get a classic three tier architecture built on top of .NET (WCF, RIA Services and Entities), ASP.NET and Silverlight. Nice!

Microsoft are also working with Partners, like Infragistics, to develop Shell and Theme components that developers can install to dramatically change the look and feel of their application at the click of a button.  If you’re rubbish at UI design like me, this is a brilliant addition.

You also have the ability to connect to data sources such as SQL Server and SharePoint.  But Access 2010 can do that as well, so why was it worth mentioning?  Well, really to highlight the point that the major difference between the two packages is that LightSwitch is capable of connecting to the Cloud (Windows Azure and SQL Azure Platform) albeit Post beta.  Ah, scalability!

So, is LightSwitch a replacement for Access?

In my honest opinion, LightSwitch is not a replacement for Access.

LightSwitch is a product that gives developers the tools to provide feature-rich and scalable business applications that can be deployed to multiple platforms.

Access is a product that; as I mentioned before, is for allowing business end users to store, report on and share business data.  It was never intended to be a platform to build business applications.

Now that LightSwitch is here, the weight of being a business application can be taken off of Access’s shoulders!

The lines are clearly defined between these two products and both are here to stay.

For more information on LightSwitch and the Keynote from VSLive! head over to http://www.microsoft.com/visualstudio/en-us/lightswitch. You won’t be disappointed.

Windows Phone 7–And the winner is…

by Kev Ritchie 13. November 2010 10:19

…Me!! Open-mouthed smile

http://ubelly.com/2010/11/the-winner-of-the-techin8-wp7-competition-is/

Thanks to all the guys and gals at ubelly.com

Adding a Web Service Reference to a Windows Service

by Kev Ritchie 9. November 2010 14:19

Spent a few minutes trying to figure out how to add a Web Service reference; instead of a Service reference, to a Windows Service project.

Turns out it's pretty simple.

1. Right click on your Windows Service project and select 'Add Service Reference'.  The 'Add Service Reference' dialog should appear.


2. Click 'Advanced...' (highlighted above), the 'Service Reference Settings' dialog should now appear:

3. Click 'Add Web Reference...'.

4. You should then get the 'Add Web Reference' dialog (which if you're familiar with ASP.NET and Web Services, you will recognise).

In the 'Add Web Reference' dialog, you can type in the URL of a known Web Service and click Go (the arrow to the right of the URL Address box) or you can select on of three options 'Web services in this solution', 'Web services on the local machine' or 'Browse UDDI Servers on the local network'.

The following article in MSDN library has a little more information on this screen: http://msdn.microsoft.com/en-us/library/8dcbc50t.aspx

Which ever action you choose, if a Web Service is found it will populate the 'Web services found at this URL:' list on the right hand side of the dialog box.  There could be multiple results here, so select the appropriate service, change the 'Web reference name' if appropriate and click Add Reference.

You should now have a reference to a Web Service in your Windows Service project.

AnonymousType to DataTable madness!

by Kev Ritchie 5. November 2010 21:53

Today I was working on converting a project over to WPF.  Everything was going well until I needed to put the results of a LINQ query into a DataTable.

There didn't seem to be any easy way to do it, unless I'm being really blind Laughing.  Well, after some research and tinkering, I chucked together this little handy method:

private DataTable QueryResults<T>(IEnumerable<T> anon)
{
    DataTable results = new DataTable();
 
    if (anon != null)
    {
        PropertyInfo[] columns = null;
 
        foreach (T item in anon)
        {
            if (columns == null)
            {
                columns = ((Type)item.GetType()).GetProperties();
 
                foreach (PropertyInfo column in columns)
                {
                    Type columnType = column.PropertyType;
 
                    if ((columnType.IsGenericType) && (columnType.GetGenericTypeDefinition()
                        == typeof(Nullable<>)))
                    {
                        columnType = columnType.GetGenericArguments()[0];
                    }
 
                    results.Columns.Add(new DataColumn(column.Name, columnType));
                }
            }
 
            DataRow dr = results.NewRow();
 
            foreach (PropertyInfo column in columns)
            {
                dr[column.Name] = column.GetValue(item, null) == null ?
                    DBNull.Value : column.GetValue(item, null);
            }
 
            results.Rows.Add(dr);
 
        }
    }
 
    return results;
}
You can also pass in objects of type ISingleResult e.g Stored Procedures, into this method.

Have a go and let me know what you think

Powered by BlogEngine.NET 2.5.0.6
Theme by Mads Kristensen | Modified by Mooglegiant