jComponent 20 (frontend)
Componentes, plugins, ligação de dados e tudo o que corre no navegador.
Começar com o jComponent 20
Carregue o bundle do jComponent, defina um valor no estado global e mostre-o com um elemento ui-bind.
Ler, alterar e observar o estado
Use SET, GET, UPD, PUSH e WATCH para trabalhar com o estado global e reagir quando um caminho muda.
Escrever um componente jComponent próprio
Registe um componente reutilizável com COMPONENT(), renderize-o em make(), reaja a mudanças de estado em setter() e escreva de volta com set().
Configurar um componente e reconfigurá-lo mais tarde
Dê a um componente opções por omissão, substitua-as no atributo config, reaja em configure() e altere-as em execução com reconfigure().
Ciclo de vida de um componente: make, setter e destroy
Saiba quando o jComponent cria, atualiza e remove um componente, e limpe temporizadores e ouvintes em destroy().
Validar entrada com o validate() de um componente
Implemente validate() num componente, leia os estados invalid, touched e modified e encontre campos inválidos com ERRORS().
Path prefixes: comum, listas de código, estado temporário e pistas de plug-in
O primeiro caráter de um caminho jComponent escolhe onde o valor vive: * o estado comum, # as listas de código, % o estado temporário, ? o estado do plugin e o plugin|A propriedade de um objeto plug-in.
Carregar uma biblioteca antes de um componente arrancar
Liste scripts e estilos como dependências de um componente para que o jComponent os descarregue uma vez e arranque o componente depois.
Estender componentes e plugins com EXTENSION
Acrescente comportamento a um componente existente a partir de fora, sem editar o seu código-fonte, com EXTENSION().
Mostrar, ocultar e estilizar elementos com ui-bind
Use os comandos de ui-bind para alternar visibilidade, classes e HTML a partir do estado, sem escrever código DOM.
Renderizar listas com um template ui-bind
Ponha um template Tangular dentro de ui-bind com o comando template para renderizar arrays e objetos sempre que os dados mudam.
Mais comandos de ui-bind: atributos, valores, estado e formatação
Defina HTML, atributos, valores de formulário, estado desativado e um formato de texto a partir do estado com comandos de ui-bind.
Referência ui-bind: cada comando, opção e atributo
Todos os comandos de ui-bind com o que cada um faz, as opções que controlam quando ele funciona, e os atributos que escolhem o elemento alvo.
Referência de instância componente: propriedades e métodos de si mesmo
A declaração de um componente jComponent 20 e o que sua instância (se) oferece: propriedades, métodos de valor, auxiliares DOM, eventos, observadores e comandos.
Agrupar estado e lógica num plugin jComponent
Declare um plugin com PLUGIN() e associe-o a uma parte da página com ui-plugin, usando ? como o seu próprio caminho.
Encaminhar páginas no navegador sem recarregar
Registe rotas no cliente com ROUTE(), navegue com REDIRECT(), leia os parâmetros do URL e a query string a partir de NAV e volte atrás no histórico.
Carregar partes de uma página com ui-import
Obtenha uma parte HTML do servidor para dentro de um elemento com ui-import ou IMPORT() e deixe a parte trazer os seus próprios componentes.
Executar código com comandos e EXEC
Registe comandos com component.command() e chame-os com CMD(), ou chame um método de um plugin com EXEC('plugin/method').
Enviar eventos entre componentes com ON e EMIT
Desacople partes da página com eventos globais: EMIT() anuncia algo, ON() escuta, OFF() deixa de escutar.
Guardar dados no navegador com CACHE, PREF e COOKIES
Mantenha valores entre visitas com CACHE (com expiração), PREF (preferências do utilizador) e COOKIES.
Partilhar definições com ENV e a sintaxe [key]
Registe valores com ENV() e use-os em URL e na configuração de componentes com o marcador [key].
Carregar dados de uma rota Total.js com AJAX
Chame uma rota Total.js a partir da página com AJAX() e ponha a resposta no estado do jComponent.
Chamar rotas API do Total.js com API()
Use API(url, name, data, callback) para chamar as ações de um endpoint ROUTE('API ...'), incluindo erros de validação.
Carregar ficheiros com UPLOAD() e progresso
Envie um FormData para uma rota @upload do Total.js com UPLOAD() e acompanhe o progresso.
Pequenos helpers: GUID, HASH, parseConfig, format e group
Use as funções auxiliares que o jComponent acrescenta: ids aleatórios, hashes, strings de configuração, formatação de texto e datas e agrupamento.
Atalhos do estado: INC, TOGGLE, NUL, UPDATE, UNWATCH, WAIT, BLOCKED e CACHEPATH
Funções pequenas que alteram ou vigiam um valor do estado pelo seu caminho, esperam até existir um valor, executam algo só uma vez por período e guardam um valor do estado na cache.
Ajudantes de dados: QUERIFY, STRINGIFY, ENCRYPT, FN, CL, TRANSLATE, UNAUTHORIZED e Thelpers
Construa cadeias de consulta, escreva JSON sem o que não quer, codifique um valor com uma chave, compile uma expressão, carregue listas de valores, traduza textos, verifique permissões e acrescente ajudantes aos modelos.
Ajudantes do DOM: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM e APPEARANCE
Leia atributos data, pergunte se um elemento é mostrado ou está no ecrã, acrescente estilos substituíveis, mova elementos dentro do seu pai, atualize uma lista sem a redesenhar e defina as cores e o modo escuro da página.
Encontrar e chamar componentes e plugins: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE e ADAPT
Procure os componentes da página por nome ou caminho, chame um método de vários componentes de uma vez, chame funções por nome, use dois endereços de API com TAPI e PIPE, execute middleware antes de uma rota e substitua os marcadores de um texto.
Despache flags de caminho personalizados com FLAGS
Execute flags personalizados, observe os seus eventos e distinga-os das alterações do modelo e dos flags de estado reservados.