Instructivo 3: Diseña tu aplicación

Widget de botón Habilidades básicas a intermedias de App Maker

access_time Aproximadamente 30 minutos

Qué compilarás

Compilarás una parte pequeña de una aplicación de seguimiento de proyectos. El objetivo no es tener una aplicación completamente funcional, sino aprender a diseñar aplicaciones. Un usuario de la aplicación puede realizar las siguientes acciones:

  • Crear registros de proyectos nuevos y, luego, ingresar los datos en ellos
  • Editar los registros de proyectos
  • Navegar entre los registros

Qué aprenderás

En este instructivo, aprenderás a realizar las siguientes acciones:

  • Diseñar la aplicación en el editor de App Maker sin usar las hojas de estilo en cascada (CSS). Selecciona un tema de estilo general y elige entre las variantes de estilo integradas de App Maker para los widgets.
  • Escribir el lenguaje de CSS en el editor de estilo para diseñar la aplicación. De manera opcional, usa las hojas de estilo externas. CSS proporciona un control total de la apariencia de la aplicación.

Preparación

Compila una parte pequeña de una aplicación de seguimiento de proyectos que diseñarás.

Crea tu aplicación

  1. Accede a la cuenta de G Suite que te proporcionó tu empleador o escuela.
  2. Abre App Maker.
  3. Crea una aplicación en blanco:
    • Si App Maker muestra el cuadro de diálogo de bienvenida, haz clic en Crear aplicación nueva (Create New App).
    • De lo contrario, haz clic en Menú (Menu) menu chevron_right Nueva (New) chevron_right Aplicación en blanco (Blank Application).
  4. Cambia el nombre de la aplicación. Borra el nombre predeterminado, Aplicación sin título (Untitled App) y, luego, ingresa Diseña tu aplicación.

Crea un modelo de datos

  1. Pasa el cursor sobre Datos (Data) y haz clic en add para agregar un modelo.
  2. Crea un modelo de datos de Google Cloud SQL. Asigna un nombre al modelo de datos ProjectData.

Agrega los campos al modelo de datos

  1. En la barra de herramientas de la pestaña para el modelo de datos ProjectData, haz clic en la pestaña Campos (Fields).
  2. Agrega estos campos al modelo de datos ProjectData:

    Nombre del campo Tipo de campo
    Project String
    Owner String
    DueDate Fecha

Cambia el nombre de la página para la IU y selecciona una fuente de datos

  1. Cambia el nombre NewPage a Proyectos.
  2. En el Editor de propiedades, configura la propiedad fuente de datos (datasource) para la página Proyectos como ProjectData.

Agrega un formulario de edición y una tabla

  1. Haz clic en Widgets  y arrastra un formulario Widget de formulario a la página. Selecciona Formulario de edición (Edit form).
  2. Desde Widgets , arrastra una tabla Widget de tabla a la página, debajo del formulario de edición. Alinea de manera horizontal los bordes izquierdos del formulario de edición y la tabla.
  3. Haz clic en Cerrar close para cerrar Widgets.

Obtén una vista previa de la aplicación

Antes de diseñar la aplicación, obtén una vista previa. La aplicación ahora usa las variantes de estilo predeterminadas para los widgets en el tema Material.

  1. En la esquina superior derecha, haz clic en Vista previa (Preview) para ejecutar la aplicación en una pestaña nueva del navegador.
  2. Haz clic en Permitir(Allow) para permitir que la aplicación use la información específica.

Diseña tu aplicación sin usar CSS

App Maker te permite diseñar la aplicación sin tener que escribir el lenguaje CSS. Puedes llevar a cabo las siguientes acciones:

  • Seleccionar un tema, un conjunto de estilos integrado para todos los widgets en la aplicación
  • Seleccionar entre un conjunto de variantes (variantes de estilo para cada tipo de widget). El tema predeterminado, Material, cuenta con una gran cantidad de variantes integradas. Por ejemplo, para un botón, puedes seleccionar entre los estilos que tienen diferentes colores de fondo. Para una etiqueta, puedes seleccionar entre los diferentes tamaños de fuente. Todos los widgets tienen una variante predeterminada

Selecciona un tema

App Maker cuenta con estos temas:

  • Material: un conjunto de estilos simples, pero elegantes, con una opción entre diversas variantes de estilo para cada tipo de widget. Puedes usar el tema Material tal cual está o puedes personalizarlo aún más.
  • Simple: un conjunto de estilos muy simples, con algunas opciones entre variantes de estilo. Si tienes experiencia en CSS y las vas a usar a fin de crear tus propios estilos para todos los widgets, podrías usar el tema Simple.

Cambia el tema de la aplicación:

  1. En la barra lateral izquierda, haz clic en la página Proyectos (Projects).
  2. En la barra de pestañas arriba del Editor de propiedades (Property Editor), selecciona Editor de estilos palette.
  3. Desde el menú desplegable de Tema (Theme), selecciona Simple (Plain). Ten en cuenta que los estilos que se usan en el formulario y la tabla son más simples. Para las etiquetas y los botones, solo existe una variante integrada.
  4. En este instructivo, usarás el tema Material. Desde la lista desplegable de Tema (Theme), selecciona Material.

Selecciona las variantes de estilo para los widgets específicos

Selecciona las variantes de estilo y observa los efectos:

  1. En la esquina inferior izquierda, haz clic en Mostrar contornos (Show outlines) para delinear los widgets. Cuando seleccionas las variantes, los widgets pueden desaparecer; por ejemplo, si un cuadro de texto blanco está en un panel blanco. Los contornos te permiten encontrar los widgets.
  2. Haz clic en el formulario Editar proyectos (Edit Projects). Asegúrate de seleccionar todo el formulario. El cuadro de selección azul debe rodear todo el formulario. En la pestaña Contorno, se debe seleccionar Panel: Form1.
  3. En la esquina superior izquierda, observa la lista desplegable de Variante (Variant) con la opción Papel (Paper) seleccionada.
  4. Desde la lista desplegable de Variante (Variant), selecciona Principal (Primary). Todo el formulario se vuelve azul. Observa que la etiqueta Editar proyecto (Edit project) pasó a ser blanca automáticamente. Este cambio automático no modificó la variante de la etiqueta. Observa que los widgets de Proyecto, Propietario y Fecha prevista no cambiaron automáticamente. (Puedes seleccionar la variante Dark para que esos widgets sean blancos. No lo hagas ahora).
  5. Haz clic en la etiqueta Editar proyectos (Edit Projects).
  6. Desde la lista desplegable de Variante (Variant), selecciona DisplayOne. Esto aumenta el tamaño de la etiqueta Editar proyectos (Edit Projects).
  7. Haz clic en el botón Crear (Create). Este es el widget en el extremo derecho de la etiqueta Editar proyectos (Edit Projects). No puedes ver el texto porque es azul sobre un fondo azul. Con el botón seleccionado, el último elemento de la ruta de navegación es Button: Form1CreateButton.
  8. En la lista desplegable de Variante (Variant), desplázate por las opciones de variante para los botones. Ten en cuenta que algunas variantes usan los íconos de Material. Selecciona la variante IconDark.
  9. Obtén una vista previa de la aplicación.
  10. Haz clic en Deshacer undo tres veces para deshacer los cambios de variantes.

Diseña tu aplicación con CSS

A continuación, aprenderás a usar CSS para diseñar la aplicación. Para diseñar la aplicación, puedes escribir los conjuntos de reglas de CSS. Por lo general, cuando desarrollas aplicaciones web, los selectores en los conjuntos de reglas hacen referencia a los elementos HTML. En App Maker, los selectores hacen referencia a los widgets, o usa las propiedades styleClasses para aplicar los conjuntos de reglas a los widgets.

Acerca de CSS

CSS consta principalmente de unidades de lenguaje denominadas conjuntos de reglas, que definen dónde aplicar los estilos y qué estilos aplicar.

Este es un ejemplo de un conjunto de reglas:

.app-Projects-Form1CreateButton {
      background-color: #B2FF59;
      color: #03A9F4;
    }
    

En un conjunto de reglas:

  • Uno o más selectores definen dónde aplicar el estilo. En el ejemplo anterior, el selector es .app-Projects-Form1CreateButton. Esto le indica a App Maker que debe aplicar los estilos al botón Form1CreateButton de la página Projects.
  • Las declaraciones definen los estilos que se van a aplicar. En el ejemplo anterior, las declaraciones establecen el color de fondo y el color.

Las hojas de estilo se organizan en cascada de tres maneras:

  • App Maker evalúa los conjuntos de reglas en orden descendente para los archivos CSS externos y el contenido del Editor de estilos. Si más de un selector aplica la misma declaración a un widget específico, las declaraciones en los conjuntos de reglas que están más debajo en un archivo CSS anulan las declaraciones que se encuentran por encima.

    Por ejemplo, en estos dos conjuntos de reglas, primero especifica que todos los botones son de color celeste y, luego, especifica que el botón Form1CreateButton es de color naranja. Por lo tanto, el botón Form1CreateButton button será de color naranja. El color del texto en todos los botones es gris oscuro. Ese color no se anula para el botón Form1CreateButton.

    .app-Button {
          background-color: #A1C2FA;
          color: #212121;
         }
        .app-Projects-Form1CreateButton {
          background-color: #FFB74D;
        }
        
  • App Maker evalúa los archivos CSS externos en el orden en que los agregas en la Configuración general.

  • App Maker evalúa el contenido del Editor de estilos en último lugar, después de evaluar los archivos CSS externos.

Crea una variante de estilo personalizada

Puedes crear variantes de estilo personalizadas para los tipos de widget; por ejemplo, si deseas brindar apariencias personalizadas de botones o paneles. Una vez que definas una variante personalizada, selecciónala desde la lista desplegable de Variante.

A continuación, se muestra la sintaxis de un selector de clase para una variante personalizada:

    .app-widget_type--widget_style
    

Observa el guion doble. Esto le indica a App Maker que lo que sigue es el nombre de la variante.

Por ejemplo:

.app-Button--Orange

Si deseas crear una variante de estilo personalizada para un tipo de widget:

  1. En la barra de pestañas que se encuentra sobre el Editor de propiedades (Property Editor), selecciona Editor de estilos (Style Editor) palette para abrirlo. Aquí es donde puedes crear una hoja de estilo CSS para el diseño de la aplicación. En algunos casos, la finalización de código se presenta mientras escribes. También puedes presionar Ctrl+Espacio para ver la finalización de código.

  2. Agrega una variante Orange para los botones. Copia y pega este código en el Editor de estilos:

    .app-Button--Orange {
          background-color: #FFB74D;
        }
        
  3. En la aplicación, haz clic en el botón Crear (Create).

  4. En la lista desplegable de Variante (Variant), selecciona la variante Orange. El botón Crear (Create) se vuelve naranja.

  5. Desde la lista desplegable de Variante (Variant), selecciona la variante FlatColor.

    Sugerencia: Como una alternativa a la creación de una variante personalizada, puedes anular una variante existente. Por ejemplo, agrega un conjunto de reglas con el selector .app-Button--Icon y especifica un color de fondo diferente para los botones (por ejemplo, turquesa):

    .app-Button--Icon {
          background-color: #4DD0E1;
        }
        

    Todos los botones para los que seleccionas la variante Icon tendrán un color de fondo turquesa.

Diseña un widget específico con una propiedad de estilos

La propiedad styles de los widgets es una manera fácil de aplicar uno o más estilos a un widget específico. En el value de la propiedad styles, deber hacer referencia a los conjuntos de reglas de CSS por nombre de clase. Puedes definir los estilos en el Editor de estilos, en las hojas de estilo externas o en ambos.

  1. Agrega los conjuntos de reglas para los estilos en el Editor de estilos. Proporciona nombres de clase de estilos que no diseñan partes de la aplicación directamente (es decir, que no hacen referencia a app-). Por ejemplo, agrega estos conjuntos de reglas de CSS:

    .Green {
          background-color: #0F9D58;
          border-style: double;
          border-width: 4px;
          border-color: #000000;
          border-radius: 7px;
        }
        .Border {
          border: 4px solid #000000;
          box-shadow: 5px 5px 10px #BDBDBD;
          margin: 15px;
        }
        
  2. Selecciona el widget que deseas diseñar. En el formulario de edición, haz clic en el botón Crear (Create).

  3. Como valor de la propiedad estilos (styles), ingresa los nombres de clase de los estilos que deseas aplicar (separados por espacios):

    1. En el Editor de propiedades (Property Editor) edit, expande la sección Mostrar (Display). Deberías ver el valor ya seleccionado junto al ícono de la lista desplegable arrow_drop_down.
    2. En la propiedad estilos (styles), ingresa los nombres de clase Verde (Green) y Borde (Border).

Usa las hojas de estilo externas

Puedes usar las hojas de estilo externas para diseñar los widgets. Al igual que en el Editor de estilos, las hojas de estilo externas deben contener conjuntos de reglas de CSS que apliquen los estilos a los widgets, o que tú apliques a los widgets con las propiedades styleClasses de estos. Las hojas de estilo externas con conjuntos de reglas que aplican estilos a los elementos HTML no diseñarán los widgets de App Maker.

Una hoja de estilo externa debe estar ubicada en una URL a la que App Maker pueda acceder en Google Cloud. Proporciona la URL en la configuración general. Por ejemplo, puedes proporcionar la URL de un archivo CSS para una fuente de Google:

https://fonts.googleapis.com/css?family=Roboto+Condensed:regular,bold

Coloca una hoja de estilo en una URL en Google Cloud

Si el archivo CSS ya no está en Google Cloud, App Maker proporciona una manera fácil de colocarlo allí:

  1. En un administrador de archivos, localiza el archivo CSS.
  2. En App Maker, haz clic en Configuración (Settings) settings chevron_right Recursos (Resources).
  3. Arrastra el archivo de texto al área Agregar add.
  4. Haz clic en Copiar URL de recurso content_copy.
  5. Haz clic en Configuración (Settings) settings Configuración general (General settings).
  6. En las URL de CSS (CSS URLs), pega la URL de recurso y haz clic en Agregar CSS (Add CSS).
  7. Para obtener más archivos CSS, repite los pasos 2 a 6.

Agrega una referencia de la aplicación a una hoja de estilo

Para usar una hoja de estilo externa ubicada en una URL en Google Cloud:

  1. Obtén la URL de recurso del archivo CSS.
  2. Haz clic en Configuración (Settings) settings chevron_right Configuración general (General settings).
  3. En las URL de CSS (CSS URLs), pega la URL de recurso y haz clic en Agregar CSS (Add CSS).
  4. Para obtener más archivos CSS, repite los pasos 1 a 3.

Próximos pasos