Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1742, comments - 2327, trackbacks - 356

My Links

News

Your host

This is me! Questo spazio è dedicato a Microsoft® .NET®, di cui sono molto appassionato :-)

These postings are provided 'AS IS' for entertainment purposes only with absolutely no warranty expressed or implied and confer no rights.
If you're not an Italian user, please visit my English blog

Microsoft MVP

My MVP Profile

Il mio libro su WPF 4.5.1!

Clicca sulla copertina per informazioni! E' uscito il mio libro "Programmare con WPF 4.5.1". Clicca sulla copertina per informazioni!

Il mio libro su VB2012!

Il mio nuovo libro su Visual Basic 2012 E' uscito il mio libro "Visual Basic 2012 Unleashed". Clicca sulla copertina per informazioni!

Visual Basic Tips & Tricks Team Member

Le vostre visite

I'm a VB!

Guarda la mia intervista a Seattle

Follow me on Twitter!


Guarda i miei webcast MSDN

Altri spazi

CodePlex download Scarica i miei progetti open-source su CodePlex!

Cerca nel blog



Seguimi su Twitter!

Article Categories

Archives

Post Categories

Image Galleries

.NET Framework

Back to basics

Blogroll

Help 1.x e 2.0

Microsoft & MSDN

Setup & Deployment

Visual Basic .NET e 2005

Windows Phone: utilizzare le Bing API per cercare e mostrare immagini

Molte volte nelle proprie applicazioni, indipendentemente dalla piattaforma di sviluppo, si ha la necessità di eseguire ricerche e di presentare i risultati della ricerca in un modo appropriato all'applicazione stessa che non sia, quindi, all'interno di un'istanza del browser.

Microsoft, per il suo motore di ricerca Bing, mette a disposizione delle specifiche API che è possibile utilizzare per interrogare Bing e ottenere vari tipi di risultati, che siano ricerche di termini, di immagini, di video, ecc.

In questo post vediamo come utilizzare le API di Bing per ottenere un elenco di immagini da visualizzare in un'app per Windows Phone 7.

La prima cosa da fare per poter fruire delle Bing API è ottenere un codice identificativo per la propria applicazione. Questo si fa registrandosi, con il proprio Live ID, sul sito dedicato agli sviluppatori.

NOTA BENE: al momento le Bing API sono disponibili free, ma Microsoft ha iniziato un processo di migrazione delle stesse verso il Windows Azure Marketplace, il che vuol dire che tra un po' di tempo non saranno più gratuite.

In questo post tratterò il caso specifico della ricerca di immagini, per tutte le altre opportunità vi rimando alla documentazione ufficiale. I servizi di Bing possono restituire dati in vari formati, come JSON o XML. E' quest'ultimo formato che utilizzeremo insieme a LINQ.

Per questo esempio è sufficiente creare un progetto di tipo Windows Phone Application. Di tutte le informazioni che Bing restituisce, in questo caso ce ne interessano solo tre: il titolo dell'immagine, il suo URL e l'URL dell'anteprima; quest'ultima verrà visualizzata nella pagina dell'app. Dobbiamo quindi rappresentare queste informazioni con una classe:

 Public Class BingImage

    Public Property Title As String
    Public Property ImageUri As Uri
    Public Property ThumbnailUri As Uri
End Class

Ora andiamo a definire lo XAML che permette la visualizzazione delle anteprime. In questo particolare esempio siamo nell'unica pagina dell'app. Sicuramente utilizzeremo una ListBox, della quale dobbiamo ridefinire il template del contenitore che visualizza i dati. Una ottima scelta è il WrapPanel che viene fornito attraverso il Silverlight Toolkit per Windows Phone, che va quindi installato (non solo per seguire questo post, ma perché è un must have). Eccolo qui:

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox ItemsSource="{Binding}" x:Name="PhotoListBox"
                         SelectionChanged="PhotoListBox_SelectionChanged">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Image Margin="3" Width="96" Height="96" 
                                   Source="{Binding ThumbnailUri}"/>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>

Come vedete abbiamo ridefinito l'ItemsPanelTemplate sostituendo lo StackPanel di default con un WrapPanel. Quest'ultimo permetterà il posizionamento dinamico "a capo" delle thumbnail. Fatto questo abbiamo semplicemente definito l'ItemTemplate che contiene un'immagine, in binding con la proprietà ThumbnailUri della classe BingImage.

Andiamo ora nel code-behind della pagina e aggiungiamo subito le seguenti direttive Imports:

Imports System.Xml.Linq
Imports Microsoft.Phone.Tasks
Imports <xmlns:mms="http://schemas.microsoft.com/LiveSearch/2008/04/XML/multimedia">
Imports <xmlns="http://schemas.microsoft.com/LiveSearch/2008/04/XML/element">

Poiché andremo a lavorare con LINQ to XML, importare i namespace sopra citati diventa necessario per referenziare gli elementi correttamente. Nel codice della pagina principale cominciamo a stabilire l'id dell'applicazione e la query da eseguire:


    Const bingAppId As String = "YOUR_BING_APPLICATION_ID_GOES_HERE"
    Const bingQuery As String = "mare%20in%20inverno"

La query contiene i termini di ricerca, che vanno separati tra loro con uno spazio (%20). In questo caso la ricerca dovrà tirare fuori immagini relative a "mare in inverno". Abbiamo detto che tra i vari formati restituiti da Bing, c'è XML. Quindi utilizzeremo il classico meccanismo legato alla classe WebClient per scaricare il risultato della ricerca e analizzarlo con LINQ, in questo modo:

    Private Sub MainPage_Loaded(sender As Object, e As System.Windows.RoutedEventArgsHandles MyBase.Loaded
        Deployment.Current.Dispatcher.BeginInvoke(Sub()
                                                      Dim client As New WebClient
 
                                                      AddHandler client.DownloadStringCompleted,
                                                          Sub(sender1 As Object, e1 As DownloadStringCompletedEventArgs)
                                                              Dim doc = XDocument.Parse(e1.Result)
 
                                                              Dim query = (From img In doc...<mms:ImageResult>
                                                                          Select New BingImage With {.ImageUri = New Uri(img.<mms:MediaUrl>.Value, UriKind.Absolute),
                                                                                                     .ThumbnailUri = New Uri(img.<mms:Thumbnail>.<mms:Url>.Value, UriKind.Absolute),
                                                                                                     .Title = img.<mms:Title>.Value}).ToList
 
                                                              Me.PhotoListBox.ItemsSource = query
                                                          End Sub
 
                                                      client.DownloadStringAsync(New Uri("http://api.bing.net/xml.aspx?AppId=" + bingAppId + _
                                                                                         "&Query=" + bingQuery + _
                                                                                         "&Sources=Image&Version=2.0&Market=en-us&Adult=Moderate&Image.Count=20&Image.Offset=0",
                                                                                         UriKind.Absolute))
                                                  End Sub)
    End Sub

Notate come il contenuto XML venga convertito in un XDocument tramite il suo metodo Parse. Da qui in poi si fa una classica query (VB ha gli XML literals ) che andrà a generare una collection di oggetti BingImage, assegnata alla proprietà ItemsSource della ListBox.

La query string da inviare a Bing è composta da una parte prefissata, seguita dall'app Id e dai termini di ricerca. La parte finale permette di specificare, in modo molto intuitivo, la localizzazione (Market), filtri per adulti (Adult=Moderate) e il numero di immagini da includere nei risultati.

Giusto per dimostrare l'utilizzo di altri oggetti, facciamo in modo che al tocco di un'anteprima venga aperta l'immagine originale in un'istanza del browser, gestendo il SelectionChanged della ListBox:

    Private Sub PhotoListBox_SelectionChanged(sender As System.Object, e As System.Windows.Controls.SelectionChangedEventArgs)
        Dim webTask As New WebBrowserTask
        webTask.Uri = CType(Me.PhotoListBox.SelectedItem, BingImage).ImageUri
        webTask.Show()
    End Sub

In questo caso viene chiaramente sfruttata la proprietà ImageUri della classe BingImage. La proprietà Title può essere utile se l'immagine viene mostrata in un'altra pagina in cui si voglia mostrare il titolo e verrà passata in query string sul metodo di navigazione.

Il seguente è il risultato che otteniamo nella nostra app:

Il codice a corredo può essere scaricato da questo indirizzo dell'area Download di Visual Basic Tips & Tricks.

Alessandro

Print | posted on lunedì 23 aprile 2012 13:46 | Filed Under [ Visual Basic Silverlight e Windows Phone ]

Feedback

No comments posted yet.

Post Comment

Title  
Name  
Email
Url
Comment   
Please add 1 and 1 and type the answer here:

Powered by:
Powered By Subtext Powered By ASP.NET