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>
http://code.jquery.com/jquery-2.1.4.min.js
<h1>Cálculo de Factoriales</h1>
<div id='result'/>
function printFactorial(number)
{
var result = 1;
var factorialNumber = parseInt(number);
$('#result').empty();
for (var i = 1; i ');
}
</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.
Héctor Uriel Pérez Rojas Weblog 