Zkoss with Cooliris Plugin
[lang_it]
Cooliris è un bellissimo plugin da abbinare a diversi browser, permette di fruire delle gallerie di immagini in modo veramente intuitivo, ed ha un estetica che a me piace tantissimo. Di questo plugin esiste anche la versione “Embed Wall” che è un file SWF “Flash” che vi permette in modo semplice di integrare questo splendido strumento all’interno del vs. sito.
In merito alle licenze di quest’oggetto fate riferimento alla casa madre : http://www.cooliris.com/.
Allo stesso tempo stiamo testando ZKoss come strumento per la creazione delle ns applicazioni Browser oriented (mi piace di più che dire Web based), per chi non lo conoscesse è un framework RIA che si appoggia a Eclipse come editor di sviluppo e a Java come tecnologia di backend.
Sample url : http://www.blu-blu.info/galleria_new.zul
Comunque questo articolo è dedicato aq chi già conosce un pochino Zkoss, per chi invece è interessato esclusivamente al plug-in sul sito ufficiale ci sono diversi esempi di integrazione con altre tecnologie come php. Esistono anche diversi plug-in per WordPress che utilizzano questa tecnologia.
In sostanza per utilizzare il wall all’interno della vs. ZUL Window è semplicissimo basta create un oggetto ZK di tipo HTML ove inserire il codice fornito dal sito di cooliris, l’altra cosa è creare da qualche parte, tipo con una servlet un feed rss che viene passato all’swf come paramtro per avere l’elenco delle immagini da mostrare.
Di seguito c’è il codice che ho usato per creare la paginetta mostrata nell’immagine a inizio articolo , la stringa strFeedPhoto definisce il feed rss che alimenta l’elenco di immagini da far visualizzare.
[/lang_it]
[lang_en]
Coolirisis a beautifll plugin for a lot of browser to manage your picture galleries. The look of cooliris is very cool . There is an “Embed Wall” version wich is an SWF “Flash” that can be embed in your site. For the lices about Embed Wall see the main site http://www.cooliris.com/.
At the same time we are on testing ZKoss as a RIA framework that use Eclipse as IDE and Java as backend technology.
An example of using CoolIris embed wall in ZK : http://www.blu-blu.info/galleria_new.zul
To use the Embed Wall you need to provide the picture list as rss feed, we have used a wordpress plugin that do this for first demo, in future we need to create a servlet do build the content.
a sample code about the example :
[/lang_en]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<?page title="album" contentType="text/html;charset=UTF-8"?> <zk> <zscript><![CDATA[ int wh = 0; int whd = 0; void getClientInfo(ClientInfoEvent evt) throws InterruptedException { session.setAttribute("CH",evt.getDesktopHeight()); session.setAttribute("CW",evt.getDesktopWidth()); /* org.zkoss.zhtml.Messagebox.show(getClientHeight() + "pippo"); */ } void onResizeMe(Div dd) { if (session.getAttribute("CH")!= null) { whd = Integer.parseInt(session.getAttribute("CH").toString()); wh = whd - 80; if (dd != null) { dd.setHeight(wh + "px"); } } } ]]></zscript> <window title="album" border="normal" onClientInfo="getClientInfo(event);onResizeMe(div_mainContent);buildCool(html_flash_obj);"> <div id="div_mainContent" style="overflow:auto;" > <html id="html_flash_obj"><![CDATA[ ]]></html> <zscript><![CDATA[ public void buildCool(Html renderTo) { String strFeedPhoto = "http%3A%2F%2Fwww.viadallufficio.eu%2Fwp-content%2Fplugins%2Fnextgen-gallery%2Fxml%2Fmedia-rss.php%3Fgid%3D4%26mode%3Dgallery"; String strHeight = (Integer.parseInt(session.getAttribute("CH").toString()) - 100) + ""; String strWidth = (Integer.parseInt(session.getAttribute("CW").toString()) - 20) + ""; String str_Cooliris = "<object id=\"o\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" "; str_Cooliris += " width=\"" + strWidth + "\" height=\"" + strHeight + "\"> \n"; //str_Cooliris += "<param name=\"movie\" value=\"http://apps.cooliris.com/embed/cooliris.swf\" /> \n"; str_Cooliris += "<param name=\"movie\" value=\"http://localhost:7080/blublu/cooliris.swf\" /> \n"; str_Cooliris += "<param name=\"flashvars\" value=\"feed=" + strFeedPhoto + "\" /> \n"; str_Cooliris += "<param name=\"allowFullScreen\" value=\"true\" /> \n"; str_Cooliris += "<param name=\"allowScriptAccess\" value=\"always\" /> \n"; // str_Cooliris += "<embed type=\"application/x-shockwave-flash\" src=\"http://apps.cooliris.com/embed/cooliris.swf\" \n"; str_Cooliris += "<embed type=\"application/x-shockwave-flash\" src=\"http://localhost:7080/blublu/cooliris.swf\" \n"; str_Cooliris += "width=\"" + strWidth + "\" height=\"" + strHeight + "\" "; str_Cooliris += "flashvars=\"feed=" + strFeedPhoto + "\" "; str_Cooliris += "allowFullScreen=\"true\" allowScriptAccess=\"always\"></embed> </object>"; renderTo.setContent(str_Cooliris); } //buildCool(html_flash_obj); ]]></zscript> </div> </window> </zk> |