Conheça Características Quem usa Galeria Cursos Docs Fórum
Downloads
Posts Fique por dentro Sobre o Fórum Minha conta
Problema com layout responsivo Olá a todos, estou estudando a framework Adianti, estou tentando montar um protótipo para apresentar na empresa onde trabalho, pois pretendemos usar a framework nos projetos da empresa, mas estou tendo dificuldades em assimilar algumas coisas para a montagem de um layout correto. Portanto espero que alguem possa me ajudar com este problema. Desde ja agradeço pela força. ...
JN
Problema com layout responsivo  
Jesus Aparecido Souza Neves 16/05/2018 (há 7 anos)
Olá a todos, estou estudando a framework Adianti, estou tentando montar um protótipo para apresentar na empresa onde trabalho, pois pretendemos usar a framework nos projetos da empresa, mas estou tendo dificuldades em assimilar algumas coisas para a montagem de um layout correto. Portanto espero que alguem possa me ajudar com este problema.

Desde ja agradeço pela força. 

 
  1. <?php
  2. class FormBuilderView extends TPage
  3. {
  4.     private $form;
  5.     
  6.     public function __construct(){
  7.         parent::__construct();
  8.         
  9.         $this->form = new BootstrapFormBuilder;
  10.         $this->form->setFormTitle("BootstrapFormBuilder");
  11.         
  12.         $field1 = new TEntry("Field1");
  13.         $field2 = new TEntry("Field2");
  14.         $field3 = new TEntry("Field3");
  15.         $field4 = new TEntry("Field4");
  16.         $field5 = new TEntry("Field5");
  17.         $field6 = new TEntry("Field6");
  18.         $field7 = new TEntry("Field7");
  19.         $field8 = new TEntry("Field8");
  20.         $field9 = new TEntry("Field9");
  21.         $field10 = new TEntry("Field10");
  22.         $field11 = new TEntry("Field11");
  23.         
  24.         $field1->setSize("100%");
  25.         $field2->setSize("100%");
  26.         $field3->setSize("100%");
  27.         $field4->setSize("100%");
  28.         $field5->setSize("100%");
  29.         $field6->setSize("100%");
  30.         $field7->setSize("50%");
  31.         $field8->setSize("50%");
  32.         $field9->setSize(150);
  33.         $field10->setSize(600);
  34.         $field11->setSize(200);
  35.         
  36.         $label1 = new TLabel("Dados Cadastrais");
  37.         $label2 = new TLabel("Label2");
  38.         $label3 = new TLabel("Label3");
  39.         $label4 = new TLabel("Label4");
  40.         $label5 = new TLabel("Label5");
  41.         $label6 = new TLabel("Label6");
  42.         $label7 = new TLabel("Label7");
  43.         $label8 = new TLabel("Label8");
  44.         $label9 = new TLabel("Resultado de Consulta");
  45.         $label10 = new TLabel("Label10");
  46.         $label11 = new TLabel("Label11");
  47.         $label12 = new TLabel("Label12");
  48.         
  49.         
  50.         $label1->setFontColor("red");
  51.         $label1->setFontSize(14);
  52.         $label1->style = "text-align: left; border-bottom: 1px solid #c0c0c0; widht: 100%";
  53.         
  54.         $label9->setFontColor("blue");
  55.         $label9->setFontSize(14);
  56.         $label9->style = "text-align: left; border-bottom: 1px solid #c0c0c0; widht: 100%";
  57.                 
  58.         $this->form->appendPage("Cadastro");
  59.         $this->form->addFields([ $label1 ]);
  60.         $this->form->addFields([ $label2 ], [ $field1 ] );
  61.         $this->form->addFields([ $label3 ], [ $field2 ], [ $field3 ]);
  62.         $this->form->addFields([ $label4 ], [ $field4 ], [ $label5 ], [ $field5 ] );
  63.         $this->form->addFields([ $label6 ], [ $field6 ], [ $label7 ], [ $field7, $field8 ]);
  64.         
  65.         /*
  66.         Até aqui todos os controles acima na pagina ficam responsivel. A partir do momento que incluo
  67.         um TNotebook com duas pagina dentro da pagina "Cadastro" do form, conforme o codigo abaixo
  68.         uso TTable para ancorar os controles porem estes controles não ficam resposniveis.
  69.         
  70.         Como fazer para que os controles dentros destes container abaixo fiquem resposil ?????????
  71.         Estou fazendo algo errado ???????
  72.         devo criar um form e colocar dentro de cada aba do TNotebook ???????
  73.         */
  74.         
  75.         /* Inicio do bloco com problema relatado acima */
  76.         
  77.         $nb = new BootstrapNotebookWrapper(new TNotebook);
  78.         
  79.         $tbdadoscadastrais = new TTable;
  80.         $tbdadoscadastrais->style = "margin-top:10px";
  81.         $tbdadoscadastrais->addRowSet($label10, [$field9, $label11 , $field10]);
  82.         $nb->appendPage("Dados Cadastrais", $tbdadoscadastrais);
  83.         
  84.         $tboutrosdados = new TTable;
  85.         $tboutrosdados->style = "padding-top:10px";
  86.         $tboutrosdados->addRowSet($label12, $field11);
  87.         $nb->appendPage("Outros Dados", $tboutrosdados);
  88.         
  89.         $this->form->addContent([ $nb ]);
  90.         
  91.         /* Fim do bloco com o problema relatado acima */
  92.         
  93.         $this->form->appendPage("Consulta");
  94.         $this->form->addFields([ $label9 ]);
  95.         
  96.         
  97.         parent::add($this->form);
  98.     }
  99. }
  100. ?>

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 (13)

JN
Jesus Aparecido Souza Neves - AUTOR DO POST       16/05/2018 (há 7 anos)

Peço desculpas, deixei citar algumas informações importantes para melhor entender minha duvida.

1 - a duvida esta em formato de comentário dentro do trecho de código colocado nesta mensagem
2 - estou usando o theme3 que vem junto com a framework
JN
Jesus Aparecido Souza Neves - AUTOR DO POST       16/05/2018 (há 7 anos)

Peço desculpas, deixei citar algumas informações importantes para melhor entender minha duvida.

1 - a duvida esta em formato de comentário dentro do trecho de código colocado nesta mensagem
2 - estou usando o theme3 que vem junto com a framework
VP
Valdiney Pereira       16/05/2018 (há 7 anos)

Olá Jesus, boa noite!
Sou novato também no framework, mas sugiro você usar o TPanelGroup para fazer a ancoragem dos outros controles, pode ser que a resposividade fique melhor.

atc

Valdiney
NR
Nataniel Rabaioli       17/05/2018 (há 7 anos)

Em primeiro lugar, evite usar tamanhos fixos para os campos: 
 
  1. <?php
  2. $field9->setSize(150);
  3. $field10->setSize(600);
  4. $field11->setSize(200);
  5. ?>

A classe BootstrapFormBuilder utiliza o conceito de grid do bootstrap para a questão da responsividade. Veja no link abaixo:
https://getbootstrap.com/docs/4.0/layout/grid/

Nesse caso sugiro trocar a TTable por divs seguindo essa ideia.
FA
Fred Azevêdo       17/05/2018 (há 7 anos)

Pessoal, bom dia! Eu estou utilizando os conceitos de VIEWS para layout 100% responsivo. Venho do Laravel e pensei que fosse parecido o conceito de views, fiz o teste e deu certo. Hoje tenho um layout da forma que desejar e isso sem mexer em nada do Adianti, posso atualizar o FW sem problemas.
RB
Rubens Bispo       23/05/2018 (há 7 anos)

Fred,

Manda ai.......
JA
Júnior Andrade       26/05/2018 (há 7 anos)

acompanhando ...
IF
Ivan Fernandes       31/05/2018 (há 6 anos)

Boas pessoal. Uma idéia que eu uso para formulário utilizando o conceito de VIEWS.
Baseado no formulário CustomerFormView do tutor

**Classe da aplicação (controle) 
 
  1. <?php
  2. class CustomerForm extends TPage
  3. {
  4.     protected $form; // form
  5.     private $html;
  6.     
  7.     /**
  8.      * Form constructor
  9.      * @param $param Request
  10.      */
  11.     public function __construct( $param )
  12.     {
  13.         parent::__construct();
  14.         
  15.         // creates the form
  16.         $this->form = new TForm('form_customer');
  17.         
  18.         // create the form fields
  19.         $id = new TEntry('id');
  20.         $name = new TEntry('name');
  21.         $address = new TEntry('address');
  22.         $city_id = new TDBCombo('city_id','samples','City', 'id', 'name', 'name');
  23.         $phone = new TEntry('phone');
  24.         $birthdate = new TDate('birthdate');
  25.         $status = new TCombo('status');
  26.         $email = new TEntry('email');
  27.         $category_id    = new TDBCombo('category_id', 'samples', 'Category', 'id', 'name');
  28.         $gender         = new TRadioGroup('gender');
  29.         
  30.         // add the combo options
  31.         $gender->addItems( [ 'M' => 'Male', 'F' => 'Female' ] );
  32.         $status->addItems( [ 'S' => 'Single', 'C' => 'Committed', 'M' => 'Married' ] );
  33.         $gender->setLayout('horizontal');
  34.         
  35.         //property fields
  36.         $birthdate->setMask('dd/mm/yyyy');
  37.         $name->addValidation('Name', new TRequiredValidator);
  38.         $id->setEditable(false);
  39.         $id->setSize('100%');
  40.         $name->setSize('100%');
  41.         $address->setSize('100%');
  42.         $city_id->setSize('100%');
  43.         $phone->setSize('100%');
  44.         $birthdate->setSize('100%');
  45.         $status->setSize('100%');
  46.         $email->setSize('100%');
  47.         $category_id->setSize('100%');
  48.         $gender->setSize('100%');
  49.         
  50.         //Buttons actions
  51.         $btn_save = TButton::create('save', array($this, 'onSave'), 'Salvar', 'fa:check');
  52.         $btn_save->class = 'btn btn-sm btn-success';
  53.         $btn_cancel = TButton::create('cancel', array('CustomerDataGridView', 'onReload'), 'Voltar', 'fa:remove');
  54.         $btn_cancel->class = 'btn btn-sm btn-danger';
  55.         
  56.         $this->html = new THtmlRenderer('app/resources/customerform.html');     
  57.         $replace = array();
  58.         $replace['id'] = $id;
  59.         $replace['name'] = $name;
  60.         $replace['address'] = $address;
  61.         $replace['city_id'] = $city_id;
  62.         $replace['phone'] = $phone;
  63.         $replace['birthdate'] = $birthdate;
  64.         $replace['status'] = $status;
  65.         $replace['email'] = $email;
  66.         $replace['category_id'] = $category_id;
  67.         $replace['gender'] = $gender;
  68.         
  69.         $replace['btn_save'] = $btn_save;
  70.         $replace['btn_cancel'] = $btn_cancel;
  71.         
  72.         $this->html->enableSection('main', $replace);
  73.         
  74.         $this->form->setFields(array($id, $name, $address, $city_id, $phone, $birthdate, $status, $email,
  75.         $category_id, $gender, $btn_save, $btn_cancel));
  76.        
  77.         // vertical box container
  78.         $container = new TVBox;
  79.         $container->style = 'width: 100%';
  80.         // $container->add(new TXMLBreadCrumb('menu.xml', __CLASS__));
  81.         $container->add($this->html);
  82.         
  83.         parent::add($container);
  84.     }
  85. }
  86. ?>

IF
Ivan Fernandes       31/05/2018 (há 6 anos)

O formulário html 

 
  1. <?php
  2. <!--[main]-->
  3. <form class='form-horizontal' id='form_customer' name='form_customer'>
  4.     <div class="panel panel-default">
  5.       <div class="panel-heading">
  6.         <h3 class="panel-title">Customer</h3>
  7.       </div>
  8.       <div class="panel-body">
  9.           <div class="form-group">
  10.             <label class="col-sm-2 control-label">Id:</label>
  11.             <div class="col-sm-2">
  12.               {$id}
  13.             </div>
  14.           </div>
  15.           <div class="form-group">
  16.             <label class="col-sm-2 control-label">Name:</label>
  17.             <div class="col-sm-10">
  18.               {$name}
  19.             </div>
  20.           </div>
  21.           <div class="form-group">
  22.             <label class="col-sm-2 control-label">Address:</label>
  23.             <div class="col-sm-10">
  24.               {$address}
  25.             </div>
  26.           </div>
  27.           <div class="form-group">
  28.             <label class="col-sm-2 control-label">City:</label>
  29.             <div class="col-sm-6">
  30.               {$city_id}
  31.             </div>
  32.           </div>
  33.           <div class="form-group">
  34.             <label class="col-sm-2 control-label">Phone:</label>
  35.             <div class="col-sm-4">
  36.               {$phone}
  37.             </div>
  38.             <label class="col-sm-2 control-label">Birthdate:</label>
  39.             <div class="col-sm-4">
  40.               {$birthdate}
  41.             </div>
  42.           </div>
  43.           <div class="form-group">
  44.             <label class="col-sm-2 control-label">Status:</label>
  45.             <div class="col-sm-4">
  46.               {$status}
  47.             </div>
  48.             <label class="col-sm-2 control-label">Email:</label>
  49.             <div class="col-sm-4">
  50.               {$email}
  51.             </div>
  52.           </div>
  53.           <div class="form-group">
  54.             <label class="col-sm-2 control-label">Category:</label>
  55.             <div class="col-sm-4">
  56.               {$category_id}
  57.             </div>
  58.             <label class="col-sm-2 control-label">Gender:</label>
  59.             <div class="col-sm-4">
  60.               {$gender}
  61.             </div>
  62.           </div>
  63.        
  64.       </div>
  65.       <div class="panel-footer">
  66.           {$btn_save}{$btn_cancel}
  67.       </div>
  68.     </div>
  69. </form>
  70. ?>
IF
Ivan Fernandes       31/05/2018 (há 6 anos)

Os outros métodos onEdit, onSave... continuam sendo os mesmo que conhecemos!
IF
Ivan Fernandes       31/05/2018 (há 6 anos)

/Users/ivanfernandes/Desktop/Captura de Tela 2018-05-31 às 18.45.13.png
FA
Fred Azevêdo       01/06/2018 (há 6 anos)

Desculpa a demora Rubnens mas o Ivan colocou ai como se faz.
Sobre os métodos todos continuam sendo o mesmo.
Outra coisa, para que os componentes nativos fiquem responsivos é necessário que use Javascript nos elementos do html.

exemplo:

<php?
<script type="text/javascript">
$("input").attr('class', 'form-control');
$("select").attr('class', 'form-control');
$('input[type=checkbox]').attr('class', 'flat-red');
</script>
?>

Ou seja, terá que mudar o nome das classes nativas via JS para que todos os componentes se tornem responsivos. Lembrando que, o nome das classes vai depender se vc usa bootstrap ou materialize.

Mais uma vez peço desculpas pela demora, qualquer coisa tem meu Skype: fredkeyster. Onde posso responder mais rápido. Abraço.
FA
Fred Azevêdo       01/06/2018 (há 6 anos)

Opa... escrevi errado ali: 

 
  1. <?php
  2. //Isso é em uma página HTML e não PHP. Tipo o Blade do Laravel
  3. <script type="text/javascript"> 
  4. $("input").attr('class', 'form-control'); 
  5. $("select").attr('class', 'form-control'); 
  6. $('input[type=checkbox]').attr('class', 'flat-red'); 
  7. </script> 
  8. ?>