Howdy World (Hello World on steroids)/pt: what changed

Revision 1 to 2. Removed lines have a minus sign; added lines have a plus sign.

Old	New		Line
1	1		Este capítulo é um tutorial para Lazarus. Ele explica os primeiros passos para obter um software funcional e também algumas das melhores práticas. O resultado final (esperado) é duplo: o leitor entende os conceitos básicos para construir um software com Lazarus e obtém um verdadeiro programa funcional. Uma calculadora é algo razoavelmente fácil de implementar e todo mundo entende seus conceitos, sem necessidade de explicações de antemão. Esta calculadora é limitada a cálculos com números inteiros, mas pode facilmente ser estendida.
2	2
3	3		Este tutorial não descreve o processo de instalação do Lazarus. Ele assume que o Lazarus está instalado e pronto para uso (preferivelmente a última versão estável, que no momento é a 0.9.30 com FreePascal 2.4.2). Este tutorial é mais ou menos independente de plataforma. Todos os screenshots foram feitos em Windows XP, portanto com o esquema de cores azul/vermelho/cinza.
4	4
5	5		Leitura recomendada antes de começar: uma introdução abrangente da [Lazarus IDE](http://wiki.lazarus.freepascal.org/Lazarus_Tutorial).
6	6
7	7		## Vamos começar
8	8
9	9		É melhor criar um diretório separado para cada projeto. Portanto, vamos criar um diretório para salvar o projeto da nossa Calculadora. Este diretório será a raiz de todos os arquivos criados para o projeto.
10	10
11	11		- Criar um novo diretório para o projeto de demonstração (digamos, \$HOME/CalculatorDemo).
12	12
13	13		(Texto que descreve ações que precisam ser executadas é marcado, como a linha anterior)
14	14
15	15		Com isto resolvido, é hora de iniciar um novo projeto Lazarus.
16	16
17	17		- Inicie o Lazarus.
18	18		- Escolha Projeto/Novo Projeto… do menu.
19	19		- Na caixa de diálogo que é apresentada selecione Aplicação e pressione OK (if the IDE reclama sobre modificações não salvas, pressione Não).
20	20
21	21		Para ter certeza de que todos os arquivos do nosso novo projeto estarão no diretório certo, o projeto precisa ser salvo primeiro.
22	22
23	23		- Do menu, escolha Arquivo/Salvar Tudo.
24	24		- Selecione o diretório que foi criado previamente (\$HOME/CalculatorDemo).
25	25		- Insira um novo nome de projeto: CalculatorDemo.
26	26		- Pressione Salvar (ou o que corresponder a isto em seu idioma).
27	27		- A IDE quer salvar o formulário principal também: insira ’’ufrmMain’’ como o nome da unidade do formulário.
28	28		- A IDE pergunta se o nome do arquivo deve ser modificado para minúsculas. Confirme isto pressionando o botão 'Renomear para minúsculas'.
29	29
30	30		Em teoria, o programa que é assim criado é um software válido que pode ser executado. Antes de compilá-lo pela primeira vez, duas modificações são recomendadas: atribuição de novos locais (diretórios) para as unidades de destino e nome do arquivo compilado.
31	31
32	32		- Do menu, escolha Projeto/Opções de Projeto.
33	33		- Selecione Opções do Compilador/Caminhos (clique no nó da TreeView).
34	34		- Insira o texto ‘‘bin\\’‘ antes do nome de arquivo alvo (ou ‘‘bin/’‘ ´para ambientes *nix).
35	35		- Note também o prefixo ‘‘lib’‘ para ‘diretório de saída das unidades’ (não o modifique).
36	36		- Pressione OK.
37	37
38	38		A imagem abaixo mostra como isto ficaria em uma máquina Windows. ![](/wiki-images/e/eb/Tutcal_project_options.png)
39	39
40	40		Fazendo isto, a pasta do projeto não será desordenada com a saída gerada pelo compilador. Os arquivos da pasta do projeto são necessárias para construir o programa. Tudo nos diretórios ’’lib’’ e ’’bin’’ podem ser eliminados quando do arquivamento do projeto.
41	41
42	42		Agora, como um primeiro teste, o projeto pode ser compilado e executado.
43	43
44	44		- Pressione F9 (o atalho para compilar, construir e executar o programa). Se tudo sair bem, uma tela em branco será mostrada. Agora sabemos que foi criada uma base sólida sobre a qual podemos começar a construir o programa.
45	45		- Finalize a execução clicando no ícone Fechar (isto depende do OS).
46	46
47	47		## O primeiro componente
48	48
49	49		O Lazarus tem uma assim chamada 'paleta de componentes':
50	50
51		-	~~<figure>~~
52		-	~~<img src="tutcal_component_palette.png" title="tutcal_component_palette.png" />~~
53		-	~~<figcaption>tutcal_component_palette.png</figcaption>~~
54		-	~~</figure>~~
	51	+	![](/wiki-images/d/d4/Tutcal_component_palette.png)
55	52
56	53		Todos os componentes que estão disponíveis para construir uma interface do usuário estão logicamente agrupados nas abas de componentes. O número real de abas depende dos pacotes instalados, mas a paleta básica se parece com a imagem acima. A primeira aba é a Standard, seguida pela Aditional, Common controls, etc.
57	54
58	55		Para retornar o nome do tipo de um componente, passe o mouse sobre o ícone do componente e um aviso será mostrado (mais precisamente, o nome de classe do componente). Para uma explanação sobre todos os controles, veja esta [Lazarus introduction](http://wiki.lazarus.freepascal.org/Lazarus_Tutorial)
59	56
60	57		A primeira coisa que é preciso ser feita para o programa de Calculadora é criar uma área de display, onde estão os números. Para isto, um controle TEdit é usado.
61	58
62	59		`# Nota: os componentes visuais são referidos como Controles. `\
63	60		` Para o nosso propósito, a diferença entre um "componente" e um "controle" não é relevante.`
64	61
65	62		Para colocar um controle no formulário, este precisa ter o foco. Pressionar F12 no teclado muda o foco do editor de formulários para o editor de código e vice-versa.
66	63
67	64		- Pressione F12 uma vez ou duas para posicionar a janela do formulário no topo (veja imagem abaixo).
68	65
69		-	~~<figure>~~
70		-	~~<img src="tutcal_form_on_top.png" title="tutcal_form_on_top.png" />~~
71		-	~~<figcaption>tutcal_form_on_top.png</figcaption>~~
72		-	~~</figure>~~
	66	+	![](/wiki-images/e/ed/Tutcal_form_on_top.png)
73	67
74	68		- Selecione a aba Standard na palete de componentes. Esta é a aba que é selecionada por padrão.
75	69		- Clique sobre o componente TEdit (passe o mouse sobre os ícones de componentes para obter os nomes de classe).
76	70		- Clique em algum lugar no formulário. Isto colocará um controle TEdit no formulário com um nome que é o mesmo nome da classe do componente sem a letra "T" e com um número no final (por exemplo, Edit1). Quando um segunto TEdit for colocado no formulário, será nomeado como Edit2, e assim por diante. Isto se aplica a todos os componentes.
77	71
78	72		Agora que o controle está colocado no formulário, ele pode ser personalizado como você precisar. Esta personalização tem lugar no Inspetor de Objetos. Esta é a janela à esquerda da tela, com a lista de propriedades para o controle TEdit que são personalizáveis. ![](/wiki-images/5/59/Tutcal_object_inspector.png)
79	73
80	74		As propriedades determinam a aparência e o comportamento do controle. É fácil modificá-las: apenas clique em uma delas, insira um novo valor e pressione Enter. O efeito no controle é imediatamente visível. As propriedades no Inspetor de Objetos são todas propriedades para um único controle, particularmente o controle que tem o foco ou está selecionado. Portanto, a maneira de modificar propriedades de um controle é primeiramente selecioná-lo e então fazer as modificações no Inspetor de Objetos. Se nenhum controle for selecionado, as propriedades do formulário serão mostradas.
81	75
82	76		Faça as seguintes modificações nas propriedades de Edit1:
83	77
84	78		- Mude o nome para edDisplay.
85	79		- Mude Align para alTop (não confundir com Alignment).
86	80		- Mude Alignment para alRightJustify (não confundir com Align).
87	81		- Mude BorderSpacing.Around para 6.
88	82		- Mude Text para 0 (o número zero, não a letra "O").
89	83
90	84		Estas propriedades são bastante autoexplicativas, especialmente quando as modificações acima são feitas e o efeito é monitorado no formulário.
91	85
92	86		Como um toque final, a fonte que é usada para mostrar textos em todos os controles será mudada. A fonte pode ser mudada de duas maneiras: na propriedade Font de edDisplay ou na mesma propriedade do formulário. Mudando a fonte do formulário tem o benefício de que todos os componentes anteriormente criados 'herdarão' a nova fonte, e é aí que nós faremos a nossa modificação.
93	87
94	88		- Clique em algum lugar do formulário. Isto desselecionará o controle edDisplay e selecionará o próprio formulário. As propriedades do formulário são agora mostradas no Inspetor de Objetos.
95	89		- No Inspetor de Objetos, clique na propriedade Font. A linha da propriedade Font será realçada e um botão com três pontos será mostrado.
96	90		- Clique no botão com três pontos. Isto abre a caixa de diálogo Fonts.
97	91		- Selecione Verdana, Bold, Tamanho 10.
98	92		- Pressione OK.
99	93
100	94		O título do formulário não é muito significativo. O padrão é 'Form1'.
101	95
102	96		- No Inspetor de Objetos, clique na propriedade Caption.
103	97		- Mude o texto para Calculator Demo.
104	98
105	99		O resultado de todas estas ações será um formulário que se parece com este: ![](/wiki-images/e/e0/Tutcal_form_with_tedit.png)
106	100
107	101		Agora é uma boa hora para salvar o formulário.
108	102
109	103		- Selecione do menu Arquivo/Salvar ou pressione a combinação de teclas Ctrl+S.
110	104
111	105		Lembre-se de salvá-lo e o salve com frequência!
112	106
113	107		## Botões
114	108
115	109		Para que serve uma calculadora se não puderem ser inseridos números? Portanto o próximo passo será adicionar botões para os dígitos 0..9. Antes de posicionar os botões para os dígitos, um assim chamado "contêiner" é colocado no formulário. Um TPanel é outro contêiner que podem ser colocados no formulário. Contêineres podem ser colocados dentro de outros, mas isto é para outro tutorial.
116	110
117	111		- Na paleta de componentes, selecione um controle TPanel.
118	112		- Clique no formulário para criar o painel. Um novo painel está agora visível no formulário com largura, altura e rótulo padronizados. Note que a fonte do painel é herdade do formulário. Este painel será usado para agrupar todos os botões, então algumas propriedades devem ser modificadas.
119	113		- Remova o texto Panel1 da propriedade Caption.
120	114		- Modifique Align par a alClient.
121	115		- Modifique Borderspacing.Around para 6.
122	116		- Aumente a largura (width) do formulário para 300 (primeiro clique no formulário na TreeView do Inspetor de Objetos).
123	117		- Aumente a altura (height) do formulário para 350.
124	118
125	119		(Aumentando o tamanho do formulário nos dará algum espaço para mover os controles.)
126	120
127	121		Agora os botões dos dígitos serão adicionados.
128	122
129	123		- Na paleta de componentes, selecione um controle TButton.
130	124		- Clique no formulário para posicioná-lo. O botão é colocado no painel. Isto é visível no Inspetor de Objetos: Button1 é chamado filho (child) de Panel1. Isto efetivamente significa que, se o painel for movido, todos os controles filhos serão movidos, e quando Panel1 for eliminado, todos os controles-filhos o serão também.
131	125		- No Inspetor de Objetos, modifique o valor de Caption para 0 (o número zero).
132	126		- Modifique a largura (width) para 32.
133	127		- Modifique a altura (height) para 30.
134	128		- Modifique o nome (name) para btnDigit0.
135	129
136	130		Isto precisa ser repetido para os dígitos 1..9. A forma mais rápida de fazê-lo é copiando e colando o botão já criado.
137	131
138	132		- Clique com o botão direito do mouse no botão do dígito 0 e selecione Copiar do menu popup.
139	133		- Clique com o botão direito do mouse em algum lugar de Panel1 e selelcione Colar. Um segundo botão é adicionado ao painel. A única diferença do primeiro botão é o nome btnDigit1.
140	134		- Modifique a propriedade Caption (rótulo) no Inspetor de Objetos para 1.
141	135		- Repita a ação de Colar mais oito vezes para os botões seguintes.
142	136		- Mova os botões no formulário para obter um layout que se pareça com uma calculadora:
143	137
144		-	~~<figure>~~
145		-	~~<img src="tutcal_calculator_digits.png" title="tutcal_calculator_digits.png" />~~
146		-	~~<figcaption>tutcal_calculator_digits.png</figcaption>~~
147		-	~~</figure>~~
	138	+	![](/wiki-images/c/cd/Tutcal_calculator_digits.png)
148	139
149	140		Os próximos são os quatro botões para operações matemáticas (soma, subtração, etc).
150	141
151	142		- Coloque um novo TButton no formulário.
152	143		- Modifique a largura para 32.
153	144		- Modifique a altura para 30.
154	145		- Modifique a propriedade Caption para +.
155	146		- Modifique o nome para btnFunction.
156	147		- Copie e Cole este botão mais três vezes, modificando o rótulo (caption) para -, *** e /.
157	148		- Alinhe os botões verticalmente, ao lado dos botões dos dígitos.
158	149
159	150		E os botões especiais:
160	151
161	152		- Copie e Cole o botão +.
162	153		- Modifique o rótulo para +/-
163	154		- Modifique o nome para btnPlusMinus.
164	155		- Posicione o botão bem embaixo do botão 3.
165	156		- Copie e Cole o botão +.
166	157		- Modifique o rótulo para C.
167	158		- Modifique o nome para btnClear.
168	159		- Posicione o botão à direita do botão +.
169	160		- Copie e Cole o botão +.
170	161		- Modifique o rótulo para =.
171	162		- Modifique o nome para btnCalculate.
172	163		- Posicione o botão à direita do botão /.
173	164
174	165		Redimensione o formulário para que se ajuste aos botões.
175	166
176	167		Isto deve resultar em algo assim:
177	168
178		-	~~<figure>~~
179		-	~~<img src="tutcal_calculator_gui_ready.png" title="tutcal_calculator_gui_ready.png" />~~
180		-	~~<figcaption>tutcal_calculator_gui_ready.png</figcaption>~~
181		-	~~</figure>~~
	169	+	![](/wiki-images/c/c2/Tutcal_calculator_gui_ready.png)
182	170
183	171		Lembre-se de salvar e salve com frequência!
184	172
185	173		## Respondendo a eventos
186	174
187	175		Uma aplicação GUI muitas vezes é uma aplicação baseada em eventos. Isto significa que a aplicação não faz nada até que digamos a ela o que fazer. Por exemplo, inserindo dados através do teclado, pressionando botões, etc. Uma das coisas que a calculadora precisa fazer é responder a cliques do mouse nos botões 0..9. É nisto que a IDE nos ajuda. Acrescentar um manipulador de eventos para um botão é fácil.
188	176
189	177		- Certifique-se de que o formulário com todos os botões está visível (se necessário, pressione F12 uma ou duas vezes).
190	178		- Dê um duplo-clique no botão com o rótulo 0: a IDE automaticamente cria um procedimento que manipulará eventos de cliques do mouse: procedure TForm1.btnDigit0Click(Sender :TObject);
191	179		- Digite o seguinte código entre as palavras-chave begin e end:
192	180
193	181		``` pascal
194	182		edDisplay.Text := edDisplay.Text + '0'
195	183		```
196	184
197	185		edtDisplay é uma caixa de edição. A forma de modificar o conteúdo de uma caixa de edição é modificando a propriedade Text. A declaração acima acrescenta o número '0' ao texto e isto é visível na tela imediatamente.
198	186
199	187		- Dê um duplo-clique no botão com o rótulo 1.
200	188		- Digite o seguinte código entre as palavras-chave begin e end:
201	189
202	190		``` pascal
203	191		edDisplay.Text := edDisplay.Text + '1'
204	192		```
205	193
206	194		É uma boa ideia compilar o código a intervalos para verificar erros de sintaxe.
207	195
208	196		- Selecione do menu: Executar/Executar (ou pressione F9). O projeto é compilado e a aplicação se inicia.
209	197		- Clique nos dígitos 0 e 1 algumas vezes e veja o que acontece na tela. Os outros botões ainda não fazem nada obviamente porque os manipuladores de eventos ainda não foram acrescentados.
210	198		- Pare o programa de Calculadora.
211	199
212	200		É claro que agora é fácil acrescentar manipuladores de eventos para os dígitos 2..9, mas isto vai resultar em muito código redundante. Cada manipulador de eventos faz exatamente a mesma coisa, apenas os dígitos são diferentes. A forma de eliminar esta redundãncia é criar um procedimento que faça o processamento e acrescentar uma variável (os dígitos 0..9) como parâmetro.
213	201
214	202		- No editor, localize as linhas em que a classe TForm1 é declarada. Ele vai se parecer com isto:
215	203
216	204		``` pascal
217	205		{ TForm1 }
218	206
219	207		TForm1 = class(TForm)
220	208		btnDigit0: TButton;
221	209		btnDigit1: TButton;
222	210		btnDigit2: TButton;
223	211		btnDigit3: TButton;
224	212		btnDigit4: TButton;
225	213		btnDigit5: TButton;
226	214		btnDigit6: TButton;
227	215		btnDigit7: TButton;
228	216		btnDigit8: TButton;
229	217		btnDigit9: TButton;
230	218		btnFunction: TButton;
231	219		btnFunction1: TButton;
232	220		btnFunction2: TButton;
233	221		btnFunction3: TButton;
234	222		btnCalculate: TButton;
235	223		btnPlusMinus: TButton;
236	224		btnClear: TButton;
237	225		edDisplay: TEdit;
238	226		Panel1: TPanel;
239	227		procedure btnDigit0Click(Sender: TObject);
240	228		procedure btnDigit1Click(Sender: TObject);
241	229		private
242	230		{ private declarations }
243	231		public
244	232		{ public declarations }
245	233		end;
246	234		```
247	235
248	236		Note que, na definição de classe acima, todos os controles e procedimentos declarados foram adicionados ao formulário automaticamente. *Não faça qualquer modificação manual aí!!* A IDE vai ficar nervosa que você o fizer. O lugar para acrescentar variáveis, procedientos e funções personalizadas são as seções private e public. Como regra geral, variáveis personalizadas são adicionadas à seção private. Procedimentos e funções são acrescentadas à seção private também, exceto quando outros formulários precisam chamar estes procedimentos ou funções (o que deve acontecer com frequência).
249	237
250	238		De volta para o nosso problema de dígitos: precisamos de um procedimento que acrescente dígitos ao display em que os dígitos possam variar.
251	239
252	240		- Acrescente o procedimento AddDigit à seção private do formulário.
253	241
254	242		``` pascal
255	243		private
256	244		{ private declarations }
257	245		procedure AddDigit(const pDigit: byte);
258	246		public
259	247		{ public declarations }
260	248		end;
261	249		```
262	250
263	251		Em seguida, o código efetivo para o procedimento AddDigit precisa ser inserido. Novamente a IDE vem em nosso auxílio:
264	252
265	253		- Posicione o caret na linha AddDigit.
266	254		- Pressione a combinação de teclas Ctrl+Shift+C.
267	255
268	256		A IDE gerará a definição deste novo método e posicionará o cursor de texto dentro do procedimento vazio. Podemos imediatamente começar a digitar.
269	257
270	258		- Acrescente o seguinte código ao procedimento AddDigit:
271	259
272	260		``` pascal
273	261		edDisplay.Text := edDisplay.Text + IntToStr(pDigit)
274	262		```
275	263
276	264		Note que a função IntToStr() traduz o valor numérico, o digito, para um valor de sequência de caracteres de modo que possa ser mostrado no display.
277	265
278	266		E para usar este procedimento para todos os dígitos:
279	267
280	268		- Abra o formulário (se necessário, pressione F12 uma ou duas vezes).
281	269		- Dê um duplo-clique no botão do dígito '0': isto abrirá o editor no manipulador de eventos para o botão 0.
282	270		- Substituia o código no manipulador de eventos por: AddDigit(0). O procedimento se parecerá com isto:
283	271
284	272		``` pascal
285	273		procedure TForm1.btnDigit0Click(Sender: TObject);
286	274		begin
287	275		AddDigit(0)
288	276		end;
289	277		```
290	278
291	279		- Faça o mesmo para o botão do dígito 1:
292	280
293	281		``` pascal
294	282		procedure TForm1.btnDigit1Click(Sender: TObject);
295	283		begin
296	284		AddDigit(1)
297	285		end;
298	286		```
299	287
300	288		Antes de completar esta sequência para todos os outros botões de dígitos, certifique-se de que ele realmente faz o que queremos.
301	289
302	290		- Execute o programa (pressione F9).
303	291		- Clique nos botões 0 e 1 algumas vezes e veja se ele realmente funciona.
304	292		- Finalize o programa.
305	293
306	294		Um bom programador é um programador preguiçoso
307	295
308	296		Agora podemos acrescentar manipuladores de eventos para os botões 2..9. Mas agora novamente temos o mesmo problema de criar código redundante: AddDigit(2), AddDigit(3), etc. E se houvesse uma maneira de contar os botões separadamente? Felizmente existe.
309	297
310	298		Todos os componentes têm uma propriedade de valor inteiro chamada Tag (lembre-se: um controle é apenas um tipo especial de componente que herda esta propriedade Tag. É uma propriedade que não tem uma função verdadeira. Está lá para usarmos como acharmos melhor. E se cada botão pudesse ter seu valor de dígito armazenado na propriedade Tag...
311	299
312	300		- Abra o formulário (se necessário, pressione F12 uma ou duas vezes).
313	301		- Selecione o botão do dígito 1 (clique nele uma vez).
314	302		- No Inspetor de Objetos, localize a propriedade Tag e modifique seu valor par 1.
315	303		- Selecione o botão do dígito 2 (clique nele uma vez).
316	304		- No Inspetor de Objetos, localize a propriedade Tag e modifique seu valor para 2.
317	305		- Repita isto para os botões dos dígitos 3..9.
318	306
319	307		Agora todos os botões de dígitos têm um valor de Tag único. Não modificamos o botão do dígito 0 porque o valor padrão de Tag já é 0. Agora, para fazer uso deste valor de Tag:
320	308
321	309		- Abra o formulário.
322	310		- Dê um duplo-clique no botão do dígito 0 (isto abrirá o editor no manipulador de eventos para o botão do dígito 0).
323	311		- Note que o procedimento btnDigit0Click tem um parâmetro Sender de tipo TObject.
324	312
325	313		``` pascal
326	314		procedure TForm1.btnDigit0Click(Sender: TObject);
327	315		```
328	316
329	317		O parâmetro Sender é na verdade uma referência ao botão que foi pressionado. Através de conversão de tipo, podemos usar o parâmetro como se fosse um TButton.
330	318
331	319		- Modifique o código assim:
332	320
333	321		``` pascal
334	322		procedure TForm1.btnDigit0Click(Sender: TObject);
335	323		begin
336	324		AddDigit(TButton(Sender).Tag)
337	325		end;
338	326		```
339	327
340	328		Não parece que tenhamos feito muito, substituindo uma linha de código por outra. No entanto, Se tivéssemos de adicionar código para os outros dígitos (1..9), ele ficaria exatamente igual. Assim, todos os outros dígitos podem reusar este método!
341	329
342	330		Vamos olhar melhor para o Inspetor de Objetos.
343	331
344	332		- Abra o formulário.
345	333		- Selecione o botão do dígito 0 (btnDigit0).
346	334		- No Inspetor de Objetos, selecione a aba Events (veja abaixo).
347	335
348		-	~~<figure>~~
349		-	~~<img src="tutcal_oi_events.png" title="tutcal_oi_events.png" />~~
350		-	~~<figcaption>tutcal_oi_events.png</figcaption>~~
351		-	~~</figure>~~
	336	+	![](/wiki-images/1/12/Tutcal_oi_events.png)
352	337
353	338		No Inspetor de Objetos, podemos não somente mudar as propriedades do controle, mas também os manipuladores de eventos. No Inspetor de Objetos podemos ver que, tão logo o botão do dígito 0 for clicado, o método btnDigit0Click seá chamado (este é o manipulador de eventos OnClick).
354	339
355	340		- No formulário: selecione o botão do dígito 2. No Inspetor de Objetos podemos agora ver que não há qualquer manipulador de eventos OnClick para o botão 2.
356	341		- Abra a lista dropdown para o evento OnClick e selecione btnDigit0Click.
357	342		- Faça o mesmo para todos os outros botões de dígitos 3..9.
358	343
359	344		Now all buttons share one common procedure that does exactly what we want except for digit button 1. Remember that for digit button 1 we created an event handler btnDigit1Click that we don't really need anymore.
360	345
361	346		- On the form: select digit button 1. In the Object Inspector we can now see that the event handler indeed is btnDigit1Click.
362	347		- Open the drop down list for the OnClick event and select btnDigit0Click.
363	348
364	349		Now all buttons share the same event handler to add digits to the display box.
365	350
366	351		- Run the program (press F9).
367	352		- Click all buttons 0..9 a couple of times and see that it actually works.
368	353		- End the program.
369	354
370	355		For the digit buttons one final thing needs to be done: event handler btnDigit1Click still exists but is not used anymore and should be deleted. The safest way to do this (for now) is to let the IDE handle it. For this to work the option Auto remove empty methods must be enabled.
371	356
372	357		- In the menu select Environment/Options.
373	358		- Click on Editor/Completion and Hints.
374	359		- Enable the option 'Auto remove empty methods' (see image below).
375	360		- Press OK.
376	361
377		-	~~<figure>~~
378		-	~~<img src="tutcal_auto_remove.png" title="tutcal_auto_remove.png" />~~
379		-	~~<figcaption>tutcal_auto_remove.png</figcaption>~~
380		-	~~</figure>~~
	362	+	![](/wiki-images/4/4c/Tutcal_auto_remove.png)
381	363
382	364		From now on all empty methods are automatically deleted as soon as the source file is saved.
383	365
384	366		- Locate method procedure TForm1.btnDigit1Click(Sender: TObject)
385	367		- Delete the line 'AddDigit(1)'
386	368		- Save the file (press Ctrl-S or select from the menu File/Save). The now empty procedure is automatically deleted.
387	369
388	370		## Tuning
389	371
390	372		So far so good: the calculator program compiles, runs and responds to clicks on digit buttons 0..9. But it doesn't behave exactly as we want: there's always this annoying zero at the beginning of the number and the number of allowed digits is too large.
391	373
392	374		### Removing leading zeroes
393	375
394	376		Normally an integer number that's bigger (or smaller) than zero does not start with a leading zero. So our calculator should compensate for this. Luckily this is easy to implement. Remember that we have one and only one method that handles the addition of digits: AddDigit. This is the place to add logic to suppress the leading zero.
395	377
396	378		- Locate method procedure TForm1.AddDigit(const pDigit: byte)
397	379		- Change the code to:
398	380
399	381		``` pascal
400	382		procedure TForm1.AddDigit(const pDigit: byte);
401	383		begin
402	384		// Suppress leading zeroes when adding digits
403	385		if edDisplay.Text = '0' then
404	386		edDisplay.Text := IntToStr(pDigit)
405	387		else
406	388		edDisplay.Text := edDisplay.Text + IntToStr(pDigit)
407	389		end;
408	390		```
409	391
410	392		### Limit the number of digits
411	393
412	394		This demo calculator cannot handle numbers that are too large. So we need to limit the number of digits that can be entered. Again the logical place to do this is the AddDigit method:
413	395
414	396		- Locate method procedure TForm1.AddDigit(const pDigit: byte)
415	397		- Change the code to:
416	398
417	399		``` pascal
418	400		procedure TForm1.AddDigit(const pDigit: byte);
419	401		begin
420	402		// Limit the number of digits
421	403		if length(edDisplay.Text) < 8 then
422	404		begin
423	405		// Suppress leading zeroes when adding digits
424	406		if edDisplay.Text = '0' then
425	407		edDisplay.Text := IntToStr(pDigit)
426	408		else
427	409		edDisplay.Text := edDisplay.Text + IntToStr(pDigit)
428	410		end;
429	411		end;
430	412		```
431	413
432	414		## Operations
433	415
434	416		Now it's time to look at the actual operations we want to implement: adding, subtracting, multiplying and dividing. The way the user is going to use the calculator goes something like this:
435	417
436	418		1. The user enters a number
437	419		2. The user presses a function button (e.g. '+')
438	420		3. The user enters a second number
439	421		4. The user presses '='
440	422		5. The program responds with the addition of the first and second number
441	423
442	424		As soon as the user presses the '=' button the program has to know three things:
443	425
444	426		1. What was the operation?
445	427		2. What was the first number?
446	428		3. What was the second number?
447	429
448	430		### What was the operation?
449	431
450	432		Somehow we need to register that a certain operation type was selected. And for that we need to know what operation types are available. One way to implement this is to create an enumeration type (or user defined scalar type) that contains all valid operations.
451	433
452	434		- In the Source Editor, find the location where the form is declared.
453	435		- Just above the form add the type declaration TOperationType for all supported operations:
454	436
455	437		``` pascal
456	438		type
457	439
458	440		{ All supported operations for our calculator }
459	441		TOperationType = (otNone, otPlus, otMinus, otMultiply, otDivide);
460	442
461	443		{ TForm1 }
462	444
463	445		TForm1 = class(TForm)
464	446		```
465	447
466	448		- To temporarily store the operation, a variable is added to the private section of the form's class declaration.
467	449
468	450		``` pascal
469	451		private
470	452		{ private declarations }
471	453		SelectedOperation: TOperationType;
472	454		procedure AddDigit(const pDigit: byte);
473	455		```
474	456
475	457		### What was the first number?
476	458
477	459		To temporarily store the first number that was entered we need a variable.
478	460
479	461		- Add a variable to the form's private section.
480	462
481	463		``` pascal
482	464		private
483	465		{ private declarations }
484	466		SelectedOperation: TOperationType;
485	467		FirstNumber: longint;
486	468		procedure AddDigit(const pDigit: byte);
487	469		```
488	470
489	471		### What was the second number?
490	472
491	473		- Add variable SecondNumber to the form's private section (the same as FirstNumber) and make it a longint as well.
492	474
493	475		## What's on your mind
494	476
495	477		Now it's time to implement the actions for the function buttons: add, subtract, multiply and divide. Let's start with the '+' button. As mentioned in one of the previous sections: when the '+' button is pressed, we need to store the first number and the operation type. So that's what we are going to do.
496	478
497	479		- Open the form.
498	480		- Double click on button '+'. The IDE creates an event handler and the text cursor is placed inside the empty begin/end block.
499	481
500	482		Hold on! Before adding all the code here and doing the same for the three other operation buttons, remember what was said when the digit buttons 0..9 were added: do not add redundant code! It's reasonable to assume that the code for the other three operation buttons will be the same as for the '+' button, except for the operation itself. So let's save ourselves some work.
501	483
502	484		- Locate the form's private section and add a new procedure: StoreOperation.
503	485
504	486		``` pascal
505	487		private
506	488		{ private declarations }
507	489		SelectedOperation: TOperationType;
508	490		FirstNumber: longint;
509	491		SecondNumber: longint;
510	492		procedure AddDigit(const pDigit: byte);
511	493		procedure StoreOperation(const pOperation: TOperationType);
512	494		```
513	495
514	496		- Place the blinking text cursor on the newly inserted line.
515	497		- Press Ctrl-Shift-C (you know the drill by now…).
516	498
517	499		The StoreOperation procedure must do two things: store the operation and store the number that was entered in the display, so it can be used afterwards.
518	500
519	501		- Add the following code to the newly created procedure:
520	502
521	503		``` pascal
522	504		procedure TForm1.StoreOperation(const pOperation: TOperationType);
523	505		begin
524	506		// Store the operation so it can be used later
525	507		SelectedOperation := pOperation;
526	508
527	509		// Store the number that was entered by the user
528	510		FirstNumber := StrToInt(edDisplay.Text);
529	511		end;
530	512		```
531	513
532	514		Ok, now back to the '+' button:
533	515
534	516		- Open the form.
535	517		- Double click on button '+'.
536	518		- Add the following code: StoreOperation(otPlus);
537	519		- Open the form.
538	520		- Double click on button '-'.
539	521		- Add the following code: StoreOperation(otMinus);
540	522		- Open the form.
541	523		- Double click on button '*'.
542	524		- Add the following code: StoreOperation(otMultiply);
543	525		- Open the form.
544	526		- Double click on button '/'.
545	527		- Add the following code: StoreOperation(otDivide);
546	528
547	529		Now test the program and see what happens:
548	530
549	531		- Run the program (press F9)
550	532		- Enter a number (e.g. 21267)
551	533		- Press the '+' button
552	534		- Enter the second number (e.g. 31170)
553	535
554	536		What happens is that after pressing the '+' button, or any other operation button for that matter, the display is not cleared. We must find a way to make sure that the display is cleared, as soon as an operation button is pressed. Because we have used procedures to group similar actions, this again is an easy change.
555	537
556	538		- Locate the form's private section and add a new variable: doClearDisplay. This variable will be the trigger for erasing the display.
557	539
558	540		``` pascal
559	541		private
560	542		{ private declarations }
561	543		SelectedOperation: TOperationType;
562	544		FirstNumber: longint;
563	545		SecondNumber: longint;
564	546		doClearDisplay: boolean;
565	547		procedure AddDigit(const pDigit: byte);
566	548		procedure StoreOperation(const pOperation: TOperationType);
567	549		```
568	550
569	551		- Position the blinking text cursor on the line StoreOperation.
570	552		- Press Ctrl-Shift-CursorDown: this moves the cursor to the body of the StoreOperation procedure.
571	553		- In the StoreOperation procedure we must update the doClearDisplay variable, so we know that the display must be cleared as soon as a new number is entered. Change the code to this:
572	554
573	555		``` pascal
574	556		procedure TForm1.StoreOperation(const pOperation: TOperationType);
575	557		begin
576	558		// Store the operation so it can be used later
577	559		SelectedOperation := pOperation;
578	560
579	561		// Store the number that was entered by the user
580	562		FirstNumber := StrToInt(edDisplay.Text);
581	563
582	564		// The display must start with a new number
583	565		doClearDisplay := true;
584	566		end;
585	567		```
586	568
587	569		- And where better to clear the display than in the AddDigit procedure? Change the code to:
588	570
589	571		``` pascal
590	572		procedure TForm1.AddDigit(const pDigit: byte);
591	573		begin
592	574		// Must the display be cleared first?
593	575		if doClearDisplay then
594	576		begin
595	577		edDisplay.Text := '0'; // Reset the display to zero
596	578		doClearDisplay := false; // Once is enough...
597	579		end;
598	580
599	581		// Limit the number of digits
600	582		if length(edDisplay.Text) < 8 then
601	583		begin
602	584		// Suppress leading zeroes when adding digits
603	585		if edDisplay.Text = '0' then
604	586		edDisplay.Text := IntToStr(pDigit)
605	587		else
606	588		edDisplay.Text := edDisplay.Text + IntToStr(pDigit)
607	589		end;
608	590		end;
609	591		```
610	592
611	593		Now let's see what happens:
612	594
613	595		- Run the program (press F9).
614	596		- Enter a number.
615	597		- Press an operation button.
616	598		- Enter another number.
617	599		- End the program.
618	600
619	601		We're almost there: we can enter numbers and select an operation. Now it's time to do the actual calculations.
620	602
621	603		## Doing the math
622	604
623	605		Now that we have stored a number and an operation, it's time to do the actual calculations. Let's start easy with additions.
624	606
625	607		- Open the form.
626	608		- Double click on button '=' (the event handler is created).
627	609		- Change the procedure:
628	610
629	611		``` pascal
630	612		procedure TForm1.btnCalculateClick(Sender: TObject);
631	613		var result: longint;
632	614		begin
633	615		case SelectedOperation of
634	616		otPlus: begin
635	617		// Retrieve the second number
636	618		SecondNumber := StrToInt(edDisplay.Text);
637	619		// Do the math
638	620		result := FirstNumber + SecondNumber;
639	621		// Display the resulting value
640	622		edDisplay.Text := IntToStr(result);
641	623		end;
642	624		end;
643	625		end;
644	626		```
645	627
646	628		The above code is pretty straightforward: if the user presses the '+' button, the first and second number are added up and the result is stored in the edit control on screen.
647	629
648	630		We now have a working calculator (that can only add two numbers):
649	631
650	632		- Run the program (press F9).
651	633		- Enter a number.
652	634		- Press '+'
653	635		- Enter another number.
654	636		- Press '=' : the sum of the two numbers is displayed.
655	637		- End the program.
656	638
657	639		We now could add the 3 missing operations ('-', '*' and '/'). But hold on, there is room for improvement. Let's have a look at the following statement:
658	640
659	641		``` pascal
660	642		SecondNumber := StrToInt(edDisplay.Text);
661	643		```
662	644
663	645		We have seen such a statement before: the StoreOperation procedure contains something similar:
664	646
665	647		``` pascal
666	648		FirstNumber := StrToInt(edDisplay.Text);
667	649		```
668	650
669	651		Calculating the number the user entered now happens in two different locations. We do not want to repeat ourselves so it's a good idea to create a new function that does the calculation.
670	652
671	653		- Locate the form's private section and add a new function: GetDisplayValue.
672	654
673	655		``` pascal
674	656		private
675	657		{ private declarations }
676	658		SelectedOperation: TOperationType;
677	659		FirstNumber: longint;
678	660		SecondNumber: longint;
679	661		doClearDisplay: boolean;
680	662		procedure AddDigit(const pDigit: byte);
681	663		procedure StoreOperation(const pOperation: TOperationType);
682	664		function GetDisplayValue: longint;
683	665		```
684	666
685	667		- Position the blinking text cursor on the line GetDisplayValue.
686	668		- Press Ctrl-Shift-C.
687	669		- Add this code to extract the value that is in the display field:
688	670
689	671		``` pascal
690	672		function TForm1.GetDisplayValue: longint;
691	673		begin
692	674		result := StrToInt(edDisplay.Text);
693	675		end;
694	676		```
695	677
696	678		- Locate the statement: FirstNumber := StrToInt(edDisplay.Text);
697	679		- Change it to: FirstNumber := GetDisplayValue;
698	680
699	681		So much for refactoring, back to the calculations.
700	682
701	683		- Locate the statement: SecondNumber := StrToInt(edDisplay.Text);
702	684		- Change it to: SecondNumber := GetDisplayValue;
703	685
704	686		Now look at the following statements:
705	687
706	688		``` pascal
707	689		// Retrieve the second number
708	690		SecondNumber := GetDisplayValue;
709	691		// Do the math
710	692		result := FirstNumber + SecondNumber;
711	693		```
712	694
713	695		Variable SecondNumber is used to store the value in the display box. However it is not really necessary. The above code can be simplified:
714	696
715	697		``` pascal
716	698		// Do the math
717	699		result := FirstNumber + GetDisplayValue;
718	700		```
719	701
720	702		Now look at the following statements:
721	703
722	704		``` pascal
723	705		// Do the math
724	706		result := FirstNumber + GetDisplayValue;
725	707		// Display the resulting value
726	708		edDisplay.Text := IntToStr(result);
727	709		```
728	710
729	711		The same now applies to the result variable. The above code can be simplified to:
730	712
731	713		``` pascal
732	714		// Display the resulting value
733	715		edDisplay.Text := IntToStr(FirstNumber + GetDisplayValue);
734	716		```
735	717
736	718		Now we can add the 3 remaining operations.
737	719
738	720		- Open the form.
739	721		- Double click on button '=' (the event handler is created).
740	722		- Change the code:
741	723
742	724		``` pascal
743	725		procedure TForm1.btnCalculateClick(Sender: TObject);
744	726		begin
745	727		case SelectedOperation of
746	728		otPlus : edDisplay.Text := IntToStr(FirstNumber + GetDisplayValue);
747	729		otMinus : edDisplay.Text := IntToStr(FirstNumber - GetDisplayValue);
748	730		otMultiply : edDisplay.Text := IntToStr(FirstNumber * GetDisplayValue);
749	731		otDivide : edDisplay.Text := IntToStr(FirstNumber div GetDisplayValue);
750	732		end;
751	733		end;
752	734		```
753	735
754	736		We now have a working calculator for all 4 operations:
755	737
756	738		- Run the program (press F9).
757	739		- Enter a number.
758	740		- Press an operation button.
759	741		- Enter another number.
760	742		- Press '=' : the result is displayed.
761	743		- End the program.
762	744
763	745		## Intermezzo
764	746
765	747		After all this work we now have a useable calculator. But some things are not quite right. The obvious thing to try is dividing a number by zero. And the buttons 'C' and '+/-' don't work yet. These things will be addressed in the next section.
766	748
767	749		First let's add another procedure, just for the fun of it (well, there's more to it of course:-)):
768	750
769	751		- Locate the form's private section and add a new procedure: SetDisplayValue.
770	752
771	753		``` pascal
772	754		private
773	755		{ private declarations }
774	756		SelectedOperation: TOperationType;
775	757		FirstNumber: longint;
776	758		SecondNumber: longint;
777	759		doClearDisplay: boolean;
778	760		procedure AddDigit(const pDigit: byte);
779	761		procedure StoreOperation(const pOperation: TOperationType);
780	762		function GetDisplayValue: longint;
781	763		procedure SetDisplayValue(const pValue: longint);
782	764		```
783	765
784	766		- Position the blinking text cursor on the line SetDisplayValue.
785	767		- Press Ctrl-Shift-C.
786	768		- Add the code below to give the display a new value, as the procedure name suggests:
787	769
788	770		``` pascal
789	771		procedure TForm1.SetDisplayValue(const pValue: longint);
790	772		begin
791	773		edDisplay.Text := IntToStr(pValue);
792	774		end;
793	775		```
794	776
795	777		The above code should look pretty familiar. Have a look at the procedure that does all calculations:
796	778
797	779		``` pascal
798	780		procedure TForm1.btnCalculateClick(Sender: TObject);
799	781		begin
800	782		case SelectedOperation of
801	783		otPlus : edDisplay.Text := IntToStr(FirstNumber + GetDisplayValue);
802	784		otMinus : edDisplay.Text := IntToStr(FirstNumber - GetDisplayValue);
803	785		otMultiply : edDisplay.Text := IntToStr(FirstNumber * GetDisplayValue);
804	786		otDivide : edDisplay.Text := IntToStr(FirstNumber div GetDisplayValue);
805	787		end;
806	788		end;
807	789		```
808	790
809	791		This procedure can now be simplified.
810	792
811	793		- Change the code to:
812	794
813	795		``` pascal
814	796		procedure TForm1.btnCalculateClick(Sender: TObject);
815	797		begin
816	798		case SelectedOperation of
817	799		otPlus : SetDisplayValue(FirstNumber + GetDisplayValue);
818	800		otMinus : SetDisplayValue(FirstNumber - GetDisplayValue);
819	801		otMultiply : SetDisplayValue(FirstNumber * GetDisplayValue);
820	802		otDivide : SetDisplayValue(FirstNumber div GetDisplayValue);
821	803		end;
822	804		end;
823	805		```
824	806
825	807		## Loose ends
826	808
827	809		There's a couple of things that need to be done: implement the two loose buttons and make the calculator a bit more robust.
828	810
829	811		### The +/- button
830	812
831	813		- Open the form.
832	814		- Double click on button '+/-' (the event handler is created).
833	815		- Add the following code:
834	816
835	817		``` pascal
836	818		procedure TForm1.btnPlusMinusClick(Sender: TObject);
837	819		begin
838	820		SetDisplayValue(0 - GetDisplayValue);
839	821		end;
840	822		```
841	823
842	824		See here the fruits of our labor. We have reused the procedure SetDisplayValue and GetDisplayValue to implement the negate function.
843	825
844	826		Try it by running the program and press the '+/-' button.
845	827
846	828		### The Clear button
847	829
848	830		- Open the form.
849	831		- Double click on button 'C' (the event handler is created).
850	832		- Add the following code:
851	833
852	834		``` pascal
853	835		procedure TForm1.btnClearClick(Sender: TObject);
854	836		begin
855	837		SetDisplayValue(0); // Start from scratch
856	838		SelectedOperation := otNone; // No operation selected yet
857	839		doClearDisplay := false; // The display is already cleared
858	840		end;
859	841		```
860	842
861	843		The above code is pretty self-explanatory: the display is cleared (the first line), we 'forget' about any pending operation by clearing the SelectedOperation variable and there is no need to clear the display when adding new digits, because it was already cleared by the first statement.
862	844
863	845		### Divide by zero
864	846
865	847		Let's go crazy: run the application and try to divide 10 by 0. This will make the application crash horribly. We have to make sure that this will not happen. The place to check this of course is the place where all calculations are performed (TForm1.btnCalculateClick).
866	848
867	849		- Open the form.
868	850		- Double click on button '='.
869	851		- Update the otDivide section:
870	852
871	853		``` pascal
872	854		procedure TForm1.btnCalculateClick(Sender: TObject);
873	855		begin
874	856		case SelectedOperation of
875	857		otPlus : SetDisplayValue(FirstNumber + GetDisplayValue);
876	858		otMinus : SetDisplayValue(FirstNumber - GetDisplayValue);
877	859		otMultiply : SetDisplayValue(FirstNumber * GetDisplayValue);
878	860		otDivide : if GetDisplayValue <> 0 then
879	861		SetDisplayValue(FirstNumber div GetDisplayValue)
880	862		else
881	863		begin
882	864		// Display an error message to the user
883	865		MessageDlg('It is not possible to divide a number by 0!', mtWarning, [mbCancel],0);
884	866		// Reset the calculator to start with a clean slate
885	867		btnClearClick(nil);
886	868		end
887	869		end;
888	870		end;
889	871		```
890	872
891	873		Things noteworthy:
892	874
893	875		1. MessageDlg is a function for displaying a short warning/error/informative message to the user. ShowMessage can also be used. It is a bit easier to use but cannot display warning/error icons.
894	876		2. btnClearClick(nil): as soon as an error condition occurs we must reset the calculator. That's basically the same as pressing the 'C' button. We simulate pressing the 'C' button by directly calling the event handler.
895	877
896	878		### Overflows
897	879
898	880		- Start the calculator
899	881		- Enter 99999999 as the first number (8 digits)
900	882		- Press button '*'
901	883		- Enter 99999999 as the second number
902	884		- Press button '='
903	885
904	886		Now two things could have happened:
905	887
906	888		1. The application gives an incorrect result (something like 1674919425).
907	889		2. The application raises an error.
908	890
909	891		If it's the first option then overflow errors have been disabled for the project. Enable them by ticking the Overflow option box:
910	892
911	893		- Select from the menu Project/Project Options…
912	894		- Select in the treeview Compiler Options/Code Generation.
913	895		- Tick the box Overflow (-Co) (see image below).
914	896		- Click OK.
915	897
916		-	~~<figure>~~
917		-	~~<img src="tutcal_compiler_overflow.png" title="tutcal_compiler_overflow.png" />~~
918		-	~~<figcaption>tutcal_compiler_overflow.png</figcaption>~~
919		-	~~</figure>~~
	898	+	![](/wiki-images/3/34/Tutcal_compiler_overflow.png)
920	899
921	900		Now run the program again and see what happens with overflows.
922	901
923	902		If it was the second (and expected) option then this means we have to add exception handling to our little calculator. Exception handling is used to prevent an application from crashing when errors occur. In our case we want to handle the arithmetic overflow error that might occur. Because all calculations are done in one place, it's easy to catch any overflow errors.
924	903
925	904		- Open the form.
926	905		- Double click on button '='.
927	906		- Change the code in the procedure to this:
928	907
929	908		``` pascal
930	909		procedure TForm1.btnCalculateClick(Sender: TObject);
931	910		begin
932	911		// Catch any overflow errors
933	912		try
934	913		case SelectedOperation of
935	914		otPlus : SetDisplayValue(FirstNumber + GetDisplayValue);
936	915		otMinus : SetDisplayValue(FirstNumber - GetDisplayValue);
937	916		otMultiply : SetDisplayValue(FirstNumber * GetDisplayValue);
938	917		otDivide : if GetDisplayValue <> 0 then
939	918		SetDisplayValue(FirstNumber div GetDisplayValue)
940	919		else
941	920		begin
942	921		// Display an error message to the user
943	922		MessageDlg('It is not possible to divide a number by 0!', mtWarning, [mbCancel],0);
944	923		// Reset the calculator to start with a clean slate
945	924		btnClearClick(nil);
946	925		end
947	926		end;
948	927		except
949	928		on E: EIntOverflow do
950	929		begin
951	930		// Display an error message
952	931		MessageDlg('The result of the calculation was too big for the calculator to process!', mtWarning, [mbCancel], 0);
953	932		// Reset the calculator
954	933		btnClearClick(nil);
955	934		end
956	935		end
957	936		end;
958	937		```
959	938
960	939		Note that even with the exception handling in place, the application will still halt when run from inside the IDE. However the application is only paused and still active. Press F9 to continue. This will display another pop up window, a debugger notification window. Press Continue. Now our own exception handler will kick in with the expected message. If you were to run the application stand alone (i.e. outside the IDE) then you would only see the message box that we added to the exception handler.
961	940
962	941		## Final tweaks
963	942
964	943		Remember that at a certain point a variable called SecondNumber was introduced. If you choose Run/Build All from the menu, then after building the application the compiler will display a message in the Messages window that this particular variable is never used. If you click on the message text the IDE opens the exact location in the editor where the variable is declared.
965	944
966	945		- Click on message Note: Private field "TForm1.SecondNumber" is never used.
967	946		- Delete longint variable SecondNumber.
968	947
969	948		As soon as our demo Calculator is started we see that the number 0 in the display has the focus (see image below).
970	949
971		-	~~<figure>~~
972		-	~~<img src="tutcal_calculator_focus.png" title="tutcal_calculator_focus.png" />~~
973		-	~~<figcaption>tutcal_calculator_focus.png</figcaption>~~
974		-	~~</figure>~~
	950	+	![](/wiki-images/4/46/Tutcal_calculator_focus.png)
975	951
976	952		This is counter intuitive because a user should not be able to enter anything in that box. Even worse as soon as she would type something in there that is not a number, our calculator would crash! So it's better not to give access to the that control at all. We are going to fix that.
977	953
978	954		- Open the form.
979	955		- Select the display control (click on edDisplay).
980	956		- In the Object Inspector change ReadOnly to True (if the Events tab is still visible, select the Properties tab first to gain access to all properties). From now on it's impossible to enter any data manually.
981	957		- Change TabStop to False. Now it's impossible to get to the display field via the keyboard and the display field will not be highlighted anymore.
982	958
983	959		Run the program to see the result of these changes.
984	960
985	961		(Under construction: OO-ify the program)
986	962
987	963		---
988	964		From the Free Pascal wiki, page "Howdy World (Hello World on steroids)/pt", as it stood on 2020-02-17 after a change by Trev, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).

Back to history