Exemplos de formulário¶
Atualmente, o Framework utiliza o Bootstrap 5 com um sistema de grid simples e fácil de usar que usa 12 colunas e permite criar qualquer tipo de layout. É responsivo e possui muitos componentes, como dropdowns, botões de dropdown, grupos de botões, navs, barras de navegação, abas, breadcrumbs, badges, barras de progresso, etc.
Template padrão de formulário de edição¶
Este template é usado para criar formulários de edição, caso um item e seu proprietário não tenham seus próprios templates de formulário de edição.
<div class="default-edit default-details-edit">
<div class="form-body">
<div class="edit-body"></div>
</div>
<div class="form-footer">
<button type="button" id="ok-btn" class="btn btn-primary">
<i class="bi bi-check-square"></i> OK<small class="muted"> [Ctrl+Enter]</small>
</button>
<button type="button" id="cancel-btn" class="btn btn-secondary">
<i class="bi bi-x-square"></i> Cancelar
</button>
</div>
</div>
O evento abaixo está localizado no módulo cliente da tarefa e é disparado para qualquer item cujo formulário de edição tenha sido criado.
Ele utiliza o método
create_inputs
para criar os campos de entrada na div com a classe “edit-body”. Mas antes disso, ele
verifica se a função init_inputs está definida no módulo cliente do item, o que
pode ser usado para especificar o parâmetro de opções do método.
Ele usa o método
create_inputs
para criar os controles de entrada na div com a classe “edit-body”.
Mas antes disso, verifica se a função init_inputs está definida no
módulo cliente do item, que pode ser usada para especificar as opções do método.
Em seguida, ele atribui os eventos jQuery aos botões OK e Cancelar.
function on_edit_form_created(item) {
var options = {
col_count: 1
};
if (item.init_inputs) {
item.init_inputs(item, options);
}
item.create_inputs(item.edit_form.find(".edit-body"), options);
item.edit_form.find("#cancel-btn").on('click.task', function(e) {
item.cancel_edit(e)
});
item.edit_form.find("#ok-btn").on('click.task', function() {
item.apply_record()
});
}
O formulário de edição para o Cadastro Álbuns é o seguinte:
Nota
Se não houver botões com os ids correspondentes, o código acima não gera exceções.
Se você quiser sobrescrever os eventos jQuery para os botões declarados no módulo cliente da tarefa,
no evento correspondente do módulo cliente do item, você pode fazer isso usando o método jQuery off:
item.edit_form.find("#ok-btn")
.off('click.task')
.on('click', function() { some_other_function(item) });
Se não houver o contêiner correspondente no formulário, o método create_inputs
não fará nada.
Template de formulário de edição com abas¶
Este exemplo usa as abas do Bootstrap:
<div class="customers-edit">
<div class="form-body">
<ul class="nav nav-tabs" id="customer-tabs">
<li class="active"><a href="#cust-name">Customer</a></li>
<li><a href="#cust-address">Address</a></li>
<li><a href="#cust-contact">Contact</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="cust-name">
</div>
<div class="tab-pane" id="cust-address">
</div>
<div class="tab-pane" id="cust-contact">
</div>
</div>
</div>
<div class="form-footer">
<button type="button" id="ok-btn" class="btn btn-ary expanded-btn">
<i class="icon-ok"></i> OK<small class="muted"> [Ctrl+Enter]</small>
</button>
<button type="button" id="cancel-btn" class="btn expanded-btn">
<i class="icon-remove"></i> Cancel
</button>
</div>
</div>
O seguinte manipulador de eventos é declarado no módulo cliente do item Clientes. Ele cria controles de entrada para os painéis, correspondentes às abas:
function on_edit_form_created(item) {
item.edit_form.find('#customer-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
item.create_inputs(item.edit_form.find("#cust-name"),
{fields: ['firstname', 'lastname', 'company', 'support_rep_id']}
);
item.create_inputs(item.edit_form.find("#cust-address"),
{fields: ['country', 'state', 'address', 'postalcode']}
);
item.create_inputs(item.edit_form.find("#cust-contact"),
{fields: ['phone', 'fax', 'email']}
);
}
Template de formulário de edição usando layout de grid¶
Este exemplo usa o sistema de grid do Bootstrap:
<div class="tracks-edit">
<div class="form-body">
<div class="row-fluid">
<div id="edit-top" class="span12 edit-border"></div>
</div>
<div class="row-fluid">
<div id="edit-left" class="span6 edit-border"></div>
<div id="edit-right" class="span6 edit-border"></div>
</div>
</div>
<div class="form-footer">
<button type="button" id="ok-btn" class="btn btn-ary expanded-btn">
<i class="icon-ok"></i> OK<small class="muted"> [Ctrl+Enter]</small>
</button>
<button type="button" id="cancel-btn" class="btn expanded-btn">
<i class="icon-remove"></i> Cancel
</button>
</div>
</div>
function on_edit_form_created(item) {
item.edit_options.width = 900;
item.create_inputs(item.edit_form.find("#edit-top"), {fields: ['name']});
item.create_inputs(item.edit_form.find("#edit-left"), {
fields: ['album', 'artist', 'composer', 'media_type'],
label_width: 90
});
item.create_inputs(item.edit_form.find("#edit-right"), {
fields: ['genre', 'milliseconds', 'bytes', 'unitprice'],
label_width: 90
});
}
Template de formulário de visualização de Cadastros¶
Neste exemplo, há uma div com a classe “form-header”.
O elemento com o id “form-title” é usado no on_view_form_created método da tarefa para exibir o título de um item e atribuir a ele um evento JQuery onclick para executar o método de visualização e recriar o formulário de visualização.
Os elementos com os ids “selected-div” e “search-form” são usados no on_view_form_created do grupo de Cadastros para exibir o valor atual de um campo de pesquisa quando o botão direito é clicado para selecionar um valor e para implementar a funcionalidade de pesquisa de Cadastros respectivamente.
A div com a classe “view-table” é usada no on_view_form_created manipulador de eventos da tarefa para criar uma tabela para exibir os dados do item usando o método create_table:
if (item.view_form.find(".view-table").length) {
if (item.init_table) {
item.init_table(item, table_options);
}
item.create_table(item.view_form.find(".view-table"), table_options);
item.open(true);
}
A div com o id “report-btn” é usada no on_view_form_created manipulador de eventos da tarefa para preencher os itens do menu do botão dropdown com relatórios definidos no Reports Dialog do item (se existirem).
<div class="catalogs-view">
<div class="form-body">
<div class="form-header">
<h4 id="form-title" class="header-text"><a href="#"></a></h4>
<h5 id="selected-div" class="header-text" style="display: none">
<a id="selected-value" href="#"></a>
</h5>
<form id="search-form" class="form-inline pull-right">
<label class="control-label" for="search-input">Search by
<span class="label" id="search-fieldname"></span>
</label>
<input id="search-input" type="text" class="input-medium search-query" autocomplete="off">
<a id="search-field-info" href="#" tabindex="-1">
<span class="badge">?</span>
</a>
</form>
</div>
<div class="view-table">
</div>
</div>
<div class="form-footer">
<button id="delete-btn" class="btn expanded-btn pull-left" type="button">
<i class="icon-trash"></i> Delete<small class="muted"> [Ctrl+Del]</small>
</button>
<div id="report-btn" class="btn-group dropup">
<a class="btn expanded-btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-print"></i> Reports
<span class="caret"></span>
</a>
<ul class="dropdown-menu bottom-up">
</ul>
</div>
<button id="edit-btn" class="btn expanded-btn" type="button">
<i class="icon-edit"></i> Edit
</button>
<button id="new-btn" class="btn expanded-btn" type="button">
<i class="icon-plus"></i> New<small class="muted"> [Ctrl+Ins]</small>
</button>
</div>
</div>
Template de formulário de visualização com botões no topo¶
Neste exemplo, a div do rodapé do formulário é removida e os botões são colocados na div do cabeçalho do formulário. O botão dropdown Ações é criado. O código é o mesmo do exemplo anterior.
<div class="customers-view">
<div class="form-body">
<div class="form-header">
<div id="action-btn" class="btn dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
<i class="bi bi-display"></i>
Action
</a>
<ul class="dropdown-menu">
<li id="new-btn"><a class="dropdown-item" href="#"><i class="bi-plus-square"></i> New<small class="muted"> [Ctrl+Ins]</small></a></li>
<li id="edit-btn"><a class="dropdown-item" href="#"><i class="bi-pencil-square"></i> Edit</a></li>
<li id="delete-btn"><a class="dropdown-item" href="#"><i class="bi-trash"></i> Delete<small class="muted"> [Ctrl+Del]</small></a></li>
</ul>
<p></p>
<button id="email-btn" class="btn btn-secondary" type="button">
<i class="bi-pencil-square"></i> Email
</button>
<p></p>
<button id="print-btn" class="btn btn-secondary" type="button">
<i class="bi bi-printer"></i> Print
</button>
</div>
<div class="view-table">
</div>
</div>
</div>
</div>
Template de formulário de visualização com detalhes¶
Neste exemplo, a div com a classe “view-table” é removida e adicionadas duas divs “view-master” e “view-detail”, onde tabelas para os itens mestre e detalhe são criadas no on_view_form_created manipulador de eventos declarado no módulo cliente do registro Faturas:
function on_view_form_created(item) {
var height = $(window).height() - $('body').height() - 200 - 10;
if (height < 200) {
height = 200;
}
item.filters.invoicedate1.value = new Date(new Date().setYear(new Date().getFullYear() - 1));
item.create_table(item.view_form.find(".view-master"), {
height: height,
sortable: true,
show_footer: true,
row_callback: function(row, it) {
var font_weight = 'normal';
if (it.total.value > 10) {
font_weight = 'bold';
}
row.find('td.total').css('font-weight', font_weight);
}
});
item.invoice_table.create_table(item.view_form.find(".view-detail"), {
height: 200 - 4,
dblclick_edit: false,
column_width: {'track': '25%', 'album': '25%', 'artists': '10%'}
});
item.open(true);
}
<div class="invoices-view">
<div class="form-body">
<div class="form-header">
<h4 id="form-title" class="header-text"><a href="#"></a></h4>
<h5 id="filter-text" class="header-text pull-right"></h5>
</div>
<div class="view-master">
</div>
<div class="view-detail" style="margin-top: 4px; margin-bottom: 4px">
</div>
</div>
<div class="form-footer">
<button id="delete-btn" class="btn expanded-btn pull-left" type="button">
<i class="icon-trash"></i> Delete<small class="muted"> [Ctrl+Del]</small>
</button>
<div id="report-btn" class="btn-group dropup">
<a class="btn expanded-btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-print"></i> Reports
<span class="caret"></span>
</a>
<ul class="dropdown-menu bottom-up">
</ul>
</div>
<button id="filter-btn" class="btn expanded-btn" type="button">
<i class="icon-filter"></i> Filter
</button>
<button id="edit-btn" class="btn expanded-btn" type="button">
<i class="icon-edit"></i> Edit
</button>
<button id="new-btn" class="btn expanded-btn" type="button">
<i class="icon-plus"></i> New<small class="muted"> [Ctrl+Ins]</small>
</button>
</div>
</div>
