Usando componentes no IB - Final
sábado, junho 27th, 2009Para definirmos os componentes criados no IB iremos instanciar estes componentes usando IBOutlet. Para não necessitar entrar em grandes divagações sobre este parametro vamos entender que o prefixo IB vem de Interface Builder e Outlet que é um componente de saída, no caso visual. Em outra oportunidade vamos nos aprofundar neste tema. Você deve estar pensando, que como criamos 3 componentes no IB vamos precisar declarar 3 componentes no .h, porém nós também vamos querer manipular as views do IB, ou seja, a janela Window e a janela RootViewController, desta forma vamos precisar de 5 declarações, uma declaração para o componente UITextField, uma declaração para o componente UIButton, uma declaração para o componente UILabel, uma declaração para a janela Window e uma declaração para a janela RootViewController. No caso das janelas, vamos precisar declarar variáveis UIView. Outro ponto importante, a nossa intenção basicamente é colocar um nome no componente UITextView, e depois de pressionar o componente UIButton colocar uma mensagem no componente UILabel. Isto quer dizer que iremos incluir uma ação na nossa aplicação, pois só iremos colocar a mensagem no componente UILabel depois da ação de pressionar o componente UIButton. Quero dizer que vamos precisar também utilizar outro tipo de parâmetro o IBAction. Temos aqui o mesmo princípio do IBOutlet, ou seja, IB de Interface Builder e Action que quer dizer que iremos fazer uma ação a partir de um elemento criado no IB. Atualize o arquivo .h conforme segue:
#import <UIKit/UIKit.h>
@class MainViewController;
@class FlipsideViewController;
@interface RootViewController : UIViewController {
UIButton *infoButton;
MainViewController *mainViewController;
FlipsideViewController *flipsideViewController;
UINavigationBar *flipsideNavigationBar;
IBOutlet UIView *viewMain;
IBOutlet UIView *viewRoot;
IBOutlet UITextField *textField;
IBOutlet UIButton *button;
IBOutlet UILabel *labelSTR;
}
@property (nonatomic, retain) IBOutlet UIButton *infoButton;
@property (nonatomic, retain) MainViewController *mainViewController;
@property (nonatomic, retain) UINavigationBar *flipsideNavigationBar;
@property (nonatomic, retain) FlipsideViewController *flipsideViewController;
@property (nonatomic, retain) UIView *viewMain;
@property (nonatomic, retain) UIView *viewRoot;
@property (nonatomic, retain) UITextField *textField;
@property (nonatomic, retain) UIButton *button;
@property (nonatomic, retain) UILabel *labelSTR;
- (IBAction)toggleView;
- (IBAction)showMessage:(id)sender;
@end
Observe as linha que contém o IBOutlet e o IBAction. Repare que no caso do IBOutlet precisamos definir também as propriedades do componente que acabamos de criar, já para o IBAction não é necessário. Bom já modificamos o arquivo .h, agora precisamos implementar o arquivo .m. Você irá observar que antes de usar os componentes criados pela declaração IBOutlet vamos precisar sintezila-los. Neste momento vamos assumir isto como uma necessidade básica. Atualize o arquivo RootViewController.m conforme segue:
#import “RootViewController.h”
#import “MainViewController.h”
#import “FlipsideViewController.h”
@implementation RootViewController
@synthesize infoButton;
@synthesize flipsideNavigationBar;
@synthesize mainViewController;
@synthesize flipsideViewController;
@synthesize viewMain;
@synthesize viewRoot;
@synthesize textField;
@synthesize labelSTR;
@synthesize button;
- (void)viewDidLoad {
[super viewDidLoad];
MainViewController *viewController = [[MainViewController alloc] initWithNibName:@”MainView” bundle:nil];
self.mainViewController = viewController;
[viewController release];
[self.view insertSubview:mainViewController.view belowSubview:infoButton];
}
- (void)loadFlipsideViewController {
FlipsideViewController *viewController = [[FlipsideViewController alloc] initWithNibName:@”FlipsideView” bundle:nil];
self.flipsideViewController = viewController;
[viewController release];
// Set up the navigation bar
UINavigationBar *aNavigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 44.0)];
aNavigationBar.barStyle = UIBarStyleBlackOpaque;
self.flipsideNavigationBar = aNavigationBar;
[aNavigationBar release];
UIBarButtonItem *buttonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(toggleView)];
UINavigationItem *navigationItem = [[UINavigationItem alloc] initWithTitle:@”materia04″];
navigationItem.rightBarButtonItem = buttonItem;
[flipsideNavigationBar pushNavigationItem:navigationItem animated:NO];
[navigationItem release];
[buttonItem release];
}
- (IBAction)toggleView {
if (flipsideViewController == nil) {
[self loadFlipsideViewController];
}
UIView *mainView = mainViewController.view;
UIView *flipsideView = flipsideViewController.view;
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
[UIView setAnimationTransition:([mainView superview] ? UIViewAnimationTransitionFlipFromRight : UIViewAnimationTransitionFlipFromLeft) forView:self.view cache:YES];
if ([mainView superview] != nil) {
[flipsideViewController viewWillAppear:YES];
[mainViewController viewWillDisappear:YES];
[mainView removeFromSuperview];
[infoButton removeFromSuperview];
[self.view addSubview:flipsideView];
[self.view insertSubview:flipsideNavigationBar aboveSubview:flipsideView];
[mainViewController viewDidDisappear:YES];
[flipsideViewController viewDidAppear:YES];
} else {
[mainViewController viewWillAppear:YES];
[flipsideViewController viewWillDisappear:YES];
[flipsideView removeFromSuperview];
[flipsideNavigationBar removeFromSuperview];
[self.view addSubview:mainView];
[self.view insertSubview:infoButton aboveSubview:mainViewController.view];
[flipsideViewController viewDidDisappear:YES];
[mainViewController viewDidAppear:YES];
}
[UIView commitAnimations];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
- (IBAction)showMessage:(id)sender {
labelSTR.text = textField.text;
}
- (void)dealloc {
[infoButton release];
[flipsideNavigationBar release];
[mainViewController release];
[flipsideViewController release];
[textField release];
[button release];
[labelSTR release];
[viewMain release];
[viewRoot release];
[super dealloc];
}
@end
Estamos quase terminando por hoje, mas vamos fazer uma última observação. Primeiro nós criamos o layout (ou design) da aplicação no IB, depois criamos estas variáveis no XCode, porém falta um último passo, que é o mais simples, mas fundamental para que possamos ver o resultado de tudo que fizemos até agora. Falta dizer quem é quem, ou seja, falta relacionar as declarações do XCode com os componentes criados no IB. Para fazer esta relação vamos voltar para o IB. Antes porém compile o projeto no XCode, só para garantir que não existe erros de digitação. Com o IB já aberto, de um click em RootViewController com o botão control pressionado. Você verá que todos as declarações que você criou no XCode vão aparecer para você. Para relacionar o botão, você vai clicar no circulo que está a direita da variável button e arrastar até o componente UIButton que você criou na janela RootViewController (se for necessário, abra esta janela antes). Faça isso para todas as variáveis criadas (UITextField e UILabel).
Agora só falta relacionar a ação do botão criado. De um click no componente UIButton da janela RootViewController pressionando o botão control, e você terá as opções de ações. Na opção Touch Down,tem um círculo do lado direito, click no círculo e arraste até o componente RootViewController da janela MainWindow.xib. Quando você soltar o click vai aparecer as opções que você pode relacionar com a ação, dentre elas deve estar a opção showMessage (aquela que criamos com IBAction, lembra?). Escolha esta ação dando um click.
Agora é só sair do IB, salvando as suas alterações e executar a aplicação. Se você ocultou a barra de status ela não deve aparecer, e vai aparecer um campo para você colocar um texto qualquer, um botão que quanto pressionado vai colocar o texto selecionado no label. É bem simples, e ainda possui uma série de melhorias para serem feitas. Você vai observar que quando retorna da tela do botão info, você vai perder os componentes que criamos, vai perceber também que o teclado não está fechando e nem está limpando o conteúdo após pressionar o botão de ação. Estas e outras melhorias (manipular as UIViews por exemplo) vamos estudar na próxima publicação.
(Matéria publicada na revista MAC+)
(by Ademar Varela)
