Pleirb: Dojo

Este ejercicio nos ayudara a comprender mejor el funcionamiento de Dojo 1.7, como incluir la librería y algunos parámetros de configuración.
Primero indicamos donde tenemos nuestro dojo:
src="js/dojo/dojo/dojo.js" Luego configuramos la cosa, resulta que en Dojo 1.7 hay una nueva tecnología mejorada que le llaman AMD (Definición de módulos asíncrona) que al parecer mejora la forma de incluir los módulos y el debug para los desarrolladores. Para indicarle a Dojo 1.7 que trabajaremos con AMD ponemos: data-dojo-config="async: true"
Incluimos los módulos para este ejemplo: dojo/dom", "dojo/fx", "dojo/domReady! Podemos notar que ahora no es dojo.dom sino dojo/dom y lo mismo con los demás. También podemos notar que hay un signo de "!" en dojo/domReady!, es porque estamos definiendo un plugin que en este caso hace que el contenido de la función no se ejecute hasta que el DOM este listo. Bueno todo esto es debido justamente al nuevo cambio. Lo demas es un ejemplo bien sencillo usando las características del DOM y algo de efectos (fx). El código completo:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Saludo con Dojo!</title>
 <script src="js/dojo/dojo/dojo.js"
         data-dojo-config="async: true"></script>
</head>
<body>
 <h1 id="saludo">Hola Mundo</h1>
 <script>
  require(["dojo/dom", "dojo/fx", "dojo/domReady!"], function(dom, fx){
   // Obtenemos el objeto
   var saludo = dom.byId("saludo");
   saludo.innerHTML += " con Dojo 1.7";

   // Una animacion divertida !
   fx.slideTo({
    top: 200,
    left: 400,
    node: saludo
   }).play();
  });
 </script>
</body>
</html>

Al ejecutarlo se debería ver un saludo que se mueve en la pantalla al cargar la pagina.

Primero que nada debemos instalar dojo en el sistema ubuntu. Afortunadamente lo podemos hacer usando el centro de software o lo que nos guste mas para instalar estos paquetes:

libjs-dojo-core
libjs-dojo-dojox
libjs-dojo-dijit

Bien, ahora creamos un nuevo proyecto en Zend Studio, esta guía esta basada en el ejemplo que trae para instalar este programa, donde ya nos crea un entorno como para empezar con layout y todo. El layout es como un contenedor principal que se usa para darle un aspecto general a nuestro sitio web, básicamente es para no repetir código con cosas que van a estar siempre presentes.
Debemos incluir la librería de dojo en el proyecto, para esto es necesario hacer un vinculo simbólico del lugar en donde se instalo a la carpeta public que esta creada en nuestro proyecto. Un vinculo simbólico es como un especie de acceso directo, si no sabemos como hacerlo en google hay bastante información. La idea entonces es hacer este atajo desde:

/usr/share/javascript/
/la/carpeta/de/nuestro/proyecto/public/js

Le llame js al directorio donde van a estar estas librerías de javascript
Como comentario, para dar soporte en la corrección de dojo podemos hacer clic derecho sobre el proyecto Configure->Add Dojo y listo, ya nos corrige.
Ahora si vamos a editar algunos archivos para poder usar los ayudantes de Dojo que tiene el framework. Empecemos por el Bootstrap, aquí es donde debemos agregar algo para inicializar esto:

protected function _initViewHelpers(){
       $this->bootstrap('view');
       $view = $this->getResource('view');
       Zend_Dojo::enableView($view); }

Esta funcion debe si o si empezar con _initAlgo, en este caso se llama _initViewHelpers()
Luego, editamos el layout, esto que voy a poner es practicamente igual que la documentacion original de Zend:

<?php echo $this->doctype() ?>

<html>

<head>

    <?php echo $this->headTitle() ?>

    <?php echo $this->headMeta() ?>

    <?php echo $this->headLink() ?>

    <?php echo $this->headStyle() ?>

<?php if ($this->dojo()->isEnabled()){

    $this->dojo()->setLocalPath('/js/dojo/dojo.js')

                 ->addStyleSheetModule('dijit.themes.claro');

    echo $this->dojo();

   }

?>

    <?php echo $this->headScript() ?>



</head>

<body class="claro">

    <?php echo $this->layout()->content ?>

    <?php echo $this->inlineScript() ?>

</body>

</html>

En el controlador podemos crear un botón para ver como seria:

    public function indexAction()

    {

        $boton = new Zend_Dojo_Form_Element_Button('Prueba');                                         

        $this->view->boton = $boton;

    }

Y en la vista (index.phtml) lo mostramos:

echo $this->boton;
?>

Si probamos en nuestro navegador deberíamos ver algo como esto:

Pleirb

MENU

miércoles, 25 de julio de 2012

Hola Mundo Dojo

lunes, 16 de julio de 2012

Dojo + ZendFramework en Ubuntu y con Zend Studio