Arquivo da categoria: Delphi

Gerar Splash Full Screen em Aplicativos Android com Delphi.

 Quem não fica incomodado com aquela tela  preta do splash gerada em um aplicativo Android  feito com Delphi!
screenshot_20180310-2203381
Hoje decidi estudar esse assunto e fazer o meu aplicativo ficar com a tela de splash com a aparência que eu queria:
  1. Exibir o splash com a tela cheia;
  2. Exibir o splash sem distorção e;
  3. Deixar o fundo da aplicação Android com as cores do meu PNG!
durante a pesquisa eu aprendi a usar um recurso chamado 9-path e Adorei o resultado!
Comecei estudando a documentação da Embarcadero e no help encontrei  a documentação Application_Options.  Lá descreve como devemos configurar as imagens dos Ícones e do splash respeitando o tamanho de cada um dos campos da aba Artwork :

Launcher Icons

Field Description
Launcher icon (36×36 ldpi) Icon representing your application.
(This is the icon that your users can place on their Home screen, and tap to start your application.)
Launcher icon (48×48 mdpi)
Launcher icon (72×72 hdpi)
Launcher icon (96×96 xhdpi)
Launcher icon (144×144 xxhdpi)

Splash Images

Field Description
Splash image (426×320 small) Splash images for your application.
(These are the images that will be displayed while your application is opening. You can specify either a single image or several different-sized images. To minimize rescaling, use either one multi-res bitmap or several different-sized images.)
Splash image (470×320 normal)
Splash image (640×480 large)
Splash image (960×720 xlarge)
Nesse mesmo artigo Application_Options a  uma citação de uma extensão diferente usada pelo SDK do Android, o 9-path ou  9.png.  Ao estudar descobri que esse tipo de arquivo serve para fazermos images de background que ao serem redimensionadas não distorcem a imagem, é um programa java simples de entender  e é muito legal.  Onde o resultado final é uma imagem que pode ser esticada sem perder a sua qualidade.
Então eu montei as 9 imagens necessáris para o processo:
  • Cinco imagens .png para os ícones e;
  • Quatro  imagens processadas com a extensão .9.png.

Como criar uma imagem 9-patchs

Para criar uma imagem de 9-patch , você pode usar a ferramenta draw9patch disponível em C:\Users\Public\Documents\Embarcadero\Studio\19.0\CatalogRepository\AndroidSDK-\tools\draw9patch.bat. Você pode usar .pngimagens padrão e convertê-las para .9.png. Para criar uma imagem de 9 patch para a tela inicial do seu aplicativo Android, siga estas etapas:

  1. Abrir ferramenta draw9patch disponível em C:\Users\Public\Documents\Embarcadero\Studio\19.0\CatalogRepository\AndroidSDK-\tools\draw9patch.bat .
  2. Carregue uma .pngimagem png ja com o tamanho esperado pelo splash do Android, usando File> Open 9-patch … ou arraste e solte a imagem.
    Nota: Converter um .pngpara um .9.png adiciona uma área extra de pixel imagens sejam salvas com 4 pixels extras (2 horizontalmente e 2 verticalmente). Tenha isso em mente crie imagens.png com 4 pixels a menos para serem convertidas. em 9-patch . 
    Mas se a imagem for do tipo .9.png nenhuma pixels extras será adicionado a imagem.
  3. Quando a imagem é carregada na ferramenta draw9patch , o painel esquerdo é a área desenhável e exibe a imagem que você está editando, o painel direito exibe uma visualização de como a imagem se parece uma vez esticada.
  4. Para definir a área extensível, clique nas linhas superior e esquerda de um pixel e pinte os pixels onde a imagem pode ser esticada.
  5. Para definir a caixa de preenchimento no RAD Studio, é importante que você pinte todas as linhas de fundo e linhas inteiras de um pixel para indicar que toda a área é desenhável.
    Aviso: assegure-se de preencher todas as linhas de fundo e direita de um pixel inteiro ao criar a imagem do patch 9 . Caso contrário, o formulário do seu aplicativo pode não ser exibido corretamente.
  6. Depois de definir a área extensível e a caixa de preenchimento , clique em Arquivo> Salvar 9 patch … para salvar sua imagem de 9 patch que seja salva com a .9.pngextensão do arquivo
Essa é a lista de imagens preparadas para o meu aplicativo:
2018-03-10

Reparem que a imagem 9.png ficou com uma linha de marcação preta no canto superior esquerdo, as linhas marcam a área pode ser distorcida, e onde não tem marcação nada será distorcido.

Agora vamos fazer o processo funcionar no Delphi:

  1. Crie um novo aplicativo Firemonkey (File > New > Multi-Device App) ou carregue um projeto que você já possui.
  2. Selecione Android como plataforma de destino
  3. Vá em Project> Options  e, em seguida, Application.
    então adicione todos os icones criados e as imagens do splash

    2018-03-10 (1)
  4. Existem duas maneias de fazer o splash,
    1. Primeiro Método, foi esse que implementei:

      vá para project>Deploy e desmarque: splash_image_def.xml

      Mude o nome de cada imagem Nome Remoto para splash_image_def.9.png igual a imagem abaixo,  Você deve fazer isso apenas para as imagens da tela inicial.

      deployment
    2. Segundo Método – Não foi testado:

      Esse método consiste em criar um novo splash_image_def.xmlarquivo.

      Depois de seguir todas as etapas anteriores :

      1. Altere o Nome Remoto de todas as imagens de splash de splash_image.png para splash_image.9.png .
      2. Crie um novo arquivo XML com o conteúdo abaixo:
        <? xml  version = "1.0"  encoding = "utf-8" ?> 
        
        xmlns: android = "http://schemas.android.com/apk/res/android" 
        android: src = "@ drawable / splash_image " 
        android: dither = " true " />
        Nota: Certifique-se de que a conversão EOL (Final da linha) do documento XML esteja configurada em formato UNIX / OSX. O EOL deve ser apenas LF (Line Feed, ‘\ n’) e não CR LF (Carriage Return, Line Feed, ‘\ r \ n’).
      3. Adicione o documento XML ao Gerenciador de implantação (clique DMgrAddFiles.png).
      4. No documento XML recém-adicionado, mudar o nome remoto para splash_image_def.xmleo caminho remoto para res\drawable\.
  5. Agora você pode executar o projeto em seu dispositivo Android ou simulador para ver a imagem do splash 9-patch funcionando:

screenshot_20180310-2213191

 

Baixe aqui o código fonte com os exemplos:

Abraços e até a próxima

Links:
http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Application_Options

http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Using_9-patch_Images_in_Android

Anúncios

Delphi MVC Framework – Criação de Servidores de Aplicação REST com DELPHI

Bom dia!

Como todos sabem a programação VCL – Desktop ainda é muito usada em todo o mundo, porem, temos que repensar nosso modo de pensar a aplicação, as aplicações em nuvem vem com tudo!
Todos os dias novas aplicações são criadas e fazem coisas fantásticas, coisas que programadores Delphi nem imaginam como fazer.

a Embarcadero vem a muitos anos mantendo o DataSNAP e evoluindo essa ferramente, mas na minha opinião, falta liberdade e flexibilidade  nesta solução.

 

Hoje vou apresentar  aqui um Framework de alto desempenho para construção de servidores de aplicação REST o DelphiMVCFramework.

dmvcframework_logofacebook

A vários mais de um ano eu e nossa equipe de programação vem fazendo testes com o DVMC,  e cada dia fico mais satisfeito com os resultados. Tenho um servidor de aplicação REST escrito com delphique está sendo executando a  quatro meses na AWS sem necessidade de ser reiniciado e sem problemas de memory leak.

Segue as principais características que são implementadas no delphimvcFramework

  • Simples de usar:  Você instala o DelphiMVCFramework e sai executando código em 5 minutos.
  • O projeto é OpenSource e acessível a qualquer pessoa no github.
  • Mais de 40 exemplos prontos para aprender todos os recursos oferecidos pelo produto.
  • RESTful (RMM Level 3).
  • Suporte JSON-RPC 2.0.
  • Estável e sólido, usado por projetos pequenos / médios / grandes desde 2010.
  • Grupo de suporte em https://www.facebook.com/groups/delphimvcframework com mais de 1550 membros ativos.
  • Pode ser usado no ambiente balanceado de carga usando Redis .
  • Pode ser usado no ambiente balanceado de carga usando o MySQL.
  • Assistente para o IDE de Delphi. Isso torna o DelphiMVCFramework ainda mais simples de usar!
  • Suporte de sessão.
  • JSON Web Token Support (JWT)
  • Extensível usando middlewares.
  • Autenticação básica.
  • Herança dos controladores
  • URL simples com mapeamentos de parâmetros usando anotações.
  • Especializado processa para gerar texto, HTML, JSON.
  • possui um poderoso mapeador JSON para objetos e conjuntos de dados para objetos.
  • Pode ser empacotado como servidor autônomo, módulo apache e ISAPI dll.
  • Possui RESTClient para integração com outros serviços REST.
  • Funciona com XE7, XE8, Delphi 10 Seattle, Delphi 10.1 Berlim, Delphi 10.2 Tóquio
  • testado com TesteUnitárioa
  • Páginas geradas pelo lado do servidor usando Moustache para Delphi ( https://github.com/synopse/dmustache )
  • Documentação automática através de /system/describeserver.info
  • Simples e documentado.

No próximo post demonstrarei como fazer a instalação do Framework e como fazer o primeiro servidor aplicação .

Links auxiliares:

Site do Danieli Teti: http://www.danieleteti.it/delphi-mvc-framework/
Documentação: https://www.gitbook.com/book/danieleteti/delphimvcframework/details
Pagina Suporte: https://www.facebook.com/groups/delphimvcframework
Fontes DelphiMVCFramework : https://github.com/danieleteti/delphimvcframework
Dependências:

 

Abraços!
Marcos Nielsen.

Modificando os delimitadores mustache temporiamente { {==} }

Ao trabalhar com Delphi + Mustache +Angular, talvez você se depare com o problema que o servidor ao processar  Mustache substitui a tag {{ }} antes do conteúdo ser enviado para o cliente,  e como o angular usa {{ }} para fazer o DataBinding de seus componentes JS o negocio não ira funcionar,

Mas caso precise enviar  os caracteres no seu cliente web sem que o mustache substitua voce pode modificar temporariamente o delimitador mustache com o seguinte código:

{ {=<. .>=} }

e voltar o marcador ao original com:

<.={{ }}=.>
veja como fazer em um exemplo HTML
Modificando o código post anterior:
<html>
<body>
<p>Código:{{Pessoa.Id}} Nome:{{Pessoa.Nome}}</p>
<p>Modificando os delimitadores do mustache tempariamente { {=<. .>=} } </p>
{{=<. .>=}}
<p>{{Pessoa.Nome}}</p>
<p>Retornando o delimitador {{ }}</p>
<.={{ }}=.>
<p>{{Pessoa}}</p>
</body>
</html

O resultado será

Código:1 Nome:Marcos Jesus de Oliveira Nielsen

Modificando os delimitadores do mustache tempariamente { {=<. .>=} }

{{Pessoa.Nome}}

Retornando o delimitador {{ }}

{“Id”:1,”Nome”:”Marcos Jesus de Oliveira Nielsen”}

Abraços e até a próxima.

Delphi com Mustache {{ }}

Bom dia

Todos os dias programadores Delphi estão procurando formas de usar codigo delphi dentro do HTML.

hoje mostrarei como utilizar uma de templates com Mustache,

O Mustache (https://mustache.github.io), é uma implementação das marcações {{ }} que podem ser usado para trabalhamos arquivos HTML, e configuração, código-fonte ou  qualquer coisa. Ele funciona expandindo tags em um modelo usando valores fornecidos em um hash ou objeto.

É chamado de  “logic-less” (sem lógica) porque não há afirmações if, senão cláusulas ou para loops. Em vez disso, existem apenas tags. Algumas tags são substituídas por um valor, alguns nada e outros uma série de valores. (Fonte: Maual do Mustache5)

Mais de 40 linguagens de programação diferentes implementam  MUSTACHE.
Em Delphi  essa implementação foi feita dentro do projeto dmustache com parte de um projeto maior chamamdo Synopse’s mORMot (https://github.com/synopse).

O ponto forte de usarmos essa implementação é que conseguimos incluir facimenite objetos Delphi dentro de códigos HTML, veja este exemplo:

Template HTML

<html>
  <body>
    <p>Código:{{Pessoa.Id}} Nome:{{Pessoa.Nome}}</p>
</body>
</html>

Entidade Pessoa.Entity.pas

unit Pessoa.Entity;

interface
type
TPessoaEntity = class
private
FId: integer;
FNome: String;
public
property Id: integer read FId write FId;
property Nome: String read FNome write FNome;
end;

implementation

end.

Exemplo usando o DMVCFramework:

//
uses
Pessoa.Entity

procedure TControle.Pesssoa;
var
PessoaEntity: TPessoaEntity;
begin
PessoaEntity := TPessoaEntity.Create;
PessoaEntity.id := 1;
PessoaEntity.Nome := ‘Marcos J O Nielsen’;
PushObjectToView(‘Pessoa’, PessoaEntity);
LoadView([‘model_index’]);
RenderResponseStream;
end;

Ao executar a URL o sistema exibirá no lugar de

Código:{{Pessoa.Id}} Nome:{{Pessoa.Nome}}

Os valores

Código:1 Nome:Marcos J O Nielsen

Com pouco esforço e Misturando (Delphi+ HTML+ JS+ CSS) conseguimos fazer facilmente implementação ricas!

como essa:

datatable

https://datatables.net/examples/advanced_init/object_dom_read.html

Até a próxima

 

Modularizando seu projeto Delphi com uso de carregamento de pacotes em tempo de execução (bpl) – Parte 1

Olá, Já se perguntou, porque nossos executáveis feitos em Delphi são tão grandes? Uma simples tela vazia feita com Delphi ocupa em media 10 Mb de espaço em disco?

Aplicação Monolitica de uma unica tela Tamanho Aplicação Monolitica

Aprenda neste artigo como fazer uso de pacotes em tempo de execução e reduzir o tamanho de sua aplicação para poucos Kb.

Aplicação Modularizada de uma unica tela

Tamanho Aplicação Modularizada


Por padrão nossas aplicações Delphi : VCL e Firemonkey são Aplicações Monolióticas. E todo o Framework do Delphi é embarcado no momento da compilação dentro da seu executável, fazendo que nossos aplicativos cresçam de maneira descontrolada e ficando muito grandes.

Então demonstrarei aqui uma sequência de passos de como configurar o seu projeto Delphi para usar pacotes:

  1. Acesse as configurações do projeto, menu > Project>Options
  2. Selecione a opção Runtime packages.
  3. Selecione a Target:  All configurations – All Plataforms,(caso deseje, escolha outra plataforma a sua escolha).
  4. Marque o parametro: “Link with runtime packages,…” = True.
    • Mude a Target para: All configurations – 32 bit…
    • Observe que propriedade Runtime package, aparecerá  alista de pacotes que serão carregados em tempo de execução, todos esses pacotes da lista não serão adicionados ao seu executável no momento da compilação e serão carregados dinamicamente quando a aplicação executar.
  5. Salve as configurações .

Opções de Projetos Delphi

Pronto agora a sua aplicação está configurada para usar pacotes (BPLs).

Recompile seu projeto, e observe que agora o seu executável também está com apenas alguns Kb.

Importante!

O seu aplicativo  agora depende de bibliotecas externas para executar, e não abrirá se não as encontrar, para saber quais pacotes seu projeto necessita, Execute a sua aplicação e visualize no menu View>Debug Windows> Modules a lista de pacotes que foram carregados para a sua aplicação ser executada.

DebugWindows Modules

 Esses pacotes devem ser instalados na mesma pasta do aplicativo. ou em uma pasta que faça parte do Path do seu Windows.

No próximo Artigo estarei demonstrando como criar seus próprios Módulos em pacotes e configurar o Delphi para conseguir carregá-los.

Recomendo a leitura da documentação de pacotes da Embarcadero e da apresentação Modularizarão via BPL:

Até a próxima.

 

 

“Caret notation: ^” O que é isso?

Bom dia,

Hoje é 2 de outubro de 2016, dia de votação para prefeito e vereadores, daqui  a pouco irei votar, mas antes de sair quero falar sobre um assunto que chamou minha atenção nessa semana: a “Caret notation: ^”  (Notação com circunflexo ).

Devido a necessidade de imprimir em uma Impressora Bluetooth  sem driver, tive que voltar a estudar a velha tabela dos comandos ASCII e ESC/POS.  E  na tabela ASCII, encontrei uma notação diferente  “Caret notation” (Notação ^ )

Então   decidi escrever um pouco sobre a “Notação ^“.

Na tabela ASCII existem Os sinais não-imprimíveis, conhecidos como caracteres de controle que em editores de texto comuns não são visíveis, se eles não são visíveis como podemos escrever esses caracteres?

Resposta rápida, use a função chr() que converte um decimal  inteiro em um caractere ou agora simplesmente usa e a notação Notação ^  .

agora a explicação:

Notação ^, é uma representação para os caracteres de controle, não-imprimíveis, da codificação de caracteres ASCII. A representação consiste de um circunflexo (^) seguido de uma letra maiúscula; Este dígrafo tem por padrão a correspondência entre a ordem dos códigos ASCII, para caracteres de controle, e a ordem das letras no alfabeto. Por exemplo, o caractere EOT, cujo valor decimal é 4, é representado por ^D, haja visto que D é a quarta letra do alfabeto. O caractere NUL, cujo valor é 0, é representado por ^@ (pois, na tabela ASCII, o caractere @ precede A). O caractere DEL, cujo código é 127, é usualmente representado por ^?, pois o caractere ASCII ‘?’ vem antes de ‘@’ e -1, escrito como uma cadeia de 8 bits e ignorando-se o bit mais a esquerda, coincide com 127. wikipedia

Então, a “Notação ^”  é apenas uma lógica sequencia, onde na tabela ASCII é mapeanda a sequencia dos caracteres não imprimíveis com  a sequencia da primeira letra do alfabeto em letra maiúscula.

Veja como fica a tabela ASCII para os caracteres não-visíveis com a  “Notação ^

Abrev Dec Notação com circunflexo Nome
NUL 0 ^@ Nulo (inglês Null)
SOH 1 ^A Início de cabeçalho (inglês Start of Header)
STX 2 ^B Início de texto (inglês Start of Text)
ETX 3 ^C Fim de texto (inglês End of Text)
EOT 4 ^D Fim de transmissão (inglês End of Transmission)
ENQ 5 ^E Consulta; inquirição (inglês Enquiry)
ACK 6 ^F Confirmação (inglês Acknowledge)
BEL 7 ^G Campainha; sinal sonoro (inglês Bell)
BS 8 ^H Espaço atrás; retorno de 1 caractere (inglês Back-space)
HT 9 ^I Tabulação horizontal (inglês Horizontal Tabulation)
LF 10 ^J Alimentação de linha; mudança de linha; nova linha (inglês Line Feed)
VT 11 ^K Tabulação vertical (inglês Vertical Tabulation)
FF 12 ^L Alimentação de formulário (inglês Form Feed)
CR 13 ^M Retorno do carro; retorno ao início da linha (inglês Carriage Return)
SO 14 ^N Mover para fora; deslocamento para fora (inglês Shift Out)
SI 15 ^O Mover para dentro; deslocamento para dentro (inglês Shift In)
DLE 16 ^P escape do linque de dados; escape de conexão (inglês Data-Link Escape)
DC1 17 ^Q Controle de dispositivo 1 (inglês Device Control 1)
DC2 18 ^R Controle de dispositivo 2 (inglês Device Control 2)
DC3 19 ^S Controle de dispositivo 3 (inglês Device Control 3)
DC4 20 ^T Controle de dispositivo 4 (inglês Device Control 4)
NAK 21 ^U Confirmação negativa (inglês Negative-Acknowledge)
SYN 22 ^V Estado ocioso síncrono; espera síncrona (inglês Synchronous Idle)
ETB 23 ^W Bloco de fim de transmissão (inglês End of Transmission Block)
CAN 24 ^X Cancelar (inglês Cancel)
EM 25 ^Y Fim de mídia; fim do meio (inglês End of Medium)
SUB 26 ^Z Substituir (inglês Substitute)
ESC 27 ^[ Escapar (inglês Escape)
FS 28 ^\ Separador de arquivos (inglês File Separator)
GS 29 ^] Separador de grupos (inglês Group Separator)
RS 30 ^^ Separador de registros (inglês Record Separator)
US 31 ^_ Separador de unidades (inglês Unit Separator)
DEL 127 ^? Deletar (inglês Delete)

https://pt.wikipedia.org/wiki/ASCII

e agora como usa isso em Delphi?

Exemplo : Mostrando Chr() e ^ 
var
tab  : char;
crlf : string;
begin
// Show the use of Chr
tab := Chr(9);
crlf := Chr(13)+Chr(10);
ShowMessage(‘Hello’+tab+’World’);
ShowMessage(”);
ShowMessage(‘Hello’+crlf+’World’);
ShowMessage(”);

// Show the equivalent use of ^
tab := ^I;  // I = 9th capital of the alphabet
crlf := ^M^J;  // M = 13th, J = 10th letters
ShowMessage(‘Hello’+tab+’World’);
ShowMessage(”);
ShowMessage(‘Hello’+crlf+’World’);
end;

http://www.delphibasics.co.uk/RTL.asp?Name=Chr

Está ai, mais um detalhe que pode fazer a diferença no seu dia a dia.

Abraços e até a próxima!

TWebBrowser navegando com a versão 11 do IE.

Hoje vou compartilhar uma dica interessante:

Como fazer o componente TWebBrowser do Delphi usar a versão 11 do Internet Explorer

Introdução:
TWebBrowser prove acesso a funcionalidades do “Microsoft’s Shell Doc Object and Control Library” (SHDOCVW.DLL), ou seja é um componente para exibição de paginas hml.

Problema:
Essa dll por padrão usa a versão 4 ou 7 do Internet Explorer, mesmo que o usuário atualize o navegador para o o IE 11, ele continuará a usar essa configuração antiga.

Solução:
Configura o registro para usar a versão instalada do IE
no windows 10, abra o regedit e navegue para a chave:

jhneabnjngeiakje
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION

Crie dentro de FEATURE_BROWSER_EMULATION uma nova chave REG_DWORD com o nome do executável que esta usando o TWebBroser.
no meu exemplo estou usando o internet explorer 11 então devo criar a chave com o nome onix.exe e valores hexadecimal 2af9 ou decimal 11001

miofpmpoadiapjep
para outras versões usar:

Value Description
11001 (0x2AF9 Internet Explorer 11. Webpages are displayed in IE11 edge mode, regardless of the declared !DOCTYPE directive. Failing to declare a !DOCTYPE directive causes the page to load in Quirks.
11000 (0x2AF8) IE11. Webpages containing standards-based !DOCTYPE directives are displayed in IE11 edge mode. Default value for IE11.
10001 (0x2711) Internet Explorer 10. Webpages are displayed in IE10 Standards mode, regardless of the !DOCTYPE directive.
10000 (0x02710) Internet Explorer 10. Webpages containing standards-based !DOCTYPE directives are displayed in IE10 Standards mode. Default value for Internet Explorer 10.
9999 (0x270F) Windows Internet Explorer 9. Webpages are displayed in IE9 Standards mode, regardless of the declared !DOCTYPE directive. Failing todeclare a !DOCTYPE directive causes the page to load in Quirks.
9000 (0x2328) Internet Explorer 9. Webpages containing standards-based !DOCTYPE directives are displayed in IE9 mode. Default value for Internet Explorer 9.

Important  In Internet Explorer 10, Webpages containing standards-based !DOCTYPE directives are displayed in IE10 Standards mode.
8888 (0x22B8) Webpages are displayed in IE8 Standards mode, regardless of the declared !DOCTYPE directive. Failing to declare a !DOCTYPE directivecauses the page to load in Quirks.
8000 (0x1F40) Webpages containing standards-based !DOCTYPE directives are displayed in IE8 mode. Default value for Internet Explorer 8

Important  In Internet Explorer 10, Webpages containing standards-based !DOCTYPE directives are displayed in IE10 Standards mode.
7000 (0x1B58) Webpages containing standards-based !DOCTYPE directives are displayed in IE7 Standards mode. Default value for applications hosting the WebBrowser Control.

feche o registro e abra o sistema:

Abaixo como estava antes de mudar a configuração
Antes de mudar a configuração:

Abraços
Marcos Nielsen