Agora de um click em cima do componente que está escrito Title (que na verdade é um Navigation Bar) e pressione Delete. Sim, isso mesmo, vamos apagar este componente, como eu disse anteriormente vamos modificar drásticamente esta tela. Na janela Library, selecione Data Views. Agora arraste o componente Image View para dentro da view, repare que quando estiver arrastando este componente para dentro da view, ele ficará do tamanho total da própria view. Depois de colocar este componente na view, vamos até o Inspector na opção Flipside View attributes, e selecionamos na opção image Créditos.jpg. Estamos quase terminando esta tela. Quando apagamos o componente Navigation Bar (o Title), apagamos também um botão que estava configurado como Done. Este botão fazia com que quando pressionado, retornaria para a tela principal. Como apagamos junto, vamos coloca-lo novamente. Ainda na janela Library, selecione Inputs & Values e arraste um botão para a view. Depois de arrasta-lo, volte no Inspector na opção Flipside View attributes e no item type, selecione Info Light. Ajuste novamente o botão da melhor maneira que achar conveniente.

Agora só falta colocar a ação correspondente neste botão. Com o botão Control pressionado de um click em cima do botão Info Light, irá aparecer uma janela pop-up. Pressionando a opção Touch Down, arraste até o ícone File’s Owner na janela FlipsideView.xib. Ao fazer isso irá aparecer todas as ações declaradas até este momento na aplicação, no caso, irá somente Done. Escolha este. Pronto a tela de flipview está pronta.

Se desejar, você pode retornar para o XCode e executar a aplicação. De um click no ícone Info que aparece e a tela de créditos deverá aparecer.

Agora vamos montar a tela principal. Retorne para o XCode e de um duplo click no arquivo MainView.xib.

Mais uma vez vamos retirar a barra de status. Como já explicamos isto anteriormente para a tela FlipView, vamos considerar que você já sabe fazer. Não se preocupe, o procedimento é o mesmo, e não se esqueça de acertar o tamanho da tela. Depois de tirar a barra de status e acertar o tamanho da tela, vamos colocar a imagem de fundo desta tela. Da mesma forma que na tela anterior, arraste o componente Image View até a tela. Repare que agora, o componente não tentará se ajustar. Não se preocupe. Isto ocorre por que já existe um botão na tela, que é o Info Light. Depois de colocar a imagem na tela, selecione no item image bg.jpg. Dimensione a imagem para que ela fique do tamanho da view. Agora, vale aqui uma dica importante. Quando colocamos este componente na view, ele ficou por cima do botão Info Light, ou seja, quando for executado, não será possível para o usuário clicar no botão. Para corrigir este comportamento, com a imagem selecionada vá até a opção Layout no menu do IB e selecione Send to Back. Isto fará com que a imagem fique abaixo do botão Info Light. Agora vamos colocar o Logotipo da aplicação, para isso, vamos utilizar novamente o componente Image View. Arraste este componente para a tela e no item Image deste componente coloque Logo.png.

Agora vamos colocar os botões que irão executar os sons. Vamos fazer o primeiro e deixaremos que vocês coloquem os demais. No Library, selecione Inputs & Values e arraste um botão para tela. No item type deste botão, selecione Custom e no item Image selecione but Intro.png. Posicione todos os botões conforme a figura abaixo.

Depois de colocar todas as imagens na aplicação compile e execute, e verifique se todas as imagens estão aparecendo e se os botões Info estão funcionando adequadamente. Na próxima edição iremos programar para que cada botão execute um som específico. Até lá.

O que vamos fazer hoje é colocar todos os resources no projeto e configurar todas as telas do projeto. Para isso abra a pasta resources (conforme exibido na figura 3), e vamos colocar as imagens que você fez download do repositório da MAC+. Para colocar as imagens e sons para dentro da pasta resource, simplesmente click e arraste para dentro da pasta resource.

Cada vez que você clicar e arrastar para dentro da pasta resource, o XCode irá abrir uma caixa de diálogo e você deverá selecionar a opção “Copy items into destination group’s folders (if needed)”.

Com todas as imagens e sons copiados para dentro da pasta resources, vamos agora colocar as imagens nos lugares adequados. Primeiro vamos colocar o icone na aplicação. De um click em cima do arquivo myShow-Info.plist.

Na opção Icon File, digite icon.jpg (que é o ícone desta aplicação que foi trazido do repositório). Agora vamos retirar a barra de status da nossa aplicação, pois não iremos fazer qualquer opração de chamada ou acesso à dados pela rede. Para isso, vamos abrir o mesmo arquivo myShow-Info.plist dando um click pressionando o botão Control, e escolher a opção Open As -> Source Code File. Fazendo isso nós teremos o código fonte deste arquivo que como já vimos nas edições anteriores é um arquivo no formato XML. Depois de aberto vamos inserir as seguintes linhas no final do arquivo:

<key>UIStatusBarHidden</key>

<true/>

Salve este arquivo pressionando Command + S. Com isto já preparamos o start da nossa aplicação, agora vamos acertar a nossa tela de créditos. Nesta aplicação os créditos serão apresentados no momento que o usuário escolher informações na tela principal (logo veremos isso) e ai vai ocorrer o efeito flipview e apresentar os créditos. Desta forma vamos associar a tela de créditos com o arquivo FlipsideView.xib. Dê um duplo click neste arquivo e com isso vamos para o Interface Builder (IB).

Dê um duplo click no arquivo Flipside View. Repare que já existe uma tela default. Particularmente, não gosto desta tela por isto vamos modificar drásticamente esta tela. Primeiro passo: Vamos retirar esta barra de status que está na view. Para isto, conforme já vimos anteriormente, vamos até a janela Inspector e selecionamos o primeiro botão (Flipside View attributes). Na opção Status Bar vamos selecionar none. Quando fazemos isto, o tamanho da nossa view precisa ser reconfigurado, por isto vamos dar um click no botão da régua (ícone amarelo - Flipside View Size). Na opção H iremos digitar 480 (sempre é bom lembrar que as dimensões de uma tela do iPhone é 320×480).

(Matéria publicada na revista MAC+)

(by Ademar Varela)

Na última edição terminamos os conceitos básicos para entender o funcionamento de uma aplicação para iPhone. Agora vamos começar explicar conceitos e projetos mais elaborados. Vamos explicar como montar uma aplicação que já está disponível na Apple Store, desenvolvida por nós para facilitar a compreensão desta matéria. Esta aplicação chama-se myShow (myShow). Todas as artes foram desenvolvidas pela Bubledot e os sons pelo Márcio Nigro. As imagens e os sons estarão disponíveis no site da revista MAC+

myShow, o que vamos montar?

Esta é uma aplicação que basicamente irá disponibilizar 6 sons que poderão ser executados simultâneamente, ou separadamente, de acordo com o desejo do usuário.

Vamos começar o nosso desenvolvimento. Não se esqueçam de que é necessário ter instalado o SDK 3.0 fornecido pela Apple. Tendo tudo instalado, vamos abrir o XCode e criar um novo projeto (File -> New Project).

Coloque como nome do projeto myShow.

(Matéria publicada na revista MAC+)

(by Ademar Varela)