From f750147b337822797111d262424a6498a3638aa7 Mon Sep 17 00:00:00 2001 From: Cesar Casas Date: Thu, 15 Aug 2024 18:08:46 -0300 Subject: [PATCH] finish version 1 --- 404.html | 8 +-- assets_astro/hoisted.BU0jIxWl.js | 2 + assets_astro/index.BgxL-5t2.css | 1 + assets_astro/ui-core.D6P_caNv.js | 2 + .../index.html | 50 +++++++++++++ guides/sdui-react-native/index.html | 59 +++++++++++++++ index.html | 10 +-- pagefind/fragment/en_1f39ae9.pf_fragment | Bin 0 -> 1056 bytes pagefind/fragment/en_22c136c.pf_fragment | Bin 0 -> 1529 bytes pagefind/fragment/en_26f5564.pf_fragment | Bin 0 -> 489 bytes pagefind/fragment/en_2d7423f.pf_fragment | Bin 0 -> 538 bytes pagefind/fragment/en_41a81e2.pf_fragment | Bin 0 -> 233 bytes pagefind/fragment/en_4bfa8ed.pf_fragment | Bin 0 -> 677 bytes pagefind/fragment/en_50c655a.pf_fragment | Bin 0 -> 348 bytes pagefind/fragment/en_54cfb83.pf_fragment | Bin 0 -> 714 bytes pagefind/fragment/en_7a5fe51.pf_fragment | Bin 0 -> 381 bytes pagefind/fragment/en_7a7d585.pf_fragment | Bin 0 -> 1145 bytes pagefind/fragment/en_7f5c903.pf_fragment | Bin 0 -> 596 bytes pagefind/fragment/en_83b8df4.pf_fragment | Bin 0 -> 646 bytes pagefind/fragment/en_84eddc7.pf_fragment | Bin 0 -> 427 bytes pagefind/fragment/en_91a43a8.pf_fragment | Bin 0 -> 1705 bytes pagefind/fragment/en_a0de565.pf_fragment | Bin 0 -> 577 bytes pagefind/fragment/en_b843761.pf_fragment | Bin 0 -> 629 bytes pagefind/fragment/en_bdf9f1a.pf_fragment | Bin 0 -> 849 bytes pagefind/fragment/en_beb55c2.pf_fragment | Bin 0 -> 420 bytes pagefind/fragment/en_f0cd6e2.pf_fragment | Bin 0 -> 1286 bytes pagefind/fragment/en_f3c2cce.pf_fragment | Bin 0 -> 422 bytes pagefind/fragment/en_f3c6532.pf_fragment | Bin 0 -> 1802 bytes pagefind/fragment/en_f9f2528.pf_fragment | Bin 0 -> 545 bytes pagefind/index/en_47e5456.pf_index | Bin 0 -> 17241 bytes pagefind/pagefind-entry.json | 2 +- pagefind/pagefind.en_7fd3a0618f.pf_meta | Bin 0 -> 261 bytes reference/customcomponents/import/index.html | 17 +++-- reference/index.html | 12 ++-- reference/logic/action/index.html | 29 +++++--- reference/logic/device/index.html | 65 +++++++++++++++++ reference/logic/fetch/index.html | 67 ++++++++++++++++++ reference/logic/state/index.html | 56 +++++++++++++++ reference/ui/activityindicator/index.html | 23 +++--- reference/ui/box/index.html | 18 +++-- reference/ui/flatlist/index.html | 52 +++++++++++--- reference/ui/icon/index.html | 25 ++++--- reference/ui/image/index.html | 40 ++++++++--- reference/ui/list/index.html | 41 ++++++++--- reference/ui/listitem/index.html | 20 +++--- reference/ui/modal/index.html | 24 ++++--- reference/ui/picker/index.html | 24 ++++--- reference/ui/pickeritem/index.html | 50 +++++++++++++ reference/ui/screen/index.html | 22 +++--- reference/ui/switch/index.html | 34 ++++++--- reference/ui/text/index.html | 25 ++++--- reference/ui/textinput/index.html | 40 ++++++----- sitemap-0.xml | 2 +- 53 files changed, 642 insertions(+), 178 deletions(-) create mode 100644 assets_astro/hoisted.BU0jIxWl.js create mode 100644 assets_astro/index.BgxL-5t2.css create mode 100644 assets_astro/ui-core.D6P_caNv.js create mode 100644 guides/s42ui-fetch-api-and-show-in-list/index.html create mode 100644 guides/sdui-react-native/index.html create mode 100644 pagefind/fragment/en_1f39ae9.pf_fragment create mode 100644 pagefind/fragment/en_22c136c.pf_fragment create mode 100644 pagefind/fragment/en_26f5564.pf_fragment create mode 100644 pagefind/fragment/en_2d7423f.pf_fragment create mode 100644 pagefind/fragment/en_41a81e2.pf_fragment create mode 100644 pagefind/fragment/en_4bfa8ed.pf_fragment create mode 100644 pagefind/fragment/en_50c655a.pf_fragment create mode 100644 pagefind/fragment/en_54cfb83.pf_fragment create mode 100644 pagefind/fragment/en_7a5fe51.pf_fragment create mode 100644 pagefind/fragment/en_7a7d585.pf_fragment create mode 100644 pagefind/fragment/en_7f5c903.pf_fragment create mode 100644 pagefind/fragment/en_83b8df4.pf_fragment create mode 100644 pagefind/fragment/en_84eddc7.pf_fragment create mode 100644 pagefind/fragment/en_91a43a8.pf_fragment create mode 100644 pagefind/fragment/en_a0de565.pf_fragment create mode 100644 pagefind/fragment/en_b843761.pf_fragment create mode 100644 pagefind/fragment/en_bdf9f1a.pf_fragment create mode 100644 pagefind/fragment/en_beb55c2.pf_fragment create mode 100644 pagefind/fragment/en_f0cd6e2.pf_fragment create mode 100644 pagefind/fragment/en_f3c2cce.pf_fragment create mode 100644 pagefind/fragment/en_f3c6532.pf_fragment create mode 100644 pagefind/fragment/en_f9f2528.pf_fragment create mode 100644 pagefind/index/en_47e5456.pf_index create mode 100644 pagefind/pagefind.en_7fd3a0618f.pf_meta create mode 100644 reference/logic/device/index.html create mode 100644 reference/logic/fetch/index.html create mode 100644 reference/logic/state/index.html create mode 100644 reference/ui/pickeritem/index.html diff --git a/404.html b/404.html index d3ccf24..9cc6dd9 100644 --- a/404.html +++ b/404.html @@ -1,4 +1,4 @@ - 404 | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
S42UI - The Next-Gen Server Driven UI for React Native
+ Skip to content
S42UI - Server Driven UI for React Native
+ + Skip to content
S42UI - Server Driven UI for React Native

S42UI - fetch de data y uso de Listas

<screen scroll="true" paddingHorizontal="16">
  <meta>
    <title>Home</title>
  </meta>
  <body>
     <box style="padding='10'; flexDirection='row'; justifyContent='space-between'">
      <text>Hidratar desde frontend</text>
      <action >
      <virtuallist id="personajes" key="{{item.id}}">
        <listitem>
          <box shadow="16">
            <image uri="{{item.image}}" />
            <text>{{item.name}}</text>
            <text>{{item.ki}}</text>
            <text>{{item.description}}</text>
          </box>
        </listitem>
      </virtuallist>
    </box>
  </body>
  <fetch uri="https://dragonball-api.com/api/characters" method="get" target="personajes" name="getCharacters" />
</screen>
\ No newline at end of file diff --git a/guides/sdui-react-native/index.html b/guides/sdui-react-native/index.html new file mode 100644 index 0000000..53d32ac --- /dev/null +++ b/guides/sdui-react-native/index.html @@ -0,0 +1,59 @@ + Mi Primer Aplicación con S42UI y React Native + Expo | S42UI - Server Driven UI for React Native + + Skip to content
S42UI - Server Driven UI for React Native

Mi Primer Aplicación con S42UI y React Native + Expo

Debemos crear una aplicación en Expo, y agregar el siguiente código.

+
import { usePathname } from 'expo-router'
import { Text } from 'react-native'

+
import {
  useFetchScreen,
  S42ScreenBuilder,
  ErrorScreen,
  LoadingScreen,
} from '@/s42ui-react-native'

+
type TypeContacts = [{ firstName: string; lastName: string }]

+
const customFunctionMapper = {
  searchContacts: (contacts: TypeContacts) => {
    return contacts.filter(contact => contact.firstName === 'best')
  },
}

+
export default function NotFoundScreen() {
  const pathname = usePathname()
  const [loading, screen, error] = useFetchScreen(pathname)

+
  if (loading) {
    return <LoadingScreen />
  }

+
  if (error) {
    return <ErrorScreen />
  }

+
  if (!loading && !screen) {
    return <Text>Not Found</Text>
  }

+
  return (
    <>
      <S42ScreenBuilder
        screen={screen}
        customFunctionMapper={customFunctionMapper}
      />
    </>
  )
}
\ No newline at end of file diff --git a/index.html b/index.html index 4b30b99..4ada3a5 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - S42UI - Server Drive UI for React Native | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
S42UI - The Next-Gen Server Driven UI for React Native
+ Skip to content
S42UI - Server Driven UI for React Native
+ - Skip to content
S42UI - The Next-Gen Server Driven UI for React Native
+ Skip to content
S42UI - Server Driven UI for React Native

import

\ No newline at end of file +

import

El component import permite cargar via url otro component.

+

Props

+

url

+

La URL desde la cual se importará el componente.

+

Example

+
<screen>
<body>
  <box>
    <import url="https://mi-servidor.com/componentes/headerMenu.xml" />
  </box>
</body>
</screen>
\ No newline at end of file diff --git a/reference/index.html b/reference/index.html index f25c6cd..2a4005d 100644 --- a/reference/index.html +++ b/reference/index.html @@ -1,4 +1,4 @@ - S42UI Documentación | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
S42UI - The Next-Gen Server Driven UI for React Native
+ Skip to content
S42UI - Server Driven UI for React Native

S42UI Documentación

Guia de referencia SDUI

S42UI es un lenguaje basado en XML diseñado para definir componentes, pantallas, o incluso aplicaciones completas que se ejecutan en un entorno móvil utilizando Expo y React Native. La idea central es permitir la creación de aplicaciones móviles 100% configurables desde un servidor remoto, donde los archivos XML definen la UI y la lógica de la aplicación. La librería s42ui-react-native será la encargada de interpretar estos archivos XML y construir la interfaz de usuario en tiempo real. -A contienuación veremos los distintos componentes disponibles para construir nuestras aplicaciones.

\ No newline at end of file +A contienuación veremos los distintos componentes disponibles para construir nuestras aplicaciones.

\ No newline at end of file diff --git a/reference/logic/action/index.html b/reference/logic/action/index.html index 900b07d..3276aab 100644 --- a/reference/logic/action/index.html +++ b/reference/logic/action/index.html @@ -1,4 +1,4 @@ - action | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
S42UI - The Next-Gen Server Driven UI for React Native
+ Skip to content
S42UI - Server Driven UI for React Native

action

Props

+

action

El component action permite crear una zona interactiva.

+

Props

+

type

    -
  • onPress: Function to handle press events.
    • -
  • style: Custom styles for the component.
    • -
\ No newline at end of file +
  • fetch: indica que deberá ejecutar un fetch (se debe declarar el mismo)
    • +
  • goBack: indica que queremos volver a la pantalla anterior
    • +
  • showModal: muestra o oculta un modal (si está visible, lo oculta)
    • +
  • state: indica que asignaremos un valor a un state
    • +
  • customFunction: indica que debemos ejecutar una function creada en el código del dispositivo.
    • + +

    target

    +

    Define el nombre del target de la acción. Puede ser el nombre de un fetch, un state, un modal, etc.

    +

    value

    +

    Valor que se utilizará para asignar a un state

    +

    Example

    +
    <screen>
      <body>
        <action type="fetch" target="getRestaurant">
          <text>Mostrar todos los restaurantes</text>
        </action>
        <list name="listRestaurants">
          <listitem>
              <box shadow="24" borderWidth="1" padding="4" borderColor="transparent">
                <link to="/restaurant.xml?id={{item.id}}">
                  <text>{{item.restaurantName}}</text>
                  <image
                    uri="{{item.image}}"
                    width="120"
                    height="100"
                    style="borderWidth='0'; borderColor='#000000'; borderRadius: 20"
                    blurRadius="0"
                    resizeMode="cover"
                  />
                </link>
              </box>
            </listitem>
        </list>
      <body>
      <fetch uri="https://site.com/restaurants" method="get" targetType="list" target="listRestaurant" name="getRestaurant" />
    </screen>
    \ No newline at end of file diff --git a/reference/logic/device/index.html b/reference/logic/device/index.html new file mode 100644 index 0000000..44e94f5 --- /dev/null +++ b/reference/logic/device/index.html @@ -0,0 +1,65 @@ + device | S42UI - Server Driven UI for React Native + + Skip to content
    S42UI - Server Driven UI for React Native

    device

    props

    +

    name

    +

    indica el nombre que le asignaremos a ese tag device

    +

    type

    +
      +
    • location: queremos obtener la ubicación del dispositivo
      • +
    • contacts: queremos acceder a la lista de contactos del dispositivo
      • +
    +

    targetType

    +
      +
    • fetch: indica que deberá ejecutar un fetch (se debe declarar el mismo). Se enviará el resultado por body
      • +
    • state: indica que asignaremos un valor a un state
      • +
    • customFunction: indica que debemos ejecutar una function creada en el código del dispositivo.
      • +
    +

    Example

    +
    <screen>
      <device action="get" type="location" targetType="fetch" target="getRestaurant" />
      <device action="get" type="contacts" targetType="customFunction" target="searchTheBestContact" />
    </screen>
    \ No newline at end of file diff --git a/reference/logic/fetch/index.html b/reference/logic/fetch/index.html new file mode 100644 index 0000000..f48c0c9 --- /dev/null +++ b/reference/logic/fetch/index.html @@ -0,0 +1,67 @@ + fetch | S42UI - Server Driven UI for React Native + + Skip to content
    S42UI - Server Driven UI for React Native

    fetch

    El component fetch almacena en una lista de “llamadas a endpoints” un request con los parámetros que le indiquemos.

    +

    params

    +
      +
    • name: el nombre con el que se almacenará el fetch dentro de la lista de fetch disponibles
      • +
    • uri: la url de destino
      • +
    • method: es el método http enum(‘get’, ‘post’, ‘patch’, ‘put’, ‘delete’)
      • +
    • targetType: indica el tipo de target cuando el fetch termina. +
        +
      • state: indica que el resultado se almacenará en un state component
        • +
      • flatlist: indica que se almacenará en una flatlist para ser visualizado.
        • +
      • list: indica que se almacenará en una lista tradicional, para ser visualizado.
        • +
      +
      • +
    • target: indica el nombre del targetType.
      • +
    • targetValue: indica que el valor que recibirá el target será reemplazado por este nuevo valor, y no por el resultado del fetch.
      • +
    +

    Example

    +
    <screen>
      <fetch uri="https://site.com/restaurants" method="get" targetType="list" target="listRestaurant" name="getRestaurant" />
      <fetch uri="https://site.com/restaurants" method="post" targetType="state" target="createdRestaurant" targetValue="true" />
    </screen>
    \ No newline at end of file diff --git a/reference/logic/state/index.html b/reference/logic/state/index.html new file mode 100644 index 0000000..a2c8d85 --- /dev/null +++ b/reference/logic/state/index.html @@ -0,0 +1,56 @@ + state | S42UI - Server Driven UI for React Native + + Skip to content
    S42UI - Server Driven UI for React Native

    state

    Este component permitirá crear una estado (variable) en la pantalla, el cual podremos referenciar tanto para lectura como escritura por medio de un nombre.

    +

    Props

    +

    name

    +

    Indica el nombre del state

    +

    defaultValue

    +

    Indica el valor por default del state

    +
    <screen>
      <body>
        <box>
          <textinput target="firstName"/>
          <text>Hola {{firstName}}</text>
        </box>
      </body>
      <state name="firstName" defaultValue="" />
    <screen>
    \ No newline at end of file diff --git a/reference/ui/activityindicator/index.html b/reference/ui/activityindicator/index.html index ab0168a..1b03fa4 100644 --- a/reference/ui/activityindicator/index.html +++ b/reference/ui/activityindicator/index.html @@ -1,4 +1,4 @@ - activityindicator | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
    S42UI - The Next-Gen Server Driven UI for React Native
    + Skip to content
    S42UI - Server Driven UI for React Native

    activityindicator

    Props

    -
      -
    • size: The size of the spinner (e.g., small, large).
      • -
    • color: The color of the spinner.
      • -
    \ No newline at end of file +

    activityindicator

    El componente activityindicator se utiliza para indicarle al usuario que hay un proceso en curso

    +

    Props

    +

    size

    +

    Enum (‘small’, ‘large’)

    +

    color

    +

    Establece el color del indicador de carga utilizando valores en formato hexadecimal (ej: #AA12FF)

    +

    Example

    +
    <screen>
      <body>
        <box>
          <activityindicator size="large" color="#AA12FF" />
        </box>
      </body>
    </screen>
    \ No newline at end of file diff --git a/reference/ui/box/index.html b/reference/ui/box/index.html index b199144..baa0864 100644 --- a/reference/ui/box/index.html +++ b/reference/ui/box/index.html @@ -1,4 +1,4 @@ - box | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
    S42UI - The Next-Gen Server Driven UI for React Native
    + Skip to content
    S42UI - Server Driven UI for React Native

    box

    En S42UI para poder mostrar contenido, hay que agruparlos dentro de boxes (cajas). -Se comportan de la misma forma que los view en React Native. -Un box siempre debe estar contenido dentro del component body.

    +

    box

    El componente box actúa como un contenedor. Similar a los view en React Native, box permite agrupar elementos, aplicando estilos personalizados que definen cómo se presentan y comportan. Es fundamental para estructurar la interfaz de usuario, ofreciendo opciones de personalización como sombras, bordes, rellenos y alineación. Un box siempre debe estar contenido dentro del componente body para garantizar su correcto funcionamiento en la estructura de la aplicación.

    Props

    shadow

    Indica el nivel de sombra que queremos aplicar a nuestro box

    @@ -82,5 +80,5 @@

    style

  • flex: number
  • margin: margen
    • -

    Example

    -
    <box shadow="24" style="borderWidth='1'; padding='4'; borderColor='transparent'">
      <link to="/productDetail.xml?id=2">
        <image
          uri="https://http2.mlstatic.com/D_NQ_NP_665877-MLA74913737478_032024-O.webp"
          width="100"
          height="100"
          style="borderWidth='0'; borderColor='#000000'; borderRadius: 20"
          blurRadius="0"
          resizeMode="cover"
        />
      </link>
    </box>
    \ No newline at end of file +

    Ejemplo

    +
    <screen>
      <body>
        <box shadow="24" style="borderWidth='1'; padding='4'; borderColor='transparent'">
          <link to="/productDetail.xml?id=2">
            <image
              uri="https://http2.mlstatic.com/D_NQ_NP_665877-MLA74913737478_032024-O.webp"
              width="100"
              height="100"
              style="borderWidth='0'; borderColor='#000000'; borderRadius: 20"
              blurRadius="0"
              resizeMode="cover"
            />
          </link>
        </box>
      </body>
    </screen>
    \ No newline at end of file diff --git a/reference/ui/flatlist/index.html b/reference/ui/flatlist/index.html index ae668dd..426baff 100644 --- a/reference/ui/flatlist/index.html +++ b/reference/ui/flatlist/index.html @@ -1,4 +1,4 @@ - flatlist | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
    S42UI - The Next-Gen Server Driven UI for React Native
    + Skip to content
    S42UI - Server Driven UI for React Native

    flatlist

    Props

    +

    flatlist

    El componente flatlist es ideal para mostrar listas largas de datos de forma eficiente. Diseñado para manejar grandes volúmenes de datos, flatlist renderiza solo los elementos visibles y algunos adicionales para optimizar el rendimiento de la aplicación. Esto lo convierte en una opción perfecta cuando necesitas mostrar listas de datos dinámicos, como productos, mensajes, o cualquier otro tipo de contenido que requiera desplazamiento. +Solo puede contener un único listitem que se repetirá por cada valor del array de data. +Dentro del listitem se podrá acceder a cada elemento del array por medio de la prop item.

    +

    Props

    +

    data

    +

    El array de datos que se va a renderizar. Debe ser un array de JavaScript (JSON) convertido a String.

    +

    style

      -
    • data: The data array to be rendered.
      • -
    • renderItem: Function that defines how each item is rendered.
      • -
    • keyExtractor: Function to generate unique keys for each item.
      • -
    \ No newline at end of file +
  • backgroundColor: hexadecimal con el color de fondo.
    • +
  • borderBottomColor: hexadecimal con el color del border inferior.
    • +
  • borderRadius: indica el radio de los borders
    • +
  • borderBottomEndRadius: indica el número de radio que se debe aplicar al borde inferior
    • +
  • borderBottomLeftRadius: indica el número de radio que se debe aplicar al borde inferior izquierdo
    • +
  • borderBottomRightRadius: indica el número de radio que se debe aplicar al borde inferior derecho
    • +
  • borderBottomWidth: indica el tamaño del borde inferior
    • +
  • borderWidth: indica el ancho del borde
    • +
  • borderColor: indica el color del border en hexadecimal
    • +
  • borderRightColor: indica el color del borde derecho
    • +
  • borderRightWidth: indica el ancgi del borde derecho
    • +
  • borderStyle: indica el tipo de borde. enum(‘solid’, ‘dotted’, ‘dashed’)
    • +
  • padding: indica la distancia entre el borde del box y los elementos contenidos.
    • +
  • paddingHorizontal: indica la distancia horizontal del box y los elementos contenidos.
    • +
  • paddingVertical: indica la distancia vertical del box y los elementos contenidos.
    • +
  • border: indica la distancia entre el box y los elementos al rededor
    • +
  • margin: margen
    • + +

    key

    +

    Función para generar claves únicas para cada elemento.

    +

    horizontal

    +

    boolean que indica si la lista es horizontal

    +

    numColumns

    +

    el número de columnas a utilizar cuando la lista está con horizoltal="false"

    +

    Example

    +

    Hidratación desde el server

    +
    <screen>
      <body>
        <box>
          <flatlist
            data="[{'id': '1', 'name': 'Goku', 'image': 'https://dragonball-api.com/characters/goku_normal.webp', 'ki': '60.000.000', 'Affiliation': 'Z Fighter'}]"
            key="id"
            >
            <listitem>
              <box shadow="16">
                <image uri="{{item.image}}" />
                <text>Nomre: {{item.name}}</text>
                <text>Base KI: {{item.ki}}</text>
                <text>Affiliation: {{item.Affiliation}}</text>
              </box>
            </listitem>
          </flatlist>
        </box>
      </body>
    </screen>
    +

    Example

    +

    Hidratación desde frontend

    +
    <screen scroll="true" paddingHorizontal="16">
      <meta>
        <title>Home</title>
      </meta>
      <body>
         <box style="padding='10'; flexDirection='row'; justifyContent='space-between'">
          <text>Hidratar desde frontend</text>
          <action >
          <virtuallist id="personajes" key="{{item.id}}">
            <listitem>
              <box shadow="16">
                <image uri="{{item.image}}" />
                <text>{{item.name}}</text>
                <text>{{item.ki}}</text>
                <text>{{item.description}}</text>
              </box>
            </listitem>
          </virtuallist>
        </box>
      </body>
      <fetch uri="https://dragonball-api.com/api/characters" method="get" target="personajes" name="getCharacters" />
    </screen>
    \ No newline at end of file diff --git a/reference/ui/icon/index.html b/reference/ui/icon/index.html index c9c1846..1c03bfc 100644 --- a/reference/ui/icon/index.html +++ b/reference/ui/icon/index.html @@ -1,4 +1,4 @@ - icon | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
    S42UI - The Next-Gen Server Driven UI for React Native
    + Skip to content
    S42UI - Server Driven UI for React Native

    icon

    Expo Vector Icons

    +

    icon

    El componente icon se utiliza para mostrar un ícono gráfico que puede personalizarse según la familia de fuente, el nombre, el tamaño y el color. Este componente es versátil y se adapta a múltiples contextos de diseño, permitiendo que el desarrollador seleccione íconos de una amplia variedad de bibliotecas compatibles.

    +

    Expo Vector Icons

    Props

    -
      -
    • name: The name of the icon.
      • -
    • size: The size of the icon.
      • -
    • color: The color of the icon.
      • -
    \ No newline at end of file +

    name

    +

    El nombre del ícono a mostrar.

    +

    size

    +

    Valor entero que indica el tamaño del ícono

    +

    color

    +

    El color del ícono en hexadecimal.

    +
    <screen>
      <body>
        <box>
          <icon family="Ionicons" name="caret-back" size="24" color="#333333" />
        </box>
      </body>
    </screen>
    \ No newline at end of file diff --git a/reference/ui/image/index.html b/reference/ui/image/index.html index a0d9b15..2099635 100644 --- a/reference/ui/image/index.html +++ b/reference/ui/image/index.html @@ -1,4 +1,4 @@ - image | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
    S42UI - The Next-Gen Server Driven UI for React Native
    + Skip to content
    S42UI - Server Driven UI for React Native

    image

    Props

    +

    image

    El componente image se utiliza para mostrar imágenes dentro de la aplicación.

    +

    Props

    +

    uri

    +

    URL de la imagen

    +

    style

      -
    • source: The image source, either local or remote.
      • -
    • style: Custom styles for the image.
      • -
    • resizeMode: How the image should be resized (e.g., cover, contain).
      • -
    \ No newline at end of file +
  • backgroundColor
    • +
  • borderBottomLeftRadius
    • +
  • borderBottomRightRadius
    • +
  • borderColor
    • +
  • borderRadius
    • +
  • borderTopLeftRadius
    • +
  • borderTopRightRadius
    • +
  • borderWidth
    • +
  • opacity
    • + +

    resizeMode:

    +

    enum(‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’)

    +

    width

    +

    El ancho de la imagen

    +

    height

    +

    El alto de la imagen

    +

    blurRadius

    +

    El blur que le aplicaremos a la imagen

    +

    Example

    +
    <image
      uri="https://http2.mlstatic.com/D_NQ_NP_665877-MLA74913737478_032024-O.webp"
      width="100"
      height="100"
      style="borderWidth='0'; borderColor='#000000'; borderRadius: 20"
      blurRadius="0"
      resizeMode="cover"
    />
    \ No newline at end of file diff --git a/reference/ui/list/index.html b/reference/ui/list/index.html index 3487397..8ec5bf0 100644 --- a/reference/ui/list/index.html +++ b/reference/ui/list/index.html @@ -1,4 +1,4 @@ - list | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
    S42UI - The Next-Gen Server Driven UI for React Native
    + Skip to content
    S42UI - Server Driven UI for React Native

    list

    Props

    +

    list

    El componente list se utiliza para renderizar conjuntos de datos en forma de lista. Es ideal para mostrar series de elementos como texto, imágenes, o cualquier otro tipo de contenido que necesite ser presentado en un formato secuencial. Además, ofrece la flexibilidad de personalizar cómo se renderiza cada elemento, asegurando que se adapte perfectamente a las necesidades específicas de tu aplicación.

    +

    Props

    +

    name

    +

    Indica el nombre de la lista

    +

    style

    +

    Propiedades:

      -
    • data: The array of data to render.
      • -
    • renderItem: Function that defines how each item is rendered.
      • -
    • keyExtractor: Function to generate unique keys for each item.
      • -
    \ No newline at end of file +
  • backgroundColor: hexadecimal con el color de fondo.
    • +
  • borderBottomColor: hexadecimal con el color del border inferior.
    • +
  • borderRadius: indica el radio de los borders
    • +
  • borderBottomEndRadius: indica el número de radio que se debe aplicar al borde inferior
    • +
  • borderBottomLeftRadius: indica el número de radio que se debe aplicar al borde inferior izquierdo
    • +
  • borderBottomRightRadius: indica el número de radio que se debe aplicar al borde inferior derecho
    • +
  • borderBottomWidth: indica el tamaño del borde inferior
    • +
  • borderWidth: indica el ancho del borde
    • +
  • borderColor: indica el color del border en hexadecimal
    • +
  • borderRightColor: indica el color del borde derecho
    • +
  • borderRightWidth: indica el ancgi del borde derecho
    • +
  • borderStyle: indica el tipo de borde. enum(‘solid’, ‘dotted’, ‘dashed’)
    • +
  • padding: indica la distancia entre el borde del box y los elementos contenidos.
    • +
  • paddingHorizontal: indica la distancia horizontal del box y los elementos contenidos.
    • +
  • paddingVertical: indica la distancia vertical del box y los elementos contenidos.
    • +
  • border: indica la distancia entre el box y los elementos al rededor
    • +
  • margin: margen
    • + +

    Example

    +
    <screen>
      <body>
        <list name="listRestaurants">
        <listitem>
            <box shadow="24" borderWidth="1" padding="4" borderColor="transparent">
              <link to="/restaurant.xml?id=1">
                <text>Restaurant 1</text>
                <image
                  uri="https://img.freepik.com/vector-gratis/restaurante-italiano-diseno-plano_23-2147560162.jpg"
                  width="120"
                  height="100"
                  style="borderWidth='0'; borderColor='#000000'; borderRadius: 20"
                  blurRadius="0"
                  resizeMode="cover"
                />
              </link>
            </box>
          </listitem>
        </list>
      </body>
    </screen>
    \ No newline at end of file diff --git a/reference/ui/listitem/index.html b/reference/ui/listitem/index.html index e2a4e87..0ab0375 100644 --- a/reference/ui/listitem/index.html +++ b/reference/ui/listitem/index.html @@ -1,4 +1,4 @@ - listitem | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
    S42UI - The Next-Gen Server Driven UI for React Native
    + Skip to content
    S42UI - Server Driven UI for React Native

    listitem

    Props

    -
      -
    • title: The main text displayed in the item.
      • -
    • subtitle: Additional text displayed below the title.
      • -
    • leftIcon, rightIcon: Icons displayed on the left or right of the item.
      • -
    • onPress: Function to handle item clicks.
      • -
    \ No newline at end of file +

    listitem

    El component listitem es un bloque de construcción esencial para crear elementos de lista ricos en contenido y altamente interactivos. Este componente permite mostrar tanto un texto principal como un subtítulo adicional, junto con íconos opcionales a la izquierda y derecha del elemento. Además, soporta la integración de funciones de interacción, como clics o toques, lo que lo convierte en una opción ideal para menús, listas de selección, o cualquier tipo de lista interactiva.

    +

    Example

    +
    <screen>
      <body>
        <list name="listRestaurants">
        <listitem>
            <box shadow="24" borderWidth="1" padding="4" borderColor="transparent">
              <link to="/restaurant.xml?id=1">
                <text>Restaurant 1</text>
                <image
                  uri="https://img.freepik.com/vector-gratis/restaurante-italiano-diseno-plano_23-2147560162.jpg"
                  width="120"
                  height="100"
                  style="borderWidth='0'; borderColor='#000000'; borderRadius: 20"
                  blurRadius="0"
                  resizeMode="cover"
                />
              </link>
            </box>
          </listitem>
        </list>
      </body>
    </screen>
    \ No newline at end of file diff --git a/reference/ui/modal/index.html b/reference/ui/modal/index.html index 30d094c..91342ae 100644 --- a/reference/ui/modal/index.html +++ b/reference/ui/modal/index.html @@ -1,4 +1,4 @@ - modal | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
    S42UI - The Next-Gen Server Driven UI for React Native
    + Skip to content
    S42UI - Server Driven UI for React Native

    modal

    Props

    -
      -
    • visible: Boolean indicating if the modal is visible.
      • -
    • onRequestClose: Function to handle modal close requests.
      • -
    • animationType: Type of animation for the modal (e.g., slide, fade).
      • -
    \ No newline at end of file +

    modal

    El component modal crea un modal. Se puede controlar si estará visible o no usando un component lógico del tipo <state /> o mediante un action que tenga como type modal y el como target el nombre del modal

    +

    Props

    +

    visible

    +

    Un valor booleano que indica si el modal está visible en la pantalla o no. Por default, no será visible

    +

    animationType

    +

    enum(‘deslizar’, ‘fade’)

    +

    Example

    +
    <screen>
      <body>
        <box>
          <action type="showModal" target="modal1" >
        </box>
      </body>
      <modal
        visible="false"
        animationType="slide"
        name="modal1"
      >
        <box style="padding=20; backgroundColor=#fff; borderRadius=10">
          <text>Contenido del Modal</text>
          <action type="showModal" target="modal1">Ocultar</action>
        </box>
      </modal>
    </screen>
    \ No newline at end of file diff --git a/reference/ui/picker/index.html b/reference/ui/picker/index.html index 1bfb713..3c8ea43 100644 --- a/reference/ui/picker/index.html +++ b/reference/ui/picker/index.html @@ -1,4 +1,4 @@ - picker | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
    S42UI - The Next-Gen Server Driven UI for React Native
    + Skip to content
    S42UI - Server Driven UI for React Native

    picker

    Props

    +

    picker

    El component picker se utiliza para presentar una lista de opciones donde el usuario debe seleccionar una.

    +

    Props

    +

    value

    +

    Es el valor por default que mostraremos seleccionado. Debe existir dentro de la lista de opciones

      -
    • selectedValue: The currently selected value.
      • -
    • onValueChange: Function to handle value changes.
      • -
    • mode: Defines the style of the picker (e.g., dropdown, dialog).
      • -
    \ No newline at end of file +
  • mode +enum(‘dialog’, ‘dropdown’)
    • + +

    Example

    +
    <picker
      value="opcion1"
      mode="dropdown"
    >
      <pickeritem value="opcion1">Opción 1</pickeritem>
      <pickeritem value="opcion2">Opción 2</pickeritem>
      <pickeritem value="opcion3">Opción 3</pickeritem>
    </picker>
    \ No newline at end of file diff --git a/reference/ui/pickeritem/index.html b/reference/ui/pickeritem/index.html new file mode 100644 index 0000000..9efd89e --- /dev/null +++ b/reference/ui/pickeritem/index.html @@ -0,0 +1,50 @@ + pickeritem | S42UI - Server Driven UI for React Native + + Skip to content
    S42UI - Server Driven UI for React Native

    pickeritem

    <picker
      value="opcion1"
      mode="dropdown"
    >
      <pickeritem value="opcion1">Opción 1</pickeritem>
      <pickeritem value="opcion2">Opción 2</pickeritem>
      <pickeritem value="opcion3">Opción 3</pickeritem>
    </picker>
    \ No newline at end of file diff --git a/reference/ui/screen/index.html b/reference/ui/screen/index.html index e5756c4..f7573e5 100644 --- a/reference/ui/screen/index.html +++ b/reference/ui/screen/index.html @@ -1,4 +1,4 @@ - screen | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
    S42UI - The Next-Gen Server Driven UI for React Native
    + Skip to content
    S42UI - Server Driven UI for React Native

    screen

    Props

    -
      -
    • style: Custom styles for the screen.
      • -
    • children: The components to be displayed within the screen.
      • -
    • backgroundColor: Background color of the screen.
      • -
    \ No newline at end of file +

    screen

    El componente screen actúa como el contenedor principal de una pantalla en una aplicación.

    +

    Props

    +

    scroll

    +

    Boolean, indica si la pantalla soporta o no scroll

    +

    Example

    +
    <screen scroll="true">
      <body>
        <box>
          <text style="font-size=18; color=#333333">Bienvenido a la Aplicación</text>
        </box>
      </body>
    </screen>
    \ No newline at end of file diff --git a/reference/ui/switch/index.html b/reference/ui/switch/index.html index 7d8546a..0043ce7 100644 --- a/reference/ui/switch/index.html +++ b/reference/ui/switch/index.html @@ -1,4 +1,4 @@ - switch | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
    S42UI - The Next-Gen Server Driven UI for React Native
    + Skip to content
    S42UI - Server Driven UI for React Native

    switch

    Props

    +

    switch

    Functiona como un checkbox. El component switch es una forma de almacenar “verdadero” o “falso” en un state

    +

    Props

    +

    name

    +

    Indica el nombre del switch

    +

    defaultvalue

    +

    boolean que indica si está on/off

    +

    color

    +

    Indica el color del switch en hexadecimal

    +

    colortrue

    +

    Indica el color del switch cuando está en true en hexadecimal

    +

    colorfalse

    +

    Indica el color del switch cuando está en false en hexadecimal

    +

    targetType

      -
    • value: Boolean indicating the switch state.
      • -
    • onValueChange: Function to handle value changes.
      • -
    • trackColor: Custom colors for the track.
      • -
    \ No newline at end of file +
  • state: indica que modifica un state
    • +
  • fetch: indica que ejecutará un fetch, pasando por body { sms: false } o { sms: false }
    • + +

    targetName

    +

    Example

    +
    <screen>
      <body>
        <switch defaultValue="false" color="#000000" colorfalse="#888888" colortrue="#cccccc" targetType="state" target="notifications" />
        <switch defaultValue="false" name="sms" color="#000000" colorfalse="#888888" colortrue="#cccccc" targetType="fetch" target="saveConfig" />
      </body>
      <state name="notifications" defaultValue="false">
      <fetch uri="https://site.com/saveconfig" method="post" name="saveConfig" />
    <screen>
    \ No newline at end of file diff --git a/reference/ui/text/index.html b/reference/ui/text/index.html index 5e4ad25..a58d78d 100644 --- a/reference/ui/text/index.html +++ b/reference/ui/text/index.html @@ -1,4 +1,4 @@ - text | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
    S42UI - The Next-Gen Server Driven UI for React Native
    + Skip to content
    S42UI - Server Driven UI for React Native

    text

    El component text permite agregar textos dentro de elementos contenedores (como boxes).

    +

    text

    El componente text es fundamental para mostrar texto dentro de la interfaz de usuario. Puede ser utilizado en combinación con otros elementos contenedores, como box, para crear contenido textual estilizado. Este componente ofrece una amplia gama de propiedades que permiten personalizar la apariencia del texto, incluyendo color, tamaño, alineación, y más, brindando la flexibilidad necesaria para adaptarse a cualquier diseño.

    Props

    style

    -

    Permite darle estilo al component text. Está basado en el componente Text de React Native. -Las propiedades que se pueden utilizar son:

    +

    Permite aplicar estilos personalizados al componente text. Basado en el componente Text de React Native, las propiedades disponibles incluyen:

    • color: indicar el color del texto. Formato hexadecimal.
    • fontFamily: indicar la familia de fuente a utilizar.
      • @@ -65,10 +64,10 @@

      style

    • textTransform: enum(‘none’, ‘uppercase’, ‘lowercase’, ‘capitalize’). Default none
    • userSelect: enum(‘auto’, ‘text’, ‘none’, ‘contain’, ‘all’). Default none
    -

    numberOfLines

    -

    Número de líneas del texto a mostrar.

    +

    numberOfLines

    +

    Define el número máximo de líneas que el texto mostrará. Si el texto excede este número, será truncado.

      -
    • ellipsizeMode: How text is truncated when it’s too long.
      • +
    • ellipsizeMode: Controla cómo se trunca el texto cuando es demasiado largo. Las opciones comunes son head, middle, tail, que determinan dónde se agrega la elipsis (...).
    -

    Example.

    -
    <box>
      <text>Hola mundo</text>
      <text style="color: '#cc0000'; fontSize: '24'">Hola mundo</text>
    </box>
    \ No newline at end of file +

    Example

    +
    <screen>
      <body>
        <box>
          <text>Hola mundo</text>
          <text style="color: '#cc0000'; fontSize: '24'">Hola mundo</text>
        </box>
      </body>
    </screen>
    \ No newline at end of file diff --git a/reference/ui/textinput/index.html b/reference/ui/textinput/index.html index a445823..e646286 100644 --- a/reference/ui/textinput/index.html +++ b/reference/ui/textinput/index.html @@ -1,4 +1,4 @@ - textinput | S42UI - The Next-Gen Server Driven UI for React Native + - Skip to content
    S42UI - The Next-Gen Server Driven UI for React Native
    + Skip to content
    S42UI - Server Driven UI for React Native

    textinput

    Props

    -

    value

    +

    textinput

    El componente textinput es una herramienta fundamental en las interfaces de usuario que requieren la entrada de datos por parte del usuario. Es altamente personalizable, permitiendo definir su apariencia, comportamiento, y la forma en que los datos son capturados. Este componente es esencial para formularios, autenticación, búsqueda, y cualquier otra interacción que requiera que el usuario ingrese texto.

    +

    Props

    +

    value

    Es el valor por defecto que tendrá el campo de texto.

    <textinput value="simon@mail.com" />
    -

    placeholder

    +

    target

    +

    Indica en que component del tipo state almacenaremos el valor del textinput

    +
    <screen>
      <body>
        <box>
          <textinput target="firstName"/>
          <text>Hola {{firstName}}</text>
        </box>
      </body>
      <state name="firstName" />
    <screen>
    +

    placeholder

    Es el texto que se mostrará en un tono mas claro dentro del campo de texto hasta que el usuario inserte algún valor.

    <textinput placeholder="Inserte su e-mail" />
    -

    placeholderTextColor

    +

    placeholderTextColor

    Indicamos el color que deberá tener el placeholder.

    <textinput placeholderTextColor="#dced33" />
    -

    textAlign

    +

    textAlign

    Indicamos como se debe alienar el contenido.

    enum(‘left’, ‘center’, ‘right’)

    <textinput textAlign="right" />
    -

    secureTextEntry

    +

    secureTextEntry

    Indica si el texto debe mostrarte de forma segura (ideal para passwords)

    <textinput secureTextEntry="true" />
    -

    inputMode

    +

    inputMode

    Indicamos el tipo de entrada de datos que esperamos del usuario. enum(‘decimal’, ‘email’, ‘none’, ‘numeric’, ‘search’, ‘tel’, ‘text’, ‘url’)

    <textinput>
    -

    multiline

    +

    multiline

    Indicamos si el textinput soporta múltiples líneas.

    <textinput multiline="true" />
    -

    keyboardType

    +

    keyboardType

    Indica el tipo de teclado que debe mostrarse al usuario.

    enum(‘default’, ‘number-pad’, ‘decimal-pad’, ‘numeric’, ‘email-address’, ‘phone-pad’, ‘url’)

    <textinput keyboardType="number-pad" />
    -

    caretHidden

    +

    caretHidden

    Indicar si mostramos o no el cursor titilante. Por default se mostrará.

    <input caretHidden="false" />
    -

    maxLength

    +

    maxLength

    Indicamos el máximo de carácteres que soportaremos en nuestro textinput.

    <textinput maxLength="20" />

    style

    @@ -97,5 +101,5 @@

    style

  • textTransform: enum(‘none’, ‘uppercase’, ‘lowercase’, ‘capitalize’). Default none
  • userSelect: enum(‘auto’, ‘text’, ‘none’, ‘contain’, ‘all’). Default none
    • -

    Ejemplo

    -
    <textinput value="" placeholder="Inserte su e-mail" keyboardType="email" style="borderWidth: '1'; borderColor='#000'" />
    \ No newline at end of file +

    Example

    +
    <screen>
      <body>
        <box>
          <textinput value="" placeholder="Inserte su e-mail" keyboardType="email" style="borderWidth: '1'; borderColor='#000'" />
        </box>
      </body>
    </screen>
    \ No newline at end of file diff --git a/sitemap-0.xml b/sitemap-0.xml index 5dea448..17fefa0 100644 --- a/sitemap-0.xml +++ b/sitemap-0.xml @@ -1 +1 @@ -https://s42ui.com/https://s42ui.com/guides/example/https://s42ui.com/reference/https://s42ui.com/reference/customcomponents/import/https://s42ui.com/reference/logic/action/https://s42ui.com/reference/ui/activityindicator/https://s42ui.com/reference/ui/box/https://s42ui.com/reference/ui/flatlist/https://s42ui.com/reference/ui/icon/https://s42ui.com/reference/ui/image/https://s42ui.com/reference/ui/list/https://s42ui.com/reference/ui/listitem/https://s42ui.com/reference/ui/modal/https://s42ui.com/reference/ui/picker/https://s42ui.com/reference/ui/screen/https://s42ui.com/reference/ui/switch/https://s42ui.com/reference/ui/text/https://s42ui.com/reference/ui/textinput/ \ No newline at end of file +https://s42ui.com/https://s42ui.com/guides/s42ui-fetch-api-and-show-in-list/https://s42ui.com/guides/sdui-react-native/https://s42ui.com/reference/https://s42ui.com/reference/customcomponents/import/https://s42ui.com/reference/logic/action/https://s42ui.com/reference/logic/device/https://s42ui.com/reference/logic/fetch/https://s42ui.com/reference/logic/state/https://s42ui.com/reference/ui/activityindicator/https://s42ui.com/reference/ui/box/https://s42ui.com/reference/ui/flatlist/https://s42ui.com/reference/ui/icon/https://s42ui.com/reference/ui/image/https://s42ui.com/reference/ui/list/https://s42ui.com/reference/ui/listitem/https://s42ui.com/reference/ui/modal/https://s42ui.com/reference/ui/picker/https://s42ui.com/reference/ui/pickeritem/https://s42ui.com/reference/ui/screen/https://s42ui.com/reference/ui/switch/https://s42ui.com/reference/ui/text/https://s42ui.com/reference/ui/textinput/ \ No newline at end of file