Tendo como base a utilização do TypeScript, o Devitools adota a notação de classes para realizar a criação de Schemas.
As classes de Schema estendem a classe principal e implementam o método abstrato construct onde são feitas as definições dos campos, botões e eventos.
O exemplo abaixo cria uma classe que representa a entidade de Usuário (User).
import Schema from '@devitools/Agnostic/Schema'
export default class UserSchema extends Schema {
/**
*/
construct () {
}
}
static domainservicestatic primaryKeystatic displayKeystatic remoteKeyinitScopes (): string[]Usualmente, quando criamos um campo utilizando os Schemas, por padrão, ele já receberá o escopo definido através do método initScopes. Portanto, tal método permite ao desenvolvedor definir o escopo inicial de determinado campo.
Observação: quando realizamos a criação de botões faz-se OBRIGATÓRIA a definição do escopo no qual tais botões estarão presentes. Para compreender como definir escopos específicos para os botões, clique aqui.
São áreas que aceitam entradas de dados por parte do usuário. Observe o exemplo abaixo, através da utilização do método addField, foi possível acrescentar o campo nome (string) e definir quais são as configurações necessárias/desejadas.
import Schema from '@devitools/Agnostic/Schema'
export default class UserSchema extends Schema {
/**
*/
construct () {
this.addField('nome')
.fieldIsInputPlan()
.fieldTableShow()
.fieldTableWhere()
.fieldFormAutofocus()
.fieldFormWidth(40)
.fieldFormFill()
.validationRequired()
}
}
No link abaixo, estão contidas todas as opções de configuração dos campos.
Ir para a página de opções de configuração dos Campos
São elementos primordiais em uma interface de usuário, e dão ao mesmo a possibilidade de realizar determinada ação. Observe o exemplo abaixo, utilizando o método addAction o desenvolvedor tem a possibilidade de acrescentar um botão vinculado à determinada ação. Observe também que, assim como os campos, os botões também podem ser configurados de maneira mais detalhada.
import Schema from '@devitools/Agnostic/Schema'
export default class UserSchema extends Schema {
/**
*/
construct () {
this.addAction('add')
.actionIcon('add')
.actionColor('primary')
.actionOn('click', function ({ context, $event }) {
return console.log({ ...context, $event })
})
}
}
No link abaixo, estão contidas todas as opções de configuração dos botões.
Ir para a página de opções de configuração dos Botões