DKA Képalbum Egy webkettes alkalmazás fejlesztése QxTransformer/qooxdoo eszközökkel

1. Vitéz Gáborné – Drótos László – Moldován István – Simon Jennifer (Vitéz és Társa Bt. – Országos Széchényi Könyvtár, E-könyvtári Szolgáltatások Osztály) ______________________________ NETWORKSHOP 2012 – VESZPRÉM 2012. április 11. – 13. DKA KépalbumEgy webkettes alkalmazás fejlesztéseQxTransformer/qooxdoo eszközökkel

2. Előzmény – Digitális Képarchívum dka.oszk.hu OSZK MEK műhely ötlet – személyre szabható Képalbum Eszközök – QxTransformer/qooxdoo QxTransformer – XML leíró alkalmazásfejlesztő qooxdoo – JavaScript framework Eredmény - dka.oszk.hu/html/kepalbum.php DKA Képalbum

3. DKA Képalbum Előzmény: Digitális Képarchívumdka.oszk.hu Az alapítás éve: 2007 – a képdokumentumok száma közel 32 ezer, – részletes metaadatok több formátumban, – tematikus részgyűjtemények.

4. DKA Képalbum OSZK MEK műhely ötlet: új felület a DKA-hoz. Elvárások:korszerű megjelenés, személyre szabható, saját album kialakítása, tartalommegosztás, címkézés, értékelés, belépés Facebook vagy Google azonosítóval...

5. Eszközök: QxTransformer/qooxdoo(qooxdoo.org) és az elképzelt Képalbum felület DKA Képalbum

6. QxTransformer gyors alkalmazásfejlesztő eszköz platformfüggetlen, Python-alapokon működik, qooxdoo keretrendszert használ, szintaxisa XML qooxdoo erős, flexibilis framework GNU GPL licenc alatt, JavaScript-alapú, szép, interaktív, web-alapú GUI, widget-ek használata QxTransformer és qooxdoo együtt egymásra épülő eszközök, saját JavaScript kód használata QxTransformer/qooxdoo

7. QxTransformer/qooxdoo Első lépések, a kötelező "Hello World!" <qx:button label="First Label" icon="helloworld/test.png" qxt:left="100" qxt:top="50"> <!-- Add an event listener --> <qxt:listener type="execute"> <![CDATA[ alert("Hello World!") ]]> </qxt:listener> </qx:button>

8. QxTransformer/qooxdoo Első lépések, a kötelező "Hello World!" var qxLabel2 = new qx.ui.basic.Label("First Label","helloworld/test.png"); qxLabel2.addListener("execute", function(e) { alert("Hello World!”); });

9. QxTransformer/qooxdoo Widget készlet A Qooxdoo-ban a GUI alapvető építő blokkjai a widgetek. Főbb tulajdonságok: • Integráció az eseményrendszerrel • Fókusz kezelés • "Drag and drop" • Automatikus méretezés • Kinézet (theming) • Tooltip • Context menu • Láthatóság kezelés • Sub widget kezelés

10. QxTransformer/qooxdoo Widget készlet A widgetek legalább három HTML elemből állnak. Egy tartalmazó elemből, amellyel a szülő widgethez kötődnek, és két gyermek elemből: a dekorációból, és a tartalom elemből.

11. QxTransformer/qooxdoo Widget készlet Label Properties: value, selectable, native context menu, rich, ...

12. QxTransformer/qooxdoo Widget készlet Image Properties: allowGrowX, allowShrinkX, scale, source ...

13. QxTransformer/qooxdoo Widget készlet Atom Properties: icon,iconPosition,label, rich, show ...

14. QxTransformer/qooxdoo Composite Container a widgetek számára. Kezeli a children widgeteket és az applikáció struktúrájának a létrehozását a layoutmanageren keresztül

15. QxTransformer/qooxdoo Layout készlet pl.: grid

16. QxTransformer/qooxdoo Grid layout a Képalbumban

17. Kis mintaalkalmazás http://dka.niif.hu/~qxd/helloworld/build/ • Fent: menu widget • Középen: Tabview • Az aktív fülön: Hbox layout egyszerűwidgetekkel: • Atom, • Button, • TextField, • DateField, • ComboBox • Alatta összetettek: • SlideBar, • ColorSelector

18. <qx:menuBar width="600"> <qx:menuBarButton label="Böngészés" icon="/ikonok/view-sort-ascending.png"> <qx:menu> <qx:menuButton label="Újdonságok" icon=""> </qx:menuButton> <qx:menuButton label="Saját cimkék" icon="icon/16/actions/document-new.png"> </qx:menuButton> <qx:menuButton label="Részgyűjtmények" icon="icon/16/actions/document-new.png"> <qx:menu> <qx:menuButton label="A magyar hajózás" icon="icon/16/actions/document-new.png"/> <qx:menuButton label="Ásványvilág" icon="icon/16/actions/document-new.png"/> </qx:menu> </qx:menuButton> </qx:menu> </qx:menuBarButton>

20. QxTransformer/qooxdoo embedHtml widget <qx:page label="Forrás XML" TextColor="darkred" icon=""> <qx:vbox> <qx:embedHtml overflow="{js}'auto','auto'" decorator="main" backgroundColor="white" width="900" height="400"> <qxt:property name="html"> <![CDATA[ <pre><b> &lt;qx:tabView&gt;<br> &lt;qx:page label="Találati lista" icon="/ikonok/preferences-keyboard.png"&gt;<br> &lt;qx:vbox&gt;<br> &lt;qx:label value="Találati lista..."/&gt;<br> &lt;/qx:vbox&gt;<br> &lt;/qx:page&gt;<br> ... ]]> </qxt:property> </qx:embedHtml> </qx:vbox> </qx:page>

24. QxTransformer/qooxdooDateField a Képalbumban

26. QxTransformer/qooxdoocomboBox a Képalbumban

27. QxTransformer/qooxdoo SlideBar a Képalbumban

28. QxTransformer/qooxdoo Eddig a widgetek külső tulajdonságaiba tekintettünk be. Nézzük meg az eszköz további lehetőségeit! Scriptek beszúrása, események kezelése.

29. QxTransformer/qooxdoo Script, listener <qx:button label="Button B" id="gomb" icon="icon/22/apps/internet-mail.png" enabled="true" width="100" maxWidth="100" height="22" MaxHeight="22"> <qxt:listener type="execute"> <![CDATA[ alert("ok"); ]]> </qxt:listener> </qx:button> <qx:dateField id="kezbesites_ido" width="100" maxWidth="100" height="22" MaxHeight="22"> <qxt:script> <![CDATA[ qx.locale.Manager.getInstance().setLocale("en"); kezbesites_ido.setValue(new Date()); var format4 = new qx.util.format.DateFormat("yyyy-MM-dd"); kezbesites_ido.setDateFormat(format4); ]]> </qxt:script> </qx:dateField>

30. Események Core Widget: appear, blur, changeBackgroundColor, changeEnabled, changeFont, changeShadow, changeTextcolor, changeToolTipText, changeVisibility, click,dbclick, deactivate, disappear, drag, drop, focus, keydown, keypress, mousedown, move, resize, ... Button:execute, … List:changeSelection QxTransformer/qooxdooEseménykezelés

31. Az eddigiekből is látható, hogy a QxTransformer jól használható, egyszerű eszköz, mégis az adott feladat esetén már a dinamikus menü megvalósítása is qooxdoo kód beépítését igényelte. Egy további megoldandó feladat a "kommunikáció a background programokkal" volt, aminél gyakran megint a qooxdoo kód segített. QxTransformer/qooxdoo

32. QxTransformer/qooxdooData Binding • Data: a tárolt kiinduló adat • Store: adatkinyerés, elhelyezés a Model-ben • Model: a Store és a Controller integrációs pontja • Controller: összekapcsolja a Model-ben lévő adatot a View komponenssel • View: majdnem bármelyik widget lehet

33. QxTransformerrel definiált comboBox: <qx:comboBox id="labelcombo" height="22" MaxHeight="22" marginLeft="25"> qooxdoo kód: store, controller, view <qxt:script> <![CDATA[ mydatastore_l = new qx.data.store.Json("/"+progutvonal+"/cimkek.php"); var lcontroller = new qx.data.controller.List(null, labelcombo); lcontroller.setLabelPath("nev"); mydatastore_l.bind("model.cimkek", lcontroller, "model"); ]]> </qxt:script> QxTransformer/qooxdooData Binding

34. QxTransformer/qooxdoocomboBox a Képalbumban

35. QxTransformer/qooxdooVirtual widget a Képalbumbancheckbox és lista

36. Képalbum: részgyűjtemények //subcollection lista menube megy gyujtemenytomb=""; url="/QXD/subcollectionlist.php"; var req7 = new qx.io.remote.Request(url, "GET", "application/json"); req7.setParameter("test1", "get parameter"); req7.setAsynchronous(false); req7.addListener("completed", function(e) { gyujtemenytomb=e.getContent(); }); req7.send(); QxTransformer/qooxdooDinamikus menü

37. QxTransformer Menu widget – qooxdoo menu.Button <qx:menu id="subcollectionmenu" SpacingX="3" arrowColumnWidth="5"> <qxt:script> <![CDATA[ var gyujtemenyekszama=gyujtemenytomb.length; for(var j=0; j<gyujtemenyekszama/2; j++) { var cimke=gyujtemenytomb[j]; var tooltipszoveg=gyujtemenytomb[j + gyujtemenyekszama/2]; var gyuj = new qx.ui.menu.Button(cimke,""); gyuj.setBlockToolTip(false); var menutooltip = new qx.ui.tooltip.ToolTip(tooltipszoveg); subcollectionmenu.add(gyuj); gyuj.setToolTip(menutooltip); gyuj.addListener("execute",this.subcoll_); gyuj.addListener("execute",this.kepek_oldala); } ]]> </qxt:script> </qx:menu> QxTransformer/qooxdooDinamikus menü

38. QxTransformer/qooxdooDinamikus menü a Képalbumban

39. Köszönettel tartozom Drótos Lászlónak, hogy a fejlesztést rendszertervvel, tanácsokkal segítette, és Vitéz Gábornak, hogy felhívta a figyelmemet erre az érdekes eszközre és rendszergazdaként rendelkezésemre bocsátotta, frissítette a QxTransformer/qooxdoo-t. Az elkészült alkalmazás főbb funkcióit Moldován István, az OSZK E-könyvtári Szolgáltatások Osztályának vezetője mutatja be... DKA Képalbum

40. Bejelentkező képernyő: dka.oszk.hu/html/kepalbum.php

41. A Képalbum funkciót ismertető súgó menüje

42. Újdonságok listája

43. Böngészés címkék, részgyűjtemények és témák szerint

44. Részgyűjtemények listája

45. Az „Állatvilág” részgyűjtemény találatai

46. Keresés cím, alkotó és téma szerint

47. A kiválasztott képek albumba mentése

48. Újonnan készített album, egyelőre még borítókép nélkül

49. Az új albumba mentett képek

50. Egy régebbi album táblázatos nézetben