Csonka enikő alkalmazási élmény bemutatása

1

p.XML alkalmazási élmény

Csonka EnikőCsonka Enikő

2013. január 16.2013. január 16.

Miről lesz szó?

Felhasználói élmény

JForm Designer

TranTools

Felhasználói élmény

Hogyan alakul ki a felhasználói élmény?

Tetszik Nem tetszik Semleges / nem fontos

"Tetszik a design, de nem tetszik, hogy sokat kell várni egy gomb megnyomása után."

Hogyan növelhető a felhasználói élmény egy alkalmazáson belül: a szimpatikus dolgok arányának növelésével

(pl. gyors, egyértelmű navigálás a képernyők között),

a zavaró dolgok arányának csökkentésével (pl. nincsenek helyesírási hibák).

Felhasználói élmény

Fontos az alkalmazás „tudása” ÉS minél egyszerűbb és könnyebb használhatóság

A részleteken múlik, hogy szívesen használunk-e egy alkalmazást. Érdemes beépíteni a p.XML fejlesztésbe a mai „trendeket”,

nézőpontokat. Cél -> elérni, hogy a felhasználó szívesen használja az alkalmazást,

amit készítünk!

JForm képernyők elkészítésének szempontjai

1. Egységes felépítés

2. Könnyen érthetőek, áttekinthetőek legyenek a képernyők.

3. A lehető legkevesebb kattintásra legyen szükség.

4. A felhasználónak a lehető legkevesebbet kelljen gépelnie.

5. Segítsük, kísérjük a felhasználót a program használata során.

Mitől lehet jó a design?Legyen kellemes a színvilág (Hosszabb ideig nézve se fárassza

túlságosan a szemet.)

Legyen egy saját hangulata, passzoljon az alkalmazáshoz.

Jól láthatóak legyenek a feliratok

Az alkalmazás célját jelképező képek használatával hangulatosabbá, egyedibbé válik a design.

Alkalmazhatunk ikonokat gomb feliratok helyett (pl. egy nagyító ikon a "keresés" felirat helyett).

JFORM Designer

JFORM Designer

- Nyílt szabványokra épülő,

- XML alapú,

- Felhasználói felület (GUI) leíró nyelv

- JFormok megjelenítését egy Java-alapú vékony-kliens végzi

- Asszinkron, HTTP-alapú üzenetküldés

- Operációs rendszertől, géptípustól, böngésző típustól függetlenül egységesen jelennek meg.

JFORM DesignerInteraktív webalkalmazások létrehozása.

A weblap kis mennyiségű adatot cserél a szerverrel a háttérben.

Nő a honlap interaktivitása, sebessége és használhatósága.

Egy böngésző ablakban több alkalmazás elindítható.

A többszálú feldolgozás.

A grafikus felület "motorja" egy egyedülállóan kicsi Java-applet, amely tartalmaz:

• grafikus komponens-készletet • gyors XML-értelmezőt• aszinkron kommunikációs interfészt

JFORM Designer előnyök, képességek

WYSWYG szerkesztő PersonalJava kompatibilis Szabványos; XForms-szabányra

épül Menü-rendszerek Használhatóak magasszintű

komponensek Háttér-képek és ikonok Felbukkanó segédszövegek

Fókusz-sorrend megadása Központosított verzió-kezelés Billentyűzet-parancsok Stíluslapok hozzáadása Validált mezők Hálózati tömörítés

JFORM Designer és az Eclipse

Többféle futtatási környezet

• Indítható önálló alkalmazásként

• Beépül az Eclipse-be grafikus szerkesztő plug-in formájában• Egyéb plug-in-re nincs szükség• Egy JFORM szövegszerkesztővel is megnyitható• Designer súgó beépül az Eclipse ‘Table of Contents’ témakörei

közé• F2 gombra magyar nyelvű súgó• Designer beállításai is beépülnek az Eclipse ‘Prefences…’

menüpontja alá• JFORM mentésekor meghívódik PXBuilder: automatikusan

legenerálja/ módosítja a JFORM-hoz tartozó forráskódot

JFORM Designer és az Eclipse

JFORM Designer - Nemzetközi kódlapok használataA kliens a szervertől kapott lap kódolásának megfelelően változtatja meg

saját kimenő adatainak kódolását.

A "Window/Preferences..." menüpontban állítható be, hogy a tervező melyik kódolást használja (Eclipse plug-in)

JFORM dokumentum felépítése

<?xml version="1.0" encoding="UTF-8"?><WINDOW height="255" id="window" width="360"> <title>Bejelentkezés</title> <style>greenwindow</style> <content> <PANEL href="../_Page/href.Header1000"/> <LABEL id="lab1" x="0" y="10" width="360" height="25"> <text>PhysioSensor Adatkezelő Rendszer</text> <font>Dialog,15,bold</font> <alignment>center</alignment> <foreground/> </LABEL>

... <BUTTON id="but3" x="50" y="185" width="23" height="18"> <style>pagebutton</style> <model>#AUTO</model> <action>_Session/LANGEN</action> <wallpaper>../www/images/zaszlo_en.gif</wallpaper> <wallpaper-mode>stretched</wallpaper-mode> <validated>false</validated> </BUTTON> </content></WINDOW>

Eseménykezelés

Az eseménykezelés JFORM kliensben azt jelenti, hogy a felhasználó pl. egy gombra kattintva, egy meghatározott XML-struktúrát elküld a szervernek,

és a válaszként kapott - vagyis a szerver által visszaküldött - lapot megjeleníti.

Ez a funkció nagyon hasonlít a HTML-lapok "submit" funkciójához.

Egy küldésre képes komponensnek (gombnak, menüpontnak, stb.) különböző paramétereket lehet megadni:

- Engedélyezi, vagy letiltja az eseménykezelést

- p.XML-alapú alkalmazásoknál ezt a paramétert főleg nyomtatandó lapok letöltéséhez (url)

- Megadható, hogy a kliens foglalkozzon-e a hibásan kitöltött szövegmezőkkel, szám-mezőkkel, dátum-komponensekkel, stb.

Grafikus komponensek

Komponensek

Komponensek

Komponensek

Komponensek

Ablakkezelés

Az operációs rendszer ablakkezelője felel a felső szintű ablakok mozgatásáért, átméretezéséért, ő rajzolja ki:• a címsort,• az ablakkereteket, • a tálcát, • az ikonokat,

Modális ablakok

A menük kezelése

Menüsor Felbukkanó (popup) menü

Képek kezelése

A kép komponens segítségével

lehet a felhasználói felületre helyezni

GIF, vagy JPG formátumú képeket.

Felbukkanó menüvel rendelkezhet.

Keretének típusa és annak színei

tetszőlegesen megváltoztathatóak.

Hátterének egy másik képet is be lehet állítani.

Interaktív képekAzonnali adatküldés kiválasztáskor

A kép képes az adatmodellek azonnali elküldésére (kattintás hatására)

Amennyiben a felhasználó a térkép bármely pontjára rákattint a kliens azonnal elküldi a "model" azonosítójú adatmodellt a szervernek. Az adatmodell "xpos" és "ypos" változói a kép megfelelő koordinátáit fogják tartalmazni.

Képek megjelenítése

Képek kezelése

Képek kezelése

Képek kezelése

Grafikonok készítéseAdatok, eredmények könnyen áttekinthető formában kerüljenek

megjelenítésre.

Több adatsort is meg lehet jeleníteni

Meghatározható, hogy a kirajzolt diagram mellett jelenjen-e meg a numerikus érték.

Grafikonok készítése

Táblázatok

Táblázatok kezelése

Ikonok

Minden szöveg típusú komponenshez

hozzárendelhetünk ikont

Ikonok

Dátumok kezeléseDátumok különböző formátumokban, különböző nyelveken történő

megjelenítése és kezelésére

A JFORM kliens dátumok kezelése céljából két grafikus komponenst bocsát a fejlesztők rendelkezésére; a naptár komponenst, és a dátum-mező komponenst

Az alkalmazás-logikának kell kezelnie a különböző nyelvektől függő dátum és számmezők formátumával kapcsolatos paramétereket

Fa struktúrák

A felhasználó könnyen eligazodjon a különböző vezérlő-elemek és funkciók között.

Ha túl sok az információ => a felhasználó nem igazodik el rajta.

Ha túl kevés vezérlő-elem => a felhasználó kénytelen állandóan az ablakok között váltogatni

Mindezek elkerülésére => fa-komponens

könnyű navigálni benne,

a felhasználó az őt érdeklő részeket kinyitogathatja, egészen a levelekig

A billentyűzet támogatása

Munka nagy részét a felhasználók a billentyűzettel végzik

A dialógusdobozokban is lehessen navigálni (TAB, SHIFT+TAB, ENTER, ESC, stb).

Gomb komponens, segédszöveggel és gyorsbillentyűvel

A billentyűzet támogatása

A komponensek között körkörös sorrend definiálása

A stílusokról

A JFORM Designerben használatos stílus-technika működése hasonló a HTML-szintaktikában szokásos "Cascading Style Sheets" szabványhoz;

A stílus-technika használatával a lapok mérete jelentősen csökkenthető

Egységesen változtathatjuk meg az alkalmazás képét.

Célszerű a használatba kerülő stílusok neveit már az alkalmazás tervezésekor meghatározni

Egy beállított stílus több képernyőn keresztül is megmarad, amíg az alkalmazás fut, vagy nem kerül átdefiniálásra, vagy törlésre.

Beépített stílusok

Egyéni stílusokEgy konkrét alkalmazáshoz többféle design is létezhet, melyek között gombnyomásra tudunk választani. Itt

a színeken felül az egyes elemek méretét, kinézetét is változtathatjuk.

Header képe függhet a stílustól A grafikus komponensek és azok pozíciója fix

Képernyő méretezésA képernyőképeket méretarányos "húzással" és fix méretek közötti

változtatással is állíthatjuk.

Képernyő méretezésÁtállítom a méretarányt 800x600 -> 1020x700–ra:

Többnyelvűsítés

TranTools

p.XML eszköz alkalmazások többnyelvűsítésére

Segítségével az ügyfelek akár saját maguk is végezhetik az alkalmazásaik többnyelvűsítését

TranTools

Támogatja a végfelhasználót, hogy alkalmazásait többnyelvűsíthesse

- Önálló termék

- Nyelvfüggő objektumok, amelyek fordításra kerülnek:

ablak leírások (.jform)

panel leírások (.xml)

Kódlisták (.xml)

szövegek (.xml)

címek (.xml)

kódértékek (adatbázisban tárolt listák)

súgók (.html)

TranTools tulajdonságok

- Felhasználóbarát interface

- Menürendszer egyszerű

- Képes párhuzamosan több projekt kezelésére!!

- A használni kívánt nyelv futás közben változtatható anélkül, hogy az üzleti logika sérülne

- Kódtáblák nyelvfüggő információinak fordítása

- Képes legenerálni a teljes vagy rész nyelvfüggő forrásokat

- Korábbi fordítások mentődnek

- Frissíti a segédkönyvtár tartalmát

TranTools működése

- Beolvassa az alkalmazás installációs fájlját (.ear)

- Kicsomagolja azt egy segédkönyvtárba

- Összegyűjti a nyelvfüggő adatokat Excel munkalapra - fordításra

- A lefordított eredményt (Excel) visszatölti a megfelelő helyekre

- Exportálja/importálja a HTML információkat a fordításhoz

- Új verziójú .ear fájlt generál, amely tartalmazza már az új nyelvvel kiegészített forrásokat

Hogyan működik a TranTools?A TranTools kezeli az többnyelvűsítendő alkalmazás két fő részét:

• a projektet

• az adatbázisban tárolt kódtáblákat

Fő lépések a TranTools-ban:

Új projekt betöltése az installációs fájlból (.ear)

TranTools menüje

Projekt információ

Nyelvek beállítása

Nyelvi adatok exportja Excel munkalapra:

Nyelvi adatokat tartalmazó - még üres - Excel munkalap

Nyelvi adatokat tartalmazó – már kitöltött - Excel munkalap

Lefordított szövegek visszatöltésének indítása

Lefordított szövegek visszatöltésének eredménye

Fordítás után legenerálhatjuk a nyelv függő objektumokat

Generálás után ellenőrizzük az eredményt

A hibalistában szereplő tételek javítása, új .ear generálás

Javítási lehetőségek:

• Kijavítjuk a szövegeket az Excel munkalapon pl. rövidítünk

• A képernyőn átszervezzük az objektumokat, hogy legyen elég hely a hosszabb feliratoknak is

Ha minden javítást megtettünk,

Akkor elkészítjük az új

telepíthető csomagot.

Telepítés után

A telepítés után lehetőség van kiválasztani akár az alkalmazás kezdő – pl. Bejelentkező - képernyőjén, hogy melyik nyelven kívánjuk az alkalmazást használni:

Már többnyelvűsített projekt frissítése időről-időre: (Upgrade project…)

Adatbázisban tárolt adatok többnyelvűsítése

Adatbázisban tárolt adatok többnyelvűsítése

A többnyelvű kódérték megjelenik az adatbázis táblában

Példaképernyők

Példaképernyők

Példaképernyők

Köszönöm a figyelmet!