sencha extjs

fonte: dal web

Rieccoci a parlare di Sencha ExtJs, uno tra i più interessanti e potenti framework Javascript oggi in circolazione. Quello che vediamo in questo breve tutorial è un comodo override da applicare ad tutti i widget “Window” per centrare nello schermo la renderizzazione delle finestre.

Questo approccio è molto comodo quando stiamo implementando ad esempio l’interfaccia di un applicativo che richiedere l’utilizzo di molte finestre, come ad esempio un gestionale o un CMS. La potenza di Sencha ExtJs rispetto ai molti framework Javascript considerati suoi “avversari” (Dojo in primis) è data proprio dal fatto che questo prodotto mette a disposizione degli sviluppatori tutta una seria di widget semplici, completi e decisamente funzionali, tutti praticamente pronti all’uso.

(continua…)



sencha extjs

fonte: dal web

Sencha ExtJs sta guadagnando sempre più terreno nel panorama dei framework Javascript per lo sviluppo di applicazione web ma anche mobile, grazie alla sua flessibilità, efficiente, potenza e facilità d’uso.

In questo tutorial vedremo una piccola funzione per leggere uno specifico parametro passato nell’URL.

(continua…)



sencha extjs

fonte: dal web

La navigazione del DOM (Document Object Model) e l’utilizzo dei selectors (selettori) sono due caratteristiche fondamentali sulle quali possiamo confrontare i diversi framework javascript a disposizione per lo sviuppo delle moderne interfacce web complesse.

Sencha ExtJs mette a disposizione gli strumenti per lavorare e manipolare le pagine web: in questo tutorial vedremo come selezionare elementi specifici della pagina, come manipolarli e come recuperare le informazioni contenute negli elementi stessi.

(continua…)



sencha extjs

fonte: dal web

Fornire effetti visuali interessanti e piacevoli ad una applicazione è un elemento importante nella progettazione ed implementanzione delle interfacce grafiche: grazie ad essi infatti possiamo non solo fornire informazioni e feedback all’utente finale in maniera semplice ed estremamente intuitiva e gradevole, ma anche e soprattutto rendere la navigazione del sito piacevole e decisamente più accattivante.

In questo tutorial vedremo alcuni dei più importanti effetti grafici che Sencha ExtJs ci permette di applicare agli elementi della nostra interfaccia. Vedremo come, con pochissime righe di codice e con qualche accortezza, possiamo dare alle nostre interfacce tutto un altro aspetto.

(continua…)



sencha extjs

fonte: dal web

Oggi vi segnalo una delle risorse più interessanti disponibili attualmente in rete per vedere all’opera il framework javascript Sencha ExtJs: vediamo un pò più in dettaglio cosa possiamo trovare nelle Saki’s Extensions.

Questo sito combina alcuni degli esempi più interessanti disponibili sul sito ufficiale di Sencha ExtJs in demo davvero notevoli: il risultato è un insieme di demo utilissime per chi vuole approfondire o conoscere le potenzialità di  Sencha ExtJs , come ad esempio il CheckTree Panel (un tree esteso che permette di selezionare i nodi di un albero grazie ad una checkbox) e l’ArrayTree (che permette di creare un tree partendo da un array statico di elementi).

(continua…)



PHPExtJs (oggi Sencha) è uno dei principali framework javascript attualmente disponibili: è potente, flessibile, cross-platform, ed è probabilmente uno degli strumenti più veloci per realizzare rich internet applications. In questo articolo vedremo i concetti principali che permettono di integrare ExtJs in una web application PHP-based attraverso il protocollo JSON.

(continua…)



Quando scriviamo il nostro codice è davvero comodo avere un assistente che ti suggerisce ad esempio i metodi che possiamo richiamare su un oggetto o le classi che abbiamo a disposizione per raggiungere il nostro obiettivo. Sono strumenti che quando inizi ad usare non puoi più farne a meno.

Il “Code Assistant” di Eclipse è uno strumento molto potente, che non solo suggerisce le librerie di default del linguaggio di programmazione con il quale stiamo lavorando (Java, PHP, ecc.) ma permette anche di personalizzare le librerie a disposizione, aggiungendone ad esempio di terze parti.

Questo non solo velocizza la scrittura del codice, ma permette anche di imparare molto più rapidamente il linguaggio o i framework che stiamo utilizzando nel nostro applicativo. Quando però lavoriamo in team su un progetto, è molto probabile che si utilizzino i plugin come quello di subversion per gestire il lavoro. Il problema è che quando lavoriamo in questo ambiente, di default, il progetto perde l’indicazione sulla sua stessa natura….in pratica Eclipse non sa più se stiamo lavorando in PHP o Java, sa solo che stiamo lavorando con subversion, perdendo in questo modo il prezioso aiuto che ci fornisce il Code Assistant. Ma per risolvere questo problema ci vogliono davvero 5 minuti…

Dobbiamo concentrare la nostra attenzione sui file “.buildpath” e “. project” del nostro progetto Eclipse: se li editiamo noteremo che non vi sono indicazioni circa la natura del progetto (cioè se siamo in ambiente Java, PHP o Javascript). Tutto ciò che dobbiamo fare è inserire nei rispettivi file le seguenti direttive in neretto:

.PROJECT

<?xml version=”1.0″ encoding=”UTF-8″?>
<projectDescription>
<name>prova</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>org.eclipse.wst.validation.validationbuilder</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>org.eclipse.dltk.core.scriptbuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>org.eclipse.php.core.PHPNature</nature>
</natures>
</projectDescription>

.BUILDPATH

<?xml version=”1.0″ encoding=”UTF-8″?>
<buildpath>
<buildpathentry kind=”con” path=”org.eclipse.php.core.LANGUAGE”/>
<buildpathentry external=”true” kind=”lib” path=”/myLibrary”/>
<buildpathentry kind=”src” path=”"/>
</buildpath>

A questo punto, una volta riavviata l’IDE, il nostro progetto sarà etichettato in base alla sua natura, e dunque si riattiveranno tutte le funzionalità e tutti gli strumenti a disposizione per lo sviluppo con l’ambiente che abbiamo impostato (e il Code Assistant non fa eccezione! ;) )



Le chiamate asincrone sono ormai un fondamento delle interfacce web, e praticamente tutti i principali framework javascript in circolazione forniscono degli strumenti embedded che semplificano lo sviluppo e automatizzano la maggior parte delle impostazioni.

ExtJs è un framework javascript che è riuscito ad ottenere forti consensi nell’ambito dello sviluppo di interfacce web: questo grazie soprattutto alla potenza del prodotto e alla comunità decisamente attiva che fornisce un importante supporto agli sviluppatori.

Il meccanismo implementato da questo  framework per eseguire chiamate Ajax è estremamente semplice ed intuitivo, meccanismo che tra le altre cose ricorda molto da vicino quello adottato da altri framework javascript come JQuery. Vediamone un esempio:

Ext.Ajax.request({
[…]
url: ‘pagina.php’,
params: {id: ‘3’},
success: function(resp) {
[…]
} ,
failure: function(a, b) {
[…]
}
});

Con queste poche righe di codice, ExtJs ci permette di eseguire una chiamata Ajax verso l’indirizzo specificato nel parametro di configurazione “url” (pagina.php) e di gestire sia il caso di risposta positiva sia il caso di insuccesso.
“params” invece permette di specificare i parametri che verranno inviati al file “pagina.php” durante la chiamata Ajax: nel nostro esempio inviamo un parametro con identificativo “id” che contiene il valore 3.

E se volessimo inviare un array? Nessun problema, ci viene in aiuto JSON.

ExtJs è chiaramente progettato per fornire pieno supporto a JSON, dunque possiamo sfruttare questo protocollo. Codifichiamo quindi il nostro array utilizzando le funzioni che ExtJs ci mette a disposizione, come ad esempio la seguente:

Ext.encode(array)

Supponendo quindi di voler inviare un array di valori con una chiamata Ajax il nostro codice potrebbe diventare:
Ext.Ajax.request({
[…]
url: ‘pagina.php’,
params: {data: Ext.encode(arrayData)},
success: function(resp) {
[…]
} ,
failure: function(a, b) {
[…]
}
});

Lato server, sarà sufficiente eseguire il decoding del parametro “data”, che giunge al server sottoforma di stringa JSON:

$myArray = json_decode($_POST[‘data’]);



Il redirect permette di reindirizzare la pagine verso un’altra, senza interazione da parte dell’utente e inoltrando perciò le visite verso la nuova destinazione. Vi sono molti modi diversi di fare un redirect, noi vedremo i metodi per i principali linguaggi Web.

Metodo HTML

E’ sufficiente creare una pagina con il seguente codice:

<HTML>
<HEAD>
<TITLE>Html Redirect…</TITLE>
<META HTTP-EQUIV=”REFRESH” CONTENT=”4; URL=http://www.google.it”>
</HEAD>
<BODY>
Stiamo effettuando un redirect..
</BODY>
</HTML>

La riga più importante di questo codice è la seguente:

<META HTTP-EQUIV=”REFRESH” CONTENT=”4; URL=http://www.google.it”>

con la quale sostanzialmente indichiamo che la pagina è appunto un redirect, che il redirect verrà effettuando entro 4 secondi e che la destinazione del redirect è la pagina http://www.google.it . Ovviamente se vogliamo che il redirect sia immediato è sufficiente inserire il valore 0 al posto del 4 . Fate attenzione a questo punto: i valori dallo 0 all’1 sono considerati dalla maggior parte dei motori di ricerca come permanent redirect ( codice html 301 ), mentre i valori maggiori di 2 sono considerati temporary redirect.

Metodo Javascript

Creiamo una pagina .html nella quale inseriamo il seguente codice:

<HTML>
<HEAD>
<TITLE>Redirect…</TITLE>
<script language=”javascript”>
<!–
location.replace(“http://www.google.it”);
–>
</script>
</HEAD>
<BODY>
Redirect in corso…
</BODY>
</HTML>

In questo caso c’è poco da aggiungere: si crea un piccoloscript javascript nel quale appunto utilizziamo la direttiva location.replace per indicare la presenza di un redirect e dunque la nuova destinazione.

Metodo Php

Nella pagina php in cui vogliamo fare il redirect inseriamo il seguente codice:

<?php
header(“Location: http://www.google.it”);

/* se vogliamo usare il refresh… */

header(“Refresh: 0; URL=http://www.google.it”);
?>

Metodo Asp

In asp sostanzialmente il procedimento è molto simile al metodo php; ecco il codice da inserire nel nostro file asp su cui vogliamo effettuare il redirect:

<%@ Language=VBScript %>
<%
Response.Status=”301 Moved Permanently”
Response.AddHeader “Location”, “http://www.google.com”
%>

<!– oppure //–>

<%
Response.Buffer = true
%>
<html>
<%
Response.Redirect(“http://www.google.com”)
%>
<HEAD>
<TITLE>Redirect…</TITLE>
</HEAD>
<BODY>
Redirect in corso…
</BODY>
</HTML>

Metodo JSP

Per la Java Server Page, il codice da utilizzare è il seguente:

<%
String redirectURL = “http://www.google.it/”;
response.sendRedirect(redirectURL);
%>

Metodo Coldfusion

In Coldfusion è sufficiente utilizzare la seguente riga:

<cflocation url=”http://www.google.it”>

Anche se non è fondamentale, è comunque molto importante conoscere i principali codici di stato HTML : bisogna fare molta attenzione se non si vuole perdere traffico o posizioni sui motori di ricerca. Ecco i principali:

      300 Multiple Choices
   
      301 Moved Permanently
   
      302 Found
   
      303 See Other
   
      304 Not Modified
   
      305 Use Proxy
   
      306 (Unused)
   
      307 Temporary Redirect


Una spiegazione più approfondita su tali codici è possibile trovarla in questa pagina , ovvero nelle pagine del World Wide web Consortium.



Assegnare una classe ad un elemento HTML è ovviamente una cosa molto semplice, ma spesse volte abbiamo bisogno di variare dinamicamente lo stile di un oggetto HTML, ad esempio a seguito di eventi come “onmouseover” o “onclick” .

Supponiamo ad esempio di voler gestire l’apparizione di due div, creando una sorta di menu. L’esempio che vogliamo realizzare è visibile qui.

Non soffermiamoci su come sono implementate le classi CSS: l’unica istruzione importante da tenere presente per le classi dei div che contenugono il testo è il valore di default display:none; , che appunto di default permette di nacondere il contenuto dei div in questione.

La tecnica per realizzare un menu di questo tipo è in realtà molto semplice: quando con il cursore ci troviamo sopra uno dei due link di menu ( “primo” o “secondo”, per interderci ), viene attivato l’evento javascript “onmouseover“, attraverso il quale richiamiamo la funzione “openDiv“.

Questa funzione non fa altro che settare alcune direttive in base al link menu in cui il cursore si trova: analizziamo il primo caso, il secondo è sostanzialmente uguale.

Nel primo caso, quando cioè il mouse si trova sul link menu “primo”, la funzione javascript “openDiv” setta i seguenti parametri:

document.getElementById(id).className = ‘submenu_sfondo_S’;
document.getElementById(‘submenu_01′).style.display = ‘inline’;
document.getElementById(‘secondo’).className = ‘submenu_S’;
document.getElementById(‘submenu_02′).style.display = ‘none’;

La prima riga è la più importante, perchè è quella che di occupa di cambiare il valore dell’attributo class del div di riferimento, ovvero di cambiare la classe di stile per l’elemento (id) passato come parametro. La successiva riga non fa altro che impostare l’attributo display sul valore ‘inline‘ , in modo da visualizzare il contenuto del div corrispondente al link menu passato come parametro. Le ultime due righe compiono sostanzialmente i passi complementari sull’altro div (si imposta la classe css senza lo sfondo e si nasconde il div), in modo da creare l’effetto di alternanza.

Per chi avesse ancora dubbi, può rivedere il codice dell’esempio seguendo questo link.