Montando um PodCast com Blend 2.5 e VS 2008

Montei um modelo simples de podCast (utilizando o www.jovemnerd.com.br como referência de podCast)

Olha só o tamanico do XAML:

Dêem uma olhada no arquivo final:
www.marpaservicos.com.br/_filez/podCast.exe

p.s. não é vírus. o Tempo de carregamento do Podcast depende de sua conexão.

p.s.2. É necessário ter framework 3.5 instalado. Caso não tenham acesse esse link: http://www.microsoft.com/downloads/details.aspx?FamilyID=333325FD-AE52-4E35-B531-508D977D32A6&displaylang=en

Em breve colocarei o code behind dele explicando as funções do elemento MediaElement no Blend e no VS

Criando um Leitor de RSS utilizando o Blend 2 - Parte II [Final]

Como vimos na parte anterior montamos uma imagem no blend que carrega a imagem de um RSS.


fig.1 - Imagem inserida no Canvas

Agora trabalharemos com um grid de informações que através de um link direto de uma amostra de títulos carregará a descrição de seu item em um TextBlock.
Primeiramente vamos incluir o grid no Canvas। Ele se encontra na parte de Tools do nosso blend como demonstra a figura abaixo:



fig.2 – Inserção do GRID no Canvas
1. Botão para inserção de grid no Canvas
Clique na opção GRID (se caso esta não estiver como padrão) e faça a área dentro no Canvas com um tamanho na qual vc preferir. A figura abaixo demonstra o tamanho que defini, notando-se que também alterei nas opções de tamanho da imagem do RSS.



fig.3 – Grid inserido na aplicação
Como todo e qualquer objeto inserido no Blend, o GRID também possui propriedades específicas para tal. E agora, vamos mexer nessas propriedades para manter o sistema coligado ao RSS que estamos aplicando. Vamos clicar no quadradinho pequeno que se encontra no canto direito na parte Common Properties > DataContext.


fig.4 – área de Propriedades comuns do grid
Uma vez clicado, teremos que criar um novo Data Bind, então aparecerá uma pequena janela aonde você escolherá “Data Binding...” e, dali você fara´o vinculo necessário para montagem completa do grid relacionado ao RSS.


fig.5 – Aplicação de Data Binding... no GRID
Quando clicado no “Data Binding...” Uma janela se abrirá para a criação do Bind. Como nesse tutorial queremos ver principalmente os itens de RSS vamos selecionar. No Box da direita chamada de fields , clique na abertura até encotrar o a tag Item(Array), selecione-o e depois clique no botão Finish.


fig. 6 – Selecionando o Item(Array) para criação do Bind no GRID
Bom, já estamos quase lá, uma vez formado o bind no grid agora vamos colocar um listBox e um TextBlock para mostrar o funcionamento do modelo.









Como demonstra a figura, selecionamos o listBox para colocarmos no Canvas (1) . Note que é extremamente importante que esse listBox fique dentro do grid (2). Se caso qdo criar o objeto ele não constar dentro do grid, você pode arrastá-lo através do layers demonstrados no Objects and Timeline ou, clicando duas vezes no grid para ele ficar selecionado e daí você inserir o objeto dentro (3).


fig. 7 – Criando um listBox
Uma vez criado o listBox devemos seguir quase que os mesmos procedimentos para montar o seu bind. Vamos na parte Common Properties > ItemsSource, Vamos criar um novo “Data Binding...”. Nessa nova janela que se abrirá escolheremos a aba “Explicit Data Content” , lá escolheremos a tag Item(Array) , e a partir dali clicamos no botão Define Data Template.

fig. 8 – Criando um Data Binding no listBox
Dali uma nova janela se abrirá, e você selecionará somente o Box title. Isso indicará que, no listBox aparecerão somente os títulos do RSS. Uma vez montado isso montaremos dentro do grid um TextBlock, vinculando-o ao click da lista diretamente no carregamento de seu conteúdo.


fig. 9 – Criando um Data Template no listBox
Quando clicado em ok, automaticamente os títulos do RSS já estarão carregados, como demonstra abaixo:


fig. 10 – Títulos carregados no listBox
Para concluir vamos criar o TextBlock para exibição do conteúdo. Ele se encontra no Tools do Blend 2. Depois coloque também dentro do grid, da mesma maneira que você fez com o listBox. Uma vez criado o TextBlock (fig. 11) devemos seguir quase que os mesmos procedimentos para montar o seu bind. Vamos na parte Common Properties > Text, Vamos criar um novo “Data Binding...”. Nessa nova janela que se abrirá escolheremos a aba “Explicit Data Content” , lá escolheremos a tag Description , e a partir dali clicamos no botão Define Data Template (fig. 12).


fig. 11 – Criação do TextBlock

E agora a melhor parte, dê F5, e veja o aplicativo que você acabou de criar rodando. Até mais e boa sorte a todos.
Obs.: Todas as imagens utilizadas, tb como a edição HTML desse post foi feito com Microsoft Expression Design e Microsoft Expression Web respectivamente.

Criando um Leitor de RSS utilizando o Blend 2 - Parte I



Com uma ferramenta dessas, é muito prático e fácil montar essa estrutura de leitura. Utilizaremos agora a versão mais atualzada desde este post.

Trata -se do Expression Blend 2 September Preview Clique aqui para baixar.

É necessário tb possuir os seguintes requisitos:

• Windows Vista


• Microsoft Windows® XP c/ Service Pack 2 (SP2)

Requisitos Mínimos:

• Processador Intel® Pentium® ou AMD processor, 1 GHz c/ MMX ou similar


• 512 MB deRAM


• 350 MB disponível em seu HD


• DirectX® 9


• 1024 x 768 de resolução c/ 24 bit de cores

Recomendado:

• Processador Intel® Pentium® ou AMD processor, 2 GHz c/ MMX ou similar


• 1 GB de RAM


• Microsoft DirectX® 9.0 c/ 256 de MB de vídeo ou superior

fig.01 - Detalhes sobre o Blend 2
Bom, agora vamos nos centerertir um pouco. Vamos criar agora um novo projeto no Blend 2:


fig.02 - Imagem de criação de um novo projeto



fig.03 - Janela de criação de um novo projeto


fig.04 - Detalhes da janela de criação de um novo projeto

1. Selecionando WPF Application (.exe)


2. Nome do projeto: Defini o nome do projeto como CRM_Reader_MSDN. Esse título pode ser a sua escolha


3. Aonde vamos salvar o projeto. Você pode definir no local de sua preferência


4. Linguagem de programação principal. Eu particularmente defini como Visual Basic. Sendo este também a sua escolha.

Em seguida, abrirá a área de trabalho aonde iremos trabalhar.


fig.05 - Área de trabalho do Blend
Note que abaixo da aba Project, Existe uma opção chamada Data, que será o responsável para capturarmos o RSS definido como exemplo. Nós iremos utilizar a opção +XML para pegar a URL.


fig.06 - Detalhes da captura do XML

1. Indicação para captura do XML.

Quando essa parte é clicada, uma janela abre-se para colocarmos o endereço do RSS:


fig.07 - Janela de input da URL


fig.08 - Janela de input da URL já digitada
Note que ao lado da área de trabalho, aparece os detalhes do RSS capturado, mostrando, os detalhes da cada TAG XML do RSS escolhido. Expandindo cada ponto você verá toda a estrutura RSS mantendo, na maioria das vezes o padrão W3C.


fig.09 - Detalhes das TAGS XML do RSS
Vamos expandir a TAG image:


fig.10 - Expansão da TAG image
Agora vamos fazer o seguinte, Clique com o mouse na TAG url dentro da TAG image e arraste até sua área de desenho do Blend 2 (conhecido como Canvas):


fig.11 - Arrastando a TAG url dentro de image para o Canvas

1. Expansão da TAG Image

Nisso, abrirá uma nova janela para você colocar certas opções. Nessa primeira parte, vamos inserir uma imagem de RSS dentro de nosso Canvas para criarmos um cabeçalho para o programa


fig.12 - Aplicando a imagem dentro do Canvas
Agora vamos dar um Bind no Canvas. Ao abrir essa janela selecione a opção Image. Teoricamente estamos aplicando uma url de imagem do RSS para que ela fique em nosso Canvas. Mais uma janela se abrirá para você aplicar o que define na imagem. Na parte Select Field selecione a opção Source e clique em ok


fig.13 - Detalhes do Data Binding
Pronto! A imagem foi inserida no Canvas. Em muito breve (daqui dois dias no máximo) colocarei o resto desse tutorial para montarmos o software por completo.

Espero que tenham gostado


fig.14 - Imagem inserida no Canvas

Abaixo é código que foi feito em XAML até o momento:

<Window

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

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

x:Class="Window1"

x:Name="Window"

Title="Window1"

Width="640" Height="480" xmlns:d="http://schemas.microsoft.com/expression/blend/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

<Window.Resources>

<XmlDataProvider x:Key="rssDS" d:IsDataSource="True" Source="http://rss.terra.com.br/0,,EI6501,00.xml"/>

</Window.Resources>

<Grid x:Name="LayoutRoot">

<Image Margin="119,194,313,59" Source="{Binding Mode=Default, Source={StaticResource rssDS}, XPath=/rss/channel/image/url}"/>

</Grid>

</Window>

Obs.: Todas as imagens utilizadas, tb como a edição HTML desse post foi feito com Microsoft Expression Design e Microsoft Expression Web respectivamente.


Márcio Agnelo
marcioagnelo@gmail.com
Web Development Coordinator