1. By Keren Haddad and Max Panasenkov
UI Components
By Keren Haddad
and Max Panasenkov

2. UI Components Introduction to .NET Framework
Understanding UI Components
Using VS.NET
Examples

3. Introduction to .NET Framework
The .NET Evolution
How does it work?
Why .NET?

4. Code and data structures
The .NET Evolution
Application
Code and data structures
Before COM, applications were completely separate entities with little or no integration

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

6. 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

7. Common Language Specification
How does it work? VB
C++ C#
JScript J#
Visual Studio.NET
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

8. At installation or the first time each method is called
How does it work?
Compilation
Assembly
Code (IL)
Source Code
Language Compiler
Execution
JIT Compiler
Native
Code
Metadata
At installation or the first time each method is called

9. Why .NET? Completely eliminates COM plumbing No more… Registration
GUIDs
.IDL files
HRESULTs
IUnknown
AddRef/Release
CoCreateInstance
=>self described apps
=>hierarchical namespaces
=>unified object model
=>structured exceptions
=>common root object
=>garbage collector
=>”new” operator

10. 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!

11. UI Components Introduction to .NET Framework
Understanding UI Components
Using VS.NET
Examples

12. 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

13. Overview (cont) Rich set of controls ActiveX Interoperability
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

14. Basic Terms Component Control (User Control) Timer, DB Connection
Windows Forms
Menu
Button
etc
Web Forms
ASP.NET specific

15. UI Components Introduction to .NET Framework
Understanding UI Components
Using VS.NET
Examples

16. Using VS.NET Adding Components and Controls Editing properties
Just drag component from the toolbox
Editing properties
Edit directly in the properties editor
Registering for events
Also in the properties editor

17. 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;

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

19. 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) {}

20. 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

21. 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!

22. UI Components Introduction to .NET Framework
Understanding UI Components
Using VS.NET
Examples

23. Writing our first control!
Circle button
Creating custom component in components library
Deployment
GDI+

24. 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

25. 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

26. 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

27. 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

28. … Auto Generated Code Skipped …
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; } } }

29. Putting it all together

30. 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

31. ADO.NET Architecture

32. 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.

33. 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

34. Drag OdbcDataAdapter
Press Next

35. Data Adapter Configuration Wizard
Create new connection or use existing one
Create new one for now

36. 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

37. Data Adapter Configuration Wizard
Select driver for the data source

38. Data Adapter Configuration Wizard
Chose name for your Data Source
Will allow later use the same configurations
Press Next then
Press Finish

39. 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

40. Data Adapter Configuration Wizard
Chose Use SQL statements and continue

41. Data Adapter Configuration Wizard
Here you should chose the select query for you adapter.
Use Query Builder
Click Next and then Finish

42. Design View
Right click on the icon of the Data Adapter in the design view
Choose Generate DataSet
Click OK in the appeared dialog

43. 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

44. 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);

45. Run your application
Fill free to edit table in the grid and use your buttons

46. Useful resources www.google.com Small ADO tutorial
Custom shape window tutorial
Customizing components properties view

47. 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