Showing posts with label tutorials. Show all posts
Showing posts with label tutorials. Show all posts

Wednesday, 18 March 2009

Unit tests for c# and Visual Studio

I think most people agree that unit tests are good. You can complain that they are not enough, that sometimes you need to test more than, well, a unit, but at the end you have to agree that it's better to use them than not to use them.
Since c# is Object Oriented - you have classes objects, all the good stuff, you do have units and you can test them.
To do unit test in Visual Studio I use NUnit framework.

After you'll download the framework you'll need a project to test. I'll use my Person class, created for previous tutorials:


I've added introduceYourself method that we will test using NUnit. To be able to use NUnit framework you need to add reference to it in your project. Right click on References and Add. Brows to the bin directory of installed framework and choose nunit.framework.dll.
After that you can use NUnit.Framework in your testing class. Let's create a testing class:

You tell NUnit that your class is a test class by adding [TestFixture()] before class definition. You define testing methods by adding [Test()] before their definition. introduceYourself is a very simple test of a very simple method - it gives a parameter, and checks if result is as expected.
Now lets run our test. Build the project. Go to your NUnit installation directory and run NUnit application. Choose File->Open new Project, and navigate to your project's .exe file (will find it in project's bin directory).
When you open it you'll see your test on the left side of nUnit window:


Now, all you have to do is run yor test: select introduceYourself method and click "Run" button on the right.

Lot's of green means it's all good - your test is passed. The Console.Out tab will show you what your method put on the Console output.

Friday, 13 March 2009

WPF Data Binding Tutorial, Part I - basic binding

Data Binding in WPF UI design is a way of pulling information out of one object and displaying it in user interface controls.
WPF makes data binding very easy, and powerful toll, that allows UI developer to provide a lot of functionality to app's windows without lots of changes in c# code.
I have a simple example of how data binding is usually used in WPF.

Lets start with defining an Object that we can later use to represent some sort of data in our application. I've created a c# class Person, that represents, well different persons:


As you can see it's very simple - each person has a name and e-mail. You create person by setting name and email properties. As far as your WPF application is concerned you can have a database of Person objects, you can keep create them during runtime, you can keep the in text files. As long as you have object you want to pull data out of, binding will be the thing you need.
Simplest binding is a relationship between source object, lets say Person object, and target object. You obtain some information from source object - Name, or E-mail, and pass it to one of target's properties. Target is a WPF object, and the property you want to set has to be a dependency property.
The source object can be practically anything: another WPF element, ADO.NET data object, data-only object created by developer (object of class Person would do).
My first example will be binding between two WPF elements. Consider this code:





You have a slider, and a text, and as you can test yourself - change of the slider positions triggers the text font size change. It's all done without any code, just xaml tags.
As you probably figured out the "magic" happens here:
FontSize="{Binding ElementName=slider, Path=Value}”
.
You can translate it as: "Let the FontSize equal value of Value property of element that's name is "slider".
All data binding expressions use an XAML mark up extension (hence the curly braces). First, using the Binding word, you create an instance of System.Windows.Data.Binding class. Then you define configuration properties of Binding object, in this example the ElementName and Path.
One of very important features of Binding is that it will work regardless of how you'll change the source's value. Wherever in code you'll put something like:
 slider.Value=30;

both slider value and text font size will change.


Now, since we know what's binding all about, it’s time to use our Person class.
Let’s consider this code:

It's a simple window, that's supposed to present info about a Person. The Person to be displayed is selected by the user - he put's user ID into first text box. After clicking GET button he'll be able to see the name and e-mail displayed in green area of the screen. In code we should create a list of objects of type Person , and I populate it with simple data (or provide any other way of getting actual objects contain data that we want to use). ID of person is just index of the object in the list.

You can see how I use binding in text boxes in green area:
Text="{Binding Path=Name}"
, but how does the application know which element to bind to?
The only place I could set binding element source is in the method called when the GET button is pressed - get_Click method. The idea behind this method is to take the string value of id text field, change it into Integer. Than try to find an object in the list under given index. If the object exists we set the binding element - source object for whole grid that displays person's details. That way only Path is needed to define proper binding.
To create binding in code I use DataContext Property of the Grid WPF element:
this.productDetails.DataContext = getPerson(ID);

That's how the c# code I used looks like:

Nothing complicated here: the
Int32.TryParse(this.id.Text, out ID)
tries to parse Integer out of string that's placed in Text property of id textbox, and returns true if succeeded. There is no error or exception handling in place, so the applications isn't really working properly but it illustrates the idea. That's how the c# code I used looks like:

In the next tutorial about bindig I'll write about binding directions, multi-object binding, and some useful and eye-catching tricks.

Thursday, 12 March 2009

First time with JQuery

Searchng for different ways of designing web based UI I diceded to have a look at JQuery - a JavaScript library that allows you to create and style really impressive widgets to use on your website. To prove that it's really good thing to have a look, here's an example:
accordion example


Nice isn't it? That's an example you get with your first jQuery install. You can modify and style it any way you want thanks to css.

But, starting from the begining, lets anwser some of questions I had when I decided to do my first JQuery tutorial.

1. What is JQuery?
On project's website you can read that "jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications."
Sounds resonable - you use javascript to create "nice thingies" and lot's of work is already done by somebody else.

2. How to start with JQuery?
I found Getting started section of jquery website very helpful. You might want to start with looking at more demos, you can find good overview of widgets and functionalities JQuery offers. After that you'll probably decide to run some of those demos yourself. Here's how you add accordion widget to your website:

2.1 Go to JQuery Download Builder. Heres where you'll get your set of JavaScript and CSS classes that allows you to add those great widgets to your website. Builder's purpose is to allow you to choose what functionallity you'll need, what base style do you want to use and how big your package will be. On my first go, I just took everything they offer :).

2.2 After clicking "download" button you'll get a zipped archive with 3 directories (js, css, and development-bundle) and demo index.html file. Quick look at index.html will let you realise that you'll need to add few lines to your website's head section, to make the magic work for you.

2.3 Place the directories from the zipped archive wherever you need them. Add them to your website head section:

The last script is call to method that "tells" jQuery that your accordion div has #accordion id and it's headers are in h3 tags.

After that you can add the widget to your sites html:


And here you are, your first jQuery widget is there, on your website! :)

Monday, 9 March 2009

Regular Experssions in C#

To use regular experssions in C# use System.Text.RegularExpressions class. It provides a Regex class, which objects represent your expressions. You can later use IsMatch(String textToCheck) method of this class to see wheter the textToCheck maches your expression:

Friday, 6 March 2009

Css Tutorials: website components

Recently I was presented with interesting problem, and solution I provided was implementation of certain idea I have about how I *should* design my css styles.
The element I needed to provide was a form, that contained editable descriptions of different elements...


Each element needs a set of input fields. Some of them are marked common, and appear only once for an element but some of them define a "sub-element", and as such will be multiplied as much as many sub-elements are added by user. Some of components won't have sub elements, so they will contain only common input fields.

To implement this layout I used a component abstraction. Each element will be displayed by generic layout component. Here's is a html code that defines three components:



I'll need three different components to describe different situations that my happen in the life time of application. There is "normal" component, with three subcomponents, "empty" component, and "big" componend, filled with many subcomponents.
Let's add some input fields:

And let's create buttons panel, to allow user add and delete subcomponents:

As you can see here, the whole thing doesn't look so good, but hey, that's whay Gods created CSS, right? :)
So, let's start styling.


Now, that looks better, right? We have a main components, and subcompontents visible inside.

Different styling may cause the whole thing look completly different - see this example for the simpliest ajustments.

Thursday, 26 February 2009

WPF Window tutorial Part II: power to the people

Alright, in previous part we've created lovely shaped window, remember?

But our lovely shaped window doesn't do much. In fact it does less that we expected it to do! W cannot resize it(!), we cannot move it(!!) and what's worse we cannot close it (!!!). I do hope you managed to close down Visual Studio after previous tutorial...


I'll show you how to add this functionality to our window in this short and sweet tutorial right now.

1. Resizing.
Ok Resizing can be done in two ways, simple, and hard. For now I'll cover simple way, and explain why we'll need hard way. I'll cover the hard way in separate tutorial.

Simple way uses build in WPF Window attribute ResizeMode. ResizeMode can be set to four different modes:
  • NoResize - yep you've guessed it - nothing can be done with the window, even when it's not our lovely shaped window. Minimizing, Maximizing and restoring options are off.
  • CanMinimize - user is able to minimize and restore window. And only that, size of the window cannot be changes neither by dragging its border nor by using "Maximize" button. Obviously without standard Windows border you cannot see "Minimize" button, but if the window will be displayed in taskbar you'll be able to minimize and restore it by clicking on it in taskbar.
  • CanResize - default setting, allows user to resize, minimize and maximize the window as much as he wants (not shaped window, mind you).
  • CanResizeWithGrip - the most interesting for shaped windows creators option - a small sizing grid shows up on right bottom corner of window that allows user to resize window by dragging it around.
So how do you use this option? Simply add the attribute to your Window tag:


And you get something like this:



You can use the triangle in the corner to resize your window! That's great, isn't it?.
Well, the obvious problem with that solution is that it works best when you use window shaped more or less like triangle, and may not work at all when you use something else - the sizing grid will be displayed outside the window, and user may not find it, or find it when he doesn't expect (or want) it. The hard solution for this problem is to design your custom UserControl that will act as window's sizing grid, but you'll be able to place it or shape it however you need to. I'll cover this problem in separate post as it's more advanced than material of this tutorial.

2.Moving your window around.
Once you've created your window and allowd user to resize it you might want to allow users to drag it around screen (you know, for fun). Window class has a method DragMove() that allowes window to be dragged around. It requires that the mouse left (primary) button is pressed while dragging. It's not a problem though, as we can define the method that will be called when a MouseLeftButtonDown event happens:

and after that we can place the call to DragMouse method inside our event handling method:

Thanks to that our window is movable. The important thing is, that many elements except of Window can catch and handle MouseLeftButtonDown event. We could define a shape that's drawn in the middle of window, and use DragMove() method (call it on shape's parent - main window) in shape's method. That way user will be allowed to drag window only by dragging this particular element.

3. Closing your window down.
Closing window down is very simple and uses techniques I've already described. First you define an element that will act as your close down button (again, could be any shape, button, text, whatever). That you define MouseLeftButtonDown handling method for that element, and in the method call you sipmly say this.Close(). And that's all.

Wednesday, 25 February 2009

WPF Window tutorial Part I: shaped window

So, you want to create shaped window in WPF? Here is quick and simple recipe:


1. Create new project and add a Window to the project:

2. Get rid of windows style border and title bar, and make sure your window allows transparency:


3. Set the transparent Background, and you have your own *invisible* window:



Your code should be something like that:


4.Now - the fun part. You can pick the shape your window is going to be.
I've chosen to use border with rounded edges:

But you can also choose something else:

5. Run the application and here it is- shaped window!


Stay tuned for part 2 where I'll show you how to make your window resizable and movable, and how to make it close.