UI Components

By Keren Haddad and Max Panasenkov

UI Components

 Introduction to .NET Framework  Understanding UI Components  Using VS.NET

 Examples

Introduction to .NET Framework

 The .NET Evolution  How does it work?

 Why .NET?

The .NET Evolution

Applicatio n Code and data structures

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

The .NET Evolution

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

The .NET Evolution

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

How does it work?

VB C++ C# JScript J# Common Language Specification ASP.NET

Web Forms Web Services Mobile Internet Toolkit Windows Forms ADO.NET and XML Base Class Library Common Language Runtime Operating System

How does it work?

Source Code Compilation Language Compiler

Code (IL)

Assembly

Metadata

Native Code Execution JIT Compiler

At installation or the first time each method is called

Why .NET?

  Completely eliminates COM plumbing No more…  Registration =>self described apps  GUIDs =>hierarchical namespaces  .IDL files =>unified object model  HRESULTs =>structured exceptions  IUnknown =>common root object  AddRef/Release =>garbage collector  CoCreateInstance =>”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

 Introduction to .NET Framework  Understanding UI Components  Using VS.NET

 Examples

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  Menu  Button  etc  Web Forms  ASP.NET specific

UI Components

 Introduction to .NET Framework  Understanding UI Components  Using VS.NET

 Examples

Using VS.NET

 Adding Components and Controls  Just drag component from the toolbox  Editing properties  Edit directly in the properties editor  Registering for events  Also in the properties editor

What actually happens?

 Data members for components  For example, after placing timer: { public class FunnyButton : System.Windows.Forms.Button

private System.Windows.Forms.Timer timer1;

What actually happens?

 Attributes for the properties  For example, after changing Text property: { private void InitializeComponent() … this.Text = "ADO Example";

What actually happens?

 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

 Properties      Name – data member name Text – text shown by control (was Caption) ForeColor – current text color Dock – docking to the parent Enabled – active or not  Events  Click – mouse click on the control  SizeChanged - 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

 Introduction to .NET Framework  Understanding UI Components  Using VS.NET

 Examples

Writing our first control!

 Circle button  Creating custom component in components library  Deployment  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 graphics float penWidth = 4; Pen pen = new Pen(Color.Black, penWidth); //create pen for the border SolidBrush brush = new SolidBrush(ButtonBackColor); //brush for bg graphics.FillEllipse(brush, 0, 0, Width, Height); // draw bg SolidBrush textBrush = new SolidBrush(ForeColor); //brush for text graphics.DrawEllipse(pen, (int) penWidth/2,(int) penWidth/2, Width - penWidth, Height - penWidth); //draw border graphics.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.NET

 Not simply upgrade to ADO  Designed to be different  Disconnected relational data  Optimized performance for different providers  System.Data namespace  System.Data.OleDb

 System.Data.SqlClient

 System.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.NET

 Create your database (I used Access)  Drag appropriate DataAdapter component  OdbcDataAdapter for Access Follow the wizards  Drag DataGrid on your form  Set it’s DataSource property to be adapter’s DataSet  Add control buttons  Run it

Drag OdbcDataAdapter

 Press Next

Data Adapter Configuration Wizard

 Create new connection or use existing one  Create new one for now

Data Adapter Configuration Wizard

 Data source store your custom information for the next time you need connection to the same DB  Create a new one now

Data Adapter Configuration Wizard

 Select driver for the data source

Data Adapter Configuration Wizard

 Chose name for your Data Source  Will allow later use the same configurations  Press Next then  Press Finish

Data Adapter Configuration Wizard

  Press Select button and brows to your database file Press OK’s until returned to the first screen  Press Next there

Data Adapter Configuration Wizard

 Chose Use SQL statements and continue

Data Adapter Configuration Wizard

 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/progvisbasi c_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