Creación de diseños dinámicos

Este artículo resuelve un viejo problema, como se ve en la creación de una interfaz de usuario dinámico que cambia su diseño dependiendo de la resolución o agente de usuario no se muestra o la visualización de la interfaz de usuario. Problema que desea crear una interfaz de usuario dinámica que se presenta manera más lógica y legible de lo posible, se extiende por una amplia variedad de diferentes agentes de usuario (incluidas las distintas resoluciones, navegadores, dispositivos, etc), y hace un uso razonable de la pantalla de bienes raíces disponibles. Teoría Piense en lo que sucede cuando navegar a una página HTML como http://www.eweek.com.

Nota No estoy criticando eWeek específicamente, pero sólo como un ejemplo, porque casi todos los sitios Web tiene el mismo defecto. La realidad es que no es mejor, porque cada uno tiene ventajas y desventajas. Sin embargo, no es óptimo. Cuando la Web inicialmente comenzó a hacerse popular, la mayoría de dispositivos de computación tenían la misma resolución de pantalla, y la gente rara vez, navegando por Internet en la celda de dispositivos de teléfono. Necesidades de informática Ahora los dispositivos de computación son extremadamente poderosos, pero varían en extremo en su resolución de pantalla. Personales pueden variar de un mínimo de 800 × 480 a un máximo de 4500 × 1200 para una pantalla dual. No tiene sentido fijar la resolución de pantalla. Las proporciones utilizadas en el navegador de pequeños son una columna, una columna, y una columna. Sin embargo, el más grande explorador utiliza una columna, dos columnas y dos columnas. Lo que están haciendo es reajustar el espacio de modo que en la ventana más pequeña, se muestra sólo una columna. En la ventana más grande, más las columnas puede ser ilustrado. Solución de este artículo se explica la solución en trozos, a partir de la página HTML general de llamada que pide el algoritmo de tamaño, a continuación, el algoritmo de tamaño en sí. El código siguiente incluye la página HTML en general.

 Fuente: / web / ROOT / artículos AJAX / DHTML / dynamiclayout.html 

Mirar el código de la página HTML, se puede ver que un tipo llamado FlexBox se crea una instancia y asignado a la FlexBox variable global. El tipo de FlexBox es el algoritmo de cambio de tamaño. La acción de instancias y pidiendo el tipo FlexBox se lleva a cabo en el InitializePage función, que es llamado por el event.2 body.onload desea crear una instancia del tipo FlexBox en caso body.onload, porque ese es el lugar seguro, primero para código para funcionar en un modelo DOM completo. FlexBox Cuando se crea una instancia, es necesario un parámetro de constructor, en el caso del ejemplo, que es el buffer de "contenido". El buffer de "contenido" es una referencia de identificación a un elemento HTML que sirve como la base de los elementos HTML que se cambian de tamaño. En el ejemplo, las referencias de identificación del contenido de un elemento div, que contiene elementos div niño. En este algoritmo de tamaño, un div referencias elemento elementos secundarios div. En su aplicación de este artículo, usted no necesita hacer eso. Este algoritmo ilustra el tamaño de un elemento HTML que contiene una serie de bloques de contenido, que sirven como las columnas que se cambiará de tamaño. Cuando se asigna una instancia de FlexBox a FlexBox, FlexBox primero inicializa a sí mismo y reordena los elementos div en una estructura de tabla. La ejecución del constructor FlexBox hace que reordenar los elementos div para el siguiente HTML:

 
La reordenación del HTML a un elemento de la tabla es una necesidad. Dos modos de ajustar proporcionalmente los elementos en una página HTML: coordenadas absolutas y relativas coordenadas. De forma predeterminada, HTML utiliza coordenadas relativas, que el navegador calcula. En el modo de coordinar la relación, sólo es necesario para definir los elementos que siguen los otros elementos. Uso de coordenadas absolutas resuelve los problemas de alineación de los tres elementos div niño, pero el resto de la página HTML puede ser extrañamente alineados, ya que algunos elementos no se podrían usar absoluto coordenadas. La forma más sencilla para alinear el contenido de una página HTML usando coordenadas relativas es utilizar una tabla. Por lo tanto, el algoritmo de tamaño se ve en el elemento div padre, se crea una tabla, y crea una celda de una tabla para cada elemento div niño. Algunos lectores podrían pensar que hubiera sido más fácil definir los elementos de la tabla y no div y luego tener el algoritmo de trabajo con los elementos de la tabla directamente. Es cierto que el uso de un elemento de tabla hubiera sido más fácil, pero este algoritmo se ilustra cómo puede reemplazar elementos HTML con nuevos elementos HTML. Volviendo al código fuente HTML de la página llamada, el setCharacteristics método es llamado una vez FlexBox ha sido asignado . Se pasa una definición de objeto con un número de objetos incrustados a setCharacteristics. El propósito de setCharacteristics es definir el ancho de las columnas proporcional de los elementos secundarios div. Así, el objeto incrustado tiene un número de propiedades que se corresponden uno a uno con las identificaciones de los elementos secundarios div. En el ejemplo, el objeto incrustado se definen las siguientes restricciones:
• col1: Cada columna debe ser de 200 píxeles de ancho, y hay amaximum de la columna de una sola.
• col2: Cada columna debe ser de 100 píxeles de ancho, y hay un máximo de cuatro columnas.
• col3: Cada columna debe ser de 200 píxeles de ancho, y no puede haber tantas columnas como no hay espacio. Para entender las restricciones, es necesario comprender la naturaleza del algoritmo de cambio de tamaño. La idea del algoritmo de tamaño es definir las proporciones que permitir a una aplicación cliente para el contenido adecuado. Al aumentar la anchura del navegador, usted puede montar más bloques de lado el contenido de la otra. La legibilidad de la página HTML se mejora, porque hay menos desplazamiento, y la página HTML parece a la de un periódico. La diferencia con la página HTML es que a diferencia de un periódico, el número de columnas que se muestran depende del tamaño de la ventana del cliente. La ventaja es que si nos fijamos en la página HTML desde el dispositivo UMPC o de una gran notearticle pantalla, usted todavía obtener un buen aspecto y sensación. Este artículo y el enfoque algoritmo de tamaño en la conciencia de dar la retroalimentación página HTML que celda de la tabla ahora tiene espacio para uno, dos o tres columnas de contenido. ¿Cómo que se muestra el contenido depende de la página HTML y está más allá del ámbito de aplicación del algoritmo de cambio de tamaño. Volviendo al código fuente de la página HTML que llama, se llama setContentCallback función después de llamar a setCharacteristics. 
El propósito de la setContentCallback función es la de definir una devolución de llamada de usuario que se actualiza con la nueva información de usuario cuántos restringida columnas caben en una celda. En el ejemplo, se muestra el código de cliente los parámetros de la celda de la tabla. Para reproportion la tabla, se llama al método de actualización. La actualización por primera vez se llama, es desde el evento onload del cuerpo. El evento onload del cuerpo se activa sólo una vez y no vuelve a ser llamada si el cliente cambia el tamaño del navegador del cliente. Para que el método de actualización llamado cada vez que se cambia el tamaño del navegador, se le asigna el caso de window.onresize. En el ejemplo, se asigna window.onresize a la updateClientArea función, que hace una llamada a un método único para flexbox.update, que en las actualizaciones a su vez las proporciones de la tabla. Ahora que la teoría del algoritmo de tamaño se ha explicado desde el nivel abstracto , vamos a discutir los detalles del algoritmo de cambio de tamaño. El siguiente código muestra la ejecución completa del algoritmo de cambio de tamaño. Tenga en cuenta que el algoritmo de tamaño es una aplicación personalizada, y usted puede elegir una estrategia diferente en su propia situación:
función FlexBox (parentIdentifier) (if (typeof (parentIdentifier) == "string") (this.parentIdentifier = document.getElementById (parentIdentifier);) else (this.parentIdentifier = parentIdentifier;) this.table = document.createElement ( "table"); this.table.border = 1; TableRow this.table.insertRow var = (-1); tempArray var = new Array (); for (var c1 = 0; c1 <this.parentIdentifier.childNodes.length; c1 + +) ( tempArray [C1] = this.parentIdentifier.childNodes [C1]; ) for (var c1 = 0; c1 <tempArray.length; c1 + +) ( var child = tempArray [C1]; if (child.nodeName.toLowerCase () == "div") ( células var = tablerow.insertCell (-1); cell.appendChild (niño); if (child.id) ( cell.id = child.id; ) ) )this.parentIdentifier.appendChild (this.table);) FlexBox.prototype.setCharacteristics = function (características) (this.characteristics = características; FlexBox.prototype.setContentCallback = function (cbContent) (this.cbContent = cbContent; FlexBox.prototype. actualización = function () (var fila = this.table.rows [0]; totalCells var = row.cells.length; availableLength var = document.body.clientWidth; for (var en this.characteristics) (this.characteristics [ cols index]. = 0;) Incremento var; if (this.characteristics.updateAlgorithm) (Incremento = this.characteristics.updateAlgorithm;) else ( Incremento = function (ref) ( takenWidth var = 0; for (var en ref.characteristics) ( takenWidth + = ref.characteristics [indice]. cols * ref.characteristics [indice]. anchura; ) didIncrement var = false; for (var en ref.characteristics) ( var obj = ref.characteristics [indice]; if ((takenWidth + obj.width) <availableLength) ( if (obj.maxCols) ( if (obj.cols <obj.maxCols) ( obj.cols + +; didIncrement = true; ) ) else ( obj.cols + +; didIncrement = true; ) ) ) if (didIncrement) ( Incremento (ref); )Incremento) (this); for (var c1 = 0; c1 <row.cells.length; c1 + +) (if (row.Cells [C1]. Id) (var ID = row.Cells [C1]. Id; if (this.characteristics [id] & & this.characteristics [] id. anchura) (row.Cells [C1]. width = this.characteristics [] id. anchura * this.characteristics [] id. cols; if (this. cbContent & & this.cbContent.updateContent) (this.cbContent.updateContent (row.Cells [C1], row.Cells [C1]. childNodes [0], this.characteristics [] id. Cols, this.characteristics [id]) ;)))))
En su mayor parte, no el código que aparece en negrita es el código de apoyo para el código en negrita. La primera sección de código en negrita implementa la lógica utilizada para convertir el div y elementos div niño en una tabla que contiene los elementos secundarios div. La segunda sección de código en negrita de la lógica a la proporción de celdas de tabla. Comencemos por la disección del primer bloque de código y la manipulación de la mesa y elementos div niño. Se puede manipular el DOM en una de dos maneras: Puede utilizar la propiedad innerHTML, o se puede manipular objetos usando métodos. En este artículo se manipula objetos con métodos, ya que el enfoque es más sencillo. Los elementos secundarios div podría contener un código HTML bastante complejos que no desea para serializar y deserializar. Utilización de objetos en movimiento y en el DOM no corruptos los elementos secundarios div. Tenga en cuenta los siguientes elementos del código:
• Utilice el método de document.createElement a instancia de un elemento HTML: La instancia HTML devuelto elemento se crea una instancia, pero no es parte de la página HTML y debe ser añadido.
• Si un elemento es un elemento HTML específicas, tales como una tabla, a continuación, asociar el los métodos del elemento HTML con la instancia de elemento: En el ejemplo, una tabla se crea una instancia, y las tablas de filas de referencia.
• Utilizar una variable temporal para almacenar los elementos antes de que se reordenan: ¿Recuerda que cuando dije que el algoritmo de tamaño no es necesario convertir los elementos div a la mesa? Antes de pasar a la explicación del algoritmo de encolado, anuncio en el primer bloque de código en negrita cómo los elementos se guardan en una matriz temporal (tempArray) antes de se vuelve a añadir al documento HTML como elementos secundarios de una tabla. Esta medida de ahorro de referencia temporal es absolutamente crucial cuando se está manipulando un modelo de objetos de documento. Si usted no guarda temporalmente, usted podría experimentar algunos efectos secundarios muy funky. Este paso adicional fue introducido en el artículo para ilustrar la forma de manipular un documento correctamente.
• Agregue una instancia elemento HTML a la jerarquía de páginas HTML usando un método DOM tales ya que appendChild: Si la instancia pasó a appendChild es un elemento que ya se encuentran en la página HTML, a continuación, llamar a un removeChild antes de llamar a appendChild. El llamamiento de removeChild ocurre de forma transparente. El segundo bloque de código en negrita implementa el algoritmo de partición de la tabla. La lógica es una técnica de fuerza bruta, que distribuye el ancho entre las celdas de la tabla y ve si la distribución es más o menos de la anchura disponible. La mejor manera de ilustrar la lógica es ir a través de la página ejemplo, el HTML. Las restricciones de la página de ejemplo el código HTML se describieron en forma de bala de un par de páginas atrás. La lógica dice las restricciones y para la primera iteración, intenta colocar a una sola columna en cada celda de la tabla. La anchura de cada columna se suman y se verifica a la anchura de la zona del cliente. Si la anchura añadido es menor que el ancho del área de cliente, entonces se ejecuta otra iteración. En el ejemplo, la primera celda de la tabla sólo puede contener un ancho de columna única. Otro de iteración se lleva a cabo, y la segunda columna de la tabla del conteo celular se incrementa. El patrón de iteraciones resultados en un patrón de número de columnas que se asemeja a lo siguiente:
1 1 1 1 2 1 1 2 2 1 3 2 1 3 3 1 4 3 ...
Se utiliza la técnica de fuerza bruta, ya que desea distribuir las columnas en partes iguales entre todas las celdas de la tabla. Si desea utilizar el algoritmo de distribución propia, a continuación, la instancia del objeto pasado a la setCharacteristics método debe tener una updateAlgorithm miembro de datos. Al aplicar su propio algoritmo, tenga en cuenta que desea distribuir el ancho de las columnas entre las celdas de la tabla. Recuerde lo siguiente:
• Con la tecnología actual, una amplia variedad de dispositivos tienen diferencias extremas en la resolución de pantalla.
• ancho fijo o totalmente por uno basado en páginas HTML sólo se ve bien en las dimensiones de pantalla específico. Si una pantalla está más allá de las dimensiones, la página HTML se ve mal.
• hora de acoger a diferentes resoluciones de pantalla, tenga en cuenta el diseño de página de forma dinámica en las dimensiones horizontales y verticales. La mayoría de las páginas sólo consideran la página HTML como dinámica en la dimensión vertical.
• No utilice las coordenadas absolutas utilizando las proporciones de algoritmos, ya que es necesario ajustar todos los elementos de la página HTML completa. Utilice coordenadas relativas, lo que implica elementos de la tabla HTML.
• Cuando se mueve el contenido en forma horizontal y vertical, utilizar un algoritmo de distribución que se distribuye de manera uniforme sobre el contenido de la página HTML.
un artículo presentado por Sonja Lande 

Descargo de responsabilidad:Nuestro sitio web no es responsable por el contenido de este artículo. Webarticles es un recurso de información gratuito.
Importante: Este artículo "Creación de diseños dinámicos", fue traducida por un software automático. Sentimos pena por los errores de ortografía que pueda haber ocurrido. Gracias por su comprensión. 



  
  
       









  
 

 Online: 315 users browsing the articles directory