Prototype Portal Class

Prototype Portal Class es una muy interesante librería Javascript que permite crear zonas arrastrables y que se pueden resposicionar al estilo de los portales como Netvibes o iGoogle. El uso es muy sencillo y además se puede personalizar la apariencia con el uso de CSS.

portal-class-logo.gif

Esta librería hace uso de varias librerías como por ejemplo prototype, además de ello las librerías effects, builder y dragdrop de script.aculo.us. Finalmente una clase propia llamada portal.js la cual brinda todas las opciones para la creación del sistema arrastrable.

Creando el HTML
Lo primero luego de descargar las librerías necesarias, incluimos estos archivos en el head de nuestro HTML de la siguiente forma:

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

Creando las Regiones
Lo siguiente es crear las regiones sobre los cuales se podrán arrastrar y soltar los bloques con contenido, para ello creamos un div principal con tres columnas de la siguiente forma:

  1. <div id="page">
  2.   <div id="widget_col0"></div>
  3.   <div id="widget_col1"></div>
  4.   <div id="widget_col2"></div>
  5. </div>

Luego definimos los estilos para estas zonas y las colocamos en tres columnas:

[css]
#page {
margin: 10px auto;
}
#widget_col0 {
float:left;
width: 30%;
}
#widget_col1 {
width: 50%;
float:left;
}
#widget_col2 {
float:left;
width: 20%;
}
[/css]

Creando los bloques arrastrables
Lo siguiente es crear una instancia de la clase que nos permitirá manejas los bloques arrastrables, esto se cuando se ha completado la carga de la página, para ello llamamos al método Xilinus.Portal donde le indicamos que todos los div dentro del div page seran las regiones:

  1. function init() {
  2.    var  portal = new Xilinus.Portal("#page div");
  3. }
  4. Event.observe(window, "load", init);

Lo que sigue es agregar los bloques arrastrables, para ello se utiliza el método Xilinus.Widget, donde se puede asignar el titulo, contenido y columna donde se mostrará la región. Para nuestro ejemplo agregamos 3 bloques de contenido en la primera, segunda y tercera columna de los bloques definidos anteriormente.

  1. function init() {
  2.    var  portal = new Xilinus.Portal("#page div");
  3.    portal.add(new Xilinus.Widget().setTitle("titulo1").setContent("content1"), 0);
  4.    portal.add(new Xilinus.Widget().setTitle("titulo1").setContent("content1"), 1);
  5.    portal.add(new Xilinus.Widget().setTitle("titulo1").setContent("content1"), 2);
  6. }
  7. Event.observe(window, "load", init);

Personalizando la apariencia
Finalmente y para completar la creación de nuestro portal con regiones arrastrables es crear los estilos con el cual podemos modificar la apariencia de las regiones, para ello debemos crear los siguiente estilos.

[css]
.widget {
/* Contenedor de la región */
}
.widget_nw {
/* Titulo de la región */
}
.widget_w {
/* Contenido de la región */
}
.widget_draggable {
/* Zona arrastrable */
}
.widget_ghost {
/* Bloque de destino */
}
[/css]

Agregando los estilos necesarios y además creando los estilos para las zonas definidas al inicio podemos lograr un resultado muy agradable y al mismo estilo de Netvibes o iGoogle.

portal-class.gif

Dependo del estilo que deseas darle a tu sitio, puedes modificar los estilos, como ven sencillo y el resultado es muy bueno. Para finalizar les dejo los archivos fuente para la descarga.

Comentarios Total 9 comentarios


jaime
Publicado: 12/09/2007 12:35 pm

interesante, aqui esta otro set de scripts que esta basado en jquery para crear elementos dinamicos con javacript

Por ejemplo elementos arrastrables, sliders, seleccionables, algunos muy utiles y otros en fase de desarrollo aun, en fin una buena libreria

Saludos

renzo_xp
Publicado: 12/09/2007 8:18 pm

muy interesante, ahora habria q ver como guardar o mantener las posiciones de las capa la proxima vez q ingrese el usuario.

links for 2007-09-13 « D e j a m e S e r
Publicado: 13/09/2007 8:19 pm

[…] Prototype Portal Class » unijimpe (tags: prototype) […]

Veronica
Publicado: 02/10/2007 8:47 pm

Hola, el ejemplo es muy útil y muy bueno. Me gustaria saber como introducir un control dentro de un widget (aparte de una variable string como en el ejemplo), o cualquier información sobre ello.

Gerardo
Publicado: 20/02/2008 1:52 pm

Hola! como haces para guardar o conocer las posiciones donde quedan ubicadas cada capa?

Gracias

Roy
Publicado: 25/03/2008 11:30 am

Muy buen tuto, pero me uno a la pregunta de cómo guardar las posiciones de las capas…

Juan Felipe
Publicado: 01/07/2008 10:17 am

Excelente librería, también me uno a la pregunta de como recordar las posiciones de las capas, por ejemplo cuándo el sistema es para múltiples usuarios.

Julian
Publicado: 22/04/2009 1:11 am

Hola, está muy bueno esto, pero ¿Cómo puedo hacer para no usar esto:

function init() {
var content1 = ‘A’;
var content2 = ‘B’;
var content3 = ‘C’;
var content4 = ‘D’;
var content5 = ‘E’;

var portal = new Xilinus.Portal(“#page div”)
portal.add(new Xilinus.Widget().setTitle(“1”).setContent(content1), 0);
portal.add(new Xilinus.Widget().setTitle(“2”).setContent(content2), 1);
portal.add(new Xilinus.Widget().setTitle(“3”).setContent(content3), 2);
portal.add(new Xilinus.Widget().setTitle(“4”).setContent(content4), 1)
portal.add(new Xilinus.Widget().setTitle(“5”).setContent(content5), 0);
}
Event.observe(window, “load”, init);

osea no tener que meter el contenido ahí, yo quiero hacer arrastrables otros .. no se si se entiendo lo que quiero decir..

coke
Publicado: 11/06/2009 4:53 pm

Hola… es interesante todo esto, pero al igual que Julian, quiero que el contenido se pueda hacer como en visual studio net, osea, arrastrar tablas, imagenes, grillas con datos de una Base de datos, etc…

Espero alguien pueda ayudar con esto.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)