Gennaio 2017

Volume 32 Numero 1

Il presente articolo è stato tradotto automaticamente.

App moderne - Analisi di UWP Community Toolkit

Da Frank La La | Gennaio 2017

L'evoluzione di Universal Windows piattaforma UWP (), emergono sfide e modelli comuni dell'interfaccia utente. Mentre la piattaforma UWP fornisce un set di funzionalità avanzate di controlli e API predefiniti, esistono alcune lacune nella quale viene fornita e alcune funzionalità richiedono un lotto di codifica e impegno. Per risolvere questo divario e rendere UWP sviluppo più veloce e più accessibile ai principianti, Microsoft ha creato il Toolkit di Community UWP ed è stato inserito in GitHub (bit.ly/2b1PAJY).

L'obiettivo del Toolkit UWP Community è contattare la community degli sviluppatori di creare una serie di controlli e le funzioni helper per semplificare lo sviluppo UWP. Il Toolkit di Community UWP include cinque categorie di strumenti: Controlli, notifiche, animazioni, servizi e gli helper. In articolo questo, verrà illustrata ciascuna delle categorie e viene illustrato come implementare il toolkit nei progetti di piattaforma UWP.

App di esempio di Toolkit UWP Community

Il modo migliore per esplorare il Toolkit di Community UWP consiste nello scaricare l'applicazione di esempio Toolkit UWP Community da Windows Store (bit.ly/2bypOyw). Non solo troverai tutte le funzionalità del toolkit app (vedere figura 1), ma fornisce anche demo interattive di controlli, animazioni, notifiche e ulteriori informazioni, come illustrato nella figura 2.

Figura 1 schermata iniziale dell'App di esempio di Toolkit di Community UWP

Figura 2 modificato i parametri del controllo RadialGauge

L'app fornirà anche XAML e rappresentazioni di codice dei controlli, rendendo più veloce globalmente, per modificare e implementano elementi dell'interfaccia utente.

I controlli dell'interfaccia come affermato in precedenza, il Toolkit di Community UWP contiene un numero di controlli dell'interfaccia utente: 13 al momento della stampa. Molti di questi controlli presenti in genere nelle applicazioni per dispositivi mobili o siti Web è ottimizzato per dispositivi mobili. Un esempio è il controllo HamburgerMenu. Per convenzione, il menu hamburger, costituito da tre linee orizzontali, indica che vi sia un menu compresso. Toccare o fare clic sul controllo Alterna lo stato. Figura 3 e figura 4 viene illustrato il controllo aspetto compresso ed espanso, rispettivamente.  

Figura 3 compresso Hamburger Menu

Figura 4, un Menu Hamburger espanso

Assicurarsi di esplorare le funzionalità e le impostazioni di ogni controllo nel Toolkit UWP Community. Hanno un elevato livello di flessibilità e di aggiungere valore a ogni componente dei progetti di piattaforma UWP.

Notifiche Windows 10 fornisce un'API completa che consente agli sviluppatori di creare riquadri animati e inviare notifiche agli utenti avvisi di eventi tempestivi di tipo avviso popup e mantenere aggiornati gli utenti. Per un'esplorazione completa di riquadri e notifiche popup, consigliabile leggere il blog di riquadri e gli avvisi popup che viene scritto dal team che possiede il UWP riquadro e API di tipo avviso popup (bit.ly/2fzFsv1).

Sebbene utile e potente, la creazione di notifiche e riquadri animati può rivelarsi problematica per gli sviluppatori ha familiarità con XML e XPath. Il Toolkit di Community UWP questo semplifica inserendo un modello a oggetti sopra la struttura sottostante per generare l'interfaccia utente per i riquadri animati e notifiche popup.

Animazioni Windows 10 è stata introdotta l'API di composizione, un'API completa e dichiarativa in modalità retain che qualsiasi app UWP consente di creare direttamente oggetti di composizione, animazioni e gli effetti visivi. Essenzialmente, è un livello tra XAML e l'architettura sottostante di DirectX. L'API di composizione deve fornire un modo per gli sviluppatori XAML per sfruttare i vantaggi delle prestazioni di DirectX durante la scrittura di codice in c#. Una descrizione completa dell'API di composizione esula dall'ambito di questo articolo, ma è possibile trovare ulteriori informazioni su bit.ly/2fzCfeQ.

Il Toolkit di Community UWP consente di accedere alla potenza di questa API, fornendo i comportamenti XAML sia metodi di estensione oltre all'API di composizione. L'applicazione di esempio Toolkit UWP Community include anche un'area di controllo per sperimentare diversi parametri in un set di cinque animazioni. Il toolkit anche genererà il codice c# e il markup XAML per implementare l'animazione.

Servizi viviamo in un'era del cloud e le applicazioni sono migliori quando sono connessi ai servizi nel cloud. Tuttavia, l'aggiunta di questi servizi per le applicazioni può comportare molte complessità: implementazione dell'autenticazione tramite OAuth, utilizzo di API REST e la natura fluida di queste API. Fortunatamente, il Toolkit di Community UWP fornisce un modello a oggetti esteso che si occupa molto questa complessità. Attualmente, il Toolkit UWP fornisce supporto per Bing, LinkedIn, Facebook, Twitter e il servizio di Microsoft Graph. Ciò significa che gli sviluppatori possono facilmente connettersi a questi servizi in linea con il minimo sforzo.

Le funzioni di supporto The UWP Community Toolkit include anche varie funzioni di supporto per semplificare l'app più comuni attività di sviluppo. Ad esempio, prima dell'esecuzione di query su un servizio cloud, App devono verificare se è disponibile una connessione di rete. Che può essere eseguito senza questo toolkit, può essere eseguita solo in una riga di codice con il toolkit. Gli helper sono inoltre disponibili per la stampa, l'attività in background, ottenere informazioni di sistema e altro ancora.

Aggiungere al progetto il Toolkit di Community UWP

Il modo migliore per aggiungere al progetto il Toolkit di Community UWP è tramite NuGet. Creare un nuovo progetto UWP vuota in Visual Studio scegliendo Nuovo progetto dal menu File. Selezionare installati | Modelli | Windows | Universal | Applicazione vuota (Windows Universal). Denominare il progetto UWPToolKitApp e quindi fare clic su OK.

Il modo più semplice per aggiungere al progetto il Toolkit di Community UWP consiste nell'aggiungere i pacchetti NuGet. In Esplora soluzioni, fare clic su riferimenti e scegliere Gestisci pacchetti NuGet dal menu di scelta rapida per mostrare la gestione pacchetti NuGet.

Nella casella di ricerca, digitare Microsoft.Toolkit.Uwp per visualizzare tutti i pacchetti NuGet associati con il Toolkit di Community UWP. Dovrebbe essere un numero limitato di risultati che includono il Toolkit di Community UWP stesso, più altri pacchetti e librerie. Per un grafico di riferimento rapido in cui i pacchetti contengono le funzionalità, vedere figura 5. 

Figura 5 UWP Community Toolkit NuGet pacchetti

Per ora, si desidera aggiungere il pacchetto NuGet principale (Microsoft.Toolkit.Uwp) e il pacchetto di servizi (Microsoft.Toolkit.Uwp.Services). Fare clic sulla voce relativa Microsoft.Toolkit.Uwp e quindi sul pulsante Installa visualizzato verso il lato destro di gestione pacchetti NuGet. Se viene visualizzata una finestra di dialogo Rivedi modifiche, rivedere le modifiche e quindi fare clic su OK. Fare clic su Annulla qui annullerà l'installazione del pacchetto NuGet. Si potrebbe anche essere visualizzato una finestra di dialogo accettazione licenza; Fare clic su Accetto per accettare le condizioni di licenza.  È possibile esaminare la licenza. È inoltre la possibilità di rifiutare la licenza. Fare clic su I Accept completerà l'installazione del pacchetto. Ripetere il processo per il pacchetto Microsoft.Toolkit.Uwp.Services, che potrebbe essere più condizioni di licenza per accettare.

Dopo aver completate queste attività, si dovrebbero vedere i pacchetti NuGet nella sezione riferimenti del progetto in Esplora soluzioni.

Ricerca con Bing a questo punto, si intende creare un'applicazione di esempio che verrà archiviata per la connettività in linea e il modello di dispositivo in cui è in esecuzione l'applicazione. Quindi presenterà è l'opzione di ricerca Bing per informazioni su quel dispositivo.

Aprire il file MainPage. XAML e aggiungere il codice XAML in figura 6 per creare una semplice interfaccia utente.

Figura 6 codice XAML per creare l'applicazione di esempio dell'interfaccia utente

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="33*"/>
    <RowDefinition Height="607*"/>
  </Grid.RowDefinitions>
  <Button Name="btnSearch" Click="btnSearch_Click" Grid.Row="0">Search Bing</Button>
  <ListView Name="lvSearchResults" Grid.Row="1">
    <ListView.ItemTemplate>
      <DataTemplate>
        <StackPanel>
          <TextBlock Text="{Binding Title}" FontWeight="Bold"></TextBlock>
          <TextBlock Text="{Binding Published}" FontStyle="Italic" ></TextBlock>
          <TextBlock Text="{Binding Link}" Foreground="Blue"></TextBlock>
          <TextBlock Text="{Binding Summary}"></TextBlock>
        </StackPanel>
      </DataTemplate>
   </ListView.ItemTemplate>
  </ListView>
</Grid>

Nel file MainPage.xaml.cs aggiungere il codice seguente al metodo del costruttore:

btnSearch.IsEnabled = ConnectionHelper.IsInternetAvailable;
btnSearch.Content = $"Search Bing for {SystemInformation.DeviceModel}";

E aggiungere il codice seguente nel file MainPage.xaml.cs:

private async void btnSearch_Click(object sender, RoutedEventArgs e)
  {
    var searchConfig = new BingSearchConfig
    {
      Country = BingCountry.UnitedStates,
      Language = BingLanguage.English,
      Query = SystemInformation.DeviceModel,
      QueryType = BingQueryType.Search
    };
  lvSearchResults.ItemsSource =
    await BingService.Instance.RequestAsync(searchConfig, 50);
  }

Visual Studio consente di aggiungere appropriati utilizzando istruzioni al codice.

Eseguire la soluzione. Se il dispositivo dispone di connettività Internet, sul pulsante di ricerca deve essere abilitato. Noterete inoltre il modello di dispositivo nel testo del pulsante. Se il pulsante è abilitato, fare clic su di esso e verrà visualizzato qualcosa di simile a figura 7. Naturalmente, risultati specifici variano in base al dispositivo che viene eseguita l'app.

Figura 7 risultati della ricerca per modello di dispositivo

Le notifiche di tipo avviso popup un'altra funzionalità del Toolkit che semplifica le attività comuni per gli sviluppatori della Community UWP è notifiche popup. Le notifiche degli avvisi popup sono una parte importante dell'esperienza utente nelle App UWP, perché mantengono utenti informati in merito lo stato dell'applicazione. Tuttavia, l'API di notifica di tipo avviso popup richiede una conoscenza completa del linguaggio XML. Questo può confondere gli sviluppatori a livello di richiedente e frustranti anche per quelli più esperti. Il Toolkit di Community UWP semplifica molto la creazione delle notifiche di tipo avviso popup.

Per l'applicazione di esempio, si aggiungerà una notifica popup semplice per informare l'utente che hanno restituito i risultati della ricerca. Questo non potrebbe aggiungere valore all'app di esempio, come Bing restituisce i risultati immediatamente. Tuttavia, questa funzionalità è utile nella segnalazione all'utente per il completamento di un'attività a esecuzione prolungata.

Il primo passaggio è aggiungere il pacchetto Microsoft.Toolkit.Uwp.Notifications NuGet al progetto. Ripetere i passaggi illustrati in precedenza per aggiungerlo al progetto. 

Successivamente, aggiungere il codice in figura 8 per il file MainPage.xaml.cs per creare il contenuto della notifica di tipo avviso popup. Utilizza la classe helper di informazioni di sistema per compilare alcuni dettagli relativi al dispositivo in cui è in esecuzione l'applicazione.

Figura 8 codice per creare contenuto notifica popup di esempio

private ToastContent CreateDummyToast()
{
  return new ToastContent()
  {
    Launch = "action=viewEvent&eventId=1983",
    Scenario = ToastScenario.Default,
    Visual = new ToastVisual()
    {
      BindingGeneric = new ToastBindingGeneric()
        {
          Children =
            {
              new AdaptiveText()
                {Text = $"Bing search results returned for
                  {SystemInformation.DeviceModel}"},
              new AdaptiveText()
                {Text = $"Available Memory {SystemInformation.AvailableMemory}"},
              new AdaptiveText(){Text =
                $"Running {SystemInformation.OperatingSystem}
                {SystemInformation.OperatingSystemVersion}
                ({SystemInformation.OperatingSystemArchitecture})"}
             }
          }
        }
      };
    }

Esaminando più da vicino il codice, si noterà che il Toolkit di Community UWP aggiunge un modello a oggetti per il formato XML di API di notifica popup. Questo semplifica il processo di creazione di contenuto per la notifica di tipo avviso popup. Gli sviluppatori possono sfruttare la potenza e flessibilità del formato aperto durante il recupero di un modello a oggetti (e IntelliSense) per scrivere codice di base.

A questo punto, aggiungere il metodo seguente:

private void PopToast()
{
  ToastContent toastContent = CreateDummyToast();
  ToastNotificationManager.CreateToastNotifier()
    .Show(new ToastNotification(toastContent.GetXml()));
}

La prima riga chiama il metodo CreateDummyToast che genera il contenuto della notifica di tipo avviso popup e lo assegna a un oggetto ToastContent. La seconda riga Usa il metodo GetXml per convertire il modello a oggetti in formato XML che prevede l'API di notifica di tipo avviso popup. 

Tutto ciò che resta in questo caso viene chiamata PopToast destra dopo restituiscono i risultati della ricerca in Bing nel gestore eventi btnSearch_Click. Eseguire la soluzione e, come prima, fare clic sul pulsante di ricerca. Quasi immediatamente, si vedrà una notifica simile a figura 9 vengono visualizzati.

Figura 9 notifica di tipo avviso popup restituita

Conclusioni

Il Toolkit di Community UWP fornisce risorse essenziali per la creazione di App UWP avanzata e accattivanti. Da nuovi controlli per i servizi cloud librerie dell'API, consente agli sviluppatori di creare con facilità le applicazioni connesse ai servizi nel cloud senza dover affrontare problemi di plumbing di livello inferiore di API REST. La soluzione migliore grazie alla community degli sviluppatori che hanno contribuito a esso, il Toolkit di Community UWP stanno migliorando contemporaneamente. Il set di funzionalità continuamente cresce e il team sta accettando contributi. Si tratta effettivamente di un elemento creato per la community dalla community.

Frank La Vigneè un consulente indipendente, dove aiuta i clienti utilizzano la tecnologia per creare una community migliorata.  Possiede un blog all'indirizzo FranksWorld.com e ha un YouTube canale TV al mondo chiamato Marco (FranksWorld.TV).

Grazie a seguenti esperti tecnici per la revisione dell'articolo: David Catuhe