UI Components By Keren Haddad and Max Panasenkov

UI Components

By Keren Haddad

and Max Panasenkov

UI Components

Introduction to .NET FrameworkUnderstanding UI ComponentsUsing VS.NETExamples

Introduction to .NET Framework

The .NET EvolutionHow does it work?Why .NET?

The .NET Evolution

Before COM, applications were Before COM, applications were completely separate entities completely separate entities with little or no integrationwith little or no integration

ApplicatioApplicationn

Code and Code and data data

structuresstructures

The .NET Evolution

COM provides a way for COM provides a way for components to components to integrate; However, integrate; However, each component must each component must provide the “plumbing” provide the “plumbing” and objects cannot and objects cannot directly interactdirectly interact

The .NET Evolution

With the .NET Framework With the .NET Framework common language runtime, common language runtime, components are built on a components are built on a common substrate; No common substrate; No “plumbing” is needed and “plumbing” is needed and objects can directly interactobjects can directly interact

How does it work?

Operating SystemOperating System

Common Language RuntimeCommon Language Runtime

Base Class LibraryBase Class Library

ADO.NET and XMLADO.NET and XML

ASP.NETASP.NETWeb Forms Web ServicesWeb Forms Web Services

Mobile Internet ToolkitMobile Internet Toolkit

WindowsWindowsFormsForms

Common Language SpecificationCommon Language Specification

VBVB C++C++ C#C# JScriptJScript J#J#V

isua

l Stu

dio

.NE

TV

isua

l Stu

dio

.NE

T

How does it work?

AssemblyAssemblySource Source CodeCode

Language Language CompilerCompiler

CompilationCompilation

At installation or At installation or the first time each the first time each method is calledmethod is called

ExecutionExecution

JIT JIT CompilerCompiler

NativeNative

CodeCode

Code (IL)Code (IL)

MetadataMetadata

Why .NET?

Completely eliminates COM plumbingNo more…

RegistrationGUIDs .IDL filesHRESULTs IUnknownAddRef/ReleaseCoCreateInstance

=>self described apps=>self described apps

=>hierarchical namespaces=>hierarchical namespaces

=>unified object model=>unified object model

=>structured exceptions=>structured exceptions

=>common root object=>common root object

=>garbage collector=>garbage collector

=>”new” operator=>”new” operator

Why .NET?

Common type system Enables clean OO programming Value and Reference types

Both are objects Automatic life-time management Very rich framework Assemblies

GAC Still supports old standards!

UI Components


Understanding UI Components

Overview Replacement for VB Forms and MFC

Fully integrated with the .NET framework Web Service aware Date (ADO.NET and XML) aware Secure code and Licensing

A framework for building Windows application “No touch” deployment

No registration, Versionable, Smart caching

A RAD evironment in Visaul Studio .NET Windows Form Designer, Property Browser

Overview (cont)

Rich set of controls Standart controls - Label, Button, TextBox, etc. Common controls - ProgressBar, StatusBar, etc. Data aware controls - ListBox, DataGrid, etc. Common dialogs

ActiveX Interoperability Can host ActiveX controls / author ActiveX controls

Printing Support Visual inheritance

Create a form bases on another form by using inheritance Advanced layout

Anchoring and docking

Basic Terms

Component Timer, DB Connection

Control (User Control)Windows Forms

MenuButtonetc

Web FormsASP.NET specific

UI Components


Using VS.NET

Adding Components and ControlsJust drag component from the toolbox

Editing propertiesEdit directly in the properties editor

Registering for eventsAlso in the properties editor

What actually happens?

Data members for componentsFor example, after placing timer:

public class FunnyButton : System.Windows.Forms.Button

{

private System.Windows.Forms.Timer timer1;


Attributes for the propertiesFor example, after changing Text

property:

private void InitializeComponent()

{

…

this.Text = "ADO Example";


Delegates for events Special type event in .NET (special delegate)

private void InitializeComponent(){

…this.MouseEnter += new System.EventHandler(this.UserControl1_MouseEnter);…

}…

private void UserControl1_MouseEnter(object sender, System.EventArgs e) {}

Names everyone should know

PropertiesName – data member nameText – text shown by control (was Caption)ForeColor – current text colorDock – docking to the parentEnabled – active or not

EventsClick – mouse click on the controlSizeChanged - resize

InitializeComponent() method

This method is created by VS.NET Code generated there represents all the

changes done in the design view

Note: if you remove event handler or data member added by VS.NET manually, do not forget to clean the code that uses it from InitializeComponent().

Doing this from the design view is easier!

UI Components


Writing our first control!

Circle buttonCreating custom component in components

libraryDeployment GDI+

Understanding the first example

using System.Drawing;using System.Windows.Forms;public CircleButton(){

public CircleButton(){ sFormat.Alignment = StringAlignment.Center; } private StringFormat sFormat = new StringFormat(); //alignment for DrawString

protected override void OnPaint(PaintEventArgs e) {

Graphics graphics = e.Graphics; //retrieve graphicsfloat penWidth = 4;Pen pen = new Pen(Color.Black, penWidth); //create pen for the borderSolidBrush brush = new SolidBrush(ButtonBackColor); //brush for bggraphics.FillEllipse(brush, 0, 0, Width, Height); // draw bgSolidBrush textBrush = new SolidBrush(ForeColor); //brush for textgraphics.DrawEllipse(pen, (int) penWidth/2,(int) penWidth/2,

Width - penWidth, Height - penWidth); //draw bordergraphics.DrawString( ButtonText, Font,textBrush, Width/2 (Height - FontHeight)/2, sFormat); } } //draw text

GDI+

System.Drawing provides access to basic GDI+ Advanced drawing capabilities found in

System.Drawing.Drawing2D System.Drawing.Imaging System.Drawing.Text

System.Drawing.Graphics .NET equivalent of the device context But, parameters such as fonts, pens, etc. must be provided

every call OnPaint() method receives a PaintEventArg object

Putting it all together

UserControl successors are automatically deployed by Visual Studio .NET in the toolbox

Public attributes appear in Properties Editor

Create simple form and use it

Another example

Funny button No more reinventing the wheel – inherit from

System.Windows.Forms.Button class Just putting existing things together Note: There is no direct way to ask Visual

Studio .NET to create descendant of the system classes like Form, Button and etc., so you just create a UserControl and then manually change its parent

Note: Another documented feature is that you cannot use designer view to edit you component after you do that

Funny button code

public class FunnyButton : System.Windows.Forms.Button {… Auto Generated Code Skipped …

private void UserControl1_MouseEnter(object sender,System.EventArgs e){m_counter = 0;ButtonText = Text;this.timer1.Start(); }

private void UserControl1_MouseLeave(object sender,System.EventArgs e){this.timer1.Stop();this.Text = ButtonText; }

private int m_counter; private void timer1_Tick(object sender, System.EventArgs e) {

m_counter++;if (m_counter > ButtonText.Length) { this.timer1.Stop(); }else {

string t = ButtonText;string newT = t.Substring(m_counter) + t.Substring(0, m_counter);this.Text = newT; } } }

Putting it all together

Third example

ADO.NETNot simply upgrade to ADODesigned to be different

Disconnected relational dataOptimized performance for different providers

System.Data namespaceSystem.Data.OleDbSystem.Data.SqlClientSystem.Data.SqlTypes

System.XML namespace

ADO.NET Architecture

ADO.NET classes description

Connection Represents a connection to a data source.

Command Represents a query or a command that is to be executed by a data

source.

DataSet Represents data. The DataSet can be filled either from a data source

or dynamically.

DataAdapter Used for filling a DataSet from a data source.

DataReader Used for fast, efficient, forward-only reading of a data source.

Drag-Dropping third example

Simple application using ADO.NETCreate your database (I used Access)Drag appropriate DataAdapter component

OdbcDataAdapter for Access Follow the wizardsDrag DataGrid on your form

Set it’s DataSource property to be adapter’s DataSet

Add control buttonsRun it

Drag OdbcDataAdapter

Press Next

Data Adapter Configuration Wizard

Create new connection or use existing one

Create new one for now


Data source store your custom information for the next time you need connection to the same DB

Create a new one now


Select driver for the data source


Chose name for your Data Source Will allow later use

the same configurations

Press Next then Press Finish


Press Select button and brows to your database file

Press OK’s until returned to the first screen

Press Next there


Chose Use SQL statements and continue


Here you should chose the select query for you adapter.

Use Query Builder Click Next and

then Finish

Design View

Right click on the icon of the Data Adapter in the design view

Choose Generate DataSet

Click OK in the appeared dialog

Customizing our Form

Drop on the form DataGrid control from the Windows forms tab

Drop two Buttons Customize them as you

wish Name, Docking, Size,

etc. Set property DataSource

of the DataGrid to be table you wish from the DataSet

Last steps

Add event handlers for Click event of both buttons Set one to be Commit button and another Reset button Use these methods (replace relation name with the one you

created) Add even handler for form’s Load and call there Reset()

private void Reset(){

this.dataSet11.Clear();this.odbcDataAdapter1.Fill(dataSet11, "Students");

}private void Commit(){

this.odbcDataAdapter1.Update(this.dataSet11);}

Run your application

Fill free to edit table in the grid and use your buttons

Useful resources

www.google.com Small ADO tutorial

http://www.ondotnet.com/pub/a/dotnet/excerpt/progvisbasic_ch08/index.html

Custom shape window tutorial http://www.thecodeproject.com/csharp/CustomForms.asp

Customizing components properties view http://msdn.microsoft.com/msdnmag/issues/03/04/Design

%2DTimeControls/ http://msdn.microsoft.com/msdnmag/issues/03/05/Design

%2DTimeControls/

Summary

.NET – Future of the Windows platform Cross language New model for components usage Windows Forms offer great GUI potential

Rich control set Supports ActiveX

Improved GDI+ Excellent IDE to extract 100% from it Tries to look perfect – no official bug repositories

Documents

UI Components By Keren Haddad and Max Panasenkov