Buen día Guillermo, primero muchas gracias por acudir a este foro y confiarnos la respuesta de tu pregunta.
Entiendo perfectamente a lo que te refieres, a primera vista puede parecer como que no se tienen tantas libertades al trabajar con las hojas de estilo y de scripts en profoundUI, pero en realidad es bastante intuitivo.
Primero hay que tener en cuenta que ProfoundUI ofrece diferentes widgets predefinidos para que el usuario pueda trabajar de la manera más cómoda e intuitiva posible, debido a esta misma filosofía cuenta también con estilos predefinidos (como bien mencionas) que pueden interferir cuando uno trabaja con sus propias clases de CSS.
En segunda instancia la aplicación también facilita la asignación de scripts al otorgarle a cada widget opciones de interacción como on mouse over, on mouse out, on click, on active, etc. Por este motivo se deben usar estos campos para mandar a llamar las funciones que se construyan en la hoja de JS externa.
A continuación, un tutorial detallado:
PARA AGREGAR CLASES CSS:
- Agregar la hoja de estilos a la pantalla con la que esté trabajando. Esto se logra dando clic en un punto de la pantalla donde no haya ningún widget, saldrá en el panel de atributos del lado derecho de la pantalla en la sección "External Files". (Imagen 1)
- Ahora agregamos un widget cualquiera, en este caso usaremos un CSS Panel, hacemos clic sobre él y en sus propiedades buscamos "css class" y damos clic en los 3 puntos con fondo gris que muestra la opción para desplegar el menú de clases. (Imagen 2)
- Dentro del menú* filtraremos por "estilos hechos por el usuario (User Style Only)" y seleccionaremos alguna de las clases que hayamos definido dentro de nuestra hoja CSS, en este caso yo elegiré la llamada "custom-header" y seleccionamos en "Select"**. (Imagen 3)
*Nota 1: Este paso también lo podremos realizar escribiendo el nombre de la clase en el espacio en blanco del atributo. (Imagen 4)
**Nota 2: dependiendo de la resolución de nuestra pantalla la opción select puede no aparecer dentro del margen, para solucionarlo bastará con presionar "F11" para poner la pestaña del navegador en pantalla completa.
- Ahora podremos notar que, aparentemente, nada ha cambiado. Esto se debe a que el widget ya tiene seleccionado por default uno de los temas prediseñados de ProfoundUI, para corregirlo simplemente buscaremos en atributo "Theme", pulsaremos en "Other" y ahí escribiremos el nombre de la clase que acabamos de seleccionar. (Imagen 5)
- Todo listo, nuestro estilo se aplicó al "body" del widget seleccionado. (Imagen 6)
PARA AGREGAR SCRIPTS:
- Agregar la hoja de js a la pantalla con la que esté trabajando. Esto se logra dando clic en un punto de la pantalla donde no haya ningún widget, saldrá en el panel de atributos del lado derecho de la pantalla en la sección "External Files". (Imagen 1)
- Para este ejemplo usaré otro CSS Panel con un estilo de círculo el cual usaremos para controlar un menú que se despliega y se repliega desde él. En la (Imagen 7) se muestra el CSS que se empleará y en la (Imagen 8) cómo debe escribirse el script en nuestra hoja JS.
- Notaremos que se deben hacer dos funciones, una para replegarlo y otra para desplegarlo, esto es porque usaremos un evento de interacción diferente para llamar a cada acción desde la lista de atributos del elemento "on mouse over" para desplegarlo y "on mouse out" para replegarlo. Una vez codificada la hoja JS bastará con mandar a llamar la función dentro del recuadro en blanco del atributo del elemento correspondiente. (Imagen 9)
- Por último, para ver el cambio debemos compilar el programa y desplegar una sesión de ProfoundUI para poder ver los cambios. (Imagen 10)
LINK PARA CONSULTAR LAS IMÁGENES: https://www.timware.com.mx/wp-content/uploads/2024/09/Tutorial_ProfoundUI_CSS_JS.pdf
Eso sería todo respecto a tu duda, saludos cordiales Guillermo, quedamos al pendiente.
-Timware
This post was modified 7 meses antes by
Juan Carlos Rodríguez
Publicado : 17/09/2024 11:29 pm