====== WvdS VSCode UI Designer ======

UI Designer omogućuje vizualni PXAML razvoj u VS Code - WYSIWYG editor za Pascal-bazirana korisnička sučelja.

===== Funkcija i svrha =====

Designer nudi:

  * **Vizualni editor** - Drag-and-drop UI dizajn
  * **PXAML sintaksa** - WPF/XAML-kompatibilni markup za Pascal
  * **Pregled uživo** - Pregled u stvarnom vremenu tijekom uređivanja
  * **Properties Panel** - Vizualno uređivanje svojstava
  * **Component Palette** - Pregled dostupnih kontrola

===== Što je PXAML? =====

PXAML (Pascal XAML) je XML-bazirani markup format za korisnička sučelja, inspiriran WPF/XAML-om.

==== Primjer ====

<code xml>
<Window Title="Hello PXAML" Width="400" Height="300">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Label Grid.Row="0" Content="Dobrodošli!" FontSize="24"/>

    <StackPanel Grid.Row="1" Orientation="Vertical" Margin="10">
      <TextBox x:Name="txtInput" PlaceholderText="Unesite ime..."/>
      <Button Content="Pozdravi" Click="OnGreetClick"/>
    </StackPanel>
  </Grid>
</Window>
</code>

==== PXAML vs. LFM ====

^ Aspekt ^ PXAML ^ LFM (Lazarus) ^
| Format | XML | Vlasnički (binarni ili tekstualni) |
| Čitljivost | Visoka | Srednja |
| Kontrola verzija | Izvrsna (diff-prijateljska) | Teška |
| Designer | WvdS Designer | Lazarus IDE |
| Ciljevi | GUI, TUI, Web | Samo GUI |

===== Naredbe =====

^ Naredba ^ Tipkovnička kratica ^ Opis ^
| ''WVDS Designer: New PXAML File'' | - | Stvara novu PXAML datoteku |
| ''WVDS Designer: Toggle Designer Preview'' | - | Prebacuje između pogleda koda i dizajna |
| ''WVDS Designer: Show Properties Panel'' | - | Prikazuje panel svojstava |

===== Rad s designerom =====

==== Stvaranje PXAML datoteke ====

  - ''Ctrl+Shift+P'' -> ''WVDS Designer: New PXAML File''
  - Unesite naziv
  - Datoteka se stvara s osnovnim predloškom

==== Otvaranje pogleda dizajna ====

Kada otvorite .pxaml datoteku, Designer se automatski aktivira.

Editor prikazuje:
  * **Područje dizajna** - Vizualni prikaz UI-ja (lijevo)
  * **Properties Panel** - Svojstva odabranog elementa (desno)
  * **Toolbox** - Dostupne kontrole (lijevo dolje)

==== Pogled koda ====

Za uređivanje PXAML izvornog koda:
  - Kliknite na "Source" u alatnoj traci
  - Ili: Desni klik -> "View Source"

==== Dodavanje komponenti ====

**Drag & Drop:**
  - Povucite kontrolu iz Toolboxa
  - Ispustite je u području dizajna
  - Pozicionirajte po želji

**Putem koda:**
  - Prebacite se na pogled koda
  - Ručno dodajte element
  - Pregled se automatski ažurira

==== Uređivanje svojstava ====

  - Odaberite element u designeru
  - Properties Panel prikazuje sva dostupna svojstva
  - Mijenjajte vrijednosti direktno u panelu
  - Promjene se odmah prikazuju u pregledu

===== PXAML osnove =====

==== Namespaceovi ====

<code xml>
<Window xmlns="http://schemas.wvds.de/pxaml/2024"
        xmlns:x="http://schemas.wvds.de/pxaml/x/2024"
        xmlns:local="clr-namespace:MyApp">
</Window>
</code>

^ Namespace ^ Korištenje ^
| Standard (bez prefiksa) | Osnovne kontrole (Button, TextBox, Grid, ...) |
| x: | Markup ekstenzije (x:Name, x:Key, ...) |
| local: | Vlastiti tipovi iz projekta |

==== Layout kontejneri ====

^ Kontejner ^ Opis ^
| Grid | Layout s recima i stupcima |
| StackPanel | Slaže elemente horizontalno ili vertikalno |
| DockPanel | Sidri elemente uz rubove |
| Canvas | Apsolutno pozicioniranje |
| WrapPanel | Raspored s prijelomom |

==== Česte kontrole ====

^ Kontrola ^ Opis ^
| Button | Gumb s Click događajem |
| TextBox | Jednoredni unos teksta |
| Label | Prikaz teksta |
| CheckBox | Odabir Da/Ne |
| ComboBox | Padajući odabir |
| ListBox | Odabir s liste |
| Image | Prikaz slike |
| Border | Okvir i pozadina |

==== Data Binding ====

<code xml>
<TextBox Text="{Binding Path=UserName, Mode=TwoWay}"/>
<Label Content="{Binding Path=WelcomeMessage}"/>
</code>

==== Event handleri ====

<code xml>
<Button Content="Spremi" Click="OnSaveClick"/>
</code>

Handler se implementira u code-behind unitu:

<code pascal>
procedure TMainWindow.OnSaveClick(Sender: TObject);
begin
  // Logika spremanja
end;
</code>

===== Postavke =====

Designer koristi postavke UI Meta ekstenzije za IntelliSense i informacije o komponentama.

===== Multi-target renderiranje =====

PXAML se može renderirati za različite ciljeve:

^ Cilj ^ Opis ^ Renderer ^
| GUI | Nativno desktop sučelje | LCL-bazirano |
| TUI | Terminalno sučelje | Tekstualno |
| Web | Sučelje preglednika | HTML/CSS |

Odabir se vrši tijekom kompilacije, ne u designeru.

===== Rješavanje problema =====

==== Designer prikazuje praznu stranicu ====

**Uzrok:** PXAML sintaksna greška ili nedostaju komponente.

**Rješenje:**
  - Prebacite se na pogled koda
  - Provjerite PXAML sintaksu (XML validacija)
  - Osigurajte da sve referencirane komponente postoje

==== Pregled se ne ažurira ====

**Uzrok:** Auto-refresh je deaktiviran ili je došlo do greške.

**Rješenje:**
  - Spremite datoteku (''Ctrl+S'')
  - Ručno izvršite ''WVDS: Refresh Preview''
  - Provjerite Output Channel za greške

==== Drag & Drop ne radi ====

**Uzrok:** Pogrešno područje ili nepodržani kontejner.

**Rješenje:**
  - Osigurajte da ispuštate u području dizajna
  - Provjerite dopušta li ciljni kontejner djecu
  - Neki kontejneri (npr. Border) dopuštaju samo jedno dijete

===== Tehnički detalji =====

^ Svojstvo ^ Vrijednost ^
| Extension ID | wvds.wvds-vscode-ui-designer |
| Aktivacija | onCustomEditor:wvds.ui.designer.pxaml |
| Ovisnosti | wvds-vscode-core |
| Min. VS Code | 1.85.0 |
| Format datoteke | .pxaml |

===== Vidi također =====

  * [[.:meta|UI Meta - Registar komponenti]]
  * [[.:preview|UI Preview - Pregled uživo]]
  * [[.:projects|Projects - Predlošci projekata s PXAML-om]]