|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
   AutoIt (Programación) Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  Teleco - Emisora de A.M. Visual Basic Cosas de Windows Webs interesantes
Translate:
Búsqueda en este sitio:


Nuevo concurso para España, Argentina, Brasil, Chile, Colombia, Ecuador, México, Perú y Portugal.

B4J en español
B4J - Juan Antonio Villalpando

-- Tutorial de iniciación a B4J en español --

 

- Aquí puedes encontrar la instalación y configuración del programa B4J para realizar archivos jar de Java.

Volver al índice del tutorial

_________________________________________

7.- Colores. Efectos. Hoja de estilo CSS.

- Presentación.

- Como ya he comentado en tutoriales anteriores, la forma de poner color, tipo de letra, sombra, degradado,... en un control mediante JavaFX CSS es escribiendo un código de tipo -fx-font: bold italic 50pt Arial;

- Vamos a ver tres maneras de establecer colores, efectos...
- Podemos poner ese código tanto en el Style del JavaFX Style Builder como en el mismo código. También podemos hacerlo desde el menú del JavaFX Style Builder.

_________________________________________________________

1.- En el JavaFX Style Builder sería...


En el casillero Style escribimos diversas líneas separadas por punto y coma ;
(Cuidado siempre con las mayúsculas y minúsculas que se deben respetar.)

Esas líneas son de la forma

-fx-font: bold italic 50pt Arial;
-fx-text-fill: green;
-fx-background-color: #cc5522;
-fx-background-radius: 50;
-fx-effect: dropshadow(one-pass-box, blue, 8, 0.0, 2, 0);

_________________________________________________________

2.- También podemos poner esas línea de estilo en el código, por ejemplo cuando pulsemos un botón cambia los colores del Label1.
Para ello escribimos Label.Style y ponemos una cadena de caracteres que establece su estilo.

Sub Button1_Action

Label1.Style = "-fx-font: bold italic 50pt Arial; -fx-effect: dropshadow(one-pass-box, blue, 8, 0.0, 2, 0); -fx-background-radius: 50; -fx-text-fill: green; -fx-background-color: #cc5522; "

End Sub

La cadena de caracteres debe ir en un solo renglón.

_____________________________

Podemos buscar en Internet estilos de controles, escribiendo en buscador: java fx style button

 

Nos saldrá páginas como esta:

- http://fxexperience.com/2011/12/styling-fx-buttons-with-css/ (Diversos estilo de botones)

Referencia: http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html

http://docs.oracle.com/javafx//scenebuilder/1/user_guide/stylesheet-support.htm

_________________________________________________________

3.- Otra manera es desde el mismo menú del JavaFX Scene Builder.

Nos situamos sobre un botón y pulsamos en Modify / Add Effect









Bloom = remarcado de color. Intenso.
Box Blur = Turbio, efecto movimiento.
Color Adjust = Saturación, brillo, contraste.
Displacement Map = Mapa desplazamiento.
Drop Shadow = Sombreado.
Gaussian Blur = Trubio.
Glow = Color vivo, intenso.
Inner Shado = Sombra interior.
Lighting = Cambiar color.
Motion Blur = Efecto movimiento.
Prespective Transform = En perpectiva.
Reflection = Reflejo.
Sepia Tone = Color sepia.
Shadow = Sombra.

Ponemos un efecto, por ejemplo un sombreado: Drop Shadow.

Luego en la parte derecha en Inspector / Properties podemos modificar el Efecto:

- Previsualización.

- Para ver cómo va quedando pulsamos en
Preview / Show Preview in Window


 

- Color de fondo del formulario

Preview / Choose Background Color...

Se puede poner degradado.

 

- Tooltip.

Editamos un botón, por ejemplo, y pulsamos en

Modify / App Popup Control / Tooltip

y luego escribimos un texto en Text: Comenzar partida.

Cuando ejecutamos la ventana y dejamos unos segundos el ratón sobre el botón, saldrá esa pequeña ayuda con fondo amarillo.

- Ver los códigos de efectos

En View / Show CSS Analyzer podemos ver los códigos de los elementos que hemos configurado.

- Plantillas

Es interesante echarle un vistazo a las plantillas.

File / New from Template

Nos creará en la carpeta Files de nuestro proyecto varios archivos:


y nos mostrará un formulario que podremos modificar.


- Hoja de estilo

Vamos a ver qué es una hoja de estilo, para ello vamos a cargar el Alert Dialog visto en el gráfico anterior.

File / New from Template / Alert Dialog

como he comentado anteriormente, en la carpeta Files se nos creará tres archivos.
Abrimos el AlertDialog.css con el WordPad (por ejemplo) y obtendremos la información de la derecha:

.button {
-fx-background-radius: 12;
-fx-padding: 5;
-fx-shadow-highlight-color: f0f0f0;
-fx-body-color: linear-gradient(from 0em 0em to 0em 2.083333em, white, #D7D7D7, white);
}

Esto quiere decir que los elementos que en su Style Class se llamen button, tendrán la configuración del archivo AlertDialog.css.

Vamos a la ventana. Edita los tres botones y verás que los tres tienen su Style Class en button, lo cual quiere decir que tendrán la configuración del archivo AlertDialog.css (.button)

Si cambiamos algo en el .button del archivo AlertDialog.css, lo estaremos cambiando en los tres botones.

Además cada botón puede llevar una configuración personalizada en su Style.

¿Dónde cargamos nuestro archivo de estilo para nuestro formulario?

Vamos Hierarchy. Nos situamos sobre el primer elemento, en este caso GridPane.

Luego en la parte de Properties consultamos en Stylesheets, observaremos el nombre del archivo AlertDialog.css.


De esta manera podremos ir creando nuevos botones, ponerle en su Style Class la palabra button y automáticamente tomarán la configuración .button del archivo AlertDialog.css

 

- Vamos a realizar esta prueba...

Modifica el archivo AlertDialog.css como indico...

.button {
-fx-background-radius: 12;
-fx-padding: 5;
-fx-shadow-highlight-color: f0f0f0;
-fx-body-color: linear-gradient(from 0em 0em to 0em 2.083333em, white, #D7D7D7, white);
}

.botoncito {
-fx-font: bold italic 50pt Arial;
-fx-text-fill: green;
-fx-background-color: #cc5522;
-fx-background-radius: 50;
-fx-effect: dropshadow(one-pass-box, blue, 8, 0.0, 2, 0);
}

- Ahora vamos al Style Class de cada botón, marcamos el signo + y elegimos botoncito.

Los botones cuyo Style Class le pongamos botoncito, cambiarán su aspecto.

En esta página tienes varios ejemplos de archivo de estilo.

_____________________

- Trucos

Para cambiar letras desde el código

'ListView1.Style="-fx-text-fill: green; -fx-Font-weight: regular;"

Para mostrar un documento

' fx.ShowExternalDocument(File.GetUri("C:\Android\Correo", "Archvo.txt"))

__________________________________

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información