mercoledì 20 febbraio 2008

Gwt-Ext

Gwt-Ext (http://gwt-ext.com/) sembrerebbe una libreria ben fornita. Anche Francesco ne è rimasto positivamente colpito. Sto provando a creare una mini applicazione con gwt-ext, un tooltip per le immagini...
Vorrei che in una pagina web ci siano delle miniatura delle immagini, e passando il mouse sopra l'immagine si apra un tooltip contenente l'immagine in grandezza originale.
Userei i tooltip presenti in gwt-ext, che accettano anche del codice html.

Dal wiki di GWT-EXT: Introduction to GWT Ext 2.0
Bisogna anche scaricare la libreria Ext-Js (http://extjs.com/download)

  1. una volta creato il progetto in eclipse, copiare queste cartelle di ext-js
    * /adapter
    * /resources
    * ext-all.js
    * ext-all-debug.js
    * ext-core.js
    * ext-core-debug.js
    nella cartella src/com/mycompany/mypackage/public/js (ovviamente adattata ai nomi del package)

  2. importare la libreria nel progetto: Tasto destro del mouse sul progetto, in eclipse, "build path"->"configure build path"->"libraries"->"add external jar" e si individua il jar di gwt-ext

  3. Successivamente bisogna inserire nel file di configurazione xml "nomeprogetto.gwt.xml" queste due righe, prima dell'importazione della classe del progetto

    <!-- Inherit the GWTExt Toolkit library configuration.      -->

    <inherits name="'com.gwtext.GwtExt'">

    </inherits>

  4. nel file html inserire queste righe

    <!-- Begin ExtJS library files -->
    <link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="js/ext/ext-all.js"></script>
    <!-- End ExtJS library files -->


    prima dell'inclusione del js del progetto

Per ora ho creato la funzione che scorre la pagina e trova tutte le immagini con la classe css "img_tooltip". Per ogni immagine crea una lista che da in pasto poi alla funzione che attaccherà ad ogni immagine il tooltip stesso.

Vediamo cosa riesco a fare.

Nessun commento: