¡Adquiere el Máster en Xamarin Forms!
Antes de iniciar, te invito a visitar la página de la Membresía de mi academia, donde podrás encontrar:
– Cursos y talleres de Xamarin
– Cursos y talleres en C#
– Cursos y talleres de Blazor
– Cursos y talleres de ASP.NET
– Cursos y talleres en muchas otras tecnologías
¡Todo al precio más bajo posible por tiempo limitado!
Si has trabajado anteriormente con Xamarin, tal vez hayas utilizado el control WebView. Dicho control nos sirve para mostrar una página web dentro de nuestra aplicación, tal como el siguiente ejemplo:
Tal vez, una cosa que desconozcas es que se puede invocar una función JavaScript, ¡Desde tu código C#!
Para esto, lo que haremos será crear un archivo tipo .html dentro de nuestro proyecto portable, en una solución tipo Xamarin.Forms:
Dicho archivo, debe tener en sus propiedades, asignada la opción “Embedded Resource” en Build Action:
Dicho archivo, contiene la siguiente estructura a modo de ejemplo:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Cálculo de Factoriales</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<h1>Cálculo de Factoriales</h1>
<div id='result'/>
<script type="text/javascript">
function printFactorial(number)
{
var result = 1;
var factorialNumber = parseInt(number);
$('#result').empty();
for (var i = 1; i <= factorialNumber; i++)
{
result *= i;
}
$('#result').append('Resultado: ' + result + '</br>');
}
</script>
</body>
</html>Procederemos también, a crear la definición de nuestro archivo .xaml, el cual contendrá una caja de texto, un botón para invocar el método Javascript, y un WebView donde desplegaremos la información deseada:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:JavaScriptAndCSharp"
x:Class="JavaScriptAndCSharp.MainPage">
<StackLayout>
<Label Text="Factorial" FontSize="Medium" HorizontalOptions="Center" />
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="Factorial Number: " VerticalOptions="Center" />
<Entry x:Name="txtNumber" Text="5" WidthRequest="40" />
</StackLayout>
<Button x:Name="btnCallJS" Text="Call JavaScript" Clicked="OnbtnCallJSClicked"/>
<WebView x:Name="webView" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>Ahora viene la parte interesante, en primer lugar, debemos de cargar la página HTML que deseemos, en nuestro caso, la página se llama test.html, por lo que crearemos una función dentro de nuestro archivo MainPage.xaml.cs, que lleve a cabo dicha carga, de la siguiente manera:
HtmlWebViewSource LoadHTMLFileFromResource()
{
var source = new HtmlWebViewSource();
// Carga el archivo HTML embebido como un recurso en el PCL
var assembly = typeof(MainPage).GetTypeInfo().Assembly;
var stream = assembly.GetManifestResourceStream("JavaScriptAndCSharp.test.html");
using (var reader = new StreamReader(stream))
{
source.Html = reader.ReadToEnd();
}
return source;
}El código anterior, lo que hace es obtener el archivo HTML, y regresarlo como un órigen html para nuestro control WebView, debemos asignar dicha lectura en el constructor de nuestra página:
public MainPage()
{
InitializeComponent();
webView.Source = LoadHTMLFileFromResource();
}Por último, codificaremos el manejador de eventos del botón definido en nuestro código XAML, llamado “btnCallJS, de la siguiente forma:
private void OnbtnCallJSClicked(object sender, EventArgs e)
{
if (string.IsNullOrWhiteSpace(txtNumber.Text))
{
return;
}
int number = int.Parse(txtNumber.Text);
webView.Eval(string.Format("printFactorial({0})", number));
}La forma de invocar las funciones dentro del archivo html, es a través de la función “Eval”, a la cual se le deben de pasar los parámetros obtenidos a través de la interfaz de usuario.
Con esto, tendrás una aplicación funcional que es capaz de invocar código Javascript:
Saludos.
Entrada basada en las recetas del sitio oficial de Xamarin.Forms.
Hola,
Interesante!. ¿Cómo puedo hacer eso mismo pero recuperando el retorno dej JS en una variable?. En el caso que no se necesite mostrar nada por pantalla, lo único que quiero es llamar a una función Js y parsear ese valor para utilizarlo en código c#?
Gracias
Lamentablemente no se puede hacer de forma nativa (sin tirar código), debido al comportamiento del WebView, más adelante haré un post respondiendo esta pregunta, ¿te parece?
¡Saludos!