Статьи

Как сделать приложение Microsoft Tag для Windows Phone 7

В этом уроке я продемонстрирую создание тега Microsoft в действии с использованием Windows Phone 7. Microsoft Tag — это реализация HCCB, использующая 4 цвета в сетке 5 x 10. Приложение Microsoft Tag дает потребителям возможность использовать встроенную камеру телефона, чтобы сделать снимок тега, и получать информацию в любой форме, такой как текст, визитная карточка, URL-адрес и т. Д. В этом руководстве я создам тег URL-адреса. (URITag). По сути, я добавлю ссылку на веб-сервис MS Tag и буду использовать некоторые из его веб-методов для создания тега, категории для тега и штрих-кода для этого тега. После создания тега вы можете делать с ним все что угодно, например отправлять по электронной почте своим друзьям или копировать на свой веб-сайт.

Дополнительная информация

Исходный код

Здесь вы можете увидеть результат нашего урока. Я создал тег для своего сайта.

Вот видео, чтобы продемонстрировать результат:

Шаг 1: Регистрация на тег Microsoft

Прежде всего вам необходимо понять, что такое Microsoft Tag и как его можно использовать для удовлетворения ваших потребностей. Вы можете найти всю необходимую информацию на веб-сайтах в блоке «Дополнительная информация» (выше) этого урока. После этого вам нужно зарегистрироваться в Microsoft Tag, используя свой LiveID. После регистрации вы будете перенаправлены на личную страницу тегов Microsoft (изображение ниже). Пока не будет добавлено ни одной категории или тега, но вы можете попробовать создать их вручную.

Шаг 2: токен доступа Microsoft Tag

Следующим шагом является получение токена Microsoft Tag Access для доступа к веб-сервису Tag. Этого можно достичь по этой ссылке: http://tag.microsoft.com/ws/accessrequest.aspx. После заполнения формы вы, вероятно, получите свой токен по электронной почте. В электронном письме у вас также будет ссылка на страницу Howto веб-сервиса Microsoft Tag . Теперь мы готовы начать разработку нашего первого приложения MS Tag.

Шаг 3: Создание нового проекта

Теперь вам нужно создать новый проект. Для этого откройте Visual Studio 2010 -> Файл -> Новый проект -> выберите там приложение Windows Phone, как показано на рисунке ниже.

Шаг 4. Добавление ссылки на веб-сервис

Теперь вам нужно добавить ссылку на веб-службу Microsoft Tag (щелкните правой кнопкой мыши ваш проект -> Добавить ссылку на службу ). Появится следующее диалоговое окно (изображение ниже). Введите URL-адрес веб-службы wsdl там: https://ws.tag.microsoft.com/MIBPService.wsdl . Затем нажмите кнопку «Перейти» и после этого нажмите кнопку «ОК», чтобы закрыть диалоговое окно.

Шаг 5: Создание пользовательского интерфейса

Затем я изменил MainPage XAML, добавив некоторые элементы пользовательского интерфейса, такие как текстовые поля: для категории, для имени тега и для URI. Я также добавил флажок, определяющий, является ли категория новой или нет.

<phone:PhoneApplicationPage
    x:Class="ED_MicrosoftTagForWindowsPhone.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    shell:SystemTray.IsVisible="True">
 
    <!--LayoutRoot contains the root grid where all other page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
            <TextBlock x:Name="ApplicationTitle" Text="EUGENEDOTNET.COM" Style="{StaticResource PhoneTextNormalStyle}" Margin="0, 0, 0, 0"/>
            <TextBlock x:Name="PageTitle" Text="Microsoft Tag" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
 
        <Grid x:Name="ContentGrid" Grid.Row="1">
            <TextBlock Height="32" HorizontalAlignment="Left" Margin="20,54,0,0" Name="textblockCategory" Text="Category:*" VerticalAlignment="Top" Width="136" />
            <TextBox HorizontalAlignment="Left" Margin="133,33,0,0" Name="textboxCategory" Text="" VerticalAlignment="Top" Width="215" />
            <TextBlock Height="32" HorizontalAlignment="Left" Margin="20,132,0,0" Name="textBlockURI" Text="URI:*" VerticalAlignment="Top" Width="136"/>
            <TextBox HorizontalAlignment="Left" Margin="133,111,0,0" Name="textBoxURI" Text="" VerticalAlignment="Top" Width="341" IsTabStop="True">
                <TextBox.InputScope>
                    <InputScope>
                        <InputScopeName  NameValue="Url" />
                    </InputScope>
                </TextBox.InputScope>
            </TextBox>
            <Button Content="Generate Tag" Height="70" HorizontalAlignment="Right" Margin="0,260,6,0" Name="btnGenerate" VerticalAlignment="Top" Width="341" Click="btnGenerate_Click" TabIndex="2147483647" IsTabStop="False" />
            <Image Height="225" HorizontalAlignment="Left" Margin="176,338,0,0" Name="imageTag" Stretch="Fill" VerticalAlignment="Top" Width="225" />
            <TextBlock Height="32" HorizontalAlignment="Left" Margin="20,210,0,0" Name="textBlockTagName" Text="Tag Name:*" VerticalAlignment="Top" Width="136" />
            <TextBox HorizontalAlignment="Left" Margin="133,189,0,0" Name="textBoxTagName" Text="" VerticalAlignment="Top" Width="341" TabIndex="2147483647" />
            <TextBlock Height="32" HorizontalAlignment="Left" Margin="20,338,0,0" Name="textBlockBarcode" Text="Tag:" VerticalAlignment="Top" Width="136" />
            <CheckBox Content="New"  HorizontalAlignment="Left" Margin="354,30,0,0" Name="cbIsNew" VerticalAlignment="Top" Width="120" MinWidth="120" />
        </Grid>
    </Grid>
 
</phone:PhoneApplicationPage>

Шаг 6: Разработка функциональности

Наконец, я написал код для реализации функциональности тегов и обработки событий. Я не буду описывать весь код. Я просто объясню наиболее важные методы и свойства в моем приложении. Первым важным свойством является TagClient, который создает экземпляр клиента веб-службы Microsoft Tag и подписывается на некоторые события, поскольку большинство методов веб-службы являются асинхронными.

private MIBPContractClient _client;
public MIBPContractClient TagClient
{
   get
   {
      if (_client == null)
      {
         _client = new MIBPContractClient();
         _client.CreateCategoryCompleted += (sender, e) => { CreateMSTag();  };
         _client.CreateTagCompleted += (sender, e) => { GetMSTagBarcode(); };
         _client.GetBarcodeCompleted += (sender, e) => { RenderBarcode(e.Result); };
      }
      return _client;
   }
}

Еще одно свойство для получения учетных данных пользователя для использования веб-сервиса:

public UserCredential TagCredential
{
   get
   {
      return new UserCredential() { AccessToken = TagAccessToken };
   }
}

Не забудьте ввести свой токен доступа в свойстве TagAccessToken:

public string TagAccessToken
{
   get
   {
      return "<enter your token here>";
   }
}

Для создания новой категории Microsoft Tag у меня есть метод, описанный ниже. Обратите внимание на StartDate и EndDate категории.

private void CreateCategory()
{
   try
   {
      // no need to check existence
      Category oCat = new Category();
      oCat.Name = TagCategoryName;
      oCat.UTCStartDate = DateTime.Now;
      oCat.UTCEndDate = new DateTime(2012, 01, 01);
      TagClient.CreateCategoryAsync(TagCredential, oCat);
   }
   catch
   {
      throw;
   }
}

Вот метод для создания нового URITag. В нем нет ничего особенного. Также обратите внимание на StartDate и EndDate. Возможно, в будущем вы захотите добавить некоторые дополнительные функции, чтобы сделать возможным ввод этих дат также в пользовательском интерфейсе.

private URITag CreateURITag(string uri)
{
   URITag uriTag = new URITag();
   uriTag.MedFiUrl = uri;
   uriTag.Title = TagName;
   uriTag.UTCStartDate = DateTime.Now;
   uriTag.UTCEndDate = new DateTime(2012, 01, 01);
   return uriTag;
}

Метод CreateMSTag просто вызывает метод CreateTagAsync экземпляра клиента веб-сервиса:

TagClient.CreateTagAsync(TagCredential, TagCategoryName, CreateURITag(TagURI));

И, наконец, я создал два метода для получения и рендеринга тегов. Первый метод ниже получает тег / штрих-код (в виде байтового массива) от веб-службы в соответствии с именем категории, именем тега, учетными данными, а второй метод просто отображает байтовый массив в элемент Image пользовательского интерфейса.

private void GetMSTagBarcode()
{
   try
   {
      TagClient.GetBarcodeAsync(TagCredential, TagCategoryName, TagName,
         ImageTypes.png, 3, DecorationType.HCCBRP_DECORATION_NONE, false);
   }
   catch
   {
      throw;
   }
}
 
private void RenderBarcode(byte[] result)
{
   if (result != null)
   {
      Stream _s = new MemoryStream(result);
      _s.Position = 0;
      BitmapImage _img = new BitmapImage();
      _img.SetSource(_s);
      imageTag.Source = _img;
   }
   btnGenerate.IsEnabled = true;
}