Questa volta arrivo subito al sodo. Nell’ultimo post avevamo ottenuto l’elenco dei set fotografici associati ad un particolare utente. Lo scopo è quello di elencare questi set in qualche modo e di farli vedere in maniera gradevole all’utente che sta usando la nostra applicazione. La window principale si chiama MainWindow e questo è il suo XAML (non completo):

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="50" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  
  <StackPanel Orientation="Horizontal" Grid.Row="0"
          VerticalAlignment="Center">
    <TextBox Name="UsernameTextBox" Text="IgorDamiani"
            Width="150" Margin="4" />
    <b:FlickrButton x:Name="ListPhotoSets"
            Content=" List Photo Sets " Margin="4" Click="listPhotosets" />
    <b:FlickrButton x:Name="WebToUserPhotos"
            Content=" See User's Photos " Margin="4"
            Click="webToUserPhotos" IsEnabled="False" />
    <b:FlickrButton x:Name="WebToUserWorldMap"
            Content=" See User's World Map " Margin="4"
            Click="webToUserWorldMap" IsEnabled="False" />
  </StackPanel>
  
  <ListBox Name="PhotoSetListBox" Grid.Row="1"
          MouseDoubleClick="PhotoSetListBox_MouseDoubleClick"
      ItemsSource="{Binding Source={StaticResource sets}, Path=FlickrBrowserPhotoset}" />
</Grid>

Lo XAML è concettualmente piuttosto semplice. In pratica, contiene una Grid con due sole righe. La prima ha un’altezza fissa e contiene uno StackPanel orizzontale che a sua volta contiene una TextBox e tre FlickrButton. La TextBox serve per ricercare un utente attraverso il suo username. Il primo FlickrButton è quello che ci interessa di più, perchè una volta cliccato ricerca i set fotografici dell’utente e li visualizza nella ListBox che si trova nella seconda riga della Grid. Gli altri due FlickrButton raggiungono due Url differenti: per adesso possiamo bellamente ignorarli.

Quello che ci interessa in questo momento sono tre cose: la TextBox UsernameTextBox, il FlickrButton ListPhotoSets e la ListBox PhotoSetListBox. Dall’interazione di questi tre controlli nasce l’applicazione vera e propria.

Se diamo un’occhiata al post precedente, vediamo come il popolamento della ListBox avviene attraverso l’impostazione della sua proprietà ItemsSource. Il valore assunto da questa proprietà è un oggetto di tipo FlickrBrowserPhotosetCollection, che è una classe che semplicemente è una List<FlickrBrowserPhotoset>. La classe FlickrBrowserPhotoSet espone una proprietà Title (titolo del set fotografico), NumberOfPhotos (Numero di foto nel set), PrimaryPhotoUrl (url della foto che fa da copertina al set), PhotosetSquareThumbnailUrl e Photos. Queste ultime due per adesso non sono utilizzate.

Questo per dire che possiamo lavorare sulla proprietà ItemTemplate della ListBox, specificando l’aspetto che ogni riga della ListBox deve assumere. Con aspetto intendo per esempio un pannello, che contiene altri pannelli, altri controlli e sui quali possiamo definire stili, triggers e tutto il resto. Diamo ancora una volta un’occhiata allo XAML sopra, nel punto in cui viene dichiarata la ListBox: viene specificato che la sorgente di ItemsSource è la risorsa statica sets, e viene specificato che ogni elemento aggiunto alla ListBox sarà di tipo FlickrBrowserPhotoset. Questo è importante, perchè dentro il template faremo un po’ di binding indicando la proprietà che ogni controllo deve visualizzare. Ultima nota: la risorsa sets viene popolato dal code-behind in C#, l’abbiamo visto l’altra volta. Un piccolo rimando è necessario per ricordarcelo:

FlickrBrowserPhotosetCollection setFoto = (FlickrBrowserPhotosetCollection)
    this.FindResource("sets");
// Popolo setFoto
// ...
// Assegno ItemsSource
PhotoSetListBox.ItemsSource = setFoto;

Con i metodo FindResource ottengo l’istanza di FlickrBrowserPhotosetCollection. Poi popolo l’oggetto setFoto con tutti i set fotografici che mi servono e poi assegno ItemsSource. Ne abbiamo parlato l’altra volta, perciò chiudo qui.

L’ultima cosa che voglio far vedere è lo XAML che definisce il template che il runtime di WPF utilizza per disegnare ogni Item aggiunto alla ListBox:

<Style TargetType="{x:Type ListBox}">
  <Setter Property="ItemTemplate">
    <Setter.Value>
      <DataTemplate>
        
        <StackPanel Margin="4" Orientation="Horizontal">
          
          <Image Margin="4">
            <Image.Source>
              <Binding Path="PrimaryPhotoUrl" />
            </Image.Source>
          </Image>

          <StackPanel Margin="4" Orientation="Vertical">
            <TextBlock Margin="4" FontSize="14pt" Text="{Binding Path=Title}"/>

            <StackPanel Margin="4" Orientation="Horizontal">
              <TextBlock Margin="4" FontSize="10pt" Text="Number of Photos :"/>
              <TextBlock Margin="4" FontSize="10pt" Text="{Binding Path=NumberOfPhotos}"/>
            </StackPanel>

            <StackPanel Margin="4" Orientation="Horizontal">
              <TextBlock Margin="4" FontSize="10pt" Text="Thumbnail Url :"/>
              <TextBlock Margin="4" FontSize="10pt" Text="{Binding Path=PhotosetSquareThumbnailUrl}"/>
            </StackPanel>

            <TextBox Text="Drag here to upload new images"
                     Background="LightCoral" 
                     Name="txtUpload" IsReadOnly="True" 
                     PreviewDragOver="ehDragOver" PreviewDrop="ehDrop"
                     PreviewDragLeave="ehDragLeave" />
            
          </StackPanel>
        </StackPanel>
      </DataTemplate>
    </Setter.Value>
  </Setter>
</Style>

Lo XAML è lungo, ma vi posso assicurare che fare la stessa cosa con normale C# sarebbe un incubo. Ogni item viene disegnato con uno StackPanel che contiene un Image ed un altro StackPanel sulla sua destra. La morale è: visualizzo un certo numero di TextBox che vengono bindate alle diverse proprietà pubbliche esposte dalla classe FlickrBrowserPhotoset di cui parlavamo prima. Il risultato è inquietante…eccolo…

Farà anche schifo, ma una volta un impatto simile nelle applicazioni non riuscivo a darlo nemmeno se sudava quattro camicie. In realtà sto già lavorando ad altre features interessanti, come la possibilità di uploadare nuove foto e di inserirle dentro un set (nuovo o già esistente) tramite drag’n’drop, di ricercare foto le foto di un utente dato un particolare tag e roba del genere.

A presto, metterò disponibile il download di codice ed applicazione. Stay tuned!

Send to Kindle

Questo post è stato scritto durante il viaggio di andata all’evento di XeDotNet di questa sera. Giusto per cronaca. 🙂

Entriamo nel vivo
Ok, lasciamo da parte le sciocchezze sull’autenticazione di cui abbiamo parlato fino a ieri e vediamo qualcosa di più succulento. Dicevamo ieri che la finestra principale dell’applicazione è rappresentata dalla classe MainWindow. Quando l’applicazione è in esecuzione, possiamo inserire in una TextBox lo username di un utente su Flickr. Se l’utente esiste, possiamo vedere in una ListView i suoi sets di fotografie, oppure possiamo raggiungere la world map dell’utente stesso. Visivamente parlando, la windows si presenta in questo modo:

La cosa su cui voglio focalizzarmi è come riuscire a sfruttare la ListView in modo tale che ogni ListItem venga visualizzato in modo radicalemente diverso a quanto siamo abituati a vedere. Come tutte le ListView che si rispettino, anche quelle in WPF possono essere ovviamente popolate in due modi diversi:

• aggiungendo a mano tanti ListItem attraverso il metodo Add esposto dalla proprietà Items. Per chi mi sta leggendo e non sa assolutamente nulla di WPF nè tantomeno di .NET: sappiate che potete aggiungere item di qualsiasi tipo, dal momento che il parametro in input al metodo Add è un generico object. Cosa viene visualizzato effettivamente in esecuzione dipende da molte cose: prima fra tutte, se è stato fatto o meno l’override del metodo ToString() della classe che stiamo aggiungendo alla ListView.
• impostando la proprietà ItemsSource della ListView, che è tipo IEnumerable. Questo significa sfruttare il data-binding di WPF

Nell’esempio utilizzeremo il secondo metodo, che è quello più efficiente. Vediamo come fare.

Ottenere l’elenco dei set di fotografie associati ad un utente
Facciamo mente locale sull’immagine sopra. C’è una TextBox nella quale scrivere lo username dell’utente che ci interessa. Poi c’è un Button con una bella caption che dice: “List Photo Sets”. Vediamo come viene gestito il Click su questo Button che svela buona parte dell’arcano.

public void listPhotosets(object sender, RoutedEventArgs e)
{
    if (conn == null) return;

    #region Trovo l'utente indicato nella TextBox
    try
    {
        currentUser = conn.PeopleFindByUsername(UsernameTextBox.Text);
        currentUserUri = conn.UrlsGetUserPhotos(currentUser.UserId);
    }
    catch (FlickrException ex)
    {
        MessageBox.Show("Username not found!", "Error...", MessageBoxButton.OK, MessageBoxImage.Error);
        return;
    }
    #endregion

    WebToUserPhotos.IsEnabled = (currentUserUri != null);
    WebToUserWorldMap.IsEnabled = (currentUserUri != null);

    // Leggo i sets di foto attualmente presenti
    Photosets sets = conn.PhotosetsGetList(currentUser.UserId);

    FlickrBrowserPhotosetCollection setFoto = (FlickrBrowserPhotosetCollection)
        this.FindResource("sets");

    PhotoSetListBox.BeginInit();
    PhotoSetListBox.ItemsSource = null;

    foreach (Photoset p in sets.PhotosetCollection)
    {
        FlickrBrowserPhotoset ps = new FlickrBrowserPhotoset(conn, p);
        setFoto.Add(ps);
    }

    PhotoSetListBox.ItemsSource = setFoto;
    PhotoSetListBox.EndInit();
}

Il codice è un po’ lungo, questa volta, ma piuttosto semplice da leggere. La prima cosa che dobbiamo fare è reperire un’istanza della classe FlickrUser, che ci dà un riferimento all’utente che è stato ricercato. Supponiamo di cercare l’utente “Igor Damiani”, come nell’esempio sopra. Salviamo in due field privati currentUser e currentUserUri l’utente corrente e l’url dell’utente su Flickr. Questo url ci servirà la prossima volta: ricordatevelo. 🙂

Se lo username specificato non esiste, le API di Flickr sollevano un’eccezione di tipo FlickrException che viene opportunamente trappata per poter dare all’utente un messaggio di errore che possa dire: “Che cavolo hai scritto????!”. 🙂 Nulla di che.

Terminata questa prima fase, posso richiedere a Flickr l’elenco dei sets di fotografie appartenenti all’utente. Lo facciamo con una sola semplice riga:

Photosets sets = conn.PhotosetsGetList(currentUser.UserId);

L’oggetto sets è ovviamente una collection di qualche tipo. Poi vado a prelevare dalle risorse della MainWindow un oggetto di tipo FlickrBrowserPhotosetCollection attraverso il metodo FindResource(). Indipendentemente da quello che andrò poi a fare sulla ListView, chiamo sempre i metodi BeginInit() all’inizio e EndInit() alla fine. Come si vede dal codice, vado a settare la proprietà ItemsSource dalla ListView sull’oggetto setFoto, che è una collection che viene popolato con un ciclo for…each per ciascun set di fotografie associato.

Un’altra parte dell’arcano sta in due parti: nello XAML (ovviamente) ed in un paio di classi che sono state create apposta per vivere all’interno del contesto di una Window di WPF. Queste classi derivano da DependencyObject e le loro proprietà pubbliche sono DependencyProperty: questo per permettere loro di essere utilizzate con l’engine di data-binding di WPF, appunto. Queste classi compaiono nel codice qui sopra e cominciano tutte e due per FlickrBrowser. La prima è FlickrBrowserPhotoset (che rappresenta un singolo set) e la seconda è FlickrBrowserPhotosetCollection che non è nient’altro che una List<FlickrBrowserPhotoset>.

Conclusione
Quello di cui vorrei parlare la prossima volta è chiaccherare un pochino sullo XAML della MainWindow. E’ lì che si nascondono (mica tanto) il data-binding, il template associato ad ogni ListItem ed altre cosucce interessanti. Alla prossima!

Send to Kindle