Grafi čke aplikacije – grafički UI

2. Grafičke aplikacije – grafički UI • Grafičke Windows aplikacije se počev od .NET Framework-a 3.0 mogu razvijati u WPF-u (Windows Presentation Foundation) • WPF je novi grafički podsistem Windows-a za prikazivanje (rendering) grafičkog korisničkog inteface-a, prethodno nazvanog Avalon • WPF se bazira na XAML (eXtensible Application Markup Language) koji se koristi za definisanje grafičkog izgleda aplikacije • WPF omogućava da se definiše izgled grafičke aplikacije nezavisno od koda koji se nalazi u pozadini

3. WPF tip projekta • WPF tip projekta u VS 2008 omogućava da se veoma jednostavno kreiraju grafičke aplikacije pri čemu VS kreira kostur grafičke aplikacije i time programera oslobađa od mnogih zadataka, kao što je na pr. detaljno poznavanje WPF-a • U osnovi korišćenja XAML-a za WPF je ideja slična HTML-u koji definiše grafički izgled web strane, dok se za pisanje koda aplikacije koristi Java Script jezik • U WPF-u se za pisanje koda aplikacije može koristiti neki od .NET jezika – C#, VB, C++

4. XAML • XAML je deklarativni jezik tipa XML-a koji se osim za WPF koristi još i za Silverlight (grafički sistem sličan WPF-u koji se koristi na web-u za omogućavanje raznih funkcionalnosti kao kod Adobe Flash-a, koji objedinjava multimediju, grafiku, animacije) WF (Windows Workflow Foundation, što je tehnologija za deklarativno programiranje gde se ne navodi eksplicitna logika kako se nešto izvršava, već se opisuje zadatak – šta treba uraditi) • Kod WPF-a, XAML se koristi za kreiranje vidljivih elemenata korisničkog interface-a i za odvajanje logike programa koji ih koristi.

5. Klasa Window • Korisnici komuniciraju sa WPF aplikacijom preko prozora • Osnovna funkcija prozora je da se u njega smeste svi vizuelni elementi koji se koriste za komunikaciju sa korisnikom • Za kreiranje prozora se koristi Windows klasa koja omogućava: • Prikazivanje prozora • Podešavanje veličine, pozicije i izgleda prozora • Prikaz specifičnog grafičkog sadržaja aplikacije • Upravljanje životnim vekom prozora

7. Implementacija prozora • Implementacija prozora obuhvata dva aspekta i to izgled prozora i funkcionalni aspekt koji određuje način komunikacije sa korisnikom • Kod WPF-a, implementacija izgleda i ponašanja se može postići preko XAML-a i putem koda – u programskom jeziku • Uobičajeno je da se izgled prozora implementira putem XAML-a, dok se funkcionalnost implementira preko koda programskog jezika (C#) – u pozadini prozora (Code Behind) • XAML file koji definiše izgled prozora se povezuje sa korespodentnim file-om koji sadrži programski kod

8. XAML file • <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SDKSample.MarkupAndCodeBehindWindow"> <!-- Client area (for content) --> • </Window> • XAML element Window koji predstavlja prozor sadrži nekoliko atributa, i to dva atributa za imenski prostor xmlns (xml name space) i xmlns:x kao i atribut x:Class

9. XAML file • Dva atributa, podrazumevani xmlns i xmlns:x određuju dva imenska prostora i to xmlns za WPF i xmlns:x za XAML • Oba imenska prostora su data u formi URI-a http:// • Smisao ovakvog označavanja je da se obezbedi jedinstveno obeležavanje imenskog prostora, pa neke firme koriste URI-e sa file-ovima u kojima se zaista nalaze podaci o imenskom prostoru • Na pr., na adresi http://www.w3.org/TR/html4/ se nalazi sledeća stranica:

11. XAML file • Podrazumevani xmlns za WPF je dat kao URI koji je deo xmlns:x-a za XAML, jer je i WPF samo jedan vid korišćenja XAML-a koji se koristi i za Silverlight kao i WF • Da bi se imenski prostori razlikovali, koristi se prefix x: za XAML jer se češće koriste elementi WPF-a koji se nalaze u podrazumevanom xmlns-u • Za povezivanje XAML file-a sa programskim file-om (C#) koristi se atribut x:Class sa x prefiksom pošto se odnosi na XAML, sa vrednošću koja predstavlja potpuno ime partial klase koja nasleđuje od klase Window

12. Programski – C# file using System.Windows; // Window namespace SDKSample { public partial class MarkupAndCodeBehindWindow : Window { public MarkupAndCodeBehindWindow() { InitializeComponent(); } } }

13. Veza XAML – C# file-ova • Na osnovu vrednosti x:Class atributa kreira se parcijalna klasa koja nasleđuje od klase Window sa imenom navedenim u x:Class atributu • Na taj način se preko potpunog naziva parcijalne klase u x:Class atributu povezuju XAML i programski C# file • U konstruktoru parcijalne klase se zove metod InitializeComponent() koji registruje događaje i postavlja svojstva koja su implementirana – navedena u XAML file-u

14. Primer aplikacije <Window x:Class=”BellRingers.Window1” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” Title=”Window1” Height=”300” Width=”300”> <Grid> </Grid> </Window> • Vrednost atributa x:Class daje potpuno ime klase BellRingers.Window1 koja implementira formu • Vrednost atributa Title daje naziv forme u title bar-u • Vrednosti atributa Height i Width daju dimenziju forme • Vrednosti atributa se mogu promeniti u XAML file-u, preko Properties prozora VS-a ili u C# kodu

15. Grid element • XAML element Window sadrži podrazumevani panel element Grid • Panel elementi Grid, StackPanel, WrapPanel sadrže kontrole i određuju raspored elemenata koje sadrže • Grid panel element omogućava određivanje tačne pozicije svake kontrole koju sadrži, pri dizajniranju – design time • StackPanel automatski raspoređuje elemente po vertikali • WrapPanel automatski raspoređuje elemente po horizontali

16. Pozicioni paneli • Pomenuti pozicioni paneli određuju kako se pomeraju kontrolena formi kada se u run time-u menja veličina forme • Kontrole se pri promeni veličine forme automatski pomeraju i menjaju veličinu prema tipu pozicionog panela u kome se nalaze • Grid panel omogućava da se precizno definiše mesto gde će se jedna ili više kontrola nalaziti na formi • U design pogledu se za kontrolu mogu videti tačke anchors i konektori koji određuju položaj kontrole

17. Konektori i anchors <Grid> <Button HorizontalAlignment=”Right” Margin=”0,84,34,0” Name=”button1” Width=”75” Height=”23” VerticalAlignment=”Top”>Button</Button> </Grid>

31. Podešavanje izgleda elemenata forme • Izgled elemenata forme se može podešavati na razne načine • Podešavanjem atributa u oknu Properties VS • Direktnim editovanjem atributa pojedinačnih elemenata u XAML kodu • Podešavanjem atributa elemenata iz koda aplikacije koja je povezana sa formom – nalazi se u “pozadini” • Korišćenjem stilova – elemenat Style u XAML koji odgovara klasi Style • Stil je resurs i može se dodati odgovarajućem Resources elementu kontrole

32. Stil za dugme • <Button Style=”{DynamicResource buttonStyle}” Panel.ZIndex=”1” Margin =”169,84,34,0” • Name=”button1” Height=”23” VerticalAlignment=”Top”> • <Button.Resources> • <Style x:Key=”buttonStyle”> • <Setter Property=”Button.Background” Value=”Gray”/> • <Setter Property=”Button.Foreground” Value=”White”/> • <Setter Property=”Button.FontFamily” Value=”Comic Sans MS”/> • </Style> • </Button.Resources> • Button • </Button> • {DynamicResource buttonStyle} kreira novi Style objekat na osnovu definicije stila i primenjuje ga na objekat preko Style svojstva

33. Stilovi i resursi • Stilovi su samo jedna vrsta resursa koji se koriste u WPF-u • Element <Button.Resources> označava kolekciju resursa za roditeljski element, u ovom slučaju Button • Element Styledefiniše stil sa imenom jednakim vrednosti svojstva x:key • Preko imena stila, tj. resursa, moguće je taj stil primeniti na kontrolu dodeljivanjem imena resursa svojstvu Style • Preko imena, kontrolama i resursima se može pristupati i iz C# koda - programa

34. Stilovi i resursi • Stilovi imaju ograničeni opseg • Ako se definiše stil u kolekciji resursa jedne kontrole, onda je taj stil nedostupan u ostalim elementima – kontrolama • Za primenu takvog istog stila, neophodno je ponovo definisati takav stil u kolekciji druge kontrole, tj. iskopirati kod čitavog stila • To je veoma loše rešenje, pa je zato bolje definisati stil u kolekciji resursa elementa koji sadrži kontrole na formi, a to je prozor – Window • Postavljanje / čitanje svojstava XAML elemenata se vrši sa Setter elementom koji odgovara Setter klasi

35. Stil u kolekciji prozora • <Window x:Class=”BellRingers.Window1” • xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” • xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” • Title=”Middleshire Bell Ringers Association - Members” • Height=”300” Width=”300”> • <Window.Resources> • <Style x:Key=”buttonStyle”> • <Setter Property=”Button.Background” Value=”Gray”/> • <Setter Property=”Button.Foreground” Value=”White”/> • <Setter Property=”Button.FontFamily” Value=”Comic Sans MS”/> • </Style> • </Window.Resources> • <Grid> • <Button Style=”{StaticResource buttonStyle}” Panel.ZIndex=”1” • Margin =”169,84,34,0” Name=”button1” Height=”23” VerticalAlignment=”Top”> • Button • </Button>

36. Stil u kolekciji prozora <Button Style=”{StaticResource buttonStyle}” Panel.ZIndex=”1” Height=”23” Margin=”0,0,0,0” Name=”button2” Width=”76”> Button </Button> <Image Panel.ZIndex=”0” Margin=”0,0,0,0” Name =”image1”> <Image.Source> <BitmapImage UriSource=”Bell.gif” /> </Image.Source> </Image> </Grid> </Window> • Pošto se stil prvo definiše pa onda referencira, može da se koristi statička referenca stila – StaticResourceza već postojeći stil dugmeta buttonStyle • DynamicResource je dinamička referenca koja može da prethodi definiciji – razrešava se u vreme izvršavanja, a ne u vreme prevođenja kao statička referenca

37. Definicija stila • U definiciji stila nezavisno u kom elementu – kontroli - prozor, dugme ili nešto treće, može se izostaviti tip elementa za koji se definiše stil kada se navode svojstva, ako se navede vrednost svojstva TargetType u elementu Style • Svako dugme na formi može da koristi ovako definisani stil • Ali takav stil ne mogu da koriste ostale kontrole • <Style x:Key=”buttonStyle” TargetType=”Button”> • <Setter Property=”Background” Value=”Gray”/> • <Setter Property=”Foreground” Value=”White”/> • <Setter Property=”FontFamily” Value=”Comic Sans MS”/> • </Style>

38. Stil za kontrole • Jednostavnom modifikacijom definicije stila – promenom svojstva TargetType=”Control”omogućava se da takav stil koriste sve kontrole na formi • Uslov je da taj stil postavlja isključivo ona svojstva koja koriste sve kontrole – klase koje nasleđuju od klase Control (NZČ svojstava za kontrole)

39. Stil za kontrole <Window.Resources> <Style x:Key=”bellRingersStyle” TargetType=”Control”> <Setter Property=”Background” Value=”Gray”/> <Setter Property=”Foreground” Value=”White”/> <Setter Property=”FontFamily” Value=”Comic Sans MS”/> </Style> </Window.Resources> <Grid> <Button Style=”{StaticResource bellRingersStyle}” ...> Button </Button> <Button Style=”{StaticResource bellRingersStyle}” ...> Button </Button> ... <TextBox ... Style=”{StaticResource bellRingersStyle}” ... /> </Grid> </Window>

40. Triggers - okidači • U okviru stila mogu da se definišu okidači – Triggers koji se aktiviraju preko promene određenih svojstava koja odgovaraju nekim akcijama korisnika kao što su na pr. IsMouseOver, IsSelected, IsPressed • Trigger-i definišu promene koje se dešavaju kada se vrednost svojstva akcije korisnika menja, tj. kada su vrednosti navedenih svojstava true • Promene su vezane za svojstva koja se podešavaju preko stilova • Te promene su reverzibilne, tj. kada se vrednost svojstva akcije korisnika vrati na početnu - false, i vrednosti svojstava stilova se vraćaju na prvobitna

41. Primer Trigger-a <Style x:Key=”bellRingersStyle” TargetType=”Control”> <Setter Property=”Background” Value=”Gray”/> <Setter Property=”Foreground” Value=”White”/> <Setter Property=”FontFamily” Value=”Comic Sans MS”/> <Style.Triggers> <Trigger Property=”IsMouseOver” Value=”True”> <Setter Property=”Background” Value=”Blue” /> </Trigger> </Style.Triggers> </Style> • Trigger-i se definišu unutar stilova i primenjuju se samo na one kontrole koje koriste taj stil, tj. samo te kontrole će reagovati na akcije korisnika u Trigger-u • Trigger-e treba razlikovati od događaja – events, jer oni nisu reverzibilni

42. WPF aplikacija • WPF aplikacija može da sadrži proizvoljno mnogo formi koje se nalaze u posebnim file-ovima *.xaml • Početna forma, tj. forma od koje počinje izvršavanje WPF aplikacije se obeležava sa vrednošću svojstva StartupUri elementa Application koji se nalazi u file-u App.xaml • StartupUri=”Window1.xaml”> <Application x:Class=”BellRingers.App” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” StartupUri=”Window1.xaml”> <Application.Resources> .... </Application.Resources> </Application>

43. WPF aplikacija • Kada se aplikacija prevodi – kompajlira – bild-uje, od App.xaml file-a se kreira objekat Application. • Ovaj objekat određuje životni vek aplikacije i startuje početnu formu aplikacije određenu sa vrednošću svojstva • Application objekat i početna forma su analogni klasi koja sadrži main metod od koga počinje izvršavanje konzolnih programa • Da bi izvršavanje aplikacije otpočelo sa nekom drugom formom, treba samo promeniti svojstvo StartupUri

44. WPF kontrole • Kontrole kao što su TextBox, ComboBox, CheckBox, ListBox i druge se nalaze u WPF biblioteci • Kontrola DateTimePickerza prikaz i selekciju datuma se nalazi u starijoj biblioteci Microsoft Windows Forms i ne nalazi se u WPF biblioteci • Postoji mogućnost za interoperabilnost između stare i nove tehnologije formi sa kontrolom WindowsFormsHost • Kada je okno za dizajn u fokusu, sa ToolBox bar-a se prevlače kontrole na formu, što automatski uzrokuje ažuriranje xaml koda koji opisuje izgled forme

45. Dodatne reference za interoperabilnost • Da bi se mogle koristiti kontrole za Windows Forms, potrebno je dodati sledeće reference u WPF projekat: • System.Windows.Formsi WindowsFormsIntegration assemblies • Dodaje se WindowsFormsHostkontrola koja treba da sadrži DateTimePicker kontrolu • Za Windows.Forms je još potrebno dodati name space sa prefiksom wf: • xmlns:wf=”clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms”

46. Dodavanje kontrola • Potrebno je build-ovati solution posle postavljanja referenci za Windows Forms (WF) da bi se u VS pravilno prepoznale WF kontrole dodate iz ToolBox-a • WindowsFormsHost kontrola se dodaje iz ToolBox-a • Kao child kontrola se dodaje WF kontrola DateTimePickerkoja treba da pokazuje tekući datum • Ostale kontrole se dodaju na uobičajeni način <WindowsFormsHost ... Name=”hostMemberSince” ...> <wf:DateTimePicker Name=”memberSince”/> </WindowsFormsHost>

47. Dodavanje kontrola • GroupBox kontrola za RadioButton kontrole i StackPanel kontrola za vertikalni raspored kontrola koje su unutar – child controls <GroupBox Header=”Experience” ... Name=”yearsExperience” ...> <StackPanel ... Name=”stackPanel1” ... /> </GroupBox> <GroupBox...> <StackPanel ...> <RadioButton ... Name=”novice” ...>Up to 1 year</RadioButton> <RadioButton ... Name=”intermediate” ...>1 to 4 years</RadioButton> <RadioButton ... Name=”experienced” ...>5 to 9 years</RadioButton> <RadioButton ... Name=”accomplished” ...>10 or more years</RadioButton> </StackPanel> </GroupBox>

48. Windows.Resources - stilovi <Window.Resources> <Style x:Key="bellRingersFontStyle" TargetType="Control"> <Setter Property="FontFamily" Value="Comic Sans MS"/> </Style> <Style x:Key="bellRingersStyle" TargetType="Control"> <Setter Property="Background" Value="Gray"/> <Setter Property="Foreground" Value="White"/> <Setter Property="FontFamily" Value="Comic Sans MS"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="Blue" /> </Trigger> </Style.Triggers> </Style> </Window.Resources>

49. Izgled forme aplikacije

50. Promena izgleda – hoover Last name