TMultiField com muitos campos

TMultiField com muitos campos Olá Pessoal! Achei o TMultiField formidável, porém precisei utilizar vários campos e o resultado não ficou nada agradável. Por isso surgiu a necessidade de ter controle dos elementos dessa classe e para não alterar a classe do framework eu criei uma outra classe adaptando o que já estava ótimo na original. Além disso eu precisava controlar o posicionamento do texto desses campos...

Fechado

Eliezer Silva 21/06/2013 (há 11 anos)

Olá Pessoal!
Achei o TMultiField formidável, porém precisei utilizar vários campos e o resultado não ficou nada agradável.

Por isso surgiu a necessidade de ter controle dos elementos dessa classe e para não alterar a classe do framework eu criei uma outra classe adaptando o que já estava ótimo na original.

Além disso eu precisava controlar o posicionamento do texto desses campos.

Estou colocando, em anexo, uma imagem que mostra o uso da classe original e o uso da classe adaptada e em seguida postarei os códigos utilizados.

Caso tenham idéias de melhorias favor postar aqui para que todos tenham acesso.

abs.
Eliezer

Curso completo Meu Negócio Pronto

Use para si, ou transforme em um negócio: Inclui aulas e códigos-fontes
Gestor de conteúdo (SITE) + Loja Virtual (E-Commerce) + Emissor de Notas para infoprodutos

Meu negócio pronto Quero me inscrever agora!

Comentários (7)

Eliezer Silva - AUTOR DO POST 21/06/2013 (há 11 anos)

TMultiFieldPanel.class

<?php
/**
* MultiField Widget: Takes a group of input fields and gives them the possibility to register many occurrences
*
* @version 1.0
* @package widget_web
* @subpackage form
* @author Pablo Dall'Oglio
* @author Eliezer de Morais Silva - Alteração
* @copyright Copyright (c) 2006-2012 Adianti Solutions Ltd. (http://www.adianti.com.br)
* @license http://www.adianti.com.br/framework-license
* === Alteração ===
* Possibilidade de controlar os campos de entrada do form
*/
class TMultiFieldPanel extends TField
{
private $fields;
private $objects;
private $height;
private $width;
private $className;
private $formName;
private $widthPanel;//Tamanho do painel
private $heightPanel;
private $posPanelx;//posição da Grade multifield
private $posPanely;
private $posPanelBtx;//Posição dos botões
private $posPanelBty;
/**
* Class Constructor
* @param $name Name of the widget
*/
public function __construct($name)
{
// define some default properties
self::setEditable(TRUE);
self::setName($name);
$this->fields = array();
$this->height = 100;
}
/**
* Define the name of the form to wich the multifield is attached
* @param $name A string containing the name of the form
* @ignore-autocomplete on
*/
public function setFormName($name)
{
$this->formName = $name;
if ($this->fields)
{
foreach($this->fields as $name => $field)
{
$obj = $field->{'field'};
if ($obj instanceof TSeekButton)
{
$obj->setFormName($this->formName);
}
}
}
}
/**
* Add a field to the MultiField
* @param $name Widget's name
* @param $text Widget's label
* @param $object Widget
* @param $size Widget's size
* @param $inform Show the Widget in the form
* @param $x alinhamento de linha
* @param $y alinhamento de coluna
*/
public function addField($name, $text,$lblx,$lbly, TField $object, $size,$x,$y, $align = 'left', $inform = TRUE)
{
$obj = new StdClass;
$obj-> name = $name;
$obj-> text = $text;
$obj-> lblx = $lblx;
$obj-> lbly = $lbly;
$obj-> field = $object;
$obj-> size = $size;
$obj-> inform = $inform;
$obj-> align = $align;
$obj-> px = $x;
$obj-> py = $y;
$this->width += $size;
$this->fields[$name] = $obj;
}
/**
* Define the class for the Active Records returned by this component
* @param $class Class Name
*/
public function setClass($class)
{
$this->className = $class;
}
/**
* Returns the class defined by the setClass() method
* @return the class for the Active Records returned by this component
*/
public function getClass()
{
return $this->className;
}
/**
* Define the MultiField content
* @param $objects A Collection of Active Records
*/
public function setValue($objects)
{
$this->objects = $objects;
// This block is executed just to call the
// getters like get_virtual_property()
// inside the transaction (when the attribute)
// is set, and not after all (during the show())
if ($objects)
{
foreach ($this->objects as $object)
{
foreach($this->fields as $name => $obj)
{
$object->$name; // regular attribute
if ($obj-> field instanceof TComboCombined)
{
$attribute = $obj-> field->getTextName();
$object->$attribute; // auxiliar attribute
}
}
}
}
}
/**
* Return the post data
*/
public function getPostData()
{
if (isset($_POST[$this->name]))
{
$val = $_POST[$this->name];
$className = $this->getClass() ? $this->getClass() : 'stdClass';
$decoded = JSON_decode(stripslashes($val));
unset($items);
unset($obj_item);
$items = array();
foreach ($decoded as $std_object)
{
$obj_item = new $className;
foreach ($std_object as $subkey=>$value)
{
//substitui pq o ttable gera com quebra de linha no multifield
//$obj_item->$subkey = URLdecode($value);
$obj_item->$subkey = str_replace("\n",'',URLdecode($value));
}
$items[] = $obj_item;
}
return $items;
}
else
{
return '';
}
}
/**
* Define the MultiField height
* @param $height Height in pixels
*/
public function setHeight($height)
{
$this->height = $height;
}
/**
* Define the MultiField heightPanel
* @param $height Height in pixels
*/
public function setHeightPanel($height)
{
$this->heightPanel = $height;
}
/**
* Define the MultiField widthPanel
* @param $width Width in pixels
*/
public function setWidthPanel($width)
{
$this->widthPanel = $width;
}
/**
* Define the MultiField position
* @param $posx position in pixels
* @param $posy position in pixels
*/
public function setPosPanelxy($posx, $posy)
{
$this->posPanelx = $posx;
$this->posPanely = $posy;
}
/**
* Define the button's position
* @param $posx position in pixels
* @param $posy position in pixels
*/
public function setPosPanelBtxy($posx, $posy)
{
$this->posPanelBtx = $posx;
$this->posPanelBty = $posy;
}
/**
* Show the widget at the screen
*/
public function show()
{
// include the needed libraries and styles
TPage::include_css('lib/adianti/include/tmultifield/tmultifield.css');
TPage::include_js('lib/adianti/include/tmultifield/tmultifield.js');
if ($this->fields)
{
$table = new TTable;//Para receber os dados de Entrada
$panelCp = new TElement('div');
$panelCp->id = 'multiHead';
$panelCp->style = '
position: relative;
width: '.$this->widthPanel.'px;
height: '.$this->heightPanel.'px;
border-style: solid;
border-width: 1px;
border-color:#4682B4;
';
$mdr=array(); // mandatory
$fields=array();
$i=0;
foreach($this->fields as $name => $obj)
{
$label = new TLabel($obj-> text);
if ($obj-> inform)
{
/** Define o estilo do Label **/
$label->setProperty('style', '
position: absolute;
left: '.$obj->lblx.'px;
top: '.$obj->lbly.'px;
');
$panelCp->add($label);
/** Define o estilo do input **/
$div = new TElement('div');
$div->style = '
position: absolute;
left: '.$obj->px.'px;
top: '.$obj->py.'px;
';
$obj-> field->setProperty('align',$obj-> align);
$div->add($obj-> field);
$panelCp->add($div);
}
$fields[] = $name;
$post_fields[$name] = 1;
$obj-> field->setName($this->name.'_'.$name);
$obj-> field->setSize($obj-> size);
if (get_class($obj-> field) == 'TComboCombined')
{
$fields[] = $obj-> field->getTextName();
$obj-> field->setTextName($this->name.'_'.$obj-> field->getTextName());
$i++;
}
$i++;
}
$row=$table->addRow();
$row->addCell($panelCp);
$table->show();
}
// check whether the widget is non-editable
if (parent::getEditable())
{
// create three buttons to control the MultiField
$add = new TButton("{$this->name}btnStore");
$add->setLabel(TAdiantiCoreTranslator::translate('Register'));
//$add->setName("{$this->name}btnStore");
$add->setImage('ico_save2.png');
$add->addFunction("mtf{$this->name}.addRowFromFormFields()");
$del = new TButton("{$this->name}btnDelete");
$del->setLabel(TAdiantiCoreTranslator::translate('Delete'));
$del->setImage('remove.png');
$can = new TButton("{$this->name}btnCancel");
$can->setLabel(TAdiantiCoreTranslator::translate('Cancel'));
$can->setImage('ico_close.png');
/** div para controlar posição dos botões **/
$divPosBt = new TElement('div');
$divPosBt->style = '
position: absolute;
left: '.$this->posPanelBtx.'px;
top: '.$this->posPanelBty.'px;
';
$table = new TTable;
$row=$table->addRow();
$row->addCell($add);
$row->addCell($del);
$row->addCell($can);
/** Coloca os botões na div **/
$divPosBt->add($table);
$divPosBt->show();
}
/** div para controlar posição de TMultifield **/
$divPos = new TElement('div');
$divPos->style = '
position: absolute;
left: '.$this->posPanelx.'px;
top: '.$this->posPanely.'px;
';
// create the MultiField Panel
$panel = new TElement('div');
$panel->{'class'} = "multifieldDiv";
$divPos->add($panel);
$input = new THidden($this->name);
$panel->add($input);
// create the MultiField DataGrid Header
$table = new TTable;
$table-> id="{$this->name}mfTable";
$head = new TElement('thead');
$table->add($head);
$row = new TTableRow;
$head->add($row);
// fill the MultiField DataGrid
foreach($this->fields as $obj)
{
$c = $obj-> text;
if (get_class($obj-> field) == 'TComboCombined')
{
$row->addCell('ID');
}
$cell = $row->addCell($c);
$cell-> width=$obj-> size.'px';
}
$body = new TElement('tbody');
$table->add($body);
if ($this->objects)
{
foreach($this->objects as $obj)
{
if (isset($obj-> id))
{
$row = new TTableRow;
$row-> dbId=$obj-> id;
$body->add($row);
}
else
{
$row = new TTableRow;
$body->add($row);
}
foreach($fields as $name)
{
$cell = $row->addCell($obj->$name);
if (isset($obj-> size))
{
$cell-> width=$obj-> size.'px';
}
}
}
}
$panel->add($table);
$divPos->show();
echo '<script type="text/javascript">';
echo "var mtf{$this->name};";
//echo '$(document).ready(function() {';
echo "mtf{$this->name} = new MultiField('{$this->name}mfTable',{$this->width},{$this->height});\n";
$s = implode("','",$fields);
echo "mtf{$this->name}.formFieldsAlias = Array('{$s}');\n";
$fields = implode("','{$this->name}_",$fields);
echo "mtf{$this->name}.formFieldsName = Array('{$this->name}_{$fields}');\n";
echo "mtf{$this->name}.formPostFields = Array();\n";
foreach ($post_fields as $col =>$value)
{
echo "mtf{$this->name}.formPostFields['{$col}'] = '$value';\n";
}
$mdr = implode(',',$mdr);
echo "mtf{$this->name}.formFieldsMandatory = Array({$mdr});\n";
echo "mtf{$this->name}.storeButton = document.getElementsByName('{$this->name}btnStore')[0];\n";
echo "mtf{$this->name}.deleteButton = document.getElementsByName('{$this->name}btnDelete')[0];\n";
echo "mtf{$this->name}.cancelButton = document.getElementsByName('{$this->name}btnCancel')[0];\n";
echo "mtf{$this->name}.inputResult = document.getElementsByName('{$this->name}')[0];\n";
//echo '});';
echo '</script>';
}
}
?>

Eliezer Silva - AUTOR DO POST 21/06/2013 (há 11 anos)

funcoesGerais.jquery: nesse arquivo estou adicionando funções jquery de uso geral em meus formulários e talvez sirva para alguém também. Nele temos funções como: Enter funcionando com Tab, Transformar texto digitado em maiúsculo, alinhamento dos input gerados pelo Designer e aplicação de css em tempo real
$(document).ready(function(){
/** código a executar quando o DOM estiver pronto para receber instruções.
*
FAZ ENTER FUNCIONAR COMO TAB **/
textboxes = $("input, select, textarea");

if ($.browser.mozilla) {
$(textboxes).keypress (checkForEnter);
} else {
$(textboxes).keydown (checkForEnter);
}

/** Transforma todas as letras em maiúscula após digitar */
$('input').keyup(function() {
$(this).val($(this).val().toUpperCase());
});

/** Aplica estilo em todos input select*/
$("input").each(function(){
var inputAlign = $(this).attr("align");
$(this).css({"font-size":"11px","text-align":inputAlign});
});

$("select").css({"font-size":"11px"});

/** Aplica estilo em todas label */
$("label").css({"color":"#1567FB","font-size":"11px"});

/** Aplica estilo em todas fieldset */
$("legend label").css({"font-weight":"bold"});
});

function checkForEnter (event) {
console.log(this);
if (event.keyCode == 13 || event.keyCode == 9) {
currentBoxNumber = textboxes.index(this);

//Desenvolvido para códigos de barras que precisam continuar no mesmo campo e executar a ação
if(textboxes[currentBoxNumber].name == "COD_BARRAS"){
//Verifica se o valor é nulo, se for vai para o proximo campo
if (textboxes[currentBoxNumber].value == "") {
nextBox = textboxes[currentBoxNumber + 1];
nextBox.focus();
event.preventDefault();
return false;
} else {
//Continua no próprio campo e executa a ação no focus do outro campo
nextBox = textboxes[currentBoxNumber + 1];
nextBox.focus();
nextBox = textboxes[currentBoxNumber];
event.preventDefault();
nextBox.focus();
return false;
}
} else {
if (textboxes[currentBoxNumber + 1] != null) {
nextBox = textboxes[currentBoxNumber + 1];
nextBox.focus();
event.preventDefault();
return false;
} else {
//Será o próprio campo
nextBox = textboxes[currentBoxNumber];
event.preventDefault();
nextBox.focus();
return false;
}
}

}
}

Eliezer Silva - AUTOR DO POST 22/06/2013 (há 11 anos)

CORREÇÃO

Depois da atualização do framework ocorreu um erro em virtude das alterações provocadas pela referida atualização, que segue:

alterar <php private $formName; ?>
para <php protect $formName; ?></php></php>

Eliezer Silva - AUTOR DO POST 23/06/2013 (há 11 anos)

alterar

<?php private $formName; ?>

para

<?php protect $formName; ?>

Ademilson Nunes 26/06/2013 (há 11 anos)

Parabéns Eliezer,
sua implementação ficou muito bacana, o tema escolhido para seu TWindow ficou show de bola tbm. Vamos continuar contribuindo.

Forte abraço.

Pablo Dall'Oglio 27/06/2013 (há 11 anos)

Eliezer,

Muito legal meu amigo. Se não for pedir muito, você poderia postar sua contribuição na aba "Contribuições" no formato de componente?

Seguindo as diretrizes de criação de novos componentes:
www.adianti.com.br/framework-extensibility

Assim, você poderia postar um único ZIP contendo o necessário para descompactar o componente e sair usando.

Um exemplo para compactar um componente que precisa de uma classe PHP e de um arquivo JS:

zip -r TMultiFieldPanel.zip app/lib/widget/TMultiFieldPanel.clas.php app/lib/include/tmultifieldpanel/tmultifieldpanel.js

Assim, poderia usar o corpo da postagem para colocar as instruções de instalação, exemplo:

cd diretório-da-aplicação unzip TMultiFieldPanel.zip

abraços!
Pablo

Aurelio Freitas Nascimento 18/08/2015 (há 9 anos)

Algum link para download da nova aplicação?
Obrigado!