Deixe sua aplicação BlackBerry API mais rica com Transições Animadas
Boa Tarde!
Hoje iremos conhecer os recursos necessários para aplicar Transições Animadas e deixar nossas aplicações BlackBerry API mais ricas e atraentes. Bons estudos!!!
- Transições Animadas
A partir da versão 5.0 da JDE do BlackBerry, ou seja, a partir da versão 5.0 do sistema operacional dos smartphones da empresa canadense RIM, o desenvolvedor consegue criar transições animadas entre telas. Isto também era possível nas versões anteriores a 5.0, porém, o desenvolvedor precisaria criar um extenso código para simular um componente deste porte.
O exemplo que vamos criar aqui foi baseado no artigo Creating a Screen Transition. Clique aqui para ver o exemplo original.
O aplicativo muito simples, ele mostra basicamente duas telas, que terão uma transição animada quando ocorrer a troca entre elas.
Veja as figuras abaixo com as duas telas da aplicação:
Veja a listagem de código abaixo:
1: public class TransitionSample extends UiApplication implements FieldChangeListener {
2: private Screen segundaTela;
3: private Runnable _popRunnable;
4:
5: public static void main(String[] args) {
6: TransitionSample theApp = new ScreenTransitionSample ();
7: theApp.enterEventDispatcher();
8: }
9:
10: public TransitionSample () {
11: segundaTela = new FullScreen();
12: segundaTela.setBackground( BackgroundFactory.createSolidBackground(Color.LIGHTBLUE) );
13:
14: LabelField labelField = new LabelField(“Esta tela fecha automaticamente depois de 2 segundos.”);
15: segundaTela.add(labelField);
16:
17: MainScreen baseScreen = new MainScreen();
18: baseScreen.setTitle(“Primeira Tela”);
19:
20: ButtonField buttonField = new ButtonField(“Ver Transição”, ButtonField.CONSUME_CLICK) ;
21: buttonField.setChangeListener(this);
22: baseScreen.add(buttonField);
23:
24: pushScreen(baseScreen);
25:
26: _popRunnable = new Runnable() {
27: public void run() {
28: popScreen(segundaTela);
29: }
30: };
31: }
32:
33: public void fieldChanged(Field field, int context)
34: {
35: pushScreen(segundaTela);
36: invokeLater(_popRunnable, 2000, false);
37: }
38: }
Na primeira linha estamos trabalhando com uma nova interface: FieldChangeListener. Por isso, devemos implementar obrigatoriamente o método fieldChanged (linha 33). Este método é chamado quando ocorre uma mudanda de tela no aplicativo.
O resto da codificação já deve ser bem familiar ao leitor. Porém, ao criar o componente ButtonField, percebemos que estamos passando como estilo a constante ButtonField.CONSUME_CLICK. Esta constante indica que o botão irá auto-consumir o evento de clique. Na linha seguinte, adicionamos o listener de mudança de tela ao botão, logo, quando clicarmos no mesmo, o método fieldChange será acionado.
Este método, por sua vez, irá mostrar a segunda tela ao usuário, além disso, invoca a Thread criada na linha 26, depois de 2 segundos. A _popRunnable apenas remove a segunda tela da pilha de Screen´s.
Finalizando, nossa segunda tela tem um fundo totalmente azul, e nem usamos um Canvas para definir esta coloração como background. Veja a linha 2. Estamos usando a classe BackgroundFactory e seu método createSolidBackground para criar este efeito.
Porém, ao testar este aplicativo, perceba que a mudança de telas não trouxe nenhuma transição animada, fique calmo, vamos programar esta funcionalidade agora.
O primeiro passo é a criação de uma instância da classe TransitionContext. Esta define todas as características de uma transição animada entre duas telas.
A tabela abaixo é de suma importância, pois mostra todas as opções de animação e as propriedades que cada uma delas pode ter:
|
Transição |
Atributos |
TransitionContext.TRANSITION_FADE |
TransitionContext.ATTR_DURATION
|
.TRANSITION_SLIDE |
TransitionContext.ATTR_DURATION
|
.TRANSITION_WIPE |
TransitionContext.ATTR_DURATION
|
.TRANSITION_ZOOM |
TransitionContext.ATTR_DURATION
|
.TRANSITION_NONE |
Nenhum |
Coloque as linhas de código abaixo no final do construtor da classe:
1: transitionContext transition = new TransitionContext(TransitionContext.TRANSITION_SLIDE);
2: transition.setIntAttribute(TransitionContext.ATTR_DURATION, 500);
3: transition.setIntAttribute(TransitionContext.ATTR_DIRECTION, TransitionContext.DIRECTION_RIGHT);
4: transition.setIntAttribute(TransitionContext.ATTR_STYLE, TransitionContext.STYLE_PUSH);
Na primeira linha criamos a instância de TransitionContext. Seu construtor aceita um único parâmetro, uma constante que define qual será o efeito de transição. Como escolhemos SLIDE como parâmetro, podemos definir qualquer um de seus quatro parâmetros (veja a tabela novamente).
A definição das propriedades é feita com o método setIntAttribute ou setAttribute. A única diferença é que no primeiro o segundo parâmetro é um inteiro e no último, o segundo parâmetro é um Object.
Perceba que a definição das propriedades é muito simples, os dois parâmetros são bem legíveis. No primeiro definimos qual a propriedade e no segundo seu valor. Sempre usando as constantes da própria classe.
Porém, ainda não é o bastante para animar nossa transição.
Depois do código anterior adicione as duas linhas de código abaixo:
01. UiEngineInstance engine = Ui.getUiEngineInstance();
02. engine.setTransition(baseScreen, segundaTela, UiEngineInstance.TRIGGER_PUSH, transition);
O primeiro passo é criar uma instância de UiEngineInstance. Esta classe está presente desde a versão 4.7 do sistema operacional BlackBerry. Porém, o método setTransition usado logo a seguir está presente só a partir da versão 5.0
Os quatro parâmetros são:
- Tela de origem;
- Tela de destino;
- Trigger: pode ser umas das duas constantes UiEngineInstance.TRIGGER_PUSH ou UiEngineInstance.TRIGGER_POP;
- Instância de TransitionContext.
Agora execute novamente o aplicativo e verá que na mudança da primeira para a segunda tela a animação slide está presente.
Para completar nosso exemplo, adicione as linhas de código da listagem abaixo, elas farão com a transição da segunda para a primeira tela também seja animada:
01. transition = new TransitionContext(TransitionContext.TRANSITION_FADE);
02. transition.setIntAttribute(TransitionContext.ATTR_DURATION, 500);
03. transition.setIntAttribute(TransitionContext.ATTR_KIND, TransitionContext.KIND_OUT);
04. engine.setTransition(segundaTela, null, UiEngineInstance.TRIGGER_POP, transition);
Quaisquer dúvidas sobre o conteúdo postado aqui, tire sua dúvida na parte de comentários ou a envie para o email blackberrydevgroup@gmail.com e responderemos assim que possível.
Bons estudos!!!
NOTA: Tutorial baseado no artigo de Ricardo Ogliari. Clique aqui para ver o documento na íntegra.
