Segue o vídeo do Webcast de que fizemos na última sexta-feira (10/05/2013).

Abaixo seguem os links divulgados durante o Webcast.

http://www.microsoft.com/brasil/apps/appday.html

http://dev.windows.com/

http://bit.ly/Apps4Win

http://aka.ms/visouza

http://bit.ly/FernandoMartin

http://appuploader.azurewebsites.net/

http://w8i.azurewebsites.net/

http://bit.ly/VitorciaAppDay

Twitters: @vbs_br, @vitorcia, @fernandomartin

Abraço,

Vinícius.

Não!? Assim como você, muitos desenvolvedores não sabem desse benefício.

Nesse vídeo apresento o passo-a-passo de como ter acesso ao suporte técnico para resolver aqueles problemas de certificação

Twitter: @vbs_br

Blog: http://aka.ms/visouza

Facebook: http://aka.ms/facevisouza

Abraço,

Vinícius.

Blog: http://aka.ms/visouza

Twitter @vbs_br

Facebook: http://aka.ms/facevisouza

Abraço,

Vinícius

Nesse vídeo utilizo o VisualStudio passo-a-passo para alterar o template de catálogo em uma app de CupCake, aqueles bolinhos que estão na moda

Dessa forma vocês conseguiram acompanhar o conteúdo e alterar o aplicativo que estão desenvolvendo ao mesmo tempo.

Fiz no meu blog um artigo com as dúvidas mais comuns que surgiram no AppDay, estou atualizando esse artigo todos os dias com novas informações.  http://viniciussouza.azurewebsites.net/pos-kickoff-do-appday/

[]s,

Vinícius.

Twitter: @vbs_br

Blog: http://aka.ms/visouza

Facebook: http://aka.ms/facevisouza

Grupo do AppDay no Facebook: http://www.facebook.com/groups/436637483038051/

Espero que gostem do conteúdo, abraço!

Vinícius.

Fabebook: http://aka.ms/facevisouza

Blog: http://aka.ms/visouza

Twitter: @vbs_br

O conteúdo foi produzido e apresentado por Yuri Diogenes - http://yuridiogenes.wordpress.com/

Abraço,

Vinícius.

Fabebook: http://aka.ms/facevisouza

Blog: http://aka.ms/visouza

Twitter: @vbs_br

Por Vinícius Souza

Microsoft Technical Evangelist

Este artigo apresenta como vincular um controle a um único item ou vincular um controle de lista a uma coleção de itens em um aplicativo estilo Metro. Apresenta também como personalizar a exibição de itens de controle, implementar uma exibição de detalhes com base em uma seleção, e converter dados para exibição.

Realizando Binding para um item simples

Basicamente o Data Binding (vinculação de dados)  consiste em uma origem e um destino. O destino de um binding é tipicamente uma propriedade de um controle. Veja exemplo abaixo:

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>
   <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" />
</Grid>

 O exemplo acima apresenta o binding de um controle para um objeto simples, o destino do binding nesse caso é a propriedade Text de um controle do tipo TextBlock e a fonte é a variável AppName do tipo String definida no arquivo App.xaml.

Funcionamento do Binding

Neste caso o tipo de binding aplicado é o OneWay, valor aplicado por padrão. O que significa que o dado é recuperado de uma origem, mas alterações não são aplicadas de volta.

Realizando Binding para uma coleção de objetos

Umas das tarefas mais comuns no desenvolvimento de aplicações é o de fazer o Binding para uma coleção de objetos de negócio. Em C# e Visual Basic, a classe genérica ObservableCollection<T>  é uma boa escolha de uma coleção para realizar o binding, porque ele implementa as interfaces INotifyPropertyChanged e InotifyCollectionChanged. Estas interfaces fornecem notificação de mudança para os controles que estão ligados, quando uma propriedade de um item é alterado ou a propriedade de uma coleção é alterada.

O exemplo a seguir realiza o bind de uma coleção de objetos para uma controle ComboBox:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ComboBox x:Name="ComboBox1" ItemsSource="{Binding}"
        Foreground="Black" FontSize="30" Height="50" Width="780"/>
</Grid>

public ObservableCollection<Recording> MyMusic = new ObservableCollection<Recording>();
 
public Page()
{
    InitializeComponent();
 
    // Add items to the collection.
    MyMusic.Add(new Recording("Chris Sells", "Chris Sells Live",
        new DateTime(2008, 2, 5)));
    MyMusic.Add(new Recording("Luka Abrus",
        "The Road to Redmond", new DateTime(2007, 4, 3)));
    MyMusic.Add(new Recording("Jim Hance",
        "The Best of Jim Hance", new DateTime(2007, 2, 6)));
 
    // Set the data context for the combo box.
    ComboBox1.DataContext = MyMusic;
}
 
 
public class Recording
{
    public Recording() { }
 
    public Recording(string artistName, string cdName, DateTime release)
    {
        Artist = artistName;
        Name = cdName;
        ReleaseDate = release;
    }
 
    public string Artist { get; set; }
    public string Name { get; set; }
    public DateTime ReleaseDate { get; set; }
 
    // Override the ToString method.
    public override string ToString()
    {
        return Name + " by " + Artist + ", Released: " + ReleaseDate.ToString("d");
    }
}
 

Para exibir os registros de música em um controle ComboBox, a propriedade ItemsSource do controle recebe o valor de Binding e a propriedade DataContex recebe a coleção de objetos do tipo Recording, que fornece a origem para a operação de ligação (binding). Um ComboBoxItem é criado para cada item da coleção. O método ToString é automaticamento executado para cada objeto to tipo Recording para apresentar o item de um ComboBox.

Exibindo itens em um controle usando um modelo de dados

Você pode exibir os itens em uma lista usando o método ToString do item. No entanto, um cenário mais comum é utilizar uma visualização personalizada de dados vinculados utilizando um DataTemplate. Um DataTemplate permite que você personalize como os itens de uma lista são apresentados em um controle. Normalmente, você pode definir o modelo de dados utilizando a propriedade ContentTemplate de um controle de conteúdo ou a propriedade ItemTemplate de um controle de itens.

O exemplo a seguir mostra a mesma lista de gravações ligados a uma caixa de combinação usando um modelo de dados. Uma caixa de combinação é um controle do tipo ItemsControl, o que significa que você estabeleça um modelo de dados para cada item, definindo sua propriedade ItemTemplate para um modelo de dados. Observe como os registros são apresentados diferentemente do exemplo anterior.

No XAML, você pode ver a definição do modelo de dados. O modelo de dados contém um StackPanel com quatro controles TextBlock. O StackPanel utiliza a orientação horizontal, de modo que os quatro controlos de bloco de texto aparecem lado a lado. Dois dos controles TextBlock estão vinculados às propriedades Artist e Name de um objeto Recording. Os outros dois controles TextBlock exibem texto estático. Para cada item ligado, a ligação fornece o caminho para a propriedade sobre o objeto de gravação. No exemplo a seguir, essa ligação baseia-se no contexto de dados a ser definida para a lista de gravações.

<ComboBox x:Name="ComboBox1" ItemsSource="{Binding}" Foreground="Black" FontSize="30" Height="50" Width="450">
  <ComboBox.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal" Margin="2">
        <TextBlock Text="Artist:" Margin="2" />
        <TextBlock Text="{Binding Artist}" Margin="2" />
        <TextBlock Text="CD:" Margin="10,2,0,2" />
        <TextBlock Text="{Binding Name}" Margin="2" />
      </StackPanel>
    </DataTemplate>
  </ComboBox.ItemTemplate>
</ComboBox>

Conversão de dados para exibição nos controles

Utilizando um Converter (conversor), você pode formatar e apresentar outros tipos de objetos, como um TextBox. Por exemplo, você pode apresentar um rótulo e uma data formatada ao invez de apresentar apenas uma data.

O trecho de código a seguir apresenta uma implementação de um Converter para a data de lançamento do álbum da lista de gravações.

<UserControl x:Class="TestDataBindingQS.Page2"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:local="using:TestDataBindingQS"
  mc:Ignorable="d"
  d:DesignHeight="768" d:DesignWidth="1366">

   <UserControl.Resources>
      <local:StringFormatter x:Key="StringConverter"/>
   </UserControl.Resources>

   <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
      <StackPanel Width="750" Height="200" VerticalAlignment="Center" HorizontalAlignment="Center">
          <ComboBox x:Name="ComboBox1" ItemsSource="{Binding}" Foreground="Black" FontSize="30" Height="50" Width="750">
             <ComboBox.ItemTemplate>
                <DataTemplate>
                  <StackPanel Orientation="Horizontal" Margin="2">
                      <TextBlock Text="Artist:" Margin="2" />
                      <TextBlock Text="{Binding Artist}" Margin="2" />
                      <TextBlock Text="CD:" Margin="10,2,0,2" />
                      <TextBlock Text="{Binding Name}" Margin="2" />
                   </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
         </ComboBox>

         <!--The UI for the details view-->
         <StackPanel x:Name="RecordingDetails">
            <TextBlock Text="{Binding Artist}" FontSize="30" FontWeight="Bold" />
            <TextBlock Text="{Binding Name}" FontSize="30" FontStyle="Italic" />
            <TextBlock Text="{Binding ReleaseDate, Converter={StaticResource StringConverter}, ConverterParameter=Released: \{0:d\}}" FontSize="30"  />
         </StackPanel>
      </StackPanel>
   </Grid>
</UserControl>

public class StringFormatter : IValueConverter
{
    // This converts the value object to the string to display.
    // This will work with most simple types.
    public object Convert(object value, Type targetType,
        object parameter, System.Globalization.CultureInfo culture)
    {
        // Retrieve the format string and use it to format the value.
        string formatString = parameter as string;
        if (!string.IsNullOrEmpty(formatString))
        {
            return string.Format(culture, formatString, value);
        }
 
        // If the format string is null or empty, simply
        // call ToString() on the value.
        return value.ToString();
    }
 
    // No need to implement converting back on a one-way binding
    public object ConvertBack(object value, Type targetType,
        object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Uma classe conversora deriva da interface IValueConverter. A interface IValueConverter possui dois métodos o Convert e ConvertBack.Para o tipo de bindig de sentido único (One-Way) da origem de dados para o controle de destino, você somente deve implementar o método Convert. O conversor neste exemplo é genérico. Você fornece uma String no parametro format, e o conversor utiliza o método String.Format para realizar a formatação. Se uma máscara de formatação não é forneceido, o conversor retorna o resultado chamando o método ToString() de um objeto.

Uma vez implementado o conversor, você pode criar uma instância da classe de conversão e informar os bindings para utilizar essa instância. Neste exemplo, isto é realizado no XAML. Uma instância do conversor é criado como um recurso estático e recebe uma chave. A chave é depois utilizada quando a propriedade do conversor é atualizada no binding.

Conclusão

O Binding é uma técnica muito utilizada para apresentar os dados na interface e manter os dados do modelo de dados atualizados.

Na programação Metro Style utilizamos Binding a todo instante, e por isso, o conceito de Binding apresentado aqui deve ser muito bem compreendido.

Por Vinícius Souza

Microsoft Technical Evangelist

Fabebook: http://aka.ms/facevisouza

Blog: http://aka.ms/visouza

Twitter: @vbs_br

Os controles GridView, ListView e FlipView não são fáceis de entender logo no primeiro contato, e essa dificuldade está relacionada ao comportamento diferente dos outros controles do tipo ItemsControl. Espero com esse artigo, ajudar você a entender e customizar estes controles.

A classe ItemsControl é a classe pai para uma série de controles que exibem coleções de itens. Neste grupo você encontrará o ListBox e ComboBox, assim como os novos controles Windows GridView, FlipView e ListView.

GridView

Utilizem o GridView para apresentar dados que rolam horizontalmente, se quiser que os dados rolem verticalmente utilizem o ListView abordado na próxima seção.

Por padrão, o item de dados é apresentado no GridView como uma representação de um objeto String do objeto que está ligado. Para especificar exatamente como os items de um GridView serão apresentados é necessário criar um DataTemplate para definir quais controles de layout serão utilizados para apresentar um item. Os controles no layout podem ser ligados (utilizando o binding)  para as propriedades de um objeto, ou ainda ter seu conteúdo definido diretamente no código. Você atribui o DataTemplate para a propriedade ItemTemplate do GridView.

Um usuário pode selecionar um único item de um GridView, por padrão. Para alterar este comportamente alteramos o valor da propriedade SelectionMode para um dos possíveis valores da enumeração ListViewSelectionMode, permitindo assim, multipla seleção ou ainda desabilitar a seleção. O GridView ainda permite que seus itens comportam-se como botões, ao invez de ser selecionados.

A tabela a seguir apresenta os possíveis comportamentos de um GridView e como responder a cada iteração:

O GridView suporta virtualização dos dados para melhorar a performance quando estiver utilizando grande quantidades de dados. Virtualização de acesso aleatório é suportado quando a fonte de dados implementar a interface IObservableVector ou INotifyCollectionChanged. Virtualização de carga incremental é suportado quando a fonte de dados implementar a interface ISupportIncrementalLoading, neste caso você pode utilizar os membros para controlar o carregamento: DataFetchSize, IncrementalLoadingThreshold, IncrementalLoadingTrigger, LoadMoreItemsAsync.

GridView implementa a interface ISemanticZoomInformation, o que possibilita sua utilização como uma visão do controle SemanticZoom. Quando utilizado em um controle SemanticZoom, sempre atualize a propriedade ScrollViewer.IsHorizontalScrollChainingEnabled para false, desta forma  <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False">. Os seguintes membros tem efeito somente quando utilizado em um GridView dentro de um SemanticZoom:  IsActiveView, IsZoomedInView, SemanticZoomOwner, CompleteViewChange, CompleteViewChangeFrom, CompleteViewChangeTo, InitializeViewChange, MakeVisible, StartViewChangeFrom, StartViewChangeTo.

No trecho de código abaixo, o GridView está vinculado a uma coleção agrupada CollectionViewSource chamada cvsProjects. A aparência dos itens individuais de cada grupo é definida por um ItemTemplate. Os ItemsPanel especifica como o grupo será organizado na GridView. O GroupStyle.Panel especifica como itens individuais serão organizados em cada grupo.

<GridView ItemsSource="{Binding Source={StaticResource cvsProjects}}"

  Margin="0,120,0,0" MaxHeight="500" Grid.Column="1">

    <GridView.ItemTemplate>

        <DataTemplate>

            <StackPanel Margin="20">

                <TextBlock Text="{Binding Name}" FontWeight="Bold"

                           Style="{StaticResource ItemTextStyle}"/>

                <TextBlock Text="{Binding DueDate}" TextWrapping="NoWrap"

                           Style="{StaticResource BodyTextStyle}" />

                <CheckBox Content="Complete" IsChecked="{Binding Complete}"

                          IsEnabled="False"/>

            </StackPanel>

        </DataTemplate>

    </GridView.ItemTemplate>

    <GridView.ItemsPanel>

        <ItemsPanelTemplate>

            <StackPanel Orientation="Horizontal"/>

        </ItemsPanelTemplate>

    </GridView.ItemsPanel>



    <GridView.GroupStyle>

        <GroupStyle HidesIfEmpty="True">

            <GroupStyle.HeaderTemplate>

                <DataTemplate>

                    <Grid Background="LightGray" Margin="0">

                        <TextBlock Text='{Binding Name}'

                                   Foreground="Black" Margin="30"

                                   Style="{StaticResource HeaderTextStyle}"/>

                    </Grid>

                </DataTemplate>

            </GroupStyle.HeaderTemplate>



            <GroupStyle.ContainerStyle>

                <Style TargetType="GroupItem">

                    <Setter Property="MinWidth" Value="600"/>

                    <Setter Property="BorderBrush" Value="DarkGray"/>

                    <Setter Property="BorderThickness" Value="2"/>

                    <Setter Property="Margin" Value="3,0"/>

                </Style>

            </GroupStyle.ContainerStyle>



            <GroupStyle.Panel>

                <ItemsPanelTemplate>

                    <VariableSizedWrapGrid/>

                </ItemsPanelTemplate>

            </GroupStyle.Panel>

        </GroupStyle>

    </GridView.GroupStyle>

</GridView>[

ListView

Como dito anteriormente o ListView é utilizado para apresentar listas verticais, assim como o GridView o ListView é um controle do tipo ItemsControls, assim ele pode conter uma coleção de itens de um tipo. Para popular a visualização, adicione itens para a coleção Items, ou atualize a propriedade ItemsSource com a origem de dados a serem utilizados.

O ListView é geralmente utilizado para apresentar dados na visão Snapped, um exemplo desta utilização pode ser encontrada no template de Grid fornecido no Visual Studio.

Tirando o fato que um ListView apresenta os dados na vertical, não há maiores diferenças com o GridView os controles fornecem as mesmas funcionalidades como carga incremental, acesso aleatório e zoom semântico.

<ListView x:Name="itemListView"
          Margin="120,0,0,60"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          SelectionChanged="ItemListView_SelectionChanged">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Height="110" Margin="6">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
                    <Image Source="{Binding Image}" Stretch="UniformToFill"/>
                </Border>
                <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                    <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>          
</ListView>

FlipView

Utilizem o controle FlipView para apresentar um coleção de itens sequencialmente, uma por vez. Este controle é muito utilizado para apresentar uma galeria de imagens, por exemplo.

Galeria com o FlipView

O FlipView também é um controle do tipo ItemsControl, assim ele possui uma coleção de itens de qualquer tipo. Para populá-lo adicione itens para a coleção Items, ou atribua uma fonte de dados para a propriedade ItemsSource.

O controle permite que seja utilizada todo o espaço disponível na tela para apresentar um item. Ele apresenta dois botões, um na esquerda e outro na direita que permite o usuário navegar entre os itens que serão apresentados, se você utilizar um dispositivo com suporte a touch as setas não serão apresentadas e você pode realizar movimentos do tipo swipe horizontais para avançar ou voltar.

Por padrão, os dados de um FlipView é apresentado como uma representação de String de um objeto. Para especificar exatamente como os itens em um FlipView são apresentados, é necessário criar um DataTemplate para definir os controles de layout utilizados para cada item. Os controles no layout podem ser vinculados  utilizando Binding para os dados de objetos.

<FlipView x:Name="flipView1" Width="480" Height="270" 
              BorderBrush="Black" BorderThickness="1">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Image Width="480" Height="270" Source="{Binding Image}" Stretch="UniformToFill"/>
                        <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                            <TextBlock Text="{Binding Name}" FontFamily="Segoe UI" FontSize="26.667" 
                                       Foreground="#CCFFFFFF" Padding="15,20"/>
                        </Border>
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

Conclusão

O desafio de criar uma interface de usuário completamente nova, baseada em toque para aplicações metro style, requer um conjunto completo de novos controles que simplificam a nossa vida. Por essa razão, metro oferece alguns controles que implementam novos tipos de interações.

Por Vinícius Souza

Microsoft Technical Evangelist

Neste artigo, apresentarei alguns controles de Silverlight, controles estes, básicos para a construção de uma aplicação Metro Style.

Quando digo que os controles são básicos, em momento algum me refiro à sua simplicidade. Na verdade, significa que são a base na definição do layout em Silverlight.

Mas, antes de falar dos controles, falarei um pouco de XAML.

O XAML

Quando optar por desenvolver uma aplicação Metro Style utilizando C#, Visual Basic ou C++, você deve utilizar o XAML (Extensible Application Markup Language) para definir a interface do usuário. O XAML é uma linguagem declarativa, que você pode utilizar para definir controles que fazem interface com o usuário, tais como: botões, formas, textos e outros conteúdos apresentados na tela.

Quem já teve contato com HTML ou XML, não terá grandes problemas para trabalhar com o XAML. Assim como aqueles, o XAML é constituído por elementos e atributos. No que diz respeito à validação, o XAML é mais parecido com o XML, pois obedece às mesmas regras, o que implica em termos o arquivo  bem formatado.

Segue abaixo um exemplo de código XAML:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

Uma das maiores facilidades de se utilizar o XAML é poder separar a interface de usuário e o código da aplicação. Este modelo de trabalho permite uma separação das tarefas de desenvolvimento de software. Por exemplo, um designer do seu time pode fazer o desenho da interface do usuário e depois entregar para o desenvolvedor realizar a programação. Mesmo que o desenvolvedor e o designer sejam a mesma pessoa, conseguimos dividir a interface em arquivos XAML e o código em code-behind (.cs e .vb).

XAML e a relação entre os objetos

No XAML temos elementos como botões <Button> e tabelas <Grid>, que podem possuir outros elementos, seus filhos.  A relação entre pai e filho especifica coisas como, por exemplo, de que forma os objetos são posicionados na tela e como eles respondem aos eventos disparados pelos usuários.

Veja exemplo abaixo:

<Grid x:Name="Tabela" Background="Red" Grid.Row="1" Margin="12,0,12,0">

Relação entre os componentes visuais.

Além de determinar como o conteúdo é apresentado, a relação entre os componentes pode ter um efeito em como os eventos são processados. Vários eventos que são relacionados com a interface do usuário percorrem toda a árvore de relacionamento dos objetos. Você pode incluir um handle de eventos no StackPanel (Painel) para todos as caixas de texto, por exemplo.

Para tanto, basta incluir a propriedade PointerPressed="commonHandler", no objeto Painel.

<StackPanel x:Name="Painel" Margin="20" Background="Blue" PointerPressed="commonHandler">
  <TextBlock Name="primeiroTb" FontSize="30">Primeiro</TextBlock>
  <TextBlock Name="segundoTb" FontSize="30">Segundo</TextBlock>
  <TextBlock Name="terceiroTb" FontSize="30">Terceiro</TextBlock>
</StackPanel>

No trecho de código acima, quando o usuário clicar ou pressionar sobre uma das caixas de texto definidas em seu interior, o evento será capturado pela caixa de texto. O evento, por sua vez, vai subir até o elemento raiz.

O gráfico acima está representado no código abaixo:

private void commonHandler(object sender, PointerRoutedEventArgs e)

{
   FrameworkElement origem = e.OriginalSource as FrameworkElement;
   switch (origem.Name)
   {
case "primeiroTb":
   primeiroTb.Text = primeiroTb.Text + " Click!";
break;
case "segundoTb":
   segundoTb.Text = segundoTb.Text + " Click!";
break;
case "terceiroTb":
   terceiroTb.Text = terceiroTb.Text + " Click!";
break;
   }
}
 

Posicionamento absoluto e relativo (dinâmico)

Depois deste ensejo, sobre o formato XAML e como os elementos estão relacionados, focarei no posicionamento dos objetos.

Podemos optar por posicionar os objetos, absolutamente ou relativamente. Ao utilizarmos o posicionamento relativo dos elementos, ganhamos em produtividade, pois o conteúdo será apresentado corretamente em todas as resoluções de tela.

Apesar da facilidade proporcionada pelo posicionamento relativo, às vezes, se faz necessário posicionar os elementos absolutamente. Neste caso, fazemos isso utilizando o controle Canvas.

Para posicionarmos um controle dentro do controle Canvas, utilizamos as propriedades Canvas.Left e Canvas.Top. Quando utilizamos o designer do Visual Studio, estas propriedades são atualizadas, automaticamente, ao arrastarmos o controle dentro do Canvas.

Já em um posicionamento relativo ou dinâmico, especificamos os elementos definindo como eles serão organizados em relação a seus pais. Por exemplo, você pode organizar os controles em um painel e especificar que eles devem ficar dispostos horizontalmente. Para utilizar o tamanho automático ou proporcional, é necessário definir as propriedades Height (altura) e Width (largura).

Utilize as seguintes recomendações para definir um layout dinâmico:

• Defina a altura e a largura de um controle para Auto (automático). Quando este valor é utilizado em um controle Grid, o controle preencherá o conteúdo da célula que o contém;
• Controles que possuem texto não utilizam a propriedade Width (largura) e Height (altura) e, sim, as propriedade MinWidth (largura mínima) e MinHeight (altura mínima). Com isso, você previne que um texto assuma um tamanho que dificulte a sua leitura;
• Para definir valores proporcionais para os elementos RowDefinition (definição de linha) e ColumnDefinition (definição de coluna) de um Grid, utilize valores relativos em Height (altura) e Width (largura). Por exemplo, para especificar que uma coluna será cinco vezes mais larga do que outra utilize "*" e "5" para a propriedade Width (largura) no elemento ColumnDefinition. Veja o exemplo abaixo:

<Grid Margin="12,0,12,0">
 
  <Grid.RowDefinitions>
    <RowDefinition Height="auto" />
    <RowDefinition />
    <RowDefinition Height="auto" />
  </Grid.RowDefinitions>
 
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="5*" />
   </Grid.ColumnDefinitions>
</Grid>

No exemplo anterior, a segunda coluna possui cinco vezes o tamanho da primeira coluna.

O controle Grid

O controle Grid suporta disponibilizar os controles em múltiplas linhas e colunas. Você pode especificar as linhas e colunas de um controle do tipo Grid, incluindo elementos RowDefinition e ColumnDefinition imediatamente após a definição de um elemento Grid, como apresentado na seção anterior. Para posicionar objetos em uma célula específica, utilizamos as propriedades Grid.Row e Grid.Column do objeto que desejamos posicionar. Os controles podem, ainda, ocupar mais do que uma linha ou coluna, utilizando as propriedades Grid.RowSpan e Grid.ColumnSpan. Veja exemplo abaixo:

<Grid>
<Grid.RowDefinitions>
    <RowDefinition Height="auto" />
    <RowDefinition />
    <RowDefinition Height="auto" />
</Grid.RowDefinitions>
 
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
 
<TextBox Text="1a linha 1a coluna" FontSize="60" Grid.Column="0" Grid.Row="0" />
<TextBox Text="3a linha 1a coluna" FontSize="60" Grid.Column="0" Grid.Row="2" />
 
<TextBox Text="1a linha 2a coluna" FontSize="60" Grid.Column="0" Grid.Row="1" />
<TextBox Text="3a linha 2a coluna" FontSize="60" Grid.Column="1" Grid.Row="2" />
 
</Grid>
 

O controle StackPanel

O controle StackPanel é um painel de layout que organiza os controles nele existentes, em uma linha que pode ser orientada horizontalmente ou verticalmente. Você pode utilizar a propriedade Orientation para especificar a direção dos elementos filhos. Por padrão, a propriedade Orientation assume o valor Orientation.Vertical. Controles StackPanel são comumente utilizados para organizar pequenos conjuntos de objetos na interface. Veja o exemplo abaixo:

 <StackPanel >
  <Rectangle Fill="White" Width="50" Height="50" Margin="15" />
  <Rectangle Fill="Blue" Width="50" Height="50" Margin="15" />
  <Rectangle Fill="Green" Width="50" Height="50" Margin="15" />
  <Rectangle Fill="Red" Width="50" Height="50" Margin="15" />
</StackPanel>

Conclusão

O XAML é uma linguagem de marcação, assim como HTML e XML especializado para definir os objetos que serão apresentados na tela. Apesar da separação de responsabilidades definidas no XAML e no Code Behind, existem situações onde alterar alguma característica visual no código (Code Behind) é mais fácil do que no XAML, mas isso implica no nível de conhecimento de cada hum.

Aconselho vocês sempre utilizar o modelo de posicionamento dinâmico, pois uma vez que a aplicação está na loja, ela pode ser utilizada por diferentes resoluções. Para tanto os controles Grid e StackPanel são essenciais para definir como os componentes serão apresentados.

Por Vinícius Souza

Microsoft Technical Evangelist

O SuperQuiz é um jogo de Quiz para Windows 8 para Metro Style, desenvolvido em C#, que utilizou como base o template grid, disponível no Visual Studio 2012 RC.

O propósito deste jogo é servir como um primeiro contato para programadores e designers com o novo modelo de programação, introduzido com o Metro Style no Windows 8. E nada mais legal do que ter o primeiro contato com uma aplicação funcional.

Desenvolvemos o SuperQuiz  em XAML e C# pela facilidade que temos de desenvolver em C#, mas o mesmo jogo poderia ser desenvolvido em HTML5 e JavaScript.

Faça download do projeto acessando o link: http://supermetroquiz.codeplex.com/ abra o projeto e acompanhe o artigo.

Veja abaixo o projeto do SuperQuiz:

Pastas e seus conteúdos

Para facilitar o entendimento do  projeto vou descrever o que você vai encontrar a cada item do projeto.

1. Properties

Abrindo este item você vai encontrar o arquivo AssemblyInfo.cs - neste arquivo, configuramos as opções para configuração do Build (compilação), tais como nome da empresa, versão, descrição, etc.

Este arquivo só está presente em projetos do tipo Windows e não é exclusividade do Metro Style. 

2. References

Na pasta References você vai encontrar todas as referências que o SuperQuiz necessita para ser compilado e executado. Este projeto não faz uso de nenhuma referência específica, mas sim as padrões para todos os projetos C# para o Windows 8 Metro Style.

.NET for Metro Style apps

Windows

3. Assets

Na pasta Assets,  você vai encontrar os recursos utilizados pela aplicação. Para este projeto encontraremos todas as imagens usadas pela aplicação, como as diferentes opções de logo (utilizadas na aplicação), imagens de fundo e até mesmo as (imagens) utilizadas pelo conteúdo da aplicação.

4. Common

O diretório Common possui classes e estilos XAML que simplificam o desenvolvimento da aplicação.

Lá encontramos a definição da classe LayoutAwarePage, que é a (classe) base para todas as páginas do nosso projeto.

O arquivo de estilo StandardStyle.xaml, possui as definições dos estilos utilizada na diagramação visual do projeto.

5. SuperQuiz

Neste diretório encontramos as classes de controle, modelo, utilitários, as views e os arquivos XML de conteúdo. Veja na imagem abaixo:

SuperQuiz namespace

6. App.xaml

O arquivo é utilizado para definirmos os estilos utilizados pela aplicação (StandardStyle.xaml e QuizStyle.xaml) e o nome da aplicação.

A sua classe, App.xaml.cs especifica o comportamento da aplicação estendendo a classe básica Application. Nesta classe, controlamos o ciclo de vida da aplicação.

7. CategoryPage.xaml

Esta página da nossa aplicação apresenta os quizes de uma categoria. É apresentada quando clicamos sobre o título de uma categoria na página HomePage.xaml.

8. HomePage.xaml

Este arquivo é a página de hub de nosso conteúdo - é a primeira página que o usuário visualiza ao entrar na aplicação.

9. Package.appxmanifest

O arquivo de manifesto, como é conhecido, é utilizado pelo sistema operacional para identificar quais as funcionalidades que sua aplicação está utilizando (definindo as Capabilities e Declarations).

O arquivo de manifesto também é utilizado para definirmos as imagens de logo que a aplicação faz uso, e como sua aplicação é visualizada na store.

Cada um dos aspectos que o arquivo de manifesto configura está disponível por uma aba no editor. Para visualizá-lo, clique duas vezes sobre o arquivo de manifesto.

Package Manifest

10. QuizPage.xaml

Esta página é apresentada quando clicamos sobre um Quiz na página de Hub (homepage) ou na página de categoria (CategoryPage).

Ela traz uma breve descrição sobre o quiz e utiliza o controle FlipView para navegarmos entre os Quizes de uma categoria.

11. QuizPlayPage.xaml

Página que apresenta a pergunta e as alternativas do Quiz – nela é implementado o contrato de share.

12. SearchResults.xaml

Apresenta o resultado da pesquisa, quando o contrado de busca é utilizado. Esta página possui a mesma estrutura da HomePage, alterando apenas a fonte de dados utilizada para apresentar o resultado.

Navegação

Agora que você conhece os componentes do projeto SuperQuiz, vou apresentar a navegação do aplicativo. Conhecer como e quando cada página é apresentada vai ajudá-lo a customizar a aplicação.

Abaixo, apresento as imagens com as principais telas da aplicação. Aqui não estou incluindo o SplashScreen comum para todas as aplicações Metro Style.

Página	Descrição
	HomePage.xaml   Apresenta as categorias com alguns quizes que a compõem. Esta é a página de entrada da aplicação.
	CategoryPage.xaml   A página é apresentada ao clicar no botão com o nome da categoria na HomePage. Ela apresenta a imagem da categoria e os quizes que possui.
	QuizPage.xaml   Página de apresentação do Quiz - possui a imagem que identifica o Quiz e uma breve descrição de seu conteúdo. Na AppBar, há o botão para iniciar o Quiz. Pode ser acessada em três momentos: na HomePage, na CategoryPage ou, ainda, na SearchResults.
	QuizPlayPage.xaml   Aqui é apresentada a Pergunta do Quiz e suas alternativas. Acessamos esta página quando clicamos no botão iniciar.

Lógica do aplicativo

A lógica do SuperQuiz está dividida em duas classes do namespace SuperQuiz.Logic - a classe QuizApplication e a QuizPlay.

A classe QuizApplicaiton é responsável por carregar os arquivos XML de categoria e quiz, registrar o comandos de configurações (Settings), Sobre (About), e  popular a estrutura de dados  de busca.

Já a classe QuizPlay é responsável por controlar o game de Quiz propriamente dito.

QuizApplication Class

O método responsável por ler os arquivos XML e popular o modelo de dados é o InternalLoad. Esse método lista todos os arquivos com a extensão .xml da pasta SuperQuiz\Assets\Categories, populando o dicionário de categorias.

Veja abaixo o código utilizado por popular as categorias:

var appCategoriesFolder = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFolderAsync(@"SuperQuiz\Assets\Categories");

var quizCategoriesQuery = appCategoriesFolder.CreateFileQueryWithOptions(new QueryOptions(CommonFileQuery.OrderByName, new string[] { ".xml" }));

foreach (var item in await quizCategoriesQuery.GetFilesAsync())
{
   try
   {
      var category = await ObjectPersister.LoadAsync<QuizCategory>(item.Path, ObjectPersisterLocation.Path);
      if (category.Quizzes == null)
      {
         category.Quizzes = new ObservableCollection<Quiz>();
      }
      CategoryDictionary[category.UniqueId] = category;
      QuizCategories.Add(category);
   }
   catch { }
}

 A próxima etapa do código é carregar o arquivos de Quiz - veja o código abaixo:

var appQuizzesFolder = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFolderAsync(@"SuperQuiz\Assets\Quizzes");

var quizFilesQuery = appQuizzesFolder.CreateFileQueryWithOptions(new QueryOptions(CommonFileQuery.OrderByName, new string[] { ".xml" }));
foreach (var item in await quizFilesQuery.GetFilesAsync())
{
   try
   {
      var quiz = await ObjectPersister.LoadAsync<Quiz>(item.Path, ObjectPersisterLocation.Path);
      foreach (var question in quiz.Questions)
      {
         question.Quiz = quiz;
      }
      QuizDictionary[quiz.UniqueId] = quiz;
      if (CategoryDictionary.ContainsKey(quiz.CategoryUniqueId))
      {
         CategoryDictionary[quiz.CategoryUniqueId].Quizzes.Add(quiz);
      }
   }
   catch { }
}

Quando não existir arquivos xml, o método cria uma estrura de categorias e quizes executando o método QuizDataSource.GenerateSampleQuizzes().

As categorias populadas são posteriormente atribuídas para a propriedade DefaultViewModel, no método LoadState da página. Veja abaixo o código da página HomePage:

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
   this.DefaultViewModel["Categories"] = QuizApplication.Instance.QuizCategories;
}

Conclusões

Neste artigo foi apresentado o exemplo de um jogo de quiz de uma aplicação Windows 8 Metro Style.

Essa aplicação implementa as principais funcionalidades de um aplicativo, e será uma base para o seu aprendizado.

Navegue no código, familiarize-se com a estrutura do aplicativo e inclua breakpoints para entender seu funcionamento.

Por Vinícius Souza

Microsoft Technical Evangelist

Uma aplicação Metro Style é focada em conteúdo, mas o conteúdo sozinho não vai gerar uma identidade visual, nem um bom primeiro impacto, ao utilizar a sua aplicação.

Neste artigo apresentarei os pontos de edição para customizar a sua aplicação. Não vou entrar em conceitos de design, focarei sobre o que alterar e onde é utilizado.

Continuaremos utilizando o SuperQuiz como exemplo, código desenvolvido utilizando o template de grid (disponível no Visual Studio) como base.

Imagens

As imagens são uma parte muito importante de uma aplicação Metro Style no Windows 8. Elas possibilitam criar uma identidade para sua app. E, para isso, não é simplesmente trocando o background da sua aplicação que você vai conseguir.

Neste tópico, listarei as imagens com as quais você deve se preocupar quando for criar um aplicativo para Windows 8 e onde são utilizadas. Em seguida, falarei sobre como lidar com diferentes resoluções na sua aplicação.

Abrindo o arquivo de manifesto no Visual Studio 2012 RC, você vai visualizar quatro abas (Application UI, Capabilities, Declarations, Packaging). Veja imagem abaixo:

Arquivo de Manifesto

Existem várias imagens mencionadas no arquivos de manifesto, cada uma separada pela sua utilização.

Na seção Tile, temos as definições das imagens de logo, wide logo e small logo, cada qual com sua especificação de tamanho. Veja, abaixo, onde estas imagens são utilizadas:

Tiles

Os tiles são os representantes da sua aplicação no Start Screen (tela inicial) do Windows 8. Eles não são apenas um ícone grande, mas também possuem a capacidade de exibir mais informações para o usuário sem que a aplicação esteja em execução. Um tile interessante e útil pode ser um incentivo para o usuário executar sua aplicação.

Por ser a porta de entrada da sua aplicação, podendo refletir diretamente no sucesso ou não de sua app, o tile é um item que não pode ser negligenciado durante o desenvolvimento da sua aplicação.

Ao ler as informações acima, você pode pensar que isso é óbvio. Mas, falo por experiência própria - algumas vezes ficamos tão focados em resolver algum problema no código que, algo que era simples ou até mesmo óbvio, passa despercebido.

Sugestão: antes de começar a desenvolver, faça os dois tiles (logo e wide logo), somente imagem sem atualização. Depois com o desenvolvimento da aplicação, se achar necessário, você acrescenta a funcionalidade.

Para alterar as imagens utilizadas pelo tile, basta alterar as propriedades logo, wide logo e small logo no arquivo de manifesto ou, simplesmente, altere os arquivos da pasta Assets localizado na raiz de seu projeto.

O SuperQuiz possui apenas tiles estáticos, mas nada impede você de incluir essa funcionalidade. Aliás, sugiro fortemente que essa funcionalidade seja desenvolvida, SE FIZER SENTIDO!

Uma boa prática para desenvolvimento de aplicações Metro Style é "Menos é Mais", o que não quer dizer que você vai deixar de implementar alguma funcionalidade importante para o usuário. Pelo contrário, se não fizer sentido para a sua aplicação utilizar alguma funcionalidade, como o live tile, não a implemente.

SplashScreen

Assim como os tiles, o SplashScreen é muito importante, apesar de ser utilizado muito pouco, cerca de 2 a 5 segundos durante o carregamento da aplicação.

Uma imagem de SplashScreen fala muito sobre a sua aplicação, sendo parte fundamental da construção da sua identidade visual.

Styles (estilos)

Os estilos para uma aplicação XAML tem o mesmo funcionamento dos estilos CSS para programação em HTML5. É uma forma inteligente de fazer a diagramação do seu layout definindo fontes, margens, imagens de fundo, etc., que podem ser reaproveitados durante o desenvolvimento da aplicação.

No SuperQuiz utilizamos dois estilos: um localizado na pasta Common/StandardStyles.xaml e outro na pasta SuperQuiz/View/QuizStyles.xaml.

O arquivo StandardStyles.xaml define estilos que serão utilizados em toda a aplicação, sendo relacionado com a estrutura do layout. Enquanto que o arquivo QuizStyles.xaml define estilos específicos de uma página do jogo de Quiz.

Exemplos de definições encontradas no StandardStyle.xaml :

<Style x:Key="BasicRichTextStyle" TargetType="RichTextBlock">
<Setter Property="Foreground" Value="{StaticResource ApplicationForegroundThemeBrush}"/>
<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
  <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
  <Setter Property="TextTrimming" Value="WordEllipsis"/>
  <Setter Property="TextWrapping" Value="Wrap"/>
  <Setter Property="Typography.StylisticSet20" Value="True"/>
  <Setter Property="Typography.DiscretionaryLigatures" Value="True"/>
  <Setter Property="Typography.CaseSensitiveForms" Value="True"/>
</Style>

No exemplo acima, é definido uma classe chamada BasicRichTextStyle, cujo objeto que vai receber o estilo é o RichTextBlock.

Assim como no CSS (Cascade Style Sheet), é possível definir um estilo utilizando outro previamente definido como base. Abaixo, apresento um exemplo de estilo utilizando como base o BasicRichTextStyle.

<Style x:Key="BaselineRichTextStyle" TargetType="RichTextBlock" BasedOn="{StaticResource BasicRichTextStyle}">
  <Setter Property="LineHeight" Value="20"/>
  <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
  <!-- Properly align text along its baseline -->
  <Setter Property="RenderTransform">
    <Setter.Value>
      <TranslateTransform X="-1" Y="4"/>
    </Setter.Value>
  </Setter>
</Style>

Para definirmos um estilo e utilizar um segundo como referência, temos que utilizar a propriedade BasedOn. A sintaxe exata é a seguinte:

BasedOn="{StaticResource <Nome do estilo que sera utilizado>}"

Este é um recurso muito utilizado e é muito importante para termos agilidade e conformidade no layout da aplicação.

Sons

Assim como as imagens, os sons podem ser utilizados para criar uma identidade para a sua aplicação. Porém, este recurso deve ser utilizado com cautela e em alguns comportamentos específicos da aplicação.

No SuperQuiz, utilizamos o som SuperQuiz\Assets\Sounds\ting.mp3 – propositalmente, este som é utilizado em diferentes cenários, o que é um problema, pois quando o usuário da app escutar o som não vai conseguir identificar o tipo de ação.

O som é utilizado no arquivo SuperQuiz\View\StarPointsControl.xaml.cs, no método StarPointsControl_Loaded. O código do método está apresentado abaixo:

async void StarPointsControl_Loaded(object sender, RoutedEventArgs e)
        {
            if (ScoredPoints == 0)
            {
                text.Text = String.Format("+{0}", ScoredPoints);
                this.KeepingPoints.Begin();
            }
            else if (ScoredPoints > 0)
            {
                text.Text = String.Format("+{0}", ScoredPoints);
                this.WinningPoints.Begin();
            }
            else
            {
                text.Text = String.Format("-{0}", ScoredPoints);
                this.LosingPoints.Begin();
            }
            if (QuizApplication.Instance.Settings.PlaySounds)
            {
                var sound = new MediaElement();
                var parent = (Panel)this.Parent;
                parent.Children.Add(sound);
                sound.AudioCategory = AudioCategory.GameEffects;
                sound.AutoPlay = true;
                sound.Visibility = Visibility.Collapsed;
                sound.MediaEnded += PlayCompleted;
                sound.Source = new Uri("ms-appx:/SuperQuiz/Assets/Sounds/ting.mp3");
            }
        }

Como dito anteriormente, o som é incluído na página quando o usuário continua com a pontuação, ganha pontos ou perde pontos.

Sugiro que sejam incluídos sons diferentes para cada cenário, simplesmente incluindo uma váriável do tipo String, que receberá o nome do som a ser incluído em cada situação, e utilizando essa variável na propriedade Source do objeto sound.

Conclusão

Neste artigo foram apresentadas várias maneiras de customizar a aplicação SuperQuiz. Assim como o código, as alterações visuais da página devem ser pensadas com cuidado. Este é um ponto importantíssimo de uma aplicação Metro Style.

Implementando todos os pontos discutidos aqui, você vai criar um game de Quiz com a sua cara.

Para quem tem um perfil mais de código, como o meu, não vai ser na primeira tentativa que vai conseguir criar uma aplicação de impacto, mas a prática leva a perfeição e, por isso, não desanime.

Por Vinícius Souza

Microsoft Technical Evangelist

Existem várias formas de alterar o SuperQuiz. A mais fácil é alterar os arquivos XML de categoria e quiz. Os arquivos de conteúdo estão localizado na pasta SuperQuiz\Assets.

Na pasta SuperQuiz\Assets\Categories encontraremos os arquivos xml de categoria e na pasta SuperQuiz\Assets\Quizzes os arquivos xml de quiz.

Antes de apresentar a estrutura dos arquivos xml de conteúdo, gostaria de dar algumas dicas:

1)      Não altere a ordem das tags no xml. Devido ao componente de serialização utilizado, o arquivo xml é gerado e consumido com as tags em ordem alfabética. Por isso, alterando-se a ordem, ocorrerá um problema durante o processo de load;

2)      Muito cuidado durante a alteração do xml. Às vezes, durante a seleção do texto, cometemos um erro removendo mais caracteres do que é necessário, causando uma má formação no xml. Este tipo de erro é difícil de ser detectado.

Estrutura do arquivo xml de categoria.

A estrutura do arquivo é simples, possuindo apenas três tags {ImageUri, Name, UniqueId}.

<QuizCategory xmlns="http://schemas.datacontract.org/2004/07/SuperQuiz.Model" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
  <ImageUri>Assets/geography.png</ImageUri>
  <Name>Category 0 </Name>
  <UniqueId>C_0</UniqueId>
</QuizCategory>

Estrutura do arquivo xml de Quiz

O arquivo xml de Quiz é um pouco mais complexo e, por isso, vou explicá-lo em duas etapas.

A primeira, em que abordo o quiz sem considerar a tag Questions, e a segunda onde abordo somente o conteúdo da tag Questions.

<Quiz xmlns="http://schemas.datacontract.org/2004/07/SuperQuiz.Model" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
  <AllowPreviousNavigation>true</AllowPreviousNavigation>
  <AllowShareQuestions>true</AllowShareQuestions>
  <CategoryUniqueId>C_0</CategoryUniqueId>
  <Description>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient</Description>
  <EvaluateAnswerOnNext>true</EvaluateAnswerOnNext>
  <ImageUri>SuperQuiz/Assets/Images/geography.png</ImageUri>
  <LockQuestionWhenEvaluated>true</LockQuestionWhenEvaluated>
  <LockQuestionWhenNavigateToNext>false</LockQuestionWhenNavigateToNext>
  <LockQuestionWhenNavigateToPrevious>false</LockQuestionWhenNavigateToPrevious>
  <Name>Quiz 0</Name>
  <Questions>
    <QuizQuestion>
      <Answers>
        <QuizAnswer>
          <Code>C_0_Q_0_Q0_A0</Code>
          <Description>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat </Description>
          <ImageUri>SuperQuiz/Assets/Images/geography.png</ImageUri>
          <Links>
            <QuizUriLink>
              <Title>Wikipedia</Title>
              <Url>http://en.wikipedia.org/wiki/Sao Paulo</Url>
            </QuizUriLink>
          </Links>
          <Name>Answer 0</Name>
          <Points>-1</Points>
        </QuizAnswer>
        <QuizAnswer>
          <Code>C_0_Q_0_Q0_A1</Code>
          <Description>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat </Description>
          <ImageUri>SuperQuiz/Assets/Images/geography.png</ImageUri>
          <Name>Answer 1</Name>
          <Links>
            <QuizUriLink>
              <Title>Wikipedia</Title>
              <Url>http://en.wikipedia.org/wiki/Sao Paulo</Url>
            </QuizUriLink>
          </Links>
          <Points>0</Points>
        </QuizAnswer>
      </Answers>
      <Code>C_0_Q_0_Q0</Code>
      <Description>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat </Description>
      <ImageUri>SuperQuiz/Assets/Images/geography.png</ImageUri>
      <Links>
        <QuizUriLink>
          <Title>Wikipedia</Title>
          <Url>http://en.wikipedia.org/wiki/Sao Paulo</Url>
        </QuizUriLink>
      </Links>
      <Title>Question 0</Title>
    </QuizQuestion>
  </Questions>
  <ShowCorrectAnswerOnFinish>true</ShowCorrectAnswerOnFinish>
  <ShowFinishButton>true</ShowFinishButton>
  <ShowFinishOnlyWhenReachedLastQuestion>true</ShowFinishOnlyWhenReachedLastQuestion>
  <UniqueId>C_0_Q_0</UniqueId>
</Quiz>

<Quiz xmlns="http://schemas.datacontract.org/2004/07/SuperQuiz.Model" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
  <AllowPreviousNavigation>true</AllowPreviousNavigation>
  <AllowShareQuestions>true</AllowShareQuestions>
  <CategoryUniqueId>C_0</CategoryUniqueId>
  <Description>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient</Description>
  <EvaluateAnswerOnNext>true</EvaluateAnswerOnNext>
  <ImageUri>SuperQuiz/Assets/Images/geography.png</ImageUri>
  <LockQuestionWhenEvaluated>true</LockQuestionWhenEvaluated>
  <LockQuestionWhenNavigateToNext>false</LockQuestionWhenNavigateToNext>
  <LockQuestionWhenNavigateToPrevious>false</LockQuestionWhenNavigateToPrevious>
  <Name>Quiz 0</Name>
  <Questions></Questions>
  <ShowCorrectAnswerOnFinish>true</ShowCorrectAnswerOnFinish>
  <ShowFinishButton>true</ShowFinishButton>
  <ShowFinishOnlyWhenReachedLastQuestion>true</ShowFinishOnlyWhenReachedLastQuestion>
  <UniqueId>C_0_Q_0</UniqueId>
</Quiz>

Depois de apresentadas as tags do Quiz, focarei na tag Questions que é utilizada para definir a coleção de perguntas de um Quiz.

<Questions>
  <QuizQuestion>
    <Answers></Answers>
    <Code>C_0_Q_0_Q0</Code>
    <Description>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat </Description>
    <ImageUri>SuperQuiz/Assets/Images/geography.png</ImageUri>
    <Links>
      <QuizUriLink>
        <Title>Wikipedia</Title>
        <Url>http://en.wikipedia.org/wiki/Sao Paulo</Url>
      </QuizUriLink>
    </Links>
    <Title>Question 0</Title>
  </QuizQuestion>
</Questions>

Descrição dos itens da tag Questions.

A Tag QuizAnswers define as possíveis respostas da pergunta do Quiz.

<QuizAnswer>
  <Code>C_0_Q_0_Q0_A0</Code>
  <Description>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras </Description>
  <ImageUri>SuperQuiz/Assets/Images/img.png</ImageUri>
  <Links>
    <QuizUriLink>
      <Title>Wikipedia</Title>
      <Url>http://en.wikipedia.org</Url>
    </QuizUriLink>
  </Links>
  <Name>Answer 0</Name>
  <Points>-1</Points>
</QuizAnswer>

Descrição dos elementos da tag QuizAnswer.

Conclusão

Apesar de ser uma tarefa relativamente fácil, a edição de conteúdo nos arquivos xml requer bastante cuidado. Erros cometidos durante a alteração podem levar bastante tempo para serem encontrados.

Se durante o processo de alteração algum conteúdo desaparecer, é bem provável que o XML não esteja bem formatado.

Como você já deve estar ciente, aplicações Metro Style não se resumem apenas a conteúdo, é preciso que a aplicação tenha uma identidade visual. Não fique somente na alteração do conteúdo. Aproveite o tempo ganho para customizar visualmente a sua aplicação, levando sempre em conta o guide line.

Microsoft Technical Evangelist

Fabebook: http://aka.ms/facevisouza

Blog: http://aka.ms/visouza

Twitter: @vbs_br

Neste artigo, apresentarei o que deve ser feito para conseguir desenvolver aplicativos Metro Style no Windows 8.

Antes de mais nada, precisamos instalar o Windows 8, que é o novo sistema operacional. E, tendo isso em mente, partimos de dois cenários:

1. Instalação do sistema operacional, substituindo o sistema operacional existente;
2. Fazer uso de uma máquina virtual.

Cada um dos cenários acima, tem seus prós e contras. Quando o Windows 8 Consumer Preview foi disponibilizado, em fevereiro deste ano, utilizei o segundo cenário. Agora, com o Release Preview, substituí o Windows 7 da minha máquina de trabalho pelo Windows 8.

No tocante à experiência com o sistema operacional, o primeiro cenário é muito melhor, pois ter a experiência no ambiente em que vamos desenvolver aplicativos agrega muito. 

Fica a seu cargo escolher qual cenário utilizar, aqui cobrirei o primeiro cenário.

Existem outras formas de instalar o Windows como, por exemplo, utilizando o dual boot.

Instalando o Windows 8 como sistema operacional primário

Se decidir substituir o seu sistema operacional corrente, o primeiro passo é fazer backup de seus documentos, músicas, imagens, arquivos de e-mail e o que mais tiver que ser salvo.

Preste bastante atenção, pois depois de instalar o Windows 8 você não terá mais acesso aos arquivos que não tiverem backup.

Nesse processo de instalação vou utilizar um pen-drive (USB device). O pen-drive tem que ter no mínimo 4GB, mas se preferir pode utilizar um DVD - os procedimentos são basicamente os mesmos.

Fazendo o download do ISO

Acesse o link http://windows.microsoft.com/en-US/windows-8/iso para escolher a ISO (imagem do disco) que deseja instalar. Existem vários idiomas disponíveis, nas versões 32-bit e 64-bit, escolha aquela que melhor se adequar à arquitetura de sua máquina.

Aqui farei uso da versão 64-bits, em inglês, no entanto o procedimento funciona para qualquer idioma escolhido.

Depois que o processo de download for concluído, execute os passos abaixo:

1. Faça download e instale a ferramenta Windows 7 USB/DVD Tool, em seguida execute a ferramenta. Busque o arquivo ISO que realizou download e clique em "Next";

2. Pluge o dispositivo USB no computador e clique sobre o botão "USB Device";

3. Escolha o dispositivo USB na caixa de combo e clique sobre o botão "Begin copying";

4. A ferramenta vai formatar o dispositivo, tornando-o bootável e copiando os arquivos de instalação. O processo pode demorar um pouco até ser concluído, seja paciente; 

5. Quando a ferramenta concluir o processo, você já pode remover o dispositivo USB e iniciar o processo de instalação.

Altere a configuração de boot de sua máquina, deixando o dispositivo USB como fonte primária de boot, e salve as configurações.

Coloque o pen-drive em uma das portas USB, inicialize o computador e veja se a luz de leitura do USB está piscando, indicando a leitura. Siga as instruções de instalação apresentadas durante o wizard e, em poucos minutos, você terá o Windows 8 instalado.

Download das ferramentas

Para desenvolver para o Windows 8, precisamos instalar o Visual Studio 2012 Express RC. Para quem não conhece, o Visual Studio é a IDE (Integrated Development Enviroment / Ambiente Integrado de Desenvolvimento) utilizado para desenvolver aplicações .Net. E aqui não falo somente de aplicações Metro Style, mas para toda e qualquer aplicação que queira desenvolver (Web, Form, Metro, Service, Cloud, Phone, Library etc.) você vai utilizar alguma versão do Visual Studio.

Faça downlod do Visual Studio clicando no link: Visual Studio 2012 Express RC. Escolha o idioma de sua preferência e inicie o download.

Inicie o processo de instalação e siga os passos apresentados pelo Wizard. Ao terminar a instalação, você terá instalado na sua máquina:

• Windows 8 SDK;
• Blend for Visual Studio;
• Languages and templates in JavaScript;
• C++;
•  C#;
•  Visual Basic.

 Sua máquina está pronta para desenvolver aplicativos para o Windows 8, mas antes de colocar a mão na massa, é preciso obter a licença de desenvolvedor.

Obtendo licença para desenvolvedor

A licença de desenvolvedor para o Windows 8 Release Preview permite instalar, desenvolver, testar e avaliar aplicativos Metro Style antes que os testes e certificação do Windows Store sejam realizados. Licenças de desenvolvedor são gratuitas, e você pode utilizar quantas forem necessárias.

Antes que a loja aceite seu aplicativo Metro Style, você deve empacotá-la e certificá-la de acordo com certas regras. Se a Windows Store não certificou um aplicativo Metro Style, esse aplicativo não pode ser executado no Windows, a não ser que você possua uma licença de desenvolvedor instalada em sua máquina local.

A licença é fornecida por máquina e por uma quantidade fixa de tempo. Após a licença de desenvolvedor em sua máquina local expirar, você não será capaz de rodar aplicativos não certificados, mas pode continuar a executar aplicativos de desktop ou aplicativos de estilo de Metro Style que foram Sideloaded na máquina.

Para obter a licença de desenvolvedor, basta executar o Visual Studio 2012 RC e aceitar os termos de licença apresentados na primeira execução. Na janela de UAC (User Account Control), clique em Yes se desejar continuar.

Após instalar a licença em sua máquina local, você não receberá a notificação novamente nessa máquina, até que a sua licença seja expirada ou removida.

Agora sim, você está pronto para desenvolver aplicativos Metro Style!

Conclusões

O processo de setup da máquina para a instalação do Windows 8 pode parecer doloroso logo de início, afinal das contas, é necessário fazer a instalação de um novo sistema operacional. Mas, garanto a você que o processo é simples e mais rápido do que pensa.

Aproveite essa oportunidade para conhecer as novas funcionalidades do Visual Studio 2012, crie projetos utilizando os templates Metro Style C# e HTML5 fornecidos com o Visual Studio, e analise o código dos templates. Por mais que, no começo, você não consiga entender 100% do código, vale muito a pena!

Navegue bastante no Windows 8, veja as aplicações instaladas e as disponíveis na Windows Store. Familiarize-se com o Metro Style e tire ideias e boas práticas para implementar a sua própria app.

Os passos seguintes mostram como criar e implantar uma aplicação Java básica utilizando JSP - Java Server Page para o Windows Azure, utilizando o plugin para o Eclipse do Windows Azure. Foi utilizado o JSP nesse exemplo pela simplicidade, mas passos semelhantes podem ser realizados para outras tecnologias Java existentes.

Na biblioteca do MSDN existe um vídeo publicado por Gilberto Ribeiro realizando os passos para realizar o deploy de uma aplicação utilizando JSF - Java Server Faces no Windows Azure.

Nessa artigo vamos utilizar uma aplicação de Hello Word! Muito utilizada por todos os desenvolvedores em qualquer linguagem   

Os Pré-requisitos

• Java Developer Kit (JDK),       v 1.6 ou posterior.
• Eclipse IDE para desenvolvedores Java EE, Hélios ou superior. Você pode obter o Eclipse utilizando o link  http://www.eclipse.org/downloads/.
• A distribuição de um servidor web baseado em Java ou servidor de aplicação, como o Apache Tomcat, GlassFish, JBoss Application Server, ou Jetty.
• A assinatura do Windows Azure, que pode ser obtida através desse link http://www.windowsazure.com/pt-br/pricing/free-trial/.
• O Windows Azure Plugin para Eclipse. Acesse http://sourceforge.net/projects/waplugin4ej/ para baixar.

Criar uma aplicação Hello World

1. Vamos começar com a criação de um projeto Java. Inicie o Eclipse. Dentro do Eclipse, clique no menu arquivo, clique em Novo, e em seguida clique em Dynamic Web Project. Nomeie o projeto para HelloWorld e em seguida clique em Concluir.

2. Expanda o projeto HelloWorld, no painel Project Explorer do Eclipse. E clique com o botão direito do mouse em WebContent, clique em Novo e, em seguida, clique em Arquivo JSP.

3. Na caixa de diálogo Novo arquivo JSP, nomeie o arquivo para index.jsp. Mantenha a pasta pai como HelloWorld WebContent\, como apresentado na figura abaixo.

Em seguida, clique em Avançar.

4. Na caixa de diálogo Selecionar Template JSP, selecione Novo arquivo JSP (html) e clique em Concluir.

5. Quando o arquivo index.jsp abrir no editor do Eclipse, adicione no texto para exibir Hello World! Na tag  <body> existente. O  conteúdo da tag Body do seu HTML deve possui o seguinte conteúdo.

   <body>
     <b>Hello World! </ b>
   </ Body>

6. Agora vamos criar  um projeto para Windows Azure. Dentro do Eclipse, clique no menu arquivo,  Novo e em seguida selecione Windows Azure Project, utilize o nome MyAzureProject. Modifique a localização caso necessário, mas salve esse valor pois iremos utilizá-lo em breve quando formos exportar o arquivo WAR. Aceite os valores padrão para WorkerRole1. A caixa de diálogo da janela Novo Windows Azure Project deve ser semelhante a essa.

Em seguida, clique em Concluir.

7. Crie um arquivo WAR para o projeto Java. No painel Project Explorer, clique com o botão direito do mouse no projeto HelloWorld, em seguida clique em Exportar, e clique arquivo WAR. Na caixa de  diálogo Exportar, clique no botão Browse.

Na caixa de diálogo Salvar como,  navegue para a seguinte localização  (onde <your_project_location> é a pasta onde você criou seu Windows Azure projeto):

<your_project_location> \ MyAzureProject \ WorkerRole1 \ AppRoot

8. Clique em Salvar. Você será  avisado caso o arquivo HelloWorld.war existir, caso aconteça clique em       sobrescrever.

Clique em Concluir.

9. No painel Project Explorer do Eclipse, expanda o projeto MyAzureProject,  a role WorkerRole1 e o AppRoot. Nessa pasta, você vai visualizar o seu arquivo HelloWorld.war (que você exportou na etapa anterior). Se você não visualizar o arquivo WAR, atualizar a árvore clicando sobre o menu Arquivo, e  Refresh. Você deve visualizar algo semelhante com a figura abaixo.

10. Agora vamos copiar os arquivos zips do  seu JDK e servidor Web. Estes arquivos serão copiados para a pasta AppRoot.

Crie os arquivos zip necessários, e então utilize o File Explorer para arrastar os zips para a pasta AppRoot no painel Explorer Project. Quando solicitado pela caixa de diálogo Operação File, escolha Copiar arquivos. Depois de arrastar os arquivos zips para a pasta AppRoot, seu painel Project Explorer deve estar semelhante ao seguinte.

11. Agora vamos  personalizar o script de inicialização utilizado para o seu servidor de aplicação. Dentro do painel Project Explorer, expanda a pasta samples do projeto MyAzureProject.

12. Primeiro vamos copiar o conteúdo do script para a área de transferência. Dentro da pasta  samples, você visualizará um conjunto de arquivos que possuem comandos de inicialização específicos para diferentes tipos de servidores web. Abra o arquivo que seja equivalente para o servidor web que esteja utilizando. Com o arquivo aberto  no editor do Eclipse,  clique em Editar, em seguida, clique em Selecionar tudo e em seguida, clique <CTRL+C> para copiar o texto.

13. Agora vamos substituir o conteúdo do arquivo startup.cmd pelo conteúdo que você acabou de colocar na       área de transferência. No Painel Project Explorer, abra o arquivo startup.cmd (que está na pasta AppRoot). Com o arquivo aberto, no menu clique em Editar, clique em Selecionar tudo,  e digite <CTRL+V> para colar o conteúdo.

Se você estiver utilizando um nome de diretório diferente para o servidor, você deve atualizar o valor especificado na variável SERVER_DIR_NAME SET, modifique o valor conforme necessário. Além disso, há comentários no arquivo startup.cmd que fornecem orientação adicional.

14. Faça o Build de seu projeto. Dentro do menu do Eclipse, clique em Project, clique em Criar Projeto. Assegura-se que o processo de Build foi realizado com sucesso, antes de prosseguir para a próxima etapa.

 Realizando o deploy de sua aplicação para o emulador de computação

1. No painel Project Explorer, expanda MyAzureProject, expanda emulatorTools, e clique duas vezes RunInEmulator.cmd. Com isto você vai executar sua aplicação Java web no emulador de computação. Quando for solicitado para permitir que este comando faça alterações em seu computador, clique em Sim.

Examine a saída da interface do emulador de computação  para determinar se há algum problema com seu projeto. Pode demorar vários minutos para o seu deploy ser totalmente iniciado dentro do emulador de computação.

2. Inicie o navegador e utilize a  URL http://localhost:8080/HelloWorld (o HelloWorld parte da URL é case-sensitive). Você deverá ver seu aplicativo HelloWorld (saída de index.jsp), semelhante a imagem seguinte.

 Fazer o deplot do aplicativo no o Windows Azure

Por padrão, um  novo projeto Windows Azure é configurado para fazer o Build de um projeto para rodar no emulador de computação. Para prepará-lo para fazer o deploy na nuvem, faça o seuinte. No painel Project Explorer, clique com o botão direito do mouse MyAzureProject e sem seguida clique em Propriedades.

No painel esquerdo da caixa de diálogo Propriedades, clique em Windows Azure, e selecione Deploy to Cloud. Sua caixa de diálogo Propriedades deve ser semelhante a seguinte:

2. Vamos desativar o acesso remoto do projeto do Windows Azure. No painel esquerdo da caixa de diálogo Propriedades, expanda o Windows Azure e clique em Acesso Remoto. Na caixa de diálogo Remote Access, desmarque a opção Ativar conexões de Área de Trabalho Remota com estas credenciais de login. Clique em OK para fechar a janela de acesso remoto.

3. Faça o Build do  seu projeto, através do menu Projeto do Eclipse, selecione Construir tudo. Verifique se o processo de Build foi realizado com sucesso.

4. No painel Project Explorer, expanda o projeto MyAzureProject, e em seguida  expanda deploy. Dentro da pasta deploy você deve ter três arquivos, ServiceConfiguration.cscfg e WindowsAzurePackage.cspkg e WindowsAzurePortal.url. Você precisa fazer o upload dos dois primeiros arquivos para o Windows Azure através do Windows Azure Management Portal, nós vamos fazer em breve. O terceiro arquivo, WindowsAzurePortal.url, é um atalho para o Windows Azure Management Portal.

5. Clique duas vezes sobre o arquivo WindowsAzurePortal.url, para executar o navegador e abrir o portal de gestão do Windows Azure.

6. Efetue login no Windows Azure Management Portal.

7. Dentro do Windows  Azure Platform Management Portal, clique em Serviços hospedados, Contas de Armazenamento e CDN.

8. Clique Novo Serviço de Hospedagem no menu superior.

9. Selecione a  assinatura que será utilizada para este serviço.

10. Digite um nome para o seu serviço. Este nome é usado para distinguir os seus serviços dentro do Portal de Gerenciamento do Windows Azure para a assinatura especificada.

11. Digite a URL para  o seu serviço. O portal de Gerenciamento do Windows Azure garante que a  URL é única.

12. Escolha uma  região da lista de regiões.

13. Escolha uma das opções de deploy disponíveis  Deploy em um ambiente de Stage (preparo) / Produção.

14. Certifique-se que a opção Iniciar após deploy bem sucedido esteja selecionado.

15. Especifique um nome para o deploy.

16. Na localização do arquivo de  pacote, clique no botão localizar correspondente, navegue para a pasta (<your_project_location>\ MyAzureProject\ deploy \) onde está localizado o arquivo WindowsAzurePackage.cspkg e selecione o arquivo.

17. Na localização do arquivo de configuração, clique no botão localizar correspondente, navegue para a pasta (<your_project_location> \ MyAzureProject \ deploy \) onde está localizado o arquivo ServiceConfiguration.cscfg e  selecione o arquivo.

18. Clique em OK. Você receberá um aviso após clicar em OK, porque há apenas uma instância para a Role. Para se adequar a SLA do Windows Azure é necessário ter pelo menos duas instância de uma role de computação. O processo vai levar um certo tempo para ser completada, você pode monitorar a conclusão verificando o valor da coluna status. Quando seu valor for igual a Ready (Pronto) o processo vai estar completo, nesse momento você pode entrar com a url da sua aplicação no navegador para verificar se sua aplicação está funcionando corretamente na nuvem.

 E com isso terminamos o artigo, faça um teste fazendo um deploy de alguma aplicação que você possui. Veja os pontos onde sua aplicação deve ser alterada e comece aos poucos a experimentar cada serviço disponível no Windows Azure.

Abraço,

Vinícius

Mas quais são as linguagem que posso utilizar no Windows Azure, como vocês sabe o Windows Azure utiliza 3 tipos de serviços computacionais Web Role, Worker Role e VM Role. As Web Roles e Worker Roles estão na categoria de serviço PaaS ou Platform As A Service (Plataforma como serviço).

O PaaS por definição abstrai o hardware e o sistema operacional utilizado, como visto no vídeo Introdução ao Windows Azure Compute (primeiro módulo do curso no MVA). Mas mesmo utilizando o conceito de abastração é possível configurar o SO utilizando scripts powershell e as ferramentas disponíveis.

Existem vários SDK's (Software Development Kit) disponíveis para o Windows Azure, todos eles disponíveis no Github https://github.com/WindowsAzure.

Os SDK's disponíveis nesse momento, digo nesse momento até com certa ênfase porque o serviço está em constante evolução, a cada release novas tecnologias e funcionalidades são adicionadas. Acessando a url da página de desenvolvimento do Windows Azure https://www.windowsazure.com/pt-br/develop/overview/, podemois visualizar as linguagem que possuem SDK's, veja imagem em destaque.

Cada uma das linguagem possui uma página com o download do SDK, documentações e exemplos de utilização, recomendo fortemente que você navegue e veja toda a gama de informação disponível.

Os SDK's disponíveis

Atualmente existem SDK's para .Net, node.js, Java e PHP, os SDK podem ser obtidos através da página de cada linguagem ou pelo repositórios do Windows Azure disnponíveis do GitHub, veja a lista acessando a url https://github.com/WindowsAzure. Ao acessar a página do Windows Azure disponível para cada linguagem, você vai ver o seguinte.

Página de .NET

Página de node.js

Página de Java

Página de PHP

O processo de instalação dos SDK é simples, e possui bastante informação no próprio link. Mas se você tiver algum problema para utilizar faça um comentário com suas dúvidas que irei respondê-los na medida do possível.

Outras linguagens

Se para a sua linguagem de programação o Windows Azure não possuir um SDK disponível, não tem problema existem meios (não é gambiarra ) para configurar uma máquina virtual (mesmo utilizando o PaaS) para fazer download e instalar os componentes de software necessários para utilizar a sua linguagem.

Basicamente você vai ter que alterar o arquivo ServiceDeifniton.csdef, para incluir tasks (tarefas) que vão executar scripts powershell que vai realizar o download e instalação do componentes de software toda vez que provisionar uma nova instância da sua Role, veja um exemplo abaixo para instalar o Phyton em uma instância.

<Startup>
  <Task commandLine="installPython.cmd" executionContext="elevated">
    <Environment>
      <Variable name="EMULATED">
        <RoleInstanceValue xpath="/RoleEnvironment/Deployment/@emulated" />
      </Variable>
      <Variable name="PYTHON_PATH">
        <RoleInstanceValue
          xpath="/RoleEnvironment/CurrentInstance/LocalResources/LocalResource[@name='python']/@path" />
      </Variable>
    </Environment>
  </Task>
  <Task commandLine="installDependencies.cmd">
    <Environment>
      <Variable name="PYTHON_PATH">
        <RoleInstanceValue
          xpath="/RoleEnvironment/CurrentInstance/LocalResources/LocalResource[@name='python']/@path" />
      </Variable>
    </Environment>
  </Task>
</Startup>

A primeira tarefa InstallPhyton.cmd, vai realizar o download do Phyton e realizar a instalação, veja o script powershell abaixo.

powershell -c "(new-object System.Net.WebClient).DownloadFile
('http://python.org/ftp/python/2.7.2/python-2.7.2.msi', 'python.msi')"
start /w msiexec /i python.msi /qn TARGETDIR="%PYTHON_PATH%"

A segunda tarefa InstallDependencies.cmd vai criar um ambiente Phyton utilizando virtualenv (http://www.virtualenv.org/en/latest/index.html) e instalar qualquer módulo que a aplicação dependa, executando o pip (http://www.pip-installer.org/en/latest/index.html), o conteúdo do script powershell segue abaixo.

python virtualenv.py --no-site-packages .
call scripts\activate
cd app
pip install -r requirements.txt

O arquivo requirements.txt é um arquivo texto, que possui o nome dos módulos (e versões). Ele segue o formado definido por pip freeze.

Como disse antes, o Windows Azure está em constante evolução prova disto é a disponibilização do Hadop ainda em teste. Fique atento as novas atualização na página do Windows Azure e nos novos conteúdos técnicos disponíveis.

Um grande abraço,

Vinícius.

O Visual Studio se comunica com o ambiente a runtime do ambiente em execução para recuperar dados de debug da aplicação, a aplicação por sua vez, deve ter informações de debug na runtime para o Visual Studio realizar o debug.

A fábrica de implantação do Windows Azure precisa ter acesso o runtime do ambiente local, assim você pode realizar o debug da sua aplicação Windows Azure local, como qualquer outra aplicação .NET adicionando breakpoints (pontos de parada).

Essa seria uma ótima notícia, mas infelizmente o Visual Studio não pode acessar a runtime do Windows Azure diretamente. Uma vez que o serviço é implantado no Windows Azure, ele é totalmente gerenciado pelo Windows Azure e você não tem acesso a runtime dele.  O time de desenvolvimento percebeu essa limitação e acrescentou a capacidade de log para a runtime do Windows Azure, assim como suporte a IntelliTrace (somente disponível no Visual Studio Ultimate edition).

O serviço de diagnóstico é executado ao longo da instância da sua Role, coletando dados de diagnóstico que podem ser salvos utilizando o serviço de armazenamento do Windows Azure (necessita configuração), assim ficando a uma chamada REST de distância. Você pode também comunicar com o serviço de diagnóstico remotamente de uma aplicação local, ou ainda configurar para armazenar os dados de acordo com um período pré-determinado.

Os serviços de diagnósticos suportam realizar log dos os seguintes tipos de dados:

• Windows Azure Trace logs: Estes são os logs gerados a partir da aplicação, e podem conter qualquer      tipo de mensagem enviado do seu código.
• Logs de diagnóstico de infraestrutura: logs de infraestrutura recuperados pelo serviço de      diagnósgtico;

• Logs de eventos do Windows: Estes são os logs de eventos do Windows gerado na máquina que a instância      da Role está executando.

• Contadores de performance do Windows: Estes se referem aos contadores de performance da máquina que a instância da Role está sendo executada;

• IIS Logs e trace de falhas de requisições: Logs gerados pelo IIS da instância da Role;

• Dumps de quebra da aplicação: São os dados de dump gerado quando a aplicação quebra.

O serviço de diagnóstico agrega todos os tipos de logs citados anteriormente juntos e depois os transferem para o local de armazenamento apropriado. Não se esqueça que as instância das roles são stateless e por essa razão, você pode perder dados armazenados localmente durante operação de reciclagem.

 Veja abaixo uma tabela com a lista de dados de log disponíveis nas instâncias das roles do Windows Azure e seus respectivos locais de armazenamento.

Habilitando o serviço de diagnóstico em sua aplicação

1. No arquivo ServiceDefinition.csdef, adicione o elemento import  do módulo de Diagnóstico. Veja exemplo de XML abaixo.

<?xml version="1.0" encoding="utf-8"?>

<ServiceDefinition name="MyHostedService" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceDefinition">

  <WebRole name="WebRole1">

    <Imports>

      <Import moduleName="Diagnostics" />

    </Imports>

  </WebRole>

</ServiceDefinition>

2. Abra o arquivo ServiceConfiguration.cscfg e adicione as seguintes linhas de código XML.

<ConfigurationSettings>

   <Setting name="Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString"

         value="DefaultEndpointsProtocol=https;AccountName=AccountName;AccountKey=AccountKey"/>

</ConfigurationSettings>

Onde AccountName é o nome da conta de armazenamento do Windows Azure, e AccountKey é a chave de acesso da conta de armazenamento. Se você estiver usando o emulador de armazenamento, defina o valor como UseDevelopmentStorage=true. 

Rastreando o fluxo do seu aplicativo

Se você pretende recuperar as mensagens de trace incluídos no código do seu código, você vai precisar incluir um novo listener (TraceListener) na configuração do seu aplicativo.

Quando é utilizado Trace, Debug e TraceSource, você precisa de um mecanismo para coletar e armazenar as mensagens que são enviadas. As mensagens de Trace são recebidas por listeners, a função de um listener é de coletar, armazenar, e direcionar mensagens de trace. Listeners direcionam a saída do trace para um determinado local, como log, janela, ou ainda um arquivo texto. No Windows Azure Diagnostics, a classe DiagnosticMonitorTraceListener é utilizada, mas antes para utilizá-la é necessário ter habilitado o serviço de diagnóstico do Windows Azure, veja tópico anterior.

Para configurar o listener de trace, realiza a seguinte configuração no seu arquivo Web.config ou App.config.

<system.diagnostics>
   <trace>
      <listeners>
         <add type="Microsoft.WindowsAzure.Diagnostics.DiagnosticMonitorTraceListener,
            Microsoft.WindowsAzure.Diagnostics,
            Version=1.0.0.0,
            Culture=neutral,
            PublicKeyToken=31bf3856ad364e35"
            name="AzureDiagnostics">
            <filter type="" />
         </add>
      </listeners>
   </trace>
</system.diagnostics>

Espero que você tenha compreendido o funcionamento do mecanismo de diagnóstico do Windows Azure, um excelente exercício seria aplicar essas alterações no projeto de migração abordado no módulo 3 do curso de Azure no MVA - Microsoft Virtual Academy.
 

Obrigado,

Vinícius.

Manualmente realizar o upload de pacotes de serviço e depois iniciar e parar os serviços pela interface do portal funciona bem para uma ou duas instâncias. Para serviços de larga escalabilidade, essa tarefa se torna dispendiosa e propensa a erro. A API de gerenciamento de serviço do Windows Azure, permite você programaticamente realizar a maiorias das funções de provisionamento via chamadas REST.

Utilizando a API de gerenciamento, você pode escrever scripts para o processo de provisionamento ou desprovisionamento de maneira automática.

A estrutura da API de gerenciamento de serviço

A API de gerenciamento de serviço (Service Management API) fornece a maioria das funções que você pode realizar no portal de gerenciamento com os serviços de armazenamento e serviços de hospedagem. A API do serviço de gerenciamento categoriza as operações em três seções primárias:

Contas de armazenamento (Storage accouts)

Operações nas contas de armazenamento cobrem principalmente listagem das contas e a geração da chave de acesso.

Serviços de hospedagem (Hosted services)

Operações no serviços de hospedagem cobre listar os serviços, implantar os serviços, remover os serviços, trocar (swapping) entre produção e preparo e melhoramento dos serviços.

Grupos de afinidades (Affinity groups)

As operações nos grupos de afinidades são limitadas em listar e recuperar as propriedades de um grupo de afinidade em sua assinatura.

O serviço de gerenciamento utiliza certificados cliente do tipo X.509 para autenticar as chamadas entre o servidor e o cliente.

Programando com a API de gerenciamento

Para iniciar a programar utilizando a API serviço de gerenciamento, você precisa primeiro criar um certificado válido do tipo X.509 (ou utilizar um certificado X.509 existente). Para criar um certificado você pode utilizar o utilitário makecert.exe para criar um certificado auto assinado (self-signed).

makecert.exe -r -pe -a sha1 -n "CN=Certificado de autenticação do Windows Azure" -ss My -len 2048 -sp "Microsoft Enhanced RSA and AES Cryptographic Provider" -sy 24 azureservicemanagementapi.cer

O makecert.exe está disponível no SDK do Windows, em minha máquina o local do SDK é C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A\Bin, se ao abrir o console do Windows o arquivo não estiver disponível você tem que alterar os variáveis do sistema do Windows e acrescentar o diretório.

Após gerar o certificado, você tem que adicionar o certificado para o serviço de hospedagem que você desejar. Selecione um dos serviços de hospedagem que você possui, selecione a pasta "Certificado" e clique no menu superior em "Adicionar Certificado".

Em seguida, selecione o arquivo de certificado criado e faça o upload.

 Uma vez que o certificado foi carregado, você pode realizar chamadas a API Rest do serviço de gerenciamento informando o certificado na propriedade ClientCertificate do objeto System.Net.HttpWebRequest, utilizando o exemplo csmanage.exe fornecido nos exemplos da API de gerenciamento de serviços, ou desenvolvendo a sua própria aplicação.

O projeto de exemplo para a API de gerenciamento do Windows Azure, está disponível na url: http://code.msdn.microsoft.com/windowsazure/Windows-Azure-CSManage-e3f1882c

Você pode encontrar a referência para a API de gerenciamento na biblioteca do MSDN, na seguinte URL: http://msdn.microsoft.com/pt-br/library/ee460799.aspx

Obrigado,

Vinícius.

Ao chegar ao quarto módulo da academia de Windows Azure do MVA - Microsoft Virtual Academy, você já está um pouco familiarizado com o portal de gerenciamento. Nesse artigo, vamos passar pelas principais funcionalidades da interface de gerenciamento.

Ao realizar login, você terá acesso a página inicial do portal de gerenciamento. Na página inicial existem vários links que trazem as novidades de cada nova versão, assim como uma documentação sobre a introdução do Windows Azure.

Antes de falar sobre as funcionalidades do portal de gerenciamento do Windows Azure, eu gostaria de mostrar algumas das áreas do portal para que você entenda a experiência do usuário.

Seguindo a numeração da figura acima nós temos:

1. Usuário e Cobrança;

Localizado no canto superior direito, estão agrupados:

• Combo box para alteração do      idioma utilizado no portal;

• Link para acesso das      informações de cobrança;

• Nome do usuário;

• Link para realizar o logout da do portal.

2. Menu de contexto (Menu Ribbon);

O menu ribbon foi utilizado na primeira vez no Microsoft Office, desde então muitos outros produtos tem utilizado essa funcionalidade.

O Menu de contexto é atualizado de acordo com a navegação dos itens de menu existente nos itens 3, veja abaixo alguns exemplos do menu de contexto.

• Serviços Hospedados, Contas de Armazenamento e CDN -> Integridade da implantação.

• Serviços Hospedados, Contas de Armazenamento e CDN -> Grupos de afinidades.

• Barramento de serviço, Controle de acesso e Cache -> Services -> Em cache.

3. Menu secundário;

O menu secundário é um detalhamento dos serviços disponíveis em cada item do menu principal, clicando em um dos itens desse menu a interface é atualizada (Menu de contexto e área de conteúdo).

Ao clicar no item "Serviços hospedados" do menu Serviços Hospedados, Contas de Armazenamento e CDN é listado todos os serviços de hospedagem disponíveis em sua assinatura. Veja exemplo abaixo.

4. Menu Principal;

O menu principal está sempre disponível, não importando o serviço que esteja visualizando, ele agrupa os principais serviços disponíveis no Windows Azure. Clicando em um dos itens o menu secundário é atualizado, com os serviços disponíveis.

Itens disponíveis:

• Página inicial;

        Redireciona para a página inicial do portal, a mesma página acessada ao realizar o login.

• Serviços Hospedados, Contas  de Armazenamento e CDN;

Permite verificar a integridade da Implantação, com as quantidades de assinaturas, quantidade de implantações em produção e em preparo (stage) e etc.

OBS: Fique atento as informações apresentadas na coluna "Detalhes". Nela podemos verificar, por exemplo se algumas das aplicações não estão de acordo com o SLA.

• Banco de dados;

         Esta opção permite o gerenciamento dos serviços de banco de dados (o SQL Azure) disponível em sua assinatura. Você pode criar um novo servidor, criar um novo banco de dados e até comprar uma assinatura de banco de dados.

• Sincronismo de Dados;

      O Serviço de sincronismo permite configurar grupos de sincronização entre: Bancos de dados SQL Server locais X Bancos de dados SQL Azure; Bancos de dados SQL Azure X Bancos de dados SQL Azure.

• Relatório;

        Ao usar o SQL Reporting Azure, você pode facilmente prover e implantar soluções de relatórios para a nuvem, e tirar proveito de um centro de dados distribuído que fornece disponibilidade, escalabilidade e segurança.

Os desenvolvedores podem usar SQL Reporting Azure para adicionar uma experiência rica para seus aplicativos funcionando no local ou na nuvem. Eles podem criar relatórios usando familiares ferramentas do SQL Server e, em seguida, usar esses relatórios em suas aplicações.

• Barramento de Serviço, controle de acesso e Cache;

       Possibilita a criação de um namespace de serviços, cada qual utilizando uma URL específica para implementar controle de acesso, barramento de serviço e cache.

Exemplos de URLs de serviço para namespace 'mycompany':

- Controle de Acesso: https://mycompany.accesscontrol.windows.net

- Barramento de Serviço: https://mycompany.servicebus.windows.net

- Cache: https://mycompany.cache.windows.net

• Rede virtual

Permite a criação de uma rede virtual para conectar um ou mais computadores ou máquinas virtuais (VM) e sua rede em sua rede local.

5. Conteúdo;

Basicamente este é um item de detalhamento dos serviços utilizados, quase sempre é dividido entre listagem dos serviços e as propriedades de cada um. O painel de propriedade foi utilizado inúmeras vezes no decorrer dessa academia para copiar valores como tokes e url.

6. Política de privacidade, ajuda e avaliação

Este último item dá acesso a política de privacidade do Windows Azure, Acesso rápido a ajuda e suporte e uma opção para incluir comentários sobre a experiência de utilização da interface.

Obrigado,

Vinícius.

Você pode se beneficiar das características do Windows Azure migrando uma solução on-premises, para a nuvem realizando algumas alterações. Se você tiver experiência com aplicações em ambientes clusterizados, já deve ter uma noção das alterações que iremos fazer, para quem não tem fiquem tranquilos que irei explicar todas as alterações.

Um serviço hospedado no Windows Azure consiste em uma ou mais web roles e/ou worker roles. A web role é um aplicativo Web ASP.NET acessível através de HTTP ou HTTPS e é geralmente o front-end para um aplicativo. Worker roles são aplicativos de processamento em segundo plano e são normalmente serviços de back-end.

Serviços do Windows Azure podem ser compostos por um ou ambos os tipos de roles e podem executar várias instâncias de cada tipo. Instâncias de roles podem ser adicionadas ou removidas com base na demanda e permitem que os aplicativos façam o sclale-up ou down rapidamente e quando for necessário. Quando seu serviço no Windows Azure utilizar mais de uma instância de uma role será implementado o load balance automaticamente e por isso devemos realizar algumas alterações.

Serviço de armazenamento, nós já vimos que o Windows Azure fornece armazenamento na nuvem, que inclui serviço de Blob para armazenar dados de texto e binário, serviço de Table para armazenamento estruturado e serviço de Queue, que é um modelo confiável e persistente de mensagens entre os serviços.

ASP.NET oferece suporte para diferentes implementações de providers (provedores), como: membership, role, profile e gerenciamento de sessão. A maioria dos provedores vem com uma versão baseada em um banco de dados SQL ou usa representações de dados em memória.

Os exemplos de Windows Azure incluem implementações de provedores que usam os serviços de armazenamento como o blob e table. Além disso, os provedores endereçam o problema dos aplicativos Web estarem hospedados em uma variedade de diferentes máquinas dentro da malha de Windows Azure.

Quando você implanta seu aplicativo Web nos data centers do Windows Azure, os serviços de armazenamento de tabelas e blobs estão prontamente disponibilizados e são, portanto, facilmente acessíveis a partir de seu aplicativo.

Neste módulo, você explorará os principais pontos de atenção ao migrar uma aplicação ASP.NET para Windows Azure, incluindo Banco de Dados, Variáveis de Sessão, Cache, Identidade na Nuvem, Escalabilidade, Balanceamento de Carga e Armazenamento.

Vou utilizar o projeto TailspinSpyworks disponível no CodePlex, desenvolvido por Joe Stagner, para demostrar a utilização do framework .NET. A cada item desse módulo vamos migrar alguns dos serviços para a nuvem até que tenhamos toda a aplicação na nuvem. No final de cada item vou incluir o link para download do código com as últimas alterações. Mas recomendo fortemente que façam as alterações passo-a-passo.

Objetivos

• Após esse módulo você vai estará apto a:
• Migrar um banco de dados do SQL Server (on-premise) para o SQL Azure
• Usar o Windows Azure Cache para gerenciar as variáveis de sessão
• Usar o serviço de Blob para substituir a gravação de arquivos em File System
• Incluir o projeto de implantação do Windows Azure na solução
• Publicar a aplicação no Windows Azure

Pré-requisitos

Abaixo estão os pré-requisitos para completar este módulo:

• IIS 7 (Internet Information Service), se não possuir utilize o IIS Express.
• Microsoft Visual Studio
• Microsoft .NET Framework 4.0
• Windows Azure SDK (Software Development Kit)
• SQL Server Express Edition
• Microsoft SL Server Management Studio
• Fazer download do projeto TailspinSpyworks do CodePlex, opte pelo código fonte.

Este conteúdo é uma derivação de um Hands-On Lab produzido pelo Rogério Cordeiro.

Passo 1 – Adicionar um projeto de implantação do Windows Azure

1. Execute o Visual Studio como administrador de Start | All Programs | Microsoft Visual Studio clicando com o botão direito do mouse no atalho do Microsoft Visual Studio e selecione Run as administrator.

2. Se a janela User Account Control aparecer, clique Yes.

3. Na opção File do menu, escolha Open em seguida Project/Solution.

4. Na janela Open Project, procure o arquivo TailspinSpyworks.sln para abrir a solução.

5. Clique com o botão direito do mouse no projeto TailspinSpyworks | Add Windows Azure Deployment Project.

6. O projeto TailspinSpyworks.Azure será adicionado a solução. Verifique que na lista de mensagens aparece a seguinte mensagem:  The project 'TailspinSpyworks.Azure' was created with a role for the project      'TailspinSpyworks'. For more information, see http://go.microsoft.com/fwlink/?LinkId=226880. Navegue pela      estrutura do projeto, abra os arquivos de configuração para saber como o projeto irá se comportar dentro do Windows Azure. Note que uma nova role foi adicionada automaticamente e com referência ao projeto ASP.NET      TailspinSpyworks.

Passo 2 – Criar um pacote para implantação no Windows Azure

Neste passo você vai criar um pacote para publicar a aplicação dentro do Windows Azure.

1. Volte para no Visual Studio, clique com o botão direito do mouse no projeto TailspinSpyworks.Azure | Package.

         

 2. Na janela Package Windows Azure Application, mantenha as configurações e clique em Package.
         

3. Assim que o pacote é criado,  uma janela do Windows Explorer será aberta com dois arquivos: ServiceConfiguration.Cloud.cscfg e TailspinSpyworks.Azure.cspkg. Copie o caminho destes arquivos para ser utilizado no próximo passo.

Passo 3 – Criar um componente de computação dentro do Windows Azure

Neste passo você criara um novo Hosted Service para publicar a aplicação dentro do Windows Azure.

1. Acesse pelo Internet Explorer o portal do Windows Azure https://windows.azure.com.  Se necessário, faça login com sua conta do Windows Live.

2. Em Serviços hospedados, Contas de armazenamento e CDN (Hosted Services, Storage Accounts & CDN), painel do lado esquerdo, clique em Serviços Hospedados (Hosted Services), em seguida clique em Novo Serviço Hospedado (New Hosted Service).

•  3. Na janela Criar um novo Serviço hospedado (Create a new Hosted Service), selecione a sua subscrição, informe:
• O nome do serviço;
• Um prefixo único para a URL (Ex.: <seunome>tailspin);
• A região;
• Uma opção de implantação (deployment) (Preparo ou produção);
  Um nome para a implantação (deployment) (Ex.: v1.0);
• Local do pacote, escolha o arquivo TailspinSpyworks.Azure.cspkg
• Arquivo de configuração, escolha o arquivo ServiceConfiguration.Cloud.cscfg de configuração (criado no       passo anterior).

 Clique em OK para criar o serviço hospedado e aguarde até o processo de provisionamento terminar, o processo vai levar alguns minutos.

 4. Para testar a aplicação que acabou de ser implantada no Windows Azure, basta ir até a janela de      propriedades do novo serviço hospedado e clicar na URL do DNS name.

Esse último artigo da série de migração você completou as etapas para migrar uma aplicação existente para o Windows Azure, os conceitos e procedimento aqui abordados podem ser utilizados para migrar aplicações Asp.Net existentes e criar novos aplicativos escaláveis no Windows Azure.

O módulo de migração foi desenvolvido tendo como base o Hands-On-Lab (Laboratório prático) de Windows Azure desenvolvido por Rogério Cordeiro.

Continuem a estudar os outros conteúdos do MVA (Microsoft Virtual Academy).

Abraço,

Vinícius.

Para evitar a perda de dados e ainda podermos acessar o os dados em qualquer lugar, vamos utilizar o Windows Azure Storage. Tivemos um artigo no módulo de Introdução do MVA falando somente sobre o Windows Azure Storage, se precisar rever os conteúdo apresentado clique aqui.

A aplicação TailspinSpyworks tem uma página com a função de cadastrar novos produtos. Neste cadastro é necessário incluir uma foto do produto, o arquivo da imagem é salvo dentro de uma pasta da aplicação. Em cenários de alta disponibilidade, não é uma boa prática a aplicação ter referencia para um pasta local. Neste exercício você irá trocar este mecanismo para gravar a imagem no serviço de Blob do Windows Azure.

Passo 1 – Provisionar uma conta de storage no Windows Azure

Neste passo você criará uma nova conta de storage para usar o serviço de Blob do Windows Azure.

1. Acesse pelo Internet Explorer o portal do Windows Azure https://windows.azure.com.  Se necessário, faça login com sua conta do Windows Live;

2. Em Serviços hospedados, Contas de armazenamento e CDN (Hosted Services, Storage Accounts & CDN), no painel do lado esquerdo, clique em Contas de Armazenamento (Storage Accounts), em seguida clique em Nova conta de Armazenamento (New Storage Accout).

3. Preencha a janela Criar uma nova conta de Armazenamento (Create a New Storage Account) com a sua subscrição do Windows Azure, uma URL única para a nova conta de storage, escolha uma região (OBS: utilize a mesma região dos serviços de compute), em seguida clique em OK.

4. Selecione a conta de storage que você acabou de criar e copie a Blob URL do painel de propriedades e cole em um bloco de notas (notepad). Em seguida clique no botão Exibir (View) da Chave de acesso primário (Primary access key).

5. Na janela View Storage Access Keys, clique no botão ao lado do campo Chave de acesso primário (Primary access key) para copiar a chave e cole no bloco de notas. 

Passo 2 – Alterar o código da aplicação para usar o serviço de Blob do Windows Azure

Esta é a minha parte favorita, fazer alterações de código em algumas páginas do projeto TailspinSpyworks.

1. Execute o Visual Studio como administrador de Start | All Programs | Microsoft Visual Studio clique com o botão direito do mouse no atalho do Microsoft Visual Studio e selecione Run as administrator.

2. Se a janela User Account Control aparecer, clique Yes.

3. Na opção File do menu, escolha Open em seguida Project/Solution.

4. Na janela Open Project, procure o arquivo TailspinSpyworks.sln para abrir a solução.

5. Abra o arquivo ProductAdd.aspx.cs localizado na raiz do projeto TailspinSpyworks.

6. A primeira alteração é incluir as referências.

Clique com o botão direito do mouse sobre o ptojeto TailSpinSpyworks e selecione "Add Reference".

Na aba Browse, vá para a pasta C:\Program Files\Windows Azure SDK\v1.6\ref e selecione os arquivos:

• Microsoft.WindowsAzure.ServiceRuntime.dll;
• Microsoft.WindowsAzure.StorageClient.dll.

6.1. Em seguida abra o arquivo ProductAdd.aspx.cs e posicione o cursor na linha 10, e inclua o código abaixo.

using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.ServiceRuntime;
using Microsoft.WindowsAzure.StorageClient;
using Microsoft.WindowsAzure.StorageClient.Protocol;

6.2. Ainda no arquivo ProductAdd.aspx.cs, posicione o cursor na linha 27, e inclua o código abaixo.

try{
       if (!IsPostBack)
       {
           this.EnsureContainerExists();
       }
}
catch (System.Net.WebException we){
   Error.Text = "Network error: " + we.Message;
   if (we.Status == System.Net.WebExceptionStatus.ConnectFailure)
   {
       Error.Text += "<br />Please check if the blob service is running at " +ConfigurationManager.AppSettings["storageEndpoint"];
    }
}catch (StorageException se){
   Console.WriteLine("Storage service error: " + se.Message);
}

6.3. Agora posicione o cursor logo abaixo da função Page_Load e inclua o código abaixo.

private CloudBlobContainer GetContainer()
        {
            // Get a handle on account, create a blob service client and get container proxy
            //var account = CloudStorageAccount.FromConfigurationSetting("DataConnectionString");
            CloudStorageAccount account;
            CloudStorageAccount.TryParse("DefaultEndpointsProtocol=https;AccountName=azure20111025a;AccountKey=Rl9ZI3Z88Sf6QHr9gMbdcVz6GFshIpA13Gpfp7++fdLoWXDT7dCor1/op9w78XNTKmpFXKR8+2EM/YCCLeDDvA==", out account);

            var client = account.CreateCloudBlobClient();

            //return client.GetContainerReference(RoleEnvironment.GetConfigurationSettingValue("ContainerName"));
            return client.GetContainerReference("gallery");

        }


        private void EnsureContainerExists()
        {
            var container = GetContainer();
            container.CreateIfNotExist();
            var permissions = container.GetPermissions();
            permissions.PublicAccess = BlobContainerPublicAccessType.Container;
            container.SetPermissions(permissions);
        }

         private void GravarImagemAzureBlob(string id, string name, string description, string tags, string fileName, string contentType, byte[] data)
        {
            // Create a blob in container and upload image bytes to it
            var blob = this.GetContainer().GetBlobReference(name);
            blob.Properties.ContentType = contentType;

            // Create some metadata for this image
            var metadata = new NameValueCollection();
            metadata["Id"] = id;
            metadata["Filename"] = fileName;
            metadata["ImageName"] = String.IsNullOrEmpty(name) ? "unknown" : name;
            metadata["Description"] = String.IsNullOrEmpty(description) ? "unknown" : description;
            metadata["Tags"] = String.IsNullOrEmpty(tags) ? "unknown" : tags;

            // Add and commit metadata to blob
            blob.Metadata.Add(metadata);
            blob.UploadByteArray(data);

        }

        private void GravarThumbAzureBlob(string id, string name, string description, string tags, string fileName, string contentType, Stream data)
        {
            // Create a blob in container and upload image bytes to it
            var blob = this.GetContainer().GetBlobReference(name);
            blob.Properties.ContentType = contentType;

            // Create some metadata for this image
            var metadata = new NameValueCollection();
            metadata["Id"] = id;
            metadata["Filename"] = fileName;
            metadata["ImageName"] = String.IsNullOrEmpty(name) ? "unknown" : name;
            metadata["Description"] = String.IsNullOrEmpty(description) ? "unknown" : description;
            metadata["Tags"] = String.IsNullOrEmpty(tags) ? "unknown" : tags;

            // Add and commit metadata to blob
            blob.Metadata.Add(metadata);
            blob.UploadFromStream(data);
        }

6.4. Procure a função ProductAddBtn_Click e dentro do bloco Try, comente as chamadas das funções GravarImagemFileSystem e GravarThumbFileSystem e inclua o código abaixo das funções previamente comentadas. 

GravarImagemAzureBlob(
                        Guid.NewGuid().ToString(),
                        imageName,
                        HttpUtility.HtmlEncode(Description.Text),
                        "",
                        imageName,
                        FileUpload1.PostedFile.ContentType,
                        FileUpload1.FileBytes);

      ////código para gravar imagem thumbnail no File System
                    GravarThumbAzureBlob(
                         Guid.NewGuid().ToString(),
                         imageName,
                         HttpUtility.HtmlEncode(Description.Text),
                         "",
                         imageName,
                         FileUpload1.PostedFile.ContentType,
                         CreateThumbnail(FileUpload1.FileContent));

 7. Analise o código apresentado e em caso de dúvida, inclua um comentário no artigo.

8. Abra o arquivo ProductDetails.aspx e altere o src do objeto Image para acessar as imagens do serviço de Blog que você criou no passo anterior. Faça os seguintes passos, posicione o cursor na linha 12 logo abaixo de.

<td style="vertical-align: top;">

Troque a linha

<img src='Catalog/Images/<%# Eval("ProductImage") %>'  border="0" alt='<%# Eval("ModelName") %>' />

Por essa abaixo

<img src='https://[suacontadestorage].blob.core.windows.net/gallery/<%# Eval("ProductImage") %>'  border="0" alt='<%# Eval("ModelName") %>' />

9. Por fim, abra o  arquivo ProductsList.aspx e altere o src do objeto Image para acessar as imagens do serviço de Blog, da mesma forma que o passo anterior. Posicione o cursor na linha 16, logo abaixo de.

<a href='ProductDetails.aspx?productID=<%# Eval("ProductID") %>'>
 

Em seguida, troque a linha.

<image src='Catalog/Images/Thumbs/<%# Eval("ProductImage") %>' width="100" height="75" border="0">

Pela seguinte linha.

<image src='https://[suacontadestorage].blob.core.windows.net/gallery/<%# Eval("ProductImage") %>' width="100" height="75" border="0">

Obs: troque [suacontadestorage] pelo nome da conta de storage que você criou anteriormente.

10. Neste momento a aplicação já está preparada para usar o serviço de Blob do Windows Azure e armazenar as imagens da aplicação. Para testar basta pressionar <F5> no Visual Studio, acesse a página ProductAdd.aspx e cadastre um novo produto.

Em seguida volte para a lista de produtos e verifique se o novo produto está aparecendo. Para finalizar o teste clique no detalhes do produto e para verificar que a imagem está dentro do serviço de Blob, basta clicar com o botão direito do mouse na imagem e ver as propriedades. Para verificar a URI da imagem.

Faça download do código fonte do projeto alterado, clicando aqui.

Esse artigo foi realizado utilizando o Hands-On-Lab criado por Rogério Cordeiro.

Abraço, 

Vinícius.

Umas das maneiras de resolver esse problema é utilizar Windows Azure Cache, nesse artigo iremos configurar a aplicação TailspinSpyworks para utilizar o Windows Azure Cache, no final do artigo você conseguirá baixar o projeto com as alterações necessárias aplicadas.

Passo 1 – Provisionar o serviço de Cache

Neste passo você criará uma nova subscrição para usar Windows Azure Caching.

1. Acesse pelo Internet Explorer o portal do Windows Azure Platform https://windows.azure.com.  Se necessário, faça login com sua conta do Windows Live.
2. No  Barramento de serviços, Controle de acesso e Cache (Service Bus, Access Control & Caching), painel do lado esquerdo, clique em Cache.

3. Clique no botão Novo namespace de Serviço (New Namespace) para criar uma nova instancia de cache.

 Preencha os dados solicitados na janela "Criar um novo namespace de serviço" (Cache Service Namespace) com:

• Nome;

• Escolha um país/região (OBS: Atenção para deixar no mesmo servidor das roles de compute);

• Assinatura que será utilizada;

• Cota do tamanho de cache (Connection Pack Size) e clique em Criar Namespace.

4. Localize a nova entrada na lista dos serviços e aguarde o Status do namespace ficar Ativo.

 Status ativo do Namespace

5. Clique no namespace criado, e  no painel de propriedades (a direita da tela) localize e copie os valores dos campos URL do serviço (Service URL) e Porta do serviço (Service Port).
              

6. Clique no botão Exibir  (View) do  campo Token de  Autenticação (Authentication Token) do painel de propriedades. Na janela Token de Autenticação (Authentication Token) clique no botão Copiar para a área de transferência (Copy to Clipboard). Para facilitar os próximos passos, use o notepad para guardar as      configurações.

7. Clique em Exibir Configuração de cliente (View Client Configuration), veja imagem abaixo e selecione todo o texto da janela Configuração do Cliente (Client Configuration). Digite <CTRL + C> para copiar e cole o texto no notepad para usar nos próximos passos. Este XML tem as configurações necessárias para acessar o Windows Azure Caching Access Control.

 Copiando o XML de configuração do Windows Azure Cache.

Passo 2 – Configurando o Session State provider da aplicação para usar o Windows Azure AppFabric Caching

Neste passo você vai alterar o Session State provider para usar o mecanismo de Cache do Windows Azure. Este passo requer que você adicione algumas referências no projeto TailspinSpyworks e altere o arquivo de configuração Web.config.

1. Execute o Visual Studio como administrador. Acesse Start | All Programs | Microsoft Visual Studio e clique com o botão direito do mouse no atalho para o Microsoft Visual Studio e escolha Run as      administrator;
2. Se a janela User Account Control aparecer, clique Yes.

3. Na opção File do menu, escolha Open e em seguida, selecione Project/Solution.

4. Na janela Open Project, procure o arquivo TailspinSpyworks.sln para abrir a solução.

5. No Solution Explorer, clique com o botão direito do mouse no projeto TailspinSpyworks | e selecione Add Reference | selecione a aba Browse. Navegue até a pasta %Program Files%\Windows Azure SDK\v1.6\Cache\refe selecione os assemblies:
   • Microsoft.ApplicationServer.Caching.Client;
   • Microsoft.ApplicationServer.Caching.Core;
   • Microsoft.Web.DistributedCache.

Em segida clique em OK.

6. Garanta que os assemblies façam parte do pacote. Para fazer isto, clique com o botão da direita do mouse na referencia Microsoft.ApplicationServer.Caching.Client | Properties. Na janela de propriedades, verifique se a opção Copy Local é igual a True. Repita este passo para os outros assemblies, incluídos no passo anterior.

7. Abra o arquivo Web.config, localizado na raiz do projeto TailspinSpyworks.
8. Volte para o notepad com as configurações do Windows Azure Cache e copie o texto dentro da tag ConfigSections

9. Volte para o Visual Studio e cole a sessão dentro da tag configuration do web.config. Garanta que este seja o primeiro elemento dentro da tag configuration.

<configuration>
   <configSections>
       <section name="dataCacheClients" type="Microsoft.ApplicationServer.Caching.DataCacheClientsSection, Microsoft.ApplicationServer.Caching.Core"
                  allowLocation="true" allowDefinition="Everywhere"/>
     </configSections>
.....

</configuration>      

10. Volte para o notepad e copie a configuração dataCacheClients.

11. Volte para o Visual Studio e cole a configuração que você copiou logo após a tag configSections como mostra abaixo.

     </configSections>
      
     <dataCacheClients>
       <dataCacheClient name="default">
         <hosts>
           <host name="[SERVICE-HOST-NAME]" cachePort="22233" />
         </hosts>
      
         <securityProperties mode="Message">
           <messageSecurity
             authorizationInfo="[AUTHORIZATION INFO]">
           </messageSecurity>
         </securityProperties>
       </dataCacheClient>
     </dataCacheClients>
       
     <dataCacheClients>
       <dataCacheClient name="SslEndpoint">
         <hosts>
           <host name="[SERVICE-HOST-NAME]" cachePort="22243" />
         </hosts>
      
         <securityProperties mode="Message">
           <messageSecurity
             authorizationInfo="[AUTHORIZATION INFO]">
           </messageSecurity>
         </securityProperties>
       </dataCacheClient>
     </dataCacheClients>

12. A ultima sessão que você  precisa configurar é a sessionState provider, e para fazer isto, volte  para o notepad e copie o elemento sessionState.

13. Volte para o Visual Studio e cole o elemento copiado dentro da sessão system.web.

     ...
     <system.web>
      
       <sessionState mode="Custom" customProvider="AppFabricCacheSessionStoreProvider">
         <providers>
           <add name="AppFabricCacheSessionStoreProvider"
                 type="Microsoft.Web.DistributedCache.DistributedCacheSessionStateStoreProvider, Microsoft.Web.DistributedCache"
                 cacheName="default"
                 useBlobMode="true"
                 dataCacheClientName="default" />
         </providers>
       </sessionState>
      

  <compilation debug="true" targetFramework="4.0">

14.  Digite <CTRL + S> para salvar o arquivo Web.config.

Agora a aplicação já está pronta para utilizar o Windows Azure Cache como mecanismo controle de sessão. Para testar para pressionar <F5> no Visual Studio e navegar pelo site.

Faça download da aplicação, configurada clicando aqui.

Este artigo foi realizado com base em um Hands-on-Lab realizado pelo Rogério Cordeiro.

Obrigado, e continue migrando.

Vinícius

Vou utilizar a estrutura de pasta criada pelo scaffolder do Windows Azure SDK para PHP do artigo anterior.

Dentro da pasta PhpOnAzure.Web crie um novo arquivo chamado index.php e abra ele para edição, em seguida adicione as linhas de código abaixo.

<?php

phpinfo();

?>

Executando a aplicação PHP no ambiente local de desenvolvimento

Geralmente você vai testar a sua aplicação antes de fazer deploy para o ambiente de produção. Existem dois passos intermediários que você pode utilizar para testar a aplicação antes de fazer o deploy para produção:

• O ambiente local de desenvolvimento;
• E o servidor de staging.

O servidor de staging está disponível no portar do Windows Azure e para utilizá-lo é semelhante ao deployment de produção. Quando você estiver satisfeito com o release de stage, você pode trocar o ambiente de stage para produção através do portal. Nesse artigo porém vou focar na utilização do servidor local de desenvolvimento.

Para testar execute os seguintes passos:

1. Abra o console do Windows;
2. Execute o comando  'package create -in="C:\temp\WindowsAzurePHPApp" out="C:\temp\WindowsAzurePHPApp\build" -dev=true'

OBS: Deve ser verificado se o IIS está devidamente configurado para utilizar o PHP.

Sua aplicação vai começar a ser construída e em poucos segundos o navegados Web vai abrir e você vai visualizar a saída do método phpinfo(), como na figura abaixo.

Execute a aplicação PHP no Windows Azure

Para executar qualquer aplicação no Windows Azure, você vai precisar de dois arquivos:

Windows Azure Package;

ServiceConfiguration.cscfg.

Mudando apenas um pouco o comando anterior, ambos os arquivos serão gerados e podem ser carregados imediatamente no portal do Windows Azure.

1. Execute o comando       'package create -in="C:\temp\WindowsAzurePHPApp"       -out="C:\temp\WindowsAzurePHPApp\release" -dev=false'

Agora você vai possuir dois arquivos na release, que serão carregados no Windows Azure como dito anteriormente.

Para fazer o deploy faça os passos abaixo:

1. Acesse a sua       conta do Windows Azure.
2. Botão "Novo Serviço       hospedado", a janela abaixo será apresentada.

3. Escolha a       assinatura;
4. Defina um nome para o       serviço;
5. Defina um prefixo de url;
6. Escolha a região       ou grupos de afinidades;
7. Escolha a opção de deploy       (Stage ou produção);
8. Defina um nome para       implantação;
9. Local do pacote,       clique no botão "Procurar Localmente..." e vá para a pasta,       C:\temp\WindowsAzurePHPApp\Release, selecione o arquivo de pacote.       WindowsAzurePHPApp.cspkg;
10. Arquivo de configuração,       clique no botão "Procurar Localmente..." e vá para a pasta,       C:\temp\WindowsAzurePHPApp\Release, selecione o arquivo de pacote.       WindowsAzurePHPApp.cscfg;
11. Clique em ok, e aguarde       alguns minutos até realizar o deploy da solução. O processo consiste       em  subir uma nova instância do       Windows Server 2008, instalar o PHP e instalar nossa aplicação.

Quando a role alterar o seu estado para ocupado sua aplicação vai estar pronta para ser visualizada.

Agora temos uma solução PHP instalada no Windows Azure, por mais que a nossa aplicação seja simples, o processo de instalação e deploy é o mesmo para qualquer aplicação.

A página que estou interessado aqui é a de PHP https://www.windowsazure.com/pt-br/develop/php/, nela você vai encontrar o link para download do SDK para PHP, artigos, exemplos e muito mais.

Nesse artigo, farei a instalação automáticas dos componentes necessários para configurar o ambiente de desenvolvimento utilizando o Microsoft Web Platform Installer ou simplesmente o WebPI.

Vamos instalar os seguintes componentes:

• PHP 5.3.1
• Windows Azure SDK
• SQL Server Express
• Windows Azure PHP SDK

PHP 5.3.1

Para instalar o PHP, utilizando o WebPI clique no link http://www.microsoft.com/web/gallery/install.aspx?appid=PHP53 e permita a execução do WebPI. Se você não possuir o WebPI instalado, você será redirecionado para instalar o WebPI, depois você será apresentado ao wizard de instalação abaixo.

A primeira tela apresenta informações sobre o software que será instalado e quem é o responsável por publicar esse conteúdo e em seguida é apresentado os pré-requisitos.

Ao instalar o PHP será instalado:

• PHP manager;

• Driver do Sql Server para      PHP.

Windows Azure SDK

Da mesma forma que o PHP vamos utilizar o WebPI para instalar o Windows Azure SDK, faremos isso clicando sobe o link http://www.microsoft.com/web/gallery/install.aspx?appid=WindowsAzureSDK.

O Windows Azure SDK contém todas os componentes necessários para testar e criar e empacotar aplicações para o emulador local, assim como para o Windows Azure.

Com o emulador conseguimos simular nós de computação e os serviços de storage, porém existem algumas funcionalidade que não são suportadas pelo emulador (diferenças do emulador de storage e o serviço real - http://msdn.microsoft.com/en-us/library/windowsazure/gg433135.aspx)

SQL Server Express

O SQL Server é opcional, mas para utilizar os emuladores do serviço de storage o SQL server deve ser instalado. O SQL Server Express é fornecido gratuitamente e funciona muito bem com o emulador, se você não possuir uma instalação completa do SQL Server, recomendo a instalação.

Para instalar clique no link http://www.microsoft.com/web/gallery/install.aspx?appid=sqlexpress e complete o Wizard de instalação.

Windows Azure SDK for PHP

O SDK para PHP pode ser obtido através da URL http://phpazure.codeplex.com/, o SDK é um projeto open source mantido pelo time de interoperabilidade da Microsoft e possui as seguintes características:

• Classes PHP para Windows Azure Blobs, Tables & Queues (para operações CRUD);
• Classes Helper para transporte HTTP, AuthN/AuthZ, REST & Gerenciamento de erro;
• Gerenciamento, Instrumentação e suporte a log;
• Suporte para sessões PHP utilizando Table Storage;
• API de gerenciamento;
• Cliente de diagnóstico;
• Conjunto de linha de comando para:
  • Empacotamento;
  • Gerenciamento;
  • Diagnóstico;
  • Deployment

Após realizar o download do SDK para PHP, precisamos configurá-lo. O Windows Azure SDK para PHP não possui um instalador, ele é um pacote de arquivos que você pode imediatamente começar a utilizar.

Descompacte o arquivo PHPAzure-4.1.0 para a pasta  C:\Program Files\Windows Azure SDK for PHP, em seguida adicione o diretório C:\Program Files\Windows Azure SDK for PHP\bin na variável de sistema PATH.

Em seguida abra o console do Windows e digite "package", você deve visualizar o seguinte resultado.

Iniciando o ambiente de desenvolvimento

O emulador de computação

Após a instalação do SDK no menu iniciar, você deve possuir um novo item chamado "Windows Azure Emulators" seguido pelo número de versão. Abra a pasta e inicie o "Compute Emulator" se alguma janela de segurança aparecer, clique em permitir (Allow).

Depois de iniciado o emulador de computação, você vai possuir dois novos ícones no seu System Tray, a partir desse ícone você abrir a interface do emulador de compute e iniciar/parar os emuladores.

Storage Emulator

Voltando para o menu iniciar, podemos também iniciar o emulador de storage, o mesmo procedimento
pode ser realizado pelo ícone do Windows Azure incluído no seu System Tray e exibido anteriormente.

Se o emulador for iniciado com sucesso, você vai ver a seguinte janela.

 Verificando se o PHP foi instalado com sucesso.

Execute o console do Windows, no menu iniciar digite cmd e tecle <enter>, em seguida digite "php" na linha de comando, conforme imagem abaixo. 

Se ao digitar a tecla <enter> você receber uma mensagem de erro do tipo "MSVCR71.dll", como a apresentada na figura abaixo, execute os passos a seguir, caso contrário o seu ambiente de desenvolvimento está pronto para uso.

Troubleshooting para o erro MSVCR71.dll

Em alguns caso ao executar o PHP ocorre o seguinte erro "falta da dll MSVCR71.dll", para corrigir você deve.

1. Instalar o Microsoft .NET Framework Version 1.1 Redistributable Package;

2. Após instalação, abra o console do Windows com os direitos elevados (clique com o botão direito do mouse no ícone e selecione a opção "Executar como Administrador";

3. Digite o seguinte comando { copy c:\Windows\Microsoft.NET\Framework\v1.1.4322\msvcr71.dll ;      "C:\Program Files (x86)\PHP\" }. OBS: o diretório de instalação do php pode ser diferente para cada instalação.

4. Em seguida digite "php -v" na linha de comando.

Agora você já possui um ambiente de desenvolvimento configurado para trabalhar com PHP

Testando tudo junto

Construir uma aplicação PHP no Windows Azure pode ser um processo complexo que envolve configurar os arquivos ServiceConfiguration.cscfg e ServiceDefinition.csdef, e fazer scripts para que seja instalado o PHP e fazer quaisquer customização do PHP que seja necessário. Por sorte o PHP Windows Azure SDK possui um uma ferramenta de scaffolding que cria a estrutura básica de um projeto PHP para Windows Azure para você.

Assim você pode copiar seus arquivos para o projeto criado e realizar o deploy imediatamente, você tem o controle de todo o processo de deploy.

Execute o comando para visualizarmos a estrutura criada.

scaffolder run -out="C:\temp\WindowsAzurePHPApp"

O comando vai criar a seguinte estrutura de diretórios e arquivos:

PhpOnAzure.Web

    |bin

    |php

    |resources

    |diagnostics.wadcfg

    |Web.config

ServiceConfiguration.cscfg

ServiceDefinition.csdef 

Segue abaixo a descrição de cada diretório:

• PhpOnAzure.Web - Este diretório será a raiz da sua aplicação (WebRoot), Todos os arquivos da aplicação vão estar neste diretório;

• bin - Contém os scripts de iniciação que vão instalar o PHP e realizar outras funções que você desejar, durante o deploy;

• php - Contém configurações customizadas do PHP.ini, assim como extensões customizadas que sua aplicação pode vir a requerer;

• resources - Contém vários arquivos que dão suporte ao deploy de seu aplicativo.

• diagnostics.wadcfg - Um arquivo básico de diagnóstico. Você pode utilizá-lo para traquear itens como uso de CPU e largura de banda.

• ServiceConfiguration.cscfg - Contém as definições de configuração do Windows Azure para o seu  deployment, este arquivo será copiado junto com o arquivo final;

• ServiceDefinition.csdef - Contem informação sobre a configuração do seu deployment, este arquivo  é  incluído no pacote final que será  carregado para o Windows Azure.

No próximo artigo, veja como realizar deploy de uma aplicação PHP para o Windows Azure.

Obrigado,

Vinícius.