Izrada responzivnih aplikacija od gotovih gradivnih elemenata

Responzivnost se odnosi na sposobnost aplikacije da se automatski uskladi s različitim veličinama zaslona i formatima hardvera kako bi se dostupni prostor na zaslonu razumno iskoristio uz pružanje sjajnog korisničkog sučelja i korisničkog doživljaja na svakom uređaju, formatu hardvera i veličini zaslona.

Responzivnost omogućuje različitim elementima aplikacije da odrede kako:

• rastežu se ili mijenjaju veličinu s promjenama veličine zaslona

• zadržavaju ili mijenjaju položaje s promjenama veličine zaslona

Zašto biste trebali izraditi responzivne aplikacije

Krajnji korisnici mogu pristupiti vašoj aplikaciji s različitih uređaja, poput telefona, tableta, prijenosnih računala i stolnih računala s velikim monitorima, različitim veličinama zaslona i različitim brojem piksela.

Da bi se osiguralo dobro korisničko iskustvo i upotrebljivost aplikacije na svakom formatu hardvera i uređaju, potrebno je dizajnirati aplikacije s principima responzivnog dizajna. Čak i ako je aplikacija namijenjena korištenju samo u web-pregledniku ili na mobilnim telefonima, veličine zaslona korisničkih uređaja mogu se razlikovati, pa je dobra ideja dizajnirati aplikaciju s responzivnim principima.

Dizajniranje aplikacije s principima responzivnosti

Prije nego što započnete s dizajniranjem korisničkog sučelja za svoju aplikaciju, morate uzeti u obzir sljedeće aspekte:

• Koje formate hardvera ili uređaje želite podržati?

• Kako bi aplikacija trebala izgledati na svakom formatu hardvera?

• Koji se elementi aplikacije trebaju rastegnuti ili promijeniti veličinu?

• Jesu li elementi skriveni na nekim formatima hardvera?

• Ponaša li se aplikacija drugačije u nekim formatima hardvera?

Nakon sastavljanja svih ovih zahtjeva, trebate početi razmišljati o tome kako se ti različiti rasporedi korisničkog sučelja mogu stvoriti u jednoj aplikaciji s responzivnim alatima dostupnim u servisu Power Apps.

Prije nego što počnete koristiti responzivne rasporede, morate učiniti sljedeće:

1. Idite na Power Apps.

2. Otvorite aplikaciju u kojoj želite koristiti responzivni raspored.

3. Idite na Zaslon postavki>da biste onemogućili Prilagodite , Zaključaj omjer slike iZaključaj orijentaciju i odaberite Primijeni .

   

Responzivni rasporedi

Sljedeći responzivni izgledi mogu se stvoriti dodavanjem novog zaslona i odabirom odgovarajuće opcije na kartici Izgled :

Napomena

Novi responzivni izgledi dostupni su formatima aplikacija, ali novi predlošci zaslona dostupni su samo za format tableta .

Podijeljeni zaslon

Raspored podijeljenog zaslona ima dva odjeljka i svaki zauzima 50% širine zaslona na stolnim računalima. Na mobilnim uređajima odjeljci se smještaju jedan ispod drugog, a svaki zauzima cijelu širinu zaslona.

Bočna traka

Raspored Bočna traka ima bočnu traku fiksne širine s lijeve strane. Glavno tijelo sastoji se od zaglavlja fiksne visine, a glavni odjeljak zauzima ostatak širine zaslona. Predložak prema zadanim postavkama ima isto ponašanje na mobilnom uređaju, no preporučuju se neka prilagođavanja na temelju željenog uzorka korisničkog sučelja za mobilno iskustvo.

Rad sa spremnicima

Spremnici su sastavni blokovi cjelokupnog responzivnog dizajna. Spremnik može biti spremnik s automatskim rasporedom u okomitom ili vodoravnom smjeru ili spremnik s fiksnim rasporedom, koji će u budućnosti podržavati ograničenja.

U nastavku je nekoliko savjeta za izgradnju korisničkog sučelja aplikacije sa spremnicima:

• Uvijek stvarajte elemente korisničkog sučelja koji čine tablicu korisničkog sučelja unutar spremnika.

• Omogućuje spremniku da ima svoja responzivna svojstva i postavke za određivanje kako se smješta ili mijenja veličinu na različitim veličinama zaslona.

• Omogućuje vam promjenu rasporeda njegovih podređenih komponenata u odnosu na responzivnost.

Odaberite jedan od dva načina rasporeda spremnika: ručni raspored ili automatski raspored (horizontalni ili vertikalni)

Spremnici za automatski raspored

Dvije kontrole, vodoravni spremnik i okomiti spremnik mogu se koristiti za automatsko postavljanje podređenih komponenti. Ti spremnici određuju položaj podređenih komponenata tako da nikada ne morate postaviti X, Y kao komponentu unutar spremnika. Također, on može rasporediti raspoloživi prostor svojim podređenim komponentama na temelju postavki, a određuje i okomito i vodoravno poravnanje podređenih komponenata.

Kada koristiti spremnike za automatski raspored

Spremnike za automatski raspored možete koristiti u sljedećim scenarijima:

• Korisničko sučelje mora biti responzivno prema promjenama veličine zaslona ili formata hardvera.
• Postoji više od jedne podređene komponente koja treba promijeniti veličinu ili se premještati ovisno o promjenama veličine zaslona ili formata hardvera.
• Kada stavke trebate složiti vertikalno ili horizontalno (bez obzira na njihovu veličinu).
• Kada trebate ravnomjerno rasporediti stavke na zaslonu.

Primjer spremnika za automatski raspored

Da biste izradili responzivni zaslon:

1. Stvorite praznu aplikaciju radnog područja s rasporedom tableta .

2. Odaberite Postavke>Prikaz i onemogućite Skaliraj za uklapanje, Zaključaj omjer slike i Zaključaj orijentaciju i odaberite Primijeni.

3. Sada u oknima Umetanje u lijevoj bočnoj traci, pod karticom Izgled , odaberite Vodoravni spremnik .

   

4. Spremniku na vrhu mora se odrediti veličina tako da zauzme čitav prostor s tim svojstvima. Bit će iste veličine kao i zaslon dok mu se mijenja veličina.

   1. X = 0
   2. Y = 0
   3. Širina = Nadređena širina
   4. Visina = Nadređena. Visina

5. Sada iz okna Umetanje dodajte dva okomita spremnika u vodoravni spremnik.

   

6. Da biste napravili spremnike, ispunite cijeli okomiti prostor, odaberite Spremnik1 i postavite svojstvo Align (vertical) na Stretch.

   

7. Da biste zaslon podijelili između sadržaja, upotrijebite svojstvo Fill portions na dva podređena spremnika. Lijevi spremnik zauzet će 1/4 prostora na zaslonu.

   1. Odaberite Spremnik2. Vidjet ćete da je entitet Flexible width uključen. Postavite na Fill portions 1.
   2. Odaberite Spremnik3. Vidjet ćete da je entitet Flexible width uključen. Postavite na Fill portions 3.

8. Odaberite Spremnik2. Postavite svojstvo Fill = RGBA(56, 96, 178, 1) u traci formule. Postavite Align (horizontal) na Stretch.

9. Dodajte nekoliko gumba za stvaranje izbornika. Prema potrebi preimenujte gumbe.

   

10. Odaberite Spremnik3 i dodajte Vodoravni spremnik i isključite Flexible height svojstvo. Postavite Height na 100. Postavite Align (vertical) na Stretch.

11. Dodajte neke ikone u Container4. Promijenite ikone tako da se razlikuju pomoću svojstva ikone.

    

12. Odaberite Spremnik4. Postavite svojstvo Justify (horizontal) na End. Postavite na Align (vertical)Center. Postavite Gap na 40 da biste stvorili razmak između ikona.

13. Odaberite Spremnik3. Postavite Align (horizontal) na Stretch. Postavite Vertical Overflow na Scroll.

14. Dodajte različite naljepnice, ulaze, medije dok se ne prošire izvan spremnika. Promijenite boju pravokutnika da bude drugačija. Vidjet ćete klizač za pristup skrivenom sadržaju.

    

15. Odaberite Pretpregled ili F5. Promijenite veličinu prozora preglednika da biste vidjeli kako se vaša aplikacija prilagođava različitim veličinama zaslona.

Poznati problemi

• Određene kombinacije svojstava spremnika rasporeda nisu kompatibilne ili mogu proizvesti neželjene rezultate, na primjer:

  • Ako je svojstvo spremnika Wrap omogućeno, postavka Align svojstva zanemaruje se na podređenim kontrolama.
  • Ako je svojstvo spremnika Wrap onemogućeno, a preljev primarne osi spremnika postavljen je na Pomicanje ( vodoravno prelijevanje za vodoravne spremnike ili okomito prelijevanje za okomite spremnike), preporučuje se postavljanje Justify svojstva na Start ili Razmak između.
  • Mogućnosti Središnje ili Kraj mogu uzrokovati nedostupnost podređenih kontrola kada je spremnik premalen za prikaz svih kontrola, čak i ako je svojstvo postavljeno Overflow na Pomicanje.

• Ne možete promijeniti veličinu kontrola niti premjestiti ih u aplikaciji od gotovih gradivnih elemenata jer su kontrole povlačenja i ispuštanja onemogućene u spremnicima rasporeda. Umjesto toga, upotrijebite svojstva spremnika rasporeda da biste postigli željenu veličinu i smještaj. Redoslijed kontrole može se promijeniti putem prikaza stabla ili korištenjem tipki sa strelicama kao prečaca.

• Kontrole Tablica podataka, Grafikoni i Dodaj sliku trenutno nisu podržane u spremnicima izgleda.

• Neka su svojstva spremnika rasporeda skrivena za podređene kontrole. Skrivenim svojstvima i dalje se može pristupiti putem trake s formulama ili s naprednog panela. Međutim, ta će se svojstva zanemariti čak i ako su postavljena na tim mjestima.

• Kada se kontrole premjeste u spremnik izgleda (na primjer, prilikom kopiranja ili lijepljenja kontrola), one se umeću u spremnik prema redoslijedu u prikazu stabla.

Pogledajte

Stvaranje responzivnih izgleda