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

2,600 views

Published on

  • Be the first to comment

  • Be the first to like this

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

  1. 1. p.XML alkalmazási élmény Csonka Enikő 2013. január 16.1
  2. 2. Miről lesz szó?Felhasználói élményJForm DesignerTranTools
  3. 3. Felhasználói élményHogyan 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. 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. 5. JForm képernyők elkészítésének szempontjai1. Egységes felépítés2. 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. 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 feliratokAz 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. 7. JFORM Designer
  8. 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. 9. 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
  10. 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. 11. JFORM Designer és az EclipseTö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. 12. JFORM Designer és az Eclipse
  13. 13. 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)
  14. 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. 15. EseménykezelésAz eseménykezelés JFORM kliensben azt jelenti, hogy a felhasználó pl.egy gombra kattintva, egy meghatározott XML-struktúrát elküld aszervernek,és a válaszként kapott - vagyis a szerver által visszaküldött - lapotmegjelení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. 16. Grafikus komponensek
  17. 17. Komponensek
  18. 18. Komponensek
  19. 19. Komponensek
  20. 20. Komponensek
  21. 21. AblakkezelésAz 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
  22. 22. A menük kezeléseMenüsor Felbukkanó (popup) menü
  23. 23. 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.
  24. 24. Interaktív képekAzonnali adatküldés kiválasztáskorA 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.
  25. 25. Képek megjelenítése
  26. 26. Képek kezelése
  27. 27. Képek kezelése
  28. 28. Képek kezelése
  29. 29. Grafikonok készítéseAdatok, eredmények könnyen áttekinthető formában kerüljenek megjelenítésre.Több adatsort is meg lehet jeleníteniMeghatározható, hogy a kirajzolt diagram mellett jelenjen-e meg a numerikus érték.
  30. 30. Grafikonok készítése
  31. 31. Táblázatok
  32. 32. Táblázatok kezelése
  33. 33. IkonokMinden szöveg típusú komponenshez hozzárendelhetünk ikont
  34. 34. Ikonok
  35. 35. 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éreA 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ő komponenstAz 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
  36. 36. Fa struktúrákA 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áltogatniMindezek elkerülésére => fa-komponens könnyű navigálni benne, a felhasználó az őt érdeklő részeket kinyitogathatja, egészen a levelekig
  37. 37. A billentyűzet támogatásaMunka nagy részét a felhasználók a billentyűzettel végzikA dialógusdobozokban is lehessen navigálni (TAB, SHIFT+TAB,ENTER, ESC, stb). Gomb komponens, segédszöveggel és gyorsbillentyűvel
  38. 38. A billentyűzet támogatásaA komponensek között körkörös sorrend definiálása
  39. 39. A stílusokrólA 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ározniEgy 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.
  40. 40. Beépített stílusok
  41. 41. 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ólA grafikus komponensek és azok pozíciója fix
  42. 42. 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.
  43. 43. Képernyő méretezésÁtállítom a méretarányt 800x600 -> 1020x700–ra:
  44. 44. Többnyelvűsítés
  45. 45. TranToolsp.XML eszköz alkalmazások többnyelvűsítéséreSegítségével az ügyfelek akár saját maguk is végezhetik az alkalmazásaik többnyelvűsítését
  46. 46. TranToolsTá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)
  47. 47. 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
  48. 48. 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
  49. 49. 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ákatFő lépések a TranTools-ban: Új projekt betöltése az installációs fájlból (.ear)
  50. 50. TranTools menüje
  51. 51. Projekt információ
  52. 52. Nyelvek beállítása
  53. 53. Nyelvi adatok exportja Excel munkalapra:
  54. 54. Nyelvi adatokat tartalmazó - még üres - Excel munkalap
  55. 55. Nyelvi adatokat tartalmazó – már kitöltött - Excel munkalap
  56. 56. Lefordított szövegek visszatöltésének indítása
  57. 57. Lefordított szövegek visszatöltésének eredménye
  58. 58. Fordítás után legenerálhatjuk a nyelv függő objektumokat
  59. 59. Generálás után ellenőrizzük az eredményt
  60. 60. A hibalistában szereplő tételek javítása, új .ear generálásJaví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 isHa minden javítást megtettünk,Akkor elkészítjük az újtelepíthető csomagot.
  61. 61. Telepítés utánA 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:
  62. 62. Már többnyelvűsített projekt frissítése időről-időre: (Upgrade project…)
  63. 63. Adatbázisban tárolt adatok többnyelvűsítése
  64. 64. Adatbázisban tárolt adatok többnyelvűsítése
  65. 65. A többnyelvű kódérték megjelenik az adatbázis táblában
  66. 66. Példaképernyők
  67. 67. Példaképernyők
  68. 68. Példaképernyők
  69. 69. Köszönöm a figyelmet!

×