Há algum tempo, falamos aqui sobre como distribuir aplicativos para os relógios inteligentes Moto360 da Motorola e também o GearLive da Samsung usando o RAD Studio XE7 como plataforma de desenvolvimento. Mostramos como instalar os respectivos templates no Delphi para que tenhamos noções de tamanho e de encaixe de nossos componentes em tela.

A Apple acaba de lançar seu mais novo dispositivo, o AppleWatch. O relógio inteligente da Apple roda iOS assim como os demais dispositivos móveis da empresa, tais como iPhone, iPad e iPod Touch. Já sabemos como programar e distribuir aplicativos para esses aparelhos, mas e como fazemos para nos adaptar a esse novo dispositivo?

Hello AppleWatch com RAD Studio XE8!

Assim como mencionado anteriormente, mostramos aqui no blog como inserir templates para dois dispositivos móveis que fogem bastante do padrão de aplicativos que estamos acostumados. Foi visto como preparar nosso Delphi (ou C++Builder) com templates dos relógios inteligentes da Motorola, o Moto360, e da Samsung, o GearLive.

Como bem sabemos, a Apple também lançou seu relógio inteligente chamado de AppleWatch em meados de Fevereiro deste ano. Até o fechamento desse post, não havia previsão de lançamento do relógio no Brasil, mas já podemos preparar nosso Delphi para receber a novidade.

Instalando o Template

A instalação do template no RAD Studio XE8 se dá um pouco diferente e mais fácil do que na versão anterior, a XE7. Como primeira providência a se tomar, precisamos criar um pacote no Delphi e programar a inclusão do dispositivo na IDE. Mas acalme-se, já fizemos isso para você. Apenas para fins de aprendizado, o código abaixo demonstra como fazer isso. Basta chamar o método AddDevice da classe TDeviceInfo e incluir as informações pertinentes ao novo dispositivo. Veja na Listagem 1.:

unit AppleWatch38mm;

interface

implementation

uses

  system.Devices, system.Types, system.SysUtils;

const
  ViewName = 'AppleWatch38mm'; // The name of the view.

{
  Add this after MobileDevices in
  %AppData%\Roaming\Embarcadero\BDS\16.0\DevicesPresents.xml

  <MobileDevice>
    <Displayname>GearLive</Displayname>
    <Name>GearLive</Name>
    <DevicePlatform>3</DevicePlatform>
    <FormFactor>2</FormFactor>
    <Portrait Enabled="True" Width="210" Height="250" Top="110" Left="250" StatusbarHeight="0" StatusBarPos="0" Artwork="C:\Users\jim\Documents\Embarcadero\Studio\HelloFireUI\AppleWatch38mm.png" />
    <UpsideDown Enabled="False" Width="213" Height="213" Top="0" Left="0" StatusbarHeight="0" StatusBarPos="0" Artwork="" />
    <LandscapeLeft Enabled="False" Width="213" Height="213" Top="0" Left="0" StatusbarHeight="0" StatusBarPos="0" Artwork="" />
    <LandscapeRight Enabled="False" Width="213" Height="213" Top="0" Left="0" StatusbarHeight="0" StatusBarPos="0" Artwork="" />
  </MobileDevice>
}

initialization

  TDeviceinfo.AddDevice(TDeviceinfo.TDeviceClass.Tablet, // Identified as Tablet
    ViewName,
    // The GearLive is 320x320 phyiscal and 213x213 logical with 240 PPI
    // Just like the Android Wear emulator
    TSize.Create(320, 320), TSize.Create(210, 240), // MinPhysicalSize(max, min), MinLogicalSize(max, min)
    TOSVersion.TPlatform.pfiOS, 240, // 240, //Select the platform and the pixel density.
    True); // Exclusive

finalization
  TDeviceinfo.RemoveDevice(ViewName); // To unregister the view after unistalling the package.

end.

Listagem 1. Criando o pacote de adição da nova view

Nesse caso estamos criando um novo dispositivo (view na verdade) chamado de AppleWatch38mm, haja vista que existe dois formatos de AppleWatch disponíveis, 38 e 42mm. Mas como já falamos, não se preocupe com isso, pois o blog TDevRocks já criou o pacote e você pode baixar gratuitamente clicando na imagem a seguir:

Você precisa descompactar o arquivo em um diretório de sua preferência e então abrir o Delphi. Clique em File > New > Multi-Device Application Delphi para criar uma nova aplicação multi-dispositivos e escolha um template em branco. Logo em seguida abra o menu Tools > Options e localize a opção Device Manager em Form Designer. Esse item contém todas as configurações de cada view encontrada no Delphi, dessa forma adicionaremos duas novas.

Clique em Add e na janela que se abre digite AppleWatch38mm em Device Name. Selecione a plataforma, nesse caso iOS, e em seguida escolha Watch em Form Factor. Você notará facilmente que terá que escolher a imagem de fundo do novo dispositivo, e configurar os demais itens que são referentes aos limites do novo “form”.

Em revive background clique no botão elipse (Três Pontinhos) e escolha o arquivo AppleWatch38mm.png que encontra-se disponível na pasta descompactada por você após o download. Em seguida entre com as medidas conforme abaixo:

• Left: 90;
• Top: 100;
• Width: 210;
• Height: 250.

Você visualizará ao vivo as modificações no exemplo à sua direita como visto na Figura 1.

Figura 1. Tela de configuração de nova View

Confirme a criação na nova view e repita então os mesmos passos, mas dessa vez criando a view AppleWatch42mm e com as medidas abaixo:

• Left: 80;
• Top: 110;
• Width: 220;
• Height: 260.

Confirme novamente e clique também em Ok para finalizar a caixa de diálogo Options. Você precisará reiniciar o Delphi, mas antes disso precisa fazer uma última atualização. Vá até o menu File > Open e na caixa de diálogo digite %appdata% no nome do arquivo para filtrar a janela. Acesse a pasta Embarcadero > BDS > 16.0. Abra o arquivo DevicePresents.xml. Ele possui todas as configurações das views criadas dentro do Delphi.

Role até o final da tela e perceba que há duas novas Tags MobileDevice. Ambas estão com um Name estranho, com uma sequência de números. Basta modificar cada uma para o nome da view que inserimos na janela Device Manager, ou seja, AppleWatch38mm e AppleWatch42mm, respectivamente. Na Listagem 2 você pode conferir precisa ser configurado.

	<MobileDevice>
		<Name>AppleWatch38mm</Name>
		<DevicePlatform Default="False">2</DevicePlatform>
		<Portrait Enabled="True" Width="210" Height="250" Top="100" Left="90" StatusbarHeight="0" StatusBarPos="0" Artwork="C:\Componentes\FireUI-Devices-master\AppleWatch38mm.png"/>
		<UpsideDown Enabled="False" Width="0" Height="0" Top="0" Left="0" StatusbarHeight="0" StatusBarPos="0" Artwork=""/>
		<LandscapeLeft Enabled="False" Width="0" Height="0" Top="0" Left="0" StatusbarHeight="0" StatusBarPos="0" Artwork=""/>
		<LandscapeRight Enabled="False" Width="0" Height="0" Top="0" Left="0" StatusbarHeight="0" StatusBarPos="0" Artwork=""/>
		<Displayname>AppleWatch38mm</Displayname>
		<UserData>True</UserData>
		<FormFactor>8</FormFactor>
		<Thumbnail>C:\Users\adrianosantos\AppData\Roaming\Embarcadero\BDS\16.0\Thumbs\D5CD672593BD4CE1941E4BFE76C71A84</Thumbnail>
	</MobileDevice>
	<MobileDevice>
		<Name>AppleWatch42mm</Name>
		<DevicePlatform Default="False">2</DevicePlatform>
		<Portrait Enabled="True" Width="220" Height="260" Top="110" Left="80" StatusbarHeight="0" StatusBarPos="0" Artwork="C:\Componentes\FireUI-Devices-master\AppleWatch42mm.png"/>
		<UpsideDown Enabled="False" Width="0" Height="0" Top="0" Left="0" StatusbarHeight="0" StatusBarPos="0" Artwork=""/>
		<LandscapeLeft Enabled="False" Width="0" Height="0" Top="0" Left="0" StatusbarHeight="0" StatusBarPos="0" Artwork=""/>
		<LandscapeRight Enabled="False" Width="0" Height="0" Top="0" Left="0" StatusbarHeight="0" StatusBarPos="0" Artwork=""/>
		<Displayname>AppleWatch42mm</Displayname>
		<UserData>True</UserData>
		<FormFactor>8</FormFactor>
		<Thumbnail>C:\Users\adrianosantos\AppData\Roaming\Embarcadero\BDS\16.0\Thumbs\1594C90468B24B1B8C5641D398A57441</Thumbnail>
	</MobileDevice>

Listagem 2. Edição do arquivo DevicePresentes.xml

Coloque exatamente o mesmo nome digitado em Device Manager, do contrário não funcionará. Salve o arquivo, e clique em File > Close All sem salvar o projeto atual.

Agora vamos instalar a view. Para isso procure pelo grupo de programas HelloFireUI.groupproj na pasta descompactada e abra-o no Delphi. Esse arquivo contém o projeto do pacote com a view do AppleWatch, assim como do Moto360 e GearLive. Clique com o botão direito no projeto FireUIViews.bpl e escolha Install. Após a instalação, feche o Delphi e abra-o novamente.

Criando um projeto para AppleWatch

Agora com o Delphi reaberto, podemos criar novos projetos e usar a view do AppleWatch para desenvolver nossos aplicativos. Crie um novo app usando o menu File > New > Multi-Device Application Delphi e escolha um template em branco. Em seguida clique no Combobox View e veja as duas novas views adicionadas ao Delphi como na Figura 2.

Figura 2. Views adicionadas

Perceba ainda na imagem que nosso Delphi ainda possui GearLive e Moto 360.

Conclusão

Esse artigo teve o intuito de demonstrar como adicionar duas novas views personalizadas para as versões 38 e 42mm do relógio inteligente da Apple, o AppleWatch. Entretanto, os mesmos conceitos aplicados aqui podem ser utilizados para adicionar quaisquer novos dispositivos na IDE do Delphi ou C++ Builder.

Obs. Vale ressaltar que não efetuamos testes de deploy de um aplicativo Delphi para iOS do AppleWatch por ainda não possuirmos o aparelho para testes.

Esperamos que tenham gostado.

#GoToDelphi

Delphi Tour

Na próxima semana a Embarcadero do Brasil inicia seu Tour por 11 cidades espalhadas pelo Brasil todo em busca de mostrar todas as novidades do RAD Studio XE8. Faça sua inscrição para o evento, é gratuito, mas limitado.