Rozšiřte svou aplikaci Qodly o vlastní komponenty

4D Qodly Pro již nabízí širokou škálu nativních komponent, které vám pomohou při návrhu aplikací. Věděli jste ale, že ji můžete posunout ještě dál? Díky vlastním komponentám vyvinutým komunitou můžete své projekty obohatit o funkce šité na míru!

Tyto vlastní komponenty umožňují rozšířit možnosti aplikace 4D Qodly Propřidáním přizpůsobených funkcí, podobně jako pluginy a komponenty v aplikaci 4D.

V tomto článku prozkoumáme, jak tyto komponenty používat a integrovat, spolu s několika reálnými případy použití z naší aplikace Performance Review.

Aplikace Performance Review

Co je to vlastní komponenta?

Vlastní komponenty jsou stavební bloky vytvořené uživateli za účelem splnění specifických potřeb nebo přidání funkcí, které nejsou zahrnuty ve vestavěných komponentách aplikace 4D Qodly Pro. Jsou vyvinuty v Reactu a poskytují vývojářům výkonný a flexibilní základ.

Integrace vlastních komponent do Qodly Studia nabízí několik výhod:

• Rozšiřitelnost: Přizpůsobte si stránky tak, aby přesně odpovídaly požadavkům vašeho projektu.
• Znovupoužitelnost: Sdílejte své komponenty v různých projektech nebo s komunitou Qodly.
• Efektivita: Šetřete čas používáním předpřipravených komponent namísto začínání od nuly.

Jak používat vlastní komponenty?

1. Vyberte si komponentu
   • Projděte repozitář GitHub s vlastními komponentami a vyberte tu, kterou potřebujete.
2. Stáhněte si nejnovější verzi
   • Klikněte na vybranou komponentu.
   • Přejděte do sekce Releases.
   • Stáhněte si nejnovější verzi (soubor ZIP). Ujistěte se, že jste v sekci Releases, abyste získali předkompilovanou verzi, nikoli zdrojový kód.
3. Nainstalujte do aplikace Qodly Studio
   • V sekci Komponenty klikněte na tlačítko Nahrát komponentu.
   • Přetáhněte stažený soubor ZIP nebo jej vyberte.
   • Klikněte na tlačítko Instalovat komponentu a poté na tlačítko Znovu načíst.
   • Komponenta se nyní objeví v sekci Vlastní mezi dostupnými komponentami.
   • Nyní ji můžete přetáhnout přímo na stránku.

Další informace naleznete v oficiální dokumentaci: Nahrát vlastní komponentu.

Jak vytvořit vlastní Vlastní komponentu?

Pokud nemůžete najít komponentu, která by vyhovovala vašim potřebám, můžete si vytvořit vlastní.

Rozhraní API 4D Qodly Pro zjednodušuje vytváření vlastních komponent v Reactu pomocí specializovaného nástroje CLI, @qodly/cli. Tento nástroj zjednodušuje inicializaci projektu React a umožňuje vývojářům navrhovat a sdílet opakovaně použitelné komponenty. Po integraci lze tyto komponenty přidávat do stránek jednoduchým přetažením.

Další podrobnosti najdete v oficiální dokumentaci.

Jak mohou vlastní komponenty vylepšit vaši aplikaci?

V aplikaci Performance Review jsme integrovali několik Vlastních komponent, které vylepšují uživatelské prostředí. Zde je několik konkrétních příkladů:

• Zobrazení dokumentu PDF pomocí komponenty pdfViewer.
• Stažení souboru pomocí komponenty fileDownload.
• Vytvoření dynamické nabídky pomocí komponenty Popover.
• Vytvoření nástroje pro výběr roku kombinací komponent Popover a DatePicker.

Zobrazení dokumentů: Integrujte soubor PDF s nástrojem pdfViewer

Použijeme komponentu pdfViewer.

Kroky pro integraci prohlížeče PDF:

• Stáhněte a nainstalujte komponentu pdfViewer, jak je popsáno v předchozí části.
• Přetáhněte komponentu na stránku a propojte ji s datovým zdrojem „selectedReview.DocumentPDF“, který obsahuje PDF.

• Dokument se pak dynamicky zobrazí na stránce.

Tato komponenta je obzvláště užitečná při zobrazování dokumentů dynamicky generovaných ze šablony 4D Write Pro a dat z databáze.

Stažení souboru PDF pomocí komponenty fileDownload

Komponenta fileDownload umožňuje stahovat dokumenty.

Kroky k vytvoření možnosti stažení souboru:

• Nainstalujte komponentu fileDownload.
• Přetáhněte komponentu na stránku a propojte zdroj dat, který obsahuje soubor PDF ke stažení. V tomto případě je datovým zdrojem „selectedReview.DocumentPDF“.

• Po konfiguraci umožníte uživatelům pouhým kliknutím soubor stáhnout.

Vytvoření interaktivní nabídky s popoverem

V naší aplikaci Performance Review jsme do horní části stránky integrovali nabídku umístěnou nad widgetem Page Loader. Tato nabídka dynamicky určuje stránku, která se má načíst v rámci komponenty Page Loader. Nabídku jsme vytvořili pomocí komponenty popover.

Kroky k vytvoření nabídky:

• Nainstalujte komponentu popover.
• Přetáhněte komponentu popover na stránku.
• Do části nabídky vložte statický text s názvem Lidské zdroje.
• Do nadsekce vložte tři tlačítka s názvy Spolupracovník, Recenze a Školení.

Několika úpravami stylu získáme funkční a ergonomickou nabídku:

Doladěním designu, úpravou rozestupů, barev a efektů při najetí myší můžete v aplikaci Qodly vytvořit bezproblémovou a uživatelsky přívětivou navigaci.

Vytvoření vlastní nabídky DatePicker s popoverem a DatePicker

4D Qodly Pro nabízí nativní komponentu pro výběr data. V aplikaci Performance Review jsme se však rozhodli použít vlastní komponentu DatePicker, protože její design lépe vyhovoval našim potřebám. To nám také umožnilo demonstrovat kombinaci vlastních komponent.

Kroky k vytvoření vlastního zadávání roku:

• Přetáhněte na stránku rámeček Style Box.
• Do rámečku Style Box přidejte vstupní text ve formátu čísla.
• Vložte vyskakovací komponentu uvnitř rámečku Style Box.
• Do části nabídky vyskakovacího okna vložte ikonu pro otevření voliče data.
• Do části nad vložte komponentu DatePicker.
• K vstupnímu textu a komponentě DatePicker přidejte zdroj dat.

Po několika úpravách stylu (ohraničení, barvy atd.) je zde výsledek:

Tento přístup kombinuje flexibilitu a přizpůsobený design, což zvyšuje uživatelský komfort.

Další kroky

Vlastní komponenty jsou výkonným řešením, jak vylepšit aplikace Qodly a splnit specifické potřeby bez složitého vývoje. Prozkoumejte repozitář GitHub pro komponenty a objevte ještě více možností.

Pokud jste vytvořili vlastní komponentu, podělte se o ni s komunitou Qodly!

Chcete-li se dostat dále, podívejte se na toto výukové video: Jak přidat vlastní komponenty do aplikace Qodly.