Inizio Interfaccia utente sul blog (YUIBlog)

Attuazione YUI sul Planner Assembla.com Agile

Veloce e divertente - che era il requisito utente per il nuovo Planner Assembla.com Agile - un'interfaccia AJAX per l'aggiunta di attività di sviluppo, la costruzione storia / funzione di contorni, e loro programmazione in release. Siamo stati fortunati ad avere YUI 3 per rendere più veloce e divertente per implementare pure.

Avevo usato YUI 2 per una serie di progetti precedenti e mi era stato colpito dalla progettazione dei componenti dell'interfaccia utente e l'infrastruttura di biblioteca di base. Volevo saperne di più su YUI 3, con la sua sintassi compatta e più profonda attenzione sulla manipolazione DOM e CSS3 stile selettori. Questo progetto, con una bassa dipendenza su 'widget predefiniti,' era una perfetta opportunità per ottenere i miei piedi bagnati con YUI 3. Le strutture per l'attuazione 'app grandi' attraverso moduli personalizzati e di integrazione con YUI caricatore fatto una scelta naturale.

Il Planner Agile supporta una serie di interazioni degli utenti drag and drop con gruppi interazione multipla e comportamenti basati contesto. Allo stesso tempo, gestisce una serie complessa di interazioni con il server, tra cui la fusione di nuovi dati dal server, e la propagazione delle modifiche al server.

Abbiamo migliorato il Planner esistente che era basato su gestori di Rails e prototype.js. La filosofia sandbox YUI e le strutture OOP forte prototype.js fatto che coesiste con una brezza.

Abbiamo utilizzato un gran numero di componenti YUI, tra cui:

• Async-coda per offrire una esperienza sensibile su una pagina in grado di coinvolgere 1000 + simultanea biglietti
• Drag and Drop con i gruppi di interazione.
• IO come una gestione connessione al server di coda e l'interazione massaggio.
• Eventi delegato per consentire semplicemente idratante template html e dimenticarsi di loro.
• Evento-chiave per l'interazione della tastiera e la navigazione.
• Raccolta per darci una esperienza coerente applicazione in tutta browser.
• Cookie per una facile a breve termine persistenza dell'interfaccia utente.
• Profiler per trovare i guadagni maggiori velocità
• YUI Doc di lasciare le informazioni per il resto della squadra

Lavorare con YUI 3 su un app del genere è stato divertente, e non vedo l'ora di sentire ciò che i nostri utenti ci spingerà a fare dopo!

Circa l'autore: Joachim Larsen è un ingegnere con Assembla.com frontend.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!

Realizzazione di messa a fuoco: Demetra

     <div id="datatable-ux"> <div id="datatable-ux-hd"> </ div> id="datatable-ux-bd"> <div id = stile "nodo-profondità" = " display: none "> radice> Test> Test 5_Dev BA> 80000_1010 </ div> id="output"> </ div> id="yui-datatable" class="yui-dt"> <img src = "immagini / icone loading.gif" alt = "loading" align = stile "absmiddle" = "margin: 30px 0;" /> caricamento dei dati ...  </ Div> </ div> id="datatable-ux-ft"> </ div> </ div> id="node-apply-wrap" style="display: none;"> <fieldset > <legend> Applica a </ legend> <input type="radio" name="node-apply" checked="checked" /> nodo corrente solo <br /> <input type = nome di "radio" = "node- applicare "/ node> corrente e nodi figlio <br /> <input type="radio" name="node-apply" /> nodi figlio unico </ fieldset> </ div> 

    / / Semplice esempio per estendere le classi CellEditor
    / / Alias ​​breve
    var lang = YAHOO.lang,
	   util = YAHOO.util,
	   = widget di YAHOO.widget,
	   Dom = util.Dom,
	   Evento = util.Event;

    / / Estensione TextboxCellEditor
    Gcc.admin.TextboxCellEditor = function (config) {
	    Gcc.admin.TextboxCellEditor.superclass.constructor.call (questo, config);
    };
    lang.extend (Gcc.admin.TextboxCellEditor, widget.TextboxCellEditor, {
	    renderForm: function () {
		    Gcc.admin.TextboxCellEditor.superclass.renderForm.call (this);

		    var = OHD document.createElement ('DIV');
		    . this.getContainerEl () insertBefore (OHD, this.textbox);
		    oHd.id = container.id + '-admin-redattore-capo';
		    Dom.addClass (OHD, 'admin-editore-hd');

		    var oCurrNode document.createElement = ('DIV');
		    . this.getContainerEl () insertBefore (oCurrNode, this.textbox);
		    'nodo corrente:' = oCurrNode.innerHTML. + Dom.get ('nodo-profondità') innerHTML;
		    Dom.addClass (oCurrNode, 'admin-editore-pd');

		    var = oApply document.createElement ('DIV');
		    this.getContainerEl () appendChild (oApply).;
		    oApply.innerHTML = Dom.get ('nodo-applicare-wrap') innerHTML.;
		    Dom.addClass (oApply, 'admin-editore-fieldset');
	    },

	    mossa: function () {
		    Gcc.admin.TextboxCellEditor.superclass.move.call (this);
		    Dom.addClass (this.textbox, 'admin-editore-pd');
	    }
    });

 <% @ Page pageEncoding = "UTF-8" contentType = "application / json; charset = UTF-8"%>
 <%% @ Taglib prefix = uri "s" = "/ struts-tag">
 {"PropertySet": {
 "Proprietà": [
 <s:iterator value="displayPropertyResultList" status="index">;
     {
     "Id": "<s:property value="id" />",
     "Nome": "<s:property value="name" />",
     "Tipo": "<s:property value="type" />",
     "Valore": "<s:if test="%{value != null}"> <s:property value="value" /> </ s: se>",
     "ApplyFrom": "<s:property value="applyFrom" />",
     "ApplyTo": "<s:property value="applyTo" />",
     "Leggibile": "<s:property value="readable" />",
     "Scrivibile": "<s:property value="writable" />"
     }
     <s:if test="%{!#index.last}">, </ s: se>

 </ S: iterator>
 ]}
 }

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!

Realizzazione di messa a fuoco: Phanfare Media Organizer

Cory Mintz da Phanfare scritto la scorsa settimana a raccontarci la loro recente lancio di un prodotto, che è fortemente basata su YUI 2.8.0.

Abbiamo appena rilasciato il nostro nuovo organizzatore web ieri ... Si tratta di un organizer completo di foto e video costruito come una web application, con quasi ogni componente 2 YUI. Pensiamo che offusca la linea tra realtà software desktop e web.

Alcune caratteristiche degne di nota sono:

• Utilizzando il Uploader , abbiamo lasciato la gente organizzare e modificare le proprie foto come upload.
• Con l'aiuto di Drag and Drop e menu , la griglia delle miniature ha tutti i comportamenti di un browser di file di sistema operativo. È possibile trascinare selezionare, trascinare e rilasciare un nuovo ordine, la selezione multipla con CTRL e MAIUSC, freccia tra le miniature, ecc
• Il carico dinamico del controllo TreeView , ci lascia pigri account utente di carico con 100s di album dal momento che sono gerarchici (anno -> Album - sezione>). Questo permette la pagina per un account estremamente grande per caricare altrettanto veloce come un piccolo conto.

Mi piace la professionalità pulito del sito e la straordinaria attenzione ai dettagli nell'interfaccia utente. Non esitate a visitare il sito - account di prova sono gratuiti e vengono popolati con gli album di esempio per darvi un'idea di ciò che il sito ha da offrire. Congratulazioni a Cory e la squadra per un lancio fantastico.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!

Realizzazione di messa a fuoco: Mr Purple filmati ed altro

Murray Macchio è uno sviluppatore software senior con oltre 7 anni di esperienza di sviluppo web situato a Kingston, Ontario in Canada. Attualmente sta lavorando con una compagnia chiamata SMT Plus per snellire le loro e-learning processo di sviluppo. Egli sarà presto partire come sviluppatore web in una società denominata Pro Front Runner.

Parlaci un po 'del vostro progetto.

Ero stato rimandato di un sito web per l'azienda di mio zio per qualche tempo, ma con l'aiuto di YUI, ho costruito il suo sito da zero in soli 3 giorni.

Qual è il tuo background con YUI? Perché ha scelto YUI per questo progetto?

Sono stato con YUI negli ultimi 2 anni. Nel mio lavoro precedente, ho introdotto in ogni singola applicazione interna. Ho scelto YUI per questo progetto a causa della mia familiarità con esso, e perché fa tutto il lavoro duro per voi. In breve, YUI mi fa sembrare molto bene su una base quotidiana.

Quali componenti YUI, in particolare, sono in uso?

Ho usato il Carousel , completamento automatico e il mio preferito in assoluto, la DataTable .

Quali sono state le sfide di utilizzare YUI in questo progetto?

Le sfide principali sono stati con un paio di bug Carousel. Questi erano i problemi che mi aspettavo, in quanto è ancora in beta. L'unico problema veramente grande che avevo era cercare di capire perché due caroselli sulla stessa pagina non ha giocato bene insieme. Poi ho capito che i loro elementi condivisi lo stesso ID.

Quali sono le cose che stai più orgoglioso in questo progetto?

Sono orgoglioso del fatto che sono stato in grado di fornire una ricca esperienza utente molto velocemente. In particolare, la pagina del catalogo che utilizza il widget di completamento automatico con l'oggetto DataTable consente agli utenti di navigare facilmente un catalogo di film di oltre 4000 film e giochi.

Quali sono alcune caratteristiche imminente / progetti che si stanno affrontando con YUI?

Prossimo ordine del business, finire la componente Validazione di form ho lavorato con Luke Smith per YUI 2. Sono entusiasta di vedere come è accolta dalla comunità YUI. Ho anche intenzione di introdurre YUI alle aziende lavorerò con nel prossimo futuro.

Come ha fatto i componenti YUI eseguire?

Si sono esibiti eccellente. L'oggetto DataTable era in grado di gestire 4000 record alla volta, senza un problema. Ho scoperto che le prestazioni dei componenti YUI ha costantemente migliorato ad ogni uscita.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!

Realizzazione di messa a fuoco: vitalista, un'applicazione Web Getting Things Done (GTD) Costruito con YUI 2

Chi vitalista

Vitalista è un potente strumento di organizzazione personale che segue da vicino il popolare Getting Things Done metodologia da David Allen . Con vitalista, tutte le cose da fare sono on-line, in formato GTD, e pronta per essere letta da qualsiasi luogo o aggiornati.

Perché YUI?

Abbiamo utilizzato YUI a vitalista abbastanza pesante dato che attorno alla versione 2.2.0 - per circa tre anni. Inizialmente abbiamo finito per scegliere YUI fuori dei quadri disponibili JavaScript per due ragioni principali: la documentazione e il codice ingombro. Ancora oggi, mi sento YUI continua a guidare il pacchetto in entrambe le aree.

Con interfacce utente sempre più complessi di tutti i giorni, un altro grande vantaggio di YUI è il numero di utilità disponibili e widget. E al vitalista stiamo sfruttando al massimo, utilizzando i seguenti componenti (versione 2.8.0r4): animazione , autocompletamento , cronologia del browser , calendario , compressore , connessione , cookies , i font CSS , CSS Reset , datasource , dom , drag and drop , elemento , evento , json , logger , menù , selettore , swf , tooltip , yahoo .

Ossessione per prestazioni e reattività

Presto a vitalista abbiamo deciso di andare alla disfatta di carico la maggior parte dei componenti necessari e dati sulla visita iniziale per la nostra applicazione principale. Ciò è stato fatto per due motivi, di risposta dell'interfaccia utente e la facilità di installazione offline. Concentriamoci sulla reattività.

Se in teoria è semplice, avendo JavaScript gestire praticamente tutti della nostra generazione di interfaccia utente decisamente aggiunto alcune complessità. Per esempio, la velocità di aggiunta e di attraversare il DOM è della massima importanza. Qualcosa di semplice come l'aggiunta di un elemento root al getElementsByClassName funzione incrementa le prestazioni in modo significativo. E a volte abbiamo dovuto sacrificare la convenienza programmatico per la velocità. Mentre il YUI 2 Utility selettore può essere molto potente, abbiamo trovato originariamente getElementsByClassName per essere più veloce. (Con l'ultima release di YUI 2, le prestazioni di utilità Selector sembra essere aumentato un bel po ', ma abbiamo ancora di default getElementsByClassName quando possibile, per migliorare le prestazioni - soprattutto nei browser che hanno il supporto nativo, che utilità Dom YUI 2 di leva. )

YUI 2 automatico poteri una delle caratteristiche più recente di vitalista, uscito nell'ultimo anno o giù di lì, ma è stato anche uno dei più difficili implementazioni in termini di reattività e utilizzo della CPU del browser. Nel nostro primo tentativo, ogni volta che avevamo bisogno di un nuovo controllo automatico per un ingresso vorremmo creare una nuova istanza, distruggendo una volta non era più necessario. Questo accade tipicamente quando ci si sposta da "pagina" a "pagina" (tenere a mente, tutte le nostre "pagine" sono solo client generato schermi). Internet Explorer ha lottato con questa, spesso ancoraggio la CPU al 100% ed efficacemente portare il computer a una battuta d'arresto. Questo ci ha costretti a disattivare il supporto per il completamento automatico di IE. Due modifiche importanti ci ha aiutato a creare un più efficiente completamento automatico. Per prima cosa, creiamo solo pochi casi generica del completamento automatico che può essere condivisa da "pagina" a "pagina". Allora l'aggiornamento è necessario solo la fissazione di un nuovo DataSource, che nel nostro attuazione richiede meno sforzo della CPU. Numero due, prestare attenzione alla maxResultsDisplayed proprietà. Perché lasciamo che l'elenco completo completamento automatico viene visualizzato senza alcun input (abbiamo anche aggiunto il tasto freccia giù per visualizzare l'elenco), inizialmente abbiamo impostato il maxResultsDisplayed ad un numero arbitrariamente grande come 10.000. Semplicemente cambiando questo numero per la lunghezza delle nostre attuali datasource portato a miglioramenti significativi delle prestazioni della CPU.

Per il monitoraggio delle prestazioni sul front-end, si usa il 2 Controllo Logger YUI . In modalità debug, abbiamo uscita aggiornamenti log molti dettagli le varie fasi di lavorazione JavaScript. Una cosa grande circa il logger è il fatto che mantiene un timestamp di quando è stata aggiornata. Questo è stato molto utile quando si cerca di capire i colli di bottiglia nel nostro codice. E per più del monitoraggio delle prestazioni lato server, YSlow è stato anche molto utile per fare in modo stiamo generando richieste HTTP il più velocemente possibile.

Implementazione caratteristica più interessante

Personalmente, ho avuto la resistenza più divertente attuazione e calo vitalista (con YUI 2 Drag and Drop ). Drag and drop serve in realtà due scopi nella vitalista per l'elemento trascinare stesso. In primo luogo, lo usiamo per manualmente ri-ordinare liste, in secondo luogo, lo usiamo per lo spostamento di compiti tra le liste. Per fare questo, due diversi goccia target "zone" sono utilizzati: uno per gli elementi della lista nel contenuto e uno per la lista di elementi nel menu laterale a sinistra.

La parte interessante è la funzione di due zone diverse in modo diverso. Quando si trascina nell'area dei contenuti, vogliamo che l'elemento di trascinamento per spostare continuamente l'elemento aleggiava e aggiungere l'elemento trascinare nella nuova posizione. Nell'area del menu, non ci vuole nulla a turno, ma vogliamo sottolineare la selezione del menu ci sono in bilico su. Ecco un frammento di codice dal metodo onDragOver:

 if (destElNodeName === "li") {
	 orig_p = srcEl.parentNode;
	 p = destEl.parentNode;
	
	 if (! _D.hasClass (p.parentNode, "nav")) {
		 if (this.goingUp) {
			 p.insertBefore (srcEl, destEl);
		 Else {}
			 p.insertBefore (srcEl, destEl.nextSibling);
		 }
	 Else {}
		 _D.removeClass (_S.query ("# ​​Sidebar nav:.. Non (alt) li"), "trascinare");
		 _D.addClass (DestEl, "trascinare");
	 }

	 _DDM.refreshCache ();
 }

Componenti vitalista con YUI Compressor

Relativi alla nostra ossessione con le prestazioni, abbiamo creato un front-end Web che utilizza il YUI Compressor in collaborazione con alcuni altri script per costruire i vari componenti JavaScript e CSS utilizzati in tutto vitalista. In questo modo stiamo mantenendo un ingombro minimo codice possibile per ciascuna delle sezioni principali del nostro sito. E come forse sapete, mantenendo il numero di richieste http il più basso possibile aiuta a tempi di caricamento pagina, combinando i file JavaScript e CSS, dove possibile, può aiutare molto.

Alcuni di fondo è necessario qui. Vitalista ha il proprio nucleo di utilità JavaScript e CSS che vengono condivisi tra tutte le sezioni principali del sito. Ogni singola sezione (come il principale dell'applicazione, iPhone ottimizzate applicazione o sito di marketing) ha una sua specifica JavaScript e CSS.

Così le basi del processo di compilazione sono le seguenti: in primo luogo, il globale JavaScript e CSS sono minified con YUI Compressor. Poi, per ogni sezione, i vari file JavaScript e CSS sono minified, e poi combinati con il file globale per creare un unico file. Inoltre, ogni sezione richiede solo alcuni componenti di YUI, per cui ognuno dei pezzi richiesti sono combinati in un unico file YUI, riducendo ulteriormente il numero di file necessari.

Cosa c'è di nuovo?

Il prossimo progetto importante con vitalista utilizzando YUI sarà l'aggiornamento alla 3 YUI quadro. Con la capacità versione 3.1.0 's di utilizzare eredità YUI 2 componenti con facilità, è il momento di fare la mossa.

Se siete interessati a saperne di più vitalista, si prega di consultare il nostro sito web: www.vitalist.com . Inoltre, non esitate a contattarci via email a support@vitalist.com con tutte le domande che potete avere.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!

Utilizzando YUI a EtreProprio.com

EtreProprio.com mira a fornire annunci di alta qualità gratuitamente ( vedi un esempio di un elenco qui ). Ci sono attualmente più di 5000 i proprietari vendono le loro case sulla EtreProprio.com. Abbiamo voluto fornire una interfaccia semplice ma potente, e avevamo bisogno di un sacco di front-end logica. Dopo un po 'di sperimentazione, abbiamo scelto YUI che ci ha colpito come potente, robusto, molto ben documentato e altamente personalizzabile. Di conseguenza, EtreProprio.com sta usando YUI (2.8.0) pesantemente per il suo front-end.

I moduli vengono utilizzati i seguenti:

• CSS: Reset, Base
• Utilities: Animazione, Connection Manager, Cookie, Datasource, Drag and Drop, JSON
• Widget: completamento automatico, Button, Calendario, Container, DataTable, RTE, Slider, Visualizzazione a scheda, Caricatore

Andiamo più profonda su tre implementazioni: Ricerca Avanzata, Photo Uploader e visualizzazione a scheda.

Ricerca Avanzata

La forma utilizzata per trovare gli immobili si sviluppa sulla cima di completamento automatico e doppio cursore . Le etichette sopra i pollici cursore sono posizionati con l'ascolto di cambiare evento. Poi, sono riposizionati se si verifica una collisione tra min e max etichette. L'implementazione di completamento automatico in grado di visualizzare elementi misti come città, codici postali o regioni. Ogni elemento ha il proprio formato di visualizzazione.

Provare dal vivo .

Photo Uploader + Management

Abbiamo usato Uploader YUI , DataTable e Drag and Drop moduli al fine di creare semplice form per il caricamento di foto. In primo luogo, l'utente seleziona le foto sul suo computer. Poi clicca su "Invia tutti" e come le foto vengono inviate, una tabella che segue è popolata con le foto e dettagli. Drag and drop viene applicato alle righe della tabella, consentendo agli utenti di riordinare facilmente le foto. La descrizione di tutte le foto possono essere modificati utilizzando un input di testo semplice e utilità XMLHttpRequest YUI, Connection Manager .

Vedere il video qui sotto per una dimostrazione:

Visualizzazione a scheda

Come c'è un sacco di informazioni da visualizzare in un dettaglio classificati, abbiamo usato Visualizzazione a scheda per progettare la pagina. La capacità di personalizzazione del CSS Visualizzazione a scheda ci permettono di integrare perfettamente con il resto della pagina da un punto di vista del design. Visualizzazione a scheda salva anche noi larghezza di banda in quanto solo gli utenti interessati cliccare su tutte le schede - Visualizzazione a scheda ha il supporto per i contenuti lazyloading Tab , e quel modello funziona bene per noi.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!

Fybit Riatrax4Js: YUI programma in Java

Fybit Riatrax4Js: Scrivi YUI in Java

YUI non è solo una libreria JavaScript fantastico, ma è anche una grande comunità. Gli sviluppatori contribuiscono a YUI e consentire ad altri di trarre beneficio da esso. Ora, Fybit si unisce alla comunità YUI con Riatrax4Js , un toolkit per le rich Internet application (RIA) sulla base di YUI. Riatrax4Js consente di RIA programma in pianura Java e traduce automaticamente il codice JavaScript, utilizzando YUI come strato di fondazione. Con YUI essendo disponibile da Python , Java e JavaScript, un quarto di tutti gli sviluppatori di accedere a YUI. E con il 18% , Fybit è Riatrax4Js copre la maggior parte, composto da sviluppatori Java.

Riatrax4Js: i benefici di Java, potente widget YUI

Abbiamo appena lanciato la versione alpha Riatrax4Js con l'obiettivo di facilitare lo sviluppo di YUI-based RIA. Riatrax4Js unisce i vantaggi di Java con l'insieme di widget ampia e controlli di YUI. Di conseguenza, si ottengono i vantaggi e le comodità di programmazione Java, quali:

• Tipo di sicurezza
• Eredità
• IDE di supporto ( Eclipse , Netbeans , ...)
• Debug
• Strumenti di misura come JUnit
• L'accesso a molte librerie di terze parti

E sapete tutti quanto sia fantastico YUI è:

• Molti widget potente
• Compatibile con tutti i principali browser
• Grandi prestazioni
• Esperti Yahoo! sviluppare YUI

Aggiungere i vantaggi di Java e YUI, si ottiene la proprietà di Riatrax4Js. Riatrax4Js non è un framework lato server. Compila Java a JavaScript, sfruttando lo standard compilatore Java per darvi scalabilità illimitata e la velocità. Inoltre, Riatrax4Js permette di collegare il frontend YUI al server web e back-end con una semplice annotazione meccanismo basato su servizi remoti.

Un esempio semplice: Mostra orario del server sull'etichetta di un pulsante quando si fa clic

In questa sezione viene illustrata attraverso un semplice esempio che è disponibile per il download dal nostro sito web. Applicazioni Riatrax4Js consistono in regolari classi Java che possono utilizzare la versione Java di YUI fornito con Riatrax4Js. Ecco come semplice che è:

 @ MainPanel (name = "index")
 classe DemoPanel pubblico {
		
	 @ Servizi (attuazione TimeServiceImpl.class =)
	 protetti servizio statico TimeService;
	
	 DemoPanel pubblico () {
		 Tasto finale syncButton = Button.create ("syncButton");
		 syncButton.addClickListener (Listener new () {
			 public void eseguire () {
				 syncButton.setConfLabel ("Sync:" + service.getTime ());
			 }
		 });
	 }
 }
		

Il codice inizia con un @MainPanel annotazione per consentire Riatrax4Js per trovare il punto di ingresso al programma. Poi, c'è un campo service che è annotato con la @Services annotazione. Grazie a questa annotazione, il server può essere chiamato per ottenere il tempo (o qualsiasi altro valore / oggetto che si desidera utilizzare sul client). Non deve essere esplicitamente inizializzato, Riatrax4Js fa il lavoro sporco per voi e assicura che il client e componenti server sono collegati tramite l'iniezione di apposita procura. Un pulsante YUI viene quindi creato mediante la sostituzione di un esistente HTML pulsante "syncButton" della pagina HTML. Un ascoltatore click che invoca il servizio di tempo sul server è collegato al pulsante. Questo è un sincrono (cioè bloccando) chiamata. Chiamate asincrone sono altrettanto facili: il proxy generato contiene una variante asincrona di ciascun metodo nell'interfaccia che possono essere facilmente utilizzate. Ecco la pagina HTML corrispondente per il codice:

 <html>
	 <head>
		 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		 <title> Fybit Nuovo </ title>
		 <script type="text/javascript" src="codebase/app-index.js"> </ script>
	 </ Head>
	
	 <body class="yui-skin-sam">
		 <button id="syncButton"> chiamata sincrona </ button>
	 </ Body>
 </ Html>
		

La linea più importante è il tag script all'inizio. Esso comprende un unico file JavaScript app-index.js dove "indice" è il nome dato nel @MainPanel annotazione di cui sopra. Nel corpo HTML, è possibile trovare il pulsante di cui sopra HTML. Riatrax4Js avvolge il pulsante YUI su questo pulsante.

Quando si compila l'applicazione, Riatrax4Js analizza i file di origine e genera il file app-index.js consistente delle classi Java necessarie nel browser tradotto a JavaScript e il codice JavaScript necessario YUI. A differenza dei nativi YUI, non c'è bisogno di preoccuparsi delle dipendenze YUI o che i file da includere YUI - Riatrax4Js li include automaticamente!

Questo è solo un piccolo estratto da una demo più grande . La demo completa spiega anche come chiamare il server in modo asincrono e come utilizzare altri widget YUI (editor di testo, completamento automatico, menu ecc.) Oltre a generare un'applicazione web partendo da zero, usando Riatrax4Js è possibile migliorare le applicazioni web esistenti facilmente con caratteristiche interattive avvolgendo ordinaria elementi HTML con elementi YUI.

Al di là di demo: "PublicationManager" scritto con Riatrax4Js

Abbiamo usato Riatrax4Js per sviluppare una facile applicazione web per gestire le pubblicazioni per un gruppo di ricerca presso una università in Svizzera. Questa applicazione facilita il processo di inserimento e modifica dei record pubblicazione ed è stato messo in funzione nel novembre 2009. Il PublicationManager caratteristiche finestre di dialogo YUI, tabelle ordinabili e ridimensionabile, paginators e il completamento automatico. Il record inseriti dagli utenti sono memorizzati in un database e possono essere modificati e integrati con i file con pochi clic.

Sicurezza

Riatrax4Js è progettato per rendere le applicazioni più sicuro possibile di default. Ma perché Riatrax4Js utilizza JavaScript, le applicazioni sono difficili da sicuro come qualsiasi altra applicazione web dinamiche. Fybit offre estensione separati per Riatrax4Js, Riatrax sicurezza . Essa si basa sul programma di analisi Riatrax4Js il codice e protegge l'applicazione da parte di filtraggio dei contenuti non valida o dannosi e bloccarlo prima che raggiunga il tuo codice e / o application server. Fybit Riatrax La sicurezza è anche configurato con annotazioni Java.

Vuoi provare?

La versione alpha di Riatrax4Js è attualmente disponibile sul nostro sito web agli utenti registrati. E 'bello vedere la base di utenti di Riatrax4Js crescere ed essere utilizzato dagli sviluppatori in questa fase.

Fybit obiettivo è quello di rendere Riatrax4Js miglior toolkit Java RIA disponibile e sostenerlo nel lungo periodo. Noi crediamo che la comunità e gli sviluppatori YUI YUI può darci le risposte importanti sul Riatrax4Js. Siamo entusiasti di sentire le vostre domande e suggerimenti, ad esempio,

• Come possiamo migliorare Riatrax4Js?
• Per quale tipo di progetti che si considera Riatrax4Js?
• Qual è il modo migliore per noi per distribuire il prodotto?

Come Fybit è una piccola azienda startup, apprezziamo tutti coloro che vogliono contribuire alla Riatrax4Js per renderlo il numero uno quadro RIA. Solo noi due righe , se siete interessati o volete saperne di più.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!