Alterar layout de um QuickForm

Alterar layout de um QuickForm Boa tarde, Pessoal estou colocando em anexo o form que desenvolvi com o THtmlRenderer, gostaria de aplicar este layout utilizando um QuickForm, se observarem realizei com o HTML, para aproximar o Label dos Inputs, e também para dentro do inputs concatenar variáveis. Seria possível isso com um QuickForm?...

Fechado

Eduardo Lopes 08/06/2016 (há 9 anos)

Boa tarde,
Pessoal estou colocando em anexo o form que desenvolvi com o THtmlRenderer, gostaria de aplicar este layout utilizando um QuickForm, se observarem realizei com o HTML, para aproximar o Label dos Inputs, e também para dentro do inputs concatenar variáveis.
Seria possível isso com um QuickForm?

Curso Dominando o Adianti Framework

O material mais completo de treinamento do Framework.
Curso em vídeo aulas + Livro completo + Códigos fontes do projeto ERPHouse.
Conteúdo Atualizado!

Dominando o Adianti Framework Quero me inscrever agora!

Comentários (7)

Eduardo Lopes - AUTOR DO POST 08/06/2016 (há 9 anos)

Este é o código do QuickForm o que sugerem?

 <?php
/**
 * OrdemServicoForm Registration
 * @author  Eduardo Lopes
 */
class OrdemServicoForm extends TPage
{
    protected $form; // form
    
    // Standard form methods
    use Adianti\\Base\\AdiantiStandardFormTrait; 
    
    /*** Class constructor and creates the page and the registration form ***/
    function __construct()
    {
        parent::__construct();
        
        // load the styles
        TPage::include_css('app/resources/styles.css');
        
        // defines the database and defines the active record 
        $this->setDatabase('dbprod');              
        $this->setActiveRecord('OrdemServico');     
        
        // creates the form and change CSS class and change style
        $this->form = new TQuickForm('form_OrdemServico');
        $this->form->class = 'tform';         
        $this->form->style = 'display: table;width:100%'; 
        
        // define the form title
        $this->form->setFormTitle('Ordem de Servico');
        
        // create the form fields
        $NR_SEQUENCIA = new TEntry('NR_SEQUENCIA');
        $NR_SEQ_LOCALIZACAO = new TEntry('NR_SEQ_LOCALIZACAO');
        $LOCALIZACAO = new TEntry('local_name');
        $NR_SEQ_EQUIPAMENTO = new TEntry('NR_SEQ_EQUIPAMENTO');
        $EQUIPAMENTO = new TEntry('equipamento_name');
        $CD_PESSOA_SOLICITANTE = new TEntry('CD_PESSOA_SOLICITANTE');
        $NOME_PESSOA = new TEntry('pessoa_name');
        $DT_ORDEM_SERVICO = new TEntry('DT_ORDEM_SERVICO');
        $DS_DANO_BREVE = new TEntry('DS_DANO_BREVE');
        $DS_DANO = new TText('DS_DANO');
        $SATISFACAO    = new TRadioGroup('IE_GRAU_SATISFACAO');
        
        $SATISFACAO->setLayout('horizontal');
        
        $items  = array();        
        $items ['O'] ='Ótimo';
        $items ['B'] ='Bom';        
        $items ['A'] ='Ruim';
        $items ['D'] ='Péssimo';
        
        $SATISFACAO->addItems($items);
        
        // add the fields
        $this->form->addQuickField('Número', $NR_SEQUENCIA,  200 );
        $this->form->addQuickField('Localização', $NR_SEQ_LOCALIZACAO,  200 );
        $this->form->addQuickField('Nr Seq Localizacao', $LOCALIZACAO,  200 );
        $this->form->addQuickField('Nr Seq Equipamento', $NR_SEQ_EQUIPAMENTO,  200 );
        $this->form->addQuickField('Nr Seq Equipamento', $EQUIPAMENTO,  200 );
        $this->form->addQuickField('Cd Pessoa Solicitante', $CD_PESSOA_SOLICITANTE,  200 );
        $this->form->addQuickField('Solicitante', $NOME_PESSOA,  200 );
        $this->form->addQuickField('Data', $DT_ORDEM_SERVICO,  200 );
        $this->form->addQuickField('Descrição', $DS_DANO_BREVE,  400 );
        $this->form->addQuickField('Descrição', $DS_DANO,  200 );
        $DS_DANO->setSize(400, 100);
        $this->form->addQuickField('Grau Satisfação', $SATISFACAO,  200 );
        
        if (!empty($NR_SEQUENCIA))
        {
            $NR_SEQUENCIA->setEditable(FALSE);
        }
         
        // create the form actions
        $this->form->addQuickAction(_t('Save'), new TAction(array($this, 'onSave')), 'fa:floppy-o');
        $this->form->addQuickAction(_t('New'),  new TAction(array($this, 'onEdit')), 'bs:plus-sign green');
        
        // vertical box container
        $container = new TVBox;
        $container->style = 'width: 100%';       
        $container->add($this->form);
        
        parent::add($container);
    }
}
?>

Nataniel Rabaioli 10/06/2016 (há 9 anos)

Eduardo, você pode modificar o layout do formulário através de CSS. Esse código que você postou já faz a inclusão de um CSS:

 <?php
TPage::include_css('app/resources/styles.css'); 
?>

Note que também é possível definir a classe do formulário:

 <?php
$this->form->class = 'tform'; 
?>

Para concatenar variáveis você pode modificar a função onEdit adicionando o seguinte, por exemplo:

 <?php
$object->local_name = $object->local_id . ' - ' . $object->descricao;
?>

Outra possibilidade seria criar uma função no model correspondente, do tipo:

 <?php
function get_local_name()
{
    return $this->id . ' - ' . $this->descricao;
}
?>

Eduardo Lopes - AUTOR DO POST 10/06/2016 (há 9 anos)

Boa tarde,
Nataniel obrigado pelo retorno tentei via CSS como você mencionou, mas achei inviável por conta do TQuickForm inserir alguns estilos em linha, optei por deixar o código chamando um HTML e o QuickForm da seguinte maneira, para brincar com o HTML:

 <?php
/**
 * OrdemServicoForm Registration
 * @author  Eduardo Lopes
 */
class OrdemServicoForm extends TPage
{
    private $quickform; 
    
    function __construct()
    {
        parent::__construct();
        
        // load the styles
        TPage::include_css('app/resources/styles.css');
        
        // create a quick form with action buttons
        $this->form = new TQuickForm;
        $this->form->class = 'tform';
        
        // create the form fields ocultos
        $NR_SEQUENCIA = new THidden('NR_SEQUENCIA');
        
        // create the form fields        
        $SATISFACAO    = new TRadioGroup('IE_GRAU_SATISFACAO');        
        $SATISFACAO->setLayout('horizontal');
                
        $items  = array();        
        $items ['O'] ='<img src="app/images/smile/otimo.png" height="100" width="100">';
        $items ['B'] ='<img src="app/images/smile/bom.png" height="100" width="100">';        
        $items ['A'] ='<img src="app/images/smile/ruim.png" height="100" width="100">';
        $items ['D'] ='<img src="app/images/smile/pessimo.png" height="100" width="100">';
        
        $SATISFACAO->addItems($items);
        
        // add the fields        
        $this->form->addQuickField('Grau de Satisfação:', $SATISFACAO);
         // add the fields ocultos
        $this->form->addQuickField('Número', $NR_SEQUENCIA);
                        
        // create the form actions
        $this->form->addQuickAction(_t('Save'), new TAction(array($this, 'onSave')), 'fa:floppy-o');
                
        try
        {
            // create the HTML Renderer
            $this->html = new THtmlRenderer('app/resources/ordem.html');
            
            $ordem = new OrdemServico();
            
            // define replacements for the main section
            $replace = array();
            $replace['Numero']         = $ordem->NR_SEQUENCIA;
            $replace['Solicitante']    = $ordem->CD_PESSOA_SOLICITANTE;
            $replace['Pessoa']         = $ordem->pessoa_name;
            $replace['Seq_Local']      = $ordem->NR_SEQ_LOCALIZACAO;
            $replace['Local']          = $ordem->local_name;
            $replace['Seq_Equip']      = $ordem->NR_SEQ_EQUIPAMENTO;
            $replace['Equipamento']    = $ordem->equipamento_name;
            $replace['Descricao']      = $ordem->DS_DANO_BREVE;
            $replace['Dano']           = $ordem->DS_DANO;
            
            // replace the main section variables
            $this->html->enableSection('main', $replace);
            
            // Table wrapper (form and HTML)
            $table = new TTable;
            $table->style = 'width: 100%'; 
            $table->addRow()->addCell($this->html);
            $table->addRow()->addCell($this->form);
            parent::add($table);
            TTransaction::close();
        }
        catch (Exception $e)
        {
            new TMessage('error', $e->getMessage());
        }
    } 
    
    function onLoad($param)
    {
        // Alterar icone no produto.form.xml
        // <icon>ico_next.png</icon>
        $key = $param['key'];               
        $this->onEdit( array('key'=>$key)); 
    }
    
    function onEdit($param)
    {
        try
        {
            if (isset($param['key']))
            {
                // get the parameter $key
                $key=$param['key'];
                
                TTransaction::open('dbprod');   // open a transaction with database 'samples'
                $object = new OrdemServico($key);        // instantiates object City
                
                $ordem = new OrdemServico($key);
            
                // define replacements for the main section
                $replace = array();
                $replace['Numero']         = $ordem->NR_SEQUENCIA;
                $replace['Solicitante']    = $ordem->CD_PESSOA_SOLICITANTE;
                $replace['Pessoa']         = $ordem->pessoa_name;
                $replace['Seq_Local']      = $ordem->NR_SEQ_LOCALIZACAO;
                $replace['Local']          = $ordem->local_name;
                $replace['Seq_Equip']      = $ordem->NR_SEQ_EQUIPAMENTO;
                $replace['Equipamento']    = $ordem->equipamento_name;
                $replace['Descricao']      = $ordem->DS_DANO_BREVE;
                $replace['Dano']           = $ordem->DS_DANO;
                $this->html->enableSection('main', $replace);
                
                $this->form->setData($object);   // fill the form with the active record data
                TTransaction::close();           // close the transaction
            }
            else
            {
                $this->form->clear();
            }
        }
        catch (Exception $e) // in case of exception
        {
            // shows the exception error message
            new TMessage('error', $e->getMessage());
            // undo all pending operations
            TTransaction::rollback();
        }
    } 
    
    function onSave()
    {
        try
        {
            $this->form->setData($data = $this->form->getData());
            TSession::setValue('hospital', (array) $data);
            
            TTransaction::open('dbprod'); // abre uma transação
            $dbh = TTransaction::get(); // obtém a conexão
            $dbh->exec(" UPDATE MAN_ORDEM_SERVICO SET IE_GRAU_SATISFACAO = '$data->IE_GRAU_SATISFACAO' where NR_SEQUENCIA = $data->NR_SEQUENCIA ");
            $this->form->setData($data);   // fill the form with the active record data
            
            $ordem = new OrdemServico($data->NR_SEQUENCIA);
            
            // define replacements for the main section
            $replace = array();
            $replace['Numero']         = $ordem->NR_SEQUENCIA;
            $replace['Solicitante']    = $ordem->CD_PESSOA_SOLICITANTE;
            $replace['Pessoa']         = $ordem->pessoa_name;
            $replace['Seq_Local']      = $ordem->NR_SEQ_LOCALIZACAO;
            $replace['Local']          = $ordem->local_name;
            $replace['Seq_Equip']      = $ordem->NR_SEQ_EQUIPAMENTO;
            $replace['Equipamento']    = $ordem->equipamento_name;
            $replace['Descricao']      = $ordem->DS_DANO_BREVE;
            $replace['Dano']           = $ordem->DS_DANO;
            $this->html->enableSection('main', $replace);
            
            new TMessage('info', 'Obrigado por contribuir com a sua resposta !');
            
            TTransaction::close(); // close transaction 
            
        }
        catch (Exception $e) // in case of exception
        {
            // shows the exception error message
            new TMessage('error', $e->getMessage());
            // undo all pending operations
            TTransaction::rollback();
        }  
    }     
}
?>

Queria enxugar o código agora, se alguém tiver sugestões agradeço.

Nataniel Rabaioli 10/06/2016 (há 9 anos)

Eduardo, para diminuir um pouco o código você poderia criar uma função pra preencher e retornar esse array $replaces, aí ao invés de repetir o mesmo trecho toda vez você passa a chamar a função criada:

 <?php
function replaces($ordem)
{
    $replace = array();
    $replace['Numero']         = $ordem->NR_SEQUENCIA;
    $replace['Solicitante']    = $ordem->CD_PESSOA_SOLICITANTE;
    ...
    return $replace;
}
function onEdit($param)
{
   ...
   $replace = $this->replaces($ordem);
   ...
}
?>

Yanko Santos Costa 07/12/2016 (há 8 anos)

Bom dia Eduardo!

Fiquei muito interessado nesses form's personalizados e gostaria de me aprofundar um pouco mais.
Você poderia postar o código do seu app/resources/ordem.html. Quero saber como é que faz essa identificação das variáveis no input

Eduardo Lopes - AUTOR DO POST 07/02/2017 (há 8 anos)

Bom dia Yanko!

Desculpe a demora no retorno, só visualizei ontem.

<div style="width: 100%"> <div style="clear:both"> <form class="tform" style="display: table;width:100%" enctype="multipart/form-data" name="form_OrdemServico" id="form_OrdemServico" method="post"> <table width="100%"> <tbody><tr class="tformtitle"><td colspan="2"><label>Ordem de Servico</label></td></tr> <tr> <td align=right width="10%"><label>Número:</label></td> <td><input disabled="disabled" class="tfield_disabled" name="NR_SEQUENCIA" value={$Numero} style="width:200px;" readonly="1" onmouseover="style.cursor='default'" type="text"></td> </tr> <tr> <td align=right><label>Solicitante:</label></td> <td><input disabled="disabled" class="tfield_disabled" name="NR_SEQ_LOCALIZACAO" value="{$Solicitante} - {$Pessoa}" style="width:200px;" type="text"></td> </tr> <tr> <td align=right><label>Localização:</label></td> <td><input disabled="disabled" class="tfield_disabled" name="local_name" value="{$Seq_Local} - {$Local}" style="width:50%;" type="text"></td> </tr> <tr> <td align=right><label>Equipamento:</label></td> <td><input disabled="disabled" class="tfield_disabled" name="NR_SEQ_EQUIPAMENTO" value="{$Seq_Equip} - {$Equipamento}" style="width:50%;" type="text"></td> </tr> <tr> <td align=right><label>Descrição:</label></td> <td><input disabled="disabled" class="tfield_disabled" name="equipamento_name" value="{$Descricao}" style="width:50%;" type="text"></td> </tr> <tr> <td align=right><label>Dano:</label></td> <td><textarea disabled="disabled" class="tfield_disabled" name="DS_DANO" style="width:50%;;height:100px">{$Dano}</textarea></td> </tr> </tbody> </table> </form> </div> </div>

Julio Costa 07/03/2017 (há 8 anos)

Eduardo Lopes, entra em contato comigo por favor,preciso muito tirar uma duvida em relação a esse codigo!!!