Docs: App Builder

Mon, 01 Jan 0001 00:00:00 +0000

Teme v tem dokumentu:

Knjižnica
Vmesnik graditelja
Konfiguracija
- Gradniki
- Meni

Za dostop do tega razdelka v EV Charge v Meni izberite Sistemska konfiguracija in kliknite Graditelj aplikacij.

Knjižnica

Za dostop do tega razdelka kliknite Graditelj aplikacij. Seznam vseh ustvarjenih predlog aplikacij je prikazan v tabeli, ki prikazuje njihovo ime (Name), status (Status, npr. Published ali Draft) in datum ustvarjanja.

Slika 1: App Builder template library

Za filtriranje predlog po imenu lahko uporabite iskalno vrstico na vrhu. Za vsako predlogo lahko ogledate ali spremenite njeno specifično konfiguracijo s klikom na ikono Ogled/Urejanje .

Za ustvarjanje nove predloge aplikacije kliknite + Template. Odprlo se bo modalno okno, v katerega morate vnesti ime predloge. Po ustvarjanju lahko začnete konfigurirati njeno postavitev.

Slika 2: Add template modal

Konfiguracija

Po izbiri predloge preko ikone Ogled/Urejanje boste vstopili v vmesnik graditelja.

Na sredini zaslona se nahaja vizualni emulator telefona (Phone Emulator). To območje dinamično predstavlja uporabniški vmesnik aplikacije in prikazuje približek tega, kako se bodo konfigurirani gradniki in noge pojavili na mobilni napravi.

Zaslon emulatorja je razdeljen na tri območja, kamor lahko postavite gradnike:

Top – Dodatno območje, prikazano nad glavno vsebino, ki se običajno uporablja za iskalne vrstice, filtre ali HTML (ang. HyperText Markup Language) pasice po meri.
Center – Glavno območje vsebine. To je glavni pogled, ki ga uporabniki vidijo, ko odprejo zaslon v aplikaciji (npr. seznam postaj, zemljevid ali pregled računa). Gradniki, postavljeni tukaj, tvorijo jedro funkcionalnosti zaslona.
Bottom – Dodatno območje pod glavno vsebino, ki se uporablja za dodatne kontrolnike ali elemente po meri.

Slika 3: Phone emulator interface

Vmesnik graditelja

Desna stranska vrstica vsebuje primarna konfiguracijska orodja, organizirana v dveh zavihkih: Widgets in Menu settings.

Gradniki

Zavihek Widgets vam omogoča prilagajanje vsebine posameznih zaslonov v aplikaciji.

Slika 4: Widgets tab configuration

Select screen to build: S spustnega menija izberite, kateri specifični zaslon aplikacije želite konfigurirati (npr. Stations > Map, Stations > List, Account, Sessions).
Drag and drop widgets: Pod izbiro zaslona je knjižnica razpoložljivih gradnikov za izbrani zaslon. Povlecite in jih spustite v ustrezna območja (Top, Center, Bottom) na emulatorju telefona (Phone Emulator).
- Primeri za Stations List vključujejo: Search and filter, Station list, Camera button, Custom HTML.
- Primeri za Account vključujejo: Car list, Card list, Nastavitve, Delete account.

Ko je gradnik dodan v emulator telefona, lahko konfigurirate njegovo postavitev in vedenje s klikom na ikono Nastavitve neposredno na gradniku.

Slika 5: Widget settings configuration

Desna stranska vrstica bo prikazala specifična konfiguracijska polja za to vrsto gradnika:

Position: Nastavite relativno vodoravno in navpično postavitev (levo, desno, zgoraj, spodaj kot odstotke).
Padding and Margin: Prilagodite notranji in zunanji razmik gradnika v pikslih.
Label: Za nekatere gradnike lahko prilagodite prikazano besedilo oznake.

Če želite izbrisati gradnik, kliknite ikono Izbriši na gradniku v emulatorju.

Meni

Zavihek Meni se uporablja za konfiguracijo spodnje navigacijske noge aplikacije.

Slika 6: Menu settings tab configuration

Active Menu Tabs: Lahko prerazporedite in upravljate zavihke, ki so trenutno vidni uporabnikom v nogi aplikacije (omejeno na največ 5 aktivnih zavihkov).
Unused Menu Tabs: Prikazuje razpoložljive funkcije in zaslone, ki trenutno niso vključeni v spodnjo navigacijo. Povlecite elemente sem, da jih skrijete iz noge.

Konfigurirate lahko tudi nastavitve za strukturna območja v emulatorju. V emulatorju kliknite ikono Nastavitve poleg oznak “Top area” ali “Bottom area”, da prilagodite lastnosti, kot je nastavitev območja, da je vedno vidno (“Always visible”).

Slika 7: Menu settings configuration

Po vseh potrebnih spremembah kliknite gumb Shrani, da uveljavite spremembe na predlogi aplikacije.