Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
DKA KépalbumDKA Képalbum Egy webkettes alkalmazás fejlesztéseEgy webkettes alkalmazás fejlesztéseQxTransformer/qooxdoo eszközökkelQxTransformer/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.
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
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ívumDigitális Képarchívumdka.oszk.hu
Az alapítás éve: 2007
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
Eszközök: QxTransformer/qooxdoo (qooxdoo.org)és az elképzelt Képalbum felület
DKA Képalbum
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
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>
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!”); });
QxTransformer/qooxdooWidget 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
QxTransformer/qooxdooWidget 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.
QxTransformer/qooxdoo
Widget készlet
Label
Properties:
value, selectable, native context menu, rich, ...
QxTransformer/qooxdoo
Widget készlet
Image
Properties:
allowGrowX, allowShrinkX, scale, source ...
QxTransformer/qooxdoo
Widget készlet
Atom
Properties:
icon, iconPosition, label, rich, show ...
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
QxTransformer/qooxdoo
Layout készlet
pl.: grid
QxTransformer/qooxdooGrid layout a Képalbumban
Kis mintaalkalmazáshttp://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
<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>
QxTransformer/qooxdooembedHtml 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> <qx:tabView><br> <qx:page label="Találati lista" icon="/ikonok/preferences-keyboard.png"><br> <qx:vbox><br> <qx:label value="Találati lista..."/><br> </qx:vbox><br> </qx:page><br>... ]]> </qxt:property> </qx:embedHtml> </qx:vbox></qx:page>
QxTransformer/qooxdooDateField a Képalbumban
QxTransformer/qooxdoocomboBox a Képalbumban
QxTransformer/qooxdoo SlideBar a Képalbumban
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.
QxTransformer/qooxdooScript, 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>
QxTransformer/qooxdooEsemé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, …
ListList:: changeSelection
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.
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
QxTransformerrel definiált comboBox:QxTransformerrel definiált comboBox:<qx:comboBox id="labelcombo" height="22" MaxHeight="22"
marginLeft="25">
qooxdoo kód: store, controller, viewqooxdoo 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
QxTransformer/qooxdoocomboBox a Képalbumban
QxTransformer/qooxdooVirtual widget a Képalbumban
checkbox és lista
Képalbum: részgyűjteményekKé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ü
QxTransformer/qooxdooDinamikus menü
QxTransformer Menu widget – qooxdoo menu.QxTransformer Menu widget – qooxdoo menu. ButtonButton
<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ü a Képalbumban
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...
Bejelentkező képernyő: dka.oszk.hu/html/kepalbum.php
A Képalbum funkciót ismertető súgó menüje
Újdonságok listája
Böngészés címkék, részgyűjtemények és témák szerint
Részgyűjtemények listája
Az „Állatvilág” részgyűjtemény találatai
Keresés cím, alkotó és téma szerint
A kiválasztott képek albumba mentése
Újonnan készített album, egyelőre még borítókép nélkül
Az új albumba mentett képek
Egy régebbi album táblázatos nézetben
Egy kép metaadatokkal és megjegyzés-ablakkal
A képeslapküldő funkció
Az album tartalma sáv nézetben, nagyítható képekkel
Képek sorrendjének „drag & drop” átrendezése
Diavetítés az album képeiből
Album megosztása weblapként
Köszönjük a figyelmet!
dka.oszk.hu/html/kepalbum.php
