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 á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ívum Digitális Képarchívum dka.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!"

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/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

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.

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 layout manageren keresztül

QxTransformer/qooxdoo Layout készlet pl.: grid

QxTransformer/qooxdoo Grid layout a Képalbumban

Kis mintaalkalmazás  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

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

QxTransformer/qooxdoo DateField a Képalbumban

QxTransformer/qooxdoo comboBox 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/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); ]]>

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

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/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

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

QxTransformer/qooxdoo comboBox a Képalbumban

QxTransformer/qooxdoo Virtual widget a Képalbumban checkbox és lista

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ü

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); } ]]>

QxTransformer/qooxdoo Dinamikus 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