desenvolvimento de aplicações web na plataforma microsoft

Academia de Ensino SuperiorProf. André Morais

Desenvolvimento de Aplicações Web na

plataforma Microsoft

Desenhando a página


Desenhando a página• Objetivos

– Criando páginas estáticas

– HTML

– Server controls e conteúdo dinâmico

– Configurando controles


Desenhando a página• Criando páginas estáticas

– (one) View-only

– Conteúdo imutáveis

– Vamos voltar no tempo... 1996...



• Páginas estáticas



• Criando uma página estática



• HTML, o que é?

– Um arquivo em formato legível ao olhos humanos;

– Composto de elementos, iniciando e terminando com tags;

– Elementos tem atributos que oferecem informações adicionais sobre as tags ao browser



• Exemplo:

tag atributos

Conteúdo do elemento



• Elementos HTML mais comunsElemento Description Exemplo de uso

<img>Uma tag de imagem. Uma tag de imagem. Esta tagcoloca uma imagem em uma página. <img src=”myimage.gif” />

<div>

Uma tag que representa um bloco de texto. Atravésdo atributo style é possível posicionar o conteúdocontido dentro da tag div em qualquer lugar da página

<div style=”float: left”> Left- handcontent here</div><div style=”float: right”> Right- handcontent here</div>

<table> <tr> <td>

Um elemento tabela que contêm linhas (tr) e células(td). Deve ser usado para exibição de dadostabulares (lista de carros, relatórios, etc.)

<table border=”1”><tr><td>Conteúdo da célula</td></tr> </table>

<a>

Ancora. Define o hyperlink de uma página a outrapágina, permitindo definir tanto o endereço do linkcomo o texto para apresentar ao usuário.

Clique <a href=”http: / /www.aes.com.br”>aqui </a>



• Elementos HTML mais comuns (continuação)Elemento Description Exemplo de uso

<head> <body>

Os elementos mais importantes de uma página. Oelemento <head> define uma área para o título,referência a arquivos externos e outros metadados.No elemento <body> estará contido o conteúdo dapágina

<html> <head> <title> Titulo da página </title></head> <body> Conteúdo da página</body> </html>

<form> <input>

Elementos para definir formulários. Ao criar umapágina onde é necessário entrada de dados, oselementos que serão utilizados para transmitir o dadodevem estar dentro da tag <form>. A tag <input> ébastante versátil. Através do atributo type é possíveld

<form id=”form1” runat=”server”><input id=”Text1” type=”text” /><input id=”Submit1” type=”submit”value=”Enviar” /></form>

<br>

A tag <br> acrescenta uma quebra de linha napágina. O valor acrescenta um espaço embranco na página

Primeira linha<br /> Segundalinha. Espaço em branco.



• Conteúdo dinâmico

– Conteúdo que se altera de acordo com a navegação do usuário

– Um conteúdo dinâmico pode ser obtido através de:

• Códigos client-side (Javascript, por exemplo)

• Códigos server-side (C#, VB.NET, etc.) Este é o nosso foco!!



• Server Controls

– Vamos analisar o toolbox do Visual Studio



• Toolbox: Controles...

Comuns para 90% dos casos

Para acesso a banco de dados

Para validação de entrada de dados

Usados para navegação de sites

Para simplificar segurança de aplic.

Para confecção de sites no estilo Share-PointElementos HTML simples

Gerais criados pelo usuário ou importados de fornecedor externo



• E o que são Server Controls afinal?

– São controles que podem ser processados no servidor afim de prover conteúdo HTML;

– Permitem a construção de conteúdos dinâmicos



• Server Controls



• Adicionando Server Controls através do Design View



• Adicionando Server Controls através do Source View



• Standard Controls

– TextBox control: Usado para inclusão de textos na página. Também chamado de caixa de edição;

• Propriedades principais: ID, Visible, Text

– Button control: Para envio de informações à um servidor, que reage a solicitação e envia uma resposta;

• Propriedades principais: ID, Text

– Label control: Usado para exibir textos simples em uma posição especifica da página. Com ele é possível mudar o texto a partir de uma interação do usuário.

• Propriedades principais: ID, Visible, Text


Desenhando a página• Standard Controls (continuação)

– Hyperlink control: Usado para permitir o hyperlink (ligação) entre páginas. Permite a navegabilidade de um site para outras páginas ou outros sites na internet;

• Propriedades principais: ID, Visible, Text, NavigateURL, Target

– Image control: Usado para exibir imagens em uma página. A vantagem de utilizar este controle é a possibilidade de seu conteúdo ser alterado no servidor;

• Propriedades principais: ID, Visible, ImageURL;



• Standard Controls (continuação)

– DropDown List control: Usado para permitir ao usuário escolher entre uma lista de opções;

– Listbox control: Usado para oferecer um número fixo de itens para escolha;

– CheckBox e Radio Button controls: Usados para selecionar entre dois itens ou um entre muitos.



• HTML Controls



• E o Calendar Control??

• Como usar o DropDownList?

desenvolvimento de aplicações web na plataforma microsoft

Documents