Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1908, comments - 2047, trackbacks - 352

My Links

News

Your host

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

Cookie e Privacy

Disabilita cookie ShinyStat

Microsoft MVP

My MVP Profile

Microsoft Certified Professional

Microsoft Specialist

Xamarin Certified Mobile Developer

Il mio libro su VB 2015!

Pre-ordina il mio libro su VB 2015 Pre-ordina il mio libro "Visual Basic 2015 Unleashed". Clicca sulla copertina per informazioni!

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!

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

Le vostre visite

I'm a VB!

Guarda la mia intervista a Seattle

Follow me on Twitter!

Altri spazi

GitHub
I miei progetti open-source su GitHub

Article Categories

Archives

Post Categories

Image Galleries

Privacy Policy

Sviluppare Metro-style app per Windows 8 con Visual Basic - ottava parte

Proseguiamo la serie di post dedicati allo sviluppo di app Metro per Windows 8 con Visual Basic. Nella puntata precedente abbiamo descritto gli stati di sospensione e attivazione che vanno gestiti, in questa puntata invece parliamo del Search contract.

La ricerca in Windows 8 e Metro

Windows 8 offre il cosiddetto Search Charm, ossia una funzionalità di ricerca integrata nel sistema operativo in grado di cercare non solo elementi di sistema, ma anche all'interno delle app. Questo quindi è un altro modo con cui le app si integrano con Windows. Un esempio di ricerca è dato dalla seguente figura, che mostra come il search charm tiri fuori dei risultati da più punti come File, elenco App, impostazioni:

Ovviamente la ricerca è assolutamente personalizzabile in base all'app, notate però come sia buona norma offrire dei filtri ed è anche possibile mostrare dei suggerimenti da visualizzare man mano che l'utente digita nel campo di ricerca.

E' fondamentale evidenziare che il Search charm non è un plus. E' al contrario un obbligo da rispettare se la propria app deve implementare funzionalità di ricerca. In altre parole: non dovrai mai implementare il tuo motore di ricerca interno, dovrai bensì integrare l'app col search charm e con quello tirare fuori i risultati. Vediamo ora come sia facile farlo in Visual Basic.

Implementare il Search Contract nella propria app

Visual Studio 11 offre uno specifico modello di elemento per implementare con facilità la ricerca. Quindi ci basta selezionare Project, Add New Item. Nella dialog di aggiunta selezioniamo il template chiamato Search Contract:

Questa operazione aggiungerà al progetto una pagina che implementa:

  • lato XAML, uno scheletro di interfaccia per mostrare l'elenco dei risultati
  • lato codice, l'infrastruttura per la navigazione e una serie di porzioni di codice che rendono la pagina già funzionante, a cui va sostanzialmente aggiunto il solo codice che esegue le query

Posto che tutto è migliorabile e che in questo esempio il codice mi serve per spiegare le cose in modo semplice, supponiamo di voler visualizzare sia l'elenco completo dei risultati di ricerca sia un filtro che mostri l'elenco degli articoli pubblicati negli ultimi 30 giorni. Modifichiamo il metodo OnNavigatedTo, all'interno del quale è già visibile la definizione di filtri e contenitori dei risultati, che vanno ora popolati.

Ecco come lo definiamo:

    Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
 
        ' Unpack the two values passed in the parameter object: query text and previous
        ' Window content
        Dim parameters = DirectCast(e.Parameter, Tuple(Of String, UIElement))
        Dim queryText = parameters.Item1
        Me._previousContent = parameters.Item2
 
        ' TODO: Application-specific searching logic.  The seach process is responsible for
        '       creating a list of user-selectable result categories:
        '
        '       filterList.Add(New Filter("<filter name>", <result count>))
        '
        '       Only the first filter, typically "All", should pass True as a third argument in
        '       order to start in an active state.  Results for the active filter are provided
        '       in Filter_SelectionChanged below.
 
        Me.query = From feed In App.DataSource.Feeds
                   From f1 In feed.Items
                   Where f1.Title.ToLower.Contains(queryText.ToLower) Or f1.Content.ToLower.Contains(queryText.ToLower) Or f1.Author.ToLower.Contains(queryText.ToLower)
                   Select f1
 
        Me.filteredQuery = From feed In App.DataSource.Feeds
                   From f1 In feed.Items
                   Where f1.Title.ToLower.Contains(queryText.ToLower) Or f1.Content.ToLower.Contains(queryText.ToLower) Or f1.Author.ToLower.Contains(queryText.ToLower)
                   Let minimumDate = Date.Today.AddDays(-30)
                   Where f1.PubDate < Date.Today AndAlso f1.PubDate > minimumDate
                   Select f1
 
        Dim filterList = New List(Of Filter)()
        filterList.Add(New Filter("All", query.Count, True))
        filterList.Add(New Filter("Last 30 Days", filteredQuery.Count))
 
        ' Communicate results through the view model
        Dim bindableProperties As New PropertySet()
        Me.DefaultViewModel("QueryText") = ChrW(&H201C) + queryText + ChrW(&H201D)
        Me.DefaultViewModel("CanGoBack") = Me._previousContent IsNot Nothing
        Me.DefaultViewModel("Filters") = filterList
        Me.DefaultViewModel("ShowFilters") = filterList.Count > 1
 
        Me.DefaultViewModel("Results") = New ObservableCollection(Of FeedItem)(query)
    End Sub

QueryText è una variabile che contiene la chiave di ricerca e viene recuperata dagli argomenti passati alla pagina. In base a questa variabile ho due query LINQ, la prima che mi tira fuori tutti i risultati, la seconda quelli filtrati.

La collezione di filtri è già definita di default e include l'aggiunta del filtro "all". Aggiungiamo poi il filtro personalizzato, avendo cura di passare il numero di elementi che verranno così mostrati in preview. Dobbiamo poi gestire la selezione del filtro da parte dell'utente, attraverso il gestore Filter_SelectionChanged:

    Protected Sub Filter_SelectionChanged(sender As Object, e As SelectionChangedEventArgs)
 
        ' Determine what filter was selected
        Dim selectedFilter = TryCast(e.AddedItems.FirstOrDefault(), Filter)
        If selectedFilter IsNot Nothing Then
 
            ' Mirror the results into the corresponding Filter object to allow the
            ' RadioButton representation used when not snapped to reflect the change
            selectedFilter.Active = True
 
            If selectedFilter.Name = "All" Then
                Me.DefaultViewModel("Results") = New ObservableCollection(Of FeedItem)(Me.query)
            Else
                Me.DefaultViewModel("Results") = New ObservableCollection(Of FeedItem)(Me.filteredQuery)
            End If
        End If

    End Sub

In modo piuttosto essenziale determiniamo il nome del filtro e, a seconda della selezione, lo assegnamo al ViewModel che rappresenta i risultati di ricerca attraverso l'istanza di una ObservableCollection che, come sapete, è idonea al data-binding con lo XAML. 

Come l'app interagisce con Windows

L'app interagisce col Search Charm allorquando andiamo a scrivere la seguente riga nel metodo OnSearchActivated della classe App:

    Protected Overrides Sub OnSearchActivated(ByVal e As Windows.ApplicationModel.Activation.SearchActivatedEventArgs)
        SearchResultsPage1.Activate(e.QueryText)
    End Sub

Questo metodo viene invocato quando l'app reagisce alla ricerca e invoca, a sua volta, il metodo Activate della pagina di ricerca alla quale passa la chiave di ricerca ricevuta da Windows.

Test della ricerca

Se a questo punto proviamo a lanciare l'app, possiamo invocare il Search charm e digitare una chiave di ricerca. Questa verrà recepita dall'applicazione che mostrerà i risultati completi e filtrati:

Tralasciando l'estetica della pagina di ricerca, che andrebbe certamente migliorare, questi sono i passaggi principali da eseguire per implementare la ricerca integrata con Windows.

Un possibile proseguimento è quello di aggiungere anche qui l'app bar con il pulsante che apre la pagina relativa all'elemento selezionato. Notate infine come la pagina implementi, di default, il pulsante per tornare indietro alla pagina precedente.

Conclusioni

Il Search charm contribuisce a creare applicazioni di qualità e implementarlo non è per nulla complesso. Nella prossima puntata andremo a correggere tutta una serie di errori fatti nei precedenti post, relativi alle guidelines della UI. Questo ci servirà (ed è servito a me in primis) a capire il perché di determinate cose, come vanno implementate correttamente e come porsi nell'ottica della certificazione.

Per tale ragione questa volta niente codice, che sarà disponibile la prossima volta con le migliorie necessarie

Alessandro

Print | posted on martedì 29 maggio 2012 22:26 | Filed Under [ Visual Basic UWP e Windows Store Apps Visual Studio 2012 ]

Powered by:
Powered By Subtext Powered By ASP.NET