Adianti Framework 3.0 de Programador Para Programador - Alexandre E. Souza

Adianti Framework 3.0 Na Pratica

Alexandre E. Souza Esse livro está à venda em http://leanpub.com/a http://leanpub.com/adiantiframeworknap diantiframeworknapratica ratica Essa versão foi publicada em 2016-05-19

This is a Leanpub a Leanpub book. book. Leanpub empowers authors and publishers with the Lean Publishing process. Lean process. Lean Publishing is Publishing is the act of publishing an in-progress ebook using lightweight tools and many iterations to get reader feedback, pivot until you have the right book and build traction once you do. © 2014 - 2016 Alexandre E. Souza

Conteúdo Quem Sou eu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

Introdução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

O que é Adianti Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

Instalação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

Componentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

TTable . . TPanel . . TNoteBook TScroll . . TFrame . . TVBox . . THBox . . TWindow

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. 5 . 6 . 7 . 8 . 8 . 9 . 11 . 11

Dialogs TMessage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Info . . . . . Error . . . . TQuestion . InputDialog

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

13

. 13 . 13 . 14 . 14

Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

TQuickForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 TEntry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 TPassword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 TDate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

TSpinner . . . TSlider . . . . TText . . . . . TImage . . . . TCheckGroup

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

22

22 22 22 22 23

CONTEÚDO

TRadioGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . THtmlEditor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . TLabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23 23 24

Grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

25

TQuickGrid Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 TDataGrid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Grid com Componentes de formulário . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Condições para Opções . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

39

Quem Sou eu Meu Nome é Alexandre Evangelista de Souza, sou desenvolvedor php e um amante de tecnologias procuro sempre apreender novas tecnologias e aplicalas na linguagem que mais uso, o php.

1

Introdução Apos o lançamento da nossa primeira versão do ebook adianti na pratica 2.0, tivemos um otimo feedback dos leitores e amigos da comunidade, sendo assim nessa edição irei, preencher algumas das lacunas que foram mostradas da versão anterior. todos os exmplos usados estam em <
2

O que é Adianti Framework O Adianti framework é um framework desenvolvido pela Adianti Solutions com o foco de desenvolver sistemas ele usa uma arquitetura paseada em componentes , tem uma estrutura bem estruturada e segura , do qual permite aos usuarios criarem componetes como serviços, mesmo o seu foco sendo desenvolvimento de sistema é perfeitamente possivel desenvolver sites com ele, usando o framework para o painel admin e criando uma API Rest para ser consumida pelo angular, esse assunto sera abordado em um dos nossos futuros ebooks. O Adianti framework conta com uma comunidade ativa tanto no seu forum quando no facebook a comunidade esta crescendo e o framework sempre sofre alterações, para melhorias, e concerto de bugs

3

Instalação A instalação do Adianti framework é bem simples de ser realizada, basta entrar no site Adianti framework² , após isso basta clicar na opção baixar adianti framework, a segunda opção é para o desenvolvimento em desktop, que sera abordada em outra edição da serie de Programador para Programador. Feito isso ira baixar o framework compactado, basta descompactar e colocar na pasta raiz do seu apache. ²http://www.adianti.com.br/framework-download

4

Componentes Vamos conhecer alguns dos componentes do framework, nosso foco é conhecer a versão 2.0 , assim para aqueles que nunca usaram , não se preocupem iremos abordar todos os componentes com exemplos, detalhados. Containers Os Containers são componentes onde podemos inserir outros componentes , para alinha-los de melhor maneira, vamos ver um exemplo de cada um deles.

TTable Nosso primeiro container sera a TTable, que é a tabela do HTML esse container organiza os objetos em tabelas, onde o método addRowSet, permite adicionar vários objetos em uma mesma linha da tabela, no nosso exemplo temos 2 campos nome e sobrenome, não se preocupem com os componentes TEntry, iremos velos futuramente. Essa tabela é padrão, mas podemos otimiza lá , para que possa atender nossa necessidade, essa estrutura usada é a padrão do framework todas as paginas devem estender alguma class como TPage, TWindow, TStandardList etc.., veremos todas em nossos exemplos. TTableView

1

2 3 class TTableView extends TPage 4

{

5

function __construct(){

6

parent::__construct();

7

$table = new TTable(); //componente TTable

9

$nome = new TEntry('nome');

10

11

$sobrenome = new TEntry('sobrenome'); $table-> addRowSet(new TLabel('nome'),$nome); // linha com 2 componentes

12

$table-> addRowSet(new TLabel('sobrenome'),$sobrenome);

13

parent:: add($table);

8

14

}

15

}

16

?>

Vamos ver essa tabela otimizada, podemos mudar o espaço entre as celulas, e as propriedades css 5

Componentes

6

ViewTPanel

1

2 3 class TTableView extends TPage 4

{

5


6


7

$table = new TTable(); //componente TTable

9


10

$sobrenome = new TEntry('sobrenome');

11

$table-> addRowSet(new TLabel('nome'),$nome); // linha com 2 componentes

12


13

parent:: add($table);

8

14

}

15

}

16

?>

TPanel Como podem ver o uso da TTable é bem simples , podemos usa-la para alinhar componentes em formulários como veremos mais adianti, seguindo nossa linha de raciocínio temos o TPanel, esse painel é interessante pois permite alinharmos os componentes dentro dele manualmente. ViewTPanel

1

2 class ViewTPanel extends TPage 3

{

4


5


6

$panel = new TPanel(500,500);

7

$panel-> style ="border: 1px solid #000;";

8


9 10

//$nome->setSize(200); caso queira facilitar os calculos coloque uma largura\ n\

11 12

os componentes $lnome = new TLabel('nome');

13

//$lnome->setSize(50);

14

$panel->put($lnome, 0,50); //componente,coluna, linha

15

$panel->put($nome,40,40);

Componentes 16

parent:: add($panel);

17

7

}

18

}

19

?>

o TPanel é mais flexível em aspecto de posição , podemos editar a opção style, como a tabela, ate mesmo colocar uma class usando $panel->class dessa forma podemos ter painéis, estilizados.

TNoteBook Esse componente é um dos mais interessantes, ele permite organizar os componenstes em abas, e pode ser combinado com o TPanel ou a Table ou com ambos. A Grande novidade da versão 3.0 é poder adcionar o estilo bootstrap 3 em alguns componentes tais como o TNotebook ViewTNoteBook

1

{

4


5


6


7

$panel-> style ="border: 1px solid #000;";

8


9 10

//$nome->setSize(200); caso queira facilitar os calculos coloque uma largura\ n\

11

os componentes

12

$lnome = new TLabel('nome');

13

//$lnome->setSize(50);

14

$panel->put($lnome, 0,50); //componente,coluna, linha

15

$panel->put($nome,40,40);

16

$table = new TTable();

17

$table-> style = "border:1px solid #000";

18

$nome2 = new TEntry('nome2');

19

$sobrenome = new TEntry('sobrenome');

20

$table-> addRowSet(new TLabel('nome2'),$nome2);

21


//adciona o estilo bootstrap no notebook $notebook = new BootstrapNotebookWrapper(new TNotebook( 600,320)); //largura e\

22 23 24

Componentes

8

25 altura 26

$notebook-> appendPage('Tabela',$table);

27

$notebook-> appendPage('Panel',$panel);

28

parent:: add($notebook);

29

}

30 31

?>

TScroll Este componente cria uma barra de rolagem dentro de um container, caso tenha uma quantidade de componente alem do tamanho do container em questão, vamos ao modo de uso, usaremos em um TNotebook. ViewTScroll

1

2 class ViewTScroll extends TPage 3

{

4


5


6

$scroll = new TScroll(); // cria o scroll

7

$scroll-> setSize(450,300); // largura e altura

8


9

$notebook = new TNotebook(500,400); //largura e altura

10

$scroll-> add($panel);

11

$notebook-> appendPage('Panel',$scroll);

12


13

}

14

}

15

?>

Como podem ver temos um panel dentro do TScroll, se o componente que estiver dentro do TScroll tiver uma altura ou largura maiores, que do TScroll ele ira criar as barras de rolagem para que o usuário possa utilizar, esse componente é útil quando se ter formulários grandes.

TFrame Este componente tem um uso interessante, segundo exemplos do próprio tudor alguns componentes , podem ter interação direto via jquery, para mostrar ou esconder componentes, usuário o Notebook para mostrar o uso desse componente , lembrando que pode ser combinado com outro container.

Componentes

9

ViewTFrame

1

2 class ViewTFrame extends TPage 3

{

4


5


6

$cpf = new TEntry('cpf');

7

$rg = new TEntry('rg');

8

9

$fields = new TTable(); $fields-> addRowSet(new TLabel('CPF:'),$cpf);

10

$fields-> addRowSet(new TLabel('RG:'),$rg);

11

$frame = new TFrame;

12

$frame-> oid = 'frame';

13

$frame-> setLegend('Dados Opcionais');

14

$frame-> add($fields);

15

$button = new TButton('show_hide');

16

$button->class = 'btn btn-success btn-sm active'; // class do bootstrap 3

17

$button-> setLabel('Dados Opcionais');

18 19

//codigo usando jquery, podemos usar outros codigos alem desse. $button-> addFunction("\$('[oid=frame]').slideToggle(); $(this).toggleCla\

20

ss( 'active' )");

21

$page = new TTable();

22

$page-> addRowSet($button);

23

$page-> addRowSet($frame);

24


25

$notebook-> appendPage('Panel',$page);

26


27

}

28

}

29

?>

Nesse código temos uma demostração de como alterar a class de um TButton para usar class do bootstrap 3 onde também inserimos uma action usando jquery que muda o estado do TButton e mostra e esconde o TFrame, esse efeito pode ser usado em outros componentes desde que, saiba o id do componente.

TVBox Este componete serve para podermos organizar outros componentes em Vertical , caso não queira usar TTable para fazer isso, vejamos 2 formas de usalo.

Componentes

10

ViewTVBox

1

{

4 function __construct(){ 5 parent::__construct(); 6 $cpf = new TEntry('cpf'); 7 $cpf-> setTip('CPF'); // titulo para quando passar o mause sobre o campo 8


9

$rg-> setTip('RG');

10 $vbox = new TVBox(); 11 $vbox-> add($cpf); 12 $vbox-> add($rg); 13 $notebook = new TNotebook(300,200); //largura e altura 14 $notebook-> appendPage('Panel',$vbox); 15 parent:: add($notebook); 16

}

17

}

18

?>

nesse exemplo usando o setTip do TEntry, para mostrar uma legenda quando passar o mouse sobre o campo, e adcionamos um a um no TVBox, veremos um metodo mais rapido e com poucas linhas. ViewTVBoxFast

1

2 class ViewTVBoxFast extends TPage 3

{

4


5


6


7

$cpf-> setTip('CPF');

8


9

$rg-> setTip('RG');

10

$vbox = new TVBox();

11

$vbox-> addColSet($cpf,$rg);

12

$notebook = new BootstrapNotebookWrapper(new TNotebook(300,200)); //largura e\

13 altura 14

$notebook-> appendPage('Panel',$vbox);

15


16

}

Componentes 17

}

18

?>

11

Dessa forma passamos os campos em uma unica linha e ele adciona cada campo em uma linha diferente, é uma otima forma de organizar containers dentro de um form ou dentro de um TNoteBook.

THBox Esse Container alinha os componentes na Horizontal funciona da mesma forma que o TVBox porem na horizontal, vamos ver o exemplo de uso. ViewTHBoxFast

1

2 class ViewTHBoxFast extends TPage 3

{

4 function __construct(){ 5 parent::__construct(); 6 $cpf = new TEntry('cpf'); 7 $cpf-> setTip('CPF'); 8


9

$rg-> setTip('RG');

10 $hbox = new THBox(); 11 $hbox-> addRowSet($cpf,$rg); 12 $notebook = new TNotebook(500,200); //largura e altura 13 $notebook-> appendPage('Panel',$hbox); 14 parent:: add($notebook); 15

}

16

}

17

?>

TWindow Esse Container é bem interessante, ele permite que mostre a pagina em modal, podendo ou não blokiar outras ações, vamos a pratica.

Componentes

ViewTWindow

1

{

4


5


6

parent:: setTitle('Titulo da janela'); // titulo da janela

7

parent:: setSize(500,400); //tamanho da janela

8

parent:: setModal(true); // coloca em modo modal bloqueando as

9


10

$cpf-> setTip('CPF');

11


12 13

$rg-> setTip('RG'); $hbox = new THBox();

14

$hbox-> addRowSet($cpf,$rg);

15


16

$notebook-> appendPage('Panel',$hbox);

17


18

}

19

}

20

?>

12

Dialogs TMessage Essas caixas de Dialogo nos permite, mostrar informações ,alertas até mesmo opções, ao usuário de maneira simples. vamos ao nosso primeiro exemplo.

Info ViewTMessage

1

2 class ViewTMessage extends TPage 3

{

4

5

function __construct(){ parent::__construct();

new TMessage('info','Seja bem vindo',null,'Bem Vindo');

6 7

}

8

}

9

?>

Neste exemplo temos a TMessagem para informação, é interessante nota que temos uma parâmetro null , nesse componente , que é um tipo TAction, onde a ação é executada se a janela é fechada. Vamos ao exemplo de janela de erro

Error ViewTMessageError

1

2 class ViewTMessageError extends TPage 3

{

4

5

function __construct(){ parent::__construct();

new TMessage('error','Não pode fazer esta ação',null,'Erro');

6 7

}

8

}

9

?>

Como podem ver nesse exemplo mudamos apenas de info para error, bem simples não vamos ao exemplos um pouco mais complexos. 13

Dialogs TMessage

14

TQuestion Esse componente permite que o usuário tenha escolha , como se aceita ou não apagar um contado muito útil para confirmação, antes de apagar qualquer informação. ViewTQuestion

1

{ function __construct(){


7

$action1 = new TAction( array($this,'onComfirme'));

8

$action2 = new TAction( array($this,'onCancel'));

6

9 10

new TQuestion('Deseja deletar esse contato ?',$action1,$action2,'Deletar \

COntato');

11

}

12

public function onComfirme(){

13

new TMessage('info','Confimado',null,'Confirmado');

14

}

15

public function onCancel(){

16

new TMessage('error','Deletar',null,'Deletar');

17

}

18

}

19

?>

Como podem notar temos , opções diferentes para cada escolha do usuário, sendo assim maior controle da aplicação, e evitamos que apague uma informação , sem ter certeza do que se esta fazendo. Vamos agora a mais uma novidade dessa verção,

InputDialog Nesse exemplo veremos como se faz um form de login usando esse componente.

Dialogs TMessage

15

ViewTInputDialog

1

{

4


5


6

$form = new TQuickForm('InputDialog');

7

$action = new TAction( array($this,'onMostrar'));

8

$form-> addQuickAction('btnMostrar',$action,'bs:floppy-disk red');

9

parent:: add($form);

10

}

11

public function onMostrar(){

12

$form = new TQuickForm('input_form');

13

$form-> style = 'padding:20px';

14

$login = new TEntry('login');

15

$pass = new TPassword('password');

16

$form-> addQuickField('Login', $login);

17

$form-> addQuickField('Password', $pass);

18

$form-> addQuickAction('Confirm 1', new TAction( array($this, 'onComfirme')), \

19 'ico_save.png'); 20

$form-> addQuickAction('Confirm 2', new TAction( array($this, 'onCancel'))

21

, 'ico_apply.png');

22

// show the input dialog

23

new TInputDialog('Input dialog title', $form);

24

}

25

public function onComfirme(){ new TMessage('info','Confimado',null,'Confirmado');

26 27

}

28

public function onCancel(){

29

new TMessage('error','Deletar',null,'Deletar');

30

}

31

}

32

?>

Não se preocupem com os forms e outros componentes nosso foco é o método onMostrar como podem ver, quando chamamos o método através de um formulário rápido a caixa é mostrada com o nosso outro formulário contendo 2 action, ou seja é o mesmo conceito da TQuestion porem mais completo.

Forms Nesse capitulo iremos ver TUDO sobre formulário, como criar, como estilizar, e veremos TODOS seus componentes. Primeiramente vamos conhecer o TQuickForm, que é a criação de formulários rápidos.

TQuickForm ViewTQuickForm

1

2 class ViewTQuickForm extends TPage 3

{

4


5


6

$form = new BootstrapFormWrapper(new TQuickForm('input_form')); // cria o fo\

7 rmulario 8

$login = new TEntry('login'); // cria input do tipo text

9

$pass = new TPassword('password'); //cria input do tipo password

10

$form-> addQuickField('Login', $login); // adciona campo com label no form

11

$form-> addQuickField('Password', $pass);

12

// adciona botoes de ação, já com ação onde

13

//addQuickAction(label,action,icone);

14

$form-> addQuickAction('Confirm 1', new TAction( array($this, 'onComfirme')), \

15

'bs:plus green');

16 17

$form-> addQuickAction('Confirm 2', new TAction( array($this, 'onCancel'))

'fa:trash-o blue');

18 19

parent:: add($form);

20 21 22

} public function onComfirme(){

23

new TMessage('info','COnfimado',null,'Confirmado');

24

}

25

public function onCancel(){ new TMessage('error','Deletar',null,'Deletar');

26 27

}

28

}

29

?>

16

, \

Forms

17

Nesse código temos uma explicação sobre o TEntry e o TPassword como podem ver são simples campos html, outro ponto importante são os ícones usados nas QuickAction, temos no Comfirm1 um ícone do bootstrap 3 onde usa-se bs:nomeico cor, dessa maneira posso usar todos os ícones do bootstrap 3, já no comfirm 2 temos o conde da Font awesome onde podemos usar todos seus ícones usando fa:icone cor, dessa maneira podemos usar nos botões também , para assim termos um melhor visual de nosso sistema, como sabemos não adianta ser funcional se não for bonito. Vamos aproveitar o contexto e ver todos os componentes que podem ser usados nos formulários e como pegar o conteúdo de cada um deles. FormCustomView

1

2 class FormCustomView extends TPage 3

{

4

private $form;

5

/**

6

* Class constructor

7

* Creates the page

8

*/

9

function __construct()

10 11 12

{

13 14


// create the notebook

$notebook = new TNotebook( 620, 340);

// create the form $this->form = new TForm;

18

// creates the notebook page $table = new TTable;

19

$table2 = new TTable;

20

$table3 = new TTable;

15 16 17

21

// add the notebook inside the form

22

// create the form fields

23

$field1 = new TEntry('field1');

24


25


26

27

$field4 = new TEntry('field4'); $field5 = new TPassword('field5');

28

29

$field6 = new TDate('field6'); $field7 = new TSpinner('field7');

30

$field8 = new TSlider('field8');

31

$field9 = new TText('field9');

32

$field10 = new TImage('app/images/42_thumb.jpeg');

Forms 33

$field10-> width = '100px';

34

$field11 = new TCombo('field13'); // combo box

35

// imagem

36 37

// itens do fiend11 $itens = array('alexandre'=>"alexandre",'Elbert'=>"Elbert");

38

$field11-> addItems($itens); // adciona os itens

39

$field12 = new TCheckGroup('checkbox');

40

$field13 = new TRadioGroup('radiobutton');

41 42 43

// grupo de checkbox

$field12-> addItems( array('php'=>'php','asp'=>'asp','javascript'=>'javascript\

'));

44

// adciona itens no radio grupo

$field13-> addItems( array('masculino'=>'masculino','feminino'=>'feminino'));

47

$field14 = new THtmlEditor('field10');

48

$field14-> setSize(400,200);

$field1-> setTip('Tip para field 1'); // usando tipo

52

$field2-> setValue('123');

53

$field2-> setEditable(FALSE);

54

$field3-> setMask('99.999-999');

55

$field4-> setMaxLength(10);

56

$field6-> setSize(100);

57

$field7-> setRange( 0,100,10);

58

$field8-> setRange( 0,100,10);

59

$field7-> setValue(30);

60

$field8-> setValue(50);

61

$field9-> setSize(300, 50);

45 46

49 50 51

62 63

// add rows for the fields

64

$table-> addRowSet( new TLabel('TEntry object:'), $field1 );

65

$table-> addRowSet( new TLabel('TEntry not editable:'), $field2 );

66

$table-> addRowSet( new TLabel('TEntry with mask:'), $field3, new TLabel('99.\

67 999-999') ); 68

$table-> addRowSet(

69

$table-> addRowSet(

70

$table-> addRowSet(

71

$table-> addRowSet(

72

$table-> addRowSet(

73

$table-> addRowSet(

74

$table2-> addRowSet(

18

Forms 75


76


77


78 79

new TLabel('TEntry with maxlength (10):'), $field4 );

80

new TLabel('TPassword object:'), $field5 );

81

new TLabel('TDate Object:'), $field6 );

82

new TLabel('Spinner Object:'), $field7 );

83

new TLabel('Slider Object:'), $field8 );

84

new TLabel('TText Object:'), $field9 );

85

new TLabel('IMagem:'), $field10 );

86

new TLabel('ComboBox'), $field11 );

87

new TLabel('Checkbox'), $field12 );

88

new TLabel('RadioButtons'), $field13 );

89

$table3-> addRowSet( new TLabel('Editor HTML'), $field14 );

90 91

// creates the action button

$button1=new TButton('action1');

92

// define the button action

93

$button1-> setAction(new TAction( array($this, 'mostrarDados')), 'mostrarD\

94

ados');

95

$button1-> setImage('bs:search');

96

// define wich are the form fields

97

$this->form-> setFields( array($field1, $field2, $field3, $field4, $field5,

98

$field6, $field7, $field8, $field9,$field1\

99

1,$field12,$field13,$field14, $button1));

100

// add a row for the button

101

$row=$table-> addRow();

102

$row-> addCell($button1);

103

// adds the notebook page

104

$notebook-> appendPage('Input elements', $table);

105

$notebook-> appendPage('Input elements 2', $table2);

106

$this->form-> add($notebook);

107

parent:: add($this->form);

108

}

109 110 111

public function mostrarDados($param)

112

{

113

$data = $this->form-> getData(); // optional parameter: active record cla\

114 115 116

// put the data back to the form

$this->form-> setData($data);

19

20

Forms 117 118 119

// creates

120 121

$message = "a string with the form element's values";

122

$message .= 'TEntry : ' . $data->field1 . '
';

123

$message .= 'TEntry not editable : ' . $data->field2 . '
';

124

$message .= 'TEntry with mask: ' . $data->field3 . '
';

125

$message .= 'TEntry with maxlength (10) : ' . $data->field4 . '
';

126

$message .= 'TPassword object : ' . $data->field5 . '
';

127

$message .=

128

$message .= 'Spinner Object : ' . $data->field7 . '
';

129

$message .= 'Slider Object: ' . $data->field8 . '
';

130

$message .= 'TText Object : ' . $data->field9 . '
';

131

$message .= 'Editor HTML : ' . $data->field10. '
';

'TDate Object: ' . $data->field6 . '
';

132 133

// grupos de campos

134

echo "TCheckGoup";

135

print_r($data->checkbox) ;

136

echo "TRadioGroup";

137

print_r($data->radiobutton);

138

// show the message

139

new TMessage('info', $message);

140

}

141

}

142

?>

TEntry esse componente cria um iput do tipo texto onde podem ser alterados seu Tip, e inserido mascaras seu uso é bem simples TEntry

1

2 3 $field1 = new TEntry('field1'); 4 $field1-> setTip('Tip for field 1'); // dica de campo 5 $field1-> setValue('123'); // seta valor inicial 6 $field1-> setEditable(FALSE); // bloqueia edição de valor 7 $field1-> setMask('99.999-999'); // mascara para valores 8 $field1-> setMaxLength(10); // limit de caracters

Forms

21

9 $field1->{css} = "background-color:#efffef"; 10 11

?>

como podem ver temos uma vasta lista de propriedades que podemos usar e o interessante que podemos alterar class do css e até mesmo o css

TPassword 1
?>

é um campo simples onde tem as opções do TEntry porem é um campo para senhas

TDate é um campo usado para, datas por padrão sua mascara é no formato Y-m-d mas pode ser alterado usando o setmask. 1

$field1 = new TDate('field1');

2

$field1->setMask('dd/mm/Y');

TSpinner Esse componente permite que o usuário , use apenas números, particularmente esse setRange, não funciona como deveria, mas pode vim a ser útil. 1

$field1 = new TSpinner('field1');

2

$field1->setRange($min,$max,$ step) // para trocar os valores

TSlider Esse componente permite que o usuário , use uma barra para escolher o valor , em numero bom para gerenciadores de tarefas ou processos. 1

$field1 = new TSlider('field1');

2

$field1->setRange($min,$max,$ step) // para trocar os valores

TText Componente usado para caixa de texto onde se pode passar uma altura e largura é um campo simples, onde o usuário não pode usar qualquer formatação para o texto. 1

$field1 = new TText('field1');

2

$field1->setSize($ width, $height); // largura , altura

TImage 22

TDate

23

1 width = '100px'; // pode usar as propriedades da imagem para altera-la 5 6

?>

TCheckGroup Este campo é usado para criar grupos de checkbox, onde se passa uma array , na propriedade setItens onde o usuario pode selecionar varios itens, ao mesmo tempo 1
// array de itens, para utilizar na hora de pegar os valores.

5 $field1-> addItems( array('php'=>'php','asp'=>'asp','javascript'=>'javascript')); 6 7

?>

TRadioGroup Utilizado quando é restrito a escolha de um único item , como por exemplo em um formulário onde se tem que escolher seu sexo. 1
// array de itens, para utilizar na hora de pegar os valores.

4 $field1-> addItems( array('php'=>'php','asp'=>'asp','javascript'=>'javascript')); 5 6

?>

THtmlEditor Cria uma caixa de edição de texto, semelhante ao editor de texto simples com recursos de edição , veremos futuramente, uma class semelhante na PWD, onde temos um componente, semelhante , porem melhorado.

TDate

24

1 setSize(400,200); 5 6

?>

TLabel Esse componente cria uma label para os campos, é usado para indicar um campo. 1 class = 'label label-success'; 5 6

?>

nas Grids e ver como elas funcionam, a algum tempo , listar dados em tabelas era um terror linhas , colunas porem com o Adianti fica tudo mais lindo, e facíl

Grids O Objetivo das grids é justamente mostrar o quanto é facil, mostrar conteúdo e as personalizar. Para nosso primeiro exemplo vamos usar o exemplo do tutor DatagridQuickView

1

2

/**

3

* DatagridQuickView

4 5

*/ 6 class DatagridQuickView extends TPage 7

{

8

private $datagrid;

9

public function __construct()

10 11

{

12


// creates one datagrid

13

$this-> datagrid = new TQuickGrid;

14

$this-> datagrid-> setHeight(320);

15

// add the columns

16

$this-> datagrid-> addQuickColumn('Code',

17

'code',

18

'right', 70, new TAction( array($this, 'onColumnAction')), array('column', 'c\

19 ode')); 20

$this-> datagrid-> addQuickColumn('Name',

21

'name',

22

'left', 180, new TAction( array($this, 'onColumnAction')), array('column', 'n\

23 ame')); 24 25

$this-> datagrid-> addQuickColumn('Address', 'address', 'left', 180, new TActi\

on( array($this, 'onColumnAction')), array('column', 'address'));

26 27 28 29

$this-> datagrid-> addQuickColumn('Phone','fone','left', 160, new TAction(arra\ y($this, 'onColumnAction')), array('column', 'fone'));

30 31

// add the actions

$this-> datagrid-> addQuickAction('View', new TDataGridAction( array($this, 'onView')),'name', 'ico_find.png');

32 33

$this-> datagrid-> enablePopover('Popover', 'Hi {name} ');

$this-> datagrid-> addQuickAction('Delete', new TDataGridAction( array($this, '\

25

26

Grids 34 onDelete')), 'code', 'ico_delete.png'); 35 36

// creates the datagrid model

37

$this-> datagrid->createModel();

38

// wrap the page content using vertical box

39

$vbox = new TVBox;

40

$vbox-> add(new TXMLBreadCrumb('menu.xml', __CLASS__));

41

$vbox-> add($this-> datagrid);

42

parent:: add($vbox);

43

}

44

/**

45

* Load the data into the datagrid

46

*/

47

function onReload()

48 49

{

$this-> datagrid->clear();

50 51

// add an regular object to the datagrid

52

$item = new StdClass;

53

$item->code= '1';

54

$item->name= 'Fábio Locatelli';

55

$item-> address = 'Rua Expedicionario';

56

$item->fone= '1111-1111';

57

$this-> datagrid-> addItem($item);

58


59


60

$item->code = '2';

61

$item->name = 'Julia Haubert';

62

$item-> address = 'Rua Expedicionarios';

64

$item->fone= '2222-2222';

65


63

66


67


68

$item->code = '3';

69

$item->name = 'Carlos Ranzi';

70

$item-> address = 'Rua Oliveira';

71

$item->fone = '3333-3333';

72


73 74 75



27

Grids 76

$item->code = '4';

77

$item->name = 'Daline DallOglio';

78


79

$item->fone = '4444-4444';

80


81

}

82

/**

83

* method onColumnAction()

84

* Executed when the user clicks at the column title

85

*/

86

function onColumnAction($param)

87

{

88

// get the parameter and shows the message

89

$key=$param['column'];

90

new TMessage('info', "You clicked at the column $key");

91

}

92

/**

93

* method onDelete()

94

* Executed when the user clicks at the delete button

95

*/

96

function onDelete($param)

97

{

98


99

$key=$param['key']; new TMessage('error', "The register $key may not be deleted");

100 101

}

102 103

/**

104

* method onView()

105

* Executed when the user clicks at the view button

106

*/

107

function onView($param)

108

{

109


110

$key=$param['key']; new TMessage('info', "The name is : $key");

111 112

}

113

/**

114

* shows the page

115

*/

116 117

function show()

{

28

Grids 118

$this-> onReload();

119

parent:: show();

120

}

121

}

122

?>

Essa é a TQuickGrid um grid rápida onde temos algumas , opções vamos ver parte a parte todo o codigo. Aqui criamos a TQuickGrid e damos uma altura para ela. 1

4 $this-> datagrid = new TQuickGrid; 5 $this-> datagrid-> setHeight(320); 6 7

?>

Nessa parte colocamos os campos que iremos passar no método de carregar, onde temos addQuickColumn(label,nome da coluna,posição, tamanho, action) essa action é disparada caso o usuário click na coluna, sem usar os botões , da grid 1
// add the columns

4 $this-> datagrid-> addQuickColumn('Code','code','right', 70, 5 Action( array($this, 'onColumnAction')), array('column', 'code')); 6 $this-> datagrid-> addQuickColumn('Name','name','left', 180, 7 Action( array($this, 'onColumnAction')), array('column', 'name')); 8 $this-> datagrid-> addQuickColumn('Address', 'address', 'left', 180, 9 Action( array($this, 'onColumnAction')), array('column', 'address')); 10 $this-> datagrid-> addQuickColumn('Phone','fone','left', 160, 11 Action( array($this, 'onColumnAction')), array('column', 'fone'));

Aqui temos as ações, para a grid, sim o botões que ficam na grid, lembrando que nessa versão podemos usar os ícones do bottstrap, que chamarei de BT. Nas action temos View que é o label , da action, seguido da TDataGridAction(array(class da action,nome da action),parametro,icone)

Grids

29

1
// add the actions

3 $this-> datagrid-> addQuickAction('View',new TDataGridAction( array($this, 'onView'\ 4

)),'name', 'bs:search red');

5 $this-> datagrid-> addQuickAction('Delete', new TDataGridAction( array($this, 'onDe\ 6 lete')), 'code', 'ico_delete.png');

?> Agora onde cria a grid propriamente dita. 1

4 $this-> datagrid->createModel();

TQuickGrid Actions Vamos agora ao método onde popula nossa grid, como podem ver é bem simples onde temos, a StdClass, que é um objeto genérico , assim por dianti , para mostrar para o framework basta usar o nome dado a linha lembram, code,name,address,fone, dessa maneira o framework já intende oque tem que ser colocado onde. 1

4 function onReload() 5

{

6 $this-> datagrid->clear(); 7


8 $item = new StdClass; 9 $item->code= '1'; 10 $item->name= 'Fábio Locatelli'; 11 $item-> address = 'Rua Expedicionario'; 12 $item->fone = '1111-1111'; 13 $this-> datagrid-> addItem($item); 14


15 $item = new StdClass; 16 $item->code = '2'; 17 $item->name = 'Julia Haubert'; 18 $item-> address = 'Rua Expedicionarios'; 19 $item->fone = '2222-2222';

Grids

30

20 $this-> datagrid-> addItem($item); 21

// add an regular object to the datagrid 22 $item = new StdClass; 23 $item->code = '3'; 24 $item->name = 'Carlos Ranzi'; 25 $item-> address = 'Rua Oliveira'; 26 $item->fone = '3333-3333'; 27 $this-> datagrid-> addItem($item); 28


29 $item = new StdClass; 30 $item->code = '4'; 31 $item->name = 'Daline DallOglio'; 32 $item-> address = 'Rua Oliveira'; 33 $item->fone = '4444-4444'; 34 $this-> datagrid-> addItem($item); 35

}

36 37 38

?>

Apos isso para mostrar ao carregar a pagina basta chamar o metodo que criamos, no metodo show da TPage assim ao mostrar a pagina , ele ira popular a grid. 1
{

4 $this-> onReload(); 5 parent:: show(); 6

}

7

?>

Não esquecendo os métodos, que usamos nas linhas as Actions, vamos ver com cria-las, já que colocamos as actions nas linhas ao clicar na linha , ele dispara o metodo onColumnAction que esta na mesma class , que a grid por isso usado a palavra $this, na action assim indica que a ação esta na mesma class que a grid. Como podem ver, em nosso métodos temos a variável $param, que é nossos parametros passados na action dessa maneira conseguimos, reordenar a grid, mostrar dados, ate mesmo apagar linhas.

Grids

31

1
{

5


6 $key=$param['column']; 7

new TMessage('info', "You clicked at the column $key");

8

}

Vamos ver como seria os metodos para visualizar ou excluir itens. No método , acima usamos a column para pegarmos, o dado da coluna, já nas actions , da grid usadas nos botões, usamos o parametro key. 1
{

5


6 $key=$param['key']; 7 new TMessage('error', "The register $key may not be deleted"); 8

}

9 function onView($param) 10

{

11


12 $key=$param['key']; 13

new TMessage('info', "The name is : $key");

14

}

Estilizando as Grids È possivel alterarmos os css da grid do mesmo modo que dos outros componentes isso pode ser feito atraves de css de maneira muito simples, basta mudar a class da grid para a que criamos, lembrando que a grid é uma table sendo assim fica fácil. pode usar o parent::include, para incluir o css caso for alterar uma única, tabela, ou pode incluir no template para alterar todas assim , basta apenas alterar as class das grids. 1

$this-> datagrid-> class='table-estilizada';

2

// inclui css

3 parent::include_css('app/resources/custom-table.css');

TDataGrid Vamos agora ver como funciona uma grid mais complexa, temos a TDataGrid bem simples de usar. Bem semelhante a TQuickGrid porem, nessa podemos facilmente colocar um grupo de botões de

32

Grids

opção ao invés de colocarmos como na grid de TQuickGrid, temos então a TDataGrid, sem nem uma alteração a diferença é que suas Actions sem mais detalhadas e mais facil de passar parâmetros. Lembrando que temos a opção de usar o bootstrap e de deixar a grid responsiva DatagridActionGroupView

1

2 class DatagridActionGroupView extends TPage 3

{

4

private $datagrid;

5


6

{

7

8 9



10

$this-> datagrid = new TDataGrid; // create the

11

$code = new TDataGridColumn('code','Code','right',50);

12

$name = new TDataGridColumn('name','Name',left,100);

13

$address = new TDataGridColumn('address','Adddress',left,100);

14

$telephone = new TDataGridColumn('fone','Fone',left,100);

15 16

// add the columns to the datagrid

17

$this-> datagrid-> addColumn($code);

18

$this-> datagrid-> addColumn($name);

19

$this-> datagrid-> addColumn($address);

20

$this-> datagrid-> addColumn($telephone);

21 22

// creates two datagrid actions

23

$action1 = new TDataGridAction( array($this, 'onView'));

24

$action1-> setLabel('View name');

25

$action1-> setImage('bs:search blue');

26

$action1-> setField('name');

27

$action2 = new TDataGridAction( array($this, 'onDelete'));

28

$action2-> setLabel('Try to delete');

29

$action2-> setImage('bs:remove red');

30

$action2-> setField('code');

31


32

$action3-> setLabel('View address');

33

$action3-> setImage('bs:hand-right green');

34

$action3-> setField('address');

35

$this-> datagrid-> addAction($action1);

36


37


33

Grids 38


39

40

$this-> datagrid->createModel(); parent:: add($this-> datagrid);

41

}

42

/**

43


44

*/

45

function onReload()

46 47

{


48 49


50


51

$item->code = '1';

52


53


54

$item->fone= '1111-1111';

55


56


57


58

$item->code= '2';

59

$item->name= 'Julia Haubert';

60


61

$item->fone= '2222-2222';

62


64

// add an regular object to the datagrid $item = new StdClass;

65

$item->code= '3';

66

$item->name= 'Carlos Ranzi';

67


68

$item->fone= '3333-3333';

69


63

70


71


72

$item->code

73

$item->name= 'Daline DallOglio';

74


75

$item->fone= '4444-4444';

76


= '4';

77

}

78

/**

79

* method onDelete()

34

Grids 80


81

*/ function onDelete($param)

82

83

{

84


85

$key=$param['key'];

86 87

new TMessage('error', "The register $key may not be deleted");

88

}

89

/**

90

* method onView()

91


92

*/

93


94

{

95


96

$key=$param['key']; new TMessage('info', "The information is : $key");

97 98

}

99

/**

100

* shows the page

101

*/

102

function show()

103

{

104

$this-> onReload();

105

parent:: show();

106

}

107

}

108

?>

Podemos colocar um grupo de opções juntos, sem ter que alterar muita coisa. basta tirar o $this>datagrid->addAction.

Grid com Componentes de formulário Podemos , usar componentes de formularios na grid , dessa forma fica facil editar, ou ate mesmo selecionar, vamos usar a mesma class acima, e apenas altera-la.

35

Grids

DatagridActionGroupViewForm

1

2 class DatagridActionGroupViewForm extends TPage 3

{

4

private $datagrid;

5

private $form;

6


7

{

8

9



10

$this-> datagrid = new TDataGrid;

11

$this->form = new TForm('progs');

12

$btnSalvar = TButton::create('salvar', array($this,'onSave'),'salvar','bs\

13

:user');

14

//cria box para organizar os itens

15

$box = new TVBox();

16

$box-> add($this-> datagrid);

17

$box-> add($btnSalvar);

18

$this->form-> add($box);

$this->form-> addField($btnSalvar);

19 20 21

// create the

datagrid columns

22

$code = new TDataGridColumn('code','Code','right',50);

23

$name = new TDataGridColumn('name','Name',left,100);

24

25

$address = new TDataGridColumn('address','Adddress',left,100); $telephone = new TDataGridColumn('fone','Fone',left,100);

26

// add the columns to the datagrid

27

$this-> datagrid-> addColumn($code);

28

$this-> datagrid-> addColumn($name);

29

$this-> datagrid-> addColumn($address);

30

$this-> datagrid-> addColumn($telephone);

31

// creates two datagrid actions

32


33

$action1-> setLabel('View name');

34

$action1-> setImage('bs:search blue');

35

$action1-> setField('name');

37

$action2 = new TDataGridAction( array($this, 'onDelete'));

38

$action2-> setLabel('Try to delete');

39

$action2-> setImage('bs:remove red');

40

$action2-> setField('code');

36

41

36

Grids 42


43

$action3-> setLabel('View address');

44

$action3-> setImage('bs:hand-right green');

45

$action3-> setField('address');

48

$action_group = new TDataGridActionGroup('Actions', 'bs:th');

49

$action_group-> addHeader('Available Options');

50

$action_group-> addAction($action2);

51

$action_group-> addSeparator();

52

$action_group-> addHeader('Another Options');

$action_group-> addAction($action3);

46 47

53 54 55

// add the actions to the datagrid

56

$this-> datagrid-> addActionGroup($action_group);

57


58

$this-> datagrid->createModel();

59

parent:: add($this->form);

60

}

61

/**

62


63

*/

64

function onReload()

65

{

66


68

// add an regular object to the datagrid $item = new StdClass;

69

$item->code= '1';

70


71

$item-> address = new TEntry('anddress1'); // coloca um TENtry

72

$item-> address-> setValue('Rua Expedicionario'); // seta o valor

73

$item->fone= '1111-1111';

74


75

$this->form-> addField($item-> address);

67

76

}

77

/**

78

* method onDelete()

79


80

*/

81 82 83

function onDelete($param)

{ // get the parameter and shows the message

37

Grids 84

$key=$param['key']; new TMessage('error', "The register $key may not be deleted");

85 86

}

87 88

/**

89

* method onView()

90


91

*/

92


93

{

94


95

$key=$param['key']; new TMessage('info', "The information is : $key");

96 97 98

} function onSave(){

99

}

100

/**

101

* shows the page

102

*/

103

function show()

104

{

105

$this-> onReload();

106

parent:: show();

107

}

108

}

109

?>

Observem que colocamos um form , e dentro dele a TGrid, apos isso basta no metodo onde carrega a TGrid passarmos o componente e seu valor. Email e Telefone Edit

1


2


3

$item->code= '1';

4


5


6

$item->fone= '1111-1111';

7


8


9


10

$item->code = '2';

11


38

Grids 12


14

$item->fone= '2222-2222';

15


13

16


17


18

$item->code = '3';

19

$item->name = 'Carlos Ranzi';

20


21

$item->fone = '3333-3333';

22


23 24


25


26

$item->code = '4';

27

$item->name = 'Daline DallOglio';

28


29

$item->fone = '4444-4444';

30


31

}

32

/**

33

* method onColumnAction()

34

* Executed when the user clicks at the column title

Pode-se usar qualquer componente usado em formulário, desde que se passa seu valor.

Condições para Opções Como essa nova versão é bem interessante , para controle de permissão não é preciso usar if no meio do codigo, podemos usar condições que podem ou não mostrar as opções desde que tenham um rollback Usando o codigo a cima, basta alterar uma action , inserindo a propriedade que ira checar se deve ou não ser exibida. 1
// creates datagrid actions

4 $action1 = new TDataGridAction( array($this, 'onView')); 5 $action1-> setLabel('View name'); 6 $action1-> setImage('bs:search blue'); 7 $action1-> setField('name'); 8 $action1-> setDisplayCondition( array($this,'verifica')); // verifica se deve ser \ 9 exibida 10 11

?>

Para mostrar se é possivel ou não, mostrar o item basta fazer uma comparação e retornar uma valor boolean, assim se for falso o retorno ele não exibe, se for verdadeira é que o item dever ser exibido. Email e Telefone Edit

1

function onReload()

2 3

{


4 5


6


7

$item->code= '1';

8


9


10

$item->fone= '1111-1111';

11


12


13


14

$item->code = '2';

15


39

Adianti Framework 3.0 de Programador Para Programador - Alexandre E. Souza

Recommend Documents