Xamarin forms
- 3. Agenda • Perché Xamarin Forms • Il progetto Xamarin Forms • Le pagine • Il layout • I controlli • Gestiamo le differenze tra le piattaforme
- 4. Perché Xamarin Forms • Consente di condividere non solo la logica, ma anche l’interfaccia utente • Linguaggio basato su XAML: i controlli XAML vengono tradotti in controlli nativi a runtime • Supporto alle principali caratteristiche di XAML: binding, dependency property, behavior, trigger, ecc. • Non è lo stesso XAML di Microsoft: molti punti di contatto, ma alcuni controlli hanno nomi e proprietà differenti
- 6. Condividiamo il codice (Xamarin Nativo) Portable Class Library o Shared Project C# Platform Specific C# Platform Specific C# Platform Specific Shared C# App Logic (ViewModels, Models etc)
- 7. Condividiamo il codice (Xamarin Forms) Portable Class Library o Shared Project C# Platform Specific C# Platform Specific C# Platform Specific Shared C# Interface Code (Xamarin.Forms) Shared C# App Logic (ViewModels, Models etc)
- 8. Il progetto Xamarin Forms • Una soluzione con 4 progetti: • Shared • iOS • Android • Windows Phone • Due approcci per il progetto condiviso: • Shared: file condivisi tra i progetti tramite il meccanismo dei link • Portable: una vera e propria PCL, che produce in output una libreria DLL • Xamarin Forms viene distribuito come pacchetto NuGet, quindi è importante controllare la presenza di aggiornamenti prima di iniziare un progetto
- 9. Il punto di partenza La classe App è il punto di partenza di un’applicazione Xamarin Forms Si fa carico di definire qual è la pagina iniziale da caricare, grazie alla proprietà MainPage Consente di gestire il ciclo di vita dell’applicazione: • OnStart() quando l’applicazione viene avviata • OnSleep() quando l’applicazione viene sospesa • OnResume() quando l’applicazione viene riattivata
- 10. Le pagine La tipologia più semplice è ContentPage, che rappresenta una pagina con del contenuto Una ContentPage può essere inclusa in una: • NavigationPage, per aggiungere funzionalità di navigazione • TabbedPage, per suddividere i contenuti in sezioni • CarouselPage, per implementare una gallery • MasterDetailPage, per scenari master - detail
- 11. Tipi di pagina
- 12. La navigazione E’ resa possibile dalla classe Navigation: • PushAsync() per portare l’utente ad un’altra pagina • PopAsync() per tornare indietro alla pagina precedente E’ possibile aprire le pagine anche in modalità modale (non supportato su Windows). E’ obbligatorio usare una NavigationPage per sfruttare i metodi di navigazione
- 13. Definire il layout Due differenti approcci • Da codice: i controlli vengono istanziati da codice e aggiunti alla proprietà Content della pagina. • XAML: il layout viene definito utilizzando il linguaggio XAML
- 14. Layout • Esattamente come nelle Windows Store app, Xamarin Forms offre dei controlli che servono per definire il layout della pagina • Definiscono la disposizione dei controlli presenti al loro interno
- 15. StackLayout • Equivale al controllo StackPanel dello XAML Microsoft • Consente di impilare i controlli al suo interno • Di default, in verticale • Cambiando la proprietà Orientation, in orizzontale <StackLayout> <Label Text="Text 1" /> <Label Text="Text 2" /> <Label Text="Text 3" /> </StackLayout> <StackLayout Orientation="Horizontal"> <Label Text="Text 1" /> <Label Text="Text 2" /> <Label Text="Text 3" /> </StackLayout>
- 17. Grid • Equivale all’omonimo controllo dello XAML Microsoft • Consente di realizzare layout a griglia, formati da righe e colonne <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" Text="Item 1" /> <Label Grid.Row="0" Grid.Column="1" Text="Item 2" /> <Label Grid.Row="1" Grid.Column="0" Text="Item 3" /> <Label Grid.Row="1" Grid.Column="1" Text="Item 4" /> </Grid>
- 18. Grid Nativo
- 19. Altri controlli • AbsoluteLayout: analogo al Canvas dello XAML Microsoft, consente di posizionare i controlli in modo assoluto, utilizzando le coordinate x e y • RelativeLayout: che permette di posizionare un elemento in maniera relativa rispetto ad un altro controllo • ScrollView: analogo allo ScrollViewer dello XAML Microsoft, abilita lo scrolling nel caso in cui i controlli al suo interno occupino uno spazio maggiore dell’altezza dello schermo
- 20. Controlli per visualizzare contenuti • Label: per visualizzare testi, equivale al controllo TextBlock • Image: per mostrare un’immagine • ListView: per mostrare liste di oggetti • BoxView: per disegnare un’area rettangolare • WebView: per mostrare contenuti HTML
- 21. Controlli di inserimento dati • Button: per interagire con l’applicazione • Il contenuto viene impostato con la proprietà Text e l’evento di pressione si chiama Clicked • DatePicker e TimePicker: per selezionare data e ora. • Entry: per inserire del testo, equivale al controllo TextBox. • Editor: per inserire linee di testo multiple. • Picker: per selezionare un elemento da una lista, equivale al controllo ListPicker
- 22. Altri controlli di inserimento • SearchBar: analoga al controllo Entry, ma predisposta per la ricerca • Slider: per inserire un valore lineare, equivale all’omonimo controllo XAML. • Stepper: per inserire un valore intero, all’interno di un range, tramite due pulsanti + e – • Switch: per gestire lo stato attivo / non attivo, equivale al controllo ToggleSwitch nello XAML
- 23. Mostrare lo stato delle operazioni • ActivityIndicator: utilizzato per indicare che è in corso un’operazione bloccante, equivale al controllo ProgressRing • ProgressBar: utilizzato per indicare che è in corso un’operazione generica, equivale all’omonimo controllo nello XAML
- 24. Demo Il progetto
- 25. Toolbar Nativo • La classe ContentPage espone la proprietà ToolbarItems, che contiene una serie di controlli ToolbarItem. • Viene mappata: • Su Windows Phone, con un’application bar • Su iOS e Android, con una toolbar nella barra di navigazione
- 26. Toolbar Nativo
- 27. Le mappe • Pacchetto a parte da installare tramite NuGet di nome Xamarin.Forms.Maps • La registrazione del controllo deve essere fatta in maniera differente per le tre piattaforme • Supporta: • Pushpin • Geocoding e reverse geocoding • Zoom • Differenti tipi di mappa
- 28. Demo Mappe
- 29. Gestire le differenze tra le piattaforme • DependencyService • Si crea un’interfaccia nel progetto condiviso, che espone i metodi comuni tra tutte le piattaforme,si crea poi un’implementazione dell’interfaccia specifica per ogni piattaforma, che utilizza le API di Xamarin • la classe Device • Permette di distinguere la piattaforma e implementare variazioni nel layout e di effettuare alcune operazioni cross-platform direttamente nel progetto condiviso • CustomRenderer • Personalizzare l’aspetto e il comportamento dei controlli in base alla piattaforma • Un controllo base, nel progetto condiviso, da utilizzare nelle pagine XAML • Una classe in ogni progetto specifico, che utilizza le API native della piattaforma • Inserimento controlli nativi
- 30. Integrazione con il nativo • Pagine native in Xamarin Forms • Pagine Forms dentro progetti nativi (ad es. per pagine semplici o ripetitive come login, inserimento dati o registrazione)
- 31. Nativo vs Forms Xamarin.Forms è la scelta migliore per: • Apps di Data entry • Prototipi • Apps che richiedono poche funzionalità specifiche per le varie piattaforme • Apps dove condividere il codice è più importante di una UI personalizzata Xamarin Nativo è la scelta migliore: • Apps con un design molto ricercato • Apps che utilizzano molte API specifiche delle varie piattaforme • Apps dove una UI personalizzata è più importante del condividere il codice • App dove è importante avere il massimo delle performance
- 32. Question time