este muito provavelmente será o template que você mais utilizará quando
criar seus próprios aplicativos.
25
3.2. Entenda melhor a interface do Xcode
Casa do Código
3.2
Entenda melhor a interface do Xcode
A figura 3.3 mostra a estrutura geral do Xcode, com os possíveis painéis de trabalho
abertos, sendo que cada um destes painéis é utilizado para diferentes propósitos
nessa figura, apresentamos apenas uma das combinações possíveis, que é a seguinte:
1) Navegador do projeto, ou apenas Navigator, o qual contém a relação de arquivos
do projeto ( Command + 1), erros de compilação, logs, busca e outras funcio-
nalidades. Tecla de atalho:
Command + 1 para abrir, e Command + 0 para
esconder (menu View -> Navigators para a relação completa)
2) Editor principal de código e criação de telas, chamado oficialmente de Stan-
dard Editor. Dependendo da configuração pode mostrar mais de um arquivo ao
mesmo tempo. Tecla de atalho: Command + ENTER. Para alternar para o modo
de trabalho em par, no qual a tela fica dividida entre dos arquivos
diretamente
relacionados, a tecla de atalho é Command + Option + ENTER.
3) Painel de debugging (depuração) e mensagens de log geradas pelo aplicativo.
Teclas de atalho: Command + SHIFT + Y e Command + SHIFT + C (menu
View -> Debug Area)
4) Painel Utilities, o qual contém utilidades gerais de acordo com o arquivo aberto
no Standard Editor, tais como documentação (quando editando código-fonte) ou
propriedades de algum componente visual (quando editando arquivos .xib)
5) Botões de acesso rápido para os editores e painéis já descritos.
26
Casa do Código
Capítulo 3. Mais Objective-C e Xcode
Figura 3.3: Os painéis do Xcode
Termos em inglês
Ao referenciar menus e opções do Xcode utilizaremos primeiro o
termo original em inglês e, quando pertinente, uma tradução literal em
português, pois desta forma será mais fácil para você procurar ajuda e
documentação na Internet, mesmo que não domine totalmente o inglês.
3.3
Criar a tela de inserção de empresa
O primeiro passo é montar a tela para que possamos posteriormente acessar os com-
ponentes gráficos no código-fonte. Selecione o arquivo Main.storyboard no Pro-
ject Navigator ( Command + 1) e você será apresentado com a tela que corresponde
àquela que será vista pelo usuário ao rodar o aplicativo. O objetivo aqui é construí-la
da mesma forma como foi apresentado na figura 3.1 no início do capítulo.
27
3.3. Criar a tela de inserção de empresa
Casa do Código
Passos detalhados
Ao escrever este livro nos preocupamos bastante para manter um bom
balanceamento entre mostrar passo a passo como realizar determinadas
coisas, versus apresentar uma instrução mais curta e direta. Nos capítulos
iniciais, e especialmente neste em que apresentamos em mais detalhes o
funcionamento do Xcode e Objective-C, é feito bastante uso de imagens
para guiar o leitor para determinados menus e botões (além de explicar
os atalhos de teclado), pois o Xcode utiliza os mesmos painéis para dife-
rentes tarefas, o que às vezes pode ficar bastante confuso.
Vamos modificar a cor de fundo da tela principal, colocando um tom de cinza
claro. Clique em qualquer parte da tela do aplicativo e abra o Attributes Inspector
(Inspetor de atributos) utilizando a tecla de atalho Option + Command + 4,
ou através do menu View -> Utilities -> Show Attributes Inspector. Veja a figura 3.4
para referência.
Figura 3.4: Abrir o Attributes Inspector
Para modificar a cor de fundo clique no item Background para abrir a janela
flutuante Colors, e selecione a opção Color Sliders na barra superior. Em seguida,
selecione RGB Sliders e insira o valor 250 para os três campos, conforme mostra
a figura 3.5. Feche a janela Colors.
28
Casa do Código
Capítulo 3. Mais Objective-C e Xcode
Figura 3.5: Modificando a cor de um componente - no caso, a cor de fundo da tela
3.4
Adicionar componentes visuais
Abra a Object Library na parte inferior do painel Utilities utilizando a tecla de ata-
lho CTRL + Option + Command + 3, ou através do menu View -> Utilities ->
Show Object library, e adicione os seguintes componentes, posicionando-os para que
fiquem como a figura 3.1, mostrada no início deste capítulo.
Label com o texto Nome da empresa (dê duplo clique no label, ou então
preencha a propriedade Text no Attributes Inspector).
Um componente Text Field para o usuário digitar o nome da empresa. No
Attributes Inspector localize a opção Placeholder e digite Informe o nome
da empresa - um placeholder é um valor padrão que o Text Field irá mostrar
enquanto o usuário não inserir algum texto.
Label com o texto Funcionários.
29
3.4. Adicionar componentes visuais
Casa do Código
Outro componente Text Field, para a quantidade de funcionários. No Attri-
butes Inspector localize a seção Control e desmarque o checkbox Enabled, pois
queremos que o usuário modifique o campo utilizando o componente Stepper
(veja abaixo). No campo Text insira o valor 0, que será a quantidade inicial