slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Grafi čke aplikacije – grafički UI PowerPoint Presentation
Download Presentation
Grafi čke aplikacije – grafički UI

Loading in 2 Seconds...

play fullscreen
1 / 57

Grafi čke aplikacije – grafički UI - PowerPoint PPT Presentation


  • 198 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Grafi čke aplikacije – grafički UI' - jafari


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
grafi ke aplikacije grafi ki ui
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
wpf tip projekta
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++
slide4
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.
klasa window
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
implementacija prozora
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
xaml file
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
xaml file1
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:
xaml file2
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
programski c file
Programski – C# file

using System.Windows; // Window

namespace SDKSample

{

public partial class MarkupAndCodeBehindWindow : Window

{

public MarkupAndCodeBehindWindow()

{

InitializeComponent();

}

}

}

veza xaml c file ova
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
primer aplikacije
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
grid element
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
pozicioni paneli
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
konektori i anchors
Konektori i anchors

<Grid>

<Button HorizontalAlignment=”Right” Margin=”0,84,34,0”

Name=”button1” Width=”75” Height=”23” VerticalAlignment=”Top”>Button</Button>

</Grid>

pode avanje izgleda elemenata forme
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
stil za dugme
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
stilovi i resursi
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
stilovi i resursi1
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
stil u kolekciji prozora
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>
stil u kolekciji prozora1
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
definicija stila
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>
stil za kontrole
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)
stil za kontrole1
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>

triggers okida i
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
primer trigger a
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
wpf aplikacija
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>

wpf aplikacija1
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
wpf kontrole
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
dodatne reference za interoperabilnost
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”
dodavanje kontrola
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>

dodavanje kontrola1
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>

windows resources stilovi
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>

c kod aplikacije
C# kod aplikacije

public partial class Window1 : Window

{

private string[] towers = { "Great Shevington", "Little Mudford", "Upper Gumtree", "Downley Hatch" };

private string[] ringingMethods = { "Plain Bob", "Reverse Canterbury", "Grandsire", "Stedman", "Kent Treble Bob", "Old Oxford Delight", "Winchendon Place", "Norwich Surprise", "Crayford Little Court" };

public Window1()

{

InitializeComponent();

this.Reset();

}

public void Reset()

{

firstName.Text = String.Empty;

lastName.Text = String.Empty;

towerNames.Items.Clear();

foreach (string towerName in towers)

{

towerNames.Items.Add(towerName);

}

towerNames.Text = towerNames.Items[0] as string;

hard kodiran combobox alternativa
Hard kodiran ComboBox (alternativa)

<ComboBox Text=”towerNames”>

<ComboBox.Items>

<ComboBoxItem>

Great Shevington

</ComboBoxItem>

<ComboBoxItem>

Little Mudford

</ComboBoxItem>

<ComboBoxItem>

Upper Gumtree

</ComboBoxItem>

<ComboBoxItem>

Downley Hatch

</ComboBoxItem>

</ComboBox.Items>

</ComboBox>

slide53

methods.Items.Clear();

CheckBox method;

foreach (string methodName in ringingMethods)

{

method = new CheckBox();

method.Margin = new Thickness(0, 0, 0, 10);

method.Content = methodName;

methods.Items.Add(method);

}

isCaptain.IsChecked = false;

novice.IsChecked = true;

System.Windows.Forms.DateTimePicker memberDate = hostMemberSince.Child as System.Windows.Forms.DateTimePicker;

memberDate.Value = DateTime.Today;

}

private void clear_Click(object sender, RoutedEventArgs e)

{

this.Reset();

}

handling events in a wpf form
Handling Events in a WPF Form

private void add_Click(object sender, RoutedEventArgs e)

{

string nameAndTower = String.Format("Member name: {0} {1} from the tower at {2} rings the following methods:", firstName.Text, lastName.Text, towerNames.Text);

StringBuilder details = new StringBuilder();

details.AppendLine(nameAndTower);

foreach (CheckBox cb in methods.Items)

{

if (cb.IsChecked.Value)

{

details.AppendLine(cb.Content.ToString());

}

}

MessageBox.Show(details.ToString(), "Member Information");

}

slide55

private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)

{

MessageBoxResult key = MessageBox.Show(

"Are you sure you want to quit",

"Confirm",

MessageBoxButton.YesNo,

MessageBoxImage.Question,

MessageBoxResult.No);

e.Cancel = (key == MessageBoxResult.No);

}

}

}