WvdS VSCode UI Meta

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

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

Započnite s < i pritisnite Ctrl+Space:

Lista prikazuje sve dostupne kontrole s:

• Nazivom elementa
• Kratkim opisom
• Ikonom (ako je dostupna)

Unutar elementa Ctrl+Space prikazuje dostupne atribute:

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

Prikazuju se:

• Sva svojstva kontrole
• Attached Properties (Grid.Row, DockPanel.Dock, …)
• Događaji (Click, MouseEnter, …)

Kod atributa s definiranim vrijednostima:

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

Prijedlozi: Left, Center, Right, Justify

Hover iznad elementa ili atributa prikazuje dokumentaciju:

Registar organizira komponente po kategorijama:

Registar poznaje različite tipove svojstava:

Vlastite komponente mogu se dodati u registar.

U Pascal komponenti:

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;

Alternativno putem datoteke metapodataka:

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

Meta ekstenzija nema direktnih postavki. Koristi konfiguraciju Core ekstenzije.

Metapodaci komponenti cachiraju se za brži pristup.

Kod promjena na komponentama:

1. Izvršite WVDS: Refresh Component Registry
2. Ili: Ponovno pokrenite VS Code

• 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

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

Rješenje:

1. Osigurajte da je ekstenzija datoteke .pxaml
2. Izvršite WVDS: Refresh Component Registry
3. Provjerite Output Channel za greške

Uzrok: Komponenta nije registrirana ili je cache zastario.

Rješenje:

1. Ažurirajte registar
2. Provjerite je li komponenta ispravno anotirana
3. Osigurajte da se unit kompilira

Uzrok: Metapodaci su zastarjeli ili neispravni.

Rješenje:

1. Ažurirajte registar
2. Provjerite anotaciju svojstva
3. Prijavite neispravne standardne komponente na GitHub

• UI Designer - Vizualni editor
• UI Preview - Pregled uživo
• Meta API za razvijatelje (Interno)