A mesma página num terminal

Tradução automática

Esta página foi traduzida automaticamente do inglês e ainda não foi revisada por um falante nativo; correções são bem-vindas no GitHub. Se algo não bater, vale o original em inglês. O código e os resultados são os mesmos do original, importados dos arquivos testados.

Tarefa: usar a mesma página a partir de um navegador e de um terminal.

yaml

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

Uma página feita de tags ui:* do Núcleo não está presa ao HTML. O quantum start a serve a um navegador; o quantum console a desenha no terminal, e o quantum desktop numa janela local. O console pede ao mesmo servidor a árvore de visualização da página e envia as mesmas ações: a regra de name, a mensagem flash e a sessão funcionam do mesmo jeito, sem nada traduzido.

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>

No 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

No console, tests/docs/test_cookbook_console.py abre a mesma aplicação no renderizador do console. Ele confere que cada texto que esta suíte espera numa visita simples está na tela do console, depois digita um nome curto demais e um que está bom, e aperta Sign: o console mostra o erro do campo, depois a mensagem flash e o novo nome.

bash

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

Veja UI-3 e UI-7.

A mesma página num terminal ​

A mesma página num terminal