====== WvdS VSCode UI Meta ======

UI Meta ekstenzija upravlja registrom komponenti i pruža IntelliSense podršku za PXAML datoteke.

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

Meta ekstenzija nudi:

  * **Registar komponenti** - Središnja baza podataka svih UI komponenti
  * **IntelliSense** - Automatsko dovršavanje za PXAML elemente i atribute
  * **Dokumentacija svojstava** - Inline pomoć za svojstva
  * **Informacije o tipovima** - Tipovi, zadane vrijednosti, ograničenja

===== IntelliSense funkcije =====

==== Dovršavanje elemenata ====

Započnite s ''<'' i pritisnite ''Ctrl+Space'':

{{ :de:int:vsce:fpc:p:meta-element-completion.png?400 |Dovršavanje elemenata}}

Lista prikazuje sve dostupne kontrole s:
  * Nazivom elementa
  * Kratkim opisom
  * Ikonom (ako je dostupna)

==== Dovršavanje atributa ====

Unutar elementa ''Ctrl+Space'' prikazuje dostupne atribute:

<code xml>
<Button | >  <!-- Kursor ovdje, pritisnite Ctrl+Space -->
</code>

Prikazuju se:
  * Sva svojstva kontrole
  * Attached Properties (Grid.Row, DockPanel.Dock, ...)
  * Događaji (Click, MouseEnter, ...)

==== Dovršavanje vrijednosti ====

Kod atributa s definiranim vrijednostima:

<code xml>
<TextBox TextAlignment="|"/>  <!-- Kursor ovdje -->
</code>

Prijedlozi: ''Left'', ''Center'', ''Right'', ''Justify''

==== Quick Info ====

Hover iznad elementa ili atributa prikazuje dokumentaciju:

{{ :de:int:vsce:fpc:p:meta-quickinfo.png?400 |Quick Info}}

===== Naredbe =====

^ Naredba ^ Opis ^
| ''WVDS: Refresh Component Registry'' | Ponovno učitava metapodatke komponenti |

===== Kategorije komponenti =====

Registar organizira komponente po kategorijama:

^ Kategorija ^ Sadržane kontrole ^
| Layout | Grid, StackPanel, DockPanel, WrapPanel, Canvas |
| Input | TextBox, PasswordBox, ComboBox, CheckBox, RadioButton |
| Display | Label, TextBlock, Image, Border, Separator |
| Action | Button, ToggleButton, RepeatButton, MenuButton |
| Lists | ListBox, ListView, TreeView, DataGrid |
| Navigation | TabControl, TabItem, Menu, Toolbar |
| Containers | GroupBox, Expander, ScrollViewer, Popup |

===== Tipovi svojstava =====

Registar poznaje različite tipove svojstava:

^ Tip ^ Primjer ^ IntelliSense ponašanje ^
| String | Text="Hello" | Slobodan unos |
| Number | Width="200" | Numerički unos |
| Boolean | IsEnabled="True" | Odabir True/False |
| Enum | Visibility="Visible" | Prikaži enum vrijednosti |
| Brush | Background="Red" | Birač boja ili nazivi brusheva |
| Thickness | Margin="10,5,10,5" | Četiri vrijednosti (L,T,R,B) |

===== Prilagođene komponente ====

Vlastite komponente mogu se dodati u registar.

==== Registracija putem anotacije ====

U Pascal komponenti:

<code pascal>
type
  {$M+}
  [ComponentInfo('MyButton', 'Custom button with icon', 'Controls')]
  TMyButton = class(TWvdSButton)
  published
    [PropertyInfo('Icon path', 'Images')]
    property IconPath: string read FIconPath write SetIconPath;
  end;
</code>

==== Registracija putem JSON-a ====

Alternativno putem datoteke metapodataka:

<code json>
{
  "components": [
    {
      "name": "MyButton",
      "description": "Custom button with icon",
      "category": "Controls",
      "properties": [
        {
          "name": "IconPath",
          "type": "string",
          "description": "Path to the icon image"
        }
      ]
    }
  ]
}
</code>

===== Postavke =====

Meta ekstenzija nema direktnih postavki. Koristi konfiguraciju Core ekstenzije.

===== Upravljanje cacheem =====

Metapodaci komponenti cachiraju se za brži pristup.

==== Ažuriranje cachea ====

Kod promjena na komponentama:
  - Izvršite ''WVDS: Refresh Component Registry''
  - Ili: Ponovno pokrenite VS Code

==== Lokacija cachea ====

  * Windows: ''%APPDATA%\Code\User\globalStorage\wvds.wvds-vscode-ui-meta''
  * Linux: ''~/.config/Code/User/globalStorage/wvds.wvds-vscode-ui-meta''
  * macOS: ''~/Library/Application Support/Code/User/globalStorage/wvds.wvds-vscode-ui-meta''

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

==== IntelliSense ne radi ====

**Uzrok:** Registar nije učitan ili datoteka nije prepoznata.

**Rješenje:**
  - Osigurajte da je ekstenzija datoteke .pxaml
  - Izvršite ''WVDS: Refresh Component Registry''
  - Provjerite Output Channel za greške

==== Nedostaju komponente ====

**Uzrok:** Komponenta nije registrirana ili je cache zastario.

**Rješenje:**
  - Ažurirajte registar
  - Provjerite je li komponenta ispravno anotirana
  - Osigurajte da se unit kompilira

==== Prikazuju se pogrešne vrijednosti svojstava ====

**Uzrok:** Metapodaci su zastarjeli ili neispravni.

**Rješenje:**
  - Ažurirajte registar
  - Provjerite anotaciju svojstva
  - Prijavite neispravne standardne komponente na GitHub

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

^ Svojstvo ^ Vrijednost ^
| Extension ID | wvds.wvds-vscode-ui-meta |
| Aktivacija | onLanguage:pxaml, onLanguage:pascal |
| Ovisnosti | wvds-vscode-core |
| Min. VS Code | 1.85.0 |

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

  * [[.:designer|UI Designer - Vizualni editor]]
  * [[.:preview|UI Preview - Pregled uživo]]
  * [[..:i:meta-api|Meta API za razvijatelje]] (Interno)