download

Utilizando polyfill INTL no Ionic 2

Começamos um projeto novo aqui na Tegra e para ele decidimos utilizar Ionic 2 pelo seu desempenho em relação ao Ionic 1.

 

A ideia deste post é mostrar um problema comum que boa parte dos desenvolvedores estão passando hoje ao fazer build para iOS.

 

Os pipes padrões do Angular 2 utilizam a especificação INTL para fazer as formatações de data e número.
Segue a documentação da INTL:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Intl

(mais…)

Leia Mais

IOS – Trabalhando com cores em Hexadecimais

IMG_0007

Desenvolvemos um aplicativo mobile, no qual o usuário poderia consultar informações da sua empresa como desempenho das vendas e o atingimento das metas.

A ideia era fazer algo semelhante ao Google Now, distribuindo as informações em cartões:

Para deixar o conteúdo de forma customizável o aplicativo solicitava um xml do servidor do cliente. Através desse xml é montado os cartões e as informações dentro dele. Um exemplo está abaixo:

<cards>

<card>

<data>

<line>

<label>Venda</label>

<value>R$ 1.000,00</value>

</line>

</data>

</card>

</cards>

No xml acima não existe o atributo de cor em nenhuma das tags. Decidimos adicionar o atributo color nas tags label e value (da tag line), assim o cliente poderia customizar a cor das ‘linhas’.

No iOS trabalhamos com o UIColor para gerar as cores. Mas UIColor recebe como parâmetro 4 valores ( red, green, blue, alpha ) seria ruim adicionar esses 4 paramêtros na tag, ficando assim:

<line>

<label>Venda</label>

<value colorRed=”255″ colorGreen=”255″ colorBlue=”255″ colorAlpha=”1″>R$ 1.000,00</value>

</line>

Pensamos em trabalhar com cores hexadecimais que reduz os 4 atributos para 1 só. Removemos também o atributo alpha, ficando assim:

<value color=”#00FFD2″>R$ 1.000,00</value>

Agora precisamos dentro da aplicação interpretar o valor hexadecimal e criar um objeto UIColor.

Entendo a cor hexadecimal

Uma cor ela pode ser composta pela variação das 3 cores primárias.

 

Na cor hexadecimal, cada par representa a intensidade de uma cor primária, essa composição forma uma nova cor:

#00FFD2

Como a cor está em base 16 ( hexa ) precisamos converter para base 10 ( decimal ) assim poderemos usar na UIColor. Para entender mais sobre conversão entre sistemas numéricos veja este link: http://pt.wikipedia.org/wiki/Conversão_entre_sistemas_numéricos

Abaixo segue uma implementação em objective-c para conversão de base 16 para base 10:

Screen Shot 2013-12-05 at 7.59.17 AM
Pessoal, não achei um jeito de postar código aqui no blog, por isso a screenshot. Vamos melhor nos próximos posts.

Obs: Podemos converter qualquer caracter para número apenas subtraindo por outro caracter. Ex.:

O caracter ‘1’ pode ser convertido para o valor inteiro 1 fazendo isso:

‘1’ – ‘0’ = 1 (inteiro)

Isso funciona porque a representação decimal desses caracteres é 31 e 30, respectivamente, ou seja, quando fazemos ‘1’ – ‘0’, na verdade estamos fazendo 31 – 30.

Logo, podemos converter ‘A’ para 10 fazendo ‘A’ – ‘A’ + 10.

Agora sabendo como converter a cor hexa para decimal basta criar UIColor com os valores decimais.

Segue abaixo uma implementação para criar UIColor a partir de cor hexadecimal:

Screen Shot 2013-12-05 at 8.10.44 AM

Abraço e até a próxima!

Leia Mais