Object.extend() mas corto

[SPAWN3000]

Hola,

La propiedad Object.extend() muy conocido en la librería Prototype me permite mantener valores por defecto y tomar en cuenta los del usuario partiendo de un objeto, algo más corto que esto?, tal vez ud's conozcan el sistema de otras librería que podría ser mejor?

[SPAWN3000]

Pensándolo bien no plantee bien la pregunta:

La cuestión es, que otros métodos conocen para extender objetos.

[venkman]

Cuando dices más corto que el Object.extend de la librería Prototype, te refieres a este Object.extend de la librería Prototype?

Código javascript:

Object.extend = function(destination, source) {
  for (var property in source)
    destination[property] = source[property];
  return destination;
};
 

Porque... más corto que eso lo veo un poco absurdo, ¿no?

[SPAWN3000]

Hola, gracias por responder...

Si, tal vez suene un poco absurdo...esa es una buena manera de interpretar mi pregunta . La cuestión es que la forma que tiene prototype de (extender) está completamente cargada de validaciones que le permiten compatibilidad para otros navegadores...y que ademas tiene algunas vinculaciones extras. Es esta validación la que hace un poco pesada esta librería.

Pero en este caso, no busco algo para todos los navegadores existentes. Solo algo para mozilla(simple y reducido)... La linea podría ser algo tan corto como esto:

function extend(m, e){
var e = e || this;
for (var x in m) e[x] = m[x];
return e;
};
//Donde en resumen esto es lo que importa:
var e = e || this;

Pero tal vez ud's. conozcan algo mejor?

Tu método es muy similar, y parece bueno...era esto lo que deseaba encontrar, más métodos de implementar las cosas para luego tener varias bases de comparación... Gracias venkman.
Object.extend = function(destination, source) {
for (var property in source)
destination[property] = source[property];
return destination;
};

[venkman]

Estoooo... ¿ein?

A ver, el método que he puesto es lo que saqué ayer mismo de prototype.js versión 1.6.0.3 tal y como está. No es mi método, que conste. Por eso decía que querer hacerlo más corto que eso, que no tiene nada más que un bucle y punto, pues me parecía un poco absurdo.

Otra cosa es que estés hablando de Element.extend() que no tiene nada que ver, que es más complejo porque su misión también es más compleja. Object.extend() no tiene relación alguna con problemas de diferentes navegadores.

[SPAWN3000]

Un poco más amplio...

La idea seria poder agregar los objetos con todas sus especificaciones... pero de una forma corta. Esta que tu posteas es sólo la forma de extender métodos según lo que yo veo...sin embargo de estar equivocado, podrías Ilustrarme con tu experiencia?

En mi segundo post de este tema decía:
La cuestión es, que otros métodos conocen para extender "objetos".

Mi problema es la falta de conocimiento del lenguaje y de como implementar algunas ideas debido a mi corto tiempo de conocer JavaScript. Por ello recurro a Buscar, comparar, preguntar y probar. Perdón si me equivoco en abordar los conceptos de forma incorrecta.

Un saludo...

[venkman]

A ver...

Preguntaste por el método Object.extend() de Prototype, ¿no? Ese es el que puse antes, como decía copiado tal cual del código fuente de prototype.js
Ahora, no sé a qué te refieres con extender "objetos" o con eso de poner objetos entre comillas, o con "extender métodos". Tampoco sé qué quieres decir con "con todas sus especificaciones".



Así que vamos por partes. ¿Qué es lo que hace Object.extend?

Ese código sacado de Prototype lo que hace es exactamente copiar todo el contenido del objeto "source" al objeto "destination".

Es decir, que yo puedo tener esto:

Código javascript:

Object.extend = function(destination, source) {
    for (var property in source) destination[property] = source[property];
    return destination;
};
var unObjeto = { edad: 23, altura: 177, nombre: "Lolo" }
 
var otro = { ocupacion: "científico", saludar: function() { alert("Hola, soy " + this.nombre) } };
 

Y ahora voy y hago esto:

Código javascript:

Object.extend(unObjeto, otro);
 

Entonces ahora podré hacer:

Código javascript:

unObjeto.saludar();
alert(unObjeto.ocupacion);
 

Bien, eso es lo que hace el Object.extend de Prototype. Y es lo que generalmente se viene conociendo como "extender objetos", es decir, añadir propiedades a un objeto.



Ahora, ¿qué es lo que quieres hacer tú que es distinto de esto?

[SPAWN3000]

Ok, recibí tu mensaje muy claro el dato...

Ahora, resulta que tengo dos clases llamadas ClaseA y ClaseB...

Código:

var ClaseA = {
	Create:function(url,Parm){
		url: '',
		this.xParm = {
			move: '10',
			Default:'Convert',
			Error: 'FError',
			waitinterval:10,
			speed: 10
		};
	}
}

var ClaseB = {
	...
}

//instanciamos Las clases
var miobjeto1 = new ClaseA();
var miobjeto2 = new ClaseB();

//Ahora, lo que yo quiero es poder extender por medio de los objetos creados las propiedades de la clase A en B. y que atraves de B poder alterar recuperar los valores de por defecto, o el nuevo(s) valores ingresados como parámetros...

Un saludo.

[venkman]

A ver alguna pregunta:

- ¿Qué quieres decir con "extender por medio de los objetos creados"?
- ¿Qué quieres decir con "a través de B pode alterar/recuperar etc etc"?


Y ahora... El código que pones no tiene mucho sentido.

ClaseA y ClaseB no son clases. Son objetos. Es importante la diferencia, porque en Javascript no hay clases. Lo que hay son Constructores. Y volvemos a lo mismo: ClaseA y ClaseB no son tampoco Constructores, son objetos. Y esto es importante porque no puedes hacer var miObjeto1 = new ClaseA();
Inténtalo en la consola de Firefox y te lo dirá claramente: ClaseA no es un Constructor. No puedes hacer new ClaseA().

[SPAWN3000]

Es muy probable que me equivoque en que sea una clase o un objeto, pero mi duda, por que esto funciona en mozilla con firebug y no me genera el error?:

<script>
var ClaseA = {
Create:function(url,Parm){
url: '',
this.Parm = {
move: '10',
Default:'Convert',
Error: 'Ferror',
waitinterval:10
};
this.url = url;
this.Parm = Parm;
}
}

var obj = new ClaseA.Create('localhost',{move:'20',Default:'NN'} );
alert(obj.url);
alert(obj.Parm.move);
</script>
...
Se que en javascript no hay clases, hay prototipos...por la misma razón de que no son clases y son prototipos es que debería funcionar.

[venkman]

Ah, esto que has puesto ahora es muy distinto a lo que habías puesto antes. Ahora estás haciendo new ClaseA.Create() que sí es una función y sí es un constructor.

Ahora bien, tu código me plantea dos dudas:

- No sé qué es lo que quieres realmente hacer. No sé qué es lo que debería resultar sorprendente o interesante en el código que has puesto. Quiero decir, no sé a dónde quieres llegar con esto; no sé qué relación tiene con el tema original ni sé cuál es el objetivo final que buscas.

- Tu código no parece muy útil. No sé si es simplemente que has dejado eso por la prisa, o qué, pero el caso es que no estás haciendo la operación de extender los valores por defecto. Es decir, prueba a hacer:

Código javascript:

alert(obj.Parm.waitinterval);
 

[SPAWN3000]

Hola nuevamente,

Si, no expuse bien el ejemplo anterior...

La cuestión es:

Mi desarrollo esta basado en migrar una aplicación desarrollada por programadores visual Basic a Java con conexión sybase, yo debo dejar montando una librería Para manejo de Ajax y DOM(para simular las aplicaciones de escritorio a las que están acostumbrados los usuarios visual basic).. La cuestión es que esta es solo una parte del proceso...

Yo debo entregar la estructura para que los otros programadores trabajen Únicamente en Java(Casi Nada de Javascript ya que ellos lo desconocen) y se concentren en la lógica del negocio.

El problema:
- Por que crear una librería Javascript: Quien continua el proyecto es un equipo de desarrollo, si no creo una librería la cual debo enseñar a manejar cada programador desarrollara su propio código que posteriormente será un problema para los de soporte.

- El código para todo lo que necesitan de javascript se genera partiendo de java-pero enfocado a la facilidad de Visual Basic, con métodos explícitos de ventanas, tooltips, combos, alertas, grillas, datepicker... etc.

- Para Java he creado una serie de componentes(java bean) que me generan y me controlan cada uno de los componentes que te mencione(Generando código Html + Javascript y con css predefinido para cada componente) partiendo de JSTL. existen Combos dependientes, o grillas editables y dependientes(Inicialmente inicie todo con ext, pero no fue permitido por la empresa, y jsf fue una alternativa hasta cierto punto que no quiero volver a retomar).

Retomando javascript:
- Ahora, existen un archivo donde cada programador puede crear nuevas funciones y documentarlas pero se necesita que ellos puedan heredar todo lo que necesiten desde mi Lib(todo esto se genera desde java y se transforma en javascript-bajo determinadas restricciones de seguridad y limitaciones) - deben poder heredar por decir el método configurar y realizar peticiones AJAX, o el de validación de campos, o crear ventanas, grillas...(pero desde un objeto ya definido).

- Lo que se busca es que puedan heredar un objeto, ya que hace mas fácil crear mi codificación en java...(y de ser necesario ir heredando entre unos y otros objetos creados-como un árbol) por ello tu ves que los métodos se asignan a objetos...Pero estoy perdido y no se bien como heredarlos he probado pero no entiendo que es lo que no funciona y se que se debe a que no estoy implementando el código como es debido(Pero lo intento).

Como habrás notado, mi conocimiento en javascript es muy, mediocre...por tanto, tal vez por eso me hacen tantos llamados de atención de lo que hago mal...

Se implementa así para que ellos acudan a los nombres ya definidos como (move) y no estén personalizando variables propias, si no estar pasando parámetros y heredando métodos u objetos:

this.Parm = {
move: '10',
Default:'Convert',
Error: 'Ferror',
waitinterval:10
};

y esto funciona de forma directa:
alert(obj.Parm.waitinterval);

Pero pregunto: var obj2 = new obj se podría hacer, sería como clonarlo y que mantenga sus nuevos métodos, y de igual manera a mis nuevas funciones heredar obj pero con los nuevos parámetros que ha tomado, no los que están por defecto?

Cuando hago una nueva asignación de parámetros, la primera vez todo se ejecuta correctamente, pero al parecer la segunda interacción pierde estas características y retoma las que están por defecto(y esto no debería suceder).

Al final, después de tanto incomodar creo que estoy por renunciar ha esta idea...y continuar con la forma normal ya que mi problema es como todo (El tiempo propuesto por la empresa).

Un saludo,

[venkman]

Te voy a hablar de forma muy sincera y directa. Espero que no te moleste, pero como ya te he contado es mi forma de hablar.


Lo que me estás contando es una locura. Así de claro. Veo tantos problemas en ello que no puedo decirlo de otra forma. Y ojo, que sé que muchos de los problemas que pueda decirte tú ya los sabrás y además tampoco podrás hacer nada por cambiarlo. Pero creo que es importante decirlo.

Te cuento por qué me parece una locura.


1. No eres la persona adecuada.
No te lo tomes mal, pero si tú mismo dices que tu Javascript es mediocre, claramente no pareces la persona más apropiada para montar toda una librería así.

Hombre, ya veo que te lo tomas en serio y tratas de aprender a marchas forzadas. Bien por ti, claro. Pero aún así no eres la persona apropiada para hacer una librería así.

2. No deberíais hacer una librería.
Sí, deberíais haber seguido con Ext, o con JQueryUI, o con ZK, o usar GWT o lo que sea, pero deberíais haber elegido usar una librería externa. Para esto hay muchas razones, pero algunas de ellas pueden ser:
- Nunca vas a hacer tú solo (y no porque seas tú sino porque eres 1) una librería tan completa como puedan hacerlo los X colaboradores que puedan tener cada una de las librerías comentadas.
- Tal como lo cuentas, parece que tú harás tu librería, la dejarás ahí y te irás/olvidarás de ella. Si esto es así, es absurdo pensar que puedes dejar la librería cerrada y que no hará falta ampliarla/modificarla, y cuando eso pase ¿quién lo hará? Si no es así y tú sigues, es igual, estás creando una dependencia total de la librería sobre una única persona.

3. No deberíais usar una librería para aislaros de Javascript.
Por lo que dices la idea es que el equipo de desarrollo no tenga que aprender nada de Javascript. Más aún, que cuando usen la librería puedan seguir "pensando en Java". Esto es malo. Es malo para ellos, porque no aprenden nada. Es malo para la empresa porque sus empleados no aprenden nada. Es malo para el proyecto, porque la librería se vuelve una caja negra y por debajo nadie del equipo de desarrollo sabe realmente lo que está pasando.

Usad una librería para facilitar el trabajo, pero no para que la gente no necesite saber qué está pasando.

4. No deberíais usar una librería en un lenguaje para hacer las cosas como se harían en otro lenguaje.
De esto ya hablamos el otro día. Diferentes lenguajes ofrecen diferentes formas de hacer las cosas. La forma de utilizar los diferentes lenguajes no es forzar a que el lenguaje encaje a martillazos en tu forma de hacer las cosas. La forma de utilizar un lenguaje es cambiar tu forma de hacer las cosas para que aproveche lo que ofrece ese lenguaje.

Es como si un leñador coge una motosierra y sin encenderla ni nada se pone a golpear un árbol como si lo hiciera con un hacha. Quizá al final corte el árbol, pero el esfuerzo que le costará será incluso mayor que cuando usaba el hacha.



Nota: Por todo lo que has contado, yo sugeriría utilizar Dojo o GWT. Diría que ZK también os iría bien, pero no conozco ZK suficiente como para recomendarlo.



Más a nivel técnico:

5. Te sigues empeñando en ver las cosas como se hacen en Java

- Te concentras en heredar. Heredar en JAvascript no tiene ni de lejos la mísma relevancia que puede tener en Java. En concreto en los problemas que cuentas, debería concentrarte en todo caso en clonar, no en heredar.

- Si obj es un objeto, entonces NO, no puedes hacer new obj. Los objetos en Javascript se crean de 2 modos: O bien copiando otro objeto, o bien desde una función generadora, un Constructor. De todos modos, esto es algo que tampoco puedes hacer en Java, así que no entiendo de dónde sacas la idea.

(Nota1): Hay otro modo, claro, el de crearlos a partir de un literal (var obj = { ... }), pero es trivial y no nos interesa ahora.

- Lo que te comentaba de alert(obj.Parm.waitinterval) no sé si lo has probado. Me refería a que en tu ejemplo pusieras esa línea exactamente al final:

Código javascript:

var ClaseA = {
    Create:function(url,Parm){
        url: '',
        this.Parm = {
            move: '10',
            Default:'Convert',
            Error: 'Ferror',
            waitinterval:10
        };
        this.url = url;
        this.Parm = Parm;
    }
}
 
var obj = new ClaseA.Create('localhost',{move:'20',Default:'NN'} );
alert(obj.url);
alert(obj.Parm.move);
alert(obj.Parm.waitinterval); // undefined
 

Quizá lo que querías decir era:

Código javascript:

var ClaseA = {
    Create:function(url,Parm){
        this.Parm = {
            move: '10',
            Default:'Convert',
            Error: 'Ferror',
            waitinterval:10
        };
        this.url = url || "";
        this.Parm = Object.extend(this.Parm,Parm);
    }
}
 
var obj = new ClaseA.Create('localhost',{move:'20',Default:'NN'} );
alert(obj.url);
alert(obj.Parm.move);
alert(obj.Parm.waitinterval); // 10
 

PEro para no perdernos demasiado, volvamos un poco al tema original... ¿Qué es lo que necesitas de Object.extend() más que lo que tiene?:

Código javascript:

Object.extend = function(destination, source) {
    for (var property in source) destination[property] = source[property];
    return destination;
};
 

Quiero decir, ¿qué es lo que intentas hacer con Object.extend() y que no te funciona?

[SPAWN3000]

Hola, gracias por responder...

La verdad también la considere difícil desde el principio, y no solo por eso... si no por el echo de analizar el código visual Basic(claro tenemos el apoyo de las personas que lo manejan mas los requerimientos textuales), es difícil que quien desarrolla no seleccione el lenguaje...de echo muchos de los seleccionados no programan en java(son programadores visual y llevan mas de 7 años en esto...pero para esto la empresa paga una capacitación a un experto).

Del proyecto, actualmente ya tenemos la interfaz de todos lo módulos visuales, y todos los componentes que creíamos necesarios están implementados...Tenemos clases que poseen enumeraciones de eventos respectivos y métodos para definir cualidades ha estos componentes(esto es Html básico), se puede definir eventos que hacen peticiones AJAX de forma asincrónica y que pueden recargar cualquier tipo de componente así:

Se envía la petición al servidor, el resultado es:
1. Inicialmente se configura la librería lo cual crea un objeto:
OK|MSG|Datos.... o ERR|MSG|Datos.

ERR= si se genera un error y MSG me trae el mensaje de error, Datos = 0(Popup amigable al usuario informando del error).
OK= si todo fue bien y MSG = null, Datos = Información.

- Javascript recibe estos datos, recupera las características del control anterior(Como tamaño, color, eventos...), elimina el existente y crea el nuevo(o nuevos) agregando los atributos+eventos+información...Así básicamente, sin efectos pomposos ni nada, únicamente lo necesario y practico.

Eso es lo que se tiene hasta el momento.

Una imagen de como esta todo:
http://www.servidor-imagenes.com/sho...1362426e3b008e

Como verás, muchas empresas no son partidarias de utilizar elementos que no tengan una empresa como respaldo o que no pertenezca a la empresa y sus desarrolladores. En esta empresa todo es Microsoft(para la muestra VB), No admiten nada que tenga que ver con Php, tenia que ser java...Pero los usuarios y empleados ya están acostumbrados al sistema anterior(así que el requerimiento es que operara en web y que simule aplicaciones de escritorio).

Por mi hubiese continuado con Ext naturalmente(Cuantos problemas me abría ahorrado y tiempo).

Tal como lo cuentas, parece que tú harás tu librería, la dejarás ahí y te irás/olvidarás de ella:
No la librería no quedara abandonada, continuará en proceso a medida que se pidan requerimientos( y yo continuare en el proceso, ademas de dejarles toda la documentación puntual de como trabaja 'Manual de operador'), simultáneamente otro equipo se encarga de la parte lógica(Yo entrego todas las herramientas para el desarrollo), ni tampoco los que se ha desarrollado en java...Todos los proyectos a partir de este momento se empezaran a trabajar con Java y con lo que se ha creado....

Precisamente, acaso no todas las otras librerías no son también como una caja negra, facilitan varias tareas pero nadie sabe que tanto guardan en el fondo...

Una vez terminado el proyecto, yo continuare a cargo del soporte de desarrollo, y el resto del equipo de las cuestiones lógicas, La BD, validar, operabilidad del sistema, Estructuración de consultas, reportes, procesos almacenados y cosas así. (Ellos se enfocan con EJB3+Helperclass en la parte lógica), yo únicamente de la gestión e interacción visual(en este caso la estructura que soporta la aplicación).

No deberíais usar una librería para aislaros de Javascript:
Pero esto es lo que hacen todos los framework, JSF lo que hace es utilizar las librerías de JSTL+Javascrip+CSS+Ajax) y tienes java server faces o Iceface. Uno se dedica a programar en Java Prácticamente y el hace todo de forma interna.

Conclusión: En el estado actual, donde esta casi listo...ya no creo que pueda ser una locura.

Y como veras no estoy trabajando solo, hay mas gente como tu que me ha estado colaborando...acaso esto no es trabajo en equipo.

Un saludo,y mi respeto amigo en esta área, y realmente aprecio todo lo que has hecho y tus opiniones pero creo que ya no queda mas que continuar adelante y terminar...creo tener todo listo en unas 3 semanas.

[SPAWN3000]

Concreto:

Mi problema es que hago esto:

var ClaseA = {
Create:function(url,Parm){
this.Parm = {
move: '10',
Default:'Convert',
Error: 'Ferror',
waitinterval:10
};
this.url = url || "";
this.Parm = Object.extend(this.Parm,Parm);
}
}

var obj = new ClaseA.Create('localhost',{move:'20',Default:'NN'} );

Si, este era uno de mis problemas y ya funciona como debería:
this.Parm = Object.extend(this.Parm,Parm);

2. Al efectuar la primera petición Ajax mediante obj todo funciona bien, la segunda vez lo que tenia move se me reinicia a 10 y debería permaneces en 20, (Por que? ). Y pensé que la solución podría estar extendiendo estas características a un nuevo objeto(Como una clonación- Por cierto, existe clonar para una etiqueta y es netamente compatible?)

Ahora, que si crean nuevas funciones javascript...puedan heredar lo que necesiten de la librería como métodos de crear ventanas, o validar campos...etc.

Mi archivo audAJX.js
La verdad, te paso algunas del AJAX:

Código:

var XMLHttpObject = [
    function () {return new XMLHttpRequest()}, //Other
    function () {return new ActiveXObject("Msxml2.XMLHTTP")}, //IE
    function () {return new ActiveXObject("Msxml3.XMLHTTP")}, //IE
    function () {return new ActiveXObject("Microsoft.XMLHTTP")} //IE
];
var auAJX = {
	Create:function(url,Parm){//Definicion y configuración
		url: '',
		this.Parm = {
			method: 'POST',
			contentType:'application/x-www-form-urlencoded',
			onComplete: HttpResp,
			onSuccess: stateChange,
			Paramt: '',
			waitinterval:10,
			asynchronous: true
		};
		this.url = url || "";
		this.Parm = Object.extend(this.Parm,Parm);//Lo que tu agregaste

		IE='\v'=='v'; //is IE
		IEx=document.all?1:0; //is IE confirm
		if(EstadoAjax!=1){    //Si esta disponible el servicio
		try{
			//...valida si existen las funciones definidas
		}catch(exp){
			alert('Error en la definición de parametros');
		}

Invoca la petición al servidor...

Código:

//=================Initial:Server
		try{
			var xxmlhttp = false;
			for (var i=0;i<XMLHttpObject.length;i++) {
			try { xxmlhttp = XMLHttpObject[i](); }
			catch (e) { continue; }
			break;
			}
			if(this.xParm.method.toLowerCase()!='get'){var SndParm = this.xParm.Paramt;
			}else{var SndParm=null; url = url+'?'+this.xParm.Paramt;}
			//los procedimientos xmlhttp
			ConnAJX.setRequestHeader('Content-Type',this.xParm.contentType); //Envio una cabecera
			ConnAJX.send(SndParm); //falta escapar los caracteres
			tiempo=setTimeout('ErrorConn()',this.xParm.waitinterval*1000);
		}catch(err){
			alert('MSG/Error de petición:'+err);
			ResetOptions();

//============otras funciones...
function xVisible(idTag) {
	var DTag = document.getElementById(idTag);
	DTag.style.display=(DTag.style.display!='none')?'none':'';
}
String.prototype.replace = function(s1,s2){
	return this.split(s1).join(s2);
};

function insertAfter(parent, node, referenceNode) {
	parent.insertBefore(node, referenceNode.nextSibling);
}
function $() {
	var elements = new Array();
	for (var i = 0; i < arguments.length; i++) {
		var element = arguments[i];
		if (typeof element == 'string')
			element = document.getElementById(element);
		if (arguments.length == 1)
			return element;
		elements.push(element);
	}
	return elements;
}

function ExtVlr(idobj){
    var Cobj = document.getElementById(idobj);
    var Mytag = Cobj.tagName.toLowerCase();
    valor = (Mytag=='select')? Cobj.options[Cobj.selectedIndex].value:Cobj.name;
    return valor;
}

y he temido que crear otros para cada componente:
Grid.js
DatePicker.js
CheckBox.js
Listbuttons.js
Window.js
MsgBox.js
...
scwLanguages.js
Formatos.js

y un CSS con los componentes generales

Código:

root { 
    display: block;
}
.ContTbl{
overflow:auto;
width:100%;
/*height:100%!important;*/
min-height:60px;
max-height:120px;
background-color:#fff;
border:1px solid #B5B8C8;
margin:2px;
}
/*Creo el estilo de la tabla*/
.Grid{
    text-align:center;
    width:100%;
    background-color:#fff;
    border:1px solid #ccc;
}
.Grid thead{
    border-left:1px solid #fff;
    width:100%;
}
.Grid tbody {
    width:100%;
    height:135px;
    overflow-y:scroll;
    overflow-x:hidden;
}
.tfooter {
    color:#1C3D7C;
    border-top:1px solid #99bbe8;
    border-bottom:1px solid #99bbe8;
    background: transparent url(images/grid/bg.gif) repeat-x 0 0;
    margin: 0 auto;
    padding:10px 0px 0px 0px; /*top top a h*/
    font:bold Georgia, 'Times New Roman', Times, serif;
    font-weight:bold;
    height:16px;
}
.Grid th{
    background: transparent url(images/grid/grid3-hrow.gif) repeat-x;
    
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    
    height:25px;
    #height:18px;
    font-weight:bold;
}
.Grid tr{
    height:15px;    
}
.Grid tr:hover {
        background: transparent url(images/grid/row-over.gif) repeat-x;
}
.Grid td{
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    height:15px;
    border-top:1px solid #eee;
    background-color:#fff;
}
/*
tr td:hover {
background:#F3F2ED;
}
tr:hover td {
background:#F8F8F8;
}*/
/*Fin del estilo tabla*/
#def_form input{
    height:18px;
    font-size: 12px;
    font:bold Georgia, 'Times New Roman', Times, serif;
    border:1px solid #6787b8;
    padding:0;
}
textarea{
    font-size: 12px;
    font:bold Georgia, 'Times New Roman', Times, serif;
    border:1px solid #6787b8;
    padding:0;
}
select{
        font-size: 12px;
        font:bold Georgia, 'Times New Roman', Times, serif;
        border:1px solid #B5B8C8;
        padding:0;
        margin:3px;
        width:200px;
        /*background: transparent url(images/text-bg.gif) repeat-x 0 0;*/
        background: #fff url(images/text-bg.gif) repeat-x 0 0;
}
/*Date picker select*/
#scw select{
    padding:0;
    width:60px;
    border:1px solid #B5B8C8;
}
/*Date picker Input submit*/
#scw input{
    padding:0;
    width:20px;
    border:1px solid #1C3E7D;
    background: #1C3E7D;
    color:#fff;
}
.scwHead #scwHeadLeft{
    background: url(images/Date/left-btn.gif) no-repeat;
    cursor: pointer;
}
.scwHead #scwHeadRight{
    background: url(images/Date/right-btn.gif) no-repeat;
    cursor: pointer;
}
/*Date picker Input table*/
#scw table,tbody,th{
    padding:0;
    /*border-left:1px solid #fff;*/
    background:url(images/window/hd-bg.gif) repeat-x 0 0 #1C3D7A;
}
#scw table,td{
    background:#1C3D7A;
}
#scw thead,th{
    color:#000;
    background: #fff;
}
#scw iframe{
    border:1px solid #fff;
}
/*Fin date picker*/
label:hover{
    border-bottom:1px solid #6787b8;
    border-top:1px solid #6787b8;
    background: #BCD2EF;
    padding-top:3px;
}
option:hover {
color : #333;
}
select:hover{
    border:1px solid #87A1C5;
}
select:focus{
    border:1px solid #1C3D7C;
}
/*Aplicar a todos los input text*/
textarea{
    border:1px solid #B5B8C8;
    margin-right:5px;
}
textarea:hover{
        border:1px solid #87A1C5;
}
textarea:focus{
        border:1px solid #1C3D7C;
}
input{
    margin-left:4px;
}
input[type='submit'] {
        margin-left:3px;
}
input[type='text'] {
        border:1px solid #B5B8C8;
        height:18px;
        background: transparent url(images/text-bg.gif) repeat-x 0 0;
        margin-top:2px;
}
input[disabled="disabled"] {
    background: #eee;
}
input[type='text']:hover {
        border:1px solid #87A1C5;
}
input[type='text']:focus {
        border:1px solid #1C3D7C;
}
input[type='checkbox'] {
        margin-left:5px;
        height:15px;
}
input[type='checkbox']:focus {
        border:1px solid #1C3D7C;
}
input[type='radio'] {
    height:15px;
    margin-top:3px;
    margin-bottom:3px;
}
select[size='8'] {
        width:100%;
}
.ColTbl{
        background-color:#eee;
        border-right:2px solid #fff;
        border-bottom:1px solid #fff;
}
.Boton2{
    margin-left:65%;
    width:100px;
    height:25px;
    cursor:pointer;
}
#scwIE{
    width:200px;
    top:0px;
    left:0px;
}
#Date1{
    width:250px;
    top:0px;
    margin-left:52px;
}
#preload{
    background:transparent url(images/Precarga_4.gif) no-repeat;
    width:20px;
    height:20px;
    margin-left:10px;
    margin-top:8px;
}

Barra.css
me crea una barra fija en la parte superior. Para opciones extra)

Código:

body { margin:0; padding:0; background-image:none; }
* html body { overflow:auto; }

#Fija { position:absolute; width:100%; z-index:2;
height:35px;
background:url(images/window/hd-bg.gif) repeat-x 0 0 #1C3D7A;
}
html>body #Fija { position:fixed; }

#Todo { position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; }
html>body #Todo { position:static; top:auto; left:auto; width:auto; height:auto; overflow:visible; }

#Todo p { margin:1em 1em 1em 120px; }
#Fija p { margin:0; padding:0; text-align:right; font-size:0.55em; }

.Volver { border-top:dotted #88A 3px; padding:0.5em 0; }

Reset.css

Código:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,
cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,center,u,b,i{
margin:0;padding:0;border:0;outline:0;
font-weight:normal;font-style:normal;
font-size:100%;font-family:inherit;
vertical-align:baseline
}

body{line-height:1}
:focus {outline:0}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
blockquote:before,blockquote:after,q:before,q:after{content: ""}
blockquote,q{quotes: "" ""}
input,textarea{margin:0;padding:0}
hr{margin:0;padding:0;border:0;color:#000;background-color:#000;height:1px}

[stock]

Hásle caso a venkman el sabe lo que dice, en especial toma en cuenta este consejo.

Iniciado por venkman

...
5. Te sigues empeñando en ver las cosas como se hacen en Java

- Te concentras en heredar. Heredar en JAvascript no tiene ni de lejos la mísma relevancia que puede tener en Java. ...

Yo programo en java también y caí en el mismo problema de comparar los lenguajes, hasta que venkman me corrigió algunos conceptos y me animó a indagar mas al respecto.

saludos :D

[SPAWN3000]

Contenedor.css

Código:

* { margin: 0; padding: 0; font-size: 100%; height:auto;}
body{ 
   margin:0 auto 0 auto;
   font-family:tahoma,arial,helvetica,sans-serif;
   font-size:11px;
    }
#contenedor {
position: absolute;
left: 45%;
top: 10%;
height: 200px;
width: 300px;
margin-left: -150px;
}
#contenedor1 {
position: absolute;
top: 10%;
width: 100%;
height:auto;
}
.caja {
        width: 400px;
        margin: 0 auto;
        font-weight:bold;
        overflow:hidden;
        zoom:1;
        position: relative;
  }
  .caja1 {
        min-width:765px;
        width: 85%!important;
        margin: 0 auto;
        font-weight:bold;
        overflow:hidden;
        zoom:1;
        position: relative;
  }
.caja2 {
        width: auto!important;
        margin: 0 auto;
        font-weight:bold;
        overflow:hidden;
        zoom:1;
        position: relative;
  }
.x-window-maximized .caja {
        padding-left:3px;
        padding-right:3px;
        background-color:white;
    }
.sup-izq {
        background: transparent url(images/window/left-corners.png) no-repeat 0 0;
        border-bottom:1px solid #99bbe8;
        padding-left:-6px;
        zoom:1;
        z-index:1;
        position:absolute;
        width: 3px;
        height: 20px;
        top: 0; left: 0;
    }
.sup-der {
        background: transparent url(images/window/right-corners1.png) no-repeat right 0;
        padding-right:-6px;
        width: 3px;
        height: 20px;
        position: absolute;
        top: 0; right: 0;
}
.caja-externa {
        background: transparent url(images/window/left-right1.png) repeat-y 0 0;
        background-color: #CBDDF2;
        margin-top:10px;
        padding-top:20px;
        _padding-left:20px;
        border-right:1px solid #87A1C5;
        #margin-top:20px;
        #padding-top:5px;
        #padding-left:6px;
        #padding-right: 5px;
        <!--[if IE]>
        padding-left:20px;
        <![endif]-->
    }
.caja-interna {
    border:1px solid #99bbe8;
    background-color: #fff;
    /*min-height:380px;*/
    height:100%!important;
    height:380px;
    margin-left: 6px;
    margin-right: 5px;
    padding:5px;
    /*zoom: 1;*/
    position:relative;
    vertical-align:top;
    /*text-align:left;*/
    text-align:left;
    }
.opciones{
    background-color: #EBF3FD;
    /*height:100%!important;*/
    height:30px;
    border-left:1px solid #99bbe8;
    border-right:1px solid #99bbe8;
    border-bottom:1px solid #99bbe8;
    margin-left: 6px;
    margin-right: 5px;
    padding:5px;
    position:relative;
    vertical-align:top;
    text-align:left;
    margin-top:0;
}
.style_login {
    min-height: 120px;
    height: auto!important;
    height: 120px;
    margin-left: 10px;
    padding-right: 10px;
    zoom: 1;
    position:relative;
}
.inf {
        background: transparent url(images/window/top-bottom.png) repeat-x 0 bottom;
        zoom:1;
        width: 100%;
        height: 20px;
        position: relative;
        bottom: 0;
    }
.inf-izq {
        background: transparent url(images/window/left-corners.png) no-repeat 0 bottom;
        padding-left:6px;
        zoom:1;
        width: 20px;
        height: 20px;
        position: absolute;
        bottom: 0; left: 0;
    }
.inf-der {
        background: transparent url(images/window/right-corners1.png) no-repeat right bottom;
        padding-right:6px;
        zoom:1;
        width: 20px;
        height: 20px;
        position: absolute;
        bottom: 0; right: 0;
    }
.x-window-mc {
        border:1px solid #99bbe8;
        padding:0;
        font: normal 11px tahoma,arial,helvetica,sans-serif;
        background:#dfe8f6;
    }
.titulo {
    color:#1C3D7C;
    width: 100%;
    border-bottom:1px solid #99bbe8;
    background: transparent url(images/window/corners-sprite.gif) repeat-x 0 0;
    margin: 0 auto;
    position: absolute;
    padding:5px 0px 0px 15px; /*top top a h*/
    font:bold Georgia, 'Times New Roman', Times, serif;
    font-weight:bold;
    height:16px;
}
.subtitulo {
    color:#1C3D7C;
    
    border-bottom:1px solid #99bbe8;
    border-left:1px solid #99bbe8;
    border-right:1px solid #99bbe8;
    background: transparent url(images/window/corners-sprite.gif) repeat-x 0 0;
    margin: 0 auto;
    padding:5px 0px 0px 15px; /*top top a h*/
    font:bold Georgia, 'Times New Roman', Times, serif;
    font-weight:bold;
    height:16px;
}
.icono{
    background: transparent url(images/window/menu-parent.gif) no-repeat 0 0;
    position: absolute;
    height:15px;
    width: 15px;
    z-index:2;
    margin:6px 0px 0px 6px; /*top top a h*/
}
#Botones{
border:#1px solid;
border-bottom:#1b4c62;
border-right:#1b4c62;
border-left:#9Cb8dd;
border-top:#98C8dd; 
font-family: Verdana;
font-size: 11px;
text-align: center;
width: 150px;
height: 50;
background-color: #273546;
margin: 2px;
cursor:pointer;
color:#eeffff;
font-weight:bold;
}
#Botones:Hover{
    background-color: #4A5D75;
    text-align: center;
}
.Agrupador{
    padding:3px;
    margin-bottom:5px;
    margin-top:5px;
    border:1px solid #99bbe8;
    background-color: #D2E1F4;
    text-align:left;
    display:inline-block;
    width:99%;
}
.AgrupT{
    width:auto;
    padding:4px;
    top:-5px;
    left:5px;
    positio:absolute;
}

Y mas archivos...

[venkman]

No lo podré mirar hasta el lunes, pero... ponme el código de HttpResp y StateChange.

Ah... y echo en falta un ConnAjax.onreadystatechange=algo... O... espera... es ConnAjax o es xxmlhttp?

De hecho.... no sé, quizá necesitaría ver más Javascript... no sólo trozos sueltos...

[SPAWN3000]

Mas bien yo subo el código en un zip a un servidor con un ejemplo funcional, te envió la url en un privado, y si tienes tiempo lo revisas...Pienso que es mas cómodo. Dame algo de tiempo para ver si puedo sacar un ejemplo aparte, ya que todo esta dividido en archivos y algunas cosas no son necesarias...

Pero como te digo, lo de la herencia tenia en mente aplicar el mismo de prototype y ya no complicar mas esta parte...ya que todo es costo en contra del tiempo, tu que tienes mas experiencia entenderás mas mi situación actual, y al parecer me piensan iniciar en otro proyecto mas en PHP...jejeje. No me queda mas que reír de mi situación.

Pero bueno un saludo amigo y gracias.

[venkman]

Ok. Mándame la URL cuando lo tengas.