Neste artigo iremos simular um componente TDateTimePicker para o Firemonkey, já que a ferramenta atual não apresenta tal componente. O método pode sair um pouco da visão do que tratamos de simples, mas pode ser tratado como uma boa alternativa para que possamos agradar nossos usuários.

Em primeiro momento, quando me deparei com a falta do TDateTimePicker no Firemonkey logo fui correndo ver se o TEdit apresentava a propriedade de MaskEdit e novamente fiquei frustrado. Mas as decepções ainda não acabaram, pois nem a edição de máscara do field no ClientDataSet funciona no TEdit. Não querendo desistir do Firemonkey, consegui desenvolver a solução abaixo e resolvi compartilhar com os estudiosos de Firemonkey.

A solução envolve a junção de quatro componentes: TGroupBox, TEdit, TLabel e TButton. Assim, vamos então adicionar ao nosso formulário os componentes abaixo e mudar as seguintes propriedades:

TGroupBox (Qde = 1):
Name: GrpHora;
Height: 49;
Width: 129;

TEdit (Qde = 3): //adicionar dentro do GrpHora;
Name: EdtHora | EdtMinuto | EdtSegundo;
Font | Size: 11;
Height: 22;
KeyBoardType: vktNumberPad //somente números;
TextAlign: taCenter;
Width: 30;

Tlabel (Qde = 2): //adicionar dentro do GrpHora;
AutoSize: True;
Font | Size: 11;
Height: 19;
Text: “:” //não incluir as aspas;
TextAlign: taLeading;
VertTextAlign: taCenter;

TButton(Qde = 1): //adicionar dentro do GrpHora;
Font | Size: 11;
Font | Style | FsBold: True;
Height: 22;
Text: “OK”//não incluir as aspas;
TextAlign: TaCenter;
Width: 33;

Todos esses componentes deverão ser ajustados conforme configuração da figura abaixo:

Figura 1: Simulação de Componente de Hora

A máscara de Interface com o usuário está feita, agora vamos aos códigos para conexão com o banco de dados. Para não perder o foco, vou considerar um banco de dados qualquer que tendo sua conexão feita e intermediada por um componente TClientDataSet (CDSHora) possui um field (Coluna) denominado ‘HORA’. Vamos linkar um componente TDataSource a este ClientDataSet e o denominaremos de DSHORA. Todos esses componentes estarão presentes em um DataModule denominado ‘DM’.

Nas declarações públicas do formulário, vamos criar uma variável TDateTime denominada “Hora” e uma procedure de Mudança de Hora (Mudanca_de_Hora). Esta procedure tem o objetivo de atualizar a variável hora, toda vez que os valores dos Edits forem alterados.

Listagem 1: Declaração de variáveis

public
    { Public declarations }
    var
    Hora: TDateTime;
   procedure Mudanca_da_Hora;

Implementando, então, a procedure:

Listagem 2: Implementação o métod

...

Olá Pessoal! Neste artigo iremos aprender a realizar um efeito de rotação em uma imagem utilizando o Firemonkey e a controlar a velocidade dessa rotação através de um componente TTrackBar.

Inicialmente, no Delphi XE2, crie uma nova aplicação HD Firemonkey e adicione ao form principal os seguintes componentes e altere as seguintes propriedades:

TImage (Qde = 1):
Align: alClient;
Bitmap: Utilize uma imagem de sua preferência. No caso, foi utilizada a Figura 1.
Name: Image1;

TTrackBar (Qde = 1):
Frequency: 0,1;
Height: 15;
Max: 10;
Min: 0;
Name: TBVelocidade;
Orientation: orHorizontal;
Value:0;
Width: 257;

TTimer (Qde = 1):
Interval: 1000;
Enabled: true;
Name: RotationTimer;

Figura 1: Imagem utilizada no exemplo

Ajuste os componentes até que assumam as características da figura abaixo:

Figura 2: Características Visuais

A seguir, precisaremos declara algumas variáveis globais para gerenciar a animação. Então, declare as seguintes variáveis como públicas ou privadas no form:

Listagem 1: Declaração de variáveis

var
  Angle : Single = 0; //ângulo de Rotação;
  PrevTime :

...

O Firemonkey veio com tudo e acredito profundamente que veio para ficar, mas como todo início é complicado, para esta ferramenta não poderia ser diferente. Ao utilizar esta ferramenta podemos sentir falta de alguns componentes não visuais que fazem grande falta. Um desses componentes é o TTrayIcon da VCL. Para quem não sabe, ele é o responsável por deixar o ícone da aplicação da área de notificação lá no canto inferior esquerdo perto da hora.

Para que possamos utilizar a classe TNotifyIconData em nossa aplicação, primeiramente devemos declarar em uses a cláusula “WinApi.ShellApi”.

Na seção private de seu formulário principal declare as seguintes variáveis e procedures:

Listagem 1: Declaração de variáveis e procedures

private
    { Private declarations }
   FIconShown: Boolean;
   FTrayIconData: TNotifyIconData;
   procedure ShowTrayIcon;
   procedure HideTrayIcon;

• FIconShown é a variável responsável por informar se o ícone está no system tray ou não;
• FTrayIcondata é o responsável pela criação do ícone na área de notificações;
• ShowTrayIcon é o procedimento responsável por exibir o ícone na área de notificações;
• HideTrayIcon é o procedimento responsável por ocultar o ícone na área de notificações;

Vamos, então, fazer a implementação do código de ShowTrayIcon:

Listagem 2: Implementação do método ShowTrayIcon

...

Olá Pessoal! Essa semana eu me deparei com um enorme problema em minha aplicação. Eu precisava que esta iniciasse quando o Windows fosse inicializado. Ao rodar a aplicação no Windows XP tudo rodou perfeitamente, entretanto, ao rodar no Windows Vista e Seven a situação se complicou, pois a aplicação só acessa os registros do Windows se for executada como administrador ou em modo de compatibilidade XP. E como precisamos que a aplicação se inicie automaticamente não podemos ficar contanto com a boa vontade do usuário de ficar configurando o executável. Nem consigo imaginar o número de ligações de suporte. Como ferramentas de trabalho, estaremos utilizando o Delphi XE2 e o Notepad.

Os passos a seguir requerem muita atenção para perfeito funcionamento.

Abra o NotePad (Bloco de Notas) de seu computador e insira os seguintes códigos XML:

Listagem 1: Win7UAC.manifest

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">
  <assemblyIdentity type="win32" name="ProjetoTeste.exe" version="3.1.0.0" processorArchitecture="*"/>
  <dependency>
    <dependentAssembly>
      <assemblyIdentity type="win32" name="Microsoft.Windows.Common-Controls" version="6.0.0.0" publicKeyToken="6595b64144ccf1df" language="*" processorArchitecture="*"/>
    </dependentAssembly>
  </dependency>
  <trustInfo xmlns="urn:schemas-microsoft-com:asm.v3">
    <security>
      <requestedPrivileges>
        <requestedExecutionLevel level="requireAdministrator" uiAccess="false"/>
        </requestedPrivileges>
    </security>
  </trustInfo>
  <compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
    <application>
      <!--The ID below indicates application support for Windows Vista -->
      <supportedOS Id="{e2011457-1546-43c5-a5fe-008deee3d3f0}"/>
      <!--The ID below indica

...

Neste artigo vamos aprender a lidar com algumas das propriedades de um componente tão pouco falado, denominado TAdvsmoothTimeLine. Este é um componente que deve ser utilizado para a criação de uma linha do tempo.

Abra o Delphi e crie uma nova aplicação: “File | New | VCL Forms Application - Delphi”.

Salve todo o conteúdo: “File | Save All”.

• Salve o formulário como uFrmprincipal e renomeie sua propriedade ‘Name‘ para FrmPrincipal e sua propriedade ‘Caption' para TAdvSmoothTimeLine;
• Salve o projeto dentro de uma pasta (se for preciso crie) como ProjTimeLine.

Para efeitos de designer, coloque no formulário principal um componente TPanel e altere as seguintes propriedades:

Align: alTop;

Caption: TAdvSmoothTimeLine;

Color: clNavy;

Font | Color: clwhite;

Font | size: 12;

Font | Style | fsbold: True;

Vamos, então, inserir um componente TAdvSmoothTimeLine no nosso formulário. Dessa forma, veremos suas principais propriedades:

Align: alClient; (Preencherá todo o espaço não ocupado pelo TPanel no formulário;

DefaultIndicator: esta propriedade define as propriedades padrões do item de indicação da TimeLine. Esse ícone faz a marcação da posição na linha do tempo. Vamos, então, definir suas propriedades:

DefaultIndicator | AnnotationColor: Define a cor de fundo da anotação que for relacionada ao indicador. Vamos deixar como default: clyellow;

DefaultIndicator | AnnotationPosition: Define a posição da anotação associada ao indicador. Esta pode ser acima (apOnTop) ou abaixo (apAtBottom) da linha do tempo. Vamos deixar como default: apAtBottom;

DefaultIndicator | AnnotationTextColor: Define a cor da fonte da anotação associada ao indicador. Vamos deixar como default: clblack;

DefaultIndicator |Color: Define a cor inicial do marcador; Vamos deixar como default: clRed;

DefaultIndicator |Color to: define a cor que dará o tom gradiente ao indicador; Vamos deixar como default: clMaroon;

DefaultIndicator |Fixed: define se a posição do indicador será fixa ou móvel. Vamos marcar essa propriedade como true;

DefaultIndicator |Shape: define o formato do indicador (circular, diamante, retangular, triangular etc). Vamos deixar como default: isDiamond;

DefaultIndicator |Size: define o tamanho do indicador. Vamos alterar para 10;

HorizontalMargin: define as margens da direita e da esquerda da nossa timeline. Vamos aplicar o valor de 25

Range: corresponde às propriedades de intervalo.

Vamos explorar as seguintes subpropriedades:

Range | AllowPartialZooming: permite um Zoom parcial utilizando o Scroll do mouse. Deixe como False;

Range | AllowScrolling ...

Neste artigo estaremos vendo os objetos de manipulação e os objetos de exibição do relatório.

Um relatório em branco no FASTREPORT é apresentado como uma página de papel. Em qualquer lugar da página, o usuário é capaz de adicionar objetos, que podem exibir informações diferentes (tal como gráficos de texto), e também definir a aparência relatório. Vamos descrever brevemente as características dos objetos FASTREPORT, que estão incluídos no pacote padrão:

Figura 1 - Objetos do Relatório

1. Ferramenta Seleção - esta ferramenta permite que você selecione os objetos do relatório;
2. Ferramenta Mão - esta ferramenta permite a movimentação do relatório;
3. Ferramenta Zoom - esta ferramenta permite aumentar (botão esquerdo do mouse) ou  diminuir (botão direito do mouse) o Zoom do relatório;
4. Ferramenta Edição de Texto - Essa ferramenta insere um texto ou permite a você editar um texto de um memo já existente;
5. Ferramenta Copiar Formatação - Essa ferramenta permite ao usuário copiar toda a formatação do objeto selecionado;
6. Inserir Banda - permite a criação de uma página de design, de uma área que tem um comportamento def ...

Configurações do relatório (Report Settings)

Neste artigo veremos as caixas de configurações do relatório e as opções de páginas. existem detalhes que muitas vezes deixamos de lado, mas que podem ser muito úteis na resolução de problemas.

Podemos acessar a janela que dispõe os parâmetros do relatório em: "Report | Opções..." no menu. Esta caixa de diálogo tem três páginas.

Na primeira página você pode ver as configurações gerais do relatório:


Figura 1 - Configurações do Relatório (Opções Gerais)

Em Configurações da Impressora (Printer Settings) você pode amarrar um relatório para uma das impressoras instaladas no sistema. Isto significa que a impressão do relatório será realizada pela impressora marcada por padrão. Isto pode ser útil no caso de quando há várias impressoras diferentes no sistema.

Por exemplo:

• Documentos de texto - podem ser amarrados com uma impressora monocromática;
• Documentos com gráficos - devem ser amarrados com uma impressora colorida;

É o "Default printer" (Impressora Padrão) da lista de impressoras. Quando este item for selecionado, o relatório não será amarrado com qualquer impressora e, portanto, a impressão será feita por uma impressora, que é definida como o padrão.

Você também pode definir o número de cópias do relatório a ser impresso e especificar, se é necessária à realização de agrupamento. Os valores, que você (desenvolvedor) definir nesta caixa de diálogo, serão exibidos na janela de impressão (Print) para o usuário.

Se a opção de Dupla Passagem (Double pass) for selecionada, a formação do relatório será realizada em duas etapas. Durante a primeira passagem, um relatório é formado, e é dividido em páginas, mas o resultado não é guardado em qualquer lugar. Na segunda passagem ocorre a formação de um relatório padrão e este é salvo com economia de um resultado.

Mas, para que devo utilizar duas passagens? Você, provavelmente, marcará a opção de dupla passagem quando precisar recolher algum valor agregado na primeira passagem de forma a substituí-lo por algum texto numa segunda passagem. Exemplo: Mais frequentemente, esta opção é usada nos casos em que num relatório existe uma necessidade de se calcular o número total de páginas, para que possamos informar uma expressão do tipo: Página 1 de 15. O número total de páginas é calculado durante a primeira passagem e está disponível através da variável de sistema "TotalPages" (Total de Páginas). O erro mais freqüente é uma tentativa de usar essa variável em um relatório de uma única passagem, que neste caso retornará o valor desta função como "0".

Outro uso da dupla passagem é para executar quaisquer cálculos na primeira passagem e exibir os resultados na segunda passagem. Por exemplo, quando se faz necessário exibir uma soma no cabeçalho do grupo, que normalmente é calculada e mostrada no rodapé grupo. Cálculos deste tipo são realizados ao escrever o código de script do relatório no evento “OnBeforePrint” de um objeto.

A opção "imprimir se estiver vazio" (Print If Empty) permite a construção de um relatório, que não contém linhas de dados. Se esta opção estiver desativada, relatórios em branco não serão construídos.

O campo “Senha" (Password) permite a configuração de uma senha

...

...

Neste artigo veremos um pouco mais sobre o Fast Report. No que se diz respeito às questões de configurações de designer. Estaremos estudando algumas barras de ferramentas e o editor de designer.

Barra de Ferramentas de Texto



Figura - Barra de Ferramentas de Texto



Nome: Estilo
Descrição: Permite selecionar um estilo. Para definir a lista de estilos, chame o "Relatório | Estilos ..." item do menu.



Nome: Fonte
Descrição: Permite selecionar uma fonte em uma lista suspensa. Prioriza as cinco últimas fontes utilizadas.



Nome: Tamanho da Fonte
Descrição: Permite selecionar o Tamanho da fonte em uma lista suspensa. Permite entrada de digitação manual.



Nome: Negrito
Descrição: Habilita ou Desabilita a fonte negrita.



Nome: Itálico
Descrição: Habilita ou Desabilita a fonte em Itálico.



Nome: Sublinhado
Descrição: Habilita ou Desabilita o texto sublinhado.



Nome: Configurações de Fonte
Descrição: Apresenta o diálogo de configurações de fontes.



Nome: Cor da Fonte
Descrição: Seleciona a cor da fonte em uma lista suspensa.



Nome: Marca Texto
Descrição: apresenta o diálogo com os atributos de “Marca Texto” para o objeto texto selecionado.



Nome: Rotação de Texto
Descrição: Permite selecionar a rotação de um texto.



Nome: Alinhamento à esquerda
Descrição: Permite o alinhamento de texto à esquerda.



Nome: Alinhamento ao Centro
Descrição: Permite o alinhamento centralizado do texto.



Nome: Alinhamento à direita
Descrição: Permite o alinhamento à direita do texto.



Nome: Alinhamento Justificado
Descrição: Permite o alinhamento justificado do texto.



Nome: Alinhamento ao Topo
Descrição: Permite o alinhamento do texto ao Topo.



Nome: Alinhamento pela Altura
Descrição: Permite o alinhamento pela altura.



Nome: Alinhamento de Fundo
Descrição: Permite o alinhamento ao fundo do texto.

Barra de Ferramentas de Bordas

 

Figura - Barra de Ferramentas de Bordas



Nome: Linha de Topo
Descrição: Habilita ou Desabilita a borda no topo.



Nome: Linha de Fundo
Descrição: Habilita ou Desabilita a borda de fundo.



Nome: Linha de Borda à Esquerda
Descrição: ...

Neste artigo estaremos vendo os novos atributos globais e eventos do HTML 5.

Atributos Globais

contenteditable - especifica se o usuário está autorizado a editar um conteúdo ou não: true|false (verdadeiro|Falso).
contextmenu - especifica um menu contexto para um elemento. menu_id.
draggable - especifica se um usuário tem permissão para arrastar um elemento: true|false|auto (verdadeiro|falso|automático).
dropzone - especifica o que acontece quando um dado arrastado é solto: copy|move|link (copiar|mover|linkar).
hidden - especifica que o elemento não é relevante: hidden (oculto).
spellcheck - especifica se o elemento deve ter sua grafia verificada: true|false (verdadeiro|falso).

Eventos

De Janelas:

onafterprint - executa após o documento ser impresso.
onbeforeprint - executa antes do documento ser impresso.
onbeforeonload - executa antes do documento ser carregado.
onerror - executa quando ocorre um erro.
onhaschange - executa quando o documento sofre alteração.
onmessage - executa quando uma mensagem é disparada.
onoffline - executa quando o documento é desconectado da internet.
ononline - executa quando o documento é conectado à internet.
onpagehide - executa quando a janela é ocultada.
onpageshow - executa quando a janela se torna visível.
onpopstate - executa quando ocorre alteração no histórico da janela.
onredo- executa quando é acionado o comando de repetir.
onresize - executa quando a janela tem alteração de tamanho.
onstorage - executa quando um documento é carregado.
onundo - executa quando é acionado o comando de desfazer.
onunload - executa quando o usuário sai do documento.

De Formulários:

oncontextmenu - executa quando um menu de ...

Neste artigo iremos ver em uma aplicação Console como utilizar os principais operadores da matemática.
Este artigo é em homenagem ao meu amigo, aluno de Delphi e professor de matemática Rodrigo da Costa Miranda.

program Matematica;

{$APPTYPE CONSOLE}

uses
  SysUtils, Math;

var
  A, B: Double;
  C, D: Integer;
  PARAR: string;

begin
  try
    { TODO -oUser -cConsole Main : Insert code here }

    Writeln('===================================================================');
    Writeln('VAMOS TRABALHAR COM DOIS VALORES REAIS, QUE DENOMINARESMOS A E B');
    Writeln(''); //PULANDO UMA LINHA
    Writeln('INSIRA O VALOR DE A:');
    Readln(A);
    Writeln(''); //PULANDO UMA LINHA
    Writeln('INSIRA O VALOR DE B:');
    Readln(B);
    Writeln(''); //PULANDO UMA LINHA

    //TRABALHANDO COM O OPERADOR DE SOMA
    Writeln('O VALOR DE A + B E IGUAL A: ' + FloatToStr(A + B));
    Writeln(''); //PULANDO UMA LINHA

    //PARA O CASO DE STRINGS, O OPERADOR MATEMÁTICO "+" ATUA COMO CONCATENAÇÃO

    //TRABALHANDO COM O OPERADOR DE SUBTRAÇÃO
    Writeln('O VALOR DE A - B E IGUAL A: ' + FloatToStr(A - B));
    Writeln(''); //PULANDO UMA LINHA

    //TRABALHANDO COM O OPERADOR DE MULTIPLICAÇÃO
    Writeln('O VALOR DE A x B (A VEZES B) E IGUAL A: ' + FloatToStr(A * B));
    Writeln(''); //PULANDO UMA LINHA

    //TRABALHANDO COM O OPERADOR DE DIVISÃO
    Writeln('O VALOR DE A / B E IGUAL A: ' + FloatToStr(A / B));
    Writeln(''); //PULANDO UMA LINHA

    {NOTA 1: O OPERA

...

Está o mouse sobre um componente? Foi pressionado algum botão do mouse? Qual botão foi? Será que o usuário liberou um botão? Qual botão? Exatamente onde no interior do formulário está o mouse? Será que o usuário moveu o mouse para fora da formulário ou para outro formulário?

O Delphi (como o Windows) monitora constantemente o que o usuário está fazendo com o mouse. Naturalmente, o Delphi pode detectar qualquer ação do mouse. Quando uma aplicação Delphi detecta uma ação do mouse, o que ele faz é chamar um manipulador de eventos definido para o evento correspondente.

Respondendo ao mouse

Existem quatro tipos de ações do mouse que você pode responder em suas aplicações. Três destas são exclusivamente ações do mouse: onmousedown, OnMouseMove e OnMouseUp. O quarto tipo de ação, é um pouco diferente, pois também pode ser gerado por alguns tipos de teclas (como por exemplo pressionar Enter em uma caixa de diálogo modal).

Os componentes reconhecem um evento do mouse quando o ponteiro do mouse está dentro do componente. No entanto, se um botão do mouse é pressionado e mantido enquanto o ponteiro do mouse está dentro de um componente ou formulário, o objeto captura o mouse. Isso significa que nenhum objeto Delphi pode reagir a eventos do mouse até que o usuário libere o botão do mouse, independentemente de onde o usuário mova o mouse.

Existem três eventos do mouse que são fundamentais: OnMouseDown, OnMouseMove e OnMouseUp. O MouseUp e o MouseDown têm os mesmos cinco parâmetros (o MouseMove não tem um parâmetro Button):

1. Sender - O objeto que envia a ação do mouse.
   
2. Button - Indica qual botão do mouse foi envolvido: mbLeft (esquerdo), mbMiddle (meio), ou mbRight (direito).
   
3. Shift - Indica o estado da tecla Alt, Ctrl e Shift eo estado dos botões do mouse quando o evento ocorreu.
   
4. X – Indica a coordenada X do pixel do ponteiro do mouse na área de cliente do remetente.
   
5. Y ...

<!--...--> Define um comentário;
<!DOCTYPE>  Define o tipo de documento; (No HTML 4 existiam três (3) diferentes tipos de doctype, mas no HTML 5 temos apenas um (1) tipo <!DOCTYPE HTML>. É aqui que o navegador entende o tipo de documento e como ele deve interpretar as tags nele contidas.)
<a> Define um hyperlink;
<abbr> Define uma abreviação
<address> Define um endereço. (Passa a ser tratado como uma seção);
<area> Define uma área dentro de um mapa de imagem;
<b> Define um texto em negrito; (Possui o mesmo nível semântico que um SPAN, e também o estilo de negrito no texto. Contudo, ele não dá nenhuma importância para o texto marcado com ele.)
<base> Define uma base URL para todos os links da página;
<bdo> Define a direção do texto apresentado;
<blockquote> Define uma citação longa;
<body> Define o corpo da página;
<br> Insere uma quebra de linha simples;
<button> Define um botão de comando;
<caption> Define o "caption" de uma tabela;
<cite> Define uma citação;
<code> Define o código texto do computador;
<col> Define os atributos da coluna da tabela;
<colgroup> Define um grupo de colunas da tabela;
<dd> Define uma descrição de definição;
<del> Define um texto deletado;
<dfn> Define um termo de definição;
<div> Define uma seção no documento;
<dl> Define uma lista de definição;
<dt> Define um termo de definição;
<em> Define um texto em ênfase;
<fieldset> Define um conjunto de campos (fieldset);
<form> Define um formulário;
<h1> até <h6> Define do cabeçalho 1 até o cabeçalho 6;
<head> Define uma informação sobre o documento. (Não aceita mais elementos Child como filho);
<hr> Define uma regra horizontal. (Tem o mesmo nível que um parágrafo, mas também é utilizado para fazer separações e quebras de linha);
<html> Define um documento html;
<i> Define um texto em itálico; (Possui o mesmo nível semântico que um SPAN. O texto continua sendo itálico e para usuários de leitores de tela, a voz utilizada é modificada para indicar ênfase. É de grande valor e utilidade para marcar, termos técnicos, termos em outras linguagens etc.)
<iframe> Define uma linhas sobre a janela (frame);
<img> Define uma imagem;
<input> Define um campo de inserção;
<ins> Define um texto inserido;
<kbd> Define um texto do teclado;
<label> Define uma "label" para o formulário;
<legend> Define um título para os campos (fields);
<li> Define os itens da lista;
<link> Define uma referência;
<map> Define uma imagem de mapa;
<menu> Define uma lista de "menus";
<meta> Define informações meta;
<noscript> Define uma seção noscript;
<object> Define um objeto incorporado;
<ol> Define uma lista ordenada;
<optgroup> Define um grupo de opção;
<option> Define uma opção em uma list ...

O HTML5 acrescentou uma nova série de Tags a serem explorados pelos Web Designers (veja nosso infográfico).  Há praticamente uma década sem atualização, o HTML abre as portas para os diversos browsers que conhecemos oferecendo uma gama de recursos multimídia e aplicações off-line.

Os novos recursos tem por objetivo facilitar a compreensão e a manutenção do código. Por isso, que organizações como  Mozilla Foundation, Opera e Apple se uniram para atualizar o HTML4 de 1999 e lançar o HTML5.

Confira o artigo abaixo que permitirá que você saiba mais sobre as tags que foram adicionadas no HTML5.

Layout

Define um artigo;
  Define o conteúdo além do conteúdo da página;
Define o conteúdo interativo ou plugin externo;
Define o caption de uma imagem;
Define um grupo de media e seus captions;
Define o rodapé de uma página;
Define o cabeçalho de uma página;
Define os links de navegação;
Define uma área ou seção;
Define uma possível quebra de linha;

Media

Define o conteúdode som;
Define recursos de mídia;
Define um vídeo;

Aplicativos Web

Define gráficos;
Define um botão de comando;
Referências  aos dados dinâmicos em  Tree View ou tabelas;
Define uma lista suspensa (DropDown);
Define detalhes de um elemento;
Define os tipos de saída (outputs);
Define o progresso de uma tarefa qualquer;

Linguagem Ruby

Define o browser substituto para elementos não suportados pelo ruby;
Define explicações para as anotações de ruby;
Define as anotações de ruby;

Outros

Define uma conversa ou pessoas falando;
Define informações sobre uma determinada área do documento;
Define a key (chave) do formulário;
Define a marcação de um texto;
Define a medição dentro de um intervalo pré-definido;
Define o cabeçalho de dados “detalhe”;
Define uma data ou hora;

Sinta-se motivado a adquirir novas experiências com o HTML. Com esse novo leque de comandos e a adequação e compatibilidade temos uma maior segurança de nossas páginas e aplicações.

Desde setembro de 2011, grandes empresas têm se aderido ao uso do HTML5. Como grande exemplo temos o Facebook que liberou recursos aos desenvolvedores para criar, transformar e inovar em aplicações utilizadas para si mesmo.

Um grande abraço e até o próximo artigo!

Rafael Marins Ribeiro

Engenheiro de Softwares

rafael.marins.ribeiro@gmail.com

-->">

Olá galera!

Estaremos abordando nesse artigo alguns aspectos importantes de relatório “Fast Report” junto ao Delphi XE2. O relatório tem a importante tarefa de passar para um arquivo ou papel o resultado da tratativa dado pelo sistema, seja ela completa ou não. E essa tarefa é importante, pois dependendo do lugar em que esteja, seja uma apresentação ou uma reunião fica pouco interessante você ter que abrir o sistema para apresentar os resultados.

Depois de anos trabalhando somente com o Rave Reports a Embarcadero finalmente percebeu que existia um relatório tão simples quanto o Rave, mas muito bem organizado e de muito fácil uso. Agora, temos como componentes nativos do Delphi, os componentes de acesso ao Fast Report.

Quando utilizamos o Fast Report podemos perceber uma maior velocidade na execução do relatório e também, a criação de um arquivo de relatório de tamanho muito menor.

Mesmo sendo agora nativo no Delphi, o Fast Report é independente, pois é possível criar uma interface com o usuário e até mesmo a conexão com banco de dados dentro dele mesmo.

Para iniciarmos nossos trabalhos, vamos apresentar o Design da ferramenta.

Em seu sistema, insira um novo formulário, salve como uFrmFast e altere a sua propriedades:

·    Name: FrmFast;

O componente inicial do Fast Report que devemos usar é o TFrxReport. Adicionamos ao nosso FmFast, então, este componente e alteramos sua propriedade:

·    Name: FrxReportTeste;



Figura 1 - Componente TfrxReport

Com um duplo clique, em tempo de design, sobre o componente, teremos acesso ao designer do Fast Report que fornece ao usuário várias ferramentas para a concepção da aparência de um relatório, bem como a possibilidade de pré-visualização. As localizações das barras de ferramentas do Fast Report podem alteradas ao seu modo, entretanto, a configuração padrão é guardada dentro de um arquivo ‘.ini’ que é restaurado toda vez que você inicia o designer.

Dessa forma, encontramos no report em tempo de design:



Figura 2 - Componente TfrxReport em Tempo de Designer

1.    Barra de Menu;
2.    Barra de Ferramentas;
3.    Barra de Objetos;
4.    Árvore de Componentes;
5.    Janela de Propriedades do Objeto (Object Inspetor);
6.    Páginas do Relatório;
7.    Espaço de Design do Relatório;
8.    Réguas;
9.    Árvore de Dados;
10.    Barra de Status;

Nota: Para quem está acostumado com o Delphi, o funcionamento da parte de design do relatório é muito semelhante. Ao adicionarmos um componente, automaticamente o Fast Report te mostra o alinhamento desse novo componente em relação aos demais através da régua.

ATALHOS

Vamos agora, apresentar alguns atalhos que ajudam e muito na produtividade do trabalho (tempo):

...

Qual programador Delphi que ao visitar um cliente não ouviu a seguinte frase: “Eu preciso de um sistema, mas eu tenho um sistema aqui que faz tal tarefa?”. Aí quando você vê é um sistema C#. E o cliente novamente pergunta: “Não dá pra arrumar não?”. Pois é, dessa forma vamos descrever aqui alguns conceitos interessantes de C# para quem programa em Delphi. E é claro que existe a possibilidade de estudo do Delphi para quem programa em C#.

Já sabendo como funciona a estrutura inicial de uma aplicação console, tanto em Visual Studio 2010 quanto em Delphi 2010, vamos escrever nosso primeiro código e entender como a mesma funcionalidade trabalhará nas duas diferentes ferramentas.

Nossa aplicação consistirá em uma solução onde o usuário informa um Nome e o sistema se apresenta ao usuário e declara boas vindas!

Visual Studio:

Insira o seguinte código em static void:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text; 
namespace VisualConsole
{
    class Program
    {
        static void Main(string[] args)
        {         
            //insira seu código aqui
            Console.WriteLine("Qual o seu nome?");
            string Nome = Console.ReadLine();
            Console.WriteLine(""); 
            Console.WriteLine("Prazer em conhecê-lo " + Nome + "!");
            Console.WriteLine("Bem Vindo ao Visual Studio C#!");
        }
    }
}
 

Vá até o Menu Debug e clique em “Start Without Debug” e você terá seu primeiro Console em Visual Studio C#:

...

Qual programador Delphi que ao visitar um cliente não ouviu a seguinte frase: “Eu preciso de um sistema, mas eu tenho um sistema aqui que faz tal tarefa?”. Aí quando você vê é um sistema C#. E o cliente novamente pergunta: “Não dá pra arrumar não?”. Pois é, dessa forma vamos descrever aqui alguns conceitos interessantes de C# para quem programa em Delphi. E é claro que existe a possibilidade de estudo do Delphi para quem programa em C#.

Para que possamos realizar tal tarefa é necessário que você tenha o visual Studio 2010 e o Delphi 2010 instalado em sua máquina.

Vamos criar uma aplicação Console em cada um deles. Como nossa intenção é fazer sempre um paralelo entre as linguagens e funcionalidades, vamos estar sempre citando quando for Delphi ou Visual.

Vamos entrar criar nossas aplicações console:

Visual Studio:

File > New > Project > Visual C# > Console Application

Salve a aplicação como Visual Console.



Figura 1 - Criando Aplicação Console em Visual Studio 2010 C#

Delphi:

File > New > Other > Delphi Projects > Console Application

Salve a aplicação como Delphi Console e o projeto como ProjDelphiConsole.

...

Neste artigo iremos aprender a criar um banco de dados Firebird 2.1 e criar geradores de ID utilizando a ferramenta IBEXPERT 2008.

Todo projeto deve ser iniciado por um planejamento. Ter uma idéia e não jogá-la no papel pode ser uma grande “furada”, pois na hora em que os erros aparecerem, a detecção se torna lenta e complicada. Por isso, antes de sair programando ou criando o banco de dados, faça uma modelagem de dados:

Figura 1 - Modelagem de Dados de Controle de Acesso usando Case Studio.

Com a modelagem nas mãos, vamos então à criação do banco de dados.

Como vamos fazer uma conexão simples com um banco de dados local, vamos por efeito de organização criar no diretório C:\ do Windows uma pasta denominada BD:

Figura 2 – Pasta Destino do Banco de dados.

Vamos então abrir o IBEXPERT 2008, ir até o Menu Database e selecionar  “Create Database...”:

Figura 3 – Selecionando Menu de criação de Banco de Dados.

Preencha os campos conforme orientação dada abaixo:

·         Server: Local

·         Database: C:\BD\BDACESSO.fdb

·         Client Library File: C:\Windows\System32\FBCLIENT.DLL

·         Username: SYSDBA

·         Password: masterkey

·         Page Size: 16384

·         Charset: WIN1252

SQL Dialect: Dialect 3

Figura 4 – Criando Banco de Dados de Acesso.

Obs. Conforme figura 4, deixe marcada a opção de registrar banco de dados após a criação (Register Database After Creating).

Clique em OK.

Agora, estaremos na tela de registro:

Figura 5 – Registrando o banco de dados BDACESSO.

É importante ter atenção com três (3) informações:

·         Database Alias: BDACESSO (Apelido do seu banco de dados)

·         Server Version: Firebird 2.1 (Versão do banco de dados que está sendo utilizada)

·         Font Characters Set: ANSI_CHARSET (O IBEXPERT tem versões onde o russo é padrão)

Ainda nesta tela, clique em “Test Connect” para ver se a conexão está correta. A seguinte tela irá aparecer:

Figura 6 – Tela de teste de conexão.

Observando a tela acima, observamos a palavra “Passed!”, que significa que o teste de conexão está correto.

...

Neste artigo iremos criar uma aplicação simples a ser executada em Pen drive ou HD Externo usando Firemonkey HD Application – Delphi (Delphi XE2) e banco de dados em XML.  A aplicação consistirá em uma agenda de compromissos.

Abrimos o Delphi XE2 e criamos uma nova aplicação Firemonkey:

Salvamos a Unit1 como UfmkPrincipal e alteramos as seguintes propriedades:

·         Name:  uFmkPrincipal;

·         Caption:  Agenda de Compromissos;

Inserimos agora, um Data Módulo para fazermos a nossa conexão com nosso banco de dados XML.

File > New > Other > Delphi Files > Data Module:

Salvamos como uDM e alteramos suas seguintes propriedades:

·         Name: DM;

Dentro desse Data Módulo iremos inserir um ClientDataSet e iremos alterar sua seguinte propriedade:

·         Name: CDSAgenda;

Clicamos com o botão direito em cima do CDSAgenda e selecionamos “Fields Editor”:

 Na seguinte tela, clique com o botão direito, novamente, e selecione “New Field”:

Adicione o field conforme características abaixo:

Repita o processo para os seguintes fields:

·         Name: DATA / Type: Date / Field Type: Data;

·         Name: HORA_INICIAL / Type: Time / Field Type: Data;

·         Name: HORA_FINAL  / Type: Time / Field Type: Data;

·         Name: DESCRICAO / Type: String / Field Type: Data;

·         Name: STATUS / Type: Integer / Field Type: Data;

O seu Fields Editor deverá ficar da seguinte forma:

Selecione os seguintes Fields e Altere a propriedade Display label:

·         HORA_INICIAL : HORA INICIAL;

·         HORA_FINAL: HORA FINAL;

·         DESCRICAO: DESCRIÇÃO.

Vamos até a propriedade FileName do ClientDataSet CDSAGENDA e colocamos: .\CDSAGENDA.xml.

Clicamos com o botão direito em cima do CDSAGENDA e selecionamos a opção Create DataSet:

Compile a aplicação e vá até a pasta de criação do sistema e você verá que o arquivo XML foi criado junto com o arquivo executável:

Copie todo o endereço da barra de endereços e substitua a propriedade FileName do CDSAGENDA pelo endereço completo do xml.

Agora voltamos para o FmkPrincipal e alteramos suas seguintes propriedades:

·         Height : 515;

·         Width: 420;

Obs: Vale lembrar que o Firemonkey utiliza o conceito de Container, que numa linguagem clara significa que você pode colocar qualquer componente dentro de qualquer componente.  Quando formos utilizar esse conceito, a descrição será no seguinte formato: Componente (Container: Componente Mestre).

Com o objetivo de construirmos o Formulário firemonkey abaixo adicionaremos os seguintes componentes e alteramos as suas propriedades:


Obs. Antes de dar continuidade na criação do aplicativo é recomendável a leitura do artigo: LiveBindings e Conexão com Banco de Dados - Delphi XE2 & Firemonkey

·         Tpanel:

Ø  Name: PnlTitulo;

Ø  Height: 50;

Ø  Align: AlTop;

·         Tlabel (Container: PnlTitulo):

Ø  Name: LblTitulo;

Ø  Text: AGENDA DE COMPROMISSOS (Em Firemonkey o label não possui a propriedade Caption da VCL e sim a propriedade Text);

Ø  TextAlign: taCenter;

Ø  Font > Size: 13

Ø  Font > Style > FsBold (True);

·         TDataSource:

Ø  Name: DSAGENDA;

Ø  Dataset: DM.CDSAGENDA; (Declare em Uses: uDM).

·         TBindScopeDB:

Ø  Name: BSDBAGENDA;

Ø  Data Source: DSAGENDA;

·         TbindNavigator:

Ø  Name: BNAGENDA;

Ø  Align: AlTop;

Ø  BindScope: BSDBAGENDA;

·         Tlabel (Quantidade = 5):

Ø  Text:  DATA, HORA INICIAL, HORA FINAL,  DESCRIÇÃO, STATUS;

...

O novo Delphi trouxe com o Firemonkey diversos estilos diferentes que tornam nossos aplicativos mais atrativos. Hoje, o usuário quer ver um sistema bonito, com design moderno. Neste artigo iremos aprender como usar os estilos já predefinidos pelo Delphi XE2 e também, a usar um pouco de criatividade para desenvolvimento de novos estilos.

Dentro da sua pasta Documentos você pode ver que existem duas pastas Rad Studio. Em uma delas você encontrará a pasta 9.0 e dentro desta, a pasta Styles. Dentro desta pasta você encontrará diversos arquivos de estilo, conforme a figura abaixo:

Todos esses arquivos de extensão “.style” podem ser utilizados em sua aplicação.

Vamos então, ver como isso funciona. Dentro do seu formulário principal, adicione o seguinte componente e altere sua propriedade:

·         TStyleBook:

Ø  Name: SBAGENDA; (Denominação criada apenas como exemplo)

Dê um duplo clique sobre ele e irá abrir uma tela de customização de estilos. Clique no botão Load, vá até a pasta citada anteriormente onde se encontram os estilos e escolha um. Clique no botão Apply e posteriormente em Apply and Close e compile teu aplicativo (Ctrl+F9).

Agora vá até o Object Inspector do seu formulário principal e aponte a propriedade StyleBook para SBAGENDA.

Agora sim, você pode executar teu aplicativo.

Veja como ficou:

Se você gosta de um visual mais dark, escolha o style Air.style, repita todo o processo e execute seu aplicativo:

Obs.: Pode acontecer que ao mudar de estilo, teu aplicativo em tempo de execução não tenha mudado em nada, apesar de na tela de desenvolvimento aparecer já com o novo visual. Isso acontece porque todo o processo precisa ser repetido. Se faltar um passo já não funcionará. Se sentir mais seguro, exclua o componente TStyleBook SBAGENDA e o insira novamente.

O mais interessante de tudo, que com o Firemonkey você pode criar seu próprio estilo. Vamos para um exemplo. Insira em seu aplicativo um componente da classe TButton.

Altere as seguintes propriedades desse botão:

Ø  Name: BtnEmail;

Ø  Text: Msn;

...