День восемнадцатый. Элемент WebBrowser

Вступление

Продолжаем знакомиться с разными элементами, которые используются в Windows Phone 7. Сегодня узнаем побольше о важном элементе WebBrowser.

Знакомство с WebBrowser

Само название элемента WebBrowser говорит о том, что вы можете с его помощью зайти на определенную страницу. Можете считать данный элемент урезанным браузером, у которого нет адресной строки, избранного, вкладок и т.д. При этом у него работают стандартные жесты для зума или прокрутки.

Добавим WebBrowser на страницу простым перетаскиванием из панели инструментов. В XAML появится код:


<phone:WebBrowser HorizontalAlignment="Left" 
    Margin="350,303,0,0" 
	Name="webBrowser1" 
	VerticalAlignment="Top" />

При этом будет подключено пространство имён xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone".

Для того чтобы в браузере отобразить страницу, достаточно вызвать один метод:

webBrowser1.Navigate(new Uri("http://developer.alexanderklimov.ru/windowsphone/wp.php"));

Главная особенность элемента WebBrowser заключается в том, что вы можете загрузить часть информации локально, и часть с интернета. Таким образом вы можете внедрить HTML-страницы в приложение и загружать их локально на телефоне без необходимости подключения к интернету.

Загрузка локальных HTML-страниц в WebBrowser

Подготовим необходимые HTML-файлы для проекта. Для нашего примера достаточно двух файлов, но вы можете использовать и больше.

Добавим в приложение две кнопки для загрузки каждого файла. Так как мы будем работать с файлом, нам необходимо добавить к проекту пространство имен System.IO:


using System.IO;

Также мы добавим пространство имен Microsoft.Xna.Framework:


using Microsoft.Xna.Framework;

Возможно вас удивит, что мы хотим использовать XNA в Silverlight-проекте. Чуть позже вы поймете, почему нам понадобился XNA. А сейчас просто поверьте на слово. В обработчике события для кнопки пишем две строчки кода. В первой строчке загружаем содержимое HTML в StreamReader, а во второй - загружаем содержимое HTML-файла в WebBrowser, используя метод NavigateToString():


StreamReader reader = new StreamReader(TitleContainer.OpenStream("html/wp7wiki.html"));
Browser.NavigateToString(reader.ReadToEnd());

Кроме загрузки уже существующей страницы, мы можем генерировать HTML прямо в коде приложения:


string html = "<h1 st yle=\"color:red;\">Мяу!</h1>" +
"<a href=\"http://developer.alexanderklimov.ru\">Освой программирование играючи</a>";
webbrowser1.NavigateToString(ConvertExtendedAscii(html));

Функция ConvertExtendedAscii используется для устранения возможных проблем с кодировкой.


public static string ConvertExtendedAscii(string html)
{
    var retVal = "";
    var s = html.ToCharArray();

    foreach (char c in s)
    {
        if (Convert.ToInt32(c) > 127)
            retVal += "&#" + Convert.ToInt32(c) + ";";
        else
            retVal += c;
    }

    return retVal;
}

Включаем выполнение сценариев JavaScript

По умолчанию выполнение сценариев JavaScript в WebBrowser отключено. Если вы хотите, чтобы сценарии в ваших веб-документах выполнялись, вам необходимо установить соответствующее разрешение. Делается это очень просто при помощи свойства IsScriptEnabled:


[XAML]
<phone:WebBrowser x:Name="Browser" IsScriptEnabled="True" />


[C#]
Browser.IsScriptEnabled = true;

Взаимодействие между приложением и сценарием

При взаимодействии со страницей, загруженной в WebBrowser мы можем вызывать из C# функции JavaScript, а из JavaScript уведомлять Silverlight приложение. Вызвать JavaScript-функцию из C# можно при помощи метода InvokeScript, передавая имя метода сценария. В данном примере мы вызываем функцию «functionName» с параметром «parametr1» и получаем возвращаемое значение:


string returnValue = (string)wbMain.InvokeScript("functionName", "parametr1");

Для оповещения приложения из сценария JavaScript надо подписаться на событие ScriptNotify и в обработчике события получить параметр, переданный из сценария. NotifyEventArgs.Value будет содержать нужное значение:


void Browser_ScriptNotify(object sender, NotifyEventArgs e)
{
	Browser.Navigate(new Uri(e.Value, UriKind.Absolute));
}

Далее вызываем событие:


window.external.Notify("http://developer.alexanderklimov.ru");

Используем индикатор прогресса

Так как загрузка содержимоего из сети может занимать некоторое время, нужно показать пользователю, что программа не зависла, а продолжает работать. Например, можно вывести на экран индикатор прогресса (ProgressBar). Вам нужно установить значение IsIndeterminate в true и показывать и скрывать индикатор в нужное время. Ниже представлен кода на XAML и C#:


<ProgressBar Foreground="Orange" x:Name="ProgBar" 
Visibility="Collapsed" IsIndeterminate="True" Height="4" 
HorizontalAlignment="Left" Margin="10,66,0,0" 
VerticalAlignment="Top" Width="460" />


void Browser_Navigating(object sender, NavigatingEventArgs e)
{
    ProgBar.Visibility = Visibility.Visible;
}
 
void Browser_Navigated(object sender, NavigationEventArgs e)
{
    ProgBar.Visibility = Visibility.Collapsed;
}

Соответственно, когда страница загружается, ProgressBar будет виден, а после загрузки страницы он будет скрыт.

Эффекты в WebBrowser

Важно отметить, что элемент управления WebBrowser в Windows Phone 7, в отличие от своего аналога в десктопном Silverlight не нуждается в HtmlBrush, так как большинство графических преобразований можно сделать над самим браузером. Например, повернём WebBrowser на 45 градусов по оси Y:

 
<phone:WebBrowser 
    HorizontalAlignment="Left" 
    Margin="12,23,0,0" 
    Name="webBrowser1" 
    VerticalAlignment="Top" Width="438" Height="348">
<b>
    <phone:WebBrowser.Projection>
        <PlaneProjection RotationY="-45"/>
    </phone:WebBrowser.Projection></b>
</phone:WebBrowser>

Вот как это будет выглядеть:

При этом элемент WebBrowser полностью интерактивен и продолжает работать как обычно. Во внебраузерном Silverlight 4 приложении мы такое бы сделать не смогли.

Заключение

Сегодня вы познакомились с элементом WebBrowser для навигации по html-страницам. Для лучшего понимания материала, рекомендую скачать исходник и изучить его.

Реклама