quarta-feira, 25 de janeiro de 2012

Manipulando HTML com a Classe HtmlGenericControl e o Comando FindControl

    As vezes precisamos manipular o HTML para adicionar novas funções ou alterar o layout criado, neste post pretendo mostrar uma forma de se fazer isto.
    O comando FindControl é utilizado para localizar um controle, para que este comando funcione em projetos WEB precisamos no ASP.Net definir um ID e colocar o atributo runat=”server” conforme os exemplos abaixo:
 class="xml"><!-- runat="server" em uma div -->
<div class="menu" id="divMenu" runat="server">

<!-- runat="server" no body, repare que eu adicionei o atributo ID ao body -->
<body runat="server" id="body">
    O atributo runat=”server” pode ser adicionado em qualquer parte do HTML, este atributo server para informar que o controle (TAG HTML) vai ficar disponível no código do lado do servidor.
    Feito isso segue alguns exemplo do uso do comando FindControl :
// Pegando um controle ul 
HtmlGenericControl ulPrincipal = (HtmlGenericControl)FindControl("ulPrincipal");

// Pegando o body da página (o body deve conter o atributo ID e o atributo runat="server", conforme mencionado acima) 
HtmlGenericControl pgBody = (HtmlGenericControl)FindControl("body");

    Como a proposta deste artigo é a manipulação de controles HTML verifique que eu converti o controle localizado para a classe HtmlGenericControl, está classe vai nos ajudar a manipular os atributos do controle HTML, abaixo segue alguns exemplos de atributos que podemos manipular:
// Adicionando uma classe CSS
liLinhaF.Attributes.Add("class", "linha-menu");

// Adicionando um titulo, o conteúdo e o link de um controle a
aHref.Attributes.Add("title", "Titulo"); // Titulo
aHref.Attributes.Add("href", "link"); // link
aHref.InnerText = "Conteudo" // Conteúdo 

// Adicionando código HTML ao controle
liLinha.InnerHtml = " ";

// Adicionando o evento onload ao body da página
pgBody.Attributes.Add("onload", "javascript:alert(\'teste !\')");

// Manipulando o estilo de um controle HTML
lu.Style.Add("display", "none");
lu.Style.Add("visibility", "hidden");
    Além de manipular atributos também podemos adicionar outros controles dentro de outros controles (caso você tenha uma div ou table):
HtmlGenericControl ulPrincipal = (HtmlGenericControl)FindControl("ulPrincipal");
HtmlGenericControl liLinha = new HtmlGenericControl("li");
liLinha.Attributes.Add("class", "linha-menu");
liLinha.InnerHtml = "<B>Teste</B>";
ulPrincipal.Controls.Add(liLinha);
    Com o comando FindControl e a classe HtmlGenericControl fica muito fácil a manipulação do HTML do lado do servidor.

Referências:
Método Control.FindControl (String)
Classe HtmlGenericControl
Curso ASP.NET 3.5 em VB.NET e C# - Controles(Fernando Amaral)
Apply CSS for an HTML generic control like

domingo, 15 de janeiro de 2012

Configurando o JQuery no Visual Studio 2008

    O JQuery, na minha opinião, é uma das melhores bibliotecas em Javascript, facilitando muita a vida do desenvolvedor, neste artigo vou mostrar como fazer a integração do JQuery ao Visual Studio 2008 para que o intelisense funcione, já que tive algumas dificuldades nesta integração.
    Primeiro verifique se o seu Visual Studio 2008 está  com o SP1 instalado.
    Segue o link se você precisar baixar o SP1 do Visual Studio 2008 (a instalação deste pacote é lenta, não estranhe):


    Depois vamos aplicar o hotfix para o Visual Studio interpretar a documentação de bibliotecas escritas em Javascript (-vsdoc.js), o endereço para fazer o download do hotfix é :


    Baixe os arquivos do JQuery: jquery-1.3.2-vsdoc2.js e jquery-1.3.2.js (está é a versão que eu usei neste artigo), no endereço http://code.google.com/p/jqueryjs/downloads/list. Retire do nome do arquivo de documentação o numero dois ele deve ficar com o seguinte nome jquery-1.3.2-vsdoc.js (é importante renomear este arquivo, porque o Visual Studio só interpreta arquivos de documentação se ele tiver no final do nome a sequencia "-vsdoc.js").
    Depois de feito o download dos arquivos e aplicado o hotfix, vamos testar o Visual Studio 2008, crie um projeto WEB, depois crie uma pasta chamada scripts (não é obrigatório, mas fica mais organizado), insira neste diretório os dois arquivos do JQuery , arraste ou insira a referência ao arquivo que contem as funções (jquery-1.3.2.js).
    Crie uma sessão Javascript e digite $( e veja o intelisense funcionando !


Referências:

terça-feira, 29 de novembro de 2011

Alimentando DataGrid WPF Dinamicamente com C#


                Muitas vezes precisamos alimentar um DataGrid dinamicamente, com o WPF está tarefa ficou bem fácil, vamos ao exemplo.
                Iremos criar um programa para exibir o alfabeto em maiúsculo , um contador e o código ASCII da letra dentro de um DataGrid assim que o usuário pressionar o botão.
                Vamos inserir um botão e um DataGrid, como o intuito aqui é alimentar dinamicamente o DataGrid, vamos alterar a propriedade AutoGenerateColumns  para true dentro do XAML , assim o DataGrid vai gerar as colunas para nós, abaixo segue como o código deve ficar :

<my:datagrid autogeneratecolumns="true" margin="12,42,12,20" name="dataGrid1" xmlns:my="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit"> </my:datagrid>
    

                No código vamos criar uma simples classe apenas com os atributos, segue o código:

    public class LetraNumero
    {
        public int Posicao { get; set; }
        public char Letra { get; set; }
        public int ASCII { get; set; }
    }

                Segue o código do evento Click do botão :

         private void button1_Click(object sender, RoutedEventArgs e)
        {   
            // Cria lista para os objetos (está lista tem que ser do tipo Generic)
            List<letranumero> lista = new List<letranumero>();

            // Rotina para alimentar a lista
            for (int i = 1; i < 27; i++)
            {
                LetraNumero item = new LetraNumero();
                item.Posicao = i;
                item.Letra = Convert.ToChar(64 + i);
                item.ASCII = 64 + i;
                lista.Add(item);
            }

             // Vinculando a lista ao grid
             dataGrid1.ItemsSource = lista; 
        }

                A propriedade ItemsSource do DataGrid aceita uma lista do tipo Generic e como a propriedade AutoGenerateColumns está como true, ele vai criar uma coluna para cada atributo da classe definida na lista. Abaixo segue o exemplo da tela em execução:


                Se for preciso, podemos alterar o titulo da coluna (pois ele sempre deixa a coluna com o nome da propriedade da classe) ou mesmo ocultar a coluna. Criei um outro botão com o mesmo código e inserir essas duas linhas, uma para renomear a coluna Posicao para Posição e a outra para ocultar a coluna ASCII:

             // Altera o titulo da coluna 0
            dataGrid1.Columns[0].Header = "Posição";           

            // Deixa a coluna 2 invisivel
            dataGrid1.Columns[2].Visibility = Visibility.Hidden;

                Executando o botão, verifique como ficou a tela:


 Referências:

quarta-feira, 17 de agosto de 2011

Redirecionamento com Javascript


                Quando trabalhamos com scripts do lado do servidor (como ASP, JSP e PHP) é muito fácil fazer o redirecionamento, mas quando temos apenas HTML podemos utilizar o Javascript para fazer o redirecionamento, abaixo segue o exemplo:
<html>
    <head>
        <title>Teste de Redirecionamento</title>
    </head>
    <body onload='javascript:window.location="http://www.facebook.com/pages/Tudo-que-%C3%A9-interessante/153714048015357"'>
    </body>
</html>
                Faço uso do evento onload dentro da tag BODY (este evento ocorre antes de carregar a pagina), dentro do evento eu desvio para o endereço que eu quero com a função window.location.

sexta-feira, 17 de junho de 2011

Combo Box no WPF – Propriedades DisplayMemberPath e SelectedValuePath

                Muitas vezes queremos fazer um combo box onde mostraremos para o usuário um valor, mas internamente queremos utilizar outro. O combo box do WPF oferece uma forma muito fácil de fazer isso usando duas propriedades DisplayMemberPath e o SelectedValuePath.
                Abaixo segue o trecho do XAML do combo box, este combo box vai retornar o nome de alguns fabricantes:

<combobox displaymemberpath="ds_Fabricante" height="24" isenabled="True" itemssource="{Binding}" margin="92,0,66,200" name="cbFabricante" selectedvaluepath="cd_Id" selectionchanged="cbFabricante_SelectionChanged_1" verticalalignment="Bottom">
</combobox>
                Destaco as propriedades ItemsSource, onde coloquei o valor {Binding}, isso para que eu possa colocar dentro do código a chamada para a procedure que vai carregar este combo box, na propriedade DisplayMemberPath eu coloco o nome do campo que eu quero que apareça para o usuário(no caso o nome do fabricante do equipamento – ds_Fabricante) e na propriedade SelectedValuePath eu coloco o nome do campo que eu quero utilizar dentro do meu programa(cd_Id é o código do fabricante na tabela).
                Agora segue o código que coloquei para alimentar o combo box:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
  using (SqlConnection conexao = new SqlConnection(@"String de Conexão com o Banco de dados"))
  {
    DataSet ds = new DataSet();
    SqlCommand cmd = new SqlCommand("exec pro_getFabricante", conexao);
    SqlDataAdapter sqlDA = new SqlDataAdapter(cmd);
    sqlDA.Fill(ds);
    cbFabricante.DataContext = ds.Tables[0].DefaultView;
    }
  }

                Está procedure está sendo executada no evento Loaded do formulário, no SqlCommand repare que eu executo uma procedure que está no banco de dados, está procedure pode ser substituída por um select e depois, na ultima linha, preencho o DataContext do combo box com o retorno da procedure. Segue a imagem de como fica o combo box:



                Para pegar o valor selecionado no combo box segue o código que foi configurado no evento SelectionChanged (este evento ocorre sempre que o valor do combobox for alterado)  e a imagem do alerta exibido:
private void cbFabricante_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
{
  MessageBox.Show("Código selecionado: " + cbFabricante.SelectedValue); 
}


Referencias:
Documentação da Microsoft (ComboClass)
Stackoverflow -Binding WPF ComboBox to a Custom List
C# Corner - WPF ComboBox
Macoratti - WPF - Preenchendo uma Combobox

sexta-feira, 18 de março de 2011

Usando as API's do Android para Pegar a Latitude e Longitude

        Para acessar o GPS nas API’s do Android precisamos utilizar duas classes :
                    LocationManager;
                    Location.
        Segue abaixo um exemplo de uso das classes:
LocationManager lm = (LocationManager)getSystemService(Context.LOCATION_SERVICE);
Location location = lm.getLastKnownLocation(LocationManager.GPS_PROVIDER);
if (location != null) {
   double lat = location.getLatitude();
   double lon = location.getLongitude();
}
else 
    Toast.makeText(MainActivity.this, "Sem Latitude e longitude !", Toast.LENGTH_SHORT).show();

        A latitude e longitude retornada pelos métodos getLongitude() e getLatitude() estão em graus decimais, este objeto (location) tem varios métodos para trazer dados do GPS, como getSpeed() para trazer a velocidade.
        Insira no arquivo de configuração do seu aplicativo(AndroidManifest.xml) a autorização para acessar o GPS com a seguinte linha:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION">
</uses-permission>

Referências:
Documentação da classe Location
Documentação da classe LocationManager
Exemplo de uso dessas classes

sexta-feira, 4 de março de 2011

Mensagem de Alerta no Android

         É comum nas API’s de desenvolvimento uma forma de dar alertas para o usuário, com a API de desenvolvimento do Android não é diferente, foi criado a classe Toast  (a tradução seria brinde).
         Ela possui um método estático chamado makeTest onde definimos a mensagem, o contexto onde ela vai aparecer (normalmente a janela que o usuário está) e o tempo que a mensagem vai ficar na tela. Segue a definição da função :
public static Toast makeText (Context context, CharSequence text, int duration)
 

         Para definir o tempo de exibição da janela na tela, a classe Toast tem duas constantes :
   
                 Toast.LENGTH_LONG – Tempo longo de exibição;
                 Toast. LENGTH_SHORT – Tempo curto de exibição.

         Após definir a mensagem é só chamar o método show(), segue a definição :
public void show ()

        Segue um exemplo para chamar a função e a tela exibida :

Toast.makeText(MainActivity.this, "É obrigatório o preenchimento da UF !", Toast.LENGTH_LONG).show();
 






Referência:
Documentação oficial da classe Toast
Tutorial para iniciar o desenvolvimento na plataforma Android