Set Styles on Gaia Window Control

Recently I had to use one of the coolest controls of Gaia, the Window control which mimics the behavior of a normal desktop Window within the web page. I had some issues with that, when it came to set styles on the layout of the window. They haven’t properly documented about that.

Using Firebug I analyzed the html markup, that rendered by the window control and got to know that you need to maintain separate CSS classes with predefined suffixes (defined by Gaia team) for each main content areas in the window.

For an example if you set the Window CssClass property to “update-line”, then you need to create below CSS classes with predefined suffixes to style the Window layout (only the main content areas described here)

Area	Suffix	CSS Class Example
Whole window	"-window"	update-line-window
Content area	"-window-content"	update-line-window-content
Caption area	"-window-top"	update-line-window-top

Outlook 2010 Quick Steps Feature

Recently I have upgraded my MS Office package to 2010 and it was really cool. The Quick Steps feature that comes with the Outlook 2010 made me easier to manage my mail inbox. This feature allows you to create single-click links to perform tasks that normally require multiple steps. In my case I used this to move my emails to specific folders that I have organized in my mail box. For an example if you need to move your office related emails to the “Office” folder once you have read that. You can setup a single-click link for this and it’ll be visible in Ribbon’s Home tab in your Outlook.

Currently at office I’m using two email accounts. One is for the office related work and the other one for the customer related work. Coolest thing is based on your mail box, the single-click links will be changed on the Ribbon section.

For more Office 2010 features - 10 Things

Decorator Pattern

Current project we are working on, they heavily used design patterns in their codebase and when it comes to do the modifications and new enhancements, we must have a good understanding on how the design patterns behave and how we can apply in a real world situation to make it more maintainable and optimizable codebase.

Therefore recently I started to do some research on this and got a clear understanding on the Decorator design pattern initially.This pattern is quite useful when you need to extend an object’s behavior dynamically. This ability to dynamically attach new behavior to objects is done by a Decorator class that wraps itself around the original class.

Following example illustrates the usage of the Decorator pattern and the way I illustrated the example was bit funny and it was an incident recently I experienced.

Let’s take a real world entity called Girl for this example. Every girl has a unique feature Smile. So we can create an interface for the Girl, that specifying we need to implement the Smile:

Now we can create an Office girl (concrete class) using the Girl interface and implement the Smile for the Office girl.

Following creates an instance from OfficeGirl and check the Smile:

The output would be:

Now let’s say there is another office girl who wanted Smile and at the same time she needs to do something else too. Let's say for an example flirting. How she can achieve this?

Now the Decorator pattern is coming to the picture. By using it, we can decorate this office girl to do the flirting thingy at the run time!

Following is how we can achieve this using a Decorator class:

Following creates an instance from OfficeGirl and decorate it via OfficeGirlDecorator and check the Smile:

The output would be:

In this example if you look at the Decorator class, it can invoke just like the original class. In most cases, method calls are delegated to the original class and then the results are acted upon, or decorated, with additional functionality.

Still not got it? For more information visit Gang of Four, Wikipedia

Circular Positioning in ASP .Net

In Puzzlepart projects several occasions I had to find a good solution for the circular positioning on html markup. There are many ways to do this and the team wanted to tryout using pure css styles that support in cross browsers.

Below sample code illustrates how to achieve this using css positing styles and the bit of mathematics. It’ll rotate the image based on selected angle.

Page View

Code:

using System;
using System.Drawing;
using System.Web.UI;

namespace RotationTest
{
    public partial class Rotation : Page
    {
        private const double Radius = 155;
        private readonly Point Origin = new Point(190, 195);

        protected string PositionStyle
        {
            get
            {
                var style = "visibility:hidden;";
                if (!string.IsNullOrEmpty(dropDownAngle.SelectedValue))
                {
                    var angle = Convert.ToDouble(dropDownAngle.SelectedValue);
                    var position = GetPointOnCircle(Origin, Radius, angle);
                    style = string.Format(
                            "left: {0}px; top: {1}px;",
                            position.X, position.Y);
                }
                return style;
            }
        }

        private static Point GetPointOnCircle(Point origin, double radius, double angleInDegrees)
        {
            // Convert from degrees to radians via multiplication by PI/180        
            var x = (int)Math.Round(radius * Math.Cos(angleInDegrees * Math.PI / 180.0), 
                                    MidpointRounding.ToEven) + origin.X;
            
            var y = (int)Math.Round(radius * Math.Sin(angleInDegrees * Math.PI / 180.0), 
                                    MidpointRounding.ToEven) + origin.Y;

            return new Point(x, y);
        }
    }
}

Markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Rotation.aspx.cs" 
    Inherits="RotationTest.Rotation" %>
<head runat="server">
    <title>Rotation Test</title>
head>
<body>
    <form id="form" runat="server">
    <div>
        <div style="width: 400px; height: 402px; background-image: url(circular-image.png);
            background-repeat: no-repeat;">            
            <img src="position-image.png" alt="position image" 
                 style="position: absolute; <%= PositionStyle %>" />                 
        </div>
        Select Angle -
        <asp:DropDownList ID="dropDownAngle" runat="server" AutoPostBack="True">
            <asp:ListItem Selected="True">0asp:ListItem>
            <asp:ListItem>60</asp:ListItem>
            <asp:ListItem>90</asp:ListItem>
            <asp:ListItem>150</asp:ListItem>
            <asp:ListItem>240</asp:ListItem>
            <asp:ListItem>320</asp:ListItem>
        asp:DropDownList>
    div>
    </form>
body>
html> 

Circular Image

Position Image

Design UI Mockups

Presently I’m engaged with Puzzlepart team that one of the best SharePoint solution providers in Norway and working on their SharePoint products, external customers. Working with them reminds me one of the great projects that I worked in Virtusa, that changed my whole thinking pattern of software development.

Few weeks ago we had a workshop for one of their upcoming product and it was mainly focused on sprint planning for that product. The process we are using is Scrum and according to that we picked few user stories from the user story board and create a product back log and did the estimation for that. Each user story represents the main functionalities of the product and based on that, we decided how we are going to design user interfaces for the product. Previously I was only familiar with the RUP development and still new to the Scrum.

The interesting thing was how we done the UI design for this product. Usually this will be done by an UI designer and based on their wireframes we do the actual implementation. But in here everybody was involved and it was a new experience to me. 

How we did:

• Team is get together and pick up one user story from the planning sprint. Discuss the user story scenario and the functionality that we need to implement.

• After that each team member need to present his UI mockup for the functionality (draw it in a paper and show it to the team). Others will discuss if there were missing functionalities in the UI, discuss whether it is implementable.

• UI designer will consider all UI mockups given by the team and aware about the technical limitations and the functionality.

Using this approach developers will have a good feeling that they have contributed something for the UI design and they are responsible to implement that. That time this was one of the key thing that we were able deliver the sprint successfully.

One lesson I learned was when design UI mockups it should contains the actual data that relevant to the user story not dummy data.

Enum to Description

Recently we had an issue with maintaining enum descriptions in our project. The problem was descriptions duplicated several places in codebase and when it came to modify descriptions we had to modify the description everywhere. From the maintainability perspective this not a good practice and we came up with a solution by using the coolest feature Extensions methods that comes with the .NET 3.5. Following is the sample code of the solution.

using System;
using System.ComponentModel;
using System.Reflection;

namespace EnumToDescriptionTest
{
    public static class EnumExtensions
    {
        // Extension method to get the enum description.
        public static string ToDescription(this Enum val)
        {
            Type type = val.GetType();

            string name = Enum.GetName(type, val);
            FieldInfo field = type.GetField(name);

            // Check for the Description Attribute.
            DescriptionAttribute[] attributes = (DescriptionAttribute[])field.GetCustomAttributes(
                                                typeof(DescriptionAttribute), false);

            return attributes.Length > 0 ? attributes[0].Description : name;
        }
    }

    class Program
    {
        // Define the enum with description.
        public enum UserMode
        {
            [Description("Add User")]
            Add = 0,
            [Description("Update User")]
            Update = 1,
            [Description("Delete User")]
            Delete = 2
        }

        static void Main(string[] args)
        {
            // Get the enum description.
            Console.WriteLine(UserMode.Add.ToDescription());
            Console.ReadLine();
        }
    }
}