====== Instalacija kontrola ======

Upute za instalaciju WvdS UI Control ekstenzija.

===== Preduvjeti =====

  * Visual Studio Code 1.85.0 ili noviji
  * WvdS FPC RAD Suite Core ekstenzija

===== Instalacija putem Marketplacea =====

<note tip>Ovo je preporučeni način za krajnje korisnike.</note>

  - Otvorite VS Code
  - Otvorite Extensions panel (''Ctrl+Shift+X'')
  - Potražite ''WvdS UI''
  - Instalirajte željene kontrole

===== Instalacija putem VSIX-a =====

==== Pojedinačna ekstenzija ====

<code powershell>
code --install-extension wvds-vscode-ui-button-0.1.0.vsix
</code>

==== Sve kontrole ====

<code powershell>
# PowerShell
Get-ChildItem "*.vsix" | ForEach-Object {
    code --install-extension $_.FullName
}
</code>

===== Dostupni paketi =====

==== Basic Controls ====

| Paket | Sadržaj |
^ wvds-vscode-ui-label | Label |
^ wvds-vscode-ui-button | Button |
^ wvds-vscode-ui-textbox | TextBox |
^ wvds-vscode-ui-checkbox | CheckBox |
^ wvds-vscode-ui-radiobutton | RadioButton |
^ wvds-vscode-ui-image | Image |
^ wvds-vscode-ui-progressbar | ProgressBar |
^ wvds-vscode-ui-slider | Slider |
^ wvds-vscode-ui-togglebutton | ToggleButton |
^ wvds-vscode-ui-hyperlink | Hyperlink |
^ wvds-vscode-ui-border | Border |
^ wvds-vscode-ui-separator | Separator |

==== Editor Controls ====

| Paket | Sadržaj |
^ wvds-vscode-ui-textedit | TextEdit |
^ wvds-vscode-ui-memoedit | MemoEdit |
^ wvds-vscode-ui-spinedit | SpinEdit |
^ wvds-vscode-ui-dateedit | DateEdit |
^ wvds-vscode-ui-timeedit | TimeEdit |
^ wvds-vscode-ui-calcedit | CalcEdit |
^ wvds-vscode-ui-coloredit | ColorEdit |
^ wvds-vscode-ui-maskedit | MaskEdit |
^ wvds-vscode-ui-comboboxedit | ComboBoxEdit |
^ wvds-vscode-ui-tokenedit | TokenEdit |
^ wvds-vscode-ui-ratingcontrol | RatingControl |

==== Data Controls ====

| Paket | Sadržaj |
^ wvds-vscode-ui-datagrid | DataGrid |
^ wvds-vscode-ui-treelist | TreeList |
^ wvds-vscode-ui-cardview | CardView |
^ wvds-vscode-ui-pivotgrid | PivotGrid |

==== Chart Controls ====

| Paket | Sadržaj |
^ wvds-vscode-ui-chart | Chart (baza) |
^ wvds-vscode-ui-sparkline | Sparkline |

==== Gauge Controls ====

| Paket | Sadržaj |
^ wvds-vscode-ui-circulargauge | CircularGauge |
^ wvds-vscode-ui-lineargauge | LinearGauge |
^ wvds-vscode-ui-digitalgauge | DigitalGauge |
^ wvds-vscode-ui-stateindicator | StateIndicator |
^ wvds-vscode-ui-led | LED |
^ wvds-vscode-ui-thermometer | Thermometer |

===== Nakon instalacije =====

==== Aktivacija IntelliSensea ====

Nakon instalacije u PXAML datotekama dostupno je:

  * **Snippet dovršavanje** - Upišite ''wvds-'' za prijedloge
  * **Tag dovršavanje** - Upišite ''<'' za listu kontrola

==== Korištenje snippeta ====

  - Otvorite PXAML datoteku
  - Upišite ''wvds-button''
  - Pritisnite Enter
  - Button snippet se umeće

<code xml>
<Button
    Name="button1"
    Caption="Click Me"
    OnClick="OnButtonClick"
/>
</code>

===== Deinstalacija =====

<code powershell>
# Pojedinačna ekstenzija
code --uninstall-extension ArmandoFilho.wvds-vscode-ui-button

# Sve WvdS UI ekstenzije
code --list-extensions | Where-Object { $_ -like "*wvds-vscode-ui*" } | ForEach-Object {
    code --uninstall-extension $_
}
</code>

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

==== Ekstenzija se ne učitava ====

  - Ponovno pokrenite VS Code
  - Otvorite Developer Tools (''Ctrl+Shift+I'')
  - Provjerite Console za greške

==== Snippeti ne rade ====

  - Provjerite ima li datoteka ''.pxaml'' ekstenziju
  - Provjerite Language Mode (mora biti ''PXAML'')

==== Problemi s performansama ====

Kod mnogo instaliranih ekstenzija:

  - Instalirajte samo potrebne kontrole
  - Deaktivirajte nekorištene ekstenzije

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

  * [[.:controls|Pregled kontrola]]
  * [[.:designer|UI Designer]]
  * [[.:installation|Osnovna instalacija]]