segunda-feira, 27 de julho de 2015

Could not load file or assembly 'Jayrock-JSON...'

Could not load file or assembly 'Jayrock-JSON, Version=0.9.7507.0, Culture=neutral, PublicKeyToken=6f5bf81c27b6b8aa' or one of its dependencies. The parameter is incorrect. (Exception from HRESULT: 0x80070057 (E_INVALIDARG))



Fazia um tempinho que não aparecia uma mensagenzinha indecifrável na minha vida, ou seja, que excelente noticia. Mas para contrariar a maré, apareceu uma das boas.  Como resolvi? apaguei tudo que estava na pasta:


C:\Windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files



segunda-feira, 6 de julho de 2015

Programando a API do GAM

GAM (Genexus Access Manager) é um recurso fantástico para proteger nossas aplicações Web e Smartdevice, principalmente porque não é necessário muito esforço de desenvolvimento para imediatamente usufruir de modelos interessantes de autenticação e também de autorização, em outras palavras, proteção de acesso aos objetos do sistema. Bastando para isso aplicar true a propriedade Enable Integrated Security. Com isso todos os objetos do sistema imediatamente passam a ser protegidos no protocolo OAUTH, o mesmo utilizado por Facebook, Google, Twitter, entre outros.

Uma vez aplicado resta ao desenvolvedor apenas gerenciar o relacionamento entre o sistema propriamente dito com o sistema de segurança, que é feito mediante a programação dos recursos disponibilizados na chamada API (Aplication Programming Interface), que é automaticamente incluída na pasta GAM_Library. Esta programação não é muito complicada, ao contrário, os recursos são acessados de forma bem intuitiva.

Então fica a pergunta, se tudo é tão interessante e simples por onde começo?

O GAM pode ser aplicado sobre um sistema já pronto e em produção ou pode ainda ser modelado juntamente com o próprio projeto em construção. Além da definição do nível de proteção (Authentication=controle sobre login, e Authorization=controle sobre o acesso aos objetos), que é definido por um único item de configuração, em seguida temos que ajustar os perfis que terão acesso ao sistema (Role), usuários (User) e as permissões (Permission) desses perfis aos objetos do sistema.  Em resumo seria só isso a ser feito, mas o principal problema é que essas ações normalmente são realizadas na própria interface fornecida junto com o GAM ao seu projeto que ficam instaladas no GAM_Examples.

Para facilitar um pouco a vida do desenvolvedor o GAM inclui por padrão um usuário admin (senha admin123), com acesso permitido (Allow) a todos os objetos. Mas outros usuários e perfis podem ser criados para representar a realidade ao ser publicado na produção.

Apesar de todos os benefícios, temos um pequeno probleminha ao aplicar o GAM no modo Authorization em nossa kb, que é exatamente a definição dos privilégios dos objetos aos perfis. Essa ação não é simples de ser realizada nos programas oferecidos e também é um modelo muito manual.  E também, se por algum acaso você tiver que reconstruir as tabelas do GAM, as definições anteriormente geradas serão perdidas.  Sendo assim, vamos utilizar este artigo para programar um pouco a API do GAM para gerar um carregador de privilégios.

Construindo um Carregador de Privilégios

Gostei desse titulo, rs, parece coisa de eletrônica, mas vamos ao que interessa. Primeiramente entender um pouquinho da API do GAM, que é composta por um conjunto de External Objects, que apontam para objetos nativos em .Net ou Java.


A partir desses objetos podemos acessar e definir informações no GAM, como por exemplo, criar usuários, definir privilégios, entre outras coisas, bastando selecionar a 'Classe' correta.   Por exemplo para operarmos sobre um usuário podemos recorrer ao External Object GAMUser, que possui os métodos necessários para realizar a operação, como a troca de uma senha, por exemplo.


Para iniciarmos a discussão, primeiramente precisamos compreender um pouco a relação entre as classes definidas nesses External Objects.  O GAMRepository compreende o primeiro nível da hierarquia de classes, e este possui um método GetApplication que devolve a coleção de aplicações (kbs) que estão sendo gerenciadas.  Cada GAMApplication possui um conjunto de GAMRole's que pode ser obtida pelo método GetRoles.


Desta forma GAMRepository => GAMApplication =>  GAMRole gera a sequencia de classes necessária para se obter ou se definir as permissões do perfil (GAMRole)

Para definir as permissões do perfil temos um método GetUnassignedPermissions que retorna os objetos que ainda não foram designados na permissão do perfil.

Para simplificar um pouco e lhe dar uma visão geral sobre essas classes, vamos programar um recurso simples que executa a operação de definição dos privilégios montado a seguir tem a seguinte lógica:

  1. Percorrer todas as aplicações do repositório
  2. E para cada aplicação
  3. Pegar todos os perfis
  4. Pegar as permissoes que ainda não foram atribuídos
  5. Atribuir para o perfil

Meio estranho, mas entenda como um exemplo 'generico' para você mesmo começar a gerar sua própria programação do GAM.


Abaixo apresentamos o programa completo.

Event 'Carga'

 /* 1) APPLICATION */
 for &GAMApplication in GAMRepository.GetApplications(
                           &GAMApplicationFilter, &GAMErrors)

     /* 2) ROLES */
  for &GAMRole in &GAMApplication.GetRoles(&GAMErrors)

     /* 3) PERMISSION NAO ATRIBUIDAS*/
     for &GAMPermission in &GAMRole.GetUnassignedPermissions(
         &GAMPermissionFilter, &GAMErrors)
     /* 4) ATRIBUI NOVA PERMISSION AO ROLE */
 &NEWGAMPermission.ApplicationId = 1
&NEWGAMPermission.GUID = &GAMPermission.GUID
&NEWGAMPermission.Type = GAMPermissionAccessType.Allow
&OK = &GAMRole.AddPermission(&NEWGAMPermission, &GAMErrors)

if &OK
   commit
else
   for &GAMError in &GAMErrors
    msg(Format(!"%1 (GAM%2)", &gamerror.Message,
   endfor
endif
     endfor
   endfor
  endfor
Endevent

O GetApplications executa  operação de recuperar do repositório todas as aplicações (kbs).
  GAMRepository.GetApplications(&GAMApplicationFilter,&GAMErrors)

Em seguida temos a recuperação dos perfis definidos na aplicação.
  &GAMApplication.GetRoles(&GAMErrors)

E para o perfil recuperado temos o método que devolve todas as permissões que não foram atribuídas.
  &GAMRole.GetUnassignedPermissions(&GAMPermissionFilter,&GAMErrors)

Para finalmente ser atribuida ao perfil com:
   &GAMRole.AddPermission(&NEWGAMPermission, &GAMErrors)

As variáveis criadas seguem o mesmo padrão dos nomes dos objetos, mas para facilitar apresentamos a lista a seguir.
Enfim, para ajustar a sua necessidade você precisaria identificar, por exemplo o perfil e o objeto a ser atribuído. Não é complicado porque tanto o GAMRole quanto o GAMPermission possui a propriedade Name que pode ser utilizado para recuperar o nome da função e do programa, mas muito cuidado com os elementos obrigatórios na designação da permissão, que devem sempre ser fornecidos, que são.

&NEWGAMPermission.ApplicationId = 1
&NEWGAMPermission.GUID = &GAMPermission.GUID
&NEWGAMPermission.Type  = GAMPermissionAccessType.Allow

E mais um detalhe, se as tabelas do GAM forem recriadas os valores de GUID são completamente alterados, e será necessário executar o programa de carga de privilégios novamente.

Enfim, um excelente recurso para proteger seus sistemas, e um estilo de programação também interessante.
Boa programação!





quinta-feira, 18 de junho de 2015

Abstract Editor - Parte III

Ok, até agora entendi como o Abstract Editor  funciona, tambem compreendi como posso colocar os elementos na interface, controlando a largura e altura, e agora a pergunta que não quer calar: quais são os recursos de controles que tenho a minha disposição para montar minha interface?  Quais são as pecinhas que tenho a minha disposição para montar o quebra cabeças do layout proposto.

E para você que ainda não viu os artigos anteriores segue os links abaixo.


Vamos estudar um pouco a respeito dos controles disponibilizados no editor abstrato, mais especificamente os que são chamados de containeres, ou seja, controles que podem agrupar outros.

Table x Responsive Table

Veja que mesmo neste modelo de layout responsivo temos espaço para encaixar as tabelas tradicionais, Table é o controle usado para isso (disponibilizado desde as versões anteriores do Genexus), e cujo código final gerado é definido por <table><tr><td> conteudo </td></tr></table>.

Seu uso encontra-se dentro do escopo que já conhecemos, ou seja,  normalmente determina um organizador de elementos na interface. A questão é que certo conjunto de controles organizado por <table> não terá característica responsiva, ou seja, não alterará a forma na medida em que a resolução da interface mudar.  Em outras palavras, você pode montar com <table> um conteúdo que sempre deve ser apresentado na forma original, e isto em qualquer dispositivo, a idéia é que a forma e apresentação seja igual em qualquer lugar.

O controle Table não oferece a opção Responsive Sizes para determinar as dimensões do controle no Grid System.

Responsive Table agrega a capacidade de organização de controles e, ao mesmo tempo, inclui os recursos sensíveis de dimensionamento conforme o dispositivo, em outras palavras, disponibiliza o Responsive Sizes.

Podemos incluir uma Table ou outra Responsive Table dentro de uma Responsive Table?
A resposta é sim, neste caso as células responderão à programação responsiva podendo se ajustar conforme a dimensão do dispositivo, menos o conteúdo definido dentro de Table, que sempre ficará fixo.  Na imagem a seguir temos uma Responsive Table 1 (RT1) com um Responsive Sizes, em seguida na primeira célula, outra Responsive Table (RT2), com uma Table também na primeira célula.


Cada Responsive Table possui uma interface Responsive Sizes para se determinar a dimensão de cada controle.

TabPage

Naturalmente TabPage é um agrupador de controles, que embute uma Responsive Table, ou seja, o conteúdo de cada aba poderá responder diferente para os ajustes dimensionais.


Nas abas poderão ser incluídos quaisquer outros controles como botões, textos, tabelas, webcomponents.

Grid e FreeStyleGrid

Os dois grids tradicionais são incluídos no design de interfaces responsivas, mas nenhum dos dois incluem propriedades responsivas, a não ser a nova propriedade Cell Class.  O FreeStyleGrid, por exemplo, é montado sobre um controle Table e não Responsive Table.


O FreeStyleGrid pode ser convertido para Responsive Table, bastando executar a opção Convert to Responsive Table, a partir do botão direito do mouse sobre o Grid.

Como os grids podem ser influenciados pelo Responsive Web Design?
A principio não podem, ou seja, todos os atributos e variáveis incluídas nos dois grids são sempre apresentadas. Então como fica? para se ocultar colunas desnecessárias é necessário: (1) definir o Theme Flat, (2) Programar nas colunas ocultáveis a classe WWColumnWWOptionalColumn

Modelos Padrões de Layout

Uma vez conhecidos os containeres principais, podemos começar a trabalhar sobre os modelos de layout que determinam a dimensão das colunas e seus efeitos sobre dispositivos distintos. Estão rolando por ai vários 'padrões' que determinam bons designs, isso porque já tem muita gente planejando os formatos de Grid System que possa atender aos diversos dispositivos.  É uma opção para se tomar a decisão de quantas colunas e também os dimensionamentos que as mesmas devem possuir, e a menos que você seja um expert em web design, talvez adotar um padrão seja uma boa.

A seguir apresento dois desses padrões.

Exemplo 1: Mobile & Desktop
Neste primeiro exemplo se programa para ExtraSmall (xs) e Medium (md), tem como característica principal, definir colunas que se alinham no momento em que ocorre a redução do layout para dispositivos móveis. Na imagem temos a definição dos dois modelos, e em seguida temos a apresentação do layout para Medium (md) e em seguida para Extra Small (xs)


A partir da definição, o que temos é o resultado em Medium e Extra Small, dos percentuais definidos.  Observe que temos em Medium um modelo bastante conhecido de uma coluna a direita, ou a esquerda, e uma área maior destinada a conteúdo, e uma barra inferior igualmente espaçada.

Para Extra Small temos uma barra superior (normalmente destinada a botões) e áreas inferiores no formato de um freestyle.

Tecnicamente este modelo é bastante plausível.

Exemplo 2: Mobile & Tablet & Desktop
Neste segundo exemplo programa-se para Extra Small (xs), Small (sm) e Medium (md). E igualmente ao exemplo anterior temos a definição e em seguida o resultado para Small(sm), para Medium (md) e finalmente para Extra Small (xs).


Existe muita informação por ai que trata a respeito desses modelos padrões, a seguir apresentamos o link de um desses sites, caso tenha interesse em aprender um pouco mais a respeito de Grid System.

Para saber mais:



Creio que com isso podemos dizer que concluímos o assunto do Abstract Editor, novamente um excelente recurso nos foi entregue, agradecemos aos Einsteisn da Artech pelo excelente aporte tecnológico, com certeza teremos ótimos programas sendo desenvolvidos nesta estratégia.


terça-feira, 16 de junho de 2015

Abstract Editor - Parte II

Pela primeira vez na história do Genexando tive que quebrar um artigo em pedaços, isso por conta da sua dimensão e complexidade, desta vez não teve jeito, falar sobre o Abstract Editor e Design Responsivos requerem não apenas um mas vários distintos.  Se você perdeu o primeiro clique Abstract Editor - Parte I.

Discutimos no artigo anterior como o Abstract Editor agrupava os controles em linhas e com isso, como poderíamos definir nosso conjunto visual. Agora precisamos assumir o controle do dimensionamento dos objetos envolvidos, e para isso precisamos entender um pouco sobre os conceitos originais de Responsive Web Design.

O que é Responsive Web Design?

Pode parecer estranho abordar esse assunto somente agora, mas se parar para pensar não precisamos muito para produzir coisas no Genexus, basta arrastar e soltar.  Creio, porém, para avançarmos um pouco mais na questão das dimensões será necessário entrar um pouco mais nos conceitos envolvidos.

Em termos bem simples, design responsivo significa que a interface deverá responder de maneira diferente de acordo com o dispositivo, situação bastante confortável para os usuários visto que atualmente os sistemas podem ser executados em muitas arquiteturas distintas.  Não se esqueçam que nosso sistema pode até ser apresentado em uma TV de 50", por exemplo.  O que devemos fazer é formatar o conteúdo de acordo com o tamanho.

 Como fazemos isso?  Grid Systems.

Grid Systems

O framework Bootstrap, utilizado pelo Genexus, prove um layout responsivo baseado em uma tabela dividida em 12 colunas. Ao incluirmos um elemento nesta tabela determinamos quantas colunas o mesmo consumirá neste conjunto.


As linhas não precisam ser iguais, ou seja, os controles podem variar em termos de dimensões e também em quantidade a cada linha, o que importa é o fato de que a soma de colunas não pode ultrapassar '12 colunas'.

Evidentemente que a largura desta tabela não é fixa, pois depende da resolução dos diversos dispositivos, e assim temos um modelo que gera proporcionalidade, ou seja, existirá uma excelente coerência entre a apresentação em um sistema de maior com um outro menor dimensão.

Sendo assim, o primeiro ponto a se levar em conta é que normalmente os controles nesta linha não possuem suas dimensões medidas em pixels (modo utilizado nos layouts tradicionais), e a medida normal neste ambiente é o %.

Abstract Editor e Grid System

Genexus prove uma propriedade Width que possibilita informar a largura percentual do controle na linha. Observe inclusive na imagem a seguir como os objetos são arranjados, na primeira linha temos os itens 1.1, 1.2 e 1.3 respectivamente com 33% de largura.  Na segunda linha temos os itens 2.1 e 2.2 ambos com 50% e finalmente, na terceira linha o item 3.1 com 100% de largura.  O mais interessante é que só percebemos isso quando olhamos para o Responsive Size, no Abstract Editor (em rosa) não temos essa visão e não dá para perceber que o item 6, por exemplo, ocupará o mesmo espaço que as linhas anteriores.
 

Para uma dimensão menor de dispositivo, o Extra Small, por exemplo temos um arranjo completamente diferente, no qual cada componente ocupara uma linha particular, e cada um com 100% de largura.

Levando-se em conta o modelo de coluna, chegamos a algumas medidas % fixas, outra característica deste framework, pois se observar o Width verá que existem algumas larguras padrões definidas. Não é uma dimensão livre.  Porque? exatamente devido ao Grid System de 12 colunas.  A figura a seguir oferece uma visão percentual relacionada ao numero de colunas que cada uma representa.


Ou seja, 8% equivale exatamente a dimensão de uma coluna, 17% equivale a duas colunas, 25% equivale a três colunas, 33% a quatro colunas, e assim por diante.

Se quiser fazer uma operação mais precisa envolvendo pixel, e considerando que a resolução do navegador no momento é 1000 pixel, teríamos uma coluna equivalendo a 1000/12 = 83,3 pixel, se o componente ocupa três colunas temos 83,3 x 3 = 250 pixel.  Em termos percentuais chegamos ao mesmo resultado, três colunas equivale a um percentual de 25%, desta forma 1000 * 25% = 250 pixel.

O problema aqui é que não temos controle algum sobre a largura do dispositivo, lembre que tudo é relativo, e poderemos ter, por exemplo o design tendo que ser montado em uma largura de 500 pixels. A forma mais simples de ver isso é buscar não se fixar na largura em pixel dos objetos, a menos que se tenha uma imagem com largura fixa, por exemplo.  Se a questão envolve apenas arranjo dos controles e textos, a medida percentual é eficaz.

Uma observação importante: Você não precisa definir as 12 colunas na linha do Grid System, se quiser colocar único controle com 8%, ou seja uma unica coluna na linha, isso será possível.

Larguras Padrões

O framework Bootstrap fornece um conjunto de quatro larguras (relativas também) para determinar quatro categorias de dispositivos.


O Genexus prove um mecanismo interessante na montagem da tabela responsiva, pois seguindo exatamente o modelo do Bootstrap, define a largura do controle para cada uma dessas quatro categorias, gerando um controle DIV determinando o numero de colunas que o mesmo ocupará de acordo com o 'dispositivo'.  O interessante é que utiliza o texto registrado na Class CSS para indicar as dimensões.

<div  class="col-sm-4 col-md-6 col-lg-5"  style="">
   <span class="BlocoTexto1"  id="TEXTBLOCK1" >1</span>
</div>

O controle neste exemplo possuirá três definições de dimensão:


Agora deve ter ficado claro, não? Percentual é mais fácil para entendermos, enquanto que colunas é mais simples para o browser calcular.

Offset

Ja estava me esquecendo de falar sobre Offset, que é a medida de deslocamento à esquerda de um controle no Grid System.  Isso significa, por exemplo que podemos deslocar um certo controle no grid determinando quantas colunas queremos que o mesmo pule antes de ser apresentado.

Na imagem a seguir, definimos que o controle 1.2 possui um Offset de 25%, significando que o mesmo será apresentado somente a partir da terceira coluna do Grid System.


Cada controle pode ter seu Offset definido, permitindo que os mesmos sejam espaçados horizontalmente.

Height

Não sei se você percebeu, mas até agora não entramos no assunto da altura do controle, apenas tratamos da largura.  Isso tem uma razão simples, pois a mesma quantidade de texto apresentado em uma largura de 25% possuirá uma altura diferente se apresentado em uma largura de 50%, exatamente a metade da altura.

Desta forma Height é também um conceito relativo no Responsive Web Design, e a menos que seu design exija que certo controle tenha uma dimensão fixa, como por exemplo um botão, não deveremos nos preocupar com isso.

E quando precisamos definir uma altura (e largura) fixa? a saída será recorrer as propriedades max-width e max-height do CSS. Ou seja, será necessário criar uma classe para dimensionar o controle e indicá-la na propriedade Cell Class no Abstract Editor.

Por exemplo, se temos um botão com dimensão 100x100, e queremos que a célula em que o mesmo se encontra se fixe na dimensão exata do mesmo.


Devemos: 1) criar uma classe e 2) associar a mesma ao botão.  Na classe criada programar o valor do max-width e max-height:


E em seguida associar esta classe a imagem no Abstract Editor, na propriedade Cell Class.

Observe que existe a propriedade Class no controle, porém esta não vai afetar a definição responsiva, somente surte efeito se for programada em Cell Class.

Do Fixo ao Relativo

Ok, estamos chegando ao final deste artigo, mas antes, já que estamos lidando com dimensões percentuais, vamos trabalhar um pouco na questão da conversão do dimensionamento pixel para %, simples não se preocupe, não temos muita matemática nisso.

Como já vimos anteriormente, no modelo responsivo buscamos trabalhar nos controles de forma percentual, e se tivermos uma definição semelhante a apresentada a seguir, duas colunas sendo a esquerda com 360px e 600px à direita, a conversão percentual seria algo como: 360px / 960px = 0.375 = 37,5%, na coluna esquerda.  Na coluna da direita teríamos  600px / 960px = 0,625 = 62,5%


A questão é que para convertermos para o Responsive Design, não teríamos como definir essas dimensões percentuais diferentes (37,5% e 62,5%), lembrando que dispomos de um conjunto fixo de opções (8%, 17%, 25%, 33%, 42%, 50%, 58%, 67%, 75%,, 83%, 92%, 100%).  Uma saída de contorno seria definir 12 frações da dimensão máxima definida, ou seja, 960 px / 12 = 80 px, e com essa fração poderíamos chegar a um numero aproximado de colunas da nossa célula a esquerda: 360 px / 80 px = 4.5 colunas. Portanto poderíamos definir que esta poderia ter 4 ou 5 colunas, respectivamente 33% ou 42%.  Ambos os valores não representam fielmente a dimensão fixa de 360 px originais, visto que 33% equivale a 316.8px e 42% equivale a 403.2px.

Infelizmente esta é uma situação que leva a uma perda para menos ou para mais da definição inicial, mas tratando-se de um modelo flexível perdemos na correspondência mas ganhamos na possibilidade da manutenção do design nos diversos dispositivos.

Melhor se as propostas básicas de design já levarem em conta o conjunto fixo percentual para criar os elementos.

Conclusão

Bom pessoal, creio que podemos encerrar por hoje, mas não o assunto, pois temos muitas coisas para aprender. Te vejo no próximo artigo.


Para saber mais: