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.
Desde ja agradeço pela força.
- <?php
- class FormBuilderView extends TPage
- {
- private $form;
-
- public function __construct(){
- parent::__construct();
-
- $this->form = new BootstrapFormBuilder;
- $this->form->setFormTitle("BootstrapFormBuilder");
-
- $field1 = new TEntry("Field1");
- $field2 = new TEntry("Field2");
- $field3 = new TEntry("Field3");
- $field4 = new TEntry("Field4");
- $field5 = new TEntry("Field5");
- $field6 = new TEntry("Field6");
- $field7 = new TEntry("Field7");
- $field8 = new TEntry("Field8");
- $field9 = new TEntry("Field9");
- $field10 = new TEntry("Field10");
- $field11 = new TEntry("Field11");
-
- $field1->setSize("100%");
- $field2->setSize("100%");
- $field3->setSize("100%");
- $field4->setSize("100%");
- $field5->setSize("100%");
- $field6->setSize("100%");
- $field7->setSize("50%");
- $field8->setSize("50%");
- $field9->setSize(150);
- $field10->setSize(600);
- $field11->setSize(200);
-
- $label1 = new TLabel("Dados Cadastrais");
- $label2 = new TLabel("Label2");
- $label3 = new TLabel("Label3");
- $label4 = new TLabel("Label4");
- $label5 = new TLabel("Label5");
- $label6 = new TLabel("Label6");
- $label7 = new TLabel("Label7");
- $label8 = new TLabel("Label8");
- $label9 = new TLabel("Resultado de Consulta");
- $label10 = new TLabel("Label10");
- $label11 = new TLabel("Label11");
- $label12 = new TLabel("Label12");
-
-
- $label1->setFontColor("red");
- $label1->setFontSize(14);
- $label1->style = "text-align: left; border-bottom: 1px solid #c0c0c0; widht: 100%";
-
- $label9->setFontColor("blue");
- $label9->setFontSize(14);
- $label9->style = "text-align: left; border-bottom: 1px solid #c0c0c0; widht: 100%";
-
- $this->form->appendPage("Cadastro");
- $this->form->addFields([ $label1 ]);
- $this->form->addFields([ $label2 ], [ $field1 ] );
- $this->form->addFields([ $label3 ], [ $field2 ], [ $field3 ]);
- $this->form->addFields([ $label4 ], [ $field4 ], [ $label5 ], [ $field5 ] );
- $this->form->addFields([ $label6 ], [ $field6 ], [ $label7 ], [ $field7, $field8 ]);
-
- /*
- Até aqui todos os controles acima na pagina ficam responsivel. A partir do momento que incluo
- um TNotebook com duas pagina dentro da pagina "Cadastro" do form, conforme o codigo abaixo
- uso TTable para ancorar os controles porem estes controles não ficam resposniveis.
-
- Como fazer para que os controles dentros destes container abaixo fiquem resposil ?????????
- Estou fazendo algo errado ???????
- devo criar um form e colocar dentro de cada aba do TNotebook ???????
- */
-
- /* Inicio do bloco com problema relatado acima */
-
- $nb = new BootstrapNotebookWrapper(new TNotebook);
-
- $tbdadoscadastrais = new TTable;
- $tbdadoscadastrais->style = "margin-top:10px";
- $tbdadoscadastrais->addRowSet($label10, [$field9, $label11 , $field10]);
- $nb->appendPage("Dados Cadastrais", $tbdadoscadastrais);
-
- $tboutrosdados = new TTable;
- $tboutrosdados->style = "padding-top:10px";
- $tboutrosdados->addRowSet($label12, $field11);
- $nb->appendPage("Outros Dados", $tboutrosdados);
-
- $this->form->addContent([ $nb ]);
-
- /* Fim do bloco com o problema relatado acima */
-
- $this->form->appendPage("Consulta");
- $this->form->addFields([ $label9 ]);
-
-
- parent::add($this->form);
- }
- }
- ?>
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
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
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
Em primeiro lugar, evite usar tamanhos fixos para os campos:
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.
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.
Fred,
Manda ai.......
acompanhando ...
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)
O formulário html
Os outros métodos onEdit, onSave... continuam sendo os mesmo que conhecemos!
/Users/ivanfernandes/Desktop/Captura de Tela 2018-05-31 às 18.45.13.png
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.
Opa... escrevi errado ali: