DKA Képalbum Egy webkettes alkalmazás fejlesztése QxTransformer/qooxdoo eszközökkel Vitéz Gáborné – Drótos László – Moldován István – Simon Jennifer (Vitéz.

Az előadások a következő témára: "DKA Képalbum Egy webkettes alkalmazás fejlesztése QxTransformer/qooxdoo eszközökkel Vitéz Gáborné – Drótos László – Moldován István – Simon Jennifer (Vitéz."— Előadás másolata:

1 DKA Képalbum Egy webkettes alkalmazás fejlesztése QxTransformer/qooxdoo eszközökkel 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.

2 DKA Képalbum  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

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

4 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... DKA Képalbum

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

6 QxTransformer/qooxdoo  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

7 QxTransformer/qooxdoo Első lépések, a kötelező "Hello World!"

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 layout manageren 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

19

20 QxTransformer/qooxdoo embedHtml widget <![CDATA[ <qx:tabView> <qx:page label="Találati lista" icon="/ikonok/preferences-keyboard.png"> <qx:vbox> <qx:label value="Találati lista..."/> </qx:vbox> </qx:page>... ]]>

21

22

23

24 QxTransformer/qooxdoo DateField a Képalbumban

25

26 QxTransformer/qooxdoo comboBox 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 <![CDATA[ alert("ok"); ]]> <![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); ]]>

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

31 QxTransformer/qooxdoo 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.

32 QxTransformer/qooxdoo Data 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: qooxdoo kód: store, controller, view <![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"); ]]> QxTransformer/qooxdoo Data Binding

34 QxTransformer/qooxdoo comboBox a Képalbumban

35 QxTransformer/qooxdoo Virtual widget a Képalbumban checkbox é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/qooxdoo Dinamikus menü

37 QxTransformer Menu widget – qooxdoo menu. Button <![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); } ]]>

38 QxTransformer/qooxdoo Dinamikus menü a Képalbumban

39 DKA Képalbum 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...

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

51 Egy kép metaadatokkal és megjegyzés-ablakkal

52 A képeslapküldő funkció

53 Az album tartalma sáv nézetben, nagyítható képekkel

54 Képek sorrendjének „drag & drop” átrendezése

55 Diavetítés az album képeiből

56 Album megosztása weblapként

57 Köszönjük a figyelmet! dka.oszk.hu/html/kepalbum.php