Pesquisar este blog

quinta-feira, 19 de abril de 2012

Dica da Semana - Posição Absoluta - Absolute Position

Bom dia pessoal, depois de um tempasso sem escrever nada, lá venho eu de novo com mais uma mega-ultra-max-power- dica!!
Acho até que vou mudar para dica do mês.
Durante meu trabalho com o Cognos Mobile, acabei aprendendo algumas coisas muito úteis, a dica de hoje se aplica a qualquer relatório do Cognos não apenas aos Active Reports.

Pois bem, eis que existe um objeto chamado HTML Item, pra que não sabe, ele permite inserir conteúdos HTML dentro do relatório, como javascript, XML, Ajax, e outros.

Os Active Reports, no entanto, não permitem javascript por hora, e dessa forma algumas funcionalidades visuais ficam prejudicadas.

O que vou falar hoje, serve principalmente para criar o efeito de popup ou light box, seja no IPAD ou ou PC.

Definindo o conteúdo
Então faça assim:
1- Arraste um HTML Item para o começo de seu relatório.
2- Edite o HTML Item e insera o seguinte conteudo:
 - <span id="pop" style="z-index:3;position:absolute;top:0px;left:0px;width:1024x;height:704px;">
Repare nas informações:
z-index:3 - Quanto maior mais pra frente na tela - Altere como quiser
position:absolute - Define o tipo de posicionamento - Não altere
top:0px - Distancia do topo da tela - Altere como quiser
left:0px - Distancia da lateral esquerda da tela - Altere como quiser
width:1024x - Larguira do objeto - Altere como quiser
height:704px  - Altura do objeto - Altere como quiser

Estamos criando um span com o tamanho da tela do IPAD, altere o tamanho conforme sua necessidade.

3 - Arraste outro HTML Item para imediatamente depois do primeiro.
4 - Edite o HTML Item e insera o seguinte conteudo:
 - </span>
A proxima parte é por sua conta, se quiser fazer um lightbox, insira um bloco com o tamanho do span e defina as propriedades de cor e fundo, depois coloque os objetos que deseja dentro do bloco.
Se quiser um popup, defina apenas o layout como padding e maragem.

Com isso feito, temos o que será exibido quando o usuário fizer algo que você vai definir.

Definindo a interação
1 - Arrate uma lista para antes do primeiro HTML Item.
2 - Na query dessa lista, faça com que venha 1 Data Item com apenas uma linha.
3 - Arraste o Data Item para a lista.
4 - Nas propriedades da coluna do campo, procure por "Visibilidade da Coluna"
5 - Selecione visível com base na condição e defina a condição que deseja.
Por exemplo: quando a variavel Clique for igual a Sim.
6 - Arraste ambos HTML Itens para dentro desta coluna e apague o texto que existia.

Pronto agora temos a interação definida, falta apenas configurar um objeto que defina a variável, isso vocês já sabem fazer!

Repare que nesse exemplo minha idéia era definir um lightbox, mas com os atributos top/left você pode escolher exatamente onde colocar o conteúdo, utilize sua imaginação.
Estou preparando um video com tudo isso que disse, é simples, mas parece dureza.

Dúvidas como sempre, e-mail ainda vejo.

[[]]'s