UI Components By Keren Haddad and Max Panasenkov.
-
date post
22-Dec-2015 -
Category
Documents
-
view
226 -
download
2
Transcript of UI Components By Keren Haddad and Max Panasenkov.
![Page 1: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/1.jpg)
UI Components
By Keren Haddad
and Max Panasenkov
![Page 2: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/2.jpg)
UI Components
Introduction to .NET FrameworkUnderstanding UI ComponentsUsing VS.NETExamples
![Page 3: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/3.jpg)
Introduction to .NET Framework
The .NET EvolutionHow does it work?Why .NET?
![Page 4: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/4.jpg)
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
![Page 5: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/5.jpg)
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
![Page 6: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/6.jpg)
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
![Page 7: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/7.jpg)
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
![Page 8: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/8.jpg)
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
![Page 9: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/9.jpg)
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
![Page 10: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/10.jpg)
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!
![Page 11: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/11.jpg)
UI Components
Introduction to .NET FrameworkUnderstanding UI ComponentsUsing VS.NETExamples
![Page 12: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/12.jpg)
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
![Page 13: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/13.jpg)
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
![Page 14: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/14.jpg)
Basic Terms
Component Timer, DB Connection
Control (User Control)Windows Forms
MenuButtonetc
Web FormsASP.NET specific
![Page 15: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/15.jpg)
UI Components
Introduction to .NET FrameworkUnderstanding UI ComponentsUsing VS.NETExamples
![Page 16: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/16.jpg)
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
![Page 17: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/17.jpg)
What actually happens?
Data members for componentsFor example, after placing timer:
public class FunnyButton : System.Windows.Forms.Button
{
private System.Windows.Forms.Timer timer1;
![Page 18: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/18.jpg)
What actually happens?
Attributes for the propertiesFor example, after changing Text
property:
private void InitializeComponent()
{
…
this.Text = "ADO Example";
![Page 19: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/19.jpg)
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) {}
![Page 20: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/20.jpg)
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
![Page 21: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/21.jpg)
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!
![Page 22: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/22.jpg)
UI Components
Introduction to .NET FrameworkUnderstanding UI ComponentsUsing VS.NETExamples
![Page 23: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/23.jpg)
Writing our first control!
Circle buttonCreating custom component in components
libraryDeployment GDI+
![Page 24: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/24.jpg)
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
![Page 25: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/25.jpg)
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
![Page 26: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/26.jpg)
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
![Page 27: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/27.jpg)
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
![Page 28: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/28.jpg)
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; } } }
![Page 29: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/29.jpg)
Putting it all together
![Page 30: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/30.jpg)
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
![Page 31: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/31.jpg)
ADO.NET Architecture
![Page 32: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/32.jpg)
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.
![Page 33: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/33.jpg)
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
![Page 34: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/34.jpg)
Drag OdbcDataAdapter
Press Next
![Page 35: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/35.jpg)
Data Adapter Configuration Wizard
Create new connection or use existing one
Create new one for now
![Page 36: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/36.jpg)
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
![Page 37: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/37.jpg)
Data Adapter Configuration Wizard
Select driver for the data source
![Page 38: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/38.jpg)
Data Adapter Configuration Wizard
Chose name for your Data Source Will allow later use
the same configurations
Press Next then Press Finish
![Page 39: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/39.jpg)
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
![Page 40: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/40.jpg)
Data Adapter Configuration Wizard
Chose Use SQL statements and continue
![Page 41: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/41.jpg)
Data Adapter Configuration Wizard
Here you should chose the select query for you adapter.
Use Query Builder Click Next and
then Finish
![Page 42: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/42.jpg)
Design View
Right click on the icon of the Data Adapter in the design view
Choose Generate DataSet
Click OK in the appeared dialog
![Page 43: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/43.jpg)
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
![Page 44: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/44.jpg)
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);}
![Page 45: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/45.jpg)
Run your application
Fill free to edit table in the grid and use your buttons
![Page 46: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/46.jpg)
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/
![Page 47: UI Components By Keren Haddad and Max Panasenkov.](https://reader035.fdocuments.in/reader035/viewer/2022062320/56649d7a5503460f94a5f25e/html5/thumbnails/47.jpg)
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