Databáze projektů: zkrášlete své formuláře pomocí souborů stylů

8 listopadu, 2019 3 Čas na přečtení

Klasické binární struktury 4D umožňují definovat soubory stylů pro zadání písma, velikosti písma a stylu textu, které se mají použít ve formulářích pro platformy MacOS i Windows. Databáze projektů umožňují jít ještě dál a definovat vlastnosti čtyřstavového tlačítka nebo zadat barvu a ohraničení všech řádkových objektů či dokonce nastavit výšku záhlaví všech políček seznamu aplikace! Inspirováno gramatikou a syntaxí CSS, 4D ji přizpůsobilo specifickým potřebám formulářů v databázích projektů 4D. Díky stylům můžete nastavit všechny vlastnosti a vytvořit tak skutečně vizuálně přitažlivé formuláře. Tento příspěvek na blogu vám ukáže, jak na to!

Ukázka databázových listů stylů

Platforma

V databázích projektů můžete definovat jednotlivé listy stylů pro obě platformy (Windows nebo macOS) a také „celkový“ list stylů.

Proč byste měli chtít různé listy stylů pro každou platformu? Protože v systému macOS se často používá jiné písmo / velikost písma než v systému Windows. Na druhou stranu barva textu je často pro obě platformy stejná.

Nyní můžete definovat společné styly v souboru „stylesheets.css“ a styly specifické pro jednotlivé platformy v jejich vlastních souborech: „stylesheets_mac.css“ a „stylesheets_windows.css“.

Vlastnosti

Jednou z hlavních revolucí v databázích projektů je, že všechny vlastnosti podporované objekty formulářů lze použít v souborech stylů.

Můžete například vytvořit třídu „buttonAction“, která vytvoří čtyřstavová tlačítka se vzhledem „toolbar“, šedým textem a bez možnosti zaostření:

.buttonAction {
  iconFrames: 4;
  style: toolbar;
  stroke: grey;
  focusable: false;
}

To usnadňuje návrh formulářů pro vaši aplikaci při zachování stejného grafického vzhledu.

Selektory

Další velkou změnou je, že můžete vytvářet styly podle tříd, typu objektu, názvu objektu nebo atributů.

Selektor typu objektu

Pomocí selektoru typu objektu (obdoba selektoru prvku CSS) můžete definovat společné vlastnosti platné pro všechny objekty v databázi. Například všechna pole seznamu musí mít dvouřádkové záhlaví, prázdné řádky by se neměly zobrazovat a barvy pozadí řádků by měly být gainsboro a whitesmoke:

listbox {
  headerHeight: 2em;
  hideExtraBlankRows: true;
  fill: gainsboro;
  alternateFill: whitesmoke;
}

Díky tomuto selektoru můžete definovat vlastní vzhled objektů formuláře.

Selektor atributů

Pomocí selektoru atributů můžete definovat styl pomocí hodnoty vlastnosti.

Například ve vstupních/výstupních datových formulářích mám tlačítka pro přidávání, úpravu nebo mazání záznamů. Všechna tato tlačítka používají stejnou ikonu, nadpis a nápovědu.

Proč nevytvořit list stylů pro akční tlačítka a určit konkrétní hodnotu vlastnosti akce? Například pokud je vlastnost akce nastavena na „editSubrecord“:

.buttonAction[action=editSubrecord] {
  icon: url("/RESOURCES/Images/Buttons/edit.png");
  tooltip: ":xliff:button_tip_EditRecord";
  text: ":xliff:button_EditRecord" !important;
}