Thursday, June 20, 2013

karma webstorm configuration

Versions : WebStorm 6.0.2, Karma 0.8.5


In this short post I'll just explain my WebStorm configuration to run my Karma tests inside WebStrom. It's quite simple but can be useful.


These steps assume you can already use karma start at the command line to start watching your project and run your tests. If you don't and wish I'd write a post on that, just let me know in the comments...


1 - Create a new Run configuration for Node.js.
2 - Set the Working Directory to your project root.
3 - Set Path to Node App JS File to the Karma executable.
Type which karma (or where start in Windows) at the command prompt to find Karma's location.
4 - Set Application Parameter to the value : start
5 - Click Ok.
6 - Select that config in the config drop down.
7 - Click run and see your Karma results right in WebStorm!

Have fun!

Monday, February 4, 2013

How to synchronize Sublime Text settings across several computers

This will synchronize all settings and installed packages across multiple machines using Dropbox.

On the first computer

  • Close Sublime Text 2
  • Copy C:\Users\you\AppData\Roaming\Sublime Text 2\Packages to your dropbox folder (c:\Dropbox\Sublime Text 2\Packages)

On all computers (including first computer)

  • Delete the Packages folder C:\Users\you\AppData\Roaming\Sublime Text 2\Packages
  • Create a link to your Dropbox folder :
    cd C:\Users\you\AppData\Roaming\Sublime Text 2
    mklink /D Packages "c:\Dropbox\Sublime Text 2\Packages"
  • Start sublime

Note: It works the same way on Unix computers using the ln command. On Linux  the path is ~/.config/Sublime Text 2/Packages.

Thursday, June 14, 2012

Simple-expand: simple jQuery plug-in to expand/collapse elements

Simple-expand, as its name implies, the simplest collapse/expand solution I could think of. It works out of the box without any configuration. All you need is:
<a class="expander" href="#">click me</a>
<div class="content">
    content to show/hide.
</div>
And one line of javascript:
$('.expander').simpleexpand();
View Demos

Tuesday, May 29, 2012

Responsive full height (equal height) columns using the faux columns css technique

Source code on GitHub

First things first, here is  the source code.
View project on GitHub

Introduction

In this tutorial I'll show you how to create responsive full height columns using the "faux columns" technique.
There are 3 main concepts in that:
  1. Full/Equal height: When you float an element, its height is equal to its content; not to its "context". This causes a problem if you want a sidebar that has a different background-color than the main area because the background will not extend to the same height as the other column(s).
  2. Faux column technique: This is a technique that uses a background-image to create an effect that looks like the column extends to the full height. This technique has been documented several times but this article is a bit different because of the following point.
  3. Responsive: With responsive design, the width of the page set to a fixed size (such as 960px). Instead the content of the page adapts as your make your browser window wider or narrower.
So this tutorial is about using the faux column technique but with the necessary tweaks to make it work in a responsive layout.

The HTML:

The page has a header div, a main div and a footer div. The main div has an article div and a sidebar div on the right side.
<body>
    <div class="page">
        <div>
            header 
        </div>
        <div class="main clearfix">
            <div class="article">
                Main content
            </div> 
            <div class="sidebar">
                sidebar
            </div>
        </div>
        <div>
            Footer
        </div>
    </div>
</body>

The CSS:

1 - Define the clearfix class to help us clear the float.

There are several ways to clear floats. The technique I use here it the one used in the HTML 5 Boilerplate project. See this blog post to learn about that specific technique.

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }  

2 - Define the two columns using a 70/30 ratio.

.article {
    float:left;
    width:69%;
    padding-right:1%;
    overflow:hidden;
}

.sidebar {
    float:right;
    width:28%;
    padding-left:1%;
    padding-right:1%;
    overflow:hidden;
}

Setting the overflow to hidden is not mandatory but I think it looks better when you resize the browser so small that content cannot be wrapped.

3 - Add the faux column effect by setting a background image

This is the key part.

.main {
    background: url(opaque-0.70-5000.png)  
                repeat-y                   
                70%                        
                top;                       
}

Note that:
  • The background image is set for the main div; not the sidebar div.
  • The background image is 5000px wide by 1px high.
  • The width of the image determines the maximum width that your page will support; beyond that point the faux column effect will break (you can use a larger image if you want but 5000px is really wide).
  • The height of the image does not matter. If you use an opaque color, then 1px is enough. If you want to use a pattern then you can use a taller image.
  • In the image, the column start at 70% of the width of the image, at pixel 3500 (5000 * 0.7 = 3500).
  • The 70% value in the css is the position of the image. Use the same value as the ratio.
This works with any image width. The only thing that matters is you have to start the column effect at the right pixel. For example, if you have a 3000 pixel wide image, your column effect should start at pixel 2100 (3000 * 0.7 = 2100). This example does not fill the right side; there is just 1 pixel at position 2100, which create a vertical line.

.main {
    background: url(line-0.70-3000.png) 
                repeat-y                  
                70%                       
                top;                      
}

4 - Set a max width for page and add some spacing

As stated in the previous step, the width of the image determines the maximum width the page support. To ensure it will not break beyond that point I set a max-width on the page div. If you don't like the way your site looks when it is very wide, you can set a max-width of 1600px (that's what I usually do).

.page {
    width:75%;         
    margin:auto;       
    max-width:5000px;  
}

5 - Responsive with media queries

You can use css media queries to change the ratio of the columns based on the browser width and for the faux column to work, you will have to change the background image too. For example, if you want a 75/25 ratio when the page is narrower than 600px, you have to:
  1. Create a background-image with a ratio of 75/25. For a 600px wide image, the column must start at pixel 450 (6000 * 0.75 = 450).
  2. Add media query, change background-image and change the column ratio:
@media screen and (max-width: 600px)
{
    .page {
        width:95%;          
        margin:auto;        
        max-width:600px;              
    }
                
    .main {
        background: url(opaque-0.75-600.png)
                    repeat-y               
                    75%                    
                    top;                   
    }

    .article {
        float:left;
        width:74.5%;
        padding-right:0.5%;
    }

    .sidebar {
        float:right;
        width:24%;
        padding-left:0.5%;
        padding-right:0.5%;
        overflow:hidden;
    }
}

Conclusion

I learned a lot in the process of writing this post. I don't consider myself an expert on the matter. Don't hesitate to leave comments if you think the solution can be improved and I will update the post accordingly.

Don’t forget that you can browse the code on GitHub.

Tuesday, May 22, 2012

Build Twitter Bootstrap on Windows

This post is written using these tools and libraries: Twitter Bootstrap 2.0.3 | nodejs version 0.6.18 | lessc nodejs module version 1.3.0 | uglifyjs nodejs module version 1.2.6.


Intro
In this very short post I explain how to build twitter bootstrap on windows.


1 - Get the source from github
If you go to the Twitter Bootstrap main page there are several download options. In this case you want to download the source code. Click the View project on GitHub button or visit https://github.com/twitter/bootstrap/ and download the latests version using the ZIP button (or clone the repo using git). Extract the ZIP.

2- Install nodejs and the necessary modules
2.1 - Install nodejs (see Install Node on Windows with NPM tutorial)
2.2 - Open a command prompt and CD to the folder where your extracted the source
2.3 - Install lessc: npm install lessc
2.4 - Instal uglifyjs: npm install uglify-js


3 - Create make.bat
Create make.bat at the root of the folder where you downloaded the source.  Please note that the batch file deletes and recreates a "build"  in your working folder. I know this version is not as complete as the real makefile but that is what I use now.

make.bat

@echo off
rd build /s /q
mkdir build\img
mkdir build\css
mkdir build\js

copy img\* build\img

call .\node_modules\.bin\lessc -x less\bootstrap.less > build\css\bootstrap.min.css

copy /B js\bootstrap-transition.js+js\bootstrap-alert.js+js\bootstrap-button.js+js\bootstrap-carousel.js+js\bootstrap-collapse.js+js\bootstrap-dropdown.js+js\bootstrap-modal.js+js\bootstrap-tooltip.js+js\bootstrap-popover.js+js\bootstrap-scrollspy.js+js\bootstrap-tab.js+js\bootstrap-typeahead.js build\js\bootstrap.js

call .\node_modules\.bin\uglifyjs --ascii bootstrap\js\bootstrap.js > build\js\bootstrap.min.js

4 - Try it using one of the examples from the Twitter Bootstrap examples page

4.1  - Run make.bat
4.2 - Save one of the twitter bootstrap examples by right clicking on it and selecting "Save as link..." and save it to your source folder.
4.3 - Open the example file in your favorite text editor.
4.4 - Locate this line <link href="../assets/css/bootstrap.css" rel="stylesheet"> and replace it with <link href="/css/bootstrap.min.css" rel="stylesheet">
4.5 - Locate this line  <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> and replace it with <link href="/css/bootstrap-responsive.min.css" rel="stylesheet">
4.6 - Locate the scripts a the bottom of the file
4.7 - Replace the reference to jquery with: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
4.8 - Replace all references to individual bootstrap javascript files by a single reference to bootstrap.min.js:  <script src="/js/bootstrap.min.js"></script>
4.9  - Open the file in your Web browser.


Hope this helps

Thursday, May 17, 2012

Install Node on Windows with NPM tutorial

This post is written for nodejs version 0.6.18. 


Intro:

It took me a while to figure out a few things after installing node so this is just a few notes to help you get started.

Steps:

- Download and install node from http://nodejs.org

- Open a command-line in window using Run As Administrator

- make a test folder and go to that folder: c:\node_test\

- Create a hello world script: echo console.log("Hello World") > hw.js

- Run the test: node hw.js
Expected output: Hello World
Check: If you see an error here, something is wrong with your nodejs installation. Check your path maybe...

- Enter npm install less  to install the less module. It does not really matter what module you install, this just proves that the package manager called NPM works.
Expected outcome: NPM downloading modules
Check: If you see an error here, something is wrong with your nodejs installation or with NPM.

- Your working directory should have a folder node_modules and a sub folder less.
Check: If you don't have those folders then something is wrong with where NPM installs modules.

- To test the module: node node_modules\less\bin\lessc -help
Expected output: a help message from less
Check: If you get an error, something is wrong with where or how NPM installs modules.

If you got to this point without any errors, you are good to go.

I hope this helps

- Sly

Saturday, February 20, 2010

No configuration file with NHibernate

Note: This post is based on NHibernate version 2.1 with Fluent NHibernate version 1.0 RTM.

In my previous post about Fluent NHibernate, I explained how to use Fluent NHibernate to replace your NHibernate mapping files (.hbm.config) with c# code. In this post I'll show you how to also replace the  NHibernate configuation file (.cfg.xml) with code.

This time you don't need to add references to any special library. Converting the config file to code is very, very easy. The config file is made up of a bunch of dictionary entries where each entry has a key (the NHibernate setting name) and a value (the actual value for that setting). The NHibernate has a configuration API that works the same way. So you can just take out the line that loads your config file (config.Configure("PocoLib.cfg.xml");) with a series of calls config.Properties.Add().

Before (with a .cfg.xml file) After (with code)

<hibernate-configuration xmlns="urn:nhibernate-configuration-2.2">
  <session-factory>
    <property name="connection.provider">
      NHibernate.Connection.DriverConnectionProvider
    </property>
    <property name="connection.driver_class">
      NHibernate.Driver.SqlClientDriver
    </property>
    <property name="connection.connection_string">
      Server=xp-octosql;database=PocoLib;Integrated Security=SSPI;
    </property>
    <property name="dialect">
      NHibernate.Dialect.MsSql2005Dialect
    </property>
    <property name="show_sql">
      true
    </property>
    <property name='proxyfactory.factory_class'>
      NHibernate.ByteCode.LinFu.ProxyFactoryFactory, NHibernate.ByteCode.LinFu
    </property>
    <property name="adonet.batch_size">16</property>
  </session-factory>
</hibernate-configuration>

Configuration config = new Configuration();

config.Properties.Add("connection.provider", "NHibernate.Connection.DriverConnectionProvider, NHibernate");

config.Properties.Add("connection.driver_class", "NHibernate.Driver.SqlClientDriver");

config.Properties.Add("dialect", "NHibernate.Dialect.MsSql2005Dialect");

config.Properties.Add("connection.connection_string", "Server=xp-octosql;database=PocoLib;Integrated Security=SSPI;");

config.Properties.Add("show_sql", "true");

config.Properties.Add("proxyfactory.factory_class", "NHibernate.ByteCode.LinFu.ProxyFactoryFactory, NHibernate.ByteCode.LinFu");

config.Properties.Add("adonet.batch_size", "16");

  Fluently.Configure(configuration)
        .Mappings(m => m.FluentMappings.AddFromAssemblyOf<CustomerCRUDTests>())
        .BuildConfiguration();

_factory = config.BuildSessionFactory();

Saturday, December 26, 2009

Fluent NHibernate Tutorial

Note: This post is based on NHibernate version 2.1 with Fluent NHibernate version 1.0 RTM.

This tutorial introduces Fluent NHibernate. Fluent NHibernate is a "code oriented" alternative to configuring NHibernate maping using XML configuration files.

This tutorial is based on same project entities defined in my previous NHibernate tutorial. At end of this tutorial, you will have the exact same result but with entities configured using Fluent NHibernate instead of an XML configuration file.

1. Open you the Solution PocoLib.

2. Add a reference to FluentNHibernate in the PocoLibTests

3. Add a new class named CustomerMap.cs to the PocoLibTests project. The source code for CustomerMap.cs is in the left column in the table below. The code speaks for itself; it's almost identical in structure to the XML configuration file.

CustomerMap.cs Customer.hbm.xml

using FluentNHibernate.Mapping;
using PocoLib;

namespace PocoLibTests
{
  public class CustomerMap : ClassMap<Customer>
  {
    public CustomerMap()
    {
      Not.LazyLoad();

      Id(cust => cust.ID, "CustomerID");

     
      Map(cust => cust.FirstName);
      Map(cust => cust.LastName);
      Map(cust => cust.BirthDate);

      Component<Address>(cust => cust.Address,
        component =>
        {
          component.Map(address => address.Street);
          component.Map(address => address.State);
          component.Map(address => address.Country);
          component.Map(address => address.ZipCode);
        });
    }
  }
}








<class name="Customer"
        lazy="false">

  <id name="ID" column="CustomerID">
    <generator class="native"/>
  </id>

  <property name="FirstName"/>
  <property name="LastName"/>
  <property name="BirthDate"/>

  <component name="Address">


    <property name="Street"/>
    <property name="State"/>
    <property name="Country"/>
     <property name="ZipCode"/>
  </component>

</class>

4. Now, open the test class. We must change the Setup method and replace the line that loads the the configuration from Customer.hbm.xml to load it using Fluent Nhibernate.

[SetUp]
public void Setup()
{
    Configuration configuration = new Configuration();
    configuration.Configure("PocoLib.cfg.xml");

    configuration.AddXmlFile("Customer.hbm.xml");

    Fluently.Configure(configuration)
        .Mappings(m => m.FluentMappings.AddFromAssemblyOf<CustomerCRUDTests>())
        .BuildConfiguration();

    _factory = configuration.BuildSessionFactory();
}

5. Delete the Customer.hbm.xml file from the PocoLib project and from the /debug/bin/ folder of the PocoLibTests project.

6. You can now run the tests tests.

That's it for this quick Fluent NHibernate tutorial.

Sunday, November 8, 2009

LINQ to NHibernate Tutorial

Note: This post applies to NHibernate 2.1 with LINQ to NHibernate version 1.0.

Starting with LINQ to NHibernate is really simple; you just have to add a reference to NHibernate.Linq.dll to your host project (a test project, an ASP.NET app).

Here is a unit test to demonstrate a simple LINQ query.  This test uses the same entities defined in my previous NHibernate tutorial.

[Test]
public void SelectWithPredicate()
{
    using (var session = _factory.OpenSession())
    {
        //Act
        var customers = from cust in session.Linq<Customer>()
                        where cust.LastName.StartsWith("St")
                        select cust;
        //Assert
        Assert.AreEqual(1, customers.Count());
    }
}

The Linq() method is an extension method defined in NHibernate.Linq.dll. It provides the entry point to execute Linq queries on your NHibernate entities. When you run that test, NHibernate generates the following statement:

SELECT count(*) as y0_ FROM Customer this_
WHERE this_.LastName like @p0;@p0 = 'St%'

In an upcoming post I will explore the capabilities and limitations of LINQ to NHibernate. For now, here is the full test class I used to discover LINQ to NHibernate:

using System.Diagnostics;
using System.Linq;
using NHibernate;
using NHibernate.Cfg;
using NHibernate.Linq;
using NUnit.Framework;
using PocoLib;

namespace PocoLibTests
{
    [TestFixture]
    public class CustomerLINQTests
    {
        private ISessionFactory _factory;

        [SetUp]
        public void Setup()
        {
            Configuration configuration = new Configuration();
            configuration.Configure("PocoLib.cfg.xml");
            configuration.AddXmlFile("Customer.hbm.xml");

            _factory = configuration.BuildSessionFactory();

            SetupDatabase();
        }

        [TearDown]
        public void TearDown()
        {
            PurgeDatabase();
        }

        [Test]
        public void SelectAllCustomers()
        {
            using (var session = _factory.OpenSession())
            {
                //Act
                var customers = from cust in session.Linq<Customer>()
                                select cust;
                //Assert
                Assert.AreNotEqual(4, customers.Count());
            }
        }

        [Test]
        public void SelectWithPredicate()
        {
            using (var session = _factory.OpenSession())
            {
                //Act
                var customers = from cust in session.Linq<Customer>()
                                where cust.LastName.StartsWith("St")
                                select cust;
                //Assert
                Assert.AreEqual(1, customers.Count());
            }
        }

        private void SetupDatabase()
        {
            using (var session = _factory.OpenSession())
            {
                Customer c = new Customer();
                c.FirstName = "Mike";
                c.LastName = "Laroco";
                c.Address.Country = "USA";
                session.SaveOrUpdate(c);

                c = new Customer();
                c.FirstName = "Bubba";
                c.LastName = "Stuart";
                c.Address.Country = "USA";
                c.Address.State = "Florida";
                session.SaveOrUpdate(c);

                c = new Customer();
                c.FirstName = "Ricky";
                c.LastName = "Carmichael";
                c.Address.Country = "USA";
                c.Address.State = "Florida";
                session.SaveOrUpdate(c);

                c = new Customer();
                c.FirstName = "Jean-Sebastien";
                c.LastName = "Roy";
                c.Address.Country = "Canada";
                c.Address.State = "Quebec";
                session.SaveOrUpdate(c);

                session.Flush();
            }

            Debug.WriteLine("end prepare data");

        }

        private void PurgeDatabase()
        {
            using (var session = _factory.OpenSession())
            {
                session.Delete("from Customer");
                session.Flush();
            }
        }

    }
}

Thanks

Thursday, November 5, 2009

NHibernate Tutorial

Note: This post is based on NHibernate version 2.1.

This is a tutorial to get you started with NHibernate.

At the end of this tutorial you will have:

  • A class library project containing one entity
  • A NHibernate configuration file
  • A NHibernate mapping file to map your entities
  • A database running on SQL Server 2005 (changing to another version of SQL server is very simple)
  • A NUnit test project

1 - Create a new class library project named PocoLib in a new solution. This project will contain your entity classes.

2 - In the same solution, create a new class library project called PocoLibTests

3 - In the PocoLibTests project add references to

  • PocoLib project
  • nunit.framework.dll
  • nhibernate.dll
  • LinFu.DynamicProxy
  • NHibernate.ByteCode.LinFu

Note: You do not have to add any references to nhibernate dlls in the PocoLib project. Your entity classes will not have any knowledge of NHibernate; they are real POCO. If you eventually use your entities in a Web app or Web Services project (most likely), it will be that app that will need those same references (except for Nunit of course).

4 - In PocoLibTests, rename class1.cs to CustomerCRUDTests.cs to your project.

using NHibernate;
using NHibernate.Cfg;
using NUnit.Framework;
using PocoLib;

namespace PocoLibTests
{
    [TestFixture]
    public class CustomerCRUDTests
    {

        [Test]
        public void Insert()
        {
            Customer c = new Customer()
                { FirstName = "Bubba", LastName = "Stuart" };

            c.Address.Country = "USA";
            c.Address.State = "Florida";

            using (ISession session = _factory.OpenSession())
            {
                session.SaveOrUpdate(c);
                session.Flush();
            }
        }
    }
}

This test does not compile for now but that gives you an idea of what we are going to work with.

5 - In the PocoLib project rename class1.cs to Address.cs:

namespace PocoLib
{
    public class Address
    {
        private string _zipCode;
        private string _country;
        private string _state;
        private string _street;

        public string Street
        {
            get { return _street; }
            set { _street = value; }
        }

        public string State
        {
            get { return _state; }
            set { _state = value; }
        }

        public string Country
        {
            get { return _country; }
            set { _country = value; }
        }

        public string ZipCode
        {
            get { return _zipCode; }
            set { _zipCode = value; }
        }
    }
}

6 - In the PocoLib project add a new class named Customer.cs:

using System;
using System.Collections.Generic;

namespace PocoLib
{
    public class Customer
    {
        private int _iD;
        private DateTime? _birthDate;
        private string _lastName;
        private string _firstName;
        private Address _address = new Address();

        public int ID
        {
            get { return _iD; }
            set { _iD = value; }
        }

        public string FirstName
        {
            get { return _firstName; }
            set { _firstName = value; }
        }

        public string LastName
        {
            get { return _lastName; }
            set { _lastName = value; }
        }

        public DateTime? BirthDate
        {
            get { return _birthDate; }
            set { _birthDate = value; }
        }

        public Address Address
        {
            get { return _address; }
            set { _address = value; }
        }

    }
}

As you can see, the model is simple: a customer has a few properties and an Address.

Note: At this point, the test project still does not compile because the _factory is not defined yet. We will define it really soon.

7 - Create a new database with a Customer table

CREATE DATABASE PocoLib
GO

USE PocoLib
GO

CREATE TABLE [dbo].[Customer](
[CustomerID] [int] IDENTITY(1,1) NOT NULL,
[FirstName] [varchar](50) NULL,
[LastName] [varchar](50) NOT NULL,
[BirthDate] [datetime] NULL,
[Street] [varchar](50) NULL,
[State] [varchar](50) NULL,
[Country] [varchar](50) NULL,
[ZipCode] [varchar](50) NULL)
GO

Notice how we are using two classes (Customer and Address) but a single Customer table. It is much cleaner to use two classes at the class design level. But since it is a one-to-one relationship, saving the address in the same table as customer makes total sense (it's simpler, faster and feel more natural).

8 - In the PocoLib project, add an xml file named PocoLib.cfg.xml. That will be your main NHibernate configuration file. It's arguable whether this file belongs to the PocoLib class library or to the host application (the test project in this case), but for now let's put it in PocoLib.

<hibernate-configuration xmlns="urn:nhibernate-configuration-2.2">
  <session-factory>
    <property name="connection.provider">
      NHibernate.Connection.DriverConnectionProvider
    </property>
    <property name="connection.driver_class">
      NHibernate.Driver.SqlClientDriver
    </property>
    <property name="connection.connection_string">
      Server=localhost;database=PocoLib;Integrated Security=SSPI;
    </property>
    <property name="dialect">
      NHibernate.Dialect.MsSql2005Dialect
    </property>
    <property name="show_sql">
      true
    </property>
    <property name='proxyfactory.factory_class'>
      NHibernate.ByteCode.LinFu.ProxyFactoryFactory, NHibernate.ByteCode.LinFu
    </property> 
  </session-factory>
</hibernate-configuration>

  • Change the connection string (line 10) if needed.
  • If you are not on SQL Server 2005, you can change the other settings. For instance, set the dialect setting to Nibernate.Dialect.MsSql2008Dialect if your on SQL Server 2008.

9 - In the PocoLib project, add an xml file named Customer.hbm.xml. That will be mapping file used to tell NHibernate where to persist and load our entities. (The same question about where this file should reside applies here too).

<?xml version="1.0" encoding="utf-8" ?>
<hibernate-mapping xmlns="urn:nhibernate-mapping-2.2"
                   assembly="PocoLib"
                   namespace="PocoLib">

  <class name="Customer" lazy="false">
    <id name="ID" column="CustomerID">
      <generator class="native"/>
    </id>
    <property name="FirstName"/>
    <property name="LastName"/>
    <property name="BirthDate"/>
    <component name="Address">
      <property name="Street"/>
      <property name="State"/>
      <property name="Country"/>
      <property name="ZipCode"/>
    </component> 
  </class>
</hibernate-mapping>

I think the content of the file pretty much speaks for itself but here are a few things worth mentioning:

  • By default, NHibernate assumes that your database column names match your class property names.
  • The <id> element identifies the primary key column. The <generator class="native"> indicates that SQL Server will generate the primary key value; not NHibernate.
  • The Customer is defined as a <class> in the mapping. This is what NHibernate calls an entity.
  • The Address is declared inside the Customer as an<component> element. That basically means that the Address is a part of the Customer and it can't live without a customer. NHibernate components are also know as Value Object in Domain Driven Design.

10 - Copy the PocoLib.cfg.xml and Customer.hbm.xml to the test library \bin\debug\ folder.

11 - Add the missing _factory to the test class. Add this code at the top of the test class:

        private ISessionFactory _factory;

        [SetUp]
        public void Setup()
        {
            Configuration configuration = new Configuration();
            configuration.Configure("PocoLib.cfg.xml");
            configuration.AddXmlFile("Customer.hbm.xml");

            _factory = configuration.BuildSessionFactory();
        }

  • The first line create a Configuration object.
  • The second line loads the PocoLib.cfg.xml.
  • The 3rd line loads the mapping file for the Customer class.
  • The 4th line create a factory that we will use to create NHibernate Sessions (a connection)

13 - Run the Insert() test. Go look in the database and be amazed (or not). Notice how SQL statements are written to the output window (If you are using Test Driven at least). You can turn that on or off by changing the <property name="show_sql">true</property> in the .cfg.xml file.

12 - Here are the other CRUD tests. I'm sorry but I don't feel like writing all the Asserts; this is just a test project to experiment with the CRUD operations.

using System.Collections.Generic;
using NHibernate;
using NHibernate.Cfg;
using NUnit.Framework;
using PocoLib;

namespace PocoLibTests
{
    [TestFixture]
    public class CustomerCRUDTests
    {
        private ISessionFactory _factory;

        [SetUp]
        public void Setup()
        {
            Configuration configuration = new Configuration();
            configuration.Configure("PocoLib.cfg.xml");
            configuration.AddXmlFile("Customer.hbm.xml");

            _factory = configuration.BuildSessionFactory();
        }

        [Test]
        public void Insert()
        {
            Customer c = new Customer()
               { FirstName = "Bubba", LastName = "Stuart" };

            c.Address.Country = "USA";
            c.Address.State = "Florida";

            using (ISession session = _factory.OpenSession())
            {
                session.SaveOrUpdate(c);
                session.Flush();
            }
        }

        [Test]
        public void Update()
        {
            // Arrange : Create customer in order to update it
            Customer c = new Customer() 
                { FirstName = "Bubba", LastName = "Stuart" };
            using (ISession session = _factory.OpenSession())
            {
                session.SaveOrUpdate(c);
                session.Flush();
            }
            int id = c.ID;

            //Act : update
            using (ISession session = _factory.OpenSession())
            {
                c = session.Get<Customer>(id);
                c.FirstName = "James";
                session.SaveOrUpdate(c);
                session.Flush();
            }
        }

        [Test]
        public void Delete()
        {
            // Arrange : Create customer in order to delete it
            Customer c = new Customer()
                { FirstName = "Bubba", LastName = "Stuart" };
            using (ISession session = _factory.OpenSession())
            {
                session.SaveOrUpdate(c);
                session.Flush();
            }
            int id = c.ID;

            //Act : Delete
            using (ISession session = _factory.OpenSession())
            {
                c = session.Get<Customer>(id);
                session.Delete(c);
                session.Flush();
            }
        }

        [Test]
        public void Query()
        {
            // Arrange : Create a customer in order to query it
            Customer c = new Customer() 
                 { FirstName = "Bubba", LastName = "Stuart" };
            using (ISession session = _factory.OpenSession())
            {
                session.SaveOrUpdate(c);
                session.Flush();
            }

            IList<Customer> list = null;

            //Act:
            using (ISession session = _factory.OpenSession())
            {
                list = session.CreateQuery(
                   "from Customer where LastName is not null")
                  
.List<Customer>();
            }

            //Assert:
            Assert.AreNotEqual(0, list.Count);

        }

    }
}

I hope this helps.

BTW: I started learning NHibernate just a few days ago. I'm wrote this post to serialize what I have learned so far (and hopefully help people at the same time). I'm sure this approach is not ideal. If you have comments on how I could improve this tutorial, just let me know.

Thanks

Sunday, November 1, 2009

Monotouch debugger now avaliable

This very short post is simply to announce that monotouch now has a debugger (breakpoints, watch) that works on the device and in the simulator.

Kudos to the monotouch team!

jQuery plug-in to fix the width=100% problem

While making the layout for a new app I’m writing, I discovered what I call the Box model 100% width bug.

The box model spec states that the resulting width of an element whose width is 100% will equal to:

calculated width = (inner width of parent) + (element's padding) + (element's margin)

That means that given this html:

<div id="container" style="width:400px;">
  <div id="div1" 
     style="background-color:Green; width:100%; margin-left:10px; padding-left:10px;">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  </div>
</container>

The div1 's total width will be 420px; not 400px as you would want.

A solution is to compensate by wrapping div1 in a container that has a padding-left equal to the element's (2 * margin) + (padding):

<div id="container" style="width:400px;">
  <div id="wrapper" style="padding-left:30px;">
    <div id="div1" 
     style="background-color:Green; width:100%; margin-left:10px; padding-left:10px;">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
  </div>
</container>

Why add an extra element instead of modifying the container div? Because in a real cases, the container div will probably be many levels above the element that you are trying to style. The wrapper div used to compensate should be the immediate parent of that element.

I wrote a jQuery plugin to automatically inject the wrapper div to elements. Here is how to use it:

$(function() {
    $("#div1").fixFullWidth();
})

The plug-in iterates  through at all elements selected by the jQuery selector and wraps each of them in a div that has the correct padding-left value.

Here is the plug-in source. BTW, I'm not a javascript expert so if you come up with a better implementation just let me know and I will update this post.

$.fn.fixFullWidth = function() {
    //create the endsWith function of the String type
    String.prototype.endsWith = function(str) {
        return (this.match(str + "$") == str);
    }

   this.each(function() {
        var elemMarginValue = $(this).css('margin-left');
        var elemMargin = 0;
        if (elemMarginValue.endsWith("px")) {
            elemMargin = parseInt( elemMarginValue.replace('px', ''));
        }
        var elemPaddingValue = $(this).css('padding-left');
        var elemPadding = 0;
        if (elemPaddingValue.endsWith("px")) {
            elemPadding = parseInt( elemPaddingValue.replace('px', ''));
        }
        var padding_left = (elemMargin * 2) + elemPadding;
        if (padding_left != 0) {
            $(this).wrap('<div class="fixFullWidth" style="padding-right:' + padding_left + 'px;"></div>');
        }
    });
    return this;
};

I hope this helps.

Saturday, October 3, 2009

How to fix MonoDevelop code completion problem?

At the time of this post, there is a known issue with MonoDevelop's Code Completions feature. At some point, code completion stops working and you get "Gathering class information..." in the code completion drop down list.

Before you apply this workaround, ensure that you have the latest build of MonoDevelop.

Workaround: Manually clear the code completion cache

On a Mac:

  • Close MonoDevelop
  • Open the Terminal application
  • Run this command: rm -r ~/.config/MonoDevelop/CodeCompletionData
  • Restart MonoDevelop
Note: For some reason, it did not work on my first attempt. MonoDevelop was still "Gathering class information", I listed the content of the CodeCompletionData folder and no files would appear. I did the same procedure again and it worked. So you might have to do this more than once.

I hope this helps.

Thanks to @mikebluestein and @mikrueger on twitter for their help.

Tuesday, September 29, 2009

iPhone programming in C# with MonoTouch

Two weeks ago Novell released MonoTouch (www.monotouch.net), a SDK to develop in .Net for the iPhone.

I started programming with MonoTouch two days ago. So far I must say I'm impressed. I had absolutely no experience on a Mac before.


Here is a summary of the experience with MonoTouch:

- You need a Mac on which you install:

  • iPhone SDK from Apple (iPhone Library and Interface Builder)
  • Mono Framework
  • MonoDevelop IDE
  • MonoTouch SDK

- You create user interfaces using Interface Builder, the standard User Interface designer program for Mac/iPhone apps that is part of the SDK.


- You code your logic in C# using an IDE called MonoDevelop which is somewhat similar to Visual Studio and includes code completion. You have access to the C# 3.0 (LINQ, Lambda, Generics) features, Garbage Collection (not offered in the native iPhone SDK) and most general purpose .net APIs. They have wrapped a large portion of the iPhone SDK with a C# friendly API style.


Overall, the experience is quite good. There is one important issue though; there is no debugger (no breakpoints, no watch window, no call stack). You must debug using Console.WriteLine(). I hope Novell will find a way to debug in an upcoming release.


-Sly

Friday, November 28, 2008

Unity Application Block Tutorial

This article explains how to get started with the Unity Application Block using a simple console application. Throughout this tutorial you will learn how to configure and use the "Inversion of Control" and "Dependency Injection" features of the Unity Application Block.

Assumptions

This article assumes that:

You know what DIP, IoC and DI are.
You want to configure your type mappings using a configuration file; not using code.

Container

The "Container" or "Inversion of Control Container" is the main object that is used to create objects and inject dependencies into them. Whenever you want an object to be open to IoC, you have to use the container to create the instance using container.Resolve<T>() method instead of the "new" keyword.

IService service = unityContainer.Resolve< IService>();

Create the project and add references to the required assemblies

  • Create a new console project called UnityTest (if you use another name, you will have to change type names in configuration files so I recommend you stick to this name).
  • Add references to the following assemblies:
    • System.Configuration
    • Microsoft.Practices.ObjectBuilder2
    • Microsoft.Practices.Unity
    • Microsoft.Practices.Unity.Configuration

Create the application configuration file

  • Add App.config configuration file to your project
  • Enter the following code in the App.config file

<?xml version="1.0" encoding="utf-8" ?>

<configuration>

    <configSections>

        <section

            name="unity"

            type="Microsoft.Practices.Unity.Configuration.UnityConfigurationSection,

            Microsoft.Practices.Unity.Configuration" />

    </configSections>

<unity>

    <containers>

    <container>

    <types>

    </types>

    </container>

    </containers>

</unity>

</configuration>

This is the smallest working configuration file you can have for Unity to work. There is one configSections element that describes how .Net should read the upcoming section.
There is one, empty, container configuration nested in a containers, nested in a sections called "unity". With this configuration, your will be able to create and configure the container object and then use the container to create objects.

Create and configure the UnityContainer instance

In your project's Main() method, add the following code to create a container instance and configure it by reading the "unity" configuration section defined in the app.config file.

static void Main(string[] args)

{

    IUnityContainer container = new UnityContainer();

    UnityConfigurationSection section =

    (UnityConfigurationSection)ConfigurationManager.GetSection("unity");

    section.Containers.Default.Configure(container);

}

That's it. You can now create instances using container.Resolve<T>() for any type. As you will see, the container is able to Resolve any type, even if no type mapping exist in the configuration file. If you give it a concrete type, it will simply create an instance of that type and return it to you. You can later add a type mapping for that type and the real IoC benefits will be introduced automatically.

Create an instance and inject dependencies

Add these 3 types to your project.

public class InvoiceManager

{

    private IInvoicingService _invoicingService;

    public InvoiceManager(IInvoicingService invoicingService)

    {

        _invoicingService = invoicingService;

    }

    public void Manage()

    {

        Console.WriteLine(_invoicingService.GetCount());

    }

    }

    public interface IInvoicingService

    {

        string GetCount();

    }

    public class InvoicingService : IInvoicingService

    {

    public InvoicingService()

    {

    }

    public string GetCount()

    {

        return DateTime.Now.ToString();

    }

}

Take a minute to study the dependencies: An InvoiceManager uses (depends on) an IInvoiceService. The class InvoicingService it the concrete implementation for IInvoiceService.

Add a type mapping in the App.config file. Change the content of the <unity> section this way:

<containers>

<container>

    <types>

        <type type ="UnityTest.IInvoicingService, UnityTest"

              mapTo="UnityTest.InvoicingService, UnityTest">

        </type>

    </types>

</container>

</containers>

- Append these lines to your Main() function without changing the existing lines that create and configure the container.

IInvoicingService service = container.Resolve<IInvoicingService>();

console.WriteLine( service.GetCount());

- Run the project and see the result.

The container returns an InvoiceService when asked to resolve the type IInvoiceService.

- Delete the two new lines and replace them by the following two lines:

InvoiceManager manager = container.Resolve<InvoiceManager>();

manager.Manage();

- Run the project and see the result.

Although the InvoiceManager class is not configured in the App.config file, it is still participating in Dependency Injection. When asked to resolve the type InvoiceManager, the UnityContainer did not find any mapping to use to substitute InvoiceManager by something else. However, the UnityContainer analyzed the constructor of InvoiceManager and found that InvoiceManager has a dependency on IInvoicingService. So the UnityContainer resolved IInvoicingService into an InvoiceService and then passed it to the InvoiceManager constructor.

If you are curious, add breakpoints to the InvoiceService and InvoiceManager constructors and run the program. Notice in which order objects are created. Have a look at the call stack windows just to have an idea of what is happening under the hood.

Lifetime management

The UnityContainer is able to manage the lifetime of the objects it resolves. By default, the UnityContainer creates a new instance of any type it resolves. You can prove this with this unit test:

IInvoicingService service1 = container.Resolve<IInvoicingService>();

IInvoicingService service2 = container.Resolve<IInvoicingService>();

Assert.AreNotSame( service1, service2 );

There are 4 basic options for lifetime management:

No management: The container does not keep a reference on the objects it creates and therefore creates a new object each time Resolve<T>() is called.
Singleton: The container always returns the same instance
Singleton-per-thread: The container keeps one instance for each thread and return the instance based on the current thread.
Externally controlled: You provide a class that will manage the instances. This option is not covered in this article.

Lifetime management configuration

The configuration of lifetime management is done at the <type> level. Each lifetime management option is supported by one type (class) in the unity application block library.

For example, the class ContainerControlledLifetimeManager is the class that implements the "singleton" lifetime management style.

- To resolve the IInvoicingService type using a singleton, change the <type> section this way:

<type type="UnityTest.IInvoicingService, UnityTest"

      mapTo="UnityTest.InvoicingService, UnityTest">

<lifetime type= "Microsoft.Practices.Unity.ContainerControlledLifetimeManager,

Microsoft.Practices.Unity" />

</type>

Lifetime management using aliases

Using the fully qualified name for the ContainerControlledLifetimeManager class can make files hard to read. The configuration section for unity supports defining aliases. The aliases can then be used anywhere a type name is expected. I recommend defining 3 aliases for the 3 types of lifetime management option.

- Inside the <unity> section (but above and outside the <containers> sections, add the following alias definitions:

<typeAliases>

    <typeAlias alias="singleton"

        type="Microsoft.Practices.Unity.ContainerControlledLifetimeManager, Microsoft.Practices.Unity" />

    <typeAlias alias="perThread"

        type="Microsoft.Practices.Unity.PerThreadLifetimeManager, Microsoft.Practices.Unity" />

    <typeAlias alias="external"

        type="Microsoft.Practices.Unity.ExternallyControlledLifetimeManager, Microsoft.Practices.Unity" />

</typeAliases>

- You can now simplify the <type> declaration for IInvoicingService this way:

<type type="UnityTest.IInvoicingService, UnityTest"

    mapTo="UnityTest.InvoicingService, UnityTest">

    <lifetime type="singleton" />

</type>

Tip: You can also define aliases the same way for your own types if you would like to simplify the type mapping for your own type.

Tip: You can also specify a lifetime for type that does not have a mapping. In this case, add a <type> section for that type but do not add a mapTo attribute. Then add the <lifetime> element to that type.

Other methods for injecting dependencies

So far, we have seen that the UnityContainer can inject dependencies by analyzing the constructor of a type and passing the necessary dependencies to it. In this section, we will see how dependencies can be injected using other mechanisms.

Dependency injection by property assignment

- Add these two classes to your project:

public interface ICustomerService

{

    string GetCustomer();

}

public class CustomerService : ICustomerService

{

    public string GetCustomer()

    {

        return "Sylvain Hamel";

    }

}

- Add the following type mapping into the configuration file:

<type type="UnityTest.ICustomerService, UnityTest"

      mapTo="UnityTest.CustomerService, UnityTest">

    <lifetime type="singleton" />

</type>

- Change the InvoiceManager by adding a new Property of type ICustomerService:

private ICustomerService _customerService;

[Dependency]

public ICustomerService CustomerService

{

    get { return _customerService; }

    set { _customerService = value; }

}

Notice the use of the [Dependency] attribute. This will indicate to the UnityContainer that a dependency injection is required here.

- Change the Manage() method of the InvoiceManager this way

public void Manage()

{

    Console.WriteLine(_invoicingService.GetCount());

    Console.WriteLine(_customerService.GetCustomer());

}

- Run the project.

As you probably expected, the program did resolve ICustomerService and injected a CustomerService instance into the InvoiceManager.CustomerService property.

Dependency injection by method call

You can do pretty much the same thing using a method call instead of a property.

- Replace the CustomerService the property by a SetCustomerService() method:

[InjectionMethod]

public void SetCustomerService(ICustomerService service)

{

    _customerService = service;

}

In the case of a method, use the [InjectionMethod] attribute to indicate to UnityContainer that a dependency injection is required.

- Run the project.

And of course, the program did resolve ICustomerService and injected a CustomerService instance by calling the InvoiceManager.SetCustomerService method.

Note on dependency injection by constructor

We have already seen dependency injection through the constructor but there is one important note about this: If your class has multiple constructors, your must annotate the constructor you want UnityContainer to use by adding the [InjectionConstructor] attribute on it.

Conclusion

Hopefully this tutorial will you get started with the Unity Application Block.