Prototype nos permite manejar elementos de la página web de una forma muy sencilla. Es por ello que nos es muy útil cuando interactuamos con formularios. En este ejemplo vamos a ver como podemos deshabilitar un elemento del formulario. Sin necesidad de deshabilitar todo el formulario, cosa que ya vimos en el pasado.

Lo primero que tenemos que hacer es cargar la librería de Prototype:

<script type="text/JavaScript" src="prototype.js"></script>

Ahora que tenemos cargada la librería de Prototype pasaremos a crear un formulario. Este será sencillo. Una de las cosas sobre las que tenemos que prestar atención es el dar ID a los elementos del formulario. Ya que el código de Prototype se apoyará en dichos ID.

Veamos como será nuestro formulario:

 
<form id="peticion">
<label for="nombre">Nombre: </label>
<input type="text" id="nombre"/><br>
<label for="apellido">Apellido: </label>
<input type="text" id="apellido"/><br>
<input type="radio" name="genero" value="Hombre"/>Hombre
<input type="radio" name="genero" value="Mujer"/>Mujer
</form>
 

En concreto vamos a deshabilitar el campo 'apellido'. Así que será este el ID que manejemos.

El código de Prototype que nos permite deshabilitar un elemento del formulario utilizará el objeto Form.Element y en concreto el método .disable() (o .enable() si queremos volver a habilitar el elemento del formulario). Así que crearemos un botón que nos permita lanzar dicho código.

 
<input type="button" value="Deshabilitar Apellido" onClick="Form.Element.disable('apellido');"/>

Como podéis comprobar es un código realmente sencillo.Similar Posts:

• Deshabilitar formulario con Prototype
• Obtener elemento de un formulario con Prototype
• Hacer foco en un campo de la página usando JavaScript
• Sobrescribir el método toString en Javascript
• Crear propiedades dinámicas en Javascript

Si queremos facilitar la vida a nuestros usuarios, nos deberemos de preocupar de ayudarles a la hora de manipular nuestras páginas HTML. Por ejemplo, si tenemos un formulario para capturar los datos, una gran ayuda para el usuario será el posicionarse el cursor en el primer campo del formulario.

El framework javascript Prototype nos ayuda a realizarlo de una forma muy sencilla. Y es que Prototype tiene un objeto Form, el cual tiene una gran cantidad de métodos para manipular los formularios: habilitarlos, deshabilitarlos, limpiarles,... y, por supuesto, para posicionarnos en el primer elemento del formulario.

En este caso, el método para posicionarnos en el primer elemento será .focusFirstElement, el cual recibirá el formulario (el propio formulario, no el id que identifica el formulario) que queremos manipular.

Form.focusFirstElement(formulario);

Para pasarle el formulario como parámetro nos podemos apoyar en otra función de Prototype. La función $. Esta simple función nos devuelve un elemento DOM pasándole el id del elemento como parámetro.

De esta manera el código nos quedaría de la siguiente forma:

Form.focusFirstElement($('peticion'));

Es importante saber que para que nuestro código funcione (en nuestro ejemplo), el formulario se tiene que identificar mediante el nombre 'peticion'. Es por ello que el formulario sería algo así:

<form id="peticion">
</form>

Lo bueno de este código es que se posiciona en el primer elemento habilitado. Es decir, que si los primeros campos están desahbilitados o son de solo consulta, los omite. De esta manera se situaría en el primer campo hábil.

Y no se os olvide cargar el framework Prototype en la cabecera de la página.

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Deshabilitar formulario con Prototype
• Deshabilitar un elemento del formulario con Prototype
• Eliminar etiquetas HTML
• Acceder a elementos con Prototype
• Hacer foco en un campo de la página usando JavaScript

En los últimos años de la web estamos tendiendo a interfaces de usuario con muchísima funcionalidad y mayor dinamismo. En todo este flujo de información, los elementos se van modificando y actualizando. Normalmente en forma asíncrona.

Es por ello que es bueno que sepamos como podemos hacer esto vía código y utilizando el framework Prototype. Prototype nos ayudará mediante sus funciones a llevar a cabo nuestro cometido.

Lo primero que tenemos que saber es como acceder a una capa (asumimos que ya existe la capa). Para ello utilizaremos la función $() pasándole el id de la capa como parámetro.

$('idcapa');

Como queremos reaprovechar el código vamos a crear una función JavaScript que reciba el texto a poner en la capa y actualice el contenido de la misma. El contenido de una capa se puede modificar mediante el atributo .innerHTML. De esta forma nos quedaría la siguiente función:

<script type="text/javascript">
function modificarCapa(texto){
  $('micapa').innerHTML=texto;
}
</script>

Ahora solo nos quedará utilizar esta función desde alguna parte de la página. En nuestro caso hemos utilizado unos simples botones. Los cuales, mediante el evento onClick lanzarán dicho método:

 
<form action="#">
<input type="button" value="Texto Uno" onClick="modificarCapa('Texto Uno');return false;"/>
<input type="button" value="Texto Dos" onClick="modificarCapa('Texto Dos');return false;"/>
<input type="button" value="Texto Tres" onClick="modificarCapa('Texto Tres');return false;"/>
<input type="button" value="Texto Cuatro" onClick="modificarCapa('Texto Cuatro');return false;"/>
</form>
 

Todo muy sencillo. Y recordar el instanciar el framework Prototype al principio:

<script type="text/JavaScript" src="http://lineadecodigo.com/js/prototype/prototype.js"></script>

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Obtener el contenido de una capa con Prototype
• Modificar el contenido de una capa con jQuery
• Cambiar el contenido de una capa con JavaScript
• Modificando propiedades CSS con un Slider
• Eliminar etiquetas HTML

Como ya sabemos, el framework Prototype nos permite manejar las páginas HTML dinámicamente de una forma muy sencilla. Para ello evita que tengamos que conocer todos los detalles del lenguaje JavaScript y las complejidades de los modelos DOM de las páginas.

Uno de sus ejemplos será el obtener el contenido de una capa de la página. Las capas en HTML se pueden definir mediante el elemento <DIV>. De esta forma podríamos definir una capa en HTML de la siguiente forma:

<div id="micapa">
Contenido de mi capa<br>
para lineadecodigo.com
</div>

Es muy importante el identificador que le demos a la capa. Es decir, el valor de su atributo id. Ya que dicho valor será el que utilicemos para acceder a la capa desde Prototype.

En Prototype nos apoyaremos en el método de utilidad $(). Este método recibe como parámetro el identificador del elemento de la página a acceder. En nuestro ejemplo sería 'micapa'.

$('micapa');

Este código solo nos devolverá el elemento tal cual, es decir, la capa. Si lo que queremos es acceder a su contenido deberemos de acceder al atributo innerHTML de la capa. El cual nos dará el contenido de dicha capa. Veamos como sería dicho código:

alert($('micapa').innerHTML);

Nos hemos apoyado en el método alert de JavaScript para mostrarlo en una ventana emergente.

Acuérdate que para cargar el framework Prototype simplemente nos apoyamos en la etiqueta <SCRIPT> mediante la cual indicaremos la librería prototype.js.

Visualizar el ejemplo | Descargar el código
Similar Posts:

• Modificar el contenido de una capa con Prototype
• Modificar el contenido de una capa con jQuery
• Cambiar el contenido de una capa con JavaScript
• Acceder a elementos con Prototype
• Controlando el overflow de una capa

En ciertas situaciones manejamos contenidos de texto que van mezclados con etiquetas HTML. Los cuales nos interesa que sean procesados sin dichas etiquetas.

Un claro ejemplo sería para evitar que introduzcan texto HTML en los comentarios de una página. Evitando el efecto no deseado. Aunque también sería util para otros casos.

El framework de Prototype nos proporciona un método sencillo para hacer esta limpieza de código. El método es stripTags(). Simplemente habrá que aplicar dicho método sobre una cadena de texto. Así podríamos tener la siguiente línea de código:

"<div>Este es <br/>mi texto</div>".stripTags();

La idea en este ejemplo es tener un área de texto donde podramos poner el texto que queramos (etiquetas HTML incluidas) y utilizar el método stripTags() para eliminar dichos códigos.

Lo primero será el crear el textarea:

<form>
<textarea rows="10" cols="20" id="texto">
Texto por defecto
</textarea><br/>
</form>

Ahora la idea será el tener un botón que nos ayude a realizar nuestra "limpieza de HTML". Para ello lo primero que hay que hacer es obtener la información del textarea.

En este caso nos apoyaremos en otra función de Prototype. Esta será $F('elementoFormulario'). Esta función devolverá el contenido del elemento cuyo nombre pasemos como parámetro.

De esta manera el código del botón quedará de la siguiente forma dentro del formulario:

<input type="button" value="Eliminar HTML" onClick="alert($F('texto').stripTags());"/>

Se me olvidaba. Para cargar el framework Prototype simplemente nos apoyamos en la etiqueta <SCRIPT> mediante la cual indicaremos la librería prototype.js.

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Acceder a elementos con Prototype
• Posicionarse en el primer elemento de un formulario
• Deshabilitar formulario con Prototype
• document.getElementById
• Modificar el contenido de una capa con Prototype

JSEclipse es un plugin para Eclipse que permite el manejar código JavaScript (tanto el código JavaScript básico, como el de algunas librerías construidas sobre JavaScript, véase DOJO, Prototype,...) dentro de proyectos Eclipse de una forma muy sencilla.

Características:

• Auto-completado de código JavaScript
• Control y gestión de errores
• Resaltado del código fuente
• Información contextual (menú emergente)
• Soporte de librerías JavaScript (DOJO, Prototype, YUI, Qooxdoo).
• Soporte para JavaDoc
• Añade en los wizards la gestión de ficheros .js

Versión actual: JSEclipse 1.5

Requisitos:

• Eclipse 3.1 o superior
• JRE 1.5 o superior

Descargarlo:
http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_jseclipse

Documentación:
http://www.interaktonline.com/Documentation/JSEclipse/jseclipse.htm

Más información sobre el producto:
http://labs.adobe.com/technologies/jseclipse/

Opinión de Linea de Código:
Si quieres trabajar con JavaScript y Eclipse, JSEclipse es el plugin que necesitas. La potencia de autocompletado y la ayuda contextual facilitan en gran medida el desarrollo de código JavaScript.

Seguro que más de una vez os habéis quedado pensando en cual era o como era esta o la otra función JavaScript. El auto-completado de JSEclipse resuelve todos nuestros problemas.

El único inconveniente es que cuando utilizas código JavaScript fuera de los ficheros .js, todas las funcionalidades del plugin quedan deshabilitadas. Una pena. Si bien, incluso con esto es muy recomendable su uso.Similar Posts:

• Como utilizar un Polyfill con Modernizr
• AJAX en la Plataforma IBM WebSphere
• Hola Mundo en DOJO
• Disponible FireFox 3.0 Alpha 5
• on AIR Tour

Muchas de nuestras páginas van a tener un formulario. Ya que esta es la forma estándar de obtener datos del usuario en un entorno web. A la hora de recuperar la información de dicho formulario nos tenemos que apoyar el código JavaScript.

Si utilizamos código JavaScript estándar deberemos de considerar múltiples escenarios dependiendo del navegador y su versión correspondiente. Esto puede hacer que el código a escribir sea complejo en su edición y en su mantenimiento.

Para ello el framework de Prototype nos proporciona la sencilla función $F. Dicha función recibe como parámetro el ID de uno de los elementos del formulario y nos devuelve el valor que se haya introducido en el campo del formulario.

$F("IDElementoFormulario")

Lo primero que haremos será construir una página HTML con un formulario dentro. Usaremos un formulario tipo con el que ya hemos trabajado en anteriores ocasiones.

Veamos como sería su código:

 
<form id="peticion">
Nombre:
<input type="text" id="nombre"/><br>
Apellido:
<input type="text" id="apellido"/><br>
<input type="radio" name="genero" value="Hombre"/>Hombre
<input type="radio" name="genero" value="Mujer"/>Mujer<br/>
</form>
 

Es un formulario HTML muy simple con dos campos de texto para el nombre y apellido y otro de tipo "radio" para obtener el género de la persona.

Para utilizar Prototype hay que instanciar su librería prototype.js. Para hacerlo utilizaremos la siguiente línea de código en la cabecera de la página web:

<script type="text/JavaScript" src="prototype/prototype.js"></script>

En nuestro ejemplo vamos a recuperar el valor que haya insertado dentro del campo "nombre" del formulario. Entonces el código de Prototype que necesitamos será el siguiente:

$F("nombre")

Importante que el identificador utilizado dentro de la función $F tiene que coincidir con el identificador del atributo ID del campo del formulario.

Este valor lo vamos a mostrar en un mensaje emergente cuando pulsemos un botón de validación. Es por ello que el código que se necesita es el siguiente:

 
<input type="button" value="Obtener nombre" onClick="alert('El nombre del formulario es: ' + $F('nombre'));"/>

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Deshabilitar un elemento del formulario con Prototype
• Controlar el envío de un formulario con JavaScript
• Posicionarse en el primer elemento de un formulario
• Acceder a un campo de formulario con jQuery
• Número de elementos de un fichero XML

Podríamos decir que la característica principal del framework Prototype es la facilidad de acceder a un elemento de la página web. Prototype nos proporciona una forma unificada de acceso a los elementos de forma independiente al navegador que estemos utilizando.

Para ello Prototype utiliza la función $. El manejo de dicha función es muy sencillo, ya que esta recibirá el ID del elemento al que queramos acceder.

$("idElemento")

Para mostrar el funcionamiento de esta función vamos a acceder al contenido de una imagen que haya dentro de la página HTML.

Lo primero, crear la página con una imagen. Y, claro, dar un ID a dicha imagen. Veamos como sería este primer código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Obtener referencia a un elemento con Prototype</title>
</head>
<body>

<img src="img/prototype.png" id="imagen"/>

</body>
</html>

Muy sencillo de hacer con el elemento <IMG>

El siguiente paso será el cargar el framework Prototype. Para ello simplemente hay que cargar la librería prototype.js en la cabecera de la página.

<head>
<script type="text/JavaScript" src="prototype/prototype.js"></script>
</head>

Y ahora solo nos quedará el utilizar al función $. El parámetro será el ID de la imagen. En este caso el ID que le hemos dado a la imagen es "imagen".

Veamos como sería la línea de código para utilizarlo.

<script>document.write($("imagen").src);</script>

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Cambiar el tamaño de la imagen de forma dinamica
• Eliminar el subrayado de los enlaces
• Hola Mundo en JavaScript
• Obtener el titulo de la página con JavaScript
• Protegiendo la página en JavaScript

Desde hace poco que tenemos disponible la versión 1.5 de Prototype. Y una de las cosas que se le han ido achacando a este tipo de frameworks es que evolucionan muy rápido, pero que no llevan la suficiente documentación como para explotarlos.

Pues Sam Stephenson nos sorprende en esta versión con un buen conjunto de documentación. A ver:

• Trucos y tutoriales
• API de Referencia
• Blog
• Documentación en PDF

A si que ahora, a leer y a apoyarnos en este magnífico framework.

Vía: AjaxianSimilar Posts:

• Netbeans 6.9
• Máximo y mínimo número de un conjunto
• Activar el corrector ortográfico con HTML5
• BEA WebLogic 10 con GlassFish
• Programación por Tecnología

Prototype es un FrameWork JavaScript que nos permite crear aplicaciones que usen JavaScript y el DOM de las páginas web de una forma muy sencilla. Una de las utilidades que nos ofrece es el objeto Form, mediante el cual podemos manipular el comportamiento de los formularios. Por ejemplo dehabilitar y habilitar el formulario.

Lo primero que deberemos de hacer es crear una página HTML con un formulario. No vamos a entrar muy en detalle, ya que asumo que no debería de ser muy complejo el crear un formulario en HTML. Si aún así te ves en dificultades de codificar un formulario HTML, puedes leerte los artículos sobre Formularios en HTML.

Pero veamos el código del formulario:

<form id="peticion">
Nombre:<input type="text" id="nombre"/><br>
Apellido: <input type="text" id="apellido"/><br>
<input type="radio" name="genero" value="Hombre"/>Hombre
<input type="radio" name="genero" value="Mujer"/>Mujer
</form>

Una cosa muy importante sobre este formulario, y que necesitaremos posteriormente, es el ID del formulario, su nombre. En este caso hemos llamado al formulario "peticion".

Para poder usar Prototype simplemente tenemos que hacer dos cosas:

• Descargarnos el software de Prototype, es un archivo .js
• Instanciarle dentro de nuestra página HTML

Para instanciar el framework de Prototype, simplemente deberemos de incluir la librería prototype.js dentro de nuestra página HTML. En concreto, deberá ir dentro de la cabecera de la página, es decir dentro de las etiquetas <HEAD>. La línea de código será la siguiente:

<script type="text/JavaScript" src="prototype.js"></script>

Una vez instanciado el framework de Prototype pasaremos a utilizar el objeto Form. Este objeto se utiliza en Prototype para manejar los formularios.

Los métodos para habilitar y deshabilitar el formulario son .enable(IDFormulario) y .disable(IDFormulario). Es por ello que solo deberemos de codificar esto dentro de un código script.

En nuestro caso crearemos un segundo formulario con dos botones, cuyo código será el que deshabilite y habilite el primer formulario. Veamos como sería el código:

<form id="control">
<input type="button" value="Deshabilitar" onClick="Form.disable('peticion');"/>
<input type="button" value="Habilitar" onClick="Form.enable('peticion');"/>
</form>

Como veis en el código, el ID de formulario que se pasa es el nombre del primer formulario, "peticion".

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Posicionarse en el primer elemento de un formulario
• Deshabilitar un elemento del formulario con Prototype
• Validaciones de fechas en formularios con wForms
• Formulario que multiplica numeros en JavaScript
• Generar un documento HTML mediante JavaScript