logo
  • Home
  • Acerca
  • Autores
  • Faq
  • Rede
  Twitter   Feed-me! RSS!

Acessando funções Javascript com Silverlight

Colocado por Fabriccio Bernardes na(s) categoria(s): Ria’s Geral, Silverlight 3, Silverlight 4, Tutoriais em 09 10th, 2010 | Sem comentários

Saudações pessoal, segue um tutorial de como acessar uma função javascript através da sua aplicação Silverlight:

Para esse tutorial, eu utilizei o Visual Studio 2010 e o Silverlight 4, porém o processo é exatamente o mesmo para versões anteriores da tecnologia.

Vamos lá.

1. Crie um novo projeto no Visual Studio:

2. Selecione um projeto do tipo Silverlight Application:

3. Marque a opção Host the Silverlight application in a new Web site para que seja criada um novo projeto ASP.NET contendo a aplicação Silverlight automaticamente:

4. Agora, com nosso projeto criado, vamos criar a nossa função Javascript que será executada pelo Silverlight.
Ela ficará na página ASPX onde o Silverlight está contido, no meu caso, no web form chamado AcessandoJavascriptComSilverlightTestPage.aspx. Abra a página para edição:

?5. Com o código da página aberto, vamos inserir o seguinte trecho de código entre as tags <head> e </head> do web form:

<script type="text/javascript">
function Alerta() {
alert("Olá Mundo!");
}
</script>

Obs.: Esta pequena função javascript é responsável por exibir uma mensagem de alerta na tela do usuário.

Exemplo (AcessandoJavascriptComSilverlightTestPage.aspx):

6. Agora, acesse o código XAML da sua MainPage para criarmos o botão que acionará a chamada à função javascript.

7. Insira o seguinte trecho de código dentro do LayoutRoot do seu UserControl:

<Button x:Name="btnAlerta" Content="Alerta" Height="100" Width="100" Click="btnAlerta_Click" />

Exemplo (MainPage.xaml – Design):

Exemplo (MainPage.xaml - XAML):

8. Agora abra o code-behind da MainPage para inserirmos a chamada à função javascript.

10. Insira, na classe, o seguinte trecho de código:

private void btnAlerta_Click(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Invoke("Alerta");
}
Exemplo (MainPage.xaml.cs):

11. Agora execute a aplicação (tecla F5) e veja o resultado:

Obs.: Caso queira passar parâmetros para as funções javascript, você poderá utilizar o mesmo método, veja:

1. Função javascript parametrizada:

<script type="text/javascript">
function Alerta(mensagem) {
alert(mensagem);
}
</script>

Exemplo (AcessandoJavascriptComSilverlightTestPage.aspx):

2. Passando valores para funções javascript parametrizadas via code-behind:

private void btnAlerta_Click(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Invoke("Alerta", "Olá Mundo via parâmetro.");
}

Exemplo (MainPage.xaml.cs):

3. Executando a aplicação:

Espero que este tutorial tenha sido útil.
Qualquer dúvida, basta deixar um comentário.

Um forte abraço.
Fabriccio.



Veja o post original no blog do autor aqui!  

Fabriccio Bernardes

Escrito por Fabriccio Bernardes @ http://fabricciocb.wordpress.com
Saiba mais sobre o autor na sua pagina de perfil
Outros posts do autor:
» amCharts, componente para gráficos FREE para Silverlight e WPF
» Thumba: Editor de Imagens em Silverlight
» Acessando sua Webcam via Silverlight 4

Deixe um comentário



Spam Protection by WP-SpamFree

ACERCA

O que é o RedeRIA ?

O redeRIA não é nada mais que um agregador de feed's que disponibiliza o conteudo de varios blogs e autores ao redor do mundo RIA, actualmente agregamos mais de 2791 entradas vindas de 53 blogs especializados em ria’s, pelo que só fica a ganhar em assinar o feed ou seguir a comunidade no twitter.

Se acha que o seu blog ou um blog de um amigo é interessante e util para os leitores o redeRIA, faça a sua submissão aqui.

Feed: assine já
Twitter: siga-nos

GOOGLE

Votação


Deveria o RedeRia agregar conteúdo em inglês?
Ver Resultados

AUTORES


Eduardo KrausAlexandre TadashiBindableCognitiva SoluçõesDaniel LopesDaniel SchmitzDanielPedrinhaDClick TeamEbercomEdgard DavidsonElvis FernandesErko BrideeFabiel PrestesFábio Batista da SilvaFabio da SilvaFabriccio BernardesFelipe BorellaFlavia MoreiraGabriel VersalliniGabriela T. PerryIgor MusardoJanderson CardosoJoão AugustoJose Carlos FielKelps SousaLeonardo FrançaLucas MarçalLuis MessiasLuiz TarabalMario JuniorMário SantosMauro MartinsPablo SouzaPedro ClaudioreneRia BrazilriaPTRicardo CerqueiraRobson FernandesRodrigo Pereira FragaSaintBrSamuelFacchinelloSergio SouzaSilva DeveloperStefan HorochovecTech CaffeTecinforThiago BuenoVedVinícius SandimWillian ManoXAML Cast

PUBLICIDADE








Powered by Wordpress & msdevstudio.com