1. p.XML alkalmazási élmény
Csonka Enikő
2013. január 16.
1

2. Miről lesz szó?
Felhasználói élmény
JForm Designer
TranTools

3. 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).

4. 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!

5. 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.

6. 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).

7. JFORM Designer

8. 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.

9. JFORM Designer
Interaktí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

10. JFORM Designer előnyök, képességek
 WYSWYG szerkesztő  Fókusz-sorrend megadása
 PersonalJava kompatibilis  Központosított verzió-kezelés
 Szabványos; XForms-szabányra  Billentyűzet-parancsok
épül  Stíluslapok hozzáadása
 Menü-rendszerek  Validált mezők
 Használhatóak magasszintű  Hálózati tömörítés
komponensek
 Háttér-képek és ikonok
 Felbukkanó segédszövegek

11. 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

12. JFORM Designer és az Eclipse

13. JFORM Designer - Nemzetközi kódlapok használata
A 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)

14. 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>

15. 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.

16. Grafikus komponensek

17. Komponensek

20. Komponensek

21. Komponensek

23. Komponensek

24. 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

25. A menük kezelése
Menüsor Felbukkanó (popup) menü

28. 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.

29. Interaktív képek
Azonnali 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.

30. Képek megjelenítése

31. Képek kezelése

32. Képek kezelése

33. Képek kezelése

34. Grafikonok készítése
Adatok, 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.

35. Grafikonok készítése

36. Táblázatok

37. Táblázatok kezelése

40. Ikonok
Minden szöveg típusú komponenshez
hozzárendelhetünk ikont

41. Ikonok

42. Dátumok kezelése
Dá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

43. 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

44. 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

45. A billentyűzet támogatása
A komponensek között körkörös sorrend definiálása

46. 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.

47. Beépített stílusok

48. Egyéni stílusok
Egy 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

49. Képernyő méretezés
A képernyőképeket méretarányos "húzással" és fix méretek közötti
változtatással is állíthatjuk.

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

51. Többnyelvűsítés

52. 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

53. 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)

54. 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

55. 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

56. 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)

57. TranTools menüje

58. Projekt információ

59. Nyelvek beállítása

60. Nyelvi adatok exportja Excel munkalapra:

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

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

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

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

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

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

67. 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.

68. 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:

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

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

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

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

73. Példaképernyők

74. Példaképernyők

75. Példaképernyők

76. Köszönöm a figyelmet!