screen

El componente screen actúa como el contenedor principal de una pantalla en una aplicación. Proporciona la estructura principal de la interfaz de usuario y debe contener otros componentes como meta, body, footer, fetch, y state.

Jerarquía

El componente screen sigue una jerarquía específica:

meta: Opcional. Define información relacionada con el título y otros metadatos.
body: Obligatorio. Contiene el contenido principal de la pantalla.
footer: Opcional. El pie de página de la pantalla, generalmente colocado al final.
fetch: Opcional. Uno o más componentes que permiten obtener datos de una API.
state: Opcional. Define los estados que se manejarán dentro de la screen.

Props

scroll

Tipo: boolean
Descripción: Indica si la pantalla soporta o no desplazamiento.
Valores posibles: true | false
Ejemplo:

Example

<screen scroll="true">
  <meta>
    <header>Screen Example</header>
  </meta>
  <body>
    <box>
      <text style="font-size=18; color=#333333">Bienvenido a la Aplicación</text>
    </box>
  </body>
  <footer style="backgroundColor: '#000'">
    <text style="color: '#fff'; textAlign: 'center'">Footer</text>
  </footer>
  <fetch uri="https://site.com/restaurants" method="get" targetType="list" target="listRestaurant" name="getRestaurant" />
  <device action="get" type="location" targetType="fetch" target="getRestaurant" />
  <state name="firstName" defaultValue="" />
</screen>

Mejores Prácticas

Asegúrate de utilizar solo un componente body dentro de screen.
Puedes usar varios componentes fetch para obtener diferentes datos, pero asegúrate de definir correctamente los estados.
Organiza los states y fetch en lugares donde no interfieran con el flujo de la UI.