Showing posts with label tutorial. Show all posts
Showing posts with label tutorial. Show all posts

Tuesday, August 11, 2009

Homework - IComparable and IComparer - A step-by-step tutorial

1) Define your class City, as usual.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace CityCompare
{
public class City
{
//fields
private string name;
private string state;

//properties
public string Name
{
get { return name; }
set { name = value; }
}
public string State
{
get { return state; }
set { state = value; }
}

//constructors
public City() { } //null constructor
public City(string _name, string _state)
{
this.name = _name;
this.state = _state;
}

//override toString method
public override string ToString()
{
return name + ", " + state;
}
}
}


2) We need IComparable to our class to provide for a simple sorting capability
We need to provide a simple sorting capability to the code. We make use of the interface IComparable. To do that, we need to tell the class to implement the interface IComparable. Just add a column (:) and the interface name next to the class name.


public class City : IComparable


3) IComparable Sorting capability - The CompareTo function
Now, we need to implement IComparable CompareTo function to provide the default sort order. We add the following code to our class:


//IComparable.CompareTo needs to be implemented
//to provide default sort order. Make it public
public int CompareTo(Object obj)
{
City c = (City)obj; //cast Object type to City object
return string.Compare(this.name, c.name);
}


4) Writing your tester class with an ArrayList
In this tutorial, I used the Form1 class as the tester class. The tester class will populate the Arraylist with values.
A listbox is made available on the form so that the cities are listed there.
Also, a button that shows "Simple Sort" is available and uses the ArrayList.Sort() method and does not require any additional implementation.


using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Collections; //add this line to use ArrayList


namespace CityCompare
{
public partial class Form1 : Form
{
//fields
private ArrayList cities = new ArrayList();

//properties
public ArrayList Cities
{
get { return cities; }
set { cities = value; }
}

//constructors
public Form1()
{
InitializeComponent();
}

//methods
//Populate the listbox
public void PopulateListBox()
{
//clear listbox
lisCitiesList.Items.Clear();

//Populate the listbox
foreach (Object item in cities)
{
lisCitiesList.Items.Add(item.ToString());
}
}

//Populate the ArrayList with cities and states
public void PopulateArrayList()
{
cities.Add(new City("Sydney", "New South Wales"));
cities.Add(new City("Albury", "New South Wales"));
cities.Add(new City("Armindale", "New South Wales"));
cities.Add(new City("Bathurst", "New South Wales"));
cities.Add(new City("Blue Mountains", "New South Wales"));
cities.Add(new City("Palmerston", "Northern Territory"));
cities.Add(new City("Darwin", "Northern Territory"));
cities.Add(new City("Melbourne", "Victoria"));
cities.Add(new City("Perth", "Western Australia"));
cities.Add(new City("Albany", "Western Australia"));
cities.Add(new City("Canning", "Western Australia"));
cities.Add(new City("Gosnells", "Western Australia"));
cities.Add(new City("Hobart", "Tasmania"));
cities.Add(new City("Hobart", "AnotherState"));
}

//events
private void Form1_Load(object sender, EventArgs e)
{
//Populate cities arraylist
PopulateArrayList();

//Populate listbox
PopulateListBox();
}

private void btnNormalSort_Click(object sender, EventArgs e)
{
cities.Sort();
PopulateListBox(); //refresh list
}

}
}


5) Sort list of cities first by state name, then by city name, without modifying the implementation of the City class
As Alan stated, you cannot redefine the CompareTo method. Let's stick to the requirement and define a CityComparer class that implements the Comparator<City> interface.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Collections; //add this line to use interface IComparer

namespace CityCompare
{ //STEP 2
public class CityComparer: IComparer //we use this IComparer as it gives
//additional comparison mechanisms
{
//we need to implement the interface member Compare(obj,obj)
//from the interface IComparer
public int Compare(Object a, Object b) //make it public
{
City c1 = (City)a; //cast Object to City
City c2 = (City)b; //cast Object to City

return String.Compare(c1.State, c2.State); //State is a string,
//hence we use String.Compare
}

//StateSort method
//sorts the ArrayList elements by state
public static IComparer StateSort()
{
return (IComparer)new CityComparer();
}
}
}


6) Call the method StateSort to sort by state in the Form1 class.


private void btnCityComparer_Click(object sender, EventArgs e)
{
cities.Sort(CityComparer.StateSort()); //STEP 3
PopulateListBox(); //refresh list
}

All done! Suggestions and comments are welcome.

Tuesday, July 21, 2009

Designing a web page - how to set up your template with HTML and CSS

Getting web projects might sound like a long and hard journey, coding your way through HTML and CSS (including Javascript, Flash, etc) while trying to keep an optimal standard for XHTML Strict 1.0 and CSS 2.1.

However, this is not as complicated as it seems. My personal approach to design a webpage for clients is to follow a set of simple guidelines, that can help in planning and achieving the desired results.

1)
Draw/Sketch your index.html page (main page). You should know where you are going to place the main sections of your page. No coding at this stage is involved.
e.g. Conceptualise your webpage by sections and categories. You might want a head section (logo, website title), the links section (underneath the head or at the left-hand side of the page), a content section and a footer for your copyrighting and disclaimer texts or a sitemap of your website.

2) Create your HTML and CSS page.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Tutorial - Getting Started!</title>
<link rel="stylesheet" type="text/css" href="sample.css" />
</head>
<body>

</body>
</html>


Note that for this tutorial, the doctype is Transitional. If you feel confident in your web coding skills, go for Strict. Do not forget to validate your HTML and CSS pages if you want to abide by the futureproof standards of the W3C!

3)
Next stop: transfer those sections into HTML code. Piece of cake if you want my opinion. To maintain a consistent page and to separate content and presentation (and for a neat code!), use divs. NO TABLES PLEASE!
Why so you might ask? Well, if you need to re-organise your sections (e.g. you want your links section to be on the left-hand side of the webpage instead of the top section, you just have to change the CSS (discussed below), without changing the HTML page. This will help you achieve a tidy and efficient code, and it takes a few seconds to do it).



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Tutorial - Getting Started!</title>
<link rel="stylesheet" type="text/css" href="sample.css" />
</head>
<body>
<div id="wrapper">
<div id="top">
<h1>Getting Started!</h1></div>
<div id="links"></div>
<div id="main"></div>
<div id="bottom"></div>
</div><!-- end wrapper -->

</body>
</html>


Note:
I like my page to be centered. Have you noticed that a website looks kinda amateurish and poorly designed when the page is glued to the left? I am sure you don't want that.

4) Now, the interesting part: CSS!
I usually use a body width of 850px that will contain the whole page. Why? Because you have to think about users with low screen resolution. I would recommend 800-850px for the page width (screen excluding borders), but you can change the width depending on your requirements. To achieve this and to contain all the contents in a 850px-wide div, I use the 'wrapper' section.



#wrapper
{
width:850px;
margin:0 auto;
}

#top
{
width:850px;
position:relative;
float:left;
}

#links
{
width:200px;
position:relative;
float:left;
}

#main
{
width:650px;
position:relative;
float:left;
}

#bottom
{
width:850px;
position:relative;
float:left;
}


5) You might also want to specify the font types to be used and the sizes. It is recommended to place your text styles into your 'body' section in the CSS so that everything that you enclose within your body or content section reflects the type changes.



body
{
background-color:black;
font-family:helvetica;
color:#ffffff;
font-size:14px;
}

/***** Text Formatting *****/
h1
{
font-size:20px;
}

h2
{
font-size:18px;
}



Here, it takes less than 20 minutes to do this. This will provide for the structure of your website and everything can be modified from there (width, font, section/div arrangements). Now all you need is to use your creativity and design skills to make your website attractive! The use of pictures for the background, sections and so on is highly recommended!