PLATANUM – TUTORIAL – Criando uma tela com o KPCodeGen.Net

Neste tutorial vamos criar uma tela de um cadastro de pessoa simples. Primeiramente é necessário criar a tabela no banco de dados. Abaixo há um script pronto para criação da tabela [Pessoa], basta copiar e rodar no Management Studio no seu banco SKELETON.

Script para tabela Pessoa

DECLARE
    @KEY_DATABASE VARCHAR(255),
    @BLOCK_VERSION INT

BEGIN

    SET @KEY_DATABASE = 'AppExample';
    SET @BLOCK_VERSION = 1
    IF NOT EXISTS(SELECT 1 FROM FRW_RELEASE WHERE BLOCK = @BLOCK_VERSION AND KEY_DATABASE = @KEY_DATABASE)
    BEGIN
        SET TRANSACTION ISOLATION LEVEL SERIALIZABLE
        BEGIN TRANSACTION
            PRINT '--------------------------------------------------'
            PRINT 'EXECUTANDO KEY_DATABASE:' +CONVERT(VARCHAR,@KEY_DATABASE)
            PRINT 'EXECUTANDO BLOCK:' +CONVERT(VARCHAR,@BLOCK_VERSION)
            PRINT '--------------------------------------------------'

            IF NOT EXISTS(SELECT * FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_NAME = 'PESSOA')
            BEGIN

                PRINT '--------------------------------------------------'
                PRINT 'ACTION: CREATE TABLE PESSOA'
                PRINT '--------------------------------------------------'

                CREATE TABLE PESSOA
                (
                    ID_PESSOA DECIMAL(10, 0) IDENTITY(1,1) NOT NULL,
                    TIPO_SEXO INT NOT NULL,
                    PESSOA_DATA_INCLUSAO DATETIME NULL,
                    PESSOA_SITE VARCHAR(255) NULL,
                    PESSOA_FACEBOOK VARCHAR(255) NULL,
                    PESSOA_GOOGLE_PLUS VARCHAR(255) NULL,
                    PESSOA_TWITTER VARCHAR(255) NULL,
                    PESSOA_CIDADE VARCHAR(255) NULL,
                    PESSOA_UF_PROVINCIA VARCHAR(255) NULL,
                    PESSOA_NUMERO VARCHAR(10) NULL,
                    PESSOA_ENDERECO1 VARCHAR(255) NULL,
                    PESSOA_ENDERECO2 VARCHAR(255) NULL,
                    PESSOA_CEP VARCHAR(50) NULL,
                    PESSOA_TELEFONE CHAR(20) NULL,
                    PESSOA_CELULAR CHAR(20) NULL,
                    PESSOA_DATA_NASCIMENTO DATETIME NULL,
                    PESSOA_CPF VARCHAR(11) NULL,
                    PESSOA_EMAIL VARCHAR(100) NULL,
                    PESSOA_APELIDO VARCHAR(50) NULL,
                    PESSOA_NOME VARCHAR(255) NOT NULL,
                    PRIMARY KEY CLUSTERED (    ID_PESSOA ASC )
                );
                
            END;

        IF (@@ERROR<>0) AND (@@TRANCOUNT>0) BEGIN
            ROLLBACK TRANSACTION
            RAISERROR('Erro! Não foi possível criar a tabela: PESSOA, Bloco: %d', 10, 1, @BLOCK_VERSION)
            END
        ELSE BEGIN
            INSERT INTO FRW_RELEASE (BLOCK, DATE_UPDATED, USER_EXEC, KEY_DATABASE) VALUES (@BLOCK_VERSION, GETDATE(), SUSER_SNAME(), @KEY_DATABASE)
            COMMIT TRANSACTION
        END
    END
    
END

Caso tenha executado com sucesso o script, você verá a tabela [Pessoa] no banco de dados [SKELETON].

KPCodeGen.Net-Tutorial-1

Componentes de configuração no KPCodeGen.Net

Execute o KPCodeGen.Net, configure ou selecione a conexão com o banco de dados que está a tabela [Pessoa].

KPCodeGen.Net-Tutorial-2

Para cada coluna da tabela, você deverá configurar:

  • Tipo C#
    • Por sugestão, o KPCodeGen.Net já trará um tipo de dados referente no C# relacionado com o tipo de dados da tabela.
  • Título
    • É tratado como o label na entidade, refletirá no título do componente na página web. Este campo deve receber uma chave de tradução, por exemplo, em vez de ter o título “Pessoa Apelido” deveria ficar “Pessoa_Apelido”, e no arquivo de tradução [GlobalizationResource.resx] do projeto SkeletonApp.Net/WebProjeto deve-se traduzir a chave “Pessoa_Apelido” para o idioma desejado. Caso não tenha uma chave de tradução válida, o título ficará entre os caracteres “#Título#” informando que não foi encontrado uma chave de tradução.
  • Componente View
    • Este campo determina qual será o componente da página de visualização (grid). Pelo tipo de dados, o KPCodeGen.Net já sugere o tipo de componente, porém o usuário poderá alterá-lo se desejar.
      • KPColumnModel
        • Componente padrão, apenas mostra os dados como texto
      • KPEnumModel
        • Componente para vincular a um Enumerador
      • KPEntityModel
        • Componente para vincular a uma Entidade (chave estrangeira), que deseja mostrar alguma informação de outra tabela.
      • KPBooleanModel
        • Componente de True/False (Verdadeiro/Falso)
      • Componente Form
        • Este campo determina qual será o componente da página formulário de cadastro. Pelo tipo de dados, o KPCodeGen.Net já sugere o tipo de componente, porém o usuário poderá alterá-lo se desejar.
          • KPFormItemButton
            • Gera um botão no formulário. Não é necessário vincular a uma coluna da tabela.
          • KPFormItemCheckBox
            • Gera um componente CheckBox, utilizado para estados de check e uncheck.
          • KPFormItemCombo
            • Gera um componente ComboBox, utilizado para listas de informações com apenas uma seleção.
          • KPFormItemDateTime
            • Gera um campo de data e hora com um pequeno componente de calendário.
          • KPFormItemEntity
            • Gera um campo Text, porém com informações da Entidade relacionada como chave estrangeira.
          • KPFormItemGrid
            • Gera um Grid para trabalhar informações em cache.
          • KPFormItemKey
            • Gera um componente Hidden, servindo para informar que a coluna é chave da tabela.
          • KPFormItemPassword
            • Gera um componente Text-Password.
          • KPFormItemText
            • Gera um componente Text, com alguns tipos de máscaras.
          • KPFormItemZoom
            • Gera um componente Zoom para fazer pesquisas a outras tabelas / chaves estrangeiras.

 

Cada componente selecionado tanto para o [Componente View] como para o [Componente Form], há uma caixa de configuração ao lado direito. Nesta caixa o usuário fará as configurações desejadas para construir a parametrização de geração de código.

Definindo chaves de tradução no KPCodeGen.Net

Coloque na coluna [Título] as chaves de tradução que você deseja. Lembre-se que elas não devem conter espaços em brancos. Neste tutorial, deixamos a coluna [PESSOA_CPF] da tabela [PESSOA] como “CPF” e não iremos colocar chave de tradução. Portanto quando o sistema não identifica a chave de tradução, ele colocará o título CPF como “#CPF#”.

KPCodeGen.Net-Tutorial-3

Abaixo, clicamos na aba Entity para mostrar como ficará o código da Entidade.

KPCodeGen.Net-Tutorial-4

As chaves de tradução deverão ser colocadas na solução SkeletonApp.Net, no projeto WebProject>>Properties>>GlobalizationResource.resx.

KPCodeGen.Net-Tutorial-5

Configurando componentes das colunas da tabela Pessoa

Nesta etapa, você pode configurar cada propriedade do componente de acordo com a coluna da tabela, lembrando que há duas telas, a View (visualização dos dados), e a Form (formulário de cadastro).

Para cada coluna da tabela, configuraremos os dois componentes (View e Form):

  • ID_PESSOA
    • Componente View: KPColumnModel
      • Largura: 30
      • Visível: True
    • Componente Form: KPFormItemKey
  • PESSOA_APELIDO
    • Componente View: KPColumnModel
      • Visível: False
    • Componente Form: KPFormItemText
  • PESSOA_CELULAR
    • Componente View: KPColumnModel
      • Largura: 100
      • Máscara: TELEPHONE
      • Visível: True
    • Componente Form: KPFormItemText
      • Largura: 100
      • Máscara: TELEPHONE
  • PESSOA_CEP
    • Componente View: KPColumnModel
      • Visível: False
    • Componente Form: KPFormItemText
      • Largura: 50
      • Máscara: POSTCODE
  • PESSOA_CIDADE
    • Componente View: KPColumnModel
      • Largura: 100
      • Visível: True
    • Componente Form: KPFormItemText
      • Largura: 100
  • PESSOA_CPF
    • Componente View: KPColumnModel
      • Largura: 60
      • Visível: True
      • Máscara: CPF
    • Componente Form: KPFormItemText
      • Largura: 60
      • Máscara: CPF
  • PESSOA_DATA_INCLUSAO
    • Componente View: KPColumnModel
      • Visível: False
    • Componente Form: KPFormItemDateTime
  • PESSOA_DATA_NASCIMENTO
    • Componente View: KPColumnModel
      • Visível: True
      • Máscara: DATE
      • Largura: 70
    • Componente Form: KPFormItemDateTime
      • Máscara: DATE
      • Largura: 100
  • PESSOA_EMAIL
    • Componente View: KPColumnModel
      • Visível: False
    • Componente Form: KPFormItemText
      • Largura: 150
  • PESSOA_ENDERECO1
    • Componente View: KPColumnModel
      • Visível: False
    • Componente Form: KPFormItemText
      • Largura: 150
  • PESSOA_ENDERECO2
    • Componente View: KPColumnModel
      • Visível: False
    • Componente Form: KPFormItemText
      • Largura: 150
  • PESSOA_FACEBOOK
    • Componente View: KPColumnModel
      • Visível: False
    • Componente Form: KPFormItemText
      • Largura: 150
  • PESSOA_GOOGLE_PLUS
    • Componente View: KPColumnModel
      • Visível: False
    • Componente Form: KPFormItemText
      • Largura: 150
  • PESSOA_NOME
    • Componente View: KPColumnModel
      • Visível: True
      • Largura: 150
    • Componente Form: KPFormItemText
      • Largura: 200
      • Obrigatório: True
  • PESSOA_NUMERO
    • Componente View: KPColumnModel
      • Visível: False
    • Componente Form: KPFormItemText
      • Largura: 50
  • PESSOA_SITE
    • Componente View: KPColumnModel
      • Visível: False
    • Componente Form: KPFormItemText
      • Largura: 150
  • PESSOA_TELEFONE
    • Componente View: KPColumnModel
      • Visível: True
      • Largura: 100
      • Máscara: TELEPHONE
    • Componente Form: KPFormItemText
      • Largura: 150
      • Máscara: TELEPHONE
  • PESSOA_TWITTER
    • Componente View: KPColumnModel
      • Visível: False
    • Componente Form: KPFormItemText
      • Largura: 100
  • PESSOA_UF_PROVINCIA
    • Componente View: KPColumnModel
      • Visível: False
    • Componente Form: KPFormItemText
      • Largura: 100
  • TIPO_SEXO
    • Componente View: KPColumnModel
      • Visível: False
    • Componente Form: KPFormItemText
      • Largura: 50
      • Máscara: INTEGER

Gerando os arquivos da tela Pessoa

Depois de configurar todos os componentes, clique no botão [Gerar arquivos]. Se os arquivos foram gerados com sucesso, você verá na pasta de configuração de geração de arquivo os seguintes arquivos:

KPCodeGen.Net-Tutorial-6

Copie os arquivos para seus projetos referentes.

O arquivo [PessoaBO.cs] deverá ser copiado para o projeto SpecialistBO.

KPCodeGen.Net-Tutorial-7

O arquivo [Pessoa.cs] deverá ser copiado para o projeto SpecialistEntity na pasta ORM.

KPCodeGen.Net-Tutorial-8

Os arquivos [FrmPessoa.aspx, FrmPessoa.aspx.cs, FrmPessoa.aspx.designer.cs, FrmPessoaView.aspx, FrmPessoaView.aspx.cs, FrmPessoaView.aspx.designer,cs] devem ser copiados para o projeto WebProject na pasta Form.

KPCodeGen.Net-Tutorial-9

Depois de copiados todos os arquivos, execute um Build no WebSolution. Provavelmente você verá 2 erros, relacionados a Enumeradores não existentes.

KPCodeGen.Net-Tutorial-10

Entre nos arquivos FrmPessoaView.aspx.cs, e FrmPessoa.aspx.cs e peça para o Visual Studio gerar o enumerador que não existe.

KPCodeGen.Net-Tutorial-11

 

Faça novamente um Build na solução, neste momento não deverá ter mais erros.

Configurando no Menu acesso a tela Pessoa

Execute a aplicação. Tenha certeza que está configurado corretamente a connection string.

Se autentique com usuário: admin, e senha: admin.

Acesse o Menu>>Configurações>>Telas. Ao abrir o grid com a lista de telas, clique no botão [Novo], e cadastre as duas telas de Pessoa (View/Form).

  • Tela Pessoa View
    • Nome da Tela: Pessoa
    • Descrição da Tela: Pessoa View
    • Path/URL: /Form/FrmPessoaView.aspx
    • Enumerador: PESSOA_VIEW
  • Tela Pessoa Form
    • Nome da Tela: Pessoa Form
    • Descrição da Tela: Pessoa Form
    • Path/URL: /Form/FrmPessoa.aspx
    • Enumerador: PESSOA_FORM

KPCodeGen.Net-Tutorial-12

Na aplicação somente existe um Menu raíz chamada de [Configurações], vamos criar mais um Menu raíz chamado de [Cadastros], depois um sub-item [Base]. Na tela de [Cadastro de Telas] crie uma nova tela:

  • Tela apenas para título [Cadastros] no Menu
    • Nome da Tela: Cadastros
    • Descrição da Tela: Cadastros
    • Path/URL: #
    • Enumerador: _UNKNOW_

KPCodeGen.Net-Tutorial-13

  • Tela apenas para título sub-item [Base] no menu [Cadastros]
    • Nome da Tela: Base
    • Descrição da Tela: Base
    • Path/URL: #
    • Enumerador: _UNKNOW_

KPCodeGen.Net-Tutorial-14

Acesse o Menu>>Configurações>>Menu. Ao abrir o grid com a lista de Menus, clique no botão [Novo].

No campo [Tela], procure no Zoom, a tela cadastros que provavelmente será o último registro do Zoom.

KPCodeGen.Net-Tutorial-15

  • Cadastro de Menu [Cadastros]
    • Menu Pai:
    • Tela: Cadastros
    • Sequência: 10
    • Título no Menu: Cadastros
    • Url Imagem Menu: Assets/Imgs/Themes/Default/Pages/Menu/operacional.png
    • Visível: Sim

KPCodeGen.Net-Tutorial-16

  • Cadastro de Menu sub-item [Base]
    • Menu Pai: Cadastros
    • Tela: Base
    • Sequência: 15
    • Título no Menu: Base
    • Visível: Sim

KPCodeGen.Net-Tutorial-17

  • Cadastro de Menu sub-item [Base]
    • Menu Pai: Base
    • Tela: Pessoa
    • Sequência: 20
    • Título no Menu: Pessoa
    • Visível: Sim

KPCodeGen.Net-Tutorial-18

Agora é necessário liberar acesso da tela para o perfil relacionado com o usuário. Acesse o  Menu>>Configurações>>Perfis. Selecione o perfil [Administrador] e depois botão [Relacionar Telas]. No campo tela, procure a tela [Pessoa View], selecione-a e depois clique no botão [Adicionar]. Não esqueça de fazer também para a tela [Pessoa Form].

KPCodeGen.Net-Tutorial-19

Saia do sistema, e depois se autentique novamente. Se tudo estiver correto, irá aparecer o Menu Cadastros>>Base>>Pessoa.

KPCodeGen.Net-Tutorial-20

Refinando o cadastro de Pessoa

Acesse a tela de cadastro de pessoa. Neste momento abrirá um grid com as colunas que configuramos como [Visível=true] no Componente View.

KPCodeGen.Net-Tutorial-21

Você pode reordenar as colunas como quiser e também, alterar o tamanho das colunas, para isto, deverá alterar o código gerado no arquivo [FrmPessoaView.aspx], colocando em sequência os componentes que deseja aparecer mais a esquerda.

Neste exemplo vamos ordenar por:

  • IdPessoa
    • Width: 40
  • PessoaCpf
    • Width: 100
  • PessoaNome
    • Width: 200
  • PessoaDataNascimento
    • Width: 90
  • PessoaTelefone
    • Width: 100
  • PessoaCelular
    • Width: 100
  • PessoaCidade
    • Width: 200

Altere o tamanho e ordenação como quiser. Não é necessário recompilar a aplicação, basta atualizar que já será renderizado as mudanças.

Clique no botão [Novo], você verá a tela de cadastro ainda desconfigurada.

KPCodeGen.Net-Tutorial-22

Abra novamente a tela [FrmPessoaView.aspx], e no componente [KPGridControl] adicione a propriedade [WidthForm=”530″] e também a propriedade [HeightForm=”200″]

KPCodeGen.Net-Tutorial-23

Depois, abra a tela [FrmPessoa.aspx], e coloque em ordem os componentes que deseja, com os tamanhos definidos. Os componentes que não desejar em tela, apenas remova a linha do componente.

KPCodeGen.Net-Tutorial-24

Screen Shot 09-30-15 at 09.24 AM

KPCodeGen.Net-Tutorial-26