Tip:
Highlight text to annotate it
X
Olá, seja bem vindo a série de vídeos que abordará o Desenhador MVC.
Cada vídeo vai abordar uma funcionalidade da ferramenta, mostrando desde coisas simples
tal como instalação até os itens mais complexos.
O objetivo dessa apresentação é mostrar quais os pré-requisitos para assistir os
vídeos, o que é a ferramenta e como ela é constituída.
Para ter um melhor aproveitamento dos vídeos é necessário dois pré-requisitos:
O primeiro é o conhecimento da arquitetura MVC.
É necessário conhecer a arquitetura porque os vídeos são focados em mostrar a ferramenta
Desenhador, neles não serão explicados o conceito do MVC, o que é a View, o Model
ou a Estrutura de Dados.
O segundo pré requisito é conhecimento do TDS.
Durante as apresentações não será mostrado como instalar o TDS, como configurar um servidor,
como criar/importar um projeto e etc. Portanto para melhor aproveitamento é interessante
que você já conheça o TDS antes de assistir aos vídeos.
Então vamos para a definição. O Desenhador MVC é um conjunto de plug-ins
que funcionam dentro do TDS( Totvs Developer Studio) fornecendo uma ferramenta de auxilio
na criação e manutenção de códigos fontes escritos em AdvPL em conjunto com o framework
de desenvolvimento de regra de negocio MVC.
A ferramenta tem o intuito de facilitar o desenvolvimento de programas em AdvPL MVC,
fornecendo interface gráfica para criar a View, o Model e gerando o código fonte para
você. Funciona semelhante a outras ferramentas que estão no mercado, tal como o Window Builder
no Java.
Estou com o Desenhador aberto aqui no TDS. Ele possui três partes principais, que são
as abas de Source, View e Model.
A aba de Source abriga o editor de código. É aqui que você vai criar o seu código
fonte e também todo o código gerado pela ferramenta será colocado aqui.
O editor possui diversas funcionalidades e elas serão apresentadas nos próximos vídeos.
A aba de View disponibiliza uma interface gráfica para criação da camada de interface
do seu programa. A edição da View é dividida em quatro partes
principais.
A primeira é a árvore de componentes, nela ficam todos os componentes adicionados na
tela e o primeiro item da árvore é sempre a View, não dá pra mudar isso, se você
tentar deletar não é possível, pois a View é a parte principal da aba. Então o componente
de View não pode ser excluído e só pode existir um.
A segunda parte da View é a paleta de componentes, nela estão disponíveis todos os componentes
gráficos que o MVC suporta. Por exemplo, temos aqui na parte de box o Horizontal Box
e o Vertical Box, na parte de formulários temos os quatro tipos de formulários que
é possível criar na View. Na parte de pasta tem a Folder e as abas. E tem também os botões
de usuário.
A terceira parte é o painel onde os componentes são colocados. Então, por exemplo, se eu
adicionar uma pasta aqui no painel, ela é mostrada. Para isso eu clico no componente
Folder e depois clico aqui no meu painel. Pronto, o componente é adicionado. Já estou
criando a minha View, estou colocando algo nela. Quero criar uma aba para essa minha
pasta, consigo criar uma aba. Então nesse painel é onde vai ser literalmente
desenhada a sua View, onde você vai dispor os componentes na tela.
A última parte da edição de View é a tabela de propriedades, essa tabela contem as propriedades
de cada componente, com essas propriedades você pode configurar o componente. Essa tabela
é contextual, então eu estou com a aba selecionada, a tabela me mostra as propriedades da aba.
Se eu selecionar a folder, troca as propriedades, se eu selecionar a View, troca mais uma vez
e por ai vai. Eu seleciono um componente e aqui na tabela de propriedades eu posso fazer
a configuração que eu quiser.
Uma coisa importante. Aqui na aba de View, dentro do Desenhador, você só consegue criar
componentes gráficos previstos pelo MVC. Que são os componentes que estão aqui na
paleta. Você não consegue, por exemplo, criar um TGet, um TListBox, um TSay, todos
esses componentes híbridos não é possível criar. Somente o que o MVC permite.
Vamos agora para a aba de Model. A aba de Model também disponibiliza uma interface
gráfica, mas agora é para edição da regra de negócio do seu programa em MVC. A aba
é composta por 4 partes principais, também.
A primeira é a paleta de componentes, que disponibiliza os três tipos de submodelo
que o MVC aceita dentro do Model, que é o Field, o Grid e o Calc e tem essa opção
para excluir, que serve para quando você quiser retirar um item da árvore.
A segunda parte é a arvore de componentes, que mostra o Model e todos submodelos que
estão abaixo dele, inclusive mostrando a relação hierárquica entre eles. Então
se eu tenho um field e um grid abaixo do field, é mostrada essa relação dentro da árvore.
O primeiro item da árvore é sempre o Model, lembra que na View o primeiro item era sempre
o View? No Model o primeiro item é sempre o Model e também não é possível exclui-lo,
pois é ele que representa o seu modelo de dados e também só pode existir um por fonte.
A terceira parte é a tabela de propriedades, essa tabela é igual a tabela do View, ela
tem as propriedades que cada componente, possui para você conseguir configurar o componente.
Ela também é contextual, se eu trocar o item da árvore, troca as propriedades aqui
embaixo.
A quarta e ultima parte, é o painel de configuração da estrutura de dados do
submodelo, que é essa parte em branco. Esse painel só é exibido se o item selecionado
na árvore for um submodelo, pois ele tem a finalidade de edição de estrutura, o Model,
o modelo de dados, tem estrutura de dados? Não. Quem tem estrutura de dados é o sub
modelo. Se eu criar um novo field na árvore, agora
sim, do lado direito é exibida a edição de estrutura de dados.
Não vou mostrar como realizar a edição agora, estou apenas mostrando como é o model
e como é a view. Depois teremos um vídeo explicando como configurar
a estrutura de dados.
Todas os componentes que são criados e configurados tanto na View quanto no Model geram o código
correspondente ao que foi criado na aba de Source.
Lembra que a aba estava vazia? Eu alterei a View, criei a folder, a sheet, o código
foi gerado. Eu alterei o Model, criei um field, o código foi gerado também.
Tudo que vai sendo feito na aba de Model e View, vai sendo colocado o código correspondente
aqui na aba Source.
Se você já tiver um fonte e quiser usar a ferramenta, não se preocupe, pois o Desenhador
não remove o código que você já tem na aba Source, ele apenas adiciona conteúdo
novo.
Por exemplo, se aqui no fonte eu tivesse outras funções, não teria sido alterado, pois
o Desenhador somente adiciona coisas novas, ele não altera o restante do código.
Basicamente esse é o Desenhador MVC, nos próximos vídeos serão mostradas as diversas
funcionalidades que a ferramenta disponibiliza.
Até a próxima.