TDC2016SP - Trilha Mobile

11
MVVM - IOS, ANDROID, XAMARIN
GUILHERME ENDRES

22
MVVM - IOS, ANDROID, XAMARIN
GUILHERME ENDRES

IOS | MVC
Model View Controller

IOS | MVC
Model View
View
Controller

Massive View Controller
IOS | MVC

Model ViewModelView
View
Controller
IOS | MVVM

Model
Nome
Preço
Teor Alcoólico
Marca
IOS | MODEL

ViewModel
BANCO DE DADOS
VALIDAÇÃO DE DADOS
MANIPULAÇÃO DE MODELOS
IOS | VIEW MODEL

ViewModel
View
Controller
4.5%
R$ 5,00
TDCBeer
Pale Ale
Model

var beerView = BeerView( beerViewModel )

var beerView = BeerView( beerViewModel )
var beerViewController = BeerViewController()
beerViewController.beerView = beerView

var beerViewController = BeerViewController( beerViewModel)

ViewModel
View
Controller
beerViewModel.quantity = 5
imageView.image = beerViewModel.image
beerViewModel.quantity = textField.text
beerViewModel.image { image in
imageView.image = image
}
IOS | COMUNICAÇÃO

DELEGATE
KVO
BINDING
THIRD PARTY

beerViewModel.addObserver(self,
forKeyPath: "userImage",
options: .New,
context: &imageContext)
BINDING | KVO

beerViewModel.addObserver(self,
forKeyPath: "userImage",
options: .New,
context: &imageContext)
deinit {
beerViewModel.removeObserver(self, forKeyPath: "userImage")
}
BINDING | KVO

override func observeValueForKeyPath(keyPath: String,
ofObject object: AnyObject,
change: [NSObject: AnyObject],
context: UnsafeMutablePointer<Void>) {
if context == &imageContext {
self.imageView.image= change[NSKeyValueChangeNewKey]
}
}
BINDING | KVO

} else if context == &quantityContext {
self.textField.text = change[NSKeyValueChangeNewKey]
}
}
BINDING | KVO

} else if context == &quantityContext {
self.textField.text = change[NSKeyValueChangeNewKey]
}
}
BINDING | KVO
else if context == &context {
self.variable = change[NSKeyValueChangeNewKey]
}else if context == &context {
}
}
}
self.variable = change[NSKeyValueChangeNewKey
}
self.variable = change[NSKeyValueChangeNewKey
}
}
}
}

protocol BeerViewModelDelegate {
func viewModelDidUpdate()
}
BINDING | DELEGATE

protocol BeerViewModelDelegate {
func viewModelDidUpdate()
}
class BeerViewModel {
var delegate: BeerViewModelDelegate?
//Quando atualizar
delegate!.viewModelDidUpdate()
}
BINDING | DELEGATE

class ViewController {
beerViewModel.delegate = self
func viewModelDidUpdate() {
imageView.image = beerViewModel.userImage
}
}
BINDING | DELEGATE

Swift
ReactiveCocoa4
BINDING | THIRD PARTY

errorLabel.rac_text <~ userViewModel.errorMessage
errorLabel.rac_hidden <~ userViewModel.usernameCorrect
UserViewController

errorLabel.rac_text <~ userViewModel.errorMessage
errorLabel.rac_hidden <~ userViewModel.usernameCorrect
enterButton.rac_hidden <~ userViewModel.hiddenButton
UserViewController

imageView.image <~ beerViewModel
.userImage
BeerViewController

let userViewModel: UserViewModel = UserViewModel()
IOS | UNIT TEST

userViewModel.username.value = "Skywalker"
IOS | UNIT TEST

userViewModel.username.value = "Skywalker"
userViewModel.saveUser().on(
completed: {
// success
}, failed: { error in
// fail
}).start()
IOS | UNIT TEST

completed: {
// success
// fail
}).start()
IOS | UNIT TEST

userViewModel.username.value = "Darth Vader"
completed: {
// fail
// success
}).start()
IOS | UNIT TEST

MVVM Data Binding!
Android?
SIM!

ATIVANDO DATA BINDING
android { 
.... 
dataBinding { 
enabled = true 
} 
}

ANTES…
<EditText 
android:id="@+id/beer_count_edit_text" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:gravity="end" 
android:inputType="numberDecimal" 
android:singleLine="true" />
EditText beerCountEditText = (EditText)findViewById(R.id.beer_count_edit_text); 
beerCountEditText.setText(beerViewModel.getBeerCount());

USANDO DATA BINDING LIBRARY
<data> 
<variable 
name="beerViewModel" 
type="com.arctouch.beerbind.beer.BeerCountViewModel" /> 
</data>
<EditText 
android:singleLine="true" />

USANDO DATA BINDING LIBRARY
<EditText 
android:singleLine="true"
android:text="@{beerViewModel.beerCountText}" />
<data> 
<variable 
</data>

TWO-WAY BINDING
<EditText 
android:text="@{beerViewModel.beerCountText}" />
<data> 
<variable 
</data>

TWO-WAY BINDING
<EditText 
android:text="@{beerViewModel.beerCountText}"
app:addTextChangedListener="@{beerViewModel.beerCountTextWatcher}" />
<data> 
<variable 
</data>

TWO-WAY BINDING
<EditText 
android:text="@{beerViewModel.beerCountText}"
app:addTextChangedListener="@{beerViewModel.beerCountTextWatcher}" />
public TextWatcher getBeerCountTextWatcher() { 
return new TextWatcher() {  
@Override 
public void afterTextChanged(Editable s) { 
setBeerCount(Integer.parseInt(s.toString())); 
} 
}; 
}

ACTIVITY
@Override 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
ActivityBeerBinding binding =  
DataBindingUtil.setContentView(this, R.layout.activity_beer);
 
BeerCountViewModel beerViewModel =  
new BeerCountViewModel(new BeerCountModel()); 
binding.setBeerViewModel(beerViewModel); 
}

FRAGMENT
@Override 
public View onCreateView(…){
 
ActivityBeerBinding binding = 
DataBindingUtil.inflate(inflater, R.layout.activity_beer,
container, false);
 
BeerCountViewModel viewModel = 
new BeerCountViewModel(new BeerCountModel());
 
binding.setBeerViewModel(viewModel); 
return binding.getRoot(); 
}

VIEW MODEL
public class BeerCountViewModel extends BaseObservable { 
 
private int beerCount; 
 
@Bindable 
public int getBeerCount() { 
return beerCount; 
} 
 
public void setBeerCount(int beerCount) { 
this.beerCountModel.setBeerCount(beerCount); 
notifyPropertyChanged(BR.beerCount); 
} 
 
}

VIEW MODEL
extends BaseObservable { 
t beerCount) { 
BeerCount(beerCount); 
R.beerCount); 
• Classe base
• Implementa a interface
Observable
• Usado pra notificar a
mudanças para a view

VIEW MODEL
ublic class BeerCountViewModel extends BaseObservable { 
private int beerCount; 
@Bindable 
public int getBeerCount() { 
return beerCount; 
} 
public void setBeerCount(int beerCount) { 
this.beerCountModel.setBeerCount(beerCount); 
notifyPropertyChanged(BR.beerCount); 
}

CUSTOM SETTER
@BindingAdapter("app:imageUrl") 
public static void loadImage(ImageView imageView, String url) { 
Glide.with(imageView.getContext()) 
.load(url) 
.into(imageView);
}
<ImageView 
android:layout_height="match_parent" 
android:layout_marginTop="@dimen/default_margin" 
app:imageUrl="@{beerViewModel.imageUrl}" />

ANDROID DATA BINDING
• One-way binding:
• Two-way binding:
• Custom setters:

XAMARIN | MVVM
VIEW (XAML)
VIEWMODEL
MODEL
Command BindingContext / Binding
Read/Update
INotifyPropertyChanged
BindableObject

using System; 
 
namespace System.ComponentModel 
{ 
public interface INotifyPropertyChanged 
{ 
// 
// Events 
// 
event PropertyChangedEventHandler PropertyChanged; 
} 
}
XAMARIN | Data Binding

public abstract class BaseViewModel : INotifyPropertyChanged 
{ 
public event PropertyChangedEventHandler PropertyChanged; 
 
protected void OnPropertyChanged([CallerMemberName] string propertyName = null) 
{ 
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); 
} 
}

private string errorMessage; 
public string ErrorMessage 
{ 
get { return this.errorMessage; } 
set 
{ 
this.errorMessage = value; 
OnPropertyChanged(); 
} 
}

XAMARIN | Data Binding - Genérico
protected bool SetPropertyAndNotify<T>(ref T storage, T value,
[CallerMemberName] string propertyName = null) 
{ 
if (Equals(storage, value)) 
{ 
return false; 
} 
 
storage = value; 
OnPropertyChanged(propertyName); 
return true; 
} 
this.myField = value;

private string errorMessage; 
public string ErrorMessage 
{ 
get { return this.errorMessage; } 
set { SetPropertyAndNotify(ref this.errorMessage, value); } 
}

<Label 
Text="{Binding ErrorMessage}" 
TextColor="White" 
FontSize="17" 
HorizontalTextAlignment="Center" 
FontFamily="HelveticaNeue-CondensedBold" 
HorizontalOptions="Center" 
HeightRequest="20"/>

<ContentPage.BindingContext> 
<custom:UserViewModel /> 
</ContentPage.BindingContext>
UserView.xaml

<StackLayout>
<Label Text="{Binding ErrorMessage}” /> 
<Entry Placeholder="Digite seu nome aqui" 
Text="{Binding Username}"/> 
<Button Text="ENTER" 
Command="{Binding EnterCommand}”
IsVisible="{Binding IsUsernameValid}”/>
</StackLayout>
UserView.xaml

public class UserViewModel : BaseViewModel 
public string Username 
{ 
get { return this.username; } 
set 
{ 
SetPropertyAndNotify(ref this.username, value); 
ValidateUsername(); 
} 
}
UserViewModel
Apenas validação simples! 
 
Sem longos processamentos e/ou
chamadas assíncronas. 
Ex:. APIs ou banco de dados

<Slider Maximum=“20" Minimum="0" 
Value="{Binding DrankBeersCount, Mode=TwoWay}"/> 
BeerView.xaml

public int DrankBeersCount 
{ 
get 
{ 
return this.drankBeersCount; 
} 
set 
{ 
SetPropertyAndNotify(ref this.drankBeersCount, value); 
OnPropertyChanged(nameof(DrunkenPersonImage)); 
} 
} 
 
public string DrunkenPersonImage 
{ 
get { return GetBeerImage(DrankBeersCount); } 
} 
BeerViewModel

COMPARAÇÃO MVVM
IOS/ANDROID/XAMARIN

Suporte MVVM | Comparação entre plataformas
Anunciado em 2015/Android M +
No .NET desde 2008
Delegate / KVO / ReactiveCocoa

iOS: https://github.com/gfendres/ractdc2016
Android: https://github.com/thiagocechetto/BeerBind
Xamarin: https://github.com/oberdanf/tdc2016mvvm

OBRIGADO.
Big Brains Wanted
Join our team! Go to arctouch.com/brjobs
guilherme.endres@arctouch.com

TDC2016SP - Trilha Mobile

More Related Content

Viewers also liked (20)

Similar to TDC2016SP - Trilha Mobile (20)

More from tdc-globalcode (20)

Recently uploaded (20)

TDC2016SP - Trilha Mobile