Usando los esquema de colores del Tema Universal 42 en nuestros componentes personalizados

    May 23, 2017 6:33:47 PM by Clarisa Maman Orfali

    El Tema Universal utiliza un conjunto de colores (esquemas) entre los diferentes componentes. Estos colores se pueden agrupar en dos paletas: colores generales y colores con estado.

    Colores generales

    Los colores generales se utilizan para agregar color a varios componentes de la aplicación como gráficos, cards, carousel y más.

    Hay 15 colores primarios que se modifican para convertirse en más claros o más oscuros para crear un total de 45 opciones de color. Podemos personalizar estos colores modificando la paleta de colores dentro de Theme Roller.

    Colores Primarios

    Colores Primarios - Más Claros

    Colores Primarios - Más Oscuros

    Colores con Estado

    Los colores con estado se utilizan para transmitir significado adicional para un componente de interfaz de usuario dado. Por ejemplo, podemos elegir colorear una alerta de advertencia con un tinte amarillo.

    Hay 6 colores con estado: normal, hot, informativo, peligro, advertencia y éxito. Podemos personalizar estos colores modificando los colores de estado dentro de Theme Roller.

    Colores con Estado

    Utilidades de Colores Generales

    Mientras que muchos componentes del Tema Universal hacen uso de estos colores automáticamente, también podemos usarlos en varios componentes personalizados. El Tema Universal proporciona una serie de clases CSS que se pueden utilizar para aplicar esta paleta de colores a cualquier etiqueta HTML.

    Reglas CSS del Tema Universal 42:

    • Block: u-color-1                   
    • Text: u-color-1-text
    • Background: u-color-1-bg
    • Border: u-color-1-border

    La clase u-Color permite definir el esquema del color, hay definidas en el Tema Universal 42 una cantidad de 45 colores diferentes, el cual se definen del 1 al 45.

    Por ejemplo, vamos a crear una región de contenido estático, con la plantilla “Blank with Atributes” y en el origen colocamos el siguiente contenido HTML:

    <div>

    <h1>ORACLE APPLICATION EXPRESS 5.1</h1>

     <h3>Desarrolla</h3>

     <p> Utiliza nuestro moderno, intuitivo y poderoso entorno de desarrollo para construir e
    implantar aplicaciones rápidamente facilitando el desarrollo iterativo.</p>

    </div>

    Agregamos un Identificador estático llamado “miregiondemo” a la región para darle estilos CSS a la misma.

    En propiedades de la página, ingresamos en el sector de “CSS En Línea” las siguientes reglas CSS:

    #miregiondemo
    div {height:200px;}
    h1 {font-size: 2.5em;text-align:center; }
    h3 {font-size: 1.5em;text-align:center; }
    p {font-size: 1.2em;text-align:center; padding:5px 50px 5px 50px; }

    Ingresamos a la Región Demo en propiedades de la región, nos ubicamos en la sección Diseño y colocamos el siguiente CSS en “Clases CSS de Columna”:

    dm-ColorBlock u-Color-8-BG--bg u-Color-8-FG--txt

     

    Al ejecutar la página podremos ver que la región toma el color del esquema asociado según el Tema Universal.

     

    Como podemos ver en la imagen de colores primarios el 8 representa el color naranja.

    Si por ejemplo usamos este CSS: 

    dm-ColorBlock u-Color-10-BG--bg u-color-7-text

    Donde el color de fondo es 10 (rosado) y el color del texto es 7 (amarillo).

    Utilidades de Colores con Estado

    El Tema Universal ofrece 6 colores con estado: normal, hot, informativo, peligro, advertencia y éxito. Estas son las clases CSS que podemos usar para aplicar estos estados a nuestros propios controles de interfaz de usuario.

    Status

    Block

    Text

    Background

    Border

    Normal

    u-normal

    u-normal-text

    u-normal-bg

    u-normal-border

    Hot

    u-hot

    u-hot-text

    u-hot-bg

    u-hot-border

    Warning

    u-warning

    u-warning-text

    u-warning-bg

    u-warning-border

    Danger

    u-danger

    u-danger-text

    u-danger-bg

    u-danger-border

    Info

    u-info

    u-info-text

    u-info-bg

    u-info-border

    Success

    u-success

    u-success-text

    u-success-bg

    u-success-border

    Para conocer más sobre el Tema Universal les dejo una aplicación de referencia:

    https://apex.oracle.com/pls/apex/f?p=42:6000:::NO:::

    Gracias a los esquemas de colores predefinidos del Tema Universal podemos hacer eso de ellos en nuestos componentes personalizados.

    Tags: Oracle

    Clarisa Maman Orfali

    Written by Clarisa Maman Orfali

    Clarisa is from Argentina. She is Founder and Director at ClarTech Solutions, Inc. a company dedicated to the development, consultancy and training in Information Technologies located in Southern California in the United States. She is a Systems Engineer with more than 18 years of experience in systems development. She was introduced in Oracle Technologies in 2009, a few years later she discovered the great power of development with Oracle Application Express (APEX) and has specialized since then in that area. She is also Co-Founder of the Oracle Users Group of Argentina (AROUG) and founder of Oracle APEX Latin America meetup, has also actively participated in the organization and as Presenter of big and popular events such as the OTN Tour and the Oracle APEX Tour of Latin America. In 2014 was recognized by the Oracle Corporation with the Oracle ACE Award. Then, in March 2018, she was promoted to Oracle ACE Director. She is also the author of the first three books in Spanish about Oracle APEX: Published in June 30, 2017: "Oracle APEX 5.1" (Spanish Edition). You can get the book in Paperback version. Published in November 5, 2015: "Introducción a Oracle APEX 5.0" (Spanish Edition). You can get the book in Paperback version and Kindle version. Published In January 26, 2016: "Integración Sin Costo de JasperReports en Oracle APEX 5.0" (Spansih Edition). You can get the book in Paperback version and Kindle version.