[Axure RP8 tipp] Elem nagyságának automatikus állítása dinamikus szöveg esetén

A kihívás

Axure RP8-ban (és a régebbiekben pláne), ha két vagy több eltérő hosszúságú szöveget szeretnénk egymás alatt megjeleníteni, akkor jellemzően:

• magunk szerkesztjük be az widgeteket statikus tartalmakkal, vagy
• master widgetet használunk, esetleg
• segítségül hívjuk a repeatert.

Pl. egy listázó felületen megjelenő kártya stílus tartalommegjelenítés esetén, a fenti első esetben, ha változik valami a widget kinézetében, akkor végig kell menni egyenként az elemeken és kézzel módosítani, ami sok idő. A második esetben a hagyományos master widget jellegzetessége miatt nem lesz dinamikus vagy eltérő szövegünk a kártyákon, míg a harmadik esetben, ha a repeatert használjuk, a felső tartalom rá fog lógni az alatta lévő tartalomra.

Mivel a kártyák listázókban jelennek meg, hasznos ha szimuláljuk releváns tartalmakkal, hogy mi történik eltérő hosszúságú cím és szövegtörzs esetén.

Könnyebb úgy tervezni, ha van egy sablon, mert ha változás lép fel a sablonban, elég csak egy helyen módosítani. Erre jó a master, de ha egy elem többször ismétlődik más tartalmakkal, akkor a repeatert használunk a megfelelő formázással, az eredmény ez lesz:

Dinamikus tartalom Axure RP8-ban trükközés nélkül

Mi pedig eredménynek inkább ilyet szeretnénk:

Dinamikus tartalom Axure RP8-ban egy kis varázslattal megoldva

A második képen látható tartalom repeater segítségével készült, viszont játszani kell az OnLoad Eventekkel, ami nem egy kényelmes dolog, de mint megoldás, ezt fogom megmutatni.

Mielőtt belecsapnánk

A következő Axure alaptudás nem árt a folyamathoz:

• Dynamic Paneleknél a State-ek szerkesztése;
• Widgetek egymáshoz tolása (Snap to Widget);
• Widget stílusok kezelése (hogy be tudd formázni a widgeteket);
• Eventek és Conditionok kezelése;
• Repeaterek használata.

A megoldáshoz a kezdőlöketet ez az Axure fórum adta: https://forum.axure.com/t/resize-reflow-paragraph/33790/7
ez lett picit továbbgondolva és készült el a magyar leírás is hozzá.

Fontos megjegyzés mielőtt belevágunk

A dolognak egy szépséghibája azért van: ha egy hosszabb tartalmú dinamikus widget egy rövidebb tartalmú előtt van, akkor az utána következő rövidebb widget széttolódik, utána minden visszaáll a normál kerékvágásba. Ez független attól, hogy új sorba törik-e a következő kártya vagy sem.

Erre gondolok:

Egymást követő repeater elemek: ha egy hosszabb című szöveg egy rövidebb szöveg előtt van, a hosszabb után következő tartalom szétcsúszik, de utána visszaáll minden a normál kerékvágásba.

Egyelőre erre nem találtam megoldást, érdemes a növekvő hosszúságú tartalmakat rövid-hosszú sorrendben tenni.

Letölthető tartalmak

• Íme egy látványos, de kevésbé hasznos AxShare demo:
  http://abramov.ga/axure-dinamikus-kartyak-demo
• … és egy sokkal izgalmasabb .rp forrásfájl:
  http://abramov.ga/axure-dinamikus-kartyak-rp

Részletek

Repeater és a Dynamic Panel

Jelen példában a dinamikus tartalmú kártyák úgy működnek, hogy a repeater tulajdonságában ahány sort hozzáadsz annyi kártya jön létre.

Kártyák repeater widgeten a Properties panelen lehet a Címet és a Szövegtörzs szövegezését beállítani.

Repeater adatok beállítása

A widgeteket Dynamic Panelbe kell rejteni és mindenképpen 2 db state kell (ez fontos), mert az Axure-nek kell egy kiindulási nézet (ezt a state-et csak szerkesztőben fogod látni) és egy cél nézet (ezt a state-et érdemes szerkeszteni, formázni). Jelen példában a State2-n belül a Kártya.Cím.1 widget a lényeg: itt tudod beállítani a kártya címének formázását, pl. ha szélesebb méret kell, más háttérszínt használnál, vagy más szövegstílus tetszik.

A Kártya.Szöveg widgetben tudod beállítani a szövegtörzs formázásait.

FONTOS!! A tervezőasztalon nem fogod látni a Kártya.Cím.1 szövegét azt csak Previewban (a böngészőben) fog megjelenni a tartalom!

Eventek és Condition-ök kezelése a Dynamic Panelben

Most jön az összetettebb rész: a Dynamic Panel betöltésekor elvégzünk egy számítást, ami kiszámolja, hogy hány sorba törje be a kártya címet a benne szereplő karakterszám alapján. A kártya szövegnél azért nem végzünk ilyen számolást, mert a példánkban az a tartalom vége és ott elegendő, ha stílusformázásként Fit to Text Height (lásd lejjebb) állítunk be.

Azt javaslatom, hogy ahány sor lehetséges egy kártya címben, annyi conditiont legyen + 1 db condition arra az esetre, ha már túl hosszú lenne.

A példánkban a repeateren található OnLoad eseményre így 4 db Caset (esetet) hoztam létre, valahogy így:

Legfontosabb rész: kiszámoljuk, hogy a címet hány sorba törje.

Mit csinálnak a Case-ek?

Egy Condition (feltétel) alapján megvizsgálják, hogy a Kártya.Cím.1-ben szereplő szöveg karaketrszáma megfelel-e egy bizonyos értéknek és ha igen, akkor mit csináljon. Pl. ha a szöveg karakterhossza egyenlő vagy kevesebb, mint 35 karakter, akkor beállítja egy sornyi szövegnek megfelelő méretre a widget magasságát (itt 40px) és lefele tolja az alatta lévő widgetet.

Az Casere kattintva behozható a Case Editor, ahol szerkeszthető a “mikor?” (Condition), “mit csináljon?” (action).

Először szerkeszthetjük a Conditiont.

Edit Condition gombbal hívhatod be a feltételek szerkesztését

Itt a következőket állítsuk be:

length of widget value, ami azt figyeli, hogy hány karaktert tartalmaz egy widget.

Válaszd ki a “length of widget value”-t amivel a karaktereket fogod számolni

… melyik widgetben található szöveg karakterszámát számolja (Kártya.Cím.1)…

Válaszd ki, hogy melyik widgetet figyelje

… meddig számolja (is less than or equals)…

Állítsd be, hogy kisebb vagy nagyobb érték esetén figyelje

… és hány karakterig számolja (40)…

És megadjuk, a karakterszámot.

Ezzel be is állítottuk, hogy milyen feltétel mellett teljesüljön, ami valahogy így hangzik:
“Ha a Kártya.Cím.1 hossza (ami karakterszám és nem pixel hossz!) kisebb vagy egyenlő, mint 35"

… és ezután létrehozzuk, hogy milyen akciók (Action)teljesüljenek:

Első Action: állítsa be a kártya magasságát 40px-re…

…második Action: állítsa be a State2-t (Select State -> State 2) és tolja le (Push/Pull Widgets → Below)

Ezzel kész az egy soros cím vizsgálata és így tovább kell létrehozni a többi esetet.

Ha nem futna bele a 45-ös karakterszámba, akkor megy az alatta lévő esetre és megvizsgálja hogy 70 karakternél kevesebb és ha igen, akkor két sorba töri a szöveget, ami 54px magasságnak felel meg… és így tovább. Az utolsó eset lefedi, ha 110 karakternél sem kisebb, akkor jelenítsen meg egy hibaüzenetet, hogy tervezéskör lássuk, hogy bibi van, de itt bármilyen egyéb eset is beállítható.

Hogyan számolom ki karakterszámokat és a widget magasságokat?

Jellemzően Bootstrap 4 Gridre tervezek, így 1200px+ grid esetén a kártyákra 4 grid, tehát 350px szélességet találtam ideálisnak 30px (15–15px a két oldalra) guther mellett, így ez lesz az én fix szélességem, ezeket állítottam be a widgetek méretének meghatározásakor.

A példában szereplő Case-eket úgy terveztem meg, hogy ezt a szélességet az Axure automatikusan a Kártya.Cím.1 widgetből olvassa ki és erre a [[This.Width]] paramétert használtam a Width értéknél, míg a Heightnél már kézzel kellett beírnom az értéket — ennél nem működik, sajnos, a dinamikus érték kiszámítása, pedig mennyivel könnyebb lenne, mert akkor nem kéne a sorokkal vesződni.

Mivel a widgetekben 16-os félkövér Arial betűtípust használok, 24px-es line spacinggel, ezért a következőket határoztam meg a Kártya.Cím.1 widget magasságra:
- 1 sornyi szöveg esetén (kb. 45 karakter): 40px
- 2 sornyi szöveg esetén (kb. 70 karakter): 64px
- 3 sornyi szöveg esetén (kb. 120 karakter): 88px
- 4 sornyi szöveget nem engedek (tehát minden ami 120 karakter fölött van): 40px

Az, hogy mi az ideális magasság, azt ki kell kísérletezni a “Kártya.Cím.1” widgetben úgy, hogy megnézed különböző szöveghosszúsággal a widget magasságát: itt lejegyzed, hogy mi az a karakterszám, amivel még belefér a szöveg “n” számú sorba és mi az Axure által számolt teljes widget magassága a különböző sor számok esetén.

Arra ügyelj, hogy ha egy hosszabb szó szerepel a szövegben, ott az egész szó új sorba törik, így nem érdemes kicentizni a maximum karakterszámot, hanem érdemesebb kevesebbet számolni pl. 5 karakterrel, de ez szövegkörnyezet függő.

Amire a widgetek beállításakor ügyelj

A Dynamic Panelben a State2-ben szereplő Kártya.Cím.1 widget magasságát úgy állítsd be, ahogy szeretnéd, hogy kiférjen az 1 soros szöveg. Ez a magasságot és a szélességet vezesd át a State1-ben található 0 nevű widgetbe is.

Minden szöveget tartalmazó widget (jelen esetben a cím és a szövegtörzs) kövesse a benne található szöveg hosszúságát (Widget -> Style fül -> Location+Size szekció -> Fit to Text Height opció):

Vagy egyszerűen csak a szövegmező középső felső vagy alsó “pöttyére” duplán kattintasz, hogy sárga legyen.

Emellett ügyelj arra, hogy a bal és jobban oldali pöttyök, tehát a Fit to Text Width opció NE legyen aktív, különben addig fogja tolni a szöveget szélességben, ameddig a szöveg tart.

Minden widget érjen össze (snap), mert máskülönben szünet lesz: ezt a méretezésnél látod, egy kis kék vonal jelzi, ha megfelelően összeérnek:

Megjegyzés: A repeater előnézete az Axure szerkesztőjében nem mindig egyezik meg a böngészőben látottal: előfordulhat, ami szöveg a tervezőasztalon egy sorban van, az a böngészőben lehet, hogy két sorban lesz — ebben az esetben érdemes pár karaktert törölni vagy hozzáadni a szöveghez.

Mi van, ha több tartalmam van?

Valószínű, hogy a jelenlegi példánál több dinamikus szöveget vagy egy “Bővebben” gombot is szeretnél megjeleníteni. Ebben az esetben a dolgod “csak” annyi, hogy:

1. A Kártya.Szöveg widgetet a Kártya.Cím widgethez hasonlóan Dynamic panelbe rakd és helyezed a widget alá. Ügyelj arra, hogy összeérjenek (snap, lásd fent);
2. A Kártya.Cím alapján újabb OnLoad eventet hozz létre a Kártya.Szöveg widgetre és beállítod Case-eket a fenti logika szerint — éppen ezért nem árt ha tudod, mi a lehetséges legmagasabb mérete a widgetnek, illetve mekkora mérete van egy sornyi, két sornyi…stb. szövegnek;
3. Ha ez kész, akkor helyezd alá a kitolni kívánt tartalmat, és ügyelj arra, hogy összeérjen a két widget (snap).

Végszó

Elsőre nem egy ideális eset a fenti megoldás: kezdőknek vagy olyanoknak, akik nem szoktak Eventekkel vagy Repetarekkel dolgozni elég nagy kihívás (én mindkettőt használom rendszeresen, de kellett egy kis idő, hogy megértsem).

Viszont, ha ráérzel a logikára egész gyorsan tudsz olyan ismétlődő dolgokat tervezni, amik nagy valószínűséggel még nem véglegesek és az Axure helyetted fogja kiszámolni a matematikailag helyes értékeket és így egységes kinézetet fogsz kapni ismétlődő és azonos típusú elemek esetén.