Programmazione Web » Ajax http://www.programmazione-web.com il Blog open degli sviluppatori del web! Mon, 25 Jul 2011 16:39:01 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Passare oggetti javascript a ASP.net web services http://www.programmazione-web.com/passare-oggetti-javascript-asp-net-web-services.php http://www.programmazione-web.com/passare-oggetti-javascript-asp-net-web-services.php#comments Sun, 08 Nov 2009 15:37:14 +0000 neryo http://www.programmazione-web.com/?p=315 Per chi sviluppa  applicazioni AJAX avanzate usando il framework Microsoft ASP.NET sa che è possibile esporre facilmente web services lato client utilizzando lo ScriptManager, ovvero è possibile richiamarli comodamente tramite javascript utilizzando chiamate a metodi omonimi. Questa funzionalità è senza dubbio parecchio comoda, soprattutto per chi sa che questi automatismi non sono così immediati programmando ad esempio in php, dove per fare richieste javascript a pagine web bisogna utilizzare costrutti e quindi crearsi tutto il codice di interfacciamento a metodi/pagine server side.

Come possiamo vedere da questo tutorial: Exposing Web Services to Client Script in ASP.net AJAX è semplice creare una classe che estende System.web.services.Webservice, contenente metodi che effettuano logiche server side e possono restituire dati lato client, e implementare funzionalità asincrone (AJAX) in modo molto naturale.

Al di là di questo aspetto (se non lo conoscete potete approfondirlo dall’articolo sopra linkato) che sostanzialmente riduce le tempistiche di sviluppo di callback asincrone, volevo affrontare qui in questo articoletto la possibilità di passare e restituire oggetti strutturati tramite web services per poi ritrovaseli nello stesso modo sia lato client sia lato server.

E’ infatti possibile definire una funzione callback javascript lato client che richiama un metodo web service e passargli l’oggetto objParams per poi elaborarlo lato server. Qui sotto un semplice esempio scritto sul momento:

  1.  
  2. function callback_sum() {
  3.  
  4. var objParams = new Object();
  5. objParams .x = 2;
  6. objParams .y = 3;
  7. objParams.z = 0;
  8.  
  9. SimpleWebService.doSum(objParams, callback_sum_success, callback_sum_fail);
  10. }
  11.  
  12. function callback_sum_success(res){
  13.  alert(res.z); //5
  14. }
  15.  
  16. //gestire eventuali exception
  17. function callback_sum_fail(ex){
  18. //ex._message;
  19. }
  20.  

Lato server dobbiamo definire lo stesso oggetto (chiamato Sum) con le stesse proprietà dell’oggetto client side. N.B. Nell’esempio uso VB.net ma vale lo stesso in c#.net

  1.  
  2.  
  3. Public Class SimpleWebService
  4.     Inherits System.Web.Services.WebService
  5.  
  6.     <webmethod (True)> _
  7.     Public Function doSum(ByVal sumObj As Sum) As Sum
  8.          
  9.           sumObj.z = sumObj.x + sumObj.y
  10.  
  11.           return sumObj
  12.  
  13.     End Function
  14.  
  15.     Public Class Sum
  16.         Public x As Integer
  17.         Public y As Integer
  18.         Public z As Integer
  19.     End Class
  20.  
  21. End Class
  22. </webmethod>

Come possiamo notare con questo metodo possiamo veramente sbizzarrirci a passare dei dati complessi da client a server e da server a client, migliorando sicuramente anche l’estendibilità e la chiarezza del codice, e aumentando a piacere il numero di parametri senza variare la firma del metodo del web service..ecc
Esistono però dei limiti sulle tipologie di dati più complessi tipici dei linguaggi moderni, ma rimando ad approfondimenti sui prossimi articoli..

Rifermenti:
http://www.asp.net/ajax/documentation/live/Tutorials/ExposingWebServicesToAJAXTutorial.aspx

]]> http://www.programmazione-web.com/passare-oggetti-javascript-asp-net-web-services.php/feed 0 Il futuro per le web application è javascript! http://www.programmazione-web.com/il-futuro-per-le-web-application-e-javascript.php http://www.programmazione-web.com/il-futuro-per-le-web-application-e-javascript.php#comments Sat, 10 Oct 2009 19:44:35 +0000 neryo http://www.programmazione-web.com/?p=263 Ebbene si… il tempo passa, ogni giorno vedo sempre più javascript nelle applicazioni moderne, il web ormai per le applicazioni web si sta spostando sempre più client side, il futuro sta proprio sulle nostre macchine non sul server, a cui viene lasciato il solo scopo di essere un contenitore di dati da interrogare, su cui mantenere e garantire le logiche di sicurezza delle nostre applicazioni, e molti automatismi di presentation ora stanno direttamente sul client! Questo grazie alle nuove necessità del web 2.0, che vuole diventare la sostituzione quasi totale alle applicazioni stand alone, quindi avere maggiori interazioni, più velocità grazie a callback asincrone di dati (AJAX) e automatismi che non necessitano postback di dati, che rendono il web inutilmente lento e macchinoso.

Ora poi è diventato tutto molto più semplice grazie ai numerosi framework javascript, come jQuery che grazie ad un layer aggiuntivo ci consentono di utilizzare con maggiore potenza e velocità tutta la ricchezza del linguaggio JS.

Attualmente chi non saprà utilizzare questi strumenti al top rimarrà indietro.. verrà schiacciato dalla concorrenza agguerrita dei programmatori del futuro che non si fermano a fare andare le proprie applicazioni, ma vogliono sempre il massimo!

]]> http://www.programmazione-web.com/il-futuro-per-le-web-application-e-javascript.php/feed 2 Jquery 1.3 la ferrari dei framework javascript! http://www.programmazione-web.com/jquery-13-la-ferrari-dei-framework-javascript.php http://www.programmazione-web.com/jquery-13-la-ferrari-dei-framework-javascript.php#comments Wed, 14 Jan 2009 12:06:12 +0000 neryo http://www.programmazione-web.com/?p=137 E’ stata rilasciata la nuova versione del noto framework javascript Jquery, giunta alla release 1.3!

Questa versione oltre ad offrire alcune novità, è stata ottimizzata per migliorare notevolmente le performance di esecuzione, rendondo questo framework come da titolo: la Ferrari dei javascript!

jquery insertion benchmark

jquery insertion benchmark

Come novità è stato introdotto Sizzle, un nuovo CSS selector engine, che è ora totalmente indipendente dalla libreria, al quale hanno contribuito anche gli svilupppatori di Dojo. Questo aggiunta ha permesso di ridurre sensibilmente del 49% i tempi di esecuzione, rispetto alla precedente versione del ramo 1.2.x, e sempre grazie a Sizzle, si ha la possibilità di associare eventi ad oggetti creati in realtime, il tutto senza preoccuparsi di dover rieseguire il bind di eventi agli stessi in caso di aggiornamento del DOM.

Inoltre è stata resa indipendente dal framework anche la parte di compatibilità cross-browser, la quale è stata delegata ad un oggetto esterno; questo accorgimento permetterà di mantenere piu controllabile ed estensibile il framework.

Si possono trovare informazioni sulla documentazione di release ufficiale del progetto.

La versione compressa è di solo 18Kb e quella di development circa 114Kb.

Riferimenti:
http://jquery.com.

]]> http://www.programmazione-web.com/jquery-13-la-ferrari-dei-framework-javascript.php/feed 0 Tutorial Codeigniter per l’integrazione di ajax con jquery http://www.programmazione-web.com/tutorial-codeigniter-integrazione-ajax-jquery.php http://www.programmazione-web.com/tutorial-codeigniter-integrazione-ajax-jquery.php#comments Sat, 07 Jun 2008 14:07:36 +0000 neryo http://www.programmazione-web.com/?p=56 Tutorial Codeigniter per l’integrazione di ajax con jquery

Negli ultimi due anni passati, AJAX è diventato velocemente uno strumento ormai necessario per ogni web developer. In effetti grazie all’utilizzo di AJAX è possibile velocizzare le applicazioni, diminuendo il consumo di banda e i tempi di caricamento delle pagine, donando inoltre una maggiore usabilità.

In questo tutorial per il framework Codeigniter, tradotto parzialmente dall’articolo di Michael Wales, verrà mostrato come implementare in Codeigniter un caricamento dinamico di record da un database, utilizzando chiamate AJAX con l’usilio di Jquery.

La nostra applicazione sarà composta da una lista di post di un blog, che sono suddivisi in due tipologie: la lista dei pubblicati o la lista delle bozze. Inizialmente la nostra applicazione funzionerà senza l’utilizzo di chiamate AJAX; poi successivamente inseriremo questa funzionalità utilizzando un semplice script jQuery, garantendo comunque la fruibilità del sito anche se l’utente non ha abilitato il supporto javascript (perdendo solamente le chiamate asincrone AJAX ma non i contenuti da visualizzare).

Creazione dell’applicazione

Nella nostra installazione del framework Codeigniter, creiamo una nuova classe controller che in questo tutorial chiameremo Post.

  1. // File: ./controllers/post.php
  2. class Post extends Controller {
  3.  
  4. function Post() {
  5.   parent::Controller();
  6. }
  7.  
  8. function index($status = NULL) {
  9.  
  10.  $this->load->model(‘posts’);
  11.  
  12.  if ($status === NULL) {
  13.   $template[‘posts’] = $this->posts->get_where(array(‘id >’=>0));
  14.  } else {
  15.    $template[‘posts’] = $this->posts->get_where(array(‘status’=>$status));
  16.  }
  17.  
  18.   $template[‘partial’] = ‘post/list’;
  19.   $this->load->view(‘view’, $template);
  20. }
  21. }
Qui viene delineata la struttura di base della nostra applicazione. Il nostro metodo index() accetta un parametro facoltativo (status), che se non è definito tornera’ tutti i posti all’interno del nostro blog.
Il controller attraverso il modello, effettua una query ritornando la lista dei post del blog sulla base di determinati parametri, settando una variabile chiamata partial, che verra’ utilizzata anche in seguito per la visualizzazione dei risultati parziali.
Ma passiamo subito al modello per comprendere completamente il funzionamento del controller visto precendentemente.
  1. // File: ./models/posts.php
  2. class Posts extends Model {
  3.  
  4. var $_table = ‘posts’;
  5.  
  6. function Posts() {
  7.   parent::Model();
  8. }
  9.  
  10. function get_where($params = array()) {
  11.  
  12.  if (count($params) > 0) {
  13.   $query = $this->db->get_where($this->_table, $params);
  14.  
  15.   if ($query->num_rows() > 0) {
  16.     return $query->result_array();
  17.   }
  18.  }
  19.  
  20.  return FALSE;
  21. }
  22. }
Nel metodo get_where () si nota come l’autore voleva assicurarsi che la funzione ricevesse un parametro, altrimenti restituisce inesorabilemnte un FALSE al controller al posto dell’array contenente i dati.

Giunti a questo punto si puo’ dire che la nostra applicazione e’ praticamente fatta e ora possiamo iniziare a giocare con AJAX! Inanzittutto vediamo di creare il file della vista principale, che verrà caricata insieme all header e al footer dal nostro controller.

  1. // File: ./views/view.php
  2. < ?php $this->load->view(‘_global/header’); ?>
  3. < ?php $this->load->view($partial); ?>
  4. < ?php $this->load->view(‘_global/footer’); ?>

Questa vista come vediamo include i file header e footer che sono all’interno della directory _global, creata dall’autore con l’underscore davanti al nome per forzarla a rimanere per comodita’ sempre in alto della lista dei file e direcory.

  1. // File: ./views/_global/header.php
  2.  
  3. <script src="<?php echo base_url(); ?><!–
  4. assets/js/jquery-1.2.6.min.js" type="text/javascript"><!–mce:0–></script>
  5. <script src="<?php echo base_url(); ?><!–
  6. assets/js/ajax_tut.js" type="text/javascript"><!–mce:1–></script>
  7. <div id="wrapper">
  8. <div id="header">
  9. <h1>CodeIgniter Ajax Tutorial</h1>
  10. <div id="nav">
  11. <ul>
  12.         <li>< ?php echo anchor(”, ‘All Posts’); ?></li>
  13.         <li>< ?php echo anchor(‘published’, ‘Published’); ?></li>
  14.         <li>< ?php echo anchor(‘draft’, ‘Drafts’); ?></li>
  15. </ul>
  16. </div>
  17. </div>
  18. </div>

In questo file header avrete notato l’utilizzo della funzione base_url () al fine di garantire ai file statici inclusi di avere un riferiemento assoluto che funziona sempre. Non fate caso agli utlimi 3 tags di chiusura sbagliati nel header. perche’ non sono riuscito a toglierli qui nel blog, perche’ il mio syntax highlighter me li continua ad aggiungere :( infatti andrebbero nel footer ovvero i tag di chiusura del div wapper del body e del tag html.

Ecco la vista che implementa le viste dei post del blog, parziali e non:

  1. // File: ./views/post/list.php
  2. <div id="loading">Loading…</div>
  3. <div id="list">
  4. < ?php
  5. foreach ($posts as $post) {
  6. echo ‘
  7. <h3>’ . $post[‘title’] . ‘<span class="created_on">Posted on: ‘ . $post[‘created_on’] . ‘</span>’;
  8. }
  9. ?></h3>
  10. </div>

Nella vista (post/list.php) non credo ci sia niente da chiarire, tutto quello che fa è effettuare un ciclo sull’array posts ritornato dal modello tramite il controller e stampare il titolo e la data di creazione di ogni post.

La nostra applicazione è praticamente completa! Ora è giunto il momente di fare gli ultimi passi e accertarsi che funzioni. Per prima cosa andremo a creare il database con la tabella e i dati per il test utilizzando il file sql di dump:

  1. CREATE TABLE IF NOT EXISTS `posts` (
  2. `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  3. `title` varchar(255) NOT NULL,
  4. `status` varchar(10) NOT NULL,
  5. `created_on` date NOT NULL,
  6. PRIMARY KEY  (`id`)
  7. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;
  8.  
  9. INSERT INTO `posts` (`id`, `title`, `status`, `created_on`) VALUES
  10. (1, ‘First post.’, ‘published’, ’2008-05-27′),
  11. (2, ‘This is the second post.’, ‘published’, ’2008-05-27′),
  12. (3, ‘This is a draft.’, ‘draft’, ’2008-05-28′);

Ora dobbiamo effettuare alcuni cambiamenti alle configurazioni, ricordando che i settaggi potrebbero essere leggermente diversi dalla vostra situazione, ma sicuramente e’ un buon punto di partenza.

Per prima cosa accertevi che sia configurato in modo appropiato il base url

  1. // File: ./config/config.php
  2. $config[‘base_url’]    = "http://localhost/ajax_tut/";

Ora, assicuratevi che potete connettervi al vostro database

  1. // File: ./config/database.php
  2. $db[‘default’][‘hostname’] = "localhost";
  3. $db[‘default’][‘username’] = "root";
  4. $db[‘default’][‘password’] = "";
  5. $db[‘default’][‘database’] = "ajax_tut";
  6. $db[‘default’][‘dbdriver’] = "mysql";

Dobbiamo caricare automaticamente le librerie e gli helper necessari per renderci lo sviluppo piu semplice e veloce.

  1. // File: ./config/autoload.php
  2. $autoload[‘libraries’] = array(‘database’);

Infine, dobbiamo riderezionare la route di codeigniter sul nostro controller di post che chiamera’ in automatico il metodo index() contenuto in esso.

  1. // File: ./config/routes.php
  2. $route[‘([a-zA-Z]+)’] = ‘post/index/$1′;
  3. $route[‘default_controller’] = ‘post’;

Qui sotto possiamo vedere il css agganciato alla nostra applicazione:

  1. // File: ./assets/css/style.css
  2. body {
  3. font:0.8em Verdana;
  4. text-align:center;
  5. }
  6.  
  7. a:link, a:active, a:hover, a:visited {
  8. color:blue;
  9. text-decoration:none;
  10. }
  11.  
  12. #wrapper {
  13. margin:0 auto;
  14. text-align:left;
  15. width:600px;
  16. }
  17.  
  18. #nav {
  19. background:#DDD;
  20. }
  21.  
  22. #nav a {
  23. padding:10px;
  24. }
  25.  
  26. #nav a:hover {
  27. background:#FFF;
  28. }
  29.  
  30. #nav ul {
  31. padding:5px;
  32. list-style:none;
  33. }
  34.  
  35. #nav li {
  36. display:inline;
  37. margin-right:1.5em;
  38. }
  39.  
  40. #loading {
  41. display:none;
  42. font-weight:bold;
  43. text-align:center;
  44. }
  45.  
  46. #list h3 {
  47. display:inline;
  48. }
  49.  
  50. .created_on {
  51. color:#AAA;
  52. font-size:0.7em;
  53. }
Ma e’ AJAX?
Ci sono diversi modi per implementare AJAX in un sito web, soprattutto in un sito realizzato con Codeigniter. Noi potremmo tornare XML o JSON e fare poi il parsing all’interno del nostro controller, o semplicemente inviare tutto direttamente alle nostre viste e gestire solo la formattazione (se non è richiesto il parsing). Probabilmente il modo più semplice, all’interno di CodeIgniter, è semplicemente caricare un file di vista proprio come con un normale richiesta! Sappiamo tutti pero’ che per caricare una vista abbiamo bisogno sempre di un metodo controller che ne implementa la logica, gestendo le eventuali chiamate verso il modello, e inviando i dati per la visualizzazione. Alcuni preferiscono creare una nuova classe, in particolare per le richieste AJAX, altri creano nuovi metodi all’interno della stessa classe che verranno utilizzate solo da AJAX.

L’autore, invece preferisce tenere la classe asciutta e utilizzare lo stesso controller effettuando solamente alcune modifiche richiamando librerie esterne, dal momento che il nostro metodo attuale richiede solamente una vista (che comprende header footer e partial).

Per fare questo crea quindi prima una classe libreria, contenente un metodo che ci consenta di sapere se si tratta di una richiesta AJAX o meno e poi utilizzare questa libreria come una condizione per determinare che cosa fare in base al tipo di richiesta.

  1. // File: ./libraries/request.php
  2. class Request {
  3.  function is_ajax() {
  4.     return (isset($_SERVER[‘HTTP_X_REQUESTED_WITH’]) &amp;&amp; ($_SERVER[‘HTTP_X_REQUESTED_WITH’] == ‘XMLHttpRequest’));
  5.   }
  6. }

In questa classe tramite il metodo is_ajax(), semplicemente viene effettuato un controllo sulla variabile HTTP_X_REQUESTED_WITH che è un header jQuery settato quando noi effettuamo una richiesta di tipo AJAX.

Ora nel controller dobbiamo richiamare questa libreria per effettuare il controllo e inviare solamente i dati parziali alla vista.

  1. // File: ./controllers/post.php
  2. function index($status = NULL) {
  3.  $this->load->model(‘posts’);
  4.  $this->load->library(‘request’);
  5.  
  6.  if ($status === NULL) {
  7.   $template[‘posts’] = $this->posts->get_where(array(‘id >’=>0));
  8.  } else {
  9.    $template[‘posts’] = $this->posts->get_where(array(‘status’=>$status));
  10.  }
  11.  $template[‘partial’] = ‘post/list’;
  12.  
  13.  if ($this->request->is_ajax()) {
  14.   $this->load->view($template[‘partial’], $template);
  15.  } else {
  16.   $this->load->view(‘view’, $template);
  17.  }

Ora vediamo come vengono implementate in semplice stile jQuery le chiamate ajax, assicuriamoci pero’ di aver scaricato la liberia jQuery, che sia nella cartella dell’applicazione in /assets/js/ e venga agganciata correttamente all’header.php in _global.

  1. //File: ./assets/js/ajax_tut.js
  2. $(document).ready(function() {
  3.  $(‘#nav a’).click(function(event) {
  4.   event.preventDefault();
  5.   $(‘#list’).load(this.href);
  6.  });
  7.  
  8. $(‘#loading’).ajaxStart(function() {
  9.  $(this).show();
  10. }).ajaxStop(function() {
  11.  $(this).hide();
  12. });
  13.  
  14. $(‘#list’).ajaxStart(function() {
  15.  $(this).hide();
  16. }).ajaxStop(function() {
  17.  $(this).show();
  18. });
  19. });

Javascript e jQuery sono al di fuori dello scopo di questo tutorial, quindi se avete problemi a capire quanto sopra riportato vi consiglio di fare riferimento alla documentazione ufficiale sul sito di jQuery. Spero che questo tutorial vi abbia chiarito le idee su come includere AJAX, in particolare jQuery nelle vostre applicazioni con Codeigniter, ringrazio Michael Wales per il suo tutorial che mi ha permesso di realizzare questa traduzione sul mio blog.

Se avete commenti, postate pure.. Vi ricordo che il codice del solo applicativo senza il framework codeigniter e’ scaricabile qui sotto.

Riferimenti

http://michaelwales.com/tutorials/codeigniter-ajax-with-jquery/
http://www.michaelwales.com/wp-content/tutorials/codeigniter-ajax-with-jquery/codeigniter-ajax-with-jquery.zip
http://www.codeigniter.com
http://jquery.com

]]> http://www.programmazione-web.com/tutorial-codeigniter-integrazione-ajax-jquery.php/feed 0 Jquery Ajax content loading, caricare contenuti html in un div http://www.programmazione-web.com/jquery-ajax-content-loading-caricare-contenuti-div.php http://www.programmazione-web.com/jquery-ajax-content-loading-caricare-contenuti-div.php#comments Mon, 19 May 2008 17:40:17 +0000 neryo http://www.programmazione-web.com/jquery-ajax-content-loading-caricare-contenuti-div.php Jquery Ajax content loading (XMLHttpRequest), caricare contenuti html in un div.

Capita sempre piu’ spesso di voler caricare porzioni di contenuti presenti in un sito, senza dover per forza ricaricare interamente tutto il contenuto della pagina.. questo tipo di interazioni sono la novita’ che contraddistinguono i siti e le applicazioni web di ultima generazione, che consentono di avere una rapporto di usabilita’ molto piu’ alto grazie a chiamate asincrone (Ajax), che ci permettono di interagire con le applicazioni in modo piu’ fruibile, avvicinando il web a vere e proprie applicazioni desktop.

Per realizzare questo tipo di chiamate dinamiche e interattive si utilizza solitamente l’oggetto XMLHttpRequest che e’ un elemento fondamentale della tecnica di sviluppo web conosciuta con l’acronimo Ajax.

Un esempio di script che realizza questo tipo di interazioni lo possiamo vedere in questa pagina.

Ma in questo post voglio pero’ illustrarvi come realizzare lo stesso meccanismo utilizzando il framework jQuery, che lo implementa in modo molto semplice, senza dover direttamenti occuparci dei dettagli sottostanti. Ricordando che jQuery a mio parere e’ il framework javascript che ha il rapporto tra semplicita’/potenza piu’ alto e anche le operazioni piu’ complesse vengono realizzate con pochissime righe di codice.

Detto questo vi illustro come caricare contenuti dinamici usando jquery in un div a cui gli e’ stato assegnato un id css univoco:

  1. <script src="jquery-latest.js" type="text/javascript"></script>
  2. <script type="text/javascript">
  3.  
  4. $(document).ready(function(){
  5.  
  6.         $("#contentArea").load("pagina.php");
  7.  
  8. });
  9.  
  10. </script>
  11.  
  12. <div id="contentArea"> </div>

se invece vogliamo variare il contenuto del div a secondo del link che primiamo possiamo creare una funzione:

  1. <script src="jquery-latest.js" type="text/javascript"></script>
  2. <script src="jquery-latest.js" type="text/javascript">
  3.  
  4.  function loadContent(id) {
  5.         $("#contentArea").load("rpc.php?o="+id+"");
  6.   }
  7.  
  8. </script>
  9.  
  10. <body onLoad="loadContent(1);">
  11.  
  12.         <a href="javascript:loadContent(1);">Tab 1</a> |
  13.         <a href="javascript:loadContent(2);">Tab 2</a> |
  14.         <a href="javascript:loadContent(3);">Tab 3</a> |
  15.         <a href="javascript:loadContent(999);">This content doesn’t exist</a>
  16.  
  17.         <div id="contentArea" style="margin: 20px 0px 10px 10px; border: 1px solid #CCC;">
  18.  
  19.         </div>
  20. </body>

Chiaramente nel file rpc.php richiamato dalla funzione load di jQuery, dovra’ essere implementata una struttura che ci permetta in base alla scelta numerica passata alla funzione loadContent() di selezionare il contenuto da restituire, questo puo ‘ essere realizzato usando uno switch case. Se non e’ sufficientemente chiaro il funzionamento potete scaricare il pacchetto da modificare sul sito di nodstrum.com presente nei riferimenti.


Riferimenti:
http://nodstrum.com/2007/03/20/jquery-content-loading/
http://docs.jquery.com/Ajax/load
http://it.wikipedia.org/wiki/XMLHttpRequest

]]> http://www.programmazione-web.com/jquery-ajax-content-loading-caricare-contenuti-div.php/feed 13 Jquery plugin risoluzione dinamica tramite media queries http://www.programmazione-web.com/jquery-plugin-risoluzione-dinamica-tramite-media-queries.php http://www.programmazione-web.com/jquery-plugin-risoluzione-dinamica-tramite-media-queries.php#comments Wed, 30 Apr 2008 14:03:23 +0000 neryo http://www.programmazione-web.com/jquery-plugin-risoluzione-dinamica-tramite-media-queries.php Jquery plugin risoluzione dinamica tramite media queries

Vi voglio segnalare un altro ottimo plugin JQuery, che ritengo molto utile quando si sviluppano siti con layout a dimensioni fisse e con la possibilità di avere diverse risoluzioni a schermo. Questo plugin Jquery implementa funzionalità di media queries, ovvero delle espressioni logiche dichiarate nel media type, che ci consentono di creare una dinamismo nelle nostre pagine in base a dei controlli (min-width e max-width in px), determinando quale css applicare dinamicamente in base alla risuluzione dell’utente. Molto importante ricordare che questo jquery plugin media queries rispetta gli standard W3C ed è compatibile con tutti i browser moderni, ovvero >= IE6.

Lo script come possiamo vedere dall esempio sotto riportato, è molto semplice da utilizzare, come del resto lo sono tutti i Jquery che stò apprezzando e utilizzando sempre di più nei miei siti web. Ecco un esempio di utilizzo:

  1. <link rel="stylesheet" href="default.css" type="text/css" media="screen, projection" />
  2. <link rel="stylesheet" type="text/css" href="wider.css" media="only screen and (min-width: 1100px)" />
  3. <link rel="stylesheet" type="text/css" href="smaller.css" media="only screen and (max-width: 820px)" />
  4.  
  5. <script src="jquery.js" type="text/javascript"></script>
  6. <script src="jquery.mediaqueries.js" type="text/javascript"></script>

Come possiamo vedere nel codice abbiamo un CSS di default per i media screen e projection al quale vengono aggiunti altri 2 CSS che per la visualizzazione a schermo attraverso i controlli diventano esclusivi.

Sulla pagina ufficiale del plugin è possibile testarne il funzionamento effettuando un resize della pagina notando il cambiamento del colore del box, indice di switching del css.

Riferimenti:
http://www.protofunc.com/scripts/jquery/mediaqueries/

]]> http://www.programmazione-web.com/jquery-plugin-risoluzione-dinamica-tramite-media-queries.php/feed 0 Jquery media plugin per inserire contenuti multimediali nelle pagine web http://www.programmazione-web.com/jquery-media-plugin-contenuti-multimediali.php http://www.programmazione-web.com/jquery-media-plugin-contenuti-multimediali.php#comments Sun, 20 Apr 2008 09:47:56 +0000 neryo http://www.programmazione-web.com/jquery-media-plugin-per-inserire-contenuti-multimediali-nella-pagine-web.php Jquery media plugin per inserire contenuti multimediali nelle pagine web

Jquery é una libreria javascript clientside veloce e concisa, tra l’altro molto famosa ed utilizzata, che permette di gestire eventi, integrare animazioni, inserire iterazioni di tipo ajax alle pagine web. Questo framework javascript e’ stata pensato appunto per cambiare e facilitare il modo di scrivere codice javascript, semplificando e potenziando le nostre applicazioni web, arricchendole di maggiore usabilitá e interattivitá. In questo post non voglio di certo ripetere nozioni scontate che si trovano ovunque sul web, ma vorrei piú che altro introdurre l’uso di alcuni plugin jquery che utilizzo nelle mie realizzazioni che sono a mio parere molto utili.

Uno di questi é il jQuery Media Plugin che supporta la conversione di un semplice e conciso tag in un un markup per un contenuto multimediale. Puo’ essere utilizzato per integrare facilmente in una pagina web media come Flash, Quicktime, Wndows Media Player, Real Player, MP3, Silverlight, PDF e tanti altri. In sostanza questo plugin converte l’elemento html, solitamente il tag con una classe css assegnata, in un contenente tag come object o iframe necessari per rendere all’utente il contenuto multimediale.

Questo media plugin jquery puo’ essere utilizzato in tutte quelle situazioni in cui si vuole rendere veloce l’inserimento di questi contenuti, e dotare anche gli utenti inesperti di un modo semplice per aggiornare i contenuti multimediali dei siti web, inserendo semplicemente dei link.

Vediamo che includendo le librerie necessarie del jquery e del media plugin:

  1. <script src="jquery.js" type="text/javascript"></script>
  2. <script src="jquery.media.js" type="text/javascript"></script>

e aggiungendo semplicemente questo codice che assegna al tag con la classe css .media il media plugin:

  1. <script type="text/javascript"></script>

possiamo ottenere questo tipo di risultato visibile nella demo:

  1. <a class="media" href="sample.mov">My Quicktime Movie</a>
  2. <a class="media" href="sample.swf">My Flash Movie</a>
  3. <a class="media" href="sample.wma">My Audio File</a>

questi link verranno tradotti automaticamente in questo codice:

  1.  
  2.  
  3. <div class="media">
  4.     <object codebase="http://www.apple.com/qtactivex/qtplugin.cab"
  5.         classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
  6.         <param name="src" value="sample.mov">
  7.         <embed src="sample.mov"
  8.             pluginspage="http://www.apple.com/quicktime/download/"></embed>
  9.     </param></object>
  10.     <div>My Quicktime Movie</div>
  11. </div>
  12.  
  13. <div class="media">
  14.     <object codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7"
  15.         classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  16.         type="application/x-oleobject">
  17.         <param name="src" value="sample.swf">
  18.         <embed src="sample.swf"  
  19.             type="application/x-shockwave-flash"
  20.             pluginspage="http://www.apple.com/quicktime/download/"></embed>
  21.     </param></object>
  22.     <div>My Flash Movie</div>
  23. </div>
  24.  
  25. <div class="media">
  26.     <object codebase="http://www.apple.com/qtactivex/qtplugin.cab"
  27.         classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"
  28.         type="application/x-oleobject">
  29.         <param name="url" value="sample.wma">
  30.         <embed src="sample.wma"  
  31.             type="application/x-mplayer2"
  32.             pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
  33.     </param></object>
  34.     <div>My Audio File</div>
  35. </div>
  36.  
  37.  

E’ possibile inoltre passare paramentri e specificare alcune opzioni al nostro media plugin integrando un altro codice jquery chiamato metadata plugin scaricabile da qui, ovviamente anch’ esso dovrá essere incluso nel nostro codice della pagina insieme agli altri jquery:

  1. <script src="jquery.js" type="text/javascript"><!–mce:3–></script>
  2. <script src="jquery.metadata.js" type="text/javascript"><!–mce:4–></script>
  3. <script src="jquery.media.js" type="text/javascript"><!–mce:5–></script>

Come possiamo vedere con questo jquery metadata plugin possiamo specificare ulteriori opzioni al media plugin e quindi rendere piú configurabili in nostri contenuti.

  1. <a class="media {width: 400, height: 300, autoplay: true}" href="sample.mov">My Quicktime Movie</a>
  2. <a class="media {width: 400, height: 30, autoplay: true}" href="sample.wma">My Audio File</a>

Chiaramente questa é sola una intruduzione all’utilizzo, per avere maggiori dettagli fate riferimento al sito ufficiale.

Riferimenti:
http://www.malsup.com/jquery/media/

]]> http://www.programmazione-web.com/jquery-media-plugin-contenuti-multimediali.php/feed 0 Usare librerie Ajax nel framework php Codeigniter http://www.programmazione-web.com/usare-librerie-ajax-nel-framework-codeigniter.php http://www.programmazione-web.com/usare-librerie-ajax-nel-framework-codeigniter.php#comments Sat, 05 Apr 2008 17:46:37 +0000 neryo http://www.programmazione-web.com/usare-librerie-ajax-nel-framework-codeigniter.php Usare librerie Ajax nel framework php Codeigniter

In questo post del blog vediamo come integrare facilmente nelle nostre applicazioni script ajax utilizzando sempre il framework php codeigniter. Il pacchetto scaricabile da qui, “Ajax for Codeigniter” ci permette di fornire funzionalitá ajax nelle nostre applicazioni web, utilizzando semplicemente degli helpers che includono le librerie ajax, in particolare potremmo utilizzare le librerie prototype e scriptaculous.

Vediamo in pochi passi come configurare il framework, poi per i dettagli di utilizzo fate riferimento alla guida all’interno del pacchetto.

Scompattare il pacchetto “ajax for codeigniter” scaricato e inserire il file Ajax.php nella cartella di default delle librerie:

  1. www-root/system/libraries/

Inserire i file javascript nella root directory del web server, che potrebbe essere ad esempio:

  1. www-root/javascript/

Se nel web server avete il mod_rewrite abilitato, accertatevi che la cartella javascript sia accessibile, inserendo questo file .htaccess:

  1. RewriteEngine on
  2. RewriteCond $1 !^(index\.php|images|stylesheets|<strong>javascript</strong>)
  3. RewriteRule ^(.*)$ /index.php/$1 [L]

Ora semplicemente potete includere i file javascript che volete utilizzare nei vostri files html:

  1. <script src="javascript/prototype.js" type="text/javascript"></script>
  2. <script src="javascript/effects.js" type="text/javascript"></script>
  3. <script src="javascript/dragdrop.js" type="text/javascript"></script>
  4. <script src="javascript/controls.js" type="text/javascript"></script>

In fine, per caricare la libreria AJAX si procede come qualsiasi altra libreria di Codeigniter, o si carica direttamente dentro il Controller dove si vuole utilizzarla:

  1. $this->load->library(‘ajax’);

Oppure é possibile caricarla automaticamente attraverso l’autoload delle librerie, inserendola nel vettore della variabile incaricata nel file system/application/config/autoload.php:

  1. $autoload[‘libraries’] = array(‘database’, ‘session’, ‘<strong>ajax</strong>’);

Ora tutto quello che dobbiamo fare per usare l’AJAX helper é chiamare $this->ajax. Ad esempio:

  1. echo $this->ajax->link_to_remote("Login", array(‘url’ => ‘/login’, ‘update’ => ‘divblock’));

Per testarne il funzionamento mi sono fatto una piccola pagina di test dove dopo aver caricato nel Controller la libreria ajax, come abbiamo visto precedentemente, nella vista ho inserito un div su cui attraverso un link posso applicare un effetto di fade:

  1.  
  2. <div id="my_text" style="border: 1px solid #CCC">
  3. orem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc non orci. Donec enim. Fusce eget libero. Nam semper malesuada lacus.
  4. </div>
  5.  
  6. < ? echo $this->ajax->link_to_function("test ajax Fade","Effect.Fade(‘my_text’)"); ?>

Riferimenti:
http://codeigniter.com/wiki/AJAX_for_CodeIgniter

]]> http://www.programmazione-web.com/usare-librerie-ajax-nel-framework-codeigniter.php/feed 2