La misma página en una terminal

Traducción automática

Esta página se tradujo automáticamente del inglés y todavía no la revisó un hablante nativo; las correcciones son bienvenidas en GitHub. Si algo no coincide, vale el original en inglés.

Tarea: usar la misma página desde un navegador y desde una terminal.

yaml

# Recipe: one page, drawn in the browser (quantum start) and in a terminal (quantum console).
paths:
  components: ./components

Una página hecha con etiquetas ui:* del Núcleo no está atada al HTML. quantum start la sirve a un navegador; quantum console la dibuja en la terminal, y quantum desktop en una ventana local. La consola le pide al mismo servidor el árbol de vista de la página y envía las mismas acciones: la regla de name, el mensaje flash y la sesión funcionan igual, sin nada traducido.

xml

<q:component name="GuestList">
  <q:action name="sign" method="POST">
    <q:param name="name" required="true" minlength="2" maxlength="40" />
    <!-- append to a list that does not exist yet starts one -->
    <q:set name="session.guests" operation="append" value="{name}" />
    <q:redirect url="/" flash="Welcome, {name}!" />
  </q:action>

  <q:set name="guests" type="array" value="{session.guests}" default="[]" />

  <ui:window title="Guest list">
    <ui:vbox gap="md" padding="lg">
      <q:if condition="flash">
        <ui:alert variant="{flashType == 'error' and 'danger' or 'success'}">{flash}</ui:alert>
      </q:if>
      <ui:text>{len(guests)} signed so far.</ui:text>
      <ui:form on-submit="sign">
        <ui:hbox gap="sm">
          <ui:input bind="name" placeholder="Your name" grow="true" />
          <ui:button variant="primary">Sign</ui:button>
        </ui:hbox>
      </ui:form>
      <ui:list>
        <q:loop type="array" var="guest" items="{guests}">
          <ui:item>{guest}</ui:item>
        </q:loop>
      </ui:list>
    </ui:vbox>
  </ui:window>
</q:component>

En el navegador, quantum test:

xml

<q:test name="an empty list to start" page="/">
  <test:visit />
  <test:expect text="0 signed so far." />
</q:test>

<q:test name="signing adds the name" page="/">
  <test:submit action="sign" name="Ana" />
  <test:expect redirect="/" flash="Welcome, Ana!" />
  <test:expect text="1 signed so far." />
  <test:expect text="Ana" />
</q:test>

<q:test name="a name that is too short is refused on its field" page="/">
  <test:submit action="sign" name="A" />
  <test:expect error="name" message="Must be at least 2 characters" />
  <test:expect text="0 signed so far." />
</q:test>

text

tests/guests.test.q
  PASS  an empty list to start
  PASS  signing adds the name
  PASS  a name that is too short is refused on its field
3 passed, 0 failed

En la consola, tests/docs/test_cookbook_console.py abre la misma aplicación en el renderizador de consola. Verifica que cada texto que esta suite espera en una visita simple esté en la pantalla de la consola; después escribe un nombre demasiado corto y uno correcto, y presiona Sign: la consola muestra el error del campo, luego el mensaje flash y el nombre nuevo.

bash

quantum start      # http://localhost:8080
quantum console    # the same page in this terminal

Ver UI-3 y UI-7.

La misma página en una terminal ​

La misma página en una terminal