Lançado Adianti Framework 7.6!
Clique aqui para saber mais
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  
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 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 (13)


JN

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

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

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

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

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

Fred,

Manda ai.......
JA

acompanhando ...
IF

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

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

Os outros métodos onEdit, onSave... continuam sendo os mesmo que conhecemos!
IF

/Users/ivanfernandes/Desktop/Captura de Tela 2018-05-31 às 18.45.13.png
FA

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

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. ?>