Why reset CSS?

Have you noticed inconsistent rendering of HTML elements in different browsers and have got annoyed with it? This is because all the browsers have presentation defaults but none have the same default. For e.g. the way chrome renders an input type is totally different from the way IE does. But as a web developer you want your web pages to look same(at least close enough) across browsers. One way is to go fix for every browser in CSS files but another way is to simply reset your html tags to default and the paint them again!

Here’s the code for it:

  <pre>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}</pre>

Note: Remove the <pre> tag from the above code while pasting.

See Original Source here. And here’s an elaborate reason for CSS reset from Meyerweb.

– Nish

@NishAnil on twitter

JavaScript MV* Framework blog series, Getting Started with BackboneJS

JavaScript has become one of the most popular programming languages on the web. At first, developers didn’t take it seriously, simply because it was not intended for server side programming. It was a common misconception among professional developers that this language was meant for “Amateurs” as it focused only on User Interface. JavaScript got the spotlight when the usage of Ajax came to light and professional programmers gave importance to the responsiveness of the page. But now the language has become more popular than ever as the User Experience has become the key part of web development. Accessing web is not limited to browsers alone – there are lot many devices with varying screen sizes accessing the same content. With the rise of HTML5 and CSS3 the web will become more adaptive and responsive than ever and JavaScript plays a major role in it. It has also gained popularity in the server side programming which is made possible by NodeJS framework.

Increase in usage of JavaScript in modern applications demand developers to write maintainable code, separate concerns and improve testability. JavaScript is a “class” less language and it was not designed to support Object Oriented Programming, however you can achieve similar results by workarounds. So if you are a developer from an Object Oriented Programming world, then you will find it hard until you get used to it. Though there are some DOM manipulation libraries like jQuery which simplifies client side scripting of HTML, they actually do not solve the problem of effectively handling separation of concerns. You will end up writing lot many jQuery selectors and callbacks to keep the data in sync between the HTML, JavaScript and the data fetched from the server and we’re still stuck with the Spaghetti code.

Fortunately there are a few libraries and frameworks that come to rescue.

What is MV*?

Though all the frameworks out there somewhat tries to be MVC but they do not necessarily follow the pattern strictly. The idea of all the patterns is to separate Model, View and Logic that hooks the two behind which is the controller. However BackboneJS embeds the controller logic in the view itself though it efficiently maintains the separation. On the other side we do have other libraries which implement Model-View-Presenter(MVP) and Model-View-ViewModel(MVVM)pattern. For this reason we will refer these frameworks as MV* implementation.

I kick started a new blog series on my Infragistics Blog which will introduce you to BackboneJS, KnockoutJS, AngularJS and EmberJS JavaScript Frameworks.

Have a look at the first part of this series – Hello Backbone.

Have a feedback? Find me on twitter @nishanil

-Nish

Future belongs to ?

I happened to come across this wonderful image on the internet and it made me think for hours. Thought I must share this with you because it helped me and hope it helps you too!

Image Credits & original source: Forbes

In my opinion one inherent quality of a leader must be getting their hands dirty. When you set out to do that you will have a complete different perspective to your life. You will make things happen at every cost!

Be a leader, be a doer too!

-Nish

Getting Started With MVVM

I had a fantastic time delivering the webinar on Getting Started with MVVM in WPF & Silverlight.

Here’s the detailed post on my Infragistics blog. You will find the links to download the samples and slides.

-Nish-

Blend for Visual Studio Workspace (XAML)

In my previous post, I introduced you to Blend for Visual Studio and talked about Project templates and Item templates. Now that you are set with your templates its time to understand blend workspace better. This is going to be your playground for designing and creating some stunning animations. This post will concentrate on the workspace that Blend provides when your project is in XAML.

Blend Workspace:

There are two default workspaces in Blend

Deign Workspace
Animation Workspace

You can switch between the two by clicking on Window > Workspaces or by Ctrl+F11. These workspaces are customizable so you can change panel orientation, dock or float , or resize panels as per your need. You can also change the theme of the entire workspace by clicking Tools > Options > Workspace > Theme.

Panels:

Tools Panel

Tools panel contains the most handy tools for designing the UI elements. Some tools that are included are Selection, Direct Selection, Pan, Zoom, Eyedropper, Paint Bucket, etc.. You will notice that some of the section in tools panel have a small white triangle on the lower right corner. This is an indication that if you click and hold you will get additional option of related tools.

Assets Panel

Assets panel lists all the controls, styles, shapes, media, categories, and locations. Controls in assets also include Windows 8 specific controls like AppBar, GridView, FlipView etc. The search box in the assets panel is a handy feature. Alternatively you can access the Assets panel from the tools panel(the last button), it will contain your recently accessed assets.

Artboard:

Artboard is your work surface where you visually design a page of your application. On the top right corner you will find the view buttons. Use these to switch between Design, Code, and split views. On the bottom left corner you will find Artboard controls like Zoom, Show snap grid, Snap to gridlines and Turn off snapping to snaplines. Learn more about snapping here.

Objects and Timeline Panel:

Objects and Timeline panel helps you in viewing the hierarchical structure of objects in the artboard. You can modify them directly by dragging them from one position and dropping them to the desired position to form the intended structure. You can add animation to your application by simply creating a new Storyboard by clicking the + button. Storyboards are containers that hold animation timelines. Learn more about adding animations here.

Properties Panel:

If you are a Visual Studio developer then Properties panel is not a new thing to you! It is the place where you view and modify properties of an object that is selected on the artboard.

Few other panels, you should know about:

Projects Panel – Lists all the information about your project. Similar to Visual Studio Solutions Explorer
Resources Panel – Lists all the resources that are used in the current project. You can drag the resource to the artboard to apply them to an object
Results Panel – Results panel consists of two tabs. Error Tab – Displays build and parse errors. Output Tab – Provides build information when you build, rebuild, clean or test a project.

Summary

Windows 8 has been reimagined from chipset to the user experience and hence it demands every store app developers to follow strict UI design principles. Blend is a great tool to start with. It helps you design stunning apps and also eases out in wiring up animations. So go ahead sweat the details and create a fast & fluid app.

-Nish-

@nishanil on twitter

Windows 8 Developers – Do you “Blend for Visual Studio”?

Newest release of Blend now supports UX authoring for Windows 8 store apps both in XAML and HTML. The good news is that if you are a Windows 8 store apps developer then you can make use of Blend for Visual Studio 2012 which is included as part of the Visual Studio 2012 installation. More to it – you get this cake even if you download the Visual Studio Express 2012 for Windows 8 which is of-course free!

Windows 8 store apps much like Windows phone compels a developer to follow the Metro Design Principles. “Metro” as it was formally known as; “Windows 8-style UI” from now on!. With the UX guidelines in place for Windows 8 app development, it is also important to have an UX authoring tool like Blend to be part of the developer’s machine along with Visual Studio.

Blend clearly is a tool for building awesome User Interface Design. Blend lets designers focus on design while letting developers focus on logic of the UI. Blend until the last release was specifically targeted for designing front-end XAML based interfaces for WPF and Silverlight. But “Blend for Visual Studio” has clear targets – Designing Windows 8 Store Apps in XAML/HTML. It adds support to some awesome Win 8 features like App Bars, Grid view and View States. It also supports native C++ app development.

Beyond providing simple XAML/HTML designers and editing support, Blend gives you tools that help you configure UI elements, author complex animation sequences(XAML), create user controls from vector graphics(XAML), customize visual states(XAML) etc. In HTML it provides some cool way of editing Style Rules, CSS Properties, HTML attributes and Live DOM.

Getting Started with Blend:

Start a New Project and choose your design language first. If you are a web developer and starting a hands-on with Windows development then you can choose HTML and Javascript as your language. Like me if you are a XAML developer, then prefer XAML, you will feel at home.

Project Templates:

Blend provides you with templates to speed up your app development just like Visual Studio. Three important project templates available for both HTML and XAML are:

Blank App – As the name – just a blank project. I almost always use this template and then add Item templates based on my project needs.
Grid App – A project that displays groups of data in a grid format. If you are creating an app that displays group of items for e.g. a shopping app or a news app then start with this template. A grid app defaults to a home page that shows a list of groups – basically a set of items. When the user selects a particular group another page opens with group details which will have the list of items of the selected group.
Split App – A project that displays a master/detail list. For e.g. News app that contains headlines on top and when clicked displays the full content.
I almost always use Blank App as my project template and then add Item Templates based on my project need.

For HTML project there are two more templates you can make use of:

Fixed Layout App – Fixed Layout provides similar template to Blank App except that its viewport is fixed. If you are building apps that has just one interface for e.g. a simple game in Javascript, then make this choice.
Navigation App – Navigation App template contains Navigation Model which is recommended for Windows store apps. This template provides a home page by default. You can add more pages to it and make use of the navigation model to navigate between them.

Item Templates:

Project > Add New Item.

You can read more about Project templates and Item templates here.

Now that you have made your project choice, it is time to understand the Blend workspace. In my next blog post I will cover them.

-Nish-

WPF Datagrid – Update Source on fly with BindingList<T>

I was under an assumption that ObservableCollection<T> works perfect with WPF DataGrid until my friend wannabeegeek came up with a strange problem. The problem was making ObservableCollection<T> update the ItemSource on fly while editing them. What’s the big deal right? Wrong.

If you are using MVVM you do not want to wire up the event on DataGrid for an updated source. You will very much think that as long as you bind the collection to the ViewModel’s property and the mode is set to TwoWay – the source is updated automatically when items are edited in the DataGrid.

Your ViewModel will fire the property changed when the collection itself changes – that is if you replace the property itself. So if you want to know the change in items of the collection you need to subscribe to the CollectionChanged event of the ObservableCollection<T> property in your ViewModel.

MSDN says:

Occurs when an item is added, removed, changed, moved, or the entire list is refreshed.

But there is a problem with ObservableCollection.CollectionChanged event – it does not fire when your data item’s property changes. It fires only if the entire item is replaced. That is if you have a collection of an Entity “Expense” that has properties “Name” and “Amount” and if you simply change the Amount value in the grid it does not work! You need to replace the entire “Expense” object for you to see the collection change firing up.

After googling and reading msdn forums I gave up on ObservableCollection<T> and picked up BindingList<T> to do the job. Here is a demo that explains all the stuff:

.. and the screen shot:

I have a DataGrid that is simply bound to an “BindingList<Expense>”. Right below that I have a Total that is bound to the “TotalExpense” property. Now here is what I wanted to do – Whenever user edits the amount in the Grid the Total should be calculated as he/she tabs out.

.. and the ViewModel with the solution:

public class DataGridDisplayViewModel : ViewModelBase
    {
        private BindingList<Expense> _expenses;
        private double _totalExpense;
 
        public double TotalExpense
        {
            get { return _totalExpense = _expenses.Sum(x => x.Amount); }
            set { _totalExpense = value; }
        }
        
        public BindingList<Expense> Expenses
        {
            get { return _expenses; }
            set
            {
                _expenses = value;
                if (_expenses != null)
                {
                    _expenses.ListChanged += (o, e) => RaisePropertyChanged(() => this.TotalExpense);
                }
                RaisePropertyChanged(() => this.Expenses);
            }
        }
 
      
        public DataGridDisplayViewModel()
        {
            Expenses = new BindingList<Expense>
                            {
                                new Expense() {Name = "Gas", Amount = 1000},
                                new Expense() {Name = "Electricity", Amount = 1000},
                                new Expense() {Name = "Internet", Amount = 100},
                                new Expense() {Name = "Water", Amount = 100},
                                new Expense() {Name = "Misc", Amount = 1000}
                            };
        }
    }

The TotalExpense getter simply calculates the sum. And the ListChanged event of Expenses property simply notifies the change in TotalExpense.

.. and in the View:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <DataGrid ItemsSource="{Binding ExpensesOb, Mode=TwoWay}" AutoGenerateColumns="True" Grid.Row="0"/>
    <TextBlock Grid.Row="1">
        <Run Text="Total: "/>
        <Run Text="{Binding TotalExpenseOb}"/>
    </TextBlock>
</Grid>

That’s it!

Download the full code here. The code contains a tiny MVVM framework(inside core folder). – Read the disclaimer of the blog before you play with my code.

If you know to achieve this exact behavior with ObservableCollection do make a comment to this post and let me know!

/*Nish*/

Attached Behaviors & MVVM

When you think of MVVM and other patterns involved, it is often about separation of concerns as much as possible, unit testability and code maintainability. These type of patterns help in high quality of code and efficient development of business functionality. If you are new to MVVM then you may want to check out some of the articles by various intellects like Josh Smith, Laurent Bugnion and few others from XAML Disciples group(or just Google Smile ).

There are lot many frameworks on MVVM out there and to be frank there isn’t any right or the wrong one. You need to evaluate and decide on the one that fits your need! Most often people land up writing one on their own and in a way it is good!

I personally like a framework written by Brette Esterbrooks because it is a skeleton of code that you need and helps you get started. I tweaked it a bit(basically removed the ones that I don’t need) and thus the sample attached on this blog will have a tiny little framework of MVVM.

All it has is just a few helper classes:

ViewBase,
ViewModelBase,
RelayCommand,
ObservableObject.

Attached Behaviors

Attached behavior is achieved by simply attaching a behavior to a control that otherwise wouldn’t have anything of its own.

And as per Josh Smith-

The idea is that you set an attached property on an element so that you can gain access to the element from the class that exposes the attached property. Once that class has access to the element, it can hook events on it and, in response to those events firing, make the element do things that it normally would not do. It is a very convenient alternative to creating and using subclasses, and is very XAML-friendly.

Ever since I am hooked to MVVM pattern, I try and avoid all the code that usually goes to the code behind. For e.g. a click event handler usually written in the code behind can be omitted and a RelayCommand in the ViewModel be used instead.

But what would happen if you want to handle a double click or a focus event of a control? Just retaining those kind of events to the code behind defeats the pattern itself. And thus Attached Behavior comes to rescue! Demo included in this post explains the DragDropBehavior.

Before you go further with this approach, I just want you to know that you can achieve this by Behavior<T> class included in the system.windows.interactivity.dll. However this dll is available only through Expression Blend installation.

In my demo I have explained both of the implementation and it’s usage. Here we go!

Screenshot of the Demo:

IBehavior

The view models can hold the reference of this contract and change at runtime if needed:

public interface IBehavior
    {
        void OnEnabled(DependencyObject dependencyObject);
        void OnDisabling(DependencyObject dependencyObject);
    }

AttachedBehavior – A static class!

A static class AttachedBehavior is introduced which holds the attached properties “Behavior” and “IsEnabled”.

When toggled from Enabled state to Disabled State – OnDisabling() method of the IBehavior is called. Use this method to unwire your event handlers.

 /// <summary>
        /// Attach a Behavior of type IBehavior
        /// </summary>
        public static readonly DependencyProperty BehaviorProperty = DependencyProperty.RegisterAttached("Behavior", typeof(IBehavior), typeof(AttachedBehavior), new UIPropertyMetadata(null));
 
        /// <summary>
        /// Is Enabled, when set to true, fires Behaviors OnEnabled Method
        /// </summary>
        public static readonly DependencyProperty IsEnabledProperty = DependencyProperty.RegisterAttached("IsEnabled", typeof(bool), typeof(AttachedBehavior), new UIPropertyMetadata(false, OnIsEnabledChanged));
 
        /// <summary>
        /// Handles IsEnabledChanged
        /// </summary>
        /// <param name="d"></param>
        /// <param name="e"></param>
        private static void OnIsEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (d == null)
                return;
            var behavior = GetBehavior(d);
            if (behavior == null)
                return;
            if ((bool)e.NewValue)
                behavior.OnEnabled(d);
            else
                behavior.OnDisabling(d);
        }

DragDropBehavior Class

DragDropBehavior class implements the IBehavior. Have a look at the OnEnabled and OnDisabling methods.

 public class DragDropBehavior : IBehavior
    {
        #region Private Fields
        private Point _startPosition;
        private Point _mouseStartPosition;
        private TranslateTransform _translatetransform;
        private UIElement _associatedObject = null;
        private Window _parent = null;
        #endregion
 
        #region IBehavior Members
        public void OnEnabled(DependencyObject dependencyObject)
        {
            var uiElement = dependencyObject as UIElement;
            if (uiElement == null)
                return;
            
            _associatedObject = uiElement;
            //TODO: set the parent accordingly
             _parent = Application.Current.MainWindow;
            _translatetransform = new TranslateTransform();
            _associatedObject.RenderTransform = _translatetransform;
            _associatedObject.MouseLeftButtonDown += AssociatedObjectMouseLeftButtonDown;
            _associatedObject.MouseLeftButtonUp += AssociatedObjectMouseLeftButtonUp;
            _associatedObject.MouseMove += AssociatedObjectMouseMove;
        }
        
        public void OnDisabling(DependencyObject dependencyObject)
        {
            _associatedObject.MouseLeftButtonDown -= AssociatedObjectMouseLeftButtonDown;
            _associatedObject.MouseLeftButtonUp -= AssociatedObjectMouseLeftButtonUp;
            _associatedObject.MouseMove -= AssociatedObjectMouseMove;
            _translatetransform = null;
        }
        #endregion
 
        #region Event Handlers
        void AssociatedObjectMouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            _startPosition = _associatedObject.TranslatePoint(new Point(), _parent);
            _mouseStartPosition = e.GetPosition(_parent);
            _associatedObject.CaptureMouse();
        }
        
        void AssociatedObjectMouseMove(object sender, System.Windows.Input.MouseEventArgs e)
        {
            var positionDifference = e.GetPosition(_parent) – _mouseStartPosition;
            if(_associatedObject.IsMouseCaptured)
            {
                _translatetransform.X = positionDifference.X;
                _translatetransform.Y = positionDifference.Y;
            }
        }
 
        void AssociatedObjectMouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            _associatedObject.ReleaseMouseCapture();
            
        }
        
        #endregion
 
 
    }

HelloView

Attach is the behavior to the control that you want to drag:

 <ToggleButton Name="dragDropToggleButton" Command="{Binding ToggleDragDropBehavior}" Width="200">
                <ToggleButton.Style>
                    <Style TargetType="{x:Type ToggleButton}">
                        <Setter Property="Content" Value="Start Dragging"/>
                        <Style.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Content" Value="Stop Dragging"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ToggleButton.Style>
            </ToggleButton>
 
 
   
              <TextBlock Background="Gold"
                       Text="dragMe using attached behavior" 
                       Behaviors:AttachedBehavior.IsEnabled="{Binding IsDragBehaviorEnabled}" 
                       Behaviors:AttachedBehavior.Behavior="{Binding DragDropBehavior}"
                       Canvas.Left="32"
                       Canvas.Top="31" />

HelloViewViewModel

And finally the ViewModel that set’s the DragDropBehavior:

public class HelloViewViewModel : ViewModelBase
    {
        private IBehavior _dragDropBehavior;
        private bool _isDragBehaviorEnabled;
 
        public bool IsDragBehaviorEnabled
        {
            get { return _isDragBehaviorEnabled; }
            set { _isDragBehaviorEnabled = value; RaisePropertyChanged(()=> this.IsDragBehaviorEnabled); }
        }
 
        public IBehavior DragDropBehavior
        {
            get { return _dragDropBehavior; }
            set { _dragDropBehavior = value; RaisePropertyChanged(() => this.DragDropBehavior); }
        }
 
        public RelayCommand ToggleDragDropBehavior { get; set; }
 
        public HelloViewViewModel()
        {
            DragDropBehavior = new DragDropBehavior();
            ToggleDragDropBehavior = new RelayCommand(() => 
            {
                IsDragBehaviorEnabled = !IsDragBehaviorEnabled;
            });
 
        }
    }

That’s It – you are done!! Refer DragDropBehavior2 class for implementation using Behavior<T>.

Download the Code – Read the Disclaimer of this blog before you work with this code!

/*Nish*/

Windows 8 on VirtualBox– File Sharing(Guest Additions doesn’t work)

Guest Additions on Virtual Box can be installed by changing compatibility to Windows 7 but that doesn’t mean it can be made to work. Yeah that’s where I too got stuck and my hunt for a fix to it also stopped when I read this forum.

I found few others who have tried complicated file sharing techniques, for e.g. they created a secondary virtual hard drive and put files into it. However being working on Windows for more than a decade, I do believe there should be a simple way to achieve it. After all they are two different windows machines on the network.

Well what would you do to access a share drive on another system? Start->Run-> and type “\\machine-name\share” and hit enter? That wouldn’t work because your host machine name will not be recognized by your virtual machine since they are on a different network group.

Now here is the solution: Go ahead and figure out the IP address of your host machine(ipconfig) and try accessing the share by its IP address instead of the machine name. That works!

Things are simple, we complicate it most of the time.

/* Nish */