Utilice html css javascript para crear su propia página de tutorial gráfico RIA 1/2

Ingrese RIADemo como nombre del proyecto.

Seleccione el servidor a ejecutar y el estándar Java ee.

Elija tomcat5.0, j2ee1.4 aquí. Este artículo presenta ejemplos y no depende del servidor, porque html & css & javascript en sí es estático y será un archivo html una vez completado. En sentido estricto, un programa web debe ser ejecutado por un servidor y Netbeans todavía adopta este concepto de gestión.
En este paso, puede hacer clic en Finalizar para construir el proyecto. El siguiente paso es seleccionar un marco. Aquí, por simplicidad y pureza, no se selecciona ningún marco.
Una vez establecido el proyecto, la estructura del proyecto del espacio de trabajo del proyecto es la siguiente:

Debido a que es estático, no es necesario prestar atención a nada fuera del directorio de la página web.
Para facilitar la administración, es necesario crear dos nuevos directorios en el directorio de la página web, inc e imágenes. Es bastante simple y no se describirá en detalle aquí.
El primer ejemplo, esperar cuando se solicita la página, el efecto es el siguiente:

Este ejemplo consiste en realizar una operación en la página actual, congelar la página y mostrar un cuadro de espera antes de salir o devolver los resultados de la operación. La función es avisar al usuario que la página se está cargando. Especialmente para ciertas solicitudes de datos de gran volumen, esta interfaz de usuario puede aliviar la molestia de los clientes causada por las largas esperas.
Un breve análisis muestra que este ejemplo consta de 2 puntos principales.
1. Elementos estáticos
2. ¿Cuándo aparece el cuadro y cuándo desaparece? La interfaz de usuario en este efecto es un cuadro de carga sobre un fondo oscuro.
Para los elementos estáticos, no importa cómo aparezcan, su esencia es siempre HTML, CSS y JavaScript, excepto, por supuesto, los controles integrados, como flash. De hecho, los controles integrados ya no están dentro del alcance de elementos estáticos como HTML.
En este ejemplo, el cuadro de carga es en realidad solo un div que contiene una imagen con efecto de desplazamiento y texto normal. Sin embargo, el div se embellece con CSS y luego se combina con las características de la página web y se usa JavaScript para controlarlo. visualización del div y desaparece.
Entonces, ¿cómo crear tal efecto? Para explicar claramente todo el proceso de producción, independientemente de JavaScript por el momento, primero cree el div.
En el directorio de la página web, haga clic derecho en Nuevo -->html

Seleccione html y nombre el índice del archivo.
Una vez creada la página, el único material necesario es la imagen de carga.gif con efecto de desplazamiento. Copie la imagen a la carpeta de imágenes.
A continuación, cree un nuevo archivo CSS, haga clic derecho en la carpeta inc, elija Nuevo --> Otro y seleccione Hojas de estilo en cascada en otros directorios, como se muestra en la figura:

Nombre el estilo, haga clic en Finalizar y genere el archivo CSS recién creado a través de este paso genera automáticamente una raíz de estilo. Mueva el cursor al rango de la hoja de estilos raíz. Netbeans mostrará una ventana de generador de estilos para CSS, y también allí. es una ventana de vista previa del efecto, como se muestra a continuación:

La ventana del generador en el lado derecho del editor proporciona configuraciones GUI para muchos atributos y genera automáticamente el código correspondiente. Debajo del editor hay una vista previa del estilo. Por ejemplo, en el panel de fuente, el autor selecciona cursiva para el estilo y el grosor. Seleccione negrita, luego seleccione subrayado y seleccione #ff0099 (un tipo de rojo) para el color. Al seleccionar un color, aparecerá un selector de color. Seleccione el color correspondiente y el efecto de vista previa será el siguiente.

El editor genera automáticamente el código y el cuadro de vista previa también muestra el efecto después de la aplicación. Netbeans lo hace muy bien.
Cabe señalar que, aunque el código generado por la herramienta es simple, ciertamente no es tan flexible y fácil de controlar como la escritura a mano.
Aquí, defina el estilo del cuadro de espera que necesitamos.
.cargando
{
border:2px solid #a3bad9;/* El estilo del borde del objeto de estilo aplicado*/
color:#003366; /* El color del contenido en el objeto de estilo aplicado*/
padding:10px /* La distancia entre el contenido del objeto de estilo aplicado y el borde del estilo (superior, inferior, izquierda, derecha) */
margin:0; /* La distancia entre el objeto de estilo aplicado y los elementos circundantes (arriba, abajo, izquierda, derecha) */
z-index:2000; /* El valor de la coordenada z del objeto de estilo aplicado en la página web*/
width:205px /* Ancho del objeto de estilo aplicado*/
text-align:center; /* Centrar el contenido en el objeto de estilo aplicado*/
posición:absoluta; /* Se muestra la posición del objeto de estilo aplicado en la página */
font-weight: negrita; /* El estilo de la fuente en el objeto de estilo aplicado*/
font-size: 13px /* El tamaño de la fuente en el objeto de estilo aplicado*/
}
Si los lectores están interesados ​​en el significado específico de cada atributo, pueden buscar información para una comprensión más profunda. No entraré en detalles aquí.
Después de crear el CSS, agregue el siguiente código al archivo index.html que acaba de crear para importar el estilo CSS.

Únete al área

Guarde el archivo, haga clic derecho en el archivo index.html y seleccione Ejecutar archivo

El navegador aparecerá automáticamente y el efecto de visualización es el siguiente:

Aparece un cuadro. Los lectores atentos pueden encontrar que la interfaz de usuario es ligeramente diferente a la que se muestra al principio si agrega el siguiente código al estilo de carga que acaba de definir.
background:white url(../images/block-bg.gif) repetir-x /* El fondo del objeto de estilo aplicado y configurado para repetirse horizontalmente*/
Por supuesto, también debe agregar la imagen de fondo block-bg.gif. Después de agregar la imagen de fondo, el efecto es el siguiente:

En este punto, la interfaz de usuario está completa.
A continuación, descubra cómo hacer que la página web sea oscura y no se pueda hacer clic en ella.
La forma más sencilla de oscurecer una página web es cambiar el color de fondo de la página web a un color oscuro, pero esto obviamente no tiene sentido, porque después de cambiarlo a un color oscuro, aún se puede hacer clic en los elementos de la página.
Entonces, ¿cómo oscurecer el fondo y hacer que sea imposible hacer clic?
Analizando nuevamente el principio de las páginas web estáticas, el oscurecimiento se debe lograr ajustando el color. Para lograr que no se pueda hacer clic, se puede lograr reemplazando el objeto en el que se hace clic, es decir, en el objeto en el que se hace clic, se genera un objeto. este objeto es transparente, luego, cuando el usuario hace clic, en lo que hace clic es en realidad un objeto transparente que bloquea el objeto subyacente, lo que le da al usuario la ilusión de que el clic no es válido, como se muestra a continuación:

Si el objeto B es transparente y está al lado del objeto A, si un tercero intenta contactar al objeto A y solo encuentra el objeto B, entonces todos los contactos contra A no serán válidos.
En este punto del análisis, lo que tenemos que hacer es crear un div con este efecto especial. En última instancia, sigue siendo una producción y aplicación de CSS.
El efecto de transparencia oscura se puede obtener mediante el atributo de filtro de CSS y redefinir un nuevo estilo bgdiv.
.bgdiv
{
fondo:#ccc;/*color de fondo*/
opacidad:.3; /* transparencia*/
filtro: alfa(opacidad=30) /* filtro transparente*/
posición:absoluta; /* Se muestra la posición del objeto de estilo aplicado en la página */
z-index:1000; /* El valor de la coordenada z del objeto de estilo aplicado en la página web*/
width:500px /* Ancho del objeto de estilo aplicado*/
height:500px /*Altura del objeto de estilo aplicado*/
top: 0px; /* La distancia entre el objeto de estilo aplicado y la parte superior de la página*/
izquierda: 0px /* La distancia entre el objeto de estilo aplicado y el extremo izquierdo de la página*/
}

En la zona del cuerpo, añade:
, ejecute el archivo, el efecto es el siguiente:

En este punto, el diseño de la interfaz de usuario está completo, pero el tamaño del div que vemos es 500 * 500, que no ocupa toda la página, el cuadro de espera no está centrado y el efecto ya es visible desde el principio. Obviamente, no se puede hacer directamente. Cuando lo usamos, necesitamos que el fondo ocupe toda la página, el cuadro de espera debe mostrarse en el centro y debemos poder controlar cuándo aparece y cuándo desaparece el efecto.
Entonces estas tareas deben completarse mediante JavaScript.
JavaScript puede controlar casi todos los elementos estáticos de la página, y los efectos anteriores se logran oficialmente controlando el div de fondo y el cuadro de espera.
En JavaScript, la forma más sencilla de obtener un elemento en la página es asignar un valor al atributo ID del objeto de destino y luego obtenerlo a través de getElementbyId de JavaScript.
Aquí, primero asigne un valor al atributo ID de bgdiv, como por ejemplo:

Primero resolvamos el primer problema, que consiste en establecer el tamaño de la capa para llenar toda la página a través de JavaScript.
función mostrarbg()
{
var bgdiv=document.getElementById("bgdiv"); // Obtener el objeto bgdiv
bgdiv.style.width=document.body.clientWidth; //Establece el ancho del objeto bgdiv al ancho del área visible de la página web
if (document.body.clientHeight>document.body.scrollHeight) //Establece la altura del objeto bgdiv a la altura del área visible de la página web
bgdiv.style.height=document.body.clientHeight;
demás
bgdiv.style.height=document.body.scrollHeight;
}
Lo que hay que explicar aquí es que clientWidh y scrollWidth representan el ancho del área visual. La diferencia es que si hay barras de desplazamiento en la página web, entonces scollWidth es mayor que clientWidth, porque scollWidth incluye la barra de desplazamiento para ?? ??????? parte, mientras que clientWidth no, solo la parte visible.
En la función anterior, clientWidth se usa como ancho, porque de acuerdo con los principios básicos del diseño web, es bastante hostil diseñar una página web que contenga una barra de desplazamiento horizontal, porque el mouse solo puede desplazarse hacia arriba y hacia abajo, pero no hacia la izquierda. a la derecha, por lo que aquí Tomar clientWidth directamente significa garantizar que no aparezca ninguna barra de desplazamiento horizontal en todo el proyecto.
La configuración de altura siguiente tiene en cuenta la compatibilidad con y sin barras de desplazamiento verticales.
La función anterior puede garantizar que el bgdiv llamado pueda llenar toda la pantalla.

En la carpeta inc, cree un nuevo archivo javascript, copie la función anterior en él y agregue el siguiente código a la página para presentar la función.

Para facilitar la visualización, agregue onload="showbg();" en la etiqueta del cuerpo. Una vez cargada la página, puede ver que el bgdiv ajustado ha llenado toda la página.
El principio de ajustar la posición de visualización del cuadro de espera es similar.
función mostraresperar()
{
mostrarbg(); // mostrar bgdiv
var loading=document.getElementById("loaddiv");//Obtener el objeto de carga
loading.style.top=document.body.clientHeight/2+document.body.scrollTop-50;//Establece la distancia de carga desde la parte superior
loading.style.left=document.body.clientWidth/2-110;//Establece la distancia entre la carga y el extremo izquierdo
}
Llame a showwait en el evento de carga para mostrar el cuadro de espera sobre un fondo transparente oscuro.

Lo que hay que enfatizar aquí es el atributo de posición del atributo CSS. Este atributo debe establecerse en absoluto para que el código anterior sea efectivo, porque la posición del código anterior se establece de acuerdo con la posición absoluta.

El efecto anterior se muestra tan pronto como se abre la página. Si desea controlar si se muestra, debe usar la visualización del atributo CSS. Cuando el valor es bloque, se mostrará y cuando no sea ninguno. no se mostrará.

Hemos agregado display: none a los atributos CSS anteriores, entonces el efecto no se mostrará cuando se abra la página.

Luego agregue bgdiv.style.display="block" en la función showbg;

Agregue cargando.style.display="none" a la función showwait;

Agregue visualización al área del cuerpo de la página y ejecute la página. Solo se puede ver el enlace de visualización. Después de hacer clic en el enlace de visualización, se mostrará el efecto que necesitamos, como se muestra en la figura:

Los efectos que aparecen no desaparecerán. En mi trabajo de estudio diario, el autor también descubrió un fenómeno al hacer clic en un enlace en la página (es decir, enviar una solicitud al servidor), cuando el servidor no ha terminado de procesar y no ha devuelto la página al cliente. La página en sí no habrá cambios, y la llamada velocidad de red lenta también es así. Al hacer clic, no se refleja. Cuando el servidor completa el procesamiento, devuelve el html al usuario y la página comienza a cambiar. Luego, si el evento showwait se activa cuando se hace clic en el enlace, el efecto aparecerá hasta que el servidor termine de procesar la solicitud y la página sea redirigida y desaparezca.

Por ejemplo, si cambiamos el código mostrado para mostrar y luego ejecutamos la página, y luego hacemos clic en mostrar, podemos ver que aparece el cuadro de espera y, cuando la página desaparece, aparece la página de inicio de Sun.
Miremos hacia atrás. De hecho, este ejemplo no tiene nada de especial, pero los requisitos para HTML, CSS y JavaScript son muy altos. Solo si está familiarizado con estos tres elementos estáticos, podrá comprenderlos bien. Y aquí también hay ciertos requisitos para los artistas. Cabe señalar que las imágenes de desplazamiento y las imágenes de fondo de espera no las crea el autor. Son imágenes del marco externo. ext.
Vale la pena mencionar que el editor de Netbeans 6.1 tiene un amplio soporte para JavaScript, no solo soporte para palabras clave, sino también avisos para navegadores compatibles, e incluso proporciona algunos ejemplos simples.

Este artículo dedica mucho espacio a explicar un ejemplo sencillo. El propósito es brindar a los lectores un análisis en profundidad de cómo desarrollar su propio RIA a través de procesos de desarrollo y pensamiento detallados.

Se puede ver que para hacer este tipo de RIA, aunque todavía se necesitan una cierta base artística y capacidades de diseño de páginas, los pasos básicos de producción no son más que los dos pasos siguientes:

1. Cree su propia interfaz de usuario usando HTML y CSS.

2. Estudie detenidamente el modo de comportamiento de la página y escriba javascript para controlar la interfaz de usuario.

En el próximo artículo, el autor le presentará un ejemplo más complejo y completo, que incluye cuadros de diálogo emergentes, menús emergentes, capas de efectos especiales y ventanas de arrastre.