Workflow za kreiranje novih UI-Controla za WvdS FPC RAD Suite.

Control se sastoji od više slojeva:

Pri kreiranju Controla definirajte ove varijable:

Definirajte javni API Controla:

Properties:

(* Minimalni skup javnih Properties *)
property Value: TDateTime read FValue write SetValue;
property Format: string read FFormat write SetFormat;
property MinDate: TDateTime read FMinDate write FMinDate;
property MaxDate: TDateTime read FMaxDate write FMaxDate;
property ReadOnly: Boolean read FReadOnly write FReadOnly;

Events:

(* Potrebni Events *)
property OnValueChanged: TWvdSNotifyEvent read FOnValueChanged write FOnValueChanged;
property OnValidating: TWvdSValidateEvent read FOnValidating write FOnValidating;

TargetCaps:

Kreirajte target-neutralnu Model-Unit:

Putanja: ~/sources/common/ui/controls/{category}/WvdS.UI.Controls.{Category}.{ControlId}.pas

unit WvdS.UI.Controls.Editors.DateEdit;
 
{$mode objfpc}{$H+}
 
interface
 
uses
  WvdS.UI.Core.Base,
  WvdS.UI.Core.Events;
 
type
  (*
    @abstract(Polje za unos datuma s Kalender-Popupom)
 
    Target-neutralni Model za DateEdit.
    Ne sadrži ovisnosti o Renderingu ili Hostu.
  *)
  TWvdSDateEdit = class(TWvdSControl)
  private
    FValue: TDateTime;
    FFormat: string;
    FOnValueChanged: TWvdSNotifyEvent;
    procedure SetValue(AValue: TDateTime);
  protected
    procedure DoValueChanged; virtual;
  public
    constructor Create(AOwner: TWvdSComponent); override;
    property Value: TDateTime read FValue write SetValue;
    property Format: string read FFormat write FFormat;
    property OnValueChanged: TWvdSNotifyEvent read FOnValueChanged write FOnValueChanged;
  end;
 
implementation
 
(* Implementacija bez Target-specifičnog koda *)
 
end.

Za svaki Target u {TARGETS} kreirajte Renderer:

Putanja: ~/sources/common/ui/targets/tui/renderers/WvdS.UI.TUI.Renderers.DateEdit.pas

unit WvdS.UI.TUI.Renderers.DateEdit;
 
{$mode objfpc}{$H+}
 
interface
 
uses
  WvdS.UI.TUI.Renderer.Base,
  WvdS.UI.Controls.Editors.DateEdit;
 
type
  TWvdSTUIDateEditRenderer = class(TWvdSTUIRenderer)
  public
    procedure Measure(AControl: TWvdSControl; out AWidth, AHeight: Integer); override;
    procedure Paint(AControl: TWvdSControl; ACanvas: TWvdSTUICanvas); override;
    procedure HandleInput(AControl: TWvdSControl; AEvent: TWvdSInputEvent); override;
  end;
 
implementation
 
procedure TWvdSTUIDateEditRenderer.Measure(AControl: TWvdSControl; out AWidth, AHeight: Integer);
begin
  AWidth := 12;  (* [YYYY-MM-DD] *)
  AHeight := 1;
end;
 
procedure TWvdSTUIDateEditRenderer.Paint(AControl: TWvdSControl; ACanvas: TWvdSTUICanvas);
var
  DateEdit: TWvdSDateEdit;
begin
  DateEdit := AControl as TWvdSDateEdit;
  ACanvas.DrawText(0, 0, FormatDateTime(DateEdit.Format, DateEdit.Value));
end;
 
procedure TWvdSTUIDateEditRenderer.HandleInput(AControl: TWvdSControl; AEvent: TWvdSInputEvent);
begin
  (* Keyboard-Handling za promjenu datuma *)
end;
 
end.

Putanja: ~/sources/common/ui/targets/gui/renderers/WvdS.UI.Desktop.Renderers.DateEdit.pas

Putanja: ~/sources/common/ui/targets/web/renderers/WvdS.UI.Web.Renderers.DateEdit.pas

Kreirajte Pack-Manifest za PXAML-Resolver:

Putanja: ~/packs/controls/{control_id}/pack.wvds.json

{
  "id": "dateedit",
  "vendor": "wvds",
  "version": "0.1.0",
  "xml": {
    "namespace": "wvds",
    "tag": "DateEdit"
  },
  "model": {
    "unit": "WvdS.UI.Controls.Editors.DateEdit",
    "class": "TWvdSDateEdit"
  },
  "renderers": {
    "tui": {
      "unit": "WvdS.UI.TUI.Renderers.DateEdit",
      "class": "TWvdSTUIDateEditRenderer"
    },
    "desktop": {
      "unit": "WvdS.UI.Desktop.Renderers.DateEdit",
      "class": "TWvdSDesktopDateEditRenderer"
    },
    "web": {
      "unit": "WvdS.UI.Web.Renderers.DateEdit",
      "class": "TWvdSWebDateEditRenderer"
    }
  },
  "targetCaps": {
    "requires": ["keyboard"],
    "optional": ["mouse", "popup"]
  }
}

Kreirajte Designer-Metapodatke za Toolbox i Properties:

Dodajte Descriptor u: ~/sources/common/core/meta/WvdS.Meta.Controls.Editors.pas

procedure RegisterDateEditMeta(ARegistry: TMetaRegistry);
var
  TypeMeta: TTypeMeta;
begin
  TypeMeta := CreateTypeMeta('DateEdit', 'TWvdSDateEdit', 'Editors');
  TypeMeta.Description := 'Polje za unos datuma s Kalender-Popupom';
  TypeMeta.Icon := 'calendar';
 
  (* Properties *)
  TypeMeta.AddProperty(CreatePropertyMeta('Value', pkDateTime, 'Trenutna vrijednost datuma'));
  TypeMeta.AddProperty(CreatePropertyMeta('Format', pkString, 'Format prikaza (npr. yyyy-mm-dd)'));
  TypeMeta.AddProperty(CreatePropertyMeta('MinDate', pkDateTime, 'Najraniji dozvoljeni datum'));
  TypeMeta.AddProperty(CreatePropertyMeta('MaxDate', pkDateTime, 'Najkasniji dozvoljeni datum'));
  TypeMeta.AddProperty(CreatePropertyMeta('ReadOnly', pkBoolean, 'Način samo za čitanje'));
 
  (* Events *)
  TypeMeta.AddEvent(CreateEventMeta('OnValueChanged', 'Aktivira se kada se Value promijeni'));
  TypeMeta.AddEvent(CreateEventMeta('OnValidating', 'Aktivira se prije promjene vrijednosti'));
 
  ARegistry.RegisterType(TypeMeta);
end;

Registrirajte Control u Runtime-Registries:

pxamlc Compiler automatski čita pack.wvds.json iz ~/packs/.

Za svaki Target ažurirajte Renderer-Registry:

(* U WvdS.UI.TUI.Render.Registry.pas *)
procedure RegisterTUIRenderers;
begin
  (* ... ostali Rendereri ... *)
  RegisterRenderer(TWvdSDateEdit, TWvdSTUIDateEditRenderer);
end;

Kreirajte API-dokumentaciju za Control:

Putanja: ~/docs/api/controls/dateedit.md

# TWvdSDateEdit
 
Polje za unos datuma s opcionalnim Kalender-Popupom.
 
## Kada koristiti
 
- Korisnik treba unijeti datum
- Ograničavanje raspona datuma (MinDate/MaxDate)
- Potreban formatirani prikaz datuma
 
## Properties
 
| Property | Tip | Opis |
|----------|-----|------|
| Value | TDateTime | Trenutna vrijednost datuma |
| Format | string | Format prikaza |
| MinDate | TDateTime | Najraniji dozvoljeni datum |
| MaxDate | TDateTime | Najkasniji dozvoljeni datum |
| ReadOnly | Boolean | Način samo za čitanje |
 
## Events
 
| Event | Opis |
|-------|------|
| OnValueChanged | Aktivira se kada se Value promijeni |
| OnValidating | Omogućuje validaciju prije promjene vrijednosti |
 
## Primjer
 
```xml
<DateEdit Value="{Binding BirthDate}"
          Format="dd.MM.yyyy"
          MinDate="1900-01-01"
          MaxDate="2100-12-31" />
```

Control je završen kada:

[ ] VS Code Designer može postaviti {PXAML_NS}:{PXAML_TAG}
[ ] Properties se mogu uređivati u Designeru
[ ] Preview u Designeru funkcionira
[ ] Target Build (tui/desktop/web) kompilira uspješno
[ ] Pack Manifest prisutan i prepoznat od Resolvera
[ ] API-dokumentacija napisana

• PXAML-Pipeline
• Pack-Struktura
• Build-Targets
• Meta API