.  

 

 

.
.

23 / 03 / 2017

Usuarios conectados: 10

Cargando documento...

Buscar:

.

Este Sitio:

Principal

Dreamweaver

Fireworks

JavaScript

CSS

Sonido

Artículos

Links

E-ufemismos

Descargas

Historial

 

Mailing List:

Suscríbete a la lista de correo, No practico spamming y ofrece algunas ventajas.

Pulsa aquí para saber más y suscribirte.

 

Recomendados:

Tecnorama >Tutoriales Dreamweaver

 

Mi primera Extensión

Versión para imprimir | Translate this page

Este tutorial nos mostrará los aspectos básicos de cómo se crea una extensión para Dreamweaver y, si seguís los pasos, podréis crear vosotros mismos la extensión del tutorial (la parte del empaquetado la dejaremos para otra ocasión, lo que no quiere decir que la extensión no funcione y no la podáis utilizar).

La extensión se llamará "Repeated Form Objects" y realizará las siguientes acciones:

Nos permitirá escoger qué tipo de objeto de formulario deseamos insertar (radiobutton o checkbox), el nombre que va a tener, cuantos objetos queremos insertar y si debe haber salto de linea entre ellos o van a ir todos seguidos. La parte práctica viene en poder introducir varios con un solo click, sin necesidad de hacer muchas veces "insert->form objects->radio button" y luego colocar el salto de linea. Por ejemplo: estas lineas de botones de radio se pueden insertar en segundos:








 

Ésta es la interfaz de la extensión:


Bueno, ya hemos visto lo que va a hacer la extensión (puede que a algunos no les parezca muy útil, pero es mejor que una que escriba "hola mundo"...). Veamos ahora algunos conceptos:

¿qué conocimientos se necesitan tener?
Sobre todo, conocimientos de JavaScript. La mayor parte del trabajo de la extensión se basa en este lenguaje: deberemos crear las funciones necesarias que ejecuten el trabajo de la extensión.

Ya tengo conocimientos de JavaScript. ¿qué mas necesito?.
Otra gran parte de la extensión está basado en funciones propietarias de Macromedia. Son funciones que deben ser llamadas (por ejemplo, para ver si debe aparecer el menú, si debe buscar un archivo...) y que devuelven unos valores que deberemos procesar (utilizando JavaScript, de nuevo). Veamos un ejemlo: Esta función es propietaria, se llama windowDimensions() y devolverá el ancho de la ventana donde aparezca la extensión. Lo único que tenemos que hacer es escribir el código para que devuelva un ancho y un alto si Dreamweaver se está ejecutando en un Mac, Dreamweaver se encargará del resto.

function windowDimensions(platform){
               if (platform == "macintosh"){
               return "550, 340";
               }
}

Existe un manual de referencia, que muestra todas las funciones, propiedades y métodos que incluye Dreamweaver, está disponible en:
http://www.macromedia.com/support/dreamweaver/extend.html

Bueno, vistos por encima algunos conceptos, emepezaremos a crear la extensión y algunas cosas quedarán más claras.


Haciendo que se vea

Toda extensión comienza con una página html (aunque en el programa parezcan ventanas de menú). En el cuerpo del documento irá la interfaz (lo que el usuario ve) y en el encabezado las funciones (igual que en una página cualquiera).
En nuestra extensión, la interfaz quedará así:

Los objetos de este formulario tienen los siguientes nombre:

  • El formulario: "formulario".
  • El desplegable: "objeto".
  • el cuadro de texto para el nombre: "nombre"
  • El cuadro para poner el número de repeticiones: "cuantos".
  • El checkbox: "salto"

¿y los botones? Dreamweaver se encargará de colocarlos. Podríamos colocar los nuestros si nos hicieran falta (utilizando funciones), pero para nuestro caso con "OK" y "Cancel" nos vale.

Esto es importante para luego poder identificarlos en la funciones que escribamos. Aquí puedes ver el documento tal y como queda hasta ahora.

Ahora lo guardaremos con el nombre RepeatedFormObjects.htm en la carpeta "Configuration\Objects\Forms" del directorio donde tengáis instalado Dreamweaver. Una ruta muy corriente será:
C:\Archivos de Programa\Dreamweaver 4\Configuration\Objects\Forms"

Cerraremos Dreamweaver, lo volveremos a abrir y en el menú "insert" nos aparecerá:


Pulsad en la línea y veréis lo que aparece...

Pulsa aquí para ver la demo de cómo se crea

 


Haciendo que funcione

Bueno ya hemos conseguido que se vea. Ya sólo nos queda que funcione. Para ello deberemos escribir algo de JavaScript y utilizar una función propietaria de Dreamweaver: objectTag()

Esta función no necesita parámetros (es decir no necesita que le demos nada para ejecutarse). Lo único que nos exige es que le demos para devolve algo para escribir (un string de javaScript), ya que es la función que se encarga de escribir el código en la página.
Es decir: al declararla, Dreamweaver procesará lo que hay dentro de ella y escribirá lo que devuelva al final. Un ejemplo:

function objectTag(){
   var texto="Hola mundo"; 
   return texto;
   }

Si hubieramos escrito esto en una extensión (del tipo objeto, que es nuestro caso). Dreamweaver haría esto:

  • DW encuentra la llamada a la extensión.

  • Ejecuta todo el JavaScript (si lo hubiera) que contiene.

  • Devuelve el valor que encuentra al llegar a la linea donde ve "return"

Por tanto nuestro objetivo será que, podamos llegar a la línea del "return" con la cadena de caracteres (String) que deseamos que Dreameaver escriba (una ayuda: imaginad que en vez de "return" es "document.write" y lo enderéis mejor). Veamos pues la función:

<script language="JavaScript">
   function objectTag(){
   //variables que recogen los campos del formulario
   var elobjeto=document.formulario.objeto.options[document.formulario.objeto.selectedIndex].value;
   var elnombre = document.formulario.nombre.value;
   var elsalto = "";
   if (document.formulario.salto.checked==true){
   elsalto="<br>";
   }
   var numero = document.formulario.cuantos.value;
   //esta linea es la que prepara el codigo para escribir, por ejemplo:
   //<input type="radio" name="mi_nombre"><br>
   var linea = '<input type="'+elobjeto+'" name="'+elnombre+'">'+elsalto+'\n';
   //este bucle almacena en "escribir" la variable linea tantas veces    como se ha escogido
   var escribir = linea;
   for(i=1; i<numero; i++){
   escribir+=linea;
   }
   //y ya solo tenemos que mandar el valor
   return escribir;
   }
   </script>

Y ya está: escribir este script en el encabezado del documento, volverlo a guardar en el mismo sitio, cerrad Dreamweaver y tendréis una extensión 100% operativa.

De todas formas, si lo que queréis es la extensión ya hecha (y empaquetada), pinchad aquí.


¿Comentarios? 76, de momento. Mostrando 1 ->5

1.- guest test post
[url=http://googlee.te/]bbcode[/url]
html
http://googlee.te/ simple

2.- The hoentsy of your posting is there for all to see

3.- guest test post
[url=http://googlee.te/]bbcode[/url]
html
http://googlee.te/ simple

4.- I guess finding useful, reliable infiamrtoon on the internet isn't hopeless after all. http://rykhtdcxp.com [url=http://htlskhr.com]htlskhr[/url] [link=http://lvvfjdovhee.com]lvvfjdovhee[/link]

5.- The abitily to think like that is always a joy to behold http://uzlomacyqt.com [url=http://vpafmmjyqqh.com]vpafmmjyqqh[/url] [link=http://ymnfjudf.com]ymnfjudf[/link]

« Previous | 1 - 5 | 6 - 10 | 11 - 15 | 16 - 20 | 21 - 25 | 26 - 30 | 31 - 35 | 36 - 40 | 41 - 45 | 46 - 50 | Next »

Añade tu comentario



Escribe el código de la imagen superior:

:

Tutoriales Dreamweaver

-El muy buscado Menú desplegable

-¿Qué $%&$% es 'SSI'?

-Utilizar tablas de excel para actualizar tablas en html.

-Plantillas en DW MX: Regiones opcionales.

-Adaptar tablas a la ventana.

-Vista diseño para formatos no reconocidos

-Carga de imagenes en orden

-Mi primera Extensión

-Rollover remoto ('Disjointed Rollover')

-Iframes vs. Frames

-Contenido dinámico en celdas

-DW MX: Repeating Tables

-DW MX: Practica el Cloaking

-DW MX: CSS en tiempo Diseño

-Buscar y Reemplazar en Dreamweaver

-Menú dinámico

-Collaborative Dreamweaver: Design Notes and Files Panel

-Using PHP Server Formats and MySQL Dates

-Creando un Newsticker

-Generate Excel files with DWMX/PHP/MySQL (part 1)

-Manejo de fechas en PHP y MySQL

-Generate Excel files with DWMX/PHP/MySQL (part 2)

-Manejo de Fechas en consultas a MySQL

-Showing all records by default in a results page (PHP)

-Retrieving data using AHAH (1)

-Retrieving data using AHAH (2)

-Retrieving data using AHAH (3)

TECNORAMA es simplemente una página personal. No sirve ni de promoción del autor ni cosas por el estilo.
Todos los códigos, textos y tutoriales son de libre uso mientras se mencione al autor (no es mucho pedir)
Este sitio es compatible con IE6/NS6/Mozilla1.0
Para contactar, puedes enviarme un e-mail a tecnorama@hotmail.com