NUNCA MAIS PASSE RAIVA POR NÃO CONSEGUIR RESOLVER UM PROBLEMA COM O EXCEL - GARANTIDO!
UNIVERSIDADE DO VBA - Domine o VBA no Excel Criando Sistemas Completos - Passo a Passo - CLIQUE AQUI
Júlio Battisti tem mais de 50 livros publicados, centenas de e-books e é certificado Microsoft.
| « Lição anterior | Δ Página principal | ¤ Capítulos | Próxima lição » |
| ASP.NET - CURSO COMPLETO Autor: Júlio Battisti |
||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Lição 056 - Capítulo 07 - HTML Server Controls disponíveis | ||||||||||||||||||||||||
Existem algumas propriedades que são comuns a todos os HTML Server Controls disponíveis. Isto acontece porque os mesmos herdam estas propriedades a partir de uma classe comum a todos. A classe base System.Web.UI.HtmlControls.HtmlControl A classe base para todos os HTML Server Controls é System.Web.UI.HtmlControls.HtmlControl. Esta classe expõe uma série de propriedades e métodos comuns a todos os HTML Server Controls. Na Tabela 7.4 temos a descrição das principais propriedades da classe System.Web.UI.HtmlControls.HtmlControl
Tabela 7.4 Principais propriedades da classe System.Web.UI.HtmlControls.HtmlControl. Nota: Para uma referência a todas as propriedades e métodos da classe System.Web.UI.HtmlControls.HtmlControl, consulte a documentação do Framework .NET, no item “.NET Framework Reference”. Vamos, finalmente, começar a estudar os HTML Server Controls disponíveis. HTMLForm Control Este controle é utilizado para a criação de formulários. É o tradicional <form> </form>.Na prática, todo controle de servidor deve ser colocado dentro de um formulário. O que define o controle como um Server Control é o atributo runat=”server”. Sintaxe para o controle Form: <form Controles que definem os elementos do formulário </form> Onde temos as seguintes propriedades:
Nota: Não podemos incluir mais do que um controle HtmlForm em uma página. Se você inserir mais do que um HtmlForm, uma exceção será gerada. Por padrão method é definido como POST e a propriedade action é definida com o endereço da própria página. Vamos apresentar um exemplo. Exemplo: Neste exemplo criaremos uma página com um controle HtmlForm. No formulário colocaremos dois controles HtmlInputText (detalharemos este controle mais adiante) e um controle HtmlButton (também detalharemos este controle mais adiante). Ao carregar a página, o usuário digita um valor no primeiro campo e clica no botão Enviar. O valor digitado pelo usuário, no primeiro campo, é repetido no segundo campo. Na Listagem 7.3 temos a página do exemplo proposto. Listagem 7.3 – Um formulário simples – chap7ex3.aspx. <html> <script language="C#" runat="server"> public void Enviar_Click(Object sender,EventArgs e) {
Voltou.Value = Digitou.Value; } </script> <body> <form method=post runat="server"> <table> <tr> <td><h3>Digite um texto:</h3> </td> <td><input id="Digitou" type=text size=40 runat="server"></td> </tr> <tr> <td><h3>Você digitou: </h3> </td> <td><input id="Voltou" type=text size=40 runat="server"> </td> </tr> <tr> <td><h3>Clique no botão --></h3></td> <td><input type=submit value="Enviar" OnServerClick="Enviar_Click" runat="server"></td> </tr> </table> </form> </body> </html> Digite o código da Listagem 7.3 e salve o mesmo em um arquivo chamado chap7ex3.aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço: http://localhost/chap7/chap7ex3.aspx Ao carregarmos esta página no Internet Explorer obtemos um formulário com dois campos para digitação de texto. Digite a mensagem: “Exemplo de formulário”, no primeiro controle e dê um clique no botão Enviar. A mensagem “Exemplo de formulário”, será exibida no segundo campo, conforme indicado na figura a seguir:
Agora uma pequena demonstração de como o ASP.NET mantém o estado dos controles. No nosso exemplo vamos provar que o valor contido nos campos do formulário é mantido no servidor. Pressione F5 para atualizar a página do nosso exemplo (se você estiver utilizando o Netscape pressione Ctrl+R). Com o ASP 3.0 e versões anteriores, ao pressionarmos F5 a página seria recarregada e os campos apareceriam em branco ou com os seus valores padrão. No caso do ASP.NET são exibidos os valores atualmente definidos, ou seja, o estado atual da página foi mantido. Pressione F5 e observe. O texto “Exemplo de formulário” será exibido nos dois campos, o que comprova a manutenção automática de estado com o ASP.NET. Nota: Apenas para lembrar, você pode desabilitar a manutenção automática de estado utilizando a seguinte diretiva, no início da página: <%@Page EnableViewState=”false” %> Algumas observações sobre o código do nosso exemplo. Não definimos a propriedade action do formulário. Com isso, ao clicar no botão Enviar, a página chama a si mesma, pois conforme descrito, o valor padrão para a propriedade action é o endereço da própria página, onde está o formulário. No formulário definimos um evento a ser disparado em resposta ao clique no botão enviar. Esta definição é feita na seguinte linha de código: <td><input type=submit value="Enviar" OnServerClick="Enviar_Click" runat="server"></td> Neste caso definimos que ao ocorrer o evento Click (OnServerClick), deve ser executado o procedimento Enviar_Click. O procedimento enviar Click, atribui o valor digitado no campo Digitou, a propriedade Value do campo Voltou. Isto é equivalente a copiar o conteúdo do campo Digitou para o campo Voltou. O procedimento Enviar_Click está na seção de código da página, conforme indicado na figura a seguir: <script language="C#" runat="server"> public void Enviar_Click(Object sender,EventArgs e) {
Voltou.Value = Digitou.Value; } </script> HTMLInputText Control É utilizado para a criação de campos, em um formulário, onde o usuário pode digitar texto.Este controle é utilizado para criar controles que rodam no servidor, para os tipos e funções indicados na Tabela 7.5. O que define o controle como sendo de servidor é a propriedade runat=”server”.
Tabela 7.5 HTMLInputText Control Sintaxe para o controle input: <input type=text | password runat="server" id="identificação_no_código" maxlength="número máximo de caracteres" size="tamanho de exibição da caixa para digitação" value="valor padrão para o campo"
No exemplo da página chap7ex3.aspx, utilizamos dois controles do tipo <input type=text>, conforme indicado pelo trecho de código a seguir: <td><h3>Digite um texto:</h3> </td> <td><input id="Digitou" type=text size=40 runat="server"></td> [...] <td><h3>Você digitou: </h3> </td> <td><input id="Voltou" type=text size=40 runat="server"> </td> Vamos modificar algumas propriedades destes controles. Vamos definir um valor padrão para o controle Digitou. Vamos definir o valor padrão “Exemplo de ASP.NET”. Também vamos definir um tamanho máximo de 20 para a caixa de exibição do campo Digitou. Após as alterações propostas o nosso código deve ficar assim: <td><h3>Digite um texto:</h3> </td> <td><input id="Digitou" type=text size=20 runat="server" value=”Exemplo de ASP.NET”></td> [...] <td><h3>Você digitou: </h3> </td> <td><input id="Voltou" type=text size=40 runat="server"> </td> Faça estas alterações no código da Listagem 7.3 e salve a mesma com o nome de chap7ex4.aspx, na subpasta chap7, da pasta wwwroot descrita anteriormente. Para acessar esta nova versão da página, utilize o seguinte endereço: http://localhost/chap7/chap7ex4.aspx Ao carregar esta página você obterá os resultados indicados na Figura 7.
HTMLInputCheckBox É utilizado para a criação de controles de seleção em um formulário. Os controles do tipo CheckBox são exibidos como pequenos quadradinhos. São controles do tipo marcado/desmarcado. Se o controle estiver marcado, ao clicarmos ele será desmarcado. Se o controle estiver desmarcado, ao clicarmos ele será marcado. Normalmente utilizado em grupos. Em um grupo de controles do tipo CheckBox podemos selecionar mais do que um controle. Por exemplo, para criar um formulário de cadastro, onde o cliente pode informar as áreas de interesse em uma livraria. Podemos utilizar controles do tipo CheckBox, onde o cliente pode selecionar uma ou mais áreas de interesse. Apresentaremos este exemplo logo em seguida. Sintaxe para o controle CheckBox: <input type=checkbox runat="server" id="identificação_no_código" checked > Onde temos:
Vamos apresentar um exemplo. Exemplo: Vamos criar um formulário onde o cliente digita o Nome, o E-mail e seleciona as áres de preferência, nas quais deseja receber informações por e-mail. Utilizaremos o evento Click do botão Enviar, para exibir os valores digitados pelo usuário. Para exibição dos valores vamos utilizar um controle do tipo caixa de texto HtmlTextArea control, mais adiante falaremos em detalhes sobre este controle. Na Listagem 7.4 temos a página do exemplo proposto. Listagem 7.4 – O controle CheckBox – chap7ex5.aspx. <html> <script language="C#" runat="server"> public void Enviar_Click(Object sender,EventArgs e) {
Dados.Visible = true; //Declaração das variáveis auxiliares String Aux; // Começo a montar uma string que será atribuída à // propriedade Value do controle Dados. Aux = Nome.Value; Aux = Aux + "\n" + Email.Value; if (Negocios.Checked==true) {
Aux= Aux +"\n" +"Negócios"; } if (Administração.Checked==true) {
Aux= Aux +"\n" +"Administração"; } if (Informática.Checked==true) {
Aux= Aux +"\n" +"Informática"; } if (Ficção.Checked==true) {
Aux= Aux +"\n" +"Ficção"; } Dados.Value = Aux; } </script> <body> <form method=post runat="server"> <table> <tr> <td><h3>Nome:</h3> </td> <td><input id="Nome" type=text size=40 runat="server"></td> </tr> <tr> <td><h3>E-mail: </h3> </td> <td><input id="Email" type=text size=40 runat="server"> </td> </tr> <tr> <td colspan="2">Selecione as áres de interesse:</td> </tr> <tr> <td><h3>Negócios:</h3> </td> <td><input id="Negocios" type=checkbox runat="server"> </td> </tr> <tr> <td><h3>Administração:</h3> </td> <td><input id="Administração" type=checkbox runat="server"> </td> </tr> <tr> <td><h3>Informática:</h3> </td> <td><input id="Informática" type=checkbox runat="server"> </td> </tr> <tr> <td><h3>Ficção:</h3> </td> <td><input id="Ficção" type=checkbox runat="server"> </td> </tr> <tr> <td><h3>Dados do cliente:</h3> </td> <td><textarea id="Dados" cols="60" rows="10" visible="false" runat="server"></textarea> </td> </tr> <tr> <td><h3>Clique no botão --></h3></td> <td><input type=submit value="Enviar" OnServerClick="Enviar_Click" runat="server"></td> </tr> </table> </form> </body> </html> Digite o código da Listagem 7.4 e salve o mesmo em um arquivo chamado chap7ex5.aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço: http://localhost/chap7/chap7ex5.aspx Ao carregarmos esta página no Internet Explorer obtemos um formulário com dois campos para digitação de texto. Um para o nome do usuário e outro para o e-mail. Também são exibidos quatro controles do tipo checkbox onde o usuário pode escolher uma ou mais das seguintes opções:
Ao carregar a página pela primeira vez, o controle do tipo textarea está oculto, pois definimos sua propriedade visible como false. Para o nome digite José da Silva e para o e-mail digite josedasilva@abc.com.br. Selecione as opções Negócios e Informática, conforme indicado na Figura 7.6
Dê um clique no botão Enviar. Um controle do tipo textarea será exibido na parte final da página, com os dados que você digitou para o Nome e o email do usuário, além das informações selecionadas, conforme indicado na Figura 7.7.
Desmarque a opção Negócios e marque as opções Administração e Ficção. Dê um clique no botão Enviar e observe que as novas opções já são exibidas no controle do tipo textarea. Alguns comentários sobre o código do nosso exemplo.
Nota: Para maiores informações sobre os comandos básicos da linguagem HTML consulte o Anexo I.
Dados.Visible = true; //Declaração das variáveis auxiliares String Aux; // Começo a montar uma string que será atribuída à // propriedade Value do controle Dados. Aux = Nome.Value; Aux = Aux + "\n" + Email.Value; Lembrando do Capítulo 3, o + é o operador de concatenação e o \n é o código para troca de linha.
if (Negocios.Checked==true) {
Aux= Aux +"\n" +"Negócios"; } O mesmo procedimento é utilizado para determinar se as demais opções foram ou não selecionadas.
Dados.Value = Aux; HtmlTextArea control. Utilizamos este controle no exemplo da Listagem 7.4. Vamos apresentar mais alguns detalhes sobre este controle. O controle textarea é utilizado para a digitação ou exibição de grandes quantidades de texto. A sua função é semelhante a função dos campos do tipo memo no Microsoft Access. Sintaxe para o controle CheckBox: <textarea runat="server" id="identificação_no_código" cols="número de colunas" name="nome enviado para o navegador" rows="número de linhas" onserverchange="onserverchangehandler" > Texto para ser exibido no controle. </textarea> A propriedade onserverchange é utilizada para definir um evento que será executado em resposta ao envio da página para processamento no servidor. Observe que este controle possuí uma tag de abertura <textarea> e uma de fechamento </textarea>. Utilizamos esta sintaxe no exemplo do item anterior: <td><textarea id="Dados" cols="60" rows="10" visible="false" runat="server"></textarea> Ao invés desta sintaxe tradicional podemos utilizar a seguinte sintaxe: <textarea id="TextArea1" cols=40 rows=4 runat=server /> Observe que simplesmente colocamos uma barra antes do sinal de fechamento >. Podemos utilizar qualquer uma das duas sintaxes. HTMLInputRadioButton control. É utilizado para a criação de controles de seleção em um formulário. Os controles do tipo RadioButton são exibidos como pequenos círculos. São controles do tipo marcado/desmarcado. Se o controle estiver marcado, ao clicarmos ele será desmarcado. Se o controle estiver desmarcado, ao clicarmos ele será marcado. Normalmente utilizado em grupos. Em um grupo de controles do tipo RadioButton podemos selecionar somente um controle. Ao clicarmos em um controle, se outro controle do grupo estava marcado, será desmarcado.Por exemplo, para criar um formulário de cadastro, onde o cliente o tipo do cartão de crédito. Para criar um grupo de controles do tipo RadioButton definimos todos os controles com o mesmo valor para a propriedade name. Sintaxe para o controle CheckBox: <input type=checkbox runat="server" id="identificação_no_código" checked name="nome do grupo" > Onde temos:
Vamos apresentar um exemplo. Exemplo: Vamos criar um formulário onde com três controles do tipo RadioButton. O usuário seleciona uma opção e clica no botão Enviar. Para processar as informações enviadas pela página vamos utilizar a propriedade OnServerChange do controle RadioButton. Esta propriedade permite que seja definido um procedimento que será executado quando a página for processada, em resposta a uma alteração no controle. Este procedimento detecta o tipo de cartão selecionado e exibi o tipo de cartão em um controle do tipo text. Na Listagem 7.5 temos a página do exemplo proposto. Listagem 7.5 – Controles do tipo RadioButton – chap7ex6.aspx. <html> <script language="C#" runat="server"> void Server_Change(object Source, EventArgs e) {
if (Visa.Checked == true) Exibe.Value="O SEU CARTÃO É VISA!"; else if (Master.Checked == true) Exibe.Value="O SEU CARTÃO É MASTER CARD!"; else if (Outros.Checked == true) Exibe.Value="OUTROS TIPOS DE CARTÃO!"; } </script> <body> <form runat="server"> <h3><font face="Verdana">Selecione o tipo de cartão:</font></h3> <input type="radio" id="Visa" name="Cartao OnServerChange="Server_Change" runat="server"/> Visa<br> <input type="radio" id="Master" name="Cartao” OnServerChange="Server_Change" runat="server"/> Master Card<br> <input type="radio" id="Outros" name="Cartao” OnServerChange="Server_Change" runat="server"/> Outros <p> <input id="Exibe" type=text size=60 runat="server"> <p> <input type=submit id="Enviar" value="Enviar" runat="server"> </form> </body> </html> Digite o código da Listagem 7.5e salve o mesmo em um arquivo chamado chap7ex6aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço: http://localhost/chap7/chap7ex6aspx Ao carregarmos esta página no Internet Explorer obtemos um formulário com três controles do tipo RadioButton. Podemos selecionar um dos controles. Dê um clique na opção Visa. Agora dê um clique na opção Master Card. Observe que a opção Visa foi, automaticamente, desmarcada. Dê um clique no botão Enviar. Você obterá o resultado indicado na Figura 7.8;
A novidade neste exemplo é que, ao invés de utilizar o evento Click do botão de comando, utilizamos um evento definido pela propriedade OnServerChange dos controles do tipo RadioButton. Controles para a criação de tabelas: HtmlTable, HtmlTableRow e HtmlTableCell Controls. Os controles HtmlTable, HtmlTableRow e HtmlTableCell são os controles de servidor, equivalentes as tags HTML para a criação de tabelas: <table> </table>, <tr> </tr> e <td> </td>, respectivamente. A vantagem de utilizarmos os controles de servidor é que temos acesso a uma série de propriedades e métodos dos controles de servidor. Por exemplo, podemos adicionar ou remover linhas e colunas dinamicamente, com base em eventos ocorridos na página. Através de programação podemos utilizar os métodos das coleções HtmlTableRowCollection e HtmlTableCellCollection para adicionar ou remover elementos da tabela. Vamos estudar cada um dos controles individualmente, depois vamos apresentar alguns exemplos de utilização. O controle HtmlTable. Temos a seguinte sintaxe para este controle: <table runat="server" id="identificação_no_código" align=left | center | right bgcolor="cor de fundo" border="tamanho da borda em pixels" bordercolor="cor da borda" cellpadding="espaço entre a borda e o conteúdo da célula, em pixels." cellspacing=" espaço entre as células, em pixels " height="altura da tabela" rows="um objeto do tipo coleção de linhas - HtmlTableRowCollection " width="largura da tabela" > <tr><td></td></tr> <tr><td></td></tr> </table> Observe que além de definir uma coleção de linhas, no parâmetro rows, também podemos acrescentar linhas e células utilizando as tags tradicionais: <tr> </tr> para adicionar linhas e <td> </td> para adicionar células dentro de uma linha (colunas da tabela). Quando utilizamos um server control HtmlTable para criar uma tabela, podemos imaginar a tabela como sendo formada por uma coleção de linhas. Podemos adicionar ou remover itens desta coleção, através do código de programação. Também podemos imaginar cada linha, como uma coleção de células. Podemos adicionar ou remover itens desta coleção, utilizando código de programação. No final deste item veremos um exemplo prático de adição de linhas e células utilizando código de programação. O controle HtmlTableRow. Temos a seguinte sintaxe para este controle: <tr runat="server" id="identificação_no_código" align="alinhamento para o conteúdo da linha" bgcolor="cor de segundo plano" bordercolor="cor da borda" height="altura da linha" cells="um objeto do tipo HtmlTableCellCollection " valign="alinhamento vertical do conteúdo da linha" > <td>Conteúdo da célula</td> <td> Conteúdo da célula </td> <td> Conteúdo da célula </td> </tr> O controle HtmlTableCell Temos a seguinte sintaxe para este controle: <td ou th runat="server" id="identificação_no_código" align="alinhamento para o conteúdo da linha" bgcolor="cor de segundo plano" bordercolor="cor da borda" height="altura da célula" nowrap="true | false" rowspan ou colspan=”número de linhas ou células para mesclar” valign="alinhamento vertical do conteúdo da linha" width="largura da célula" > Conteúdo da célula. </td or /th> Duas propriedades merecem maiores comentários.
<tr> <td width="100%" colspan="2">Conteúdo da Célula</td> </tr> Um exemplo prático. Vamos apresentar um exemplo,onde demonstramos a capacidade de adicionar linhas e células, dinamicamente, a uma tabela, utilizando código de programação. Ao carregar a página é exibida uma tabela de uma única célula. Vamos criar um formulário onde são apresentados dois campos para o usuário. No primeiro, o usuário digita o número de linhas para a tabela. No segundo campo, o usuário digita o número de colunas. Ao clicar no botão Enviar, utilizaremos o evento Load da página, para criar uma tabela com o número de linhas e colunas especificadas pelo usuário. Na Listagem 7.6 temos a página do exemplo proposto. Listagem 7.6 – Adicionando linhas e células, dinamicamente – chap7ex7.aspx. <html> <head> <script language="C#" runat="server"> void Page_Load(Object sender, EventArgs e) {
int row = 0; // Vamos gerar, dinamicamente, uma tabela // com o número de linhas e células, especificado // pelo usuário. int numrows = Convert.ToInt32(Linhas.Value); int numcells = Convert.ToInt32(Colunas.Value); // O laço de fora define o número de linhas. // para cada linha, isto é, para cada passagem do laço // de fora, o laço mais interno é executado tantas vezes // quantas forem o número de colunas especificadas. for (int j=0; j<numrows; j++) {
//Declaramos uma variável do tipo HtmlTableRow HtmlTableRow r = new HtmlTableRow(); // Define a cor de segundo plano, alternadamente // para linhas pares e ímpares. if (row%2 == 1) r.BgColor="Gainsboro"; row++; for (int i=0; i<numcells; i++) {
// Declaro e crio um novo objeto do tipo HtmlTableCell() HtmlTableCell c = new HtmlTableCell(); // Defino o conteúdo da célula que foi recém criada. c.Controls.Add(new LiteralControl("Linha " + j.ToString() + ", Coluna " + i.ToString()));
// Adiciono a célula à coleção de células da linha. r.Cells.Add(c); } // Adiciono a linha à coleção de linhas da tabela. Table1.Rows.Add(r); } } </script> </head> <body> <h3><font face="Verdana">HtmlTable Example</font></h3> <form runat="server"> <font face="Verdana" size="-1"> <p> <table id="Table1" CellPadding=5 CellSpacing=0 Border="1" BorderColor="black" runat="server" /> <p> Número de linhas : <input id="Linhas" type=text size=10 value="1" runat="server"> <BR> Número de colunas : <input id="Colunas" type=text size=10 value="1" runat="server"> <BR> <input type="submit" value="Gerar a tabela dinamicamente." runat="server"> </font> </form> </body> </html> Digite o código da Listagem 7.6 e salve o mesmo em um arquivo chamado chap7ex7aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço: http://localhost/chap7/chap7ex7aspx Ao carregarmos esta página no Internet Explorer obtemos uma tabela com uma linha e uma coluna e um formulário com dois campos para digitação. O valor padrão destes campos é definido como 1, conforme indicado na Figura 7.9.
Digite 3 para o número de linhas e 3 para o número de colunas. Dê um clique no botão “Gerar a tabela dinamicamente”. Uma tabela com três linhas e três colunas por linha, será automaticamente gerada, conforme indicado na Figura 7.10.
Alguns comentários sobre o código da página chap7ex7.aspx.
void Page_Load(Object sender, EventArgs e) Importante: Uma tabela dinâmica é formada por uma coleção de linhas, onde cada linha é formada por uma coleção de células. Com esta idéia em mente é que, através do código do evento Load, vamos criar uma tabela com o número de linhas e colunas digitado pelo usuário. Iniciamos o procedimento declarando três variáveis do tipo inteiro: int row = 0; int numrows = Convert.ToInt32(Linhas.Value); int numcells = Convert.ToInt32(Colunas.Value); A variável row é utilizada para definir se estamos em uma linha ímpar (1ª, 3, etc) ou em uma linha par (2ª, 4ª, etc). Para as linhas pares definiremos uma cor de fundo diferente, para dar um efeito especial na apresentação da tabela. A variável numrows contém o número de linhas digitado pelo usuário. Observe que temos que converter o valor digitado pelo usuário para um tipo Int32. Esta operação é necessária porque os valores digitados em um campo de um formulário são considerados valores de texto. A variável numcells contém o número de colunas digitado pelo usuário. Também convertemos este número para Int32. Em seguida iniciamos dois laços for. O laço for externo varia de 0 até o número de linhas especificado pelo usuário. O laço for interno varia, para cada valor do laço externo, de 0 até o número de colunas especificado pelo usuário, conforme indicado pelo trecho de código a seguir: for (int j=0; j<numrows; j++) {
//Declaramos uma variável do tipo HtmlTableRow HtmlTableRow r = new HtmlTableRow(); // Define a cor de segundo plano, alternadamente // para linhas pares e ímpares. if (row%2 == 1) r.BgColor="Gainsboro"; row++; for (int i=0; i<numcells; i++) {
// Declaro e crio um novo objeto do tipo HtmlTableCell() HtmlTableCell c = new HtmlTableCell(); // Defino o conteúdo da célula que foi recém criada. c.Controls.Add(new LiteralControl("Linha " + j.ToString() + ", Coluna " + i.ToString()));
// Adiciono a célula à coleção de células da linha. r.Cells.Add(c); } // Adiciono a linha à coleção de linhas da tabela. Table1.Rows.Add(r); } No início do laço, declaramos e inicializamos uma variável r, do tipo HtmlTableRow. Estamos criando um objeto do tipo HtmlTableRow. Isto é feito com o seguinte código: HtmlTableRow r = new HtmlTableRow(); Em seguida um texte para definir se estamos em uma linha par ou ímpar. O teste divide o número da linha por 2 e retorna o resto da divisão. Se este resto for igual a 1 estamos em uma linha ímpar e a cor de segundo plano é alterada. Observe que para alterar a cor de segundo plano utilizamos a propriedade BgColor do objeto r, que é um objeto do tipo HtmlTableRow(). Isto é feito pelo seguinte trecho de código: if (row%2 == 1) r.BgColor="Gainsboro"; row++; Gainsboro é o nome de uma cor. Ao invés do nome poderíamos utilizar os tradicionais códigos de seis dígitos hexadecimais. Por exemplo: #000000 para preto #FFFFFF para branco, #FF0000 para vermelho e assim por diante. Após definirmos o nome da cor, incrementamos a variável inteira row. Observe que com ASP.NET e a biblioteca de classes do Framework .NET, a programação para Web ficou muito mais parecida com a programação tradicional para Windows, orientada a eventos. Na seqüência do código entramos no laço for interno. Neste laço é declarada e inicializada uma variável c, do tipo HtmlTableCell(). Para cada passagem do laço interno vamos adicionar uma célula, a coleção de células do objeto HtmlTableRow atual. Na prática estamos adicionando as colunas para a linha atual. Também é feita a definição do conteúdo para a célula. A declaração da variável do tipo HtmlTableCell() é feita com o seguinte comando: HtmlTableCell c = new HtmlTableCell(); A definição do conteúdo da célula é feita com o seguinte comando: c.Controls.Add(new LiteralControl("Linha " + j.ToString() + ", Coluna " + i.ToString()));
A adição da célula c, à coleção de células da linha r é feita com o seguinte comando: r.Cells.Add(c); Para cada passada do laço interno uma nova célula é adicionada a linha. Ao final a linha terá tantas células quantas forem as colunas especificadas pelo usuário. Uma vez que adicionamos várias células a coleção de células da linha, o passo final é adicionar a linha a coleção de linhas da tabela. Isto é feito no seguinte comando: Table1.Rows.Add(r); Para cada passada do laço externo uma nova linha é adicionada a coleção de linhas da tabela. Ao final teremos uma tabela com tantas linhas quantas especificadas pelo usuário e em cada linha, tantas células quanto o número de colunas especificado pelo usuário. Em resumo: exatamente o resultado proposto pelo exemplo. HTMLSelect control. É utilizado para a criação de controles do tipo caixa de seleção, onde são apresentados diversos itens em uma lista, onde o usuário pode selecionar um determinado item. A funcionalidade é idêntica a tag <SELECT> </SELECT) do HTML. Sintaxe para o controle Select: <select runat="server" id="identificação_no_código" OnServerChange="onserverchangehandler" DataSource="fonte de dados" DataTextField="descrição do campo ao qual é vinculada a caixa de seleção" DataValueField="valor do campo ao qual é vinculada a caixa de seleção" Multiple Items="coleção de elementos do tipo options" SelectedIndex="índice do elemento atualmente selecionado" Size="número de itens visíveis ao mesmo tempo. Por padrão é 1" Value="Valor do item atualmente selecionado" > <option>Texto para a opção 1</option> <option>Texto para a opção 2</option> ... <option>Texto para a opção n</option> </select> Eu não me canço de repetir: “Sendo este um controle de servidor, o mesmo é criado como um objeto no momento da compilação da página ASP.NET. Sendo um objeto temos acesso a suas propriedades e métodos. Temos duas maneiras de definir os elementos da lista:
Vamos apresentar um exemplo. Exemplo: Vamos criar um formulário onde temos três controles:
Na Listagem 7.7 Temos a página do exemplo proposto. Listagem 7.7– Adicionando elementos dinamicamente a uma lista – chap7ex8.aspx. <html> <head> <script language="C#" runat="server"> void Aplicar_Click(object Source, EventArgs e) {
Span1.Style["background-color"] = ColorSelect.Value; } void AdicionaALista_Click(object Source, EventArgs e) {
ColorSelect.Items.Add(Text1.Value); } </script> </head> <body> <h3><font face="Verdana">Exemplo de lista dinâmica!</font></h3> <form runat="server"> Selecione uma cor:<br> <select id="ColorSelect" runat="server"> <option>SkyBlue</option> <option>LightGreen</option> <option>Gainsboro</option> <option>LemonChiffon</option> </select> <input type="button" runat="server" Value="Aplicar" OnServerClick="Aplicar_Click"> <p> A cor desejada não está na lista? Digite a cor desejada:<br> <input type="text" id="Text1" runat="server"> <input type="button" runat="server" Value="AdicionaALista" OnServerClick="AdicionaALista_Click"> <p> <span id="Span1" runat="server"> Clique no botão Aplicar para definir a cor de segundo plano! </span> </form> </body> </html> Digite o código da Listagem 7.7 e salve o mesmo em um arquivo chamado chap7ex8aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço: http://localhost/chap7/chap7ex8.aspx Na lista de cores selecione SkyBlue e dê um clique no botão Aplicar. Observe que a cor de segundo plano do texto, no final do formulário, é alterada, conforme indicado na Figura 7.11.
Agora vamos adicionar uma cor à lista. No campo para digitação de texto digite Red e dê um clique no botão AdicionaALista. Abra a lista e observe que a cor Red (vermelho) já faz parte das opções da Lista, conforme indicado na Figura 7.12.
Alguns comentários sobre o código da página chap7ex8.aspx.
void Aplicar_Click(object Source, EventArgs e) {
Span1.Style["background-color"] = ColorSelect.Value; } Nota: A propriedade Style é utilizada para definir aspectos visuais dos elementos, como cor da fonte, tamanho, negrito, itálico, etc. Existe uma definição para os vários atributos visuais possíveis de serem alterados. Estes atributos fazem parte das chamadas CSS – Cascading Style Sheets. Para maiores informações sobre CSS e uma referência completa sobre os diversos atributos disponíveis, consulte um dos seguintes endereços: www.w3.org ou www.wdsl.com.
void AdicionaALista_Click(object Source, EventArgs e) {
ColorSelect.Items.Add(Text1.Value); } Passamos para o método Add,o valor digitado no campo Text1 do formulário: Text1.Value. Vou repetir mais uma vez: Observe o quanto o modelo de programação para o ASP.NET se parece com a programação tradicional de aplicações Windows orientada a eventos. HTMLAnchor control. É utilizado para a criação de links em páginas ASP.NET. A funcionalidade é idêntica a tag <a> </a) do HTML. A diferença é que por ser um controle de servidor, o mesmo é processado pelo Framework .NET no servidor IIS, o que nos disponibiliza uma série de métodos e propriedades para o controle HtmlAnchor. Sintaxe para o controle HtmlAnchor: <a runat="server" id="identificação_no_código" href="enereço absoluto ou relativo" name="nome quando adicionado à lista de favoritos do navegador" OnServerClick="nome do procedimento a ser executado em resposta a um click no link" target="abre na mesma janela, em uma nova janela, em um frame da janela atual, etc" title="título a ser exibido na janela de título do navegador" > Texto do link. </a> Vamos apresentar um exemplo simples. Exemplo: Vamos criar um formulário com dois links. Um link aponta para a página chap7ex8.aspx e outro para a página chap7ex7.aspx. Na Listagem 7.8 Temos a página do exemplo proposto. Listagem 7.8– O controle HtmlAnchor – chap7ex9.aspx. <%@ Import Namespace="System" %> <html> <script language="C#" runat="server"> </script> <body> <H1>Selecione um dos links abaixo !!! </H1> <TABLE> <TR> <TD> <a href="chap7ex7.aspx" runat="server" id="link1"> Exemplo 7 do Capítulo 7. </a> </TD> </TR> <TR> <TD> <a href="chap7ex8.aspx" runat="server" id="link2"> Exemplo 8 do Capítulo 7. </a> </TD> </TR> </TABLE> </body> </html> Digite o código da Listagem 7.8 e salve o mesmo em um arquivo chamado chap7ex9aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço: http://localhost/chap7/chap7ex9.aspx Você obterá o resultado indicado na Figura 7.13.
HtmlInputButton control. É utilizado para a criação de um botão de comando em um formulário. O botão de comando normalmente é utilizado para enviar os dados do formulário para processamento. Já tivemos diversos exemplos de utilização deste controle. Para vê-lo em funcionamento, inclusive com código para responder ao evento Click do botão, consulte os seguintes exemplos deste capítulo:
Sintaxe para o controle HtmlInputButton: <input type=button | submit | reset runat="server" id="identificação_no_código" OnServerClick="nome do procedimento a ser executado em resposta ao evento Click" > HtmlButton control. É utilizado para a criação de botões de comandos mais sofisticados dos que os criados pelo controle HtmlInputButton. Com este controle temos acesso a uma série de métodos e eventos, os quais permitem a criação de alguns efeitos interessantes. Além do texto podemos associar uma determinada figura com o botão de comando. Sintaxe para o controle HtmlButton: <button runat="server" id="identificação_co_código" OnServerClick="procedimento a ser executado ao clicarmos no botão" > texto ou image </button> Este elemento é bastante rico em funcionalidade. Podemos aplicar uma série de efeitos interessantes ao mesmo. Vamos criar um formulário, baseado em um exemplo da documentação do Framework .NET, onde temos dois controles HtmlButton. Vamos utilizar o evento Click de cada controle para informar quando um dos controles foi clicado. Também vamos utilizar a propriedade Style para definir algumas características visuais de cada controle. Em um dos controles além do texto, adicionaremos uma pequena imagem. A imagem está em um arquivo chamado seta.gif, o qual deve estar gravado na pasta Chap7. Para o segundo botão vamos aplicar um efeito onmouseover, ou seja, quando o usuário estiver com o mouse sobre alguma parte do botão, faremos com que a cor de segundo plano do botão seja modificada. Quando o mouse sair da área do botão, volta a cor de segundo plano original. Na Listagem 7.9 Temos a página do exemplo proposto. Listagem 7.9– O controle HtmlButton – chap7ex10.aspx. <html> <head> <script language="C#" runat="server"> void Button1_OnClick(object Source, EventArgs e) {
Span1.InnerHtml="Você clicou no botão 1"; } void Button2_OnClick(object Source, EventArgs e) {
Span1.InnerHtml="Você clicou no botão 2"; } </script> </head> <body> <h3><font face="Verdana">Exemplo do controle HtmlButton!</font></h3> <form runat="server"> <font face="Verdana" size="-1"> <p> <button id="Button1" OnServerClick="Button1_OnClick" style="font: 8pt verdana; background-color:lightgreen; border-color:black; height=30; width:110" runat="server"> <img src="seta.gif"> Clique em mim! </button> Além do texto temos uma figura no botão. <p> <p> <button id=Button2 OnServerClick="Button2_OnClick" style="font: 8pt verdana; background-color:lightgreen; border-color:black; height=30; width:110" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='lightgreen'" runat="server"> Clique em mim! </button> Com efeito onmouseover. <p> <p> <b><span id=Span1 runat="server" /></b> </font> </form> </body> </html> Digite o código da Listagem 7.9 e salve o mesmo em um arquivo chamado chap7ex10aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço: http://localhost/chap7/chap7ex10.aspx Clique no primeiro botão. Observe que o texto “Você clicou no botão 1” é exibido. Agora passe o mouse sobre o segundo botão. Observe que a cor de fundo trocou para amarelo. Afaste o mouse do segundo botão. Observe que a cor de fundo voltou ao normal. Agora clique no segundo botão, o texto “Você clicou no botão 2” é exibido, conforme indicado na Figura 7.14.
Alguns comentários sobre o exemplo.
style="font: 8pt verdana; background-color:lightgreen; border-color:black; height=30; width:110" Observe que através da propriedade style podemos definir uma série de elementos visuais para o botão. Neste exemplo estamos definindo as seguintes propriedades: font: tamanho e tipo da fonte. background-color: cor de segundo plano. border-color: cor das bordas do botão. heigut: altura do botão, em pixels. width: largura do botão, em pixels. Nota: Para uma referência completa a todas as definições de estilo existentes, consulte www.w3.org ou www.wdvl.com.
onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='lightgreen'" Importante! Algumas destas definições fazem parte do HTML 4.0 e somente funcionarão corretamente com o Internet Explorer 4.0 ou superior. HtmlImage control. É utilizado para Inserir figuras em uma página ASP.NET. A sua funcionalidade é idêntica a tag <img> da linguagem HTML, com a diferença que, em sendo um controle de servidor, temos acesso a uma série de métodos e eventos do controle. Sintaxe para o controle HtmlImage: <img id="identificação_no_código" runat="server" alt="texto exibido quando o usuário aponta o mouse para a imagem" align= top | middle | bottom | left | right border="largura da borda" height="altura da imagem" src="localização da imagem" width="largura da imagem" > Vamos a um exemplo adaptado da documentação do Framework .NET. Exemplo: Vamos criar um formulário onde é exibida uma imagem. Também exibimos uma lista de seleção com nomes de outras imagens. Esta lista é criada utilizando o controle HtmlSelect explicado anteriormente. O usuário seleciona um nome de imagem na lista e clica no botão Aplicar. O evento Click do botão faz com que a imagem associada a opção selecionada na lista, seja exibida. Na Listagem 7.10 Temos a página do exemplo proposto. Listagem 7.10– O controle HtmlImage – chap7ex11.aspx. <html> <head> <script language="C#" runat="server"> void SubmitBtn_Click(Object Sender, EventArgs e) {
Image1.Src=Select1.Value; } </script> </head> <body> <h3><font face="Verdana">Exemplo do controle HtmlImage!!!</font></h3> <form runat="server"> <img ID="Image1" src="cereal1.gif" runat="server"/> <p> <p> Selecione a Imagem a ser exibida e clique em Aplicar: <select id="Select1" runat="server"> <option Value="Cereal1.gif">Healthy Grains</option> <option Value="Cereal2.gif">Corn Flake Cereal</option> <option Value="Cereal3.gif">U.F.O.S</option> <option Value="Cereal4.gif">Oatey O's</option> <option Value="Cereal5.gif">Strike</option> <option Value="Cereal7.gif">Fruity Pops</option> </select> <p> <p> <input type="submit" runat="server" Value="Aplicar" OnServerClick="SubmitBtn_Click"> </form> </body> </html> Digite o código da Listagem 7.10 e salve o mesmo em um arquivo chamado chap7ex11aspx, na pasta chap7, dentro da pasta wwwroot, conforme descrito anteriormente. Para acessar esta página utilize o seguinte endereço: http://localhost/chap7/chap7ex11.aspx Será exibida a figura para o cereal “Healthy Grains”, conforme indicado na Figura 7.15.
Selecione uma outra opção na lista, por exemplo, selecione U.F.O.S e dê um clique no botão Aplicar. A figura correspondente será exibida. Nota: Para que este exemplo funcione, as figuras devem estar na pasta Chapt7. Se as figuras estiverem em outra pastas, você precisa fornecer o caminho ao definir o valor da propriedade Src, do controle HtmlImage. Alguns comentários sobre o exemplo.
void SubmitBtn_Click(Object Sender, EventArgs e) {
Image1.Src=Select1.Value; }
Para visualizar o código HTML correspondente, utilize o seguinte comando no Internet Explorer: Exibir -> Código fonte. Selecionando este comando será exibido o código a seguir: <html> <head> </head> <body> <h3><font face="Verdana">Exemplo do controle HtmlImage!!!</font></h3> <form name="ctrl0" method="post" action="chap7ex11.aspx" id="ctrl0"> <input type="hidden" name="__VIEWSTATE" <img src="/chap7/Cereal3.gif" id="Image1" /> <p> <p> Selecione a Imagem a ser exibida e clique em Aplicar: <select name="Select1" id="Select1"> <option value="Cereal1.gif">Healthy Grains</option> <option value="Cereal2.gif">Corn Flake Cereal</option> <option selected="selected" value="Cereal3.gif">U.F.O.S</option> <option value="Cereal4.gif">Oatey O's</option> <option value="Cereal5.gif">Strike</option> <option value="Cereal7.gif">Fruity Pops</option> </select> <p> <p> <input name="ctrl1" type="submit" value="Aplicar" /> </form> </body> </html> Nada de diferente, com exceção do seguinte elemento: <input type="hidden" name="__VIEWSTATE" Este é um campo oculto (type=”hidden”), o qual é utilizado para manter o estado dos controles do formulário entre uma chamada e outra da página. Para maiores informações sobre a manutenção de estado consulte os tópicos iniciais deste capítulo |
||||||||||||||||||||||||
| « Lição anterior | Δ Página principal | ¤ Capítulos | Próxima lição » |
Contato: Telefone: (51) 3717-3796 | E-mail: webmaster@juliobattisti.com.br | Whatsapp: (51) 99627-3434
Júlio Battisti Livros e Cursos Ltda | CNPJ: 08.916.484/0001-25 | Rua Vereador Ivo Cláudio Weigel, 537 - Universitário, Santa Cruz do Sul/RS, CEP: 96816-208
Todos os direitos reservados, Júlio Battisti 2001-2024 ®
LIVRO: MACROS E PROGRAMAÇÃO VBA NO EXCEL 2016 - CURSO COMPLETO E PRÁTICO
DOMINE A PROGRAMAÇÃO VBA NO EXCEL - 878 PÁGINAS - CLIQUE AQUI
