Porubov.home

Как заставить silverlight-плагин говорить по-русски? Можно конечно самому перевести незамысловатые фразы из silverlight.js, но за нас уже постарались добрые разработчики из Microsoft. Для начала необходима последняя версия SDK. Идем на официальный сайт и заливаем - Silverlight 1.0 SDK. После установки ищем %Папка с SL SDK%\Tools\Silverlight.js\localized - там находятся несколько локализованных файлов с именами Silverlight.язык.js. Находим наш великий и могучий, копируем в папку с проектом, удаляем или переименовываем прежний Silverlight.js, и даем свежескопированному файлу стандартное имя (Silverlight.js, т.е. без обозначения языка). Вот и все! Конечно можно не переименовывать ничего, а просто указать в исходнике вашей (X)HTML-страницы путь к локализованному JavaScript файлу, но тут, как говориться, дело вкуса.

Один и тот же ресурс может понадобиться в одном приложении несколько раз: при создании навигации по приложению, для отображения в различных участках в рамках одного проекта, для придания целостности (например, используя один и тот же файл шрифта), да и ещё много для чего. Используя silverlight объект 'downloader', можно заставить ваше приложение брать уже скачанные файлы, но необходимые снова, из кэша браузера. Это экономит трафик пользователей и снижает нагрузку на сервер. Рассмотрим небольшой пример. Добавим к стандартному JS файлу, создаваемому автоматически, глобальную переменную cached_downloader (это важно, так как при использовании локальной переменой, cached_downloader уничтожается после выполнения функции и кеширования не происходит) и назначим его инициализацию по событию onLoad плагина. В данном случае объектом для скачивания является файл шрифта, который затем назначается TextBox'у в функции handleDLComplete.

var cached_downloader; 
var slControl; 
function createSilverlight() 
{  

    Silverlight.createObjectEx({ 
        source: "Page.xaml", 
        parentElement: document.getElementById("SilverlightControlHost"), 
        id: "SilverlightControl", 
        properties: { 
            width: "100%", 
            height: "100%", 
            version: "1.0"
        }, 
        events: { 
            onLoad: handleLoad 
        } 
    }); 
}  

if (!window.Silverlight) 
    window.Silverlight = {};  

Silverlight.createDelegate = function(instance, method) { 
    return function() { 
        return method.apply(instance, arguments); 
    } 
} 
function handleLoad(control, userContext, sender) 
    { 
        slControl=control; 
        cached_downloader = control.createObject("downloader"); 
        cached_downloader.addEventListener("completed", 
   "handleDLComplete"); 
        cached_downloader.open("GET","myfont.ttf"); 
        cached_downloader.send();  

    }  

function handleDLComplete(sender,args) 
{ 
    var tb = sender.findName("txtChinese"); 
    tb.setFontSource(cached_downloader); 
    tb.fontFamily="myfont family"; 
}

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

Кисти применяются для заливки фона элементов пользовательского интерфейса. Так, например, для создания градиента необходимо использовать кисть GradientBrush, которая имеет 2 разновидности. Но обо всем по порядку.
На данный момент существует 5 разновидностей кисти:

1. SolidColorBrush
   
2. LinearGradientBrush
   
3. RadialGradientBrush
   
4. ImageBrush
   
5. VideoBrush

Для экспериментов создадим новый silverlight проект. О создании проекта читайте «Создание silverlight приложения в Visual Studio»

SolidColorBrush

Самый простой вид кисти, используется по умолчанию при установке свойства Fill или Stroke объекта. Для применения необходимо внутри конструкции <Элемент.Fill> вставить <SolidColorBrush/> тег. Для задания цвета используется атрибут Color. О возможных значениях следует поговорить подробней.

Цвет можно задать тремя разными способами:

• Имя цвета. Например, “Black”, “Red”, “Blue” и т.д.
• 6-символьная нотация. Используется шестнадцатеричное представление цвета. Например, #FF0000 - красный, #D378AE, #235467 и т.д.
• 8-символьная нотация. То же самое, что и 6-символьная, только добавлены 2 символа, стоящие перед значениями цвета, задающие уровень прозрачности элемента. Например, #7FFF0000 - полупрозрачный, красный.

Ниже приведён пример применения кисти.

   1:  <Canvas

   2:      xmlns="http://schemas.microsoft.com/client/2007"

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      Width="640" Height="480"

   5:      Background="White"

   6:      x:Name="Page"

   7:      >

   8:    <Rectangle Width="439" 

   9:               Height="198" 

  10:               Stroke="#FF000000" 

  11:               Canvas.Left="46" 

  12:               Canvas.Top="102">

  13:      <Rectangle.Fill>

  14:        <SolidColorBrush Color="Blue"/>

  15:      </Rectangle.Fill>

  16:    </Rectangle>

  17:  </Canvas>

LinearGradientBrush

Как следует из названия это линейный градиент. Суть заключается в указании двух точек (начала и конца градиента) прямой, по которой расположиться градиент, и двух цветов, между которыми будет отображаться плавный переход – это и есть градиент. Взгляните на следующий пример:

   1:  <Canvas

   2:      xmlns="http://schemas.microsoft.com/client/2007"

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      Width="640" Height="480"

   5:      Background="White"

   6:      x:Name="Page"

   7:      >

   8:    <Rectangle Width="439" 

   9:               Height="198" 

  10:               Stroke="#FF000000" 

  11:               Canvas.Left="46" 

  12:               Canvas.Top="102">

  13:      <Rectangle.Fill>

  14:        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

  15:          <GradientStop Color="#FF000000" Offset="0"/>

  16:          <GradientStop Color="#FFFFFFFF" Offset="1"/>

  17:        </LinearGradientBrush>

  18:      </Rectangle.Fill>

  19:    </Rectangle>

  20:  </Canvas>

Здесь мы задали начальные точки градиента с помощью StartPoint и EndPoint и присвоили им значения «0,0.5» и «1,0.5» соответственно. Что это значит? Первая координата – X, вторая – Y, так вот если принять ширину и высоту фигуры за 1 (X и Y), а именно так задаются координаты линейного градиента в silverlight, то становиться понятно, что в нашем случае прямая градиента расстилается от середины левой грани фигуры (X=0 – левая грань, Y=0.5 – её середина) до середины правой.
Далее мы объявили <GradientStop/> - это точка останова, то есть здесь мы задаем некоторый цвет, который будет плавно переходить в соседние на прямой, если таковые имеются. Имеет атрибуты Color и Offset. С первым все понятно, а вот второй – это координата точки на градиентной прямой, длина которой равна 1.

С простым градиентом все понятно, но что делать, если нам нужно больше цветов? Для этого и существуют точки остановки на прямой, в которых можно задать дополнительный цвет. Просто добавим ещё один или несколько <GradientStop/>:

   1:  <Canvas

   2:      xmlns="http://schemas.microsoft.com/client/2007"

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      Width="640" Height="480"

   5:      Background="White"

   6:      x:Name="Page"

   7:      >

   8:    <Rectangle Width="439" 

   9:               Height="198" 

  10:               Stroke="#FF000000" 

  11:               Canvas.Left="46" 

  12:               Canvas.Top="102">

  13:      <Rectangle.Fill>

  14:        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

  15:          <GradientStop Color="#FF000000" Offset="0"/>

  16:          <GradientStop Color="#FFFFFFFF" Offset="1"/>

  17:          <GradientStop Color="#FF1E26DC" Offset="0.745"/>

  18:          <GradientStop Color="#FFEC1F1F" Offset="0.409"/>

  19:          <GradientStop Color="#FF7CFF00" Offset="0.096"/>

  20:        </LinearGradientBrush>

  21:      </Rectangle.Fill>

  22:    </Rectangle>

  23:  </Canvas>

Теперь мы имеем 5 ключевых цветов, и между каждыми соседними наблюдается плавный переход. Естественно, можно сделать и резкий, если расположить две точки в непосредственной близости друг от друга.

RadialGradientBrush

Начнём сразу с примера:

   1:  <Canvas

   2:      xmlns="http://schemas.microsoft.com/client/2007"

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      Width="640" Height="480"

   5:      Background="White"

   6:      x:Name="Page"

   7:      >

   8:    <Rectangle Width="439" 

   9:               Height="198" 

  10:               Stroke="#FF000000" 

  11:               Canvas.Left="46" 

  12:               Canvas.Top="102">

  13:      <Rectangle.Fill>

  14:        <RadialGradientBrush Center="0,0.5">

  15:          <GradientStop Color="#FF000000" Offset="0"/>

  16:          <GradientStop Color="#FFFFFFFF" Offset="1"/>

  17:          <GradientStop Color="#FFF02121" Offset="0.216"/>

  18:        </RadialGradientBrush>

  19:      </Rectangle.Fill>

  20:    </Rectangle>

  21:  </Canvas>

Здесь с помощью <RadialGradientBrush/> мы объявили круговой градиент. Суть заключается в том, что вокруг некоторой точки образуется рассеивающийся во все стороны круговой градиент. Для большего понимания посмотрите на результат:

С помощью Center можно задать координаты центра градиента.

ImageBrush

С помощью данной кисти можно задать изображение как заливку элемента. Объявляется с атрибутом ImageSource, который указывает на адрес картинки. Сама картинка может располагаться на этом же сервере или загружаться с другого, во втором случае нужно указать URL-адрес картинки.

   1:  <Canvas

   2:      xmlns="http://schemas.microsoft.com/client/2007"

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      Width="640" Height="480"

   5:      Background="White"

   6:      x:Name="Page"

   7:      >

   8:    <Rectangle Width="439" 

   9:               Height="198" 

  10:               Stroke="#FF000000" 

  11:               Canvas.Left="46" 

  12:               Canvas.Top="102">

  13:      <Rectangle.Fill>

  14:        <ImageBrush ImageSource="image.jpg"/>

  15:      </Rectangle.Fill>

  16:    </Rectangle>

  17:  </Canvas>

VideoBrush

То же самое, что и ImageBrush, только в качестве материала заливки служит видео и атрибут для указания файла называется SourceName. Формат видео файла – WMV, стандартный для windows. Если ваше видео другого формата, то его нужно конвертировать, например, с помощью Windows Movie Maker, который устанавливается по умолчанию в Windows Vista/XP.

   1:  <Canvas

   2:      xmlns="http://schemas.microsoft.com/client/2007"

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      Width="640" Height="480"

   5:      Background="White"

   6:      x:Name="Page"

   7:      >

   8:    <Rectangle Width="439" 

   9:               Height="198" 

  10:               Stroke="#FF000000" 

  11:               Canvas.Left="46" 

  12:               Canvas.Top="102">

  13:      <Rectangle.Fill>

  14:        <VideoBrush SourceName="video.wmv"/>

  15:      </Rectangle.Fill>

  16:    </Rectangle>

  17:  </Canvas>

По неясным мне причинам видео проигрываться отказалось, но я думаю, что через некоторое время причина найдется.

Вступление

Microsoft Visual Studio 2008 Beta 2 включает шаблоны проектов для создания silverlight приложений. На данный момент существуют шаблоны для C# (Си шарп) и Visual Basic. Для начала работы вам необходимо иметь:

• Microsoft Silverlight 1.1 Alpha.
• Microsoft Visual Studio 2008 Beta 2.
• Microsoft Silverlight Tools Alpha for Visual Studio 2008 Beta 2.

Все это можно скачать с официального сайта silverlight – http://microsoft.com/silverlight.

Что включает в себя silverlight проект?

Корневой HTML файл: При создании проекта он обычно назван  Default.html. Этот файл является обычной html-страничкой, поэтому может включать в себя любое типичное содержимое. При загрузке в браузер создаётся silverlight-объект благодаря тому, что в default.html подключаются 2 JavaScript файла, которые отвечают за это.

• Default_html.js: Также может называться CreateSilverlight.js, Default.html.js, да и вообще в разных версиях Visual Studio называется по-разному. Но главное не название – в нем расположены две JavaScript функции, которые загружают код приложения и инициализируют silverlight-плагин в браузере. В нем задаются размеры, занимаемые плагином на странице, путь к xaml-файлу, и несколько других параметров.
• Silverlight.js: Вспомогательный файл, в котором содержаться функции инициализации плагина, не меняющиеся от проекта к проекту. Также он проверяет наличие самого плагина, и, в отсутствии такового, отображает предложение скачать и установить.

• Page.xaml: Xml-подобный файл, описывающий пользовательский интерфейс. Может включать в себя описание трансформаций, анимации, геометрических фигур, и любых других элементов интерфейса.

Если ваше приложение основано на Silverlight версии 1.1, то проект также включает в себя:

• Page.xaml.cs(или .vb, в зависимости от языка):  Этот файл компилируется в .dll файл, который загружается вместе с приложением и включает в себя управляющий код. В этом файле должен быть объявлен класс, на который ссылается значение атрибута x:Class в корневом xaml файле.

Создание Siverlight проекта в Visual Studio

Для создания нового проекта нужно:

• После запуска Visual Studio 2008 в меню File выбрать New Project/
• В диалоговом окне выбрать Visual C# или Visual Basic для C# и VB соответственно. В списке шаблонов выбрать Silverlight Project.
• Ввести имя проекта
• Изменить, если требуется, значения в файлах Default.html.js, переименовать приложение, назначить пути к своим компонентам.

После этого ваш проект включает все необходимое для запуска приложения и начала работы.

Добавление новых страниц

Для создания новой xaml-страницы нужно из контекстного меню проекта выбрать Add -> New Item ->Silverlight Page. Создастся страница, которая будет иметь свой имя_страницы.xaml.cs(.vb) файл, который также включает объявление класса.

Создание нового проекта из существующего

Вы можете просто скопировать необходимые файлы из существующего проекта для создания нового. Все: HTML, JavaScript и XAML файлы доступны в исходном виде, исключение составляет .dll файл, который распространяется в скомпилированном виде. То есть вы не получите исходного файла с кодом, но можно скопировать содержание нового .cs(.vb) файла, который создаётся при создании проекта. Конечно же это не позволит восстановить исходный код копируемого приложения, но разметка в xaml-файле и JavaScript код заново писать не придётся.

Авто-дополнение

Одно замечательное преимущество использования Visual Studio для создания Silverlight приложений - это то, что все файлы проекта «работают вместе», то есть генерируемый код предоставляет ссылку на каждый элемент в xaml-файле, у которого объявлен атрибут x:Name. Эти ссылки очень полезны, так как когда выпишете управляемый код, который, например, изменяет свойства объекта или вызывает методы, то появляется возможность авто-дополнения, варианты которого берутся при обходе (парсинге) XAML-файла.

В этой статье рассказывается об использовании трансформации применительно к элементам интерфейса в Silverlight. Все описываемое действительно как в Silverlight первой версии (1.0), так и для версии 1.1 (на момент написания ещё Alpha). Всего существует 5 видов трансформации:

1. TranslateTransform - изменяет позицию элемента.
2. ScaleTransform - масштабирует элемент.
3. SkewTransform - поворачивает элемент на некоторый угол относительно его осей.
4. RotateTransform - поворачивает элемент вокруг центральной точки.
5. MatrixTransform - перемножает все точки элемента по заданной матрице.

Далее рассмотрим все пять подробнее, но перед описанием трансформаций необходимо проделать несколько шагов. Нужно создать новый проект, который будем использовать как шаблон для применения всех видов трансформации. О создании silverlight проектов читайте в статье "Создание Silverlight проектов в Visual Studio".

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

   1:  <Canvas

   2:    xmlns="http://schemas.microsoft.com/client/2007"

   3:    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:    Width="640" Height="480"

   5:    Background="White"

   6:    x:Name="Page"

   7:    >

   8:    <TextBlock x:Name="myText"

   9:               Canvas.Left="30"

  10:               Canvas.Top="30"

  11:               FontSize="50"

  12:               Text="Transform test"/>

  13:  </Canvas>

После запуска при установленном silverlight плагине отобразится следующее:

Для добавления трансформации необходимо объявить <Элемент.RenderTransorm> внутри соответствующего элемента. Данная конструкция объявляет начало трансформации.

TranslateTransformation

Данный вид трансформации объявляется при помощи <TranslateTransform /> тега. Необходимы атрибуты X и Y, которые принимают числовые значения и представляют собой координаты x и y элемента после трансформации. Вот xaml код:

   1:  <Canvas

   2:    xmlns="http://schemas.microsoft.com/client/2007"

   3:    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:    Width="640" Height="480"

   5:    Background="White"

   6:    x:Name="Page"

   7:    >

   8:    <TextBlock x:Name="myText"

   9:               Canvas.Left="30"

  10:               Canvas.Top="30"

  11:               FontSize="50"

  12:               Text="Transform test">

  13:      <TextBlock.RenderTransform>

  14:        <TranslateTransform X="30" Y="30"/>

  15:      </TextBlock.RenderTransform>

  16:    </TextBlock>

  17:  </Canvas>

Пожалуй, это самый простой вид трансформации.

ScaleTranform

Для применения нужно объявить <ScaleTranform> с атрибутами ScaleX и ScaleY, которые задают коэффициент умножения каждой оси элемента. Также опционально можно задать координаты центра трансформации с помощью присвоения значений CenterX и CenterY параметрам. Например, я увеличил текстовый блок в 2 раза по оси x, и уменьшил по y, используя значения "2" и "0.5" соответственно.

   1:  <Canvas

   2:    xmlns="http://schemas.microsoft.com/client/2007"

   3:    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:    Width="640" Height="480"

   5:    Background="White"

   6:    x:Name="Page"

   7:    >

   8:    <TextBlock x:Name="myText"

   9:               Canvas.Left="30"

  10:               Canvas.Top="30"

  11:               FontSize="50"

  12:               Text="Transform test">

  13:      <TextBlock.RenderTransform>

  14:        <ScaleTransform ScaleX="2"

  15:                        ScaleY="0.5"

  16:                        CenterX="30"

  17:                        CenterY="45"/>

  18:      </TextBlock.RenderTransform>

  19:    </TextBlock>

  20:  </Canvas>

SkewTransform

Используется при помощи <SkewTransform> тега с атрибутами AngleX и AngleY, которые задают угол поворота по осям. Как и в предыдущем случае можно задать координаты центра.

   1:  <Canvas

   2:    xmlns="http://schemas.microsoft.com/client/2007"

   3:    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:    Width="640" Height="480"

   5:    Background="White"

   6:    x:Name="Page"

   7:    >

   8:    <TextBlock x:Name="myText"

   9:               Canvas.Left="30"

  10:               Canvas.Top="30"

  11:               FontSize="50"

  12:               Text="Transform test">

  13:      <TextBlock.RenderTransform>

  14:        <SkewTransform CenterX="30"

  15:                       CenterY="45"

  16:                       AngleX="70"

  17:                       AngleY="-28"/>

  18:      </TextBlock.RenderTransform>

  19:    </TextBlock>

  20:  </Canvas>

RotateTransform

Данный вид трансформации поворачивает объект вокруг верхней левой точки (можно задать при помощи CenterX, CenterY). Для применения нужно объявить <RotateTransform> с всего одним атрибутом - Angle, который, как видно из названия, отвечает за угол поворота.

   1:  <Canvas

   2:    xmlns="http://schemas.microsoft.com/client/2007"

   3:    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:    Width="640" Height="480"

   5:    Background="White"

   6:    x:Name="Page"

   7:    >

   8:    <TextBlock x:Name="myText"

   9:               Canvas.Left="30"

  10:               Canvas.Top="30"

  11:               FontSize="50"

  12:               Text="Transform test">

  13:      <TextBlock.RenderTransform>

  14:        <RotateTransform Angle="30"/>

  15:      </TextBlock.RenderTransform>

  16:    </TextBlock>

  17:  </Canvas>

MatrixTransform

Пожалуй, самый сложный и интересный вид трансформации. С помощью него над элементом можно сразу провести 3 вида трансформации: перемещение, масштабирование и поворот. Каждая координата точки элемента умножается на некоторое значение, после чего вычисляется её новое положение. Для вычисления используется следующая формула:

Xnew = X*M12 + Y*M21 + OffsetX
Ynew = X*M12 + Y*M22 + OffsetY

В silverlight матрице значения задаются в таком порядке:

<MatrixTransform Matrix="M11, M12, M21, M22, OffsetX, OffsetY"/> 

Для внесения ясности взгляните на примеры.

1)Масштабирует текст по оси X в 2 раза:

   1:  <Canvas

   2:    xmlns="http://schemas.microsoft.com/client/2007"

   3:    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:    Width="640" Height="480"

   5:    Background="White"

   6:    x:Name="Page"

   7:    >

   8:    <TextBlock x:Name="myText"

   9:               Canvas.Left="30"

  10:               Canvas.Top="30"

  11:               FontSize="50"

  12:               Text="Transform test">

  13:      <TextBlock.RenderTransform>

  14:        <MatrixTransform Matrix="2,0,0,1,0,0" />

  15:      </TextBlock.RenderTransform>

  16:    </TextBlock>

  17:  </Canvas>

2)Перемещает элемент на 100 пикселей по осям X и Y:

   1:  <Canvas

   2:    xmlns="http://schemas.microsoft.com/client/2007"

   3:    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:    Width="640" Height="480"

   5:    Background="White"

   6:    x:Name="Page"

   7:    >

   8:    <TextBlock x:Name="myText"

   9:               Canvas.Left="30"

  10:               Canvas.Top="30"

  11:               FontSize="50"

  12:               Text="Transform test">

  13:      <TextBlock.RenderTransform>

  14:        <MatrixTransform Matrix="1,0,0,1,100,100" />

  15:      </TextBlock.RenderTransform>

  16:    </TextBlock>

  17:  </Canvas>

TransformGroup

Можно также группировать несколько трансформаций. Для этого используется <TransformGroup> тег, внутри которого объявляется несколько видов трансформации.

   1:  <Canvas

   2:    xmlns="http://schemas.microsoft.com/client/2007"

   3:    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:    Width="640" Height="480"

   5:    Background="White"

   6:    x:Name="Page"

   7:    >

   8:    <TextBlock x:Name="myText"

   9:               Canvas.Left="30"

  10:               Canvas.Top="30"

  11:               FontSize="50"

  12:               Text="Transform test">

  13:      <TextBlock.RenderTransform>

  14:        <TransformGroup>

  15:          <RotateTransform Angle="45"/>

  16:          <TranslateTransform X="200" Y="300"/>

  17:        </TransformGroup>

  18:      </TextBlock.RenderTransform>

  19:    </TextBlock>

  20:  </Canvas>

Стоит также отметить, что трансформация может применяться не только к основным элементам пользовательского интерфейса, но и к геометрическим фигурам, кистям.

Как красиво оформить исходный код на веб-странице? Я перепробовал массу способов, но все или давали результат, скажем так, "не очень", или же были слишком долгими. После гуглопоиска я нашел 2 приемлимых решения:

 1)GsvHtmlCode - это программка, написанная на C# призванная облегчить жизнь таким как я ). Очень удобно сделана: минимальный интерфейс, после форматирования автоматически копирует результат в буфер. То есть, для вставки кода в вашу страницу нужно скопировать необходимый кусок кода, нажать одну кнопку и все! Вот скриншот:

2)С# Code Format - веб-приложение, отлично справляющееся с поставленной задачей. Хотя в названии указано C#, но на самом деле оно справляется с VB, HTML, XML, ASPX, T-SQL, MSH.