Projektowanie komponentów wizualnych

Projektowanie komponentów wizualnychWOJCIECH

Agenda

Czym są kontrolki niestandardowe?

Case study

Rodzaje komponentów

Elementy WinAPI

Architektura i implementacja prostych kontrolek

Podsumowanie

Kilka faktów

Konkretne rozwiązania

Programowanie (relatywnie) niskopoziomowe

Pomysły są autorskie

Czym są komponenty niestandardowe?

Kontrolki standardowe

Czym są komponenty niestandardowe?

Kontrolki niestandardowe

Od zera? Dlaczego?Ścisłe wymagania (internetowe kontrolki są zwykle generyczne)Problem: budżet (często $1000+ za stanowisko)Brak kontroli nad źródłemProjektowanie architektury (kierunek rozwoju)Alternatywa: internetowe repozytoria lub Open Source

Kiedy nie pisać osobnych kontrolek?

Czy naprawdę jest potrzebna?Gotowa kontrolka już istniejePodobna kontrolka już istniejeSpecjalny wygląd aplikacji (z wyjątkami)

Case study

Case study: SpkToolbar- Brak analogicznego (darmowego) rozwiązania

- Bardziej kontrolowane rozwiązanie niż oryginalny Ribbon dla Delphi

- Obecnie OpenSource na LCCR (Lazarus Code & Components Repository)- Używany w aplikacjach OpenSource (link)

Case study: ProCalc

- Ścisłe powiązanie z architekturą aplikacji

- Renderowanie przy pomocy Direct2D i Direct3D

Case study: ProTranscriber

- Brak darmowego odpowiednika- Wymagana specyficzna funkcjonalność- Powiązanie z architekturą aplikacji

Case study: Virtual treeview

- Brak wymaganej funkcjonalności w standardowym komponencie

- Brak tego typu komponentu w Internecie (tylko naśladujące)

- Dostępny jako Open Source na Codeplex (hasło: Spk.Controls)

Case study: NodeLab

- Bardzo specyficzne wymagania

- Powiązanie z architekturą aplikacji

Rodzaje komponentów

Rodzaje komponentówCustom controls – kontrolki „od zera”User controls – kontrolki kompozytowe

- Reużywalne fragmenty aplikacji- Złożone z innych kontrolek

- Zawierają pewną logikę

- Odcinają od wewnętrznej struktury- Ograniczona funkcjonalność

- Projektowane dla ściśle konkretnego celu

- Implementowane w całości przez programistę

- Zawierają dużo wewnętrznej logiki (związanej z wyświetlaniem i interakcją z użytkownikiem)

Rodzaje komponentówWyjątek - WPF

<UserControl x:Name="rootControl"x:Class="Webnodes.OntologyDesigner.Common.Controls.BackControl"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:vs="clr-namespace:Microsoft.VisualStudio.Shell..."mc:Ignorable="d">

<Button Width="24" Height="24" Command="{Binding ElementName=rootControl, Path=BackCommand}"><Button.Template>

<ControlTemplate TargetType="{x:Type Button}"><Viewbox Stretch="Uniform">

<Canvas Width="16" Height="16"><Path x:Name="Background" Fill="Transparent">

<Path.Data><PathGeometry Figures="M 16 8 A 8 8 ..." FillRule="NonZero"/>

</Path.Data></Path><Path x:Name="Circle" Fill="{DynamicResource GrayIconColor}">

<Path.Data><PathGeometry Figures="M 8 0 C 3.581722..." FillRule="NonZero"/>

</Path.Data></Path><Path x:Name="Arrow" Fill="{DynamicResource GrayIconColor}">

<Path.Data><PathGeometry Figures="m 3 8 4 -4 3 0 ..." FillRule="nonzero"/>

</Path.Data></Path>

</Canvas></Viewbox>

<ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True">

<Setter TargetName="Background" Property="Fill"Value="{DynamicResource {x:Static vs:VsBrushes.HighlightKey}}" />

<Setter TargetName="Circle" Property="Fill"Value="Transparent" />

<Setter TargetName="Arrow" Property="Fill"Value="{DynamicResource {x:Static vs:VsBrushes.ButtonFaceKey}}" />

</Trigger></ControlTemplate.Triggers>

</ControlTemplate></Button.Template>

</Button></UserControl>

Komponent kompozytowy

Komponent kompozytowy

Jednolity wygląd aplikacji (i konsekwencje)

Dodatkowa funkcjonalność (walidacja)

Wygodny interface użytkownikaWygodne API

Architektura - API

Odcinamy użytkownika od wewnętrznych komponentów

Publikujemy własności i zdarzenia wynikające z przeznaczenia komponentu

public string Username { get; set; }

public string Password { get; set; }

[Browsable(false)]

public bool UsernameValid { get; }

[Browsable(false)]

public bool PasswordValid { get; }

public event EventHandler UserValidChanged;

public event EventHandler PasswordValidChanged;

Architektura – zdarzeniaChronione, wirtualne triggery zdarzeń

protected virtual void OnUserValidChanged(){

if (UserValidChanged != null)UserValidChanged(this, EventArgs.Empty);

}

private void SetUserValid(bool value){

(...)

if (changed)OnUserValidChanged();

}

public event EventHandler UserValidChanged;

Architektura – zdarzenia- Modyfikacja oryginalnej funkcjonalności (przed, po, zamiast)

- Decyzja o zgłaszaniu zdarzenia

- Ułatwia rozwój kontrolki (zwiększa elastyczność)

protected override void OnResize(EventArgs e){

if (Height != 60)Height = 60;

base.OnResize(e); }

Użycie komponentu

private void CheckCanConfirm(){

bOK.Enabled = pbPassword.UsernameValid && pbPassword.PasswordValid;}

private void HandleValidChanged(object sender, EventArgs e){

CheckCanConfirm();}

public MainForm(){

InitializeComponent();CheckCanConfirm();

}

Komponent niestandardowy

Komponent niestandardowy- Start small: przycisk

- Standardowe zachowanie – obserwacja standardowego przycisku

- Wygląd - TODO

Podstawy WinAPI

(Square Enix)

Podstawy WinAPI

Okno

Okno

Okno

OknoOkno

Okno

Okno

Okno Okno

Okno

Okno

Podstawy WinAPI

Window

OK

Handle

Handle

• Size• Style• Icon, small icon• Cursor• Background• MenuName• Text

Dygresja - WPF

Window

OK

Handle

Podstawy WinAPI - zdarzenia

WindowsUżytkownikMouseMove Kolejka

komunikatów

WM_MouseMove

512

WndProc(implementacja .NET WinForms)

GetMessage()

OnMouseMoveMouseMove

Użytkownik System operacyjny

.NET FrameworkProgram

OnMouseMove

Podstawy WinAPI - kolejka komunikatów

WM_SHOW

WM_MOUSEDOWN

WM_MOUSEUP

WM_MOUSEMOVE

WM_MOUSEMOVE

WM_MOUSEDOWN

(System operacyjny)

Wciśnięcie przycisku myszy

Puszczenie przycisku myszy

Przesunięcie myszy

Przesunięcie myszy

Wciśnięcie przycisku myszy

Podstawy WinAPI - responsywność

Aplikacja tworząca okno na pulpicie wchodzi w kontrakt z DWMem –zobowiązuje się do płynnego przetwarzania komunikatów

Jeśli żaden komunikat nie został zdjęty z kolejki w przeciągu 5 sekund, okno jest oznaczone jako zawieszone

Wniosek: musimy dbać o przetwarzanie komunikatów w możliwie jak najkrótszym czasie.

Podstawy WinAPI – WM_PAINT

WM_SHOW

WM_MOUSEDOWN

WM_MOUSEUP

WM_PAINT

WM_MOUSEMOVE

WM_MOUSEDOWN

(System operacyjny)

Wciśnięcie przycisku myszy

Puszczenie przycisku myszy

Invalidate()

Przesunięcie myszy

Wciśnięcie przycisku myszy

Architektura – WinAPI - wnioski

Komunikaty muszą być przetwarzane na bieżąco – najlepiej natychmiast

Wszystkie czasochłonne operacje muszą zostać przesunięte do osobnego wątku

Możemy przechwytywać niskopoziomowe komunikaty w WndProc◦ Ale wszystkie najważniejsze są obsłużone w WinFormsach

Możemy wysyłać komunikaty w celu osiągnięcia konkretnego efektu

Możemy bezkarnie wołać Invalidate() bez wpływu na wydajność◦ Stąd wniosek: czasochłonne (synchroniczne) operacje warto realizować leniwie

Architektura komponentu

Pomysł na architekturę: mysia maszyna stanu

Idle

Pressed Pressed - canceledHoverMouseDown

MouseUp

MouseLeave

MouseEnter

MouseUpMouseEnterprivate enum MouseMode{

Idle,Hover,Pressed,PressedCanceled

}

Implementacja

Implementacja - OnMouseEnter

protected override void OnMouseEnter(EventArgs e){

if (mouseMode == MouseMode.Idle){

mouseMode = MouseMode.Hover;Invalidate();

}

base.OnMouseEnter(e);}

Implementacja - OnMouseLeave

protected override void OnMouseLeave(EventArgs e){

if (mouseMode == MouseMode.Hover){

mouseMode = MouseMode.Idle;Invalidate();

}

base.OnMouseLeave(e);}

Implementacja - OnMouseDown

protected override void OnMouseDown(MouseEventArgs e){

if (mouseMode == MouseMode.Hover){

if (e.Button == MouseButtons.Left){

mouseMode = MouseMode.Pressed;

Invalidate();}

}

base.OnMouseDown(e);}

Implementacja - OnMouseUpprotected override void OnMouseUp(MouseEventArgs e){

if (mouseMode == MouseMode.Pressed){

mouseMode = MouseMode.Hover;

Invalidate();

OnButtonClick();}else if (mouseMode == MouseMode.PressedCanceled){

mouseMode = MouseMode.Idle;

Invalidate();}

base.OnMouseUp(e);}

Implementacja - OnMouseMoveprotected override void OnMouseMove(MouseEventArgs e){

if (mouseMode == MouseMode.Pressed){

if (!this.ClientRectangle.Contains(e.Location)){

mouseMode = MouseMode.PressedCanceled;

Invalidate();}

}else if (mouseMode == MouseMode.PressedCanceled){

if (this.ClientRectangle.Contains(e.Location)){

mouseMode = MouseMode.Pressed;

Invalidate();}

}

base.OnMouseMove(e);}

Implementacja - ctor

public MyButton()

{

this.ResizeRedraw = true;

this.DoubleBuffered = true;

mouseMode = MouseMode.Idle;

}

Implementacja - doublebufferingBez doublebufferingu

Hover

Ramka

Tło

Tekst

Z doublebufferingiem

Hover

Ramka

Tło

Tekst

Hover Render

Live demo

Co zapamiętać?Piszmy kontrolki, gdy są naprawdę potrzebne

Kompozytowa czy niestandardowa?

Maksymalnie wygodny interface (zarówno graficzny jak API)

Kolejka komunikatów WinAPI

Szybka obsługa komunikatów (reponsywność)

Długie obliczenia: synchroniczne – leniwie; asynchroniczne – do osobnego wątku

Komponent - mysia maszyna stanu

Doublebuffering

Co następnym razem?

- Obszar roboczy

- Matematyka: układy współrzędnych

- Metryki

Pytania

?