Capítulo 6: Gerenciadores de Layout As classes de gerenciamento de layout que a BlackBerry API nos oferece permitem a organização dos componentes de uma forma mais rápida e clara. Eles se parecem muito com algumas classes do Java Swing que servem para o mesmo propósito, como GirdLayout e BorderLayout, por exemplo. Vamos começar pelos gerenciadores que estão presente desde as primeiras versões do JDE.
DialogFieldManager Este gerenciador de layout pode ser entendido como um Dialog não modal. Para facilitar o entendimento, vamos acompanhar a Figura 36:
Figura 36: Estrutura do DialogFieldManager.
O Icon e o Message podem ser configurados, porém, sua arquitetura e presença no layout do manager não podem ser alteradas. Ou seja, o ícone sempre estará no canto superior esquerdo e a mensagem sempre estará no canto superior direito.
A mensagem sempre será uma instância do componente RichTextField, já o ícone, sempre será uma instância de BitmapField. A User Field Area permite que sejam inseridos um ou muitos componentes, a escolha do usuário. A única exigência é que seja uma classe que estende de Field. Agora que vimos sua estrutura, vamos ver código. Veja a estrutura básica da aplicação exemplo abaixo: public class UsingFieldManager extends UiApplication { public static void main(String args[]){ UsingFieldManager app = new UsingFieldManager(); app.enterEventDispatcher(); } public UsingFieldManager() { HomeScreen homeScreen = new HomeScreen(); pushScreen(homeScreen); } } class HomeScreen extends FullScreen{ private String[] conexoes = new String[]{"BES", "BIS", "Wi-Fi", "Wap", "Operadora"}; private String[] tempos = new String[]{"1 Min.", "10 Min.", "30 Min."}; public HomeScreen(){ setBackground(BackgroundFactory.createSolidBackground( Color.LIGHTGRAY )); 1: DialogFieldManager d = new DialogFieldManager); 2: d.setIcon(new BitmapField(Bitmap.getPredefinedBitmap(Bitmap.EXCLAMATION))); 3: d.setMessage(new RichTextField("Configurações")); 4: d.addCustomField(new ObjectChoiceField("Tipo Conexão: ", conexoes)); 5: d.addCustomField(new ObjectChoiceField("Tempo Limite: ", tempos)); 6: d.addCustomField(new SeparatorField()); 7: d.addCustomField(new RichTextField("Opções:")); 8: CheckboxField myCheckbox = new CheckboxField("GPS", true); 9: CheckboxField myCheckbox2 = new CheckboxField("M-Payment", false); 10: d.addCustomField(myCheckbox); 11: d.addCustomField(myCheckbox2); 12: } }
add(d);
Na primeira linha numera estamos criando a instância de DialogFieldManager. Os outros dois construtores da classe recebem uma ou duas variáveis long para definição de estilos. Na linha 2 estamos configurando o ícone do manager. Perceba que usamos o método getPredefinedBitmap para usar uma imagem do próprio BlackBerry. Na linha 3 informamos a instância de RichTetxField que será usada como message. No intervalo de linhas de 4 a 11 usamos o método addCustomField, adicionando assim alguns componentes criados por nós mesmos. Finalmente, na linha 12, inserimos o manager na tela. Veja na Figura 37 como a interface se consolidou:
Figura 36: DialogFieldManager em execução.
Este gerenciador não costuma ser muito usado, mas mesmo assim, é importante para um analista de sistemas BlackBerry saber que ele existe.
Para saber mais sobre a classe, visite a página http://www.blackberry.com/developers/docs/4.6.0api/net/rim/device/api/ui/ container/DialogFieldManager.html.
FlowFieldManager Esta classe trata dos componentes como um fluxo. Por padrão, essa seqüência é na horizontal. Um componente é colocado após o anterior, lado a lado. Quando o limite da tela é excedido, o manager continua na linha anterior. Para compreender este manager vamos continuar no exemplo anterior. Altere o construtor da classe, adicionando o seguinte código: setBackground(...); FlowFieldManager flow = new FlowFieldManager(); flow.add(new BitmapField(Bitmap.getPredefinedBitmap(Bitmap.EXCLAMATION))); flow.add(new RichTextField("Configurações")); flow.add(new ObjectChoiceField("Tipo Conexão: ", conexoes)); flow.add(new ObjectChoiceField("Tempo Limite: ", tempos)); flow.add(new SeparatorField()); flow.add(new RichTextField("Opções:")); CheckboxField myCheckbox = new CheckboxField("Geoposicionamento", true); CheckboxField myCheckbox2 = new CheckboxField("M-Payment", false); flow.add(myCheckbox); flow.add(myCheckbox2); add(flow);
Na primeira linha instanciamos a classe. Um de seus construtores (utilizado aqui) não recebe nenhum parâmetro. Também podemos passar um valor long definindo o estilo do mesmo. As linhas subseqüentes apenas adicionam alguns componentes ao gerenciador de layout. Atenção, o método inserção de um componente aqui é add(). Para saber mais sobre a classe visite a página http://www.blackberry.com/developers/docs/5.0.0api/net/rim/device/api/ui/ container/FlowFieldManager.html. Veja na Figura 37 como a interface do aplicativo mudou:
Figura 37: FlowFieldManager básico.
Note que o comportamento detalhado anteriormente realmente acontece. O primeiro botão e o primeiro texto estão alinhados horizontalmente porque cabem nos limites da tela. A primeira caixa de seleção já é jogada para a linha anterior. E se o objetivo fosse um componente logo abaixo do outro, em um fluxo vertical e não horizontal. Basta mudar a instanciação do objeto: FlowFieldManager flow = new FlowFieldManager(Manager.VERTICAL_SCROLL);
HorizontalFieldManager Muito parecido com o Flow, porém, somente com a opção da linha horizontal. A classe HorizontalFieldManager apresenta apenas dois construtores. Um, sem receber nenhum parâmetro. Outro, recebendo uma variável long para definir estilo.
Como este manager é extremamente simples. Vamos criar apenas um exemplo em conjunto com o tópico seguinte. Para saber mais sobre a classe, visite a página http://www.blackberry.com/developers/docs/5.0.0api/net/rim/device/api/ui/ container/HorizontalFieldManager.html.
VerticalFieldManager Também parecido com o Flow, porém, somente com a opção de organização vertical. A classe VerticalFieldManager apresenta apenas dois construtores. Um, sem receber nenhum parâmetro. Outro, recebendo uma variável long para definir estilo. Para saber mais sobre a classe, visite a página http://www.blackberry.com/developers/docs/5.0.0api/net/rim/device/api/ui/ container/VerticalFieldManager.html. Veja o código abaixo, ele usa os dois manager´s vistos anteriormente. Lembrando, sobrescreva o mesmo no construtor da classe HomeScreen: HorizontalFieldManager f = new HorizontalFieldManager(); f.add(new BitmapField(Bitmap.getPredefinedBitmap(Bitmap.EXCLAMATION))); f.add(new RichTextField("Configurações")); VerticalFieldManager v = new VerticalFieldManager(); v.add(new ObjectChoiceField("Tipo Conexão: ", conexoes)); v.add(new ObjectChoiceField("Tempo Limite: ", tempos)); v.add(new SeparatorField()); v.add(new RichTextField("Opções:")); CheckboxField myCheckbox = new CheckboxField("Geoposicionamento", true); CheckboxField myCheckbox2 = new CheckboxField("M-Payment", false); v.add(myCheckbox); v.add(myCheckbox2); add(f); add(v);
Veja na Figura 38, a nova configuração da interface:
Figura 38: Uso dos gerenciadores HorizontalFieldManager e VerticalFieldManager.
Na grande maioria dos casos, as interfaces gráficas serão um conjunto de vários gerenciadores de layout. Em várias situações, eles estarão um dentro do outro, formando layouts mais complexos.
GridFieldManager Você quer organizar seus componentes em uma grade de linhas e colunas? Eis aqui o gerenciador que lhe possibilita isso. Assim como as outras classes aqui, essa é simples, porém, com um nível um pouco mais de detalhes. Seu único construtor recebe três parâmetros. Dois inteiros, definindo a quantidade de linhas e colunas, mais um long como estilo. Antes de começar a codificar, veja como é a interface de exemplo do GridFieldManager na Figura 39:
Figura 38: GridFieldManager.
Limpe o construtor da classe HomeScreen e vamos adicionando algumas linhas: GridFieldManager grid = new GridFieldManager(3, 3, GridFieldManager.FIELD_LEFT);
Nenhum segredo, apenas criação do objeto. 3 linhas, 2 colunas e alinhamento a esquerda. Para preencher a grade podemos usar o método add(): grid.add(new BitmapField(Bitmap.getPredefinedBitmap(Bitmap.EXCLAMATION))); grid.add(new RichTextField("Conexão", Field.FIELD_LEFT)); grid.add(new RichTextField("Opções", Field.FIELD_LEFT));
O próprio gerenciador de encarregará de colocar o field na próxima célula vazia. Mas podemos também usar o método insert, dizendo explicitamente a célula (linha, coluna) onde desejamos fazer a inserção: grid.insert(new RichTextField("-", Field.FIELD_HCENTER| Field.USE_ALL_WIDTH), 1, 0); grid.insert(new RichTextField("-", Field.FIELD_HCENTER| Field.USE_ALL_WIDTH), 2, 0); grid.insert(new CheckboxField("BES", false, Field.FIELD_LEFT| Field.USE_ALL_WIDTH), 1, 1); grid.insert(new CheckboxField("BIS", false, Field.FIELD_LEFT| Field.USE_ALL_WIDTH), 2, 1); grid.insert(new CheckboxField("Geoposicionamento", false, Field.FIELD_LEFT|Field.USE_ALL_WIDTH), 1, 2); grid.insert(new CheckboxField("M-Payment", false, Field.FIELD_LEFT| Field.USE_ALL_WIDTH), 2, 2); add(grid);
Também não temos nenhum segredo aqui. Apenas um detalhe, estamos usando o par de constantes Field.FIELD_LEFT| Field.USE_ALL_WIDTH na criação dos componentes, para que os mesmos fiquem alinhados a esquerda. Teste o aplicativo com este código. Prceba que a interface ainda não se encaixa com aquela mostrada na última figura. Adicione mais estas linhas: grid.setColumnProperty(0, GridFieldManager.FIXED_SIZE, 60); grid.setColumnProperty(1, GridFieldManager.FIXED_SIZE, 120); grid.setColumnProperty(2, GridFieldManager.FIXED_SIZE, 245); grid.setCellPadding(2);
Basicamente, definimos as propriedades das três colunas, no que se refere à largura. Existem métodos e constantes para configurar também a altura das linhas. O método setCellPadding define um valor para o preenchimento das células, aqui configurado com o inteiro 2. Para mais detalhes sobre a classem, visite a página http://www.blackberry.com/developers/docs/5.0.0api/net/rim/device/api/ui/ container/GridFieldManager.html. Este gerenciador está presente somente na versão 5.0, ou superior, do JDE.
PhoneScreenVerticalManager e PhoneScreenHorizontalManager Os dois gerenciadores servem para alinhar componentes verticalmente e horizontalmente, respectivamente, em uma PhoneScreen. Esta classe representa a interface de visualização de uma chamada no BlackBerry. Logo, a mesma será detalhada em outro capítulo, onde abordarem especificamente a forma de interagir com aplicativos nativos do aparelho. Por hora, veja a Figura 39 e tenha uma visualização das duas classes de gerenciamento de layout específicas para PhoneScreem:
Figura 39: PhoneScreen.
Sobre Mim Graduado em Ciência da Computação, pós-graduando em Web: Estratégias de Inovação e Tecnologia. Analista de sistemas mobile na MobMidia | Grupo Pontomobi, Ricardo da Silva Ogliari é autor de dezenas de artigos que foram publicados em anais de congressos nacionais e internacionais, sites especializados e revistas. Palestrante em eventos nacionais e internacionais, como JustJava, Java Day, GeoLivre, ExpoGPS, FISL e FITE, sempre aborda temas relacionados a computação móvel.