App Builder
Teme v tem dokumentu:
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.
Slika 8: App builder save configuration
