Xamarin 9/10 San Diego Meetup

Cross-Platform
Mobile
Development
that Works.
Rob DeRosa
Enterprise Customer Success Engineer,
Key Accounts

We’re Here to Help
Rob DeRosa
Enterprise Customer
Success Engineer,
Key Accounts
rob.derosa@xamarin.com

DESIGN – DEVELOP - INTEGRATE TEST MONITOR
LEARN

xamarin.com/testcloud
✓ Automated UI testing
✓ Thousands of real devices
✓ Integration with CI systems
✓ Test any mobile app
✓ Find bugs before your
customers do

xamarin.com/insights
✓ Crash Reporting
✓ Page Views
✓ Events
✓ User Behavior
✓ Integrations

✓ Live, instructor lead courses
✓ DeveloperCertification
✓ Guest lectures
✓ Office Hours
✓ Lightning talks
✓ Latest topics
xamarin.com/university

Shared C# codebase • 100% native API access • High performance
iOS C# UI Windows C# UIAndroid C# UI
Shared C# Mobile C# Server
Linux/Mono
CoreCLR
Azure
Shared C# Client/Server

MapKit UIKit iBeacon CoreGraphics CoreMotion
System.Data System.Windows System.Numerics System.Core System.ServiceModel
System.Net System System.IO System.Linq System.Xml

Text-to-speech ActionBar Printing Framework Renderscript NFC

Microsoft.Phone Microsoft.Networking Windows.Storage Windows.Foundation Microsoft.Devices

Traditional Xamarin Approach With Xamarin.Forms:
Share UI code, all native
iOS C# UI Windows C# UIAndroid C# UI
Shared C# Business Logic
Shared UI Code

✓ 40+ Pages, layouts, and controls
(Build with C# or XAML)
✓ Two-way data binding
✓ Navigation
✓ Animation API
✓ Dependency Service
✓ Messaging Center
✓ Styles, Converters, Behaviors
Shared UI Code

<?xml version="1.0" encoding="UTF-‐8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MainPage">
<TabbedPage.Children>
<ContentPage Title="Profile" Icon="Profile.png">
<StackLayout Spacing="20" Padding="20” VerticalOptions="Center">
<Entry Placeholder="Username“ Text="{Binding Username}"/>
<Entry Placeholder="Password” Text="{Binding Password}"
IsPassword="true"/>
<Button Text="Login" TextColor="White” BackgroundColor="#77D065"
Command="{Binding LoginCommand}"/>
</StackLayout>
</ContentPage>
<ContentPage Title="Settings" Icon="Settings.png">
<!-‐-‐ Settings -‐-‐>
</ContentPage>
</TabbedPage.Children>
</TabbedPage>

Layouts
Pages
Stack Absolute Relative Grid ContentView ScrollView Frame
Content MasterDetail Navigation Tabbed Carousel

ActivityIndicator BoxView Button DatePicker Editor
Entry Image Label ListView Map
OpenGLView Picker ProgressBar SearchBar Slider
Stepper TableView TimePicker WebView EntryCell
ImageCell SwitchCell TextCell ViewCell

Sport
Development goals:
• Provide a way for colleagues to
challenge and rank up
• Gain a deeperunderstanding of
Forms – capabilities/limitations
• Learn Azure Mobile Services
(WebAPI, EF, push)

Application Design Goals
• Simplified registration/authentication
• Athlete’s can join multiple leagues
• View current rank within ladder
• Athlete stats & challenge history
• Facilitate challenge flow (accept, nudge, post results)

Topics we’ll cover
• Dead-simple authentication with SimpleAuth
• Absolutely awesome AbsoluteLayout
• Creating & consuming providers (Toast, HUD)
• Creating & consuming custom controls
• Tricks – ImageButton, styled DateTime picker
• Animations and Parallax
• Insights & UITest

Front end - Xamarin.Forms
• XAML
• Bindings
• Converters
• Styles
• Reusable Controls
• Custom Renderers
• Messaging Center
• Dependency Service
Back end – Azure Mobile
• WebAPI – REST/JSON
• Entity Framework w/
SQL Database
• Cross-templated push
notifications
• Notification hubs
• Tag-based

Absolute Layout
• Used to control size and position of child elements
• LayoutBounds is based on LayoutFlags value
• SizeProportional, PositionProportional, All
• Element’s LayoutBounds are proportional to the
AbsoluteLayout’s bounds
• The x and y anchor points are interpolated as the child
elements position changes

SimpleAuth
• SimpleAuth – stupid simple
• github.com/clancey/simpleauth
var scopes = new[] {
"https://www.googleapis.com/auth/userinfo.email",
"https://www.googleapis.com/auth/userinfo.profile"
};
var api = new GoogleApi("google", "clientid", "clientsecret") {
Scopes = scopes,
};
var account = await api.Authenticate();

Providers
• Use an interface to define intent
• Implement on each platform
• Use the Dependency Service to get a platform-specific
implementation at runtime
• Smaller utilities can use the same namespace/class without
the need for an interface

ToastNotifier Provider
public interface IToastNotifier
{
Task<bool> Notify(ToastNotificationType type, string title, string description,TimeSpan duration, object context = null);
void HideAll();
}
define
[assembly: Dependency(typeof(Sport.Android.ToastNotifier))]
...
public class ToastNotifier : IToastNotifier
{
public Task<bool> Notify(ToastNotificationType type, string title, string description,
TimeSpan duration, object context = null)
{
var taskCompletionSource = new TaskCompletionSource<bool>();
Toast.MakeText(Forms.Context, description, ToastLength.Short).Show();
return taskCompletionSource.Task;
}
public void HideAll()
{
}
}
implement
var toaster = DependencyService.Get<IToastNotifier>();
toaster.Notify(type, title ?? type.ToString().ToUpper(), message, TimeSpan.FromSeconds(2.5f));
use

Custom, Reusable Controls
• Equivalent to a WPF/ASP.NET User
Control
• Use Bindable Properties to allow
consumers to bind values
• Templated controls can allow for inner
content
• Subclass ContentView

Little Tricks
• Use layers for precise layout - position and size
• Use opacity on controls to handle a user event
• Examples
• ImageButton
• Styled Date and Time pickers
• Use VectorImages instead of bitmaps
• Reduce application footprint by including a single .svg file
• Control tint color and size dynamically
• Use an IsBusy flag to trigger progress
• Use a Busy : IDisposable to ensure flag always gets set to false
• Use static converters – less code, fewer objects
• Run tasks safely using a proxy task-runner
Let’s check out some code!

Vector Image
• Control size and tint color dynamically
• Reduce footprint by resourcing a single .svg file

Animations
• Super easy to use
• Basic animations are supported
• Scale
• Translate
• Fade
• Rotate
• Easing (Bounce, Cubic, Linear, Sin)

Animations
var speed = (uint)App.AnimationSpeed;
var ease = Easing.SinIn;
var pushRect = new Rectangle(Content.Width, btnPush.Bounds.Y, btnPush.Bounds.Width, btnPush.Height);
btnPush.FadeTo(0, speed, ease);
await btnPush.LayoutTo(pushRect, speed, ease);
var contRect = new Rectangle(Content.Width, btnCont.Bounds.Y, btnCont.Bounds.Width, btnCont.Height);
btnCont.FadeTo(0, speed, ease);
await btnCont.LayoutTo(contRect, speed, ease);

Parallax Effect
void Parallax()
{
if(_imageHeight <= 0)
_imageHeight = photoImage.Height;
var y = scrollView.ScrollY * .4;
if(y >= 0)
{
//Move the Image's Y coordinate a fraction
//of the ScrollView's Y position
photoImage.Scale = 1;
photoImage.TranslationY = y;
}
else
{
//Calculate a scale that equalizes the height vs scroll
double newHeight = _imageHeight + (scrollView.ScrollY * -1);
photoImage.Scale = newHeight / _imageHeight;
photoImage.TranslationY = scrollView.ScrollY / 2;
}
}

Insights & UITest
• Add custom events or implement at a base level
• Use StyleID to store the element identifier
• Share UITest code between iOS and Android

Source Code Analysis
435 lines
3.3%
413 lines
3.1%
12,471 lines
93.6%

Thank you!
rob.derosa@xamarin.com
https://github.com/xamarin/sport
https://www.youtube.com/watch?v=GmdvxDVluRA

Xamarin 9/10 San Diego Meetup

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Similar a Xamarin 9/10 San Diego Meetup

Similar a Xamarin 9/10 San Diego Meetup (20)

Último

Último (20)

Xamarin 9/10 San Diego Meetup