Exploring XLabs
•Télécharger en tant que PPTX, PDF•
0 j'aime•545 vues
In this session we will build a mobile application (iOS/Android) using Xamarin Forms. We will make use of the latest version of XLabs (also known as Xamarin Forms Labs) to build an app that is very maintainable, scalable and extensible. The built-in MVVM framework allows you to build future proof apps which can be expanded to multiple platforms with minimal effort. This session covers how to set this up from scratch, apply bindings, use IOC and make use of a simple WebAPI.
Recommandé
Recommandé
Contenu connexe
Plus de Visug
Plus de Visug (7)
Exploring XLabs
- 1. VISUG 2015 Xamarin - Exploring XLabs Kenny Cornelissen and Roel Charita 10 december 2015
- 2. Campus Mechelen Noord, Schaliënhoevedreef 20T, 2800 Mechelen - België Target audiences
- 3. Campus Mechelen Noord, Schaliënhoevedreef 20T, 2800 Mechelen - België Mobile platform development
- 4. Campus Mechelen Noord, Schaliënhoevedreef 20T, 2800 Mechelen - België Our focus for native mobile development
- 5. Campus Mechelen Noord, Schaliënhoevedreef 20T, 2800 Mechelen - België Xamarin development
- 6. Campus Mechelen Noord, Schaliënhoevedreef 20T, 2800 Mechelen - België Xamarin Forms development
- 7. Campus Mechelen Noord, Schaliënhoevedreef 20T, 2800 Mechelen - België XLabs (Xamarin Forms Labs) • Open source initiative • Extends Xamarin Forms • Controls, services and pattern implementations • https://github.com/XLabs/Xamarin-Forms-Labs
- 8. Campus Mechelen Noord, Schaliënhoevedreef 20T, 2800 Mechelen - België Setting up the mobile application Demo
- 9. Campus Mechelen Noord, Schaliënhoevedreef 20T, 2800 Mechelen - België Device, platform and controls Demo
- 10. Campus Mechelen Noord, Schaliënhoevedreef 20T, 2800 Mechelen - België Building a real application Demo
- 11. Campus Mechelen Noord, Schaliënhoevedreef 20T, 2800 Mechelen - België Thanks for your attention! Any questions?
Notes de l'éditeur
- ROEL Introduction and put emphasis on the rebranding of the logo and this is a sneak preview. Kenny and Roel are technically responsible within Kenze which includes architecting the solution and choosing appropriate technologies to use.
- ROEL Broad audience of devices and where in the past the choice had to be made between a mobile friendly website OR a native app, we see an increasing demand of companies wanting BOTH.
- ROEL Alvorens van start te gaan, willen we toch nog even stilstaan bij de mogelijkheden van vandaag en waarom wij specifiek kiezen om mobile oplossingen te bouwen met Xamarin. Als we kijken naar de marktevolutie, alsook naar de vraag van onze klanten, merken we vaker dat de vraag gesteld wordt om native apps te bouwen die zo goed mogelijk aansluiten bij het ecosysteem van het platform. Wat uiteraard niet wil zeggen dat mobiele geoptimaliseerde websites uit den boze zijn, au contrair, maar de visibiliteit op de verschillende ecosystemen ontbreekt op dat moment. Maw is er naast de vraag voor een mobile friendly website, ook de vraag voor een native implementatie. Hier hebben we volgende mogelijkheden: Mobile optimized websites. Voormalige PhoneGap nu gekend als Apache Cordova: gebruiken van HTML, CSS en JS binnen mobile development. Leunt sterk aan bij web ontwikkeling waarvan de kennis al goed verspreid is. Om native-like snelheid, interactiviteit en styling moet telkens per platform de nodige styling gebeuren, bij gebruik van native controls is dit niet nodig. http://cordova.apache.org/ Unity: unity is voornamelijk een sterke speler in de gaming industrie. We zijn er dan ook van overtuigd dat dit zeker ook een antwoord kan bieden op de vraag om een mobile app te bouwen, maar dan met de nadruk op games. Achterliggend werkt Unity ook met Mono, zij het met een “oudere” versie die minder snel volgt op de evoluties die het .NET framework ondergaat. Weet alvast dat we binnen Kenze ook met deze technology (zij het beperkt) aan de slag zijn. Native ontwikkeling: is zeker en vast een optie, maar dan dient er specifieke kennis in huis gehaald te worden. Op gebied van code re-use kan deze oplossing echter weinig betekenen waarbij enkel de back-end als gemeenschappelijk gezien kan worden. Uitbreiden naar een 2e platform vergt dus een gelijkaardige inspanning. Xamarin: Door gebruik te maken van het Xamarin platform kunnen we de nadelen die we hebben bij native ontwikkeling wegwerken.
- ROEL Viewing the fact that we will continue to have a broad variety of devices in the market and our background we have chosen to put our focus on Xamarin.
- KENNY We werken alvast met 1 gemeenschappelijke taal tussen de verschillende platformen. C# is de gebruikelijke taal; echter is het ook mogelijk VB.NET te gebruiken maar hiervoor dien je dan weer tweaks uit te halen. Door portable class libraries te gebruiken, kan code gedeelt worden tussen de verschillende platformen. Je hebt 2 mogelijkheden om code te delen: Ofwel via Shared projects waar bestanden worden gereferenced binnen je project, wat vroeger de gebruikelijke manier van werken was toen portable class libraries nog niet ondersteund werden. Ofwel Portable class libraries waarbij je een op zich staande DLL krijgt die gedeeld kan worden tussen de verschillend projecten. Hier is het mogelijk vanuit een bepaald profiel te vertrekken dat defineerd welke platformen er ondersteund worden. Op code op zich is een ding, maar hoe we hier met omgaan, is een andere zaak natuurlijk: Simple re-use van klassen (bvb helper classes) Patronen: MVVM patroon Custom bouwen Libraries: MVVMCross, MVVMLight
- KENNY Sinds de zomer van 2014 is het mogelijk gebruik te maken van een nieuwe benadering om mobile app’s te bouwen met Xamarin, namelijk Xamarin Forms. Hoewel we merken dat er hier en daar nog wel een onvolkomenheid is, zijn we wel overtuigd van de aanpak en hebben we reeds app’s gebouwd die vandaag de dag in mobile stores terug te vinden zijn. We zijn dan ook zeer overtuigd van de kracht en snelheid waarmee we vrij eenvoudig kunnen uitbreiden naar een ander platfrom door de juiste implementaties te voorzien, omwille van platform specifieke services. Dmw van Xamarin Form is het mogelijk de views in de gemeenschappelijk library (PCL) te definiëren. Deze laten je toe de algemene scherm opbouw te definiëren in code of XAML, hetwelke een dialect is van de XAML dat we kennen vanuit WPF. Achterliggend gaat Xamarin Forms dit vertalen naar platform specifieke controls, bvb voor Android een Button en iOS een UIButton. Dit is een hele mooie approach als men data driven applicaties bouwt. Zodra men de zaken UI matig wil opmurken, loopt men nogal snel vast en valt men nogal snel terug op platform specifieke implemantie’s dmv custom renderers. Ook al lijkt dit dan sterk op de voorgaande approach, blijft het naar onze inzien toch nog interessant, daar binding nog steeds op 1 plaats gedefinieerd is (tov MVVMCross waar men deze in platform specifieke projecten implementeerd).
- KENNY XLabs gebruikt volgende slagzin: “Xamarin Forms Labs is a open source project that aims to provide a powerful and cross platform set of controls and helpers tailored to work with Xamarin Forms.” Wat bedoeld men hier nu mee? Wij vatten het kort samen: bekijk Xlabs als een toolbox die het leven van de Xamarin developer weer net iets eenvoudiger maakt. Vaak voorkomende integraties met device specifieke functies worden geabstraheerd zodat dit niet telkens opnieuw zelf gemaakt moet worden. Denk hierbij aan de Accelerometer, batterij, bluetooth , GPS, maar ook device specifieke parameters zoals de manufacturer (iOS/Android/WP), name van de device, total memory… Waar we bij gebruik van het Full .NET Framework toegang hebben tot een brede waaier van ondersteunende frameworks die bepaalde patronen implementeren biedt XLabs een aantal van de essentiële aan die we als ontwikkelaar gewend zijn dagelijks te gebruiken: Een implementatie van een IOC container Een implementatie van een MVVM patroon Een implementatie voor niet-ingebouwde controls die toch wel voor de handliggend zijn zoals de calender control, tree,...
- ROEL CODEERT KENNY LEGT UIT http://developer.xamarin.com/ Installatie van Xamarin Forms OP BASIS VAN NIEUW TE MAKEN PROJECT Nieuw project maken op basis van de templates waarvan we een “Cross-Platform” app kiezen, specifiek de “Blank App (Xamarin.Forms Portable)”, met de optie gebruik te maken van een portable class library. Dit resulteert in 4 projecten: een shared project waar we onze views, models, en viewmodels in definiëren; een specifiek project voor Android, iOS en Windows Phone en als laatste een test project om de UI te testen. XLabs kan eenvoudig worden geinstalleerd via de NuGet package manager, dewelke ervoor zal zorgen dat de juiste referenties worden toegevoegd. Toelichting over Visual Studio Emulator for Android that shipped with Visual Studio 2015. Vanaf Xamarin 4 is de integratie met de Mac build host verbetered waardoor er minder manuele configuratie nodig is. VIEWMODELS Viewmodels bevatten onze properties en commands. Door middel van de INotifyPropertyChanged interface, wordt de view op de hoogte moet gebracht van wijzigingen op het viewmodel. Deze implemantie is reeds voorzien in de basisklasse, namelijk de Xlabs.Forms.MvvM.ViewModel en kan worden aangeroepen via de SetProperty. Commands werken op een analoge manier zoals in WPF, ook hier heeft Xlabs een implementatie voorzien van het klassieke RelayCommand met 2 parameters: een Action die aangeeft of de command al dan niet mag uitgevoerd worden, anderszijds een Action die de code dan weer bevat. VIEWS Views kunnen we op 2 manieren defineren: Via code kan men een view opbouwen door middel van de verschillende elementen in elkaar te nesten. Echter is dit niet altijd de meest aangewezen manier om aan de slag te gaan, zeker niet voor de meer complexere views. Onze voorkeur is echter om in XAML aan de slag te gaan. Ook hier moeten de views overerven van de Xlabs.Forms.Mvvm.BaseView om te passen in het MVVM plaatje. Dit gebeurd zowel op niveau van de “code-behind” file als in de XAML zelf. Xamarin heeft onlangs aangekondigd dat vanaf versie 4 XAML views mee gecompileerd kunnen worden. Op die manier kan krijgt men at-compile time al een indicatie indien er iets mis zit in onze XAML. [TO SHOW] BaseView XAML namespaces toevoegen Prefixen aanpassen BaseViewModel tonen Uitwerking tonen in MainViewModel MVVM Zoals eerder al aangehaald, bevat XLabs een implementatie van het MVVM patroon. Zoals we al reeds hebben gezien, zal de ViewFactory er voor zorgen dat de View’s en ViewModel’s aan elkaar gekoppeld zijn. Dit zorgt er voor dat de bindingcontext correct wordt gezet en bindings per direct verwijzen naar het juiste viewmodel. Om dit te doen werken, moet er een IOC container ingesteld worden, die achterliggend gebruikt wordt door Xlabs. Men kan gebruik maken van de ingebakken IOC container, zijnde de SimpleContainer, of een iets geavanceerdere zoals bijvoorbeeld TinyIOC. Dit gebeurd in de platform specifieke projecten zijnde de AppDelegate voor iOS en MainActivity (ofwel de MainLauncher) van Android. [TO SHOW] NavigationPage property Gebruik van deze property in de viewmodels SimpleContainer laten zien en de Resolver opzetten AppDelegate MainActivity BOOTSTRAPPING In het PCL project hebben we een entrypoint, hetwelk we terugvinden in de root van het project. Deze klasse erft over van de Application class. In de constructor van deze klasse defineren we alles om de applicatie platform onafhankelijk te kunnen opstarten. Xlabs voorziet een ingeboud MVVM framework hetwelke we hier ook initiëren. Door gebruik te maken van de ViewFactory, kunnen we de views en viewmodels aan elkaar koppelen via de Register methode. Eens deze gedefinieerd zijn, kunnen we onze eerste view gaan resolven via de CreateView method en aanduiden dat dit de eerste pagina is die geladen moet worden, door deze toe te kennen aan de MainPage variable. Gezien we tussen pagina’s willen navigeren, zullen we gebruik maken een NavigationPage. Op het PCL project zijn we nu in staat onze viewmodels te definiëren en deze te koppelen aan hun respectievelijke views door gebruik te maken van het ingebouwde MVVM framework. Op de platform specifieke projecten dienen we onze platform specifieke services te registeren via de ingebouwde IOC container en kunnen we van start. NAVIGATIE Navigatie gebeurd aan de hand van de NavigationPage, het is dus om praktische redenen interessant deze instantie op te slaan als een variable in de Application class. Via push en pop methods zijn we in staat vooruit en achteruit te navigeren doorheen onze applicatie. Deze methods verwachten een view, dewelke we kunnen resolven via de ViewFactory adhv een bepaald ViewModel. We hebben hier ook de mogelijkheid parameters door te geven tussen ViewModels, wat het weer net wat eenvoudiger maakt t.o.v. native implementaties, serialisaties waar we geen rekening mee moeten houden. MODEL In de toepassingen die wij bij Kenze maken is vaak zo dat onze mobiele toepassingen worden gevoed door backend services. Zij leveren dan ook vaak het de contracten of het model aan waar we op de mobiele toepassing mee aan de slag willen gaan. De synchronisatie tussen het model en het viewmodel gebeurt via X en/of op moment Y ?
- KENNY CODEERT ROEL LEGT UIT OP BASIS VAN ILIKE TOEPASSING Toelichting van architecturaal diagramma die bottom-up design aantoont en highlight van portable class libraries. DEVICE INTERFACES Accelerometer Battery BluetoothDevice Device Display Gyroscope Sensor … PLATFORM SERVICES Network NfcDevice PhoneService SecureStorage Camera SoundService Geolocator EmailService … CONTROLS XLabs biedt ook een grote hoeveelheid controls die bepaalde tekortkomingen van Xamarin Forms tracht in te vullen. Vele van deze controls zijn nog in beta maar vast staat dat als er een grote bijdrage van de community op dit vlak komt dat dit project dan gauw een grote set controls zal bevatten die voor iedereen bruikbaar zijn. CheckBoxCell SelectCell (nog verder te selecteren/uitwerken) …
- ROEL CODEERT KENNY LEGT UIT OP BASIS VAN INSTABOEK RENDERERS Show code and/or dissassembly of views and renderers to demonstrate how XLabs leverages the standard extensibility points of Xamarin Forms.