Skip to main content

Centrar Pagina Visual Web Pack

Algunas veces nos encontramos en el desarrollo de una aplicación web y deseamos centrar las paginas o ajustarla en cierta posición dentro del navegador web, podemos recurrir a muchas soluciones una de las más sencillas puede ser colocar un panelLayout y colocar todos los componentes de la página dentro de el.
Luego simplemente ajustamos las posiciones e indicamos el la propiedad left al 50% u otro porcentaje que deseamos.
A continuación una manera sencilla de hacerlo.
1. Agregamos Layout Panel a la pagina













2. Añadimos todos los componentes al LayoutPanel















3. Editamos la propiedad style del LayouPanel









4. Nos ubicamos en Position, y le damos el valor a left de 50% o podemos ajustar el valor que deseamos, además colocamos la propiedad margin-left: -390px.
Ejemplo:













De esta manera logramos hacer los ajustes de los componentes en la pagina al porcentaje adecuado.

Nota:
Si tenemos un header en flash, la mejor forma seria crear una pagina html donde se llame el header y la pagina del centro seria tambien otra html.
Pues bien tendriamos nuestras paginas java server faces, las que colocamos con la propiedad top:0 de manera que se ajusten al espacio superior del header.

Comments

Anonymous said…
Absoluto? Relativo? Static? Cual?

Popular posts from this blog

Tutorial básico de aplicaciones Web con NetBeans parte 1

NetBeans ofrece un excelente soporte para el desarrollo de aplicaciones Web, en esta ocasión lo haremos utilizando el Framework Java Server Faces 2.0. En el Menu Seleccionamos Nuevo->Proyecto y luego en Categorias Java Web y en tipo de Proyectos Web  Application indicamos el nombre del proyecto Seleccinamos el servidor Web, usamos GlassFish ya que este soporta EJB3.0 y JSF 2.0 Framework Java Server Faces El IDE genera el esquelto del proyecto Web Pages   almacenamos las paginas .html, xhtml, jsf, los archivos de recursos, los scripts .js, imagenes Source Packages    Son las clases Java  Test Packages    Son las clases que usamos para los Test Libraries     Tenemos las bibliotecas de Java y GlassFish necesarias para ejecutar la aplicación Web. Test Libraries     Están las bibliotecas usadas para los test  Configuration Files    Archivos de configuración de la aplicación. Ejecutamos la...

Incrementar Memoria NetBeans

Algunas veces necesitamos incrementar la memoria para un mejor rendimiento. http://www.netbeans.org/community/releases/55/uml-download.html Este es un ejemplo para UML. Descripción en ingles. Increasing Memory Settings (applicable to all builds) The default memory settings for NetBeans should be increased for UML projects. If you have the available memory, Locate your NetBeans installation directory ($install_dir). This can be found by starting up NetBeans and selecting Help -> About then select the Detail tab. Edit the $install_dir/etc/netbeans.conf file. Find the line defining netbeans_default_options . Increase the maximum memory attribute to -J-Xmx512m. If you experience heap overflows while working with larger files, you should increase this value further.

Cambiando el estado de un checkbox

Cambiando el Estado de un CheckBox Algunas veces deseamos controlar el estado de un checkbox o cambiarlo segùn determinadas condiciones. Pasos: 1. Creamos un proyecto Web. 2. En el diseñador agregamos un checkbox y dos botones. * Dar click derecho en el checkbox y luego seleccionar Add Binding Attribute, para agregar los atributos al checkbox, de manera que los podamos usar en nuestro código. Generando automáticamente private Checkbox checkbox1 = new Checkbox(); public Checkbox getCheckbox1() { return checkbox1; } public void setCheckbox1(Checkbox c) { this.checkbox1 = c; } 3.Damos click derecho en el botón Habilitar, y seleccionamos Edit Action Event Handler. A continuación, agregamos el código: this.checkbox1.setSelected(true);, el método setSelected con valor true, marca el checkbox como seleccionado, y un valor de false, quita la marca. public String button1_action() { // TODO: Process the action. Return value is a navigation // ...