The PK blog

Performing an in-place upgrade on Windows Azure to change your service definition file it’s not possible unless you stop the service, upgrade and then start it again. Otherwise you can do a VIP Swap. VIP stands for Virtual IP and VIP swaps can be either done by the Developer portal or using the Service Management API by calling “Swap Deployment” method.

If you use VIP Swap and as long as you the endpoints between the old and new service definition are identical, the upgrade process is seamless and pretty straightforward without any service interruption. But if, for example, you introduce a new endpoint or delete and older one, then this process is not possible and you have to stop, upgrade, start.

So, how can you perform this operation from the Developer portal. Simply logon to your account, go to Summary page, open your target project, open the service and then upload the new service definition file on Staging. Now, if you click Run on Staging, both versions of your service will work just fine (one in Production, one in Staging). When you hit the Upgrade button (the one with arrows in the middle) then Azure will upgrade your service from Staging to Production, changing the service definition file and complete the process just fine thus performing a VIP swap in the background.

You can perform the same operation using Service Management API and “Swap Deployment” method as I mentioned before.

For more information about VIP Swap using Service Management API, go here –> MSDN, Azure Service Management API, VIP Swap

PK.

It’s been a while since Windows Azure caught the attention of a broader audience rising all kinds of questions from the most simple “How do I access my table storage” to the most complex and generic “How do I optimize my code to pay less”. Although there is a straight answer on the first one, that’s not the case on the second. Designing an application has always been a fairly complex scenario when it comes to high scale enterprise solutions or even on mid-sized businesses.

There are a few things to consider when you’re trying to “migrate” your application to the Azure platform.

You should have in mind that, you literally pay for your mistakes. As long as you’re not a developer account, which by the way “pay” but in a different way, you are getting charged on a pay as you go model for various things, like Transactions, Compute hour, Bandwidth and of course storage. Oh and database size on SQL Azure. So every mistake that you make, let’s say un-optimized code producing more messages/transactions that necessary, you pay for it.

What’s a Compute hour? Well, it’s the number of instances multiplied by “consumed” (service) hours. And what’s a consumed (service) hour? It’s a simple medium size Azure instance having an average of 70% CPU peak, on a 1.60 GHZ CPU with 1.75 GB of RAM and 155 GB of non-persistent data. That means it’s not “uptime” as many of you thing it is. So, when it comes to compute hours, you should measure how many hours does your application consume and optimize your code to consume less. Disable any roles, either Worker or Web when you don’t need them, it will cost you less.

SQL Azure as your database server. There are some catches here also. You should consider re-designing and re-writing the parts where your application is using BLOBs, specially when they are big ones, to use Azure table storage. That’s because of two reasons. First, there are only 2 editions of SQL Azure available as of now, 1GB and 10GB database size limit. You can pretty easily hit the limit when you have large amounts of BLOBs (images, documents etc). The second reason is that you don’t take advantage of the Azure CDN (Content Delivery Network) which means all your clients are served by the server(s) hosting your database even if this is slower because of the network latency. If you use the Azure CDN , your content is distributed at various key points all around the world (Europe, Asia, USA etc) and your clients are served by the fastest available server nearby their location. And that’s not only that. Azure storage is using REST which means your content is also cached by various proxies increasing the performance even more.

Any thoughts?

PK.

Its been a while since Windows Azure caught the attention of a broader audience rising all kinds of questions from the most simple “How do I access my table storage” to the most complex and generic “How do I optimize my code to pay less”. Although there is a straight answer on the first one, that’s not the case on the second. Designing an application has always been a fairly complex scenario when it comes to high scale enterprise solutions or even on mid-sized businesses.

There are a few things to consider when you’re trying to “migrate” your application to the Azure platform.

You should have in mind that, you literally pay for your mistakes. As long as you’re not a developer account, which by the way you “pay” but in a different way, you are on a pay as you go model for various things, like Transactions, Compute hour, Bandwidth and of course storage. Oh and database size on SQL Azure. So every mistake that you make, let’s say un-optimized code producing more messages/transactions that necessary, you pay for it.

What’s a Compute hour? Well, it’s the number of instances multiplied by “consumed” (service) hours. And what’s a consumed (service) hour? It’s a simple medium size Azure instance having an average of 70% CPU peak, on a 1.60 GHZ CPU with 1.75 GB of RAM and 155 GB of non-persistent data. That means it’s not “uptime” as many of you think it is. So, when it comes to compute hours, you should measure how many hours does your application consume and optimize your code to consume less. Disable any roles, either Worker or Web when you don’t need them, it will cost you less.

SQL Azure as your database server. There are some catches here also. You should consider re-designing and re-writing the parts where your application is using BLOBs, specially when they are big ones, to use Azure table storage. That’s because of two reasons. First, there are only 2 editions of SQL Azure available as of now, 1GB and 10GB database size limit. You can pretty easily hit the limit when you have large amounts of BLOBs (images, documents etc). The second reason is that you don’t take advantage of the Azure CDN (Content Delivery Network) which means all your clients are served by the server(s) hosting your database even if this is slower because of the network latency. If you use Azure CDN , your content is distributed at various key points all around the world (Europe, Asia, USA etc) and your clients are served by the fastest available server nearby their location. And that’s not only that. Azure storage is using REST which means your content is also cached by various proxies increasing the performance even more.

Any thoughts?

PK.

It's been a interesting week for Windows Azure. Since last Friday (13th of November) the latest Windows Azure Tools was released and strangely the installer was marked to be a 1.0 release although I'm not sure it really is one.

• Project Dallas has been announced which is a MarketPlace for Vendors to publish their Azure Services for consuming and start making money out of it.
• SQL Azure Data Sync Beta 1 was released. You can use it to synchronize cached data on your offline client with SQL Azure on the cloud just like using any other Synchronization Adapter/Manager on Microsoft Sync Framework. In order to install it and mess around with samples you need Microsoft Sync Framework 2.0 SDK.
• .NET Services was renamed to Windows Azure AppFabric to match terms with Windows Server AppFabric which includes former named projects Velocity and Dublin in one single product. .NET Services consist of Access Control (Claims based authentication) and a Service bus to communicate with other applications.
• New APIs were released to provision and manage Windows Azure Services.
• There have been various enhancements on the platform and the Web UI like how many seconds does it take to switch from Staging to Production, a TCO Calculator has been introduced on the main website etc.

More to come, stay tunned.

• Project Dallas has been announced which is a MarketPlace for Vendors to publish their Azure Services for consuming and start making money out of it.
• SQL Azure Data Sync Beta 1 was released. You can use it to synchronize cached data on your offline client with SQL Azure on the cloud just like using any other Synchronization Adapter/Manager on Microsoft Sync Framework. In order to install it and mess around with samples you need Microsoft Sync Framework 2.0 SDK.
• .NET Services was renamed to Windows Azure AppFabric to match terms with Windows Server AppFabric which includes former named projects Velocity and Dublin in one single product. .NET Services consist of Access Control (Claims based authentication) and a Service bus to communicate with other applications.
• New APIs were released to provision and manage Windows Azure Services.
• There have been various enhancements on the platform and the Web UI like how many seconds does it take to switch from Staging to Production, a TCO Calculator has been introduced on the main website etc.

More to come, stay tuned.

One of the new cool features introduced in C# 4.0 is optional parameters. They’ve been around for a long time in other languages like C++ but also VB.NET  (you can’t rub it in our faces anymore, can you?) and it was about time we get this feature implemented in C# too. Using optional parameters we can avoid a lot of overloading in our methods just to make sure we predicted all possible combinations and all default values in each overload.

So, how can I use it? It’s pretty straightforward. You just add an equal sign “=” next to your parameter and add the default value.

public void SaySomething(bool sayHello = false, bool sayGoodbye = false) 

{

if (sayHello)

Console.WriteLine(“Hello!”);

if (sayGoodbye)

Console.WriteLine(“Goodbye!”);

}

Now what if I want to explicitly set the value for sayGoodbye to true and leave the rest as is? You can notice sayGoodbye is the SECOND parameter in my method so if I want to pass a value to it, I have to pass a value to sayHello too. This is were named parameters come to rescue. By calling the method as below, I explicitly set to true sayGoodbye but I leave sayHello to its default value.

SaySomething(sayGoodbye : true);

Named parameters syntax is <Parameter name> : <Value>

If you had a chance to take a look at the upcoming edition of .NET and C# you probably read about a keyword introduced called “dynamic”. So what this is all about? Using the dynamic keyword there is type resolution taking place during runtime and not during compile.

For example the next code snippets executes just fine:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

namespace DynamicTest

{

    class Program

    {

        static void Main(string[] args)

        {

            dynamic x = "Test";

            dynamic f = 0;

            Console.WriteLine(f);

            Console.WriteLine(x);

            f = "0";

            Console.WriteLine(f);

            Console.Read();

        }

    }

}

As you noticed first I use my variable, declared as dynamic, as an integer but afterwards as a string.

In case I want to get a list of the available methods/properties etc on my variable (Intellisense in other words) Visual Studio IDE is warning that type resolution is taking place during runtime, so any method that actually exists it will be called fine. Take a look at this:

f += 1

and also

f = f.Replace("0", "1");

are going to execute without a glitch but only when they are called at the right place. If you call it a little earlier (before it’s “converted” to a new type where the method you want exists) you get an “RunTimeBinder exception” during… runtime.

If we use generics, we don’t actually achieve runtime type resolution because everything is being boxed to Object and not their “real” type (string, int, bool etc). Dynamic keyword performance can be easily compared with generics as it’s slightly slower.

Oh, and if you ask why not “var”? Well, var is compile-time resolution and it can’t be used as “dynamic”.

As I promised sometime ago I was preparing a new blog series for Windows 7 development and how you can take advantage of some new APIs for TaskBar development etc. All of my examples were based on a library that Rob Jarett provided me. It was the same library he used during PDC for his own demos. When I was about to start posting and get it live, Windows API Code Pack made its appearance. Pretty much a very few parts regarding the TaskBar changed. All I had to do is use the new methods and namespaces to get them working.

Enough with the chit-chat, I updated my demos and my new post is ready.

If you’re not familiar with Windows API Code Pack you can get your hands on it at MSDN Code Gallery (http://code.msdn.microsoft.com/WindowsAPICodePack).

By the time this was getting posted, version number was 0.85. Download and extract and you’ll get a few new folders filled with samples and complete source code of each one of them. It covers from basics to DirectX 10 and of course the TaskBar. Unfortunately Multitouch API is missing. I’m not sure if it’s not going to be there at all.

Taskbar is not all about icons and how they look, but it’s also JumpList, ProgressBar and overlays. A Jumplist is categorized in either custom ones or build-in, like “Tasks” and “Frequent”. For each item we want to add in the Tasks category, we get a reference of the JumpList using a class called “TaskBar” and then we add new items to that list (UserTasks) just like this:

JumpList jumpList = Taskbar.JumpList;

jumpList.UserTasks.Add(new JumpListLink

{

    Title = "Ένα μήλο",

    Path = Path.Combine(Application.StartupPath, "apple.exe"),

    IconReference = new IconReference

        (Path.Combine(Application.StartupPath, "apple.exe"), 0)

});

Each JumpListLink has a lot of properties like a “Title”, “Path”, which icon is used, if you want command line arguments, what’s the working directory etc. A lot of people wonder when they first get in touch with the API “Is there a way I can call a method from my application when a JumpListLink is clicked, instead of calling a new application?”. Well, the answer is no. At least there is no easy way to do it. What it can do, is call itself (the host process) and you can take it over from there, use your favorite IPC way and notify your, already running, application to execute a specific command. If you look carefully that’s what Windows Live Messenger doing. Click to change your status from the Jumlist and pay attention how many processes will spawn. A new msgmsngr process is spawned which stays alive for about 3 seconds and then it exits.

In case you want to add a split line between links you simply add a new “JumpListSeperator” to the targt list and a horizontal line will appear.

jumpList.UserTasks.Add(new JumpListSeparator());

Keep in mind as we move on I’ll provide the full source code of my examples.

In my next post I’ll mess with the ProgressBar and explain how I can show progress on the TaskBar Icon.

‘Till next time, take care!

Είναι μια καινούργια λειτουργία η οποία μου άρεσε πάρα πολύ στo Windows 7 καθώς δίνει την δυνατότητα το ίδιο το λειτουργικό να είναι πχ location-aware εάν έχει GPS Receiver. Αυτό σημαίνει ότι για παράδειγμα κάποιος ο οποίος ταξιδεύει κι έχει ενσωματομένο δέκτη GPS στο laptop του, να αλλάζει time-zone αυτόματα, το Outlook να ενημερώνει στο σωστό time-zone τα ραντεβού κλπ.

Το καλύτερο είναι ότι υπάρχει API το οποίο είναι (λίγο) documented στην beta του SDK και φυσικά μπορούμε να το εκμεταλευτούμε προγραμματιστικά. Φανταστείτε λοιπόν να φτιάξετε μια εφαρμογή η οποία δίνει συμβουλές σε ταξιδιώτες και να καταλαβαίνει αυτόματα σε ποια πόλη βρίσκεστε, να κρατάει αυτόματα τις φωτογραφίες τις οποίες φορτώνετε κάθε βράδυ συσχετισμένες με τις πόλεις τις οποίες επισκεφθήκατε, ένα ιστορικό των πόλεων που επισκεφθήκατε (roadtrip) ή να σας προτείνει μαγαζιά και διάφορα event της πόλης. Υπάρχουν παρα πολλές (και μάλιστα δωρεάν υπηρεσίες) οι οποίες κάνουν reverse-geocoding δηλαδή επιστρέφουν την περιοχή σύμφωνα με το στίγμα που τους δίνει ο χρήστης, οπότε το να βρείτε που είναι εάν έχετε το στίγμα είναι πολύ εύκολο.

Ρίξτε μια ματιά στο “Location and Other Sensors” στο Control Panel και δείτε εάν έχετε συνδεμένο κάποιο GPS Receiver ή κάτι τέτοιο.

Καλή χρονιά σε όλους!

Αποφάσισα ότι είναι καιρός να ξαναρχίσω να γράφω στο blog καθώς το έχω παραμελήσει πάρα πολύ. Ξεκίνησα και μια νέα κατηγορία για Beginners/Starters και έχω και κάποια άλλα στο μυαλό μου, τα οποία θα τα δείτε σύντομα. Ελπίζω να έχω τον χρόνο να συνεχίσω.

Στο θέμα μας όμως..

Κατέβασα την έκδοση 7 των Windows (Windows 7) μέσω του προγράμματος της Microsoft το οποίο μοιράζει στους συνεργάτες της εκδόσεις pre-beta κλπ (όχι απο torrent για να μην παρεξηγηθώ) και ομολογώ ότι έμεινα κάτι παραπάνω απο έκπληκτος απο πολλά πράγματα. Όχι δεν υπερβάλλω, πραγματικά εντυπωσιάστηκα. Καταρχήν δεν περίμενα ποτέ ότι θα υπήρχε έκδοση των Windows που θα έκανε install τόσο γρήγορα και θα bootare ακόμα πιο γρήγορα, με τόσο μικρό footprint. Ακόμη και σ’αυτην την φάση, δεν βρήκα κάτι το οποίο δεν έπαιζε σωστά. Έστησα Visual Studio 2008, DevExpress Components, Messenger, Office.. και με λίγο tweaking, drivers για την Nvidia και φυσικά για την κάρτα ήχου. Όλα λειτουργούσαν άψογα και γενικά πήρα μια πολύ ωραία “αίσθηση στοιβαρότητας” απο το λειτουργικό, πράγμα σπάνιο για pre-beta εκδόσεις. Βέβαια, εάν αναλογιστεί κανείς ότι η έκδοση αυτή είναι βασισμένη στον ίδιο πυρήνα που έχουν τα Vista και ο Windows Server 2008 υπάρχει μια λογική στην σταθερότητα αλλά η πραγματική δουλειά φαίνεται στο memory footprint αλλά και στο πόσο λίγο χώρο καταλαμβάνει στον δίσκο, τα οποία έχουν μειωθεί πάρα πολύ σε σχέση με τους προκάτοχους (βλέπε XP και Vista).

Ανυπομονώ να πάρω μια πιο “προχωρημένη” έκδοση στα χέρια μου, όταν αυτή ετοιμαστεί, καθώς πολλά απο τα πράγματα που είδα (πχ Libraries) μου άρεσαν πάρα πολύ και πιστεύω ότι όσο προχωράει ο καιρός και οι εκδόσεις “ωριμάζουν”, λογικά, το λειτουργικό θα γίνεται ακόμα καλύτερο.

Ο γολγοθάς μου με τον ΟΤΕ

Όλα ξεκίνησαν σήμερα, στην προσπάθεια μου να ενεργοποιήσω ξανά την γραμμή 801 που έχουμε στο γραφείο. Η ενεργοποίηση ξανά γίνεται, λόγω της μεταφοράς μας απο παλαιό σε νέο κτίριο. Η μεταφορά του αριθμού 231 έγινε κανονικά (αν και πήρε 3 μέρες) αλλά της 801 που παίζει επάνω στο ίδιο κύκλωμα, όχι.

Ρωτάω λοιπόν το συνεργείο που ήρθε να κάνει την μεταφορά και μου λέει ότι "Εμείς δεν ξέρουμε, πάρτε τηλέφωνο στο 121 να το δηλώσετε βλάβη". Παρακαλουθήστε λοιπόν την διαδρομή που έκανα εγώ:

121 -- "Χαίρετε, θέλω να δηλώσω βλάβη για αριθμό 801." Η απάντηση ήταν ότι "Εμείς δεν έχουμε αριθμούς 801, τι αριθμός είναι αυτός;". Εξηγώ στην κοπέλα που απάντησε τι είναι ο αριθμός 801, μιλάει με τον επόπτη της και μου απαντάει ότι δεν είναι δυνατόν να δηλώσω την βλάβη εκεί, καθώς δεν χειρίζονται εκείνοι τους αριθμούς 801. Μου λέει να καλέσω τον αριθμό 134 για να με κατευθύνουν απο εκεί που να πάρω τηλέφωνο.

134 -- Μου απαντάει και μου λέει (επειδή έχω ISDN) να πάρω στο 8001126000 που είναι και ο αριθμός εξυπηρέτησης πελατών ISDN.

8001126000 -- Παίρνω που λέτε, εξηγώ το πρόβλημα ξανά και μου απαντάει ότι "Εμείς δεν μπορούμε να κάνουμε κάτι εδώ, ήμαστε για προβλήματα με ISDN, netmod κλπ κι όχι για τις γραμμές". Ρωτάω "Και που να πάρω ρε παιδιά;", μου απαντάνε στο "2101200" όπου είναι η εξυπηρέτηση εταιρικών πελατών ΟΤΕ.

2101200 -- Απαντάνε ότι ευχαριστώς να βοηθήσουν, ξεκινάει η διαδικασία, μόλις του λέω ότι ειμαι Καλαμαριά, Θεσσαλονίκη, μου λεει "Α, εμείς δεν μπορούμε να κάνουμε κάτι εκει, εμείς ήμαστε μέχρι την Λαμία. Για βόρεια ελλάδα, καλέστε στο 1303". Τα νεύρα μου τα χάπια μου.

1303 -- Καλώ το 1303 και μου λεεί "Εμείς εδώ ήμαστε για μισθωμένα κυκλώματα, ποιος σας έδωσε αυτό τον αριθμό; Δεν μπορούμε να σας βοηθήσουμε απο εδώ" και απαντάω εγώ "Είναι το 5ο τηλέφωνο που παίρνω, έχω ξοδέψει 1 ώρα και κάτι λεπτά και άκρη δεν βγάζω, που να πάρω τηλέφωνο να δηλώσω την αναθαματισμένη την βλάβη επιτέλους" και μου απαντάει, μαντέψτε τι... "Στο 121 δηλώνουμε βλάβες κύριε". Μόλις ολοκλήρωσα ένα κύκλο...

121 -- Του λέω όλη την διαδρομή που ακολούθησα, μου ξαναλένε ότι δεν μπορούν να κάνουν τίποτα και με παραπέμπουν να καλέσω το συνεργείο που έκανε την μεταφορά στην Καλαμαριά. Μου δίνει τον αριθμό, σταυρώνω τα δάχτυλα και παίρνω.

2310364χχχ -- Εξηγώ τι γίνεται, πόσα τηλέφωνα έχω πάρει και μου απαντάει ότι "Εμείς δεν μπορούμε να κάνουμε κάτι απο εδώ. Εμείς απλά παίρνουμε εντολές, που πάμε και τι κάνουμε και πραγματοποιούμε την μεταφορά ή ελέγχουμε για βλάβες, δεν μπορώ να κάνω κάτι εγώ κύριε." Ρωτάω "Και ποιος μπορεί;". "Το 121" , "Όχι το 121 ξανά, θα έιναι η τρίτη φορά που παίρνω..". "Τι να σας πω, πηγαίνετε στο κατάστημα του ΟΤΕ της Καλαμαριάς να μιλήσετε με τον προϊστάμενο εκεί για να σας κάνουν την μεταφορά ή να δηλώσετε βλάβη", "Ευχαριστώ", λέω και κλείνω το τηλέφωνο.

Ξεκινάω λοιπόν να πάω στο ΟΤΕ της Καλαμαριάς και εδώ είναι που πλέον όλα φτάνουν στο αποκορύφωμα, καθώς έχει μια ταμπέλα έξω απο το κατάστημα, ότι "7 με 9 Φεβρουαρίου το κατάστημα θα παραμείνει κλειστό λόγω ανακαίνισης". Έτσι λοιπόν, πολύ απλά, εγώ θα εξυπηρετηθώ απο Δευτέρα κι ΕΑΝ θα γίνει κάτι τελικά κι απο το κατάστημα της Καλαμαριάς.

Σύνολο χαμένου χρόνου: 2 ώρες και κάτι λεπτά
Νεύρα: Κομματιασμένα

Και μετά παραπονιέστε για του εναλλακτικούς παρόχους ε;

• ·         .Net Framework 3.0/2.0
• ·         Windows Forms
• ·         Visual Studio 2005
• ·         Windows Presentation Foundation (WPF)
• ·         XAML
• ·         C#

Σύνοψη

Πριν λίγες ημέρες η Microsoft παρουσίασε την τελική έκδοση του .Net 3.0. Ως οπαδός του User Interface ασχολήθηκα απο νωρίς με την XAML και το WPF (Windows Presentation Foundation) και πως αυτά μπορούσαν να με βοηθήσουν, όχι τόσο στο να φτιάξω εντυπωσιακά UI αλλά το πόσο εύκολα μπορώ να τα φτιάξω και πόσο ακόμη πιο εύκολο είναι να παρουσιάσω τα δεδομένα μου χωρίς πολύ κόπο.Το .Net 3.0 τρέχει και σε Windows Vista και σε Windows XP SP2 αλλά και σε Windows 2003 Server.

Τι είναι όμως το WPF;

Το WPF είναι μια «βιβλιοθήκη» θα έλεγε κανείς, η οποία βοηθάει πολύ τον προγραμματιστή να ασχοληθεί με UI και το πως αυτό αλληλεπιδρά με τον κώδικα του εύκολα, αλλά ταυτόχρονα βοηθάει πολύ και τον σχεδιαστή (designer) που μέσω της XAML μπορεί να δημιουργήσει εντυπωσιακά UI, χωρίς να έχει την παραμικρή ιδέα απο κώδικα και χρησιμοποιώντας εργαλεία όπως ο Graphic Designer και o Interactive Designer.Τα εργαλεία αυτά δημιουργούν XAML Code απλά ζωγραφίζοντας. Το ίδιο ισχύει κι αν κάνουμε δημιουργία μιας φόρμας μέσα απο το Visual Studio. Μπορούμε απλά να «ζωγραφίσουμε» τα elements επάνω στο Canvas της φόρμας.Και μπορούμε να «ζωγραφίσουμε» είτε με κώδικα, είτε με drag and drop, stretch and skew κλπ κλπ. Προσωπική μου άποψη, για να το κάνω πιο κατανοητό, είναι οτι πλέον «ζωγραφίζουμε» επάνω σε Canvas τα elements και τα controls ή οτιδήποτε άλλο θέλουμε.

Δηλαδή απλά ζωγραφίζω ότι θέλω;

Ανάλογα με το content το οποίο θέλουμε να παρουσιάσουμε, υπάρχουν και τα αντίστοιχα controls. Για παράδειγμα, για να δείξουμε ένα video μέσα στην εφαρμογή, το μόνο που έχουμε να κάνουμε, είναι να «ζωγραφίσουμε» ένα MediaElement επάνω στην φόρμα, να θέσουμε το Source του file που θα παίζει (είτε είναι ήχος , είτε video κλπ) και τέλος να πούμε το default behavior που έχει, δηλάδη εάν θα ξεκινάει αυτόματα να παίζει ή θα πρέπει να το ξεκινήσει ο χρήστης. Τόσο απλά! O παρακάτω κώδικας κάνει αυτό ακριβώς που περιέγραψα παραπάνω.

<MediaElement Margin="139,148,182,148" x:Name="MediaElement" Source="C:\myvideo.wmv" LoadedBehavior="Manual"/>

Το Visual Studio προσφέρει IntelliSense στα properties και στα Tags τα οποία υποστηρίζονται. Μερικά απο αυτά, όπως το MediaElement, δεν είναι άμεσα διαθέσιμα στον Form Designer οπότε θα σας πρότεινα να κατεβάσε τον Expression Interactive Designer όπου εμφανίζοντια όλα στο Library.

Αν υποθέσουμε ότι θέλαμε αυτό το κομμάτι κώδικα να παίζει μέσα σε ένα κελί απο ένα μεγάλο grid, μπορούμε να το φτιάξουμε πάρα πολύ απλά. Μπορούμε να ζωγραφίσουμε ένα grid και με Point and Click να φτιάξουμε Colums και Rows όπου μέσα θα τοποθετήσουμε Elements.

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="0.5*"/>
    <ColumnDefinition Width="0.5*"/>
  </Grid.ColumnDefinitions>

  <Grid.RowDefinitions>
    <RowDefinition Height="0.33*"/>
    <RowDefinition Height="0.33*"/>
    <RowDefinition Height="0.33*"/>
  </Grid.RowDefinitions>

  <MediaElement VerticalAlignment="Stretch" Margin="0,0,0,0" Height="Auto" x:Name="MediaElement" Grid.RowSpan="1" Source="C:\myvideo.wmv" LoadedBehavior="Manual" Grid.Row="1" Grid.ColumnSpan="1"/>

Ο παραπάνω κώδικας σπάει την φόρμα στην μέση, σε δύο στήλες δηλαδή, και δημιουργεί 3 κελία σε κάθε στήλη, έξη σε σύνολο. Στο δεύτερο κελί, της πρώτης στήλης έχω τοποθετήσει το MediaElement και έχω ορίσει το Margin του σε 0 δηλαδή να καταλαμβάνει όλο το χώρο του κελιού. Τόσο εύκολα δημιούργησα ένα απλό Grid στο οποίο έβαλα τα Elements τα οποία ήθελα.

Κάτι που θα μας γλυτώσει πολύ χρόνο

Πλέον , στο WPF μπορείς να ορίσεις Styles και Templates για τα Controls σου. Τι σημαίνει αυτό;Οτι πολύ απλά μπορείς να δημιουργήσεις ένα Template για όλα τα Buttons σου, τα οποία θα μοιάζουν πάντοτε έτσι, άσχετα εάν βάζεις καινούργια buttons σε runtime ή σε Code Time.Επίσης μπορείς να φτιάξεις διάφορα Templates για τον ίδιο τύπο Control και σε κάθε ένα να χρησιμοποιείς διαφορετικό. Μπορείς επίσης να πειράξεις κατα το Runtime με πιο Template θέλεις να «ζωγραφιστεί» το Element το οποίο φτιάχνεις, εάν φυσικά δεν θέλεις να χρησιμοποιήσει το default. Με τα Styles μπορείς να δημιουργήσεις διαφορετικά «χρώματα» κλπ επάνω σε Controls αλλά δεν μπορείς να ορίσεις «συμπεριφορά». Δηλαδή, μπορείς να αλλάξεις το χρώμα του Control στο MouseOver Event αλλά δεν μπορείς να πεις στο Control να κάνει μια συγκεκριμένη ενέργεια, όπως μπορείς με τα templates. Έτσι μπορούμε να φτιάξουμε διάφορα styles για διάφορα controls και να τα χρησιμοποιούμε ανάλογα.Τα styles υποστηρίζουν inheritance βοηθώντας έτσι εμάς, εάν θέλουμε να φτιάξουμε ενα base style το οποίο κάνουν Inherit άλλα styles και το κάνουν extend. Ακόμη είναι εφικτό να κάνουμε override ένα property του style σε ένα συγκεκριμένο Control.

WPF και .Net 2.0 Forms μαζί;

Ναι, μπορούμε να έχουμε Windows Forms (.Net 2.0) και WPF Windows/Scenes (.Net 3.0) μαζί και λογικό άλλωστε εφόσον το .Net 3.0 «κάθεται» επάνω στο .Net 2.0, σαν να το κάνει extend δηλαδή. Μπορούμε να έχουμε συνδιασμό Windows Forms και WPF Windows/Scenes και αντίστοιχα ενα Windows Form να εμφανίζει και να αλληλεπιδρά με WPF Scene.

XAML και Favorite Lanaguage Code μαζί

Μπορούμε μέσα απο την XAML να καλέσουμε methods ή να κάνουμε instanciate classes κλπ, χρησιμοποιώντας τα αντίστοιχα events των Elements και ορίζοντας ποιος κώδικας θα εκτελεστεί σε ένα συγκεκριμένο fire ενός Event.
Στο παράδειγμα, ανοίγω την Windows Form (.Net 2.0) αφού πατηθεί ένα κουμπί (button) στο Scene που δουλεύω (WPF).

<ToolBar Margin="0,0,0,39" Name="toolBar1">
      <Button x:Name="btnOpenNet2Form" Click="OnClick">
        <TextBlock>Open .Net 2 Form</TextBlock>
      </Button>
</ToolBar>

Προσέξτε το Click="OnClick">. Εδώ ακριβώς ορίζω το ότι όταν το κουμπί το οποίο βρίσκεται μέσα στο toolBar1 πατηθεί, τότε θα καλέσεις το OnClick method απο το namespace και το class το οποίο βρίσκεσαι.

   void OnClick(object sender, EventArgs e)
   {
        frmMain nMain = new frmMain();
        nMain.Show();
   }

Ο παραπάνω κώδικας (C#) θα εμφανίσει το frmMain (Windows Form) επάνω απο το Scene1 (WPF). Σε περίπτωση που το method βρισκότανε είτε σε διαφορετικό class , είτε σε διαφορετικό namespace ο τρόπος με τον οποίο θα το καλούσα θα ήτανε διαφορετικός.

Sample Application

Έχω φτιάξει ενα μικρό sample application το οποίο κάνει demostrate όλες τις παραπάνω λειτουργίες κλπ. Κατεβάστε το και τρέξτε το μέσα απο το Visual Studio αφού έχετε εγκαταστήσει το τελευταίο CTP (November) απο τα  Visual Studio Extensions (WPF Extensions) και το .Net Framework 3.0 RTM.Επίσης καλό θα ήτανε να εγκαταστήσετε και τα extensions για το Windows Workflow Foundation. Μην ξεχάσετε να τοποθετήσετε τα 2 images (bg.jpg και image1.jpg) στο ίδιο directory με το executable. Έαν θέλετε φυσικά μπορείτε να τα αλλάξετε.
Μπορείτε να το κατεβάσετε απο εδώ -> Download Sample Application

Μέρος 3

Validation
----------------

Πολλές φορές ακούμε τον όρο Validation στην ορολογία της δημιουργίας ενός λογισμικού και μας έρχονται στο μυαλό λέξεις όπως «λάθος», «χρήστης», «μήνυμα λάθους», «MessageBox» κλπ. Εν μέρη, έχουμε δίκιο. Κατά την διάρκεια του Validation προσπαθούμε να δούμε έαν η τιμή η οποία έχουμε πάρει απο τον χρήστη είναι σωστή, εάν κάποιο checkbox είναι ενεργοποιημένο ώστε να εκτελέσουμε κάποια λειτουργία πρωτού προβούμε στην τελική λειτουργία (καταχώρηση, διαγραφή κλπ) κλπ. Για να μπορέσω να γίνω περισσότερο κατανοητός, ας θεωρήσουμε ότι έχουμε μια καρτέλα πελάτη μπροστά μας σε μια καλοσχεδιασμένη, αισθητικά και λειτουργικά, φόρμα. Επίσης πρωτού συνεχίσουμε παρακάτω θέλω να αναφέρω ορισμένες λεπτομέριες που υπάρχουν στα controls που χρησιμοποιώ εγώ. Σε κάθε (σχεδόν) Form Control μου, υπάρχει ενα Property το οποίο το ονομάζω ErrorState που απο default η τιμή του είναι None. Αυτό το έχω καταφέρει κάνοντας extend το Control σε κάποιο class και προσθέτοντας το Property εκεί. Το property έχει τιμές απο enum με fields όπως None, Critical, Medium, Less, WrongValue κλπ. Όπως καταλαβαίνετε ανάλογα με το πόσο σημαντικό είναι το control κατα το validation, ανάλογο είναι και το state του μετά το validation ώστε να ξέρω πως ακριβώς θα το παρουσιάσω στο χρήστη και σε πιο σημείο μέσα στο ErrorBox μου.

Κατά την διάρκεια μιας καταχώρησης ενός πελάτη, η φόρμα μας προαπαιτεί κάποια στοιχεία να είναι συμπληρωμένα, όπως για παράδειγμα το όνομα, το επίθετο, το ΑΦΜ και κάποιο μοναδικό κωδικό αναγνώρισης του πελάτη. Εάν ο χρήστης δεν συμπληρώσει κανένα απολύτως στοιχείο, τότε εμφανίζουμε ένα μήνυμα λάθους στο StatusBar και θέτουμε το ErrorState του Control μας σε Critical για κάθε Mandatory (απαραίτητο) στοιχείο (field) το οποίο έχουμε. Επόμενο βήμα είναι να θέσουμε το χρώμα (border του control) στο Color, το οποίο έχουμε ορίσει στο Color Code της εφαρμογής μας ως ErrorState Color, πχ κόκκινο (IndianRed) ώστε ο χρήστης να μπορεί με μια ματιά να βρεί πιο ακριβώς είναι το λάθος του και σε πιο σημείο της φόρμας.

Εάν ο χρήστης έχει συμπληρώσει το πεδίο, αλλά με μια μή αποδεκτή τιμή τότε θέτουμε το ErrorState Color στο border και την τιμή του ErrorState σε WrongValue. Έτσι όταν τελειώσει το Validation εμφανίζουμε ένα συνοπτικό και περιεκτικό μήνυμα λάθους, περιγράφοντας το λάθος, τις επιτρεπτές τιμές και εφόσον είναι εφικτό, προτείνουμε και κάποιες τιμές για το πεδίο ή δίνουμε κάποιο παράδειγμα ή προτείνουμε στον χρήστης να αφήσει το πρόγραμμά μας να θέσει την Default τιμή στο πεδίο. Έτσι ακόμα κι αν τα λάθη είναι παραπάνω απο ένα, τα εμφανίζουμε όλα το ένα κάτω απο το άλλο σε κάπoιο custom Form το οποίο έχουμε φτιάξει γι αυτό το σκοπό και το οποίο υποστηρίζει εύκολα όλα τα παραπάνω παραδείγματα (παραδείγματα, default τιμές κλπ).

Πώς μπορούμε όμως να περιορίσουμε τα λάθη κατα την εισαγωγή των στοιχείων, ώστε να έχουμε λιγότερο overhead απο το Validation, πριν απο κάποια λειτουργία;

Είναι πολύ εύκολο. Έχουν παρουσιαστεί κάποια νέα controls, όπως το MaskedTextBox . Χρησιμοποιώντας το, μπορούμε να γλυτώσουμε πολύ χρόνο και λάθη κατα την εισαγωγή των στοιχείων απο τον χρήστη. Τοποθετώντας έναν «οδηγό» στα πεδία τα οποία μπορούμε να προβλέψουμε τις τιμές τους (πχ κινητό τηλέφωνο) βοηθάμε τον χρήστη να μην κάνει λάθη, να τελειώσει γρηγορότερα την καταχώρηση και φυσικά να μην χάσει χρόνο προσπαθώντας να μαντέψει τι ακριβώς πρέπει να συμπληρώσει σε εκείνο το πεδίο ή με ποιο τρόπο πρέπει να το γράψει.Πχ όπως ανέφερα πριν, εάν θέλουμε ο χρήστης να συμπληρώσει το κινητό τηλέφωνο τότε γράφουμε απλά στο Property «Mask» την τιμή «0000000000». Αυτό θα εμφανίσει όταν τρέξουμε την φόρμα μας σαν οδηγό το _________ και δέχετε μόνο ψηφία σαν τιμή για κάθε «0» το οποίο περάσαμε στο Mask. Επίσης μπορούμε να αποφύγουμε λάθη χρησιμοποιώντας απλά ή πολύπλοκα Regular Expressions ανάλογα με την περίσταση.

Έχω Vista. Ποια πλεονεκτήματα έχω ;

Η αλήθεια είναι οτι δεν χρειάζεται καν πλέον να φτιάξουμε ένα δικό μας ErrorBox για να κάνουμε όλα τα παραπάνω. Η Microsoft και τα Windows Vista παρουσιάζουν μερικά νέα χαρακτηριστικά τα οποία μας λύνουν τα χέρια σε τέτοια θέματα. Μερικά είναι ο νέος TaskDialog και το TaskDialogIndirect API όπως και τα CommandLinks του. Χρησιμοποιώντας τον TaskDialog μπορώ να παρουσιάσω πολύ αναλυτικά και προσεκτικά σχεδιασμένα ErrorBoxes τα οποία είναι λειτουργικά (κάνουν όλα τα παραπάνω με ελάχιστο κώδικα), είναι native (έχουν το ίδιο αποτέλεσμα σε όλα τα pc) και προσφέρουν κάποια χαρακτηριστικά τα οποία θα θέλαμε πολύ να υπάρχουν στο δικό μας Form (ErrorBox), όπως για παράδειγμα More options feature για Advanced λειτουργίες, τις οποίες τις «κρύβουμε» απο τον Novice χρήστη. Μπορούμε δηλαδή να εμφανίσουμε αναλυτικότερη περιγραφή του προβλήματος σε έναν προχωρημένο χρήστη, απο ένα απλό μήνυμα λάθους για τον αρχάριο χρήστη ή ακόμα και να προσφέρουμε προκαθορισμένες ή εναλλακτικές ενέργειες σε CommandLinks είτε για τον αρχάριο, είτε για τον προχωρημένο χρήστη.

Ακολουθούν 2 εικόνες οι οποίες δείχνουν τα παραπάνω:

TaskDialog:

CommandLinks:


* Οι εικόνες είναι απο το site της Microsoft

A Custom Validator

Μια καλή ιδέα και προσέγγιση είναι να φτιάξουμε έναν custom Validator ώστε να μην χρειάζεται κάθε φορά που θέλουμε να εκτελέσουμε συγκεκριμένες λειτουργίες Validation να γράφουμε τον ίδιο και τον ίδιο κώδικα μέσα στα event των Controls μας.
Μια Class με Static Methods για Validation είναι ότι πρέπει για κάθε περίπτωση. Κάθε Static Method θα επιστρέφει (λογικά) κάποιο Boolean το οποίο θα είναι true εάν το Validation ήτανε επιτυχημένο ή όχι. Μάλιστα εάν περνάμε και το Control μας σαν Reference parameter (ώστε να θέτει ο ίδιος ο Validator το ErrorState) τότε γλυτώνουμε και χρόνο και κώδικα και ενδεχομένος και λάθη.

Hints, Tips and Snips

• Μην αλλάζετε το Background Color στο στοιχείο που έχετε λάθος/θέλετε να τονίσετε. Αλλάξτε το Border Color.
• Μην αφήνετε τον χρήστη να γράψει πρώτα λάθος τιμή και μετά να του το πείτε οτι έγραψε λάθος.
• Διορθώστε τα λάθη του μόνοι σας εάν μπορείτε να τα «βρείτε»/προβλέψετε.Πχ Θέλετε μόνο κεφαλαία σε κάποιο πεδίο; Γράψτε κώδικα ο οποίος μετατρέπει οτιδήποτε γράφει ο χρήστης σε κεφαλαίο in real time. *Snip1
• Αποφεύγετε να χρησιμοποιείτε κώδικα ο οποίος δεν είναι δοκιμασμένος σε διάφορα scenarios και δεν είναι αρκετά έξυπνος. Πχ  Θέλετε να δέχετε μόνο διψήφιους αριθμούς σαν input, το textBox1.TextLength == 2 δεν είναι αρκετό για να διασφαλίσει οτι θα πάρετε 2 ψηφία, καθώς μπορεί να είναι και γράμματα. *Snip2
• Χρησιμοποιήστε όπου μπορείτε maskedTextBoxes (πχ στην περίπτωση απο πάνω)
• Χρησιμοποιήστε όπου μπορείτε DropDownBoxes με προκαθορισμένες τιμές

Snip1:
Μετατρέπει ότι χαρακτήρα γράφετε στο TextBox σε κεφαλαίο.

textBox1.KeyPress += new KeyPressEventHandler(textBox1_KeyDown);
  

void textBox1_KeyDown(object sender, KeyPressEventArgs e)

{

      textBox1.Text += (e.KeyChar.ToString().ToUpper());

      //A small trick to place cursor to the end of box

      textBox1.SelectionStart = textBox1.TextLength;

//We handled the event

      e.Handled = true;

}

-------

Snip2:

maskedTextBox1.Mask = "00";

-------

Snip3:
Χρησιμοποιήστε το παρακάτω όταν θέλετε να διαπιστώστε εάν ένα textbox έχει τιμή διαφορετική του  "" (κενό) ή  οχι.

Το
textBox1.TextLength != 0
είναι πιο γρήγορο και παράγει λιγότερο IL κώδικα απο το
textBox1.Text != ""

-----------------------
Εδώ τελείωσε και το κομμάτι του Validation. Δεν έχω τελειώσει τα files τα οποία υποσχέθηκα μαζί με το post, θα τα τελειώσω όμως εντός της εβδομάδας. Επίσης ετοιμάζω κάποια screencasts και posts για XAML/Vista και τον καταπληκτικό Microsoft Interactive Designer. Θεωρώ πολύ ωραίο κομμάτι τον τρόπο με τον οποίο δένουμε το InfoCard Space (.Νet 3.0) με GUI και πως αυτό μπορεί να μας δώσει ενα πολυχρηστικό περιβάλλον χωρίς πολύπλοκους μηχανισμούς security κλπ.

Σωστή διάταξη των στοιχείων στην φόρμα και σχεδιασμός

Η διάταξη των στοιχείων στην φόρμα, ήταν πάντα ενα πολύ σημαντικό κομμάτι κατα την διάρκεια της σχεδίασης του GUI.

Φανταστείτε ότι έχουμε μια εφαρμογή πελατών, όπου στην φόρμα θέλουμε να φαίνεται το ονοματεπώνυμο του χρήστη και κάποιες παραγγελίες που μπορεί να έχει κάνει.
Ο χρήστης περιμένει το ονοματεπώνυμο του πελάτη να είναι σε κάποιο εμφανές σημείο ώστε να μπορεί με μιά ματιά να ξέρει ποιον επεξεργάζεται εκείνη τη στιγμή.
Το συνηθισμένο λάθος είναι να τοποθετούμε τα στοιχεία του πελάτη μόνο στο TitleBar της φόρμας ή μέσα σε ένα GroupBox το οποίο έχει πολύ έντονα χρώματα νομίζοντας ότι έτσι θα βοηθήσουμε τον χρήστη να θυμάτε ευκολότερα τον πελάτη ή οτι έτσι θα μπορεί να τον βρει εύκολα.
Συνιθισμένη πρακτική επίσης είναι να τοποθετούμε τα στοιχεία του πελάτη το πάνω μέρος της φόρμας και απο κάτω τα άλλα στοιχεία, όπως παραγγελίες, τιμολόγια κλπ.
Αυτός ο τρόπος όμως δεν είναι και ο καλύτερος.

Σας παραθέτω παρακάτω δύο εικόνες απο δύο διαφορετικά προγράμματα, ένα απο δικό μου και ένα απο άλλη εταιρία.
και
Θα δείτε οτι στην μια περίπτωση το GUI έχει χρώματα τα οποία είναι απαλά, λιτά και δεν «προκαλούν» τον χρήστη, ενώ στην άλλη περίπτωση τα χρώματα που χρησιμοποιούνται προκαλούν πρόβληματα.
Χρησιμοποιούν το κόκκινο, το οποίο σαν χρώμα προκαλεί οργή (rage color) κάτι το οποίο δεν το θέλουμε στον χρήστη.Η διάταξη των πεδίων είναι επίσης λάθος μέσα στο GroupBox καθώς πρώτα έπρεπε να εμφανίζεται το Επίθετο και μετά το Όνομα του πελάτη.Η τελευταία παρατήρηση είναι ότι δεν υπάρχει εύκολη προσπέλαση σε άλλο πελάτη.

Εάν παρατηρήσετε θα δείτε ότι στο ένα πρόγραμμα το πεδίο είναι σαν WebLink.Τι σημαίνει αυτό;
Σημαίνει ότι εάν το πατήσουμε με το CTRL πατημένο θα ανοίξει η φόρμα με την καρτέλα των προσωπικών στοιχείων του πελάτη, ενώ εάν κάνουμε απλό κλίκ θα ανοίξει η φόρμα εύρεσης πελατών ώστε να φορτώσουμε κάποιον άλλο.Είναι τελευταία πολύ συνηθισμένο δίπλα απο τέτοια πεδία να υπάρχει και ενα κουμπί το οποίο κάνει ακριβώς αυτή την δουλειά, είτε δηλαδή ανοίγει την φόρμα του πελάτη, είτε μας δίνει την δυνατότητα να φορτώσουμε άλλον πελάτη.

Άρα τελικά ποια είναι η καλύτερη διάταξη στα στοιχεία μας στην φόρμα και ο καλύτερος σχεδιασμός της;

Εξαρτάται απο την εφαρμογή, αλλά θα δώσω κάποια tips τα οποία θα βοηθήσουν κάθε φορά να επιλέξετε τον καλύτερο τρόπο.

- Αποφεύγουμε να βάζουμε στοιχεία στο επάνω μέρος της φόρμας. Το επάνω μέρος της φόρμας το αφήνουμε για κάποια ΤoolΒar  με διάφορες λειτουργίες (Εύρεση,Διαγραφή, Καταχώρηση κλπ)

- Προσωπικά στοιχεία και «γενικά» στοιχεία της εφαρμογής, τα τοποθετούμε όσο πιο δεξιά γίνεται. Εαν ενδιαφέρουν τον πελάτη, θα τα βρεί με την πρώτη ματιά καθώς δεξία είναι το μέρος που κοιτάμε πολύ περισσότερο, σε έναν υπολογιστή (και περισσότερο η δεξιόχειρες, καθώς εκεί βρίσκεται και το ποντίκι μας).

- Στην αριστερή πλευρά τοποθετούμε πάντα τα σημαντικά στοιχεία. Όσο πιο σημαντικό το θεωρούμε σαν πεδίο, τόσο πιο νωρίς πρέπει να εμφανιστεί στον χρήστη.Έτσι του γλυτώνουμε χρόνο στην καταχώρηση και έχουμε ενα καλό επιχείρημα για marketing (χρόνος = χρήμα)

- Ομαδοποιούμε τα στοιχεία μας (ακόμα και ομάδα μέσα σε μια άλλη ομάδα)Πχ. Στην Επικοινωνία (μια ομάδα) έχουμε τα Κινητά (δευτερη ομάδα μέσα στην ομάδα επικοινωνία), Σταθερά (τρίτη ομάδα) , φαξ κλπ. Αποφεύγουμε όμως τις υπερβολές.

- Σε κάθε ομάδα έχουμε εικονικές στήλες με τα labels των πεδίων. Στοιχίζουμε τα labels πάντα αριστερά και αρχίζουμε να τοποθετούμε τα πεδία εκει που τελείωσε το μεγαλύτερο πεδίο και όχι δίπλα απο κάθε label.

- Χρησιμοποιούμε μερικά εικονίδια μέσα στις φόρμες (συνήθως επάνω αριστερά) τα οποία ομορφαίνουν το περιβάλλον αλλα δίνουν και μια ιδέα στον χρήστη στο τι θα πρέπει να συμπληρώσει

- Στο κάτω μέρος της φόρμας (στο StatusBar) αναφέρουμε σε τι κατάσταση βρισκόμαστε (πχ Επεξεργασία, Νεα καταχώρηση κλπ), ενώ καλό θα ήταν να αναφέρουμε και κάποια σύνολα (πχ Ενεργοί και Ανενεργοί Πελάτες). Συμβουλή: Μην ξεπεράσετε τη μέση του StatusBar, καθώς κανένας χρήστης δεν θα διαβάσει μέχρι τέρμα δεξιά τα στοιχεία.Οτιδήποτε θεωρείτε πιο σημαντικό, τοποθετήστε το πρώτο.Χρησιμοποιούμε και εδώ διαχωριστικά.

- Δημιουργούμε πάντα συντομεύσεις για όλες τις σημαντικές λειτουργίες (καταχώρηση κλπ) και προσπαθούμε να ακολουθήσουμε ήδη γνωστές συντομεύσεις απο άλλες μεγάλες σουίτες εφαρμογών, όπως πχ CTRL + N για νέο παράθυρο (στον Internet Explorer) θα μπορούσε να είναι συντόμευση για την δημιουργία νέας καρτέλας πελάτη. Δεν κάνουμε ποτέ override συντομεύσεις που χρησιμοποιεί το λειτουργικό (Windows) καθώς θα μπερδέψουμε τον χρήστη (πχ CTRL + C αντι για copy να κάνει Close!!).

- Χρησιμοποιούμε εύκολες και κατανοητές λέξεις ως περιγραφή των πεδίων και αποφεύγουμε να δημιουργούμε δικά μας ακρωνύμια.Επίσης καλό θα ήταν να έχουμε και intergration με το εγχειρίδιο της εφαρμογής (manual), έτσι ώστε όταν ο χρήστης πατήσει το κλασικό F1 να ανοίξει η αντίστοιχη σελίδα βοήθειας στο εγχειρίδιο, για την συγκεκριμένη φόρμα.

- Στα πολύ σημαντικά πεδία προσθέτουμε και tips με την μορφή balloon τα οποία βοηθούν τον χρήστη να καταλάβει τι πρέπει να συμπληρώσει.Φυσικά θα πρέπει να υπάρχει επιλογή απενεργοποιήσης των balloon για τους προχωρημένους χρήστες.

Πως ξεχωρίζουμε όμως ποιες είναι οι βασικές λειτουργίες για «όλους» απο τις προχωρημένες για «λίγους»;

Προσωπικά χρησιμοποιώ ένα πολύ απλό trick.Μπαίνω στο ρόλο του αρχάριου χρήστη, σκέφτομαι δηλαδή σαν εκείνο.Εάν δεν μπορείτε να το κάνετε αυτό, τότε δείτε το απο μια άλλη οπτική γωνεία, απο την γωνεία της ευκολίας ώστε να πάρω το επιθυμητό αποτέλεσμα.
Ο πιο γρήγορος τρόπος να πάρω το επιθυμητό αποτέλεσμα, είναι και ο τρόπος με τον οποίο ο αρχάριος χρήστης θα σκεφτεί.Ενας αρχάριος χρήστης δεν θα σκεφτεί ποτέ να βάλει πχ ένα φίλτρο στην ονομασία ενός πελάτη σε ενα grid απο δεδομένα, αλλά θα προσπαθήσει να το βρει στην λίστα κάνοντας scroll down και διαβάζοντας τα ένα ένα (όταν είναι λίγα).Όταν όμως γίνουν πολλά, θα αναζητήσει ένα πιο εύκολο τρόπο να το κάνει, θα αναζητήσει για μια φόρμα εύρεσης του πελάτη με βάση ορισμένα κριτήρια.
Εκεί θα ξεχωρίσουμε τα βασικά στοιχεία που θα πρέπει να φαίνονται σε εναν αρχάριο χρήστη, απο ένα προχωρημένο.
Ο αρχάριος όπως είπαμε, θέλει το αποτέλεσμα με πολύ απλές κινήσεις, δεν θέλει ουτε φίλτρα και κριτήρια πχ στο συνολικό ποσό οφειλής του πελάτη, αλλά ούτε τον ενδιαφέρει άμμεσα εάν ο πελάτης μένει στην Αθήνα ή στην Θεσσαλονίκη.Άρα τα πεδία για παράδειγμα που θα τον ενδιέφεραν είναι πχ το Ονοματεπώνυμο, η Διεύθυνση, Τηλέφωνο.
Όλα τα υπόλλοιπα στοιχεία όπως πχ Οφειλή,Σύνολο προιόντων, και άλλα διάφορα κριτήρια, θα πρέπει να μπούν στους προχωρημένους.
Ο προχωρημένος χρήστης, μπορεί να χρησιμοποιήσει και σύνθετα κριτήρια με λογικούς τελεστές ώστε να επιτύχει το επιθυμητό αποτέλεσμα, ενώ ο αρχάριος μπορεί να μην έχει ακούσει και ποτέ, τι είναι ένας λογικός τελεστής.Στον προχωρημένο χρήστη, κάνουμε και διαχωρισμό των τηλεφώνων σε κινητά και σταθέρα, ενώ στον αρχάριο χρήστη ψάχνουμε απο default και στα δύο πεδία.
Είναι περισσότερο basic and advanced search διαφορές, οι οποίες όμως έχουν αντίκτυπο επάνω στους χρήστες, αρχάριους και προχωρημένους.

------------------------

Επέλεξα να αφήσω το κομμάτι του validation ώς ένα μέρος μόνο του, καθώς είναι πολύ σημαντικό και στον τρόπο ελέγχου αλλά και στον τρόπο παρουσίασης των λαθών στον χρήστη.
Δεν θα αναφερθώ μόνο στο validation αλλά και στο τρόπο να αποφεύγονται τα λάθη με σωστά input masked textboxes και διάφορες άλλες τεχνικές.
Επίσης με την ολοκλήρωση και του τρίτου μέρους, θα ανεβάσω και τα πρώτα sample forms με όλες τις παραπάνω λειτουργίες σε ενα demonstration project.

Σχεδιάζοντας Friendly GUI  (Graphical User Interface)

Πριν λίγο καιρό, είχα μια συζήτηση με μερικά μέλη του DNZ περι GUI και κατα πόσο είναι εφικτό να σχεδιάσουμε όμορφα και λειτουργικά GUI.
Τα τελευταία χρόνια ασχολήθηκα πάρα πολύ με το κομμάτι αυτό, ψάχνοτας απο εδώ, ψάχνοντας απο εκεί, τελικά κατέληξα σε ορισμένα συμπεράσματα, τα οποία θα τα μοιραστώ μαζί σας.

Δυστυχώς, όχι μόνο στην Ελλάδα, αλλά περισσότερο σ’ αυτήν, θεωρούμε το GUI ως ενα κομμάτι το οποίο πρέπει να απλά να "γίνει" για να μπορέσουμε να παραδώσουμε την εφαρμογή μας στον πελάτη, κάτι δηλαδή σαν μια αγγαρεία. Εδώ ακριβώς βρίσκεται και το λάθος, μια και οδηγούμαστε έτσι στον σχεδιασμό πολύ πρόχειρων GUI, δύσκολων στην χρήση, με πάρα πολλά στοιχεία (elements) μαζεμένα και σε κακές διατάξεις, λανθασμένες χρωματικές κωδικοποιήσεις (color codes) και μπάρες εργασίας που αντι να βοηθούν τον χρήστη τον μπερδεύουν ακόμα περισσότερο.

Το GUI είναι αυτό που βλέπει ο πελάτης, είναι αυτό το οποίο θα κάνει τον πελάτη να εντυπωσιαστεί, είτε ευχάριστα , είτε δυσάρεστα. Τι να το κάνει ο πελάτης αν το πρόγραμμά μας είναι το καλύτερο στον κόσμο και κάνει και καφέ εάν δεν μπορεί να το κάνει εύκολα ,γρήγορα και απλά. Δεν μας νοιάζει όμως να μπορεί να το κάνει μόνο εύκολα, γρήγορα και απλά, αλλα μας νοιάζει και το πριν απο αυτό. Εννοώ, ότι εάν ειναι να αναγκάσουμε τον πελάτη, να μπλέξει σε λεπτομέριες, πχ να ορίσει ο ίδιος εαν η σύνδεση με την καφετέρια είναι σε USB ή σε RS232, τότε πάλι είμαστε λάθος. Σκοπός είναι να δίνουμε ναι μεν στον χρήστη την επιλογή προτείνοντας όμως ταυτόχρονα το σωστό. Όσο καλό και να είναι το back end engine μας, εάν το GUI είναι λάνθασμένα σχεδιασμένο, τότε δυστυχώς, όχι μόνο δεν θα επιλέξουν το προίον μας, εαν έχουν κάποια άλλα εναλλακτική, αλλά και όσοι το έχουν, δεν θα μπορέσουν ποτέ να το χρησιμοποιήσουν στο 100% εξαιτίας της πολυπλοκότητάς του.

Ο χρήστης είναι αυτός ο οποίος έρχεται κάθε μέρα σε επαφή με το GUI μας. Οι χρήστες χωρίζονται σε 4 κατηγορίες (οχι σε 3 όπως νομίζετε):

- Αυτοί που δεν ξέρουν καθόλου (αρχάριοι)
- Αυτοί που ξέρουν (μέσοι)
- Αυτοί που ξέρουν πολύ καλά (προχωρημένοι)
- Αυτοί που νομίζουν ότι ξέρουν (kiddies).

Σκοπός μας είναι να καλύψουμε τις «ανάγκες» και τις ιδιαιτερότητες όλων. Πχ δεν θέλουμε ο προχωρημένος χρήστης να περνάει απο 15 wizard screens για να μπορέσει να κάνει μια απλή εκτύπωση.
Πολλές φορές δεχόμαστε βελτιώσεις απο τους καθημερινούς χρήστες, οι οποίοι δίνοντας μια απλή για εμάς υπόδειξη προσθήκης ενός element στην φόρμα (πχ ενα dropdown menu εαν ο πελάτης είναι ενεργός), γι αυτούς είναι σωτήρας (χρόνου, χρήματος κλπ).

Εν κατακλείδι , ενα GUI πρέπει να είναι:

- Εύκολο στην χρήση και λειτουργικό (και για τον αρχάριο και για τον προχωρημένο χρήστη)
- Να μην είναι πολυ φορτωμένο, αλλά ούτε πολύ λειψό
- Να μην χρειάζεται πολλά resources για να λειτουργήσει
- Να μην χρησιμοποιεί μηνύματα του στυλ «Κρίσιμο λάθος» κλπ, τα οποία φοβίζουν τον χρήστη
- Να προσφέρει φιλικά χρώματα στον χρήστη (σωστό color coding)
- Να έχει όμορφα εικονίδια διεπαφής
- Να ακολουθεί τα standards της Microsoft για τον τρόπο γραφής των μηνυμάτων που εμφανίζονται στο χρήστη

 Στα υπόλοιπα κομμάτια του οδηγού, θα μιλήσω για θέματα που περιλαμβάνουν, μεταξύ άλλων, τα εξής:

- Color coding, error/information messages representation and tips
- Σωστή διάταξη των στοιχείων μιας φόρμας
-Πως να ξεχωρίζετε τις advanced λειτουργίες απο τις απλές
- Validation.
- Σωστή περιγραφή των εικονιδίων της εφαρμογής στον γραφίστα και χρήση έτοιμων βιβλιοθηκών (τι πρέπει να προσέξουμε,πως επιλέγουμε κλπ)
- Δημιουργία μιας φόρμας με custom border
- Skinning libraries and techniques
- Δημιουργία δυναμικού GUI με βάση role based security
- GUIs in multi tier applications

Color coding, error/information messages representation and tips.

Ενα πολύ σημαντικό κομμάτι στον σχεδιασμό του GUI είναι οι χρωματικοί συνδυασμοί οι οποίοι θα χρησιμοποιηθούν. Ο χρωματικός συνδυασμός μπορεί είτε να επηρεαστεί απο το είδος της εφαρμογής (π.χ. σε μια εφαρμογή κρατήσεων εισιτηρίων για την ακτοπλοία, σε μπλε κλπ). Ποτέ δεν χρησιμοποιούμε έντονα χρώματα, π.χ. το «Navy Blue» για background color σε textbox element και «White» για text color, αλλά το «Light Steel Blue» για Form Background color, το «Alice Blue» για background color στα textbox elements και «Black» για text color.

Σε μια εφαρμογή θα πρέπει να έχουμε υπόψιν μας διάφορες καταστάσεις των elements, πχ disabled, enabled, focused, not focused, error state, correct state. Για όλες τις προηγούμενες καταστάσεις πρέπει να χρησιμοποιήσουμε κάποιο χρώμα το οποίο δηλώνει την κατάσταση του element (περισσότερο για τα text elements).

Εάν σε κάποιο πεδίο text υπάρχει λάθος τιμή, τότε δεν θα αλλάξουμε το χρώμα του background του text element αλλά το border color του, πχ σε κόκκινο, το οποίο σε συνδιασμό με τον error provider (ή και χωρίς αυτόν) θα τραβήξει την προσοχή του χρήστη. Καλό θα ήταν τα ανενεργά elements να έχουν ένα χρώμα ελάχιστα πιο σκούρο απο το ήδη υπάρχον. Αυτό βοηθάει τον χρήστη να εντοπίσει γρήγορα το ενεργό πεδίο και να συνεχίσει την δουλειά του, χωρίς να χάνει χρόνο "ψάχνοντας" μέσα στη φόρμα. Επίσης πολύ καλό θα ήταν να δίνουμε διάφορα tips σε balloons στο OnFocus του element, όπως πχ τι πιθανές τιμές περιμένει η εφαρμογή (δεν θα μιλήσουμε ακόμα για masked input, για να αποφύγουμε τα λάθη), απλά κάποια συμβουλή ή ακόμα κάποιο παράδειγμα.

Ας υποθέσουμε όμως οτι παρ’όλαυτά, ο χρήστης μας κάνει λάθος.
Όταν ανακαλύψουμε το λάθος κατα το validation δεν θα πρέπει να το δείξουμε σε MessageBox αλλά στο Statusbar της φόρμας. Σε περίπτωση που τα λάθη είναι παραπάνω απο ένα, τότε καλό είναι να τα «συγκεντρώσουμε» και να τα εμφανίσουμε όλα σε ένα custom form (το οποίο θα έχει το ρόλο του MessageBox). O καλύτερος τρόπος να εμφανίσουμε πολλά μηνύματα στον χρήστη χωρίς να τον τρομάξουμε, είναι να τα εμφανίσουμε σε μορφή ερωτοαπαντήσεων, δηλαδή το κάθε λάθος να αποτελεί ένα τίτλο σε bullets (μια dynamic builded webpage), τα οποία θα κάνουν expand στο OnClick και θα δείχνουν την περιγραφή του λάθους, ενώ απο κάτω θα υπάρχει ενα link ή μία πολύ σύντομη περιγραφή της διαδικασίας διόρθωσης του λάθους ή τον λόγο τον οποίο το προκαλεί.

Κατα την περιγραφή του λάθους προσπαθούμε να αποφύγουμε τεχνικούς όρους ενώ δεν μιλάμε ποτέ στην προστακτική στον χρήστη. Σκοπός μας είναι να τον κάνουμε να νιώσει άνετα ώστε να διορθώσει το λάθος του.Χρησιμοποιούμε καθημερινές λέξεις για να τον οδηγήσουμε εκεί που θέλουμε. Σε περίπτωση που το λάθος μας είναι “critical” δίνουμε στον χρήστη να καταλάβει την κρισιμότητα του λάθους και την διαδικασία με την οποία θα πρέπει να αναφέρει το λάθος στην όμαδα τεχνικής υποστήριξης του προιόντος, ώστε να διορθωθεί σε επερχόμενες εκδόσεις του προιόντος (bug fixing).

-----------------

Εδώ τελειώνει το πρώτο κομμάτι της εισαγωγής μου στο Friendly GUI, στο επόμενο άρθρο θα δημοσιεύσω και κάποια sample forms τα οποία κάνουν demonstrate αυτά τα οποία γράφω εδώ, αλλά και ότι θα αναφέρω στο επόμενο («Σωστή διάταξη των elements μιας φόρμας και πως να ξεχωρίζεται τις advanced λειτουργίες απο τις απλές καθώς και validation»), καθώς το ένα εξαρτάται απο το άλλο και δεν ήθελα να τα σπάσω σε δύο διαφορετικά κομμάτια. Μέχρι στιγμής οι συμβουλές είναι γενικές, ίσως αρκετά απο αυτά κάποιοι να τα γνωρίζετε ήδη, αλλά ακόμα είναι η αρχή έχω πάρα πολλά να γράψω, οπότε συγχωρήστε την όποια ανία μπορεί να σας προκάλεσα για αρχή.