Aplicativos móveis

Componentes

Lista tocável, estado vazio, seção e botão flutuante — e os da Vitrine, que continuam valendo.

Lista#

dataforge

adopt Arcane.Brasa as Br

contatos := [
    {"id": 1, "nome": "Ana Souza", "cidade": "Recife"},
    {"id": 2, "nome": "Bruno Lima", "cidade": "Curitiba"},
]
app := Br.app("Contatos")

action tela():
    Br.topo("Contatos")
    Br.secao("Favoritos")
    Br.lista(contatos, titulo := "nome", detalhe := "cidade",
             destino := "/contato?id={id}", icone := "usuario")

Br.tela("/", tela)
s := Br.testar(app)
assert s.itens() is [{"titulo": "Ana Souza", "detalhe": "Recife"},
                     {"titulo": "Bruno Lima", "detalhe": "Curitiba"}]

A linha inteira é o alvo, com 56 px de altura — o dedo não acerta um link de 14 px no meio de um texto. titulo e detalhe são nomes de campo, e o item pode ser vault, record ou instância. O texto é escapado: um nome com <script> aparece como texto, e não roda.

Estado vazio#

dataforge

adopt Arcane.Brasa as Br

app := Br.app("Pedidos")

action tela():
    Br.topo("Pedidos")
    Br.vazio("Nenhum pedido ainda", "os pedidos novos aparecem aqui")

Br.tela("/", tela)
assert Br.testar(app).tem("Nenhum pedido ainda")

Uma lista vazia sem explicação parece travada. O vazio diz o que é e, na dica, o que fazer.

Botão flutuante#

dataforge

adopt Arcane.Brasa as Br
adopt Arcane.Vitrine as V

notas := []
app := Br.app("Notas")

action lista():
    Br.topo("Notas")
    Br.lista(notas, titulo := "texto")
    Br.botao_flutuante("Nova nota", "/nova")

action nova():
    Br.topo("Nova nota", voltar := yes)
    texto := V.entrada("Texto")
    given V.botao("Salvar"):
        notas.append({"texto": texto})
        V.navegar("/")

Br.tela("/", lista, titulo := "Notas", icone := "lapis", aba := yes)
Br.tela("/nova", nova)

s := Br.testar(app)
s.tocar("Nova nota")
s.digitar("Texto", "comprar pão")
s.clicar("Salvar")
s.ir("/")
assert s.tem("comprar pão")

Ele fica no canto, acima da barra de abas, e respeita a área segura do aparelho (o entalhe e a barra de gestos do iPhone).

Os links são conferidos#

Destino	Resultado
`/produto?id=3`	aceito — um caminho do aplicativo
`tel:`, `sms:`, `mailto:`, `geo:`, `https:`	aceito — abre o aplicativo do aparelho
`javascript:…`, `//outro.site`, `data:…`	recusado — um dado nunca vira código