Pembuatan Aplikasi Multiplatform dengan Xamarin Forms
Download as PPTX, PDF0 likes434 views
The document discusses Xamarin Forms, a framework that allows building cross-platform mobile apps for iOS, Android, and Windows using C# and XAML. It can create native UIs and allows code sharing via portable class libraries. Key features covered include pages and layouts, data binding, navigation, animations API, messaging center, and MVVM pattern support. Resources provided include documentation, XAML docs, and code samples.
Pembuatan Aplikasi Multiplatform dengan Xamarin Forms
- 1. Pembuatan Aplikasi Multiplatform dengan Xamarin Forms Erick Kurniawan erick.@actual-training.com
- 3. Automatically test your app on hundreds of mobile devices Create native iOS, Android, Mac and Windows apps in Visual Studio and C#
- 4. Xamarin’s Unique Approach Native With Code Sharing Business Layer
- 5. Windows APIs
- 6. iOS APIs | 100% Coverage
- 7. Android APIs | 100% Coverage
- 8. Anything you can do in Objective-C, Swift, or Java can be done in C# with Xamarin using Visual Studio or Xamarin Studio on a Mac
- 9. Xamarin Designer for Android Fully integrated into Xamarin Studio & Visual Studio Multi-resolution editing Easy switch between design and Android XML Shipping for over 2 years
- 10. Xamarin Designer for iOS
- 12. Xamarin + Xamarin.Forms With Xamarin.Forms: more code-sharing, native controls Traditional Xamarin approach Shared UI Code
- 13. What’s Included 40+ Pages, Layouts, and Controls Build from code behind or XAML Two-way Data Binding Navigation Animation API Dependency Service Messaging Center Shared UI Code
- 14. Pages Content MasterDetail Navigation Tabbed Carousel
- 15. Layouts Stack Absolute Relative Grid ContentView ScrollView Frame
- 16. Controls ActivityIndicator BoxView Button DatePicker Editor Entry Image Label ListView Map OpenGLView Picker ProgressBar SearchBar Slider Stepper TableView TimePicker WebView EntryCell ImageCell SwitchCell TextCell ViewCell
- 18. Model-View-ViewModel ModelView ViewModel How to display information What to display Flow of interaction Business Logic Data objects Events Data Data
- 20. Data Binding
- 21. Data Binding
- 22. Data Binding
- 23. Data Binding
- 24. Navigation Root Page: NavigationPage – Gives each page an INavigation Standard Navigation Navigation.PushAsync(page: nextPage); Navigation.PopAsync(); Modal Navigation Navigation.PushModalAsync(page: modalPage); Navigation.PopModalAsync();
- 25. Animations API
- 31. Messaging Center MessagingCenter.Subscribe<T>(object subscriber, string message, Action<T> callback); MessagingCenter.Send(T item, string message);
- 32. Messaging Center Master Page: Detail Page:
- 33. Resources Documentation http://developer.xamarin.com/guides/cross-platform/xamarin-forms/ XAML Documentation http://developer.xamarin.com/guides/cross-platform/xamarin- forms/xaml-for-xamarin-forms/ Samples https://github.com/xamarin/xamarin-forms-samples
Editor's Notes
- #7: Talk about what Xamarin offers (iOS, Android, Mac using Visual Studio and C#) If you are new to Xamarin you should know that Xamarin offers a few products. First is the Xamarin Platform. This is what we will be talking about to today and is where we will be creating native iOS, Android, and Windows apps all in C#. Second, is a new product called Xamarin Test Cloud. Test Cloud is a unique UI automated testing platform where you are able to create UI tests that run on hundred of physical iOS and Android devices in Xamarin’s test cloud. What is wonderful is that the Test Cloud is open to any iOS or Android mobile app regardless of what programming language or platform it was developed in.
- #8: Xamarin’s unique approach enables developers to develop native iOS, Android, and Windows app while creating a shared C# backend (business logic). You are able to leverage all of your favorite C# features such as async/await, lambas, LINQ, events, delegates, and of course the great .NET Libraries. We are going to take a look at Xamarin.Forms today, which enables you to share more code, but let’s take a look at what Xamarin development looks like.
- #9: If you have ever developed for a Windows Platform before these .NET namespaces might look familiar. However, if we go to a new platform such as Windows Phone or Store we have a new SDK to use and a new set of namespaces.
- #10: You can think of iOS and Android development the same with Xamarin. You can see we have all of our .NET namespaces and libraries, but Xamarin give us 100% api coverage of each iOS API in it’s SDK that we access view C#.
- #11: The same is true for Android as well.
- #12: We’re going to show you both today
- #13: If you didn’t know Xamarin has shipped an Android designer for over 2 years In both Visual Studio and Xamarin Studio Features multi-layout view editing to make it easy to design for phone, small tablet, and large tablets
- #14: Short video of designer in action. You are able to use Xamarin Studio or Visual Studio for all of your development.
- #15: Xamarin Forms is a new set of APIs allowing you to quickly and easily write shared User Interface code that is still rendered natively on each platform, while still providing direct access to the underlying SDKs if you need it.
- #16: We see here the Xamarin approach we talked about earlier This enables you to be highly productive, share code, but build out UI on each platform and access platform APIs With Xamarin.Forms you now have a nice Shared UI Code layer, but still access to platform APIs You can start from native, pick a few screens, or start with forms, and replace with native later
- #17: Dependency Service > give a good quick example
- #18: First you have a set of pages for each screen of your application There are things like Content, and MasterDetail which gives you a nice flyout With a tabbed view you get the correct look on each platform iOS on bottom, Android on top, and on WP you have a Pivot control
- #19: A lot of options from simple to complex
- #20: You have more than 40 controls, layouts, and pages to mix and match from. These are all of the controls you have out of the box, you can of course create your own. What is unique is you get the native control and have access to it. Consider an Entry Field On iOS it is mapped to UITextField Android it is EditText Windows Phoneit is a TextBox
- #21: Let’s take a look at getting started with Xamarin.Forms and displaying some data across all platforms.
- #22: Xamarin.Forms was build with MVVM in mind. It is optional, but if you are used to an MVVM style of programming you are going to feel right at home. MVVM is an architectural pattern that is used to abstract our Views/Pages from our Business Logic Let’s look how it works. Our View just knows how to display Information It can pass data and event back and forth to the ViewModel The ViewModel simply tells the View what to display and can accept events. The model sits off to the side and only our ViewModel interact with it to gather data (maybe from the database or REST services)
- #23: The “Magic” of MVVM is with a Data Binding framework. This allows us to change data in the ViewModel and our View automatically reacts. This is build into WPF/Windows Phone/Windows Store, but does not exist for Android or iOS. However, Xamarin.Forms has a full data binding framework built right in. Let’s take a look. ----- Meeting Notes (1/22/15 10:11) ----- Important to note here is that if you have a WPF application that is written in MVVM then you can bring in the ViewModel and Model directly into Xamarin.Forms for reuse. Powerful stuff. Should demo this.
- #24: The core of data binding comes with “INotifyPropertyChanged” This allows any UI element to subscribe and “Bind” to a property and react when the “PropertyChanged” method is raised.
- #25: When we update a field such as FirstName we trigger a property changed and anyone subscribed gets notified.
- #26: Here we are creating a label and the “TextProperty” is being bound to the “FirstName” property in the ViewModel.
- #27: We can also setup 2 way data binding so if our view update so does our ViewModel and vise versa.
- #28: The extensibility framework in Xamarin.Forms enables us to 1.) Customize any of the built in controls 2.) Use any custom control that we might have developed
- #30: First step for using the the Dependency service is to setup an Interface that is accessible from your shared code.
- #31: For each platform we plan to support (iOS, Android, and Windows Phone), we will implement the native functionality. For instance here, we are using AVSpeechSynthesizer on iOS to perform TextToSpeech
- #32: The built in dependency service uses an assembly attribute to know what class to use for the interface implementation.
- #33: The dependency service allows you to easily resolve your interface for the platform specific implementation. Here we are playing back “Hello from Xamarin Forms” when we click a button.
- #36: Xamarin.Forms has a complete cross platform animations api as well. It takes advantage of the underlying APIs on each platform such as CoreAnimation on iOS. Additionally, it is completely asynchronous with an async/await api.
- #37: Here we can see we have our event for the button click. We first disable the button and set the box to Green. We save out the location and set a new location to drop to the bottom of the page and bounce.
- #38: We await for that to finish and start to fade out the box, change the color to yellow. Then we scale the box up, wait for that to finish and scale it back down.
- #39: After that is completed we move it back to the original position linearly. After that completes we set the box back to red and enable our button again. Let’s see what it looks like one more time.