Browse Source

Merge pull request #632 from dotnet-architecture/dabritch-mobile-settingsview

Performant SettingViews on iOS
pull/1136/head
David Britch 6 years ago
committed by GitHub
parent
commit
de68b4c342
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 196 additions and 296 deletions
  1. +21
    -104
      src/Mobile/eShopOnContainers/eShopOnContainers.Core/ViewModels/SettingsViewModel.cs
  2. +175
    -192
      src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/SettingsView.xaml

+ 21
- 104
src/Mobile/eShopOnContainers/eShopOnContainers.Core/ViewModels/SettingsViewModel.cs View File

@ -13,14 +13,8 @@ namespace eShopOnContainers.Core.ViewModels
{
public class SettingsViewModel : ViewModelBase
{
private string _titleUseAzureServices;
private string _descriptionUseAzureServices;
private bool _useAzureServices;
private string _titleUseFakeLocation;
private string _descriptionUseFakeLocation;
private bool _allowGpsLocation;
private string _titleAllowGpsLocation;
private string _descriptionAllowGpsLocation;
private bool _useFakeLocation;
private string _endpoint;
private double _latitude;
@ -48,21 +42,16 @@ namespace eShopOnContainers.Core.ViewModels
public string TitleUseAzureServices
{
get => _titleUseAzureServices;
set
{
_titleUseAzureServices = value;
RaisePropertyChanged(() => TitleUseAzureServices);
}
get { return !UseAzureServices ? "Use Mock Services" : "Use Microservices/Containers from eShopOnContainers"; }
}
public string DescriptionUseAzureServices
{
get => _descriptionUseAzureServices;
set
get
{
_descriptionUseAzureServices = value;
RaisePropertyChanged(() => DescriptionUseAzureServices);
return !UseAzureServices
? "Mock Services are simulated objects that mimic the behavior of real services using a controlled approach."
: "When enabling the use of microservices/containers, the app will attempt to use real services deployed as Docker containers at the specified base endpoint, which will must be reachable through the network.";
}
}
@ -72,30 +61,23 @@ namespace eShopOnContainers.Core.ViewModels
set
{
_useAzureServices = value;
UpdateUseAzureServices();
RaisePropertyChanged(() => UseAzureServices);
}
}
public string TitleUseFakeLocation
{
get => _titleUseFakeLocation;
set
{
_titleUseFakeLocation = value;
RaisePropertyChanged(() => TitleUseFakeLocation);
}
get { return !UseFakeLocation ? "Use Real Location" : "Use Fake Location"; }
}
public string DescriptionUseFakeLocation
{
get => _descriptionUseFakeLocation;
set
get
{
_descriptionUseFakeLocation = value;
RaisePropertyChanged(() => DescriptionUseFakeLocation);
return !UseFakeLocation
? "When enabling location, the app will attempt to use the location from the device."
: "Fake Location data is added for marketing campaign testing.";
}
}
@ -105,30 +87,23 @@ namespace eShopOnContainers.Core.ViewModels
set
{
_useFakeLocation = value;
UpdateFakeLocation();
RaisePropertyChanged(() => UseFakeLocation);
}
}
public string TitleAllowGpsLocation
{
get => _titleAllowGpsLocation;
set
{
_titleAllowGpsLocation = value;
RaisePropertyChanged(() => TitleAllowGpsLocation);
}
get { return !AllowGpsLocation ? "GPS Location Disabled" : "GPS Location Enabled"; }
}
public string DescriptionAllowGpsLocation
{
get => _descriptionAllowGpsLocation;
set
get
{
_descriptionAllowGpsLocation = value;
RaisePropertyChanged(() => DescriptionAllowGpsLocation);
return !AllowGpsLocation
? "When disabling location, you won't receive location campaigns based upon your location."
: "When enabling location, you'll receive location campaigns based upon your location.";
}
}
@ -148,12 +123,10 @@ namespace eShopOnContainers.Core.ViewModels
set
{
_endpoint = value;
if (!string.IsNullOrEmpty(_endpoint))
{
UpdateEndpoint();
}
RaisePropertyChanged(() => Endpoint);
}
}
@ -164,9 +137,7 @@ namespace eShopOnContainers.Core.ViewModels
set
{
_latitude = value;
UpdateLatitude();
RaisePropertyChanged(() => Latitude);
}
}
@ -177,9 +148,7 @@ namespace eShopOnContainers.Core.ViewModels
set
{
_longitude = value;
UpdateLongitude();
RaisePropertyChanged(() => Longitude);
}
}
@ -190,9 +159,7 @@ namespace eShopOnContainers.Core.ViewModels
set
{
_allowGpsLocation = value;
UpdateAllowGpsLocation();
RaisePropertyChanged(() => AllowGpsLocation);
}
}
@ -207,19 +174,11 @@ namespace eShopOnContainers.Core.ViewModels
public ICommand ToggleAllowGpsLocationCommand => new Command(ToggleAllowGpsLocation);
public override Task InitializeAsync(object navigationData)
{
UpdateInfoUseAzureServices();
UpdateInfoFakeLocation();
UpdateInfoAllowGpsLocation();
return base.InitializeAsync(navigationData);
}
private async Task ToggleMockServicesAsync()
{
ViewModelLocator.UpdateDependencies(!UseAzureServices);
UpdateInfoUseAzureServices();
RaisePropertyChanged(() => TitleUseAzureServices);
RaisePropertyChanged(() => DescriptionUseAzureServices);
var previousPageViewModel = NavigationService.PreviousPageViewModel;
if (previousPageViewModel != null)
@ -243,7 +202,8 @@ namespace eShopOnContainers.Core.ViewModels
private void ToggleFakeLocationAsync()
{
ViewModelLocator.UpdateDependencies(!UseAzureServices);
UpdateInfoFakeLocation();
RaisePropertyChanged(() => TitleUseFakeLocation);
RaisePropertyChanged(() => DescriptionUseFakeLocation);
}
private async Task ToggleSendLocationAsync()
@ -263,53 +223,10 @@ namespace eShopOnContainers.Core.ViewModels
private void ToggleAllowGpsLocation()
{
UpdateInfoAllowGpsLocation();
}
private void UpdateInfoUseAzureServices()
{
if (!UseAzureServices)
{
TitleUseAzureServices = "Use Mock Services";
DescriptionUseAzureServices = "Mock Services are simulated objects that mimic the behavior of real services using a controlled approach.";
}
else
{
TitleUseAzureServices = "Use Microservices/Containers from eShopOnContainers";
DescriptionUseAzureServices = "When enabling the use of microservices/containers, the app will attempt to use real services deployed as Docker containers at the specified base endpoint, which will must be reachable through the network.";
}
}
private void UpdateInfoFakeLocation()
{
if (!UseFakeLocation)
{
TitleUseFakeLocation = "Use Real Location";
DescriptionUseFakeLocation = "When enabling location, the app will attempt to use the location from the device.";
}
else
{
TitleUseFakeLocation = "Use Fake Location";
DescriptionUseFakeLocation = "Fake Location data is added for marketing campaign testing.";
}
RaisePropertyChanged(() => TitleAllowGpsLocation);
RaisePropertyChanged(() => DescriptionAllowGpsLocation);
}
private void UpdateInfoAllowGpsLocation()
{
if (!AllowGpsLocation)
{
TitleAllowGpsLocation = "GPS Location Disabled";
DescriptionAllowGpsLocation = "When disabling location, you won't receive location campaigns based upon your location.";
}
else
{
TitleAllowGpsLocation = "GPS Location Enabled";
DescriptionAllowGpsLocation = "When enabling location, you'll receive location campaigns based upon your location.";
}
}
private void UpdateUseAzureServices()
{
// Save use mocks services to local storage


+ 175
- 192
src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/SettingsView.xaml View File

@ -2,12 +2,12 @@
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="eShopOnContainers.Core.Views.SettingsView"
xmlns:viewModelBase="clr-namespace:eShopOnContainers.Core.ViewModels.Base;assembly=eShopOnContainers.Core"
xmlns:viewModelBase="clr-namespace:eShopOnContainers.Core.ViewModels.Base;assembly=eShopOnContainers.Core"
xmlns:controls="clr-namespace:eShopOnContainers.Core.Controls;assembly=eShopOnContainers.Core"
xmlns:converters="clr-namespace:eShopOnContainers.Core.Converters;assembly=eShopOnContainers.Core"
xmlns:animations="clr-namespace:eShopOnContainers.Core.Animations;assembly=eShopOnContainers.Core"
xmlns:triggers="clr-namespace:eShopOnContainers.Core.Triggers;assembly=eShopOnContainers.Core"
viewModelBase:ViewModelLocator.AutoWireViewModel="true"
viewModelBase:ViewModelLocator.AutoWireViewModel="true"
Title="Settings">
<ContentPage.Resources>
<ResourceDictionary>
@ -92,7 +92,7 @@
<Setter Property="Margin"
Value="12,0" />
</Style>
<animations:StoryBoard
x:Key="MockServicesAnimation"
Target="{x:Reference MockServices}">
@ -116,195 +116,178 @@
Animation="{StaticResource MockServicesAnimation}" />
</EventTrigger>
</ContentPage.Triggers>
<Grid
BackgroundColor="{StaticResource BackgroundColor}">
<!-- SETTINGS -->
<ScrollView>
<StackLayout
x:Name="MockServices">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- MOCK SERVICES -->
<StackLayout
Grid.Column="0"
Grid.Row="1"
Style="{StaticResource SettingsStackLayoutStyle}">
<Label
Text="{Binding TitleUseAzureServices}"
Style="{StaticResource SettingsTitleStyle}"/>
<Label
Text="{Binding DescriptionUseAzureServices}"
Style="{StaticResource SettingsDescriptionStyle}"/>
</StackLayout>
<!-- ON / OFF -->
<controls:ToggleButton
Grid.Column="1"
Grid.Row="1"
Checked="{Binding UseAzureServices, Mode=TwoWay}"
Command="{Binding ToggleMockServicesCommand}"
Style="{StaticResource SettingsToggleButtonStyle}">
<controls:ToggleButton.CheckedImage>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="iOS" Value="switchOn.png" />
<On Platform="Android" Value="switch_on.png" />
<On Platform="UWP, WinRT, WinPhone" Value="Assets/switchOn.png" />
</OnPlatform>
</controls:ToggleButton.CheckedImage>
<controls:ToggleButton.UnCheckedImage>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="iOS" Value="switchOff.png" />
<On Platform="Android" Value="switch_off.png" />
<On Platform="UWP, WinRT, WinPhone" Value="Assets/switchOff.png" />
</OnPlatform>
</controls:ToggleButton.UnCheckedImage>
</controls:ToggleButton>
<!-- ENDPOINT -->
<StackLayout
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"
Style="{StaticResource SettingsStackLayoutStyle}"
IsVisible="{Binding UseAzureServices}">
<Label
Text="Endpoint"
Style="{StaticResource HeaderLabelStyle}"/>
<Entry
Text="{Binding Endpoint, Mode=TwoWay}">
<Entry.Style>
<OnPlatform x:TypeArguments="Style">
<On Platform="iOS, Android" Value="{StaticResource SettingsEntryStyle}" />
<On Platform="UWP, WinRT, WinPhone" Value="{StaticResource SettingsUwpEntryStyle}" />
</OnPlatform>
</Entry.Style>
</Entry>
</StackLayout>
<!-- USE LOCATIONS -->
<StackLayout
Grid.Column="0"
Grid.Row="3"
IsVisible="{Binding UserIsLogged}"
Style="{StaticResource SettingsStackLayoutStyle}">
<Label
Text="{Binding TitleUseFakeLocation}"
Style="{StaticResource SettingsTitleStyle}"/>
<Label
Text="{Binding DescriptionUseFakeLocation}"
Style="{StaticResource SettingsDescriptionStyle}"/>
</StackLayout>
<!-- ON / OFF -->
<controls:ToggleButton
Grid.Column="1"
Grid.Row="3"
Checked="{Binding UseFakeLocation, Mode=TwoWay}"
Command="{Binding ToggleFakeLocationCommand}"
Style="{StaticResource SettingsToggleButtonStyle}"
IsVisible="{Binding UserIsLogged}">
<controls:ToggleButton.CheckedImage>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="iOS" Value="switchOn.png" />
<On Platform="Android" Value="switch_on.png" />
<On Platform="UWP, WinRT, WinPhone" Value="Assets/switchOn.png" />
</OnPlatform>
</controls:ToggleButton.CheckedImage>
<controls:ToggleButton.UnCheckedImage>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="iOS" Value="switchOff.png" />
<On Platform="Android" Value="switch_off.png" />
<On Platform="UWP, WinRT, WinPhone" Value="Assets/switchOff.png" />
</OnPlatform>
</controls:ToggleButton.UnCheckedImage>
</controls:ToggleButton>
<!-- FAKE LOCATIONS -->
<StackLayout
Grid.Row="4"
Grid.Column="0"
Grid.ColumnSpan="2"
Style="{StaticResource SettingsStackLayoutStyle}"
IsVisible="{Binding UseFakeLocation}">
<Label
Text="Latitude"
Style="{StaticResource HeaderLabelStyle}"/>
<Entry
Text="{Binding Latitude, Mode=TwoWay, Converter={StaticResource DoubleConverter}}"
Keyboard="Text">
<Entry.Style>
<OnPlatform x:TypeArguments="Style">
<On Platform="iOS, Android" Value="{StaticResource SettingsEntryStyle}" />
<On Platform="UWP, WinRT, WinPhone" Value="{StaticResource SettingsUwpEntryStyle}" />
</OnPlatform>
</Entry.Style>
</Entry>
<Label
Text="Longitude"
Style="{StaticResource HeaderLabelStyle}"/>
<Entry
Text="{Binding Longitude, Mode=TwoWay, Converter={StaticResource DoubleConverter}}"
Keyboard="Text">
<Entry.Style>
<OnPlatform x:TypeArguments="Style">
<On Platform="iOS, Android" Value="{StaticResource SettingsEntryStyle}" />
<On Platform="UWP, WinRT, WinPhone" Value="{StaticResource SettingsUwpEntryStyle}" />
</OnPlatform>
</Entry.Style>
</Entry>
<Button
Command="{Binding ToggleSendLocationCommand}"
Text="Send Location"/>
</StackLayout>
<!-- ALLOW GPS LOCATION -->
<StackLayout
Grid.Column="0"
Grid.Row="5"
Style="{StaticResource SettingsStackLayoutStyle}"
IsVisible="{Binding UseFakeLocation, Converter={StaticResource InverseBoolConverter}}">
<Label
Text="{Binding TitleAllowGpsLocation}"
Style="{StaticResource SettingsTitleStyle}"/>
<Label
Text="{Binding DescriptionAllowGpsLocation}"
Style="{StaticResource SettingsDescriptionStyle}"/>
<Label
Text="{Binding GpsWarningMessage}"
Style="{StaticResource SettingsWarningMessageStyle}"/>
</StackLayout>
<!-- ON / OFF -->
<controls:ToggleButton
Grid.Column="1"
Grid.Row="5"
Checked="{Binding AllowGpsLocation, Mode=TwoWay}"
Command="{Binding ToggleAllowGpsLocationCommand}"
Style="{StaticResource SettingsToggleButtonStyle}"
IsVisible="{Binding UseFakeLocation, Converter={StaticResource InverseBoolConverter}}">
<controls:ToggleButton.CheckedImage>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="iOS" Value="switchOn.png" />
<On Platform="Android" Value="switch_on.png" />
<On Platform="UWP, WinRT, WinPhone" Value="Assets/switchOn.png" />
</OnPlatform>
</controls:ToggleButton.CheckedImage>
<controls:ToggleButton.UnCheckedImage>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="iOS" Value="switchOff.png" />
<On Platform="Android" Value="switch_off.png" />
<On Platform="UWP, WinRT, WinPhone" Value="Assets/switchOff.png" />
</OnPlatform>
</controls:ToggleButton.UnCheckedImage>
</controls:ToggleButton>
</Grid>
</StackLayout>
</ScrollView>
<!-- SETTINGS -->
<Grid x:Name="MockServices" BackgroundColor="{StaticResource BackgroundColor}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- MOCK SERVICES -->
<StackLayout
Style="{StaticResource SettingsStackLayoutStyle}">
<Label
Text="{Binding TitleUseAzureServices}"
Style="{StaticResource SettingsTitleStyle}"/>
<Label
Text="{Binding DescriptionUseAzureServices}"
Style="{StaticResource SettingsDescriptionStyle}"/>
</StackLayout>
<!-- ON / OFF -->
<controls:ToggleButton
Grid.Column="1"
Checked="{Binding UseAzureServices, Mode=TwoWay}"
Command="{Binding ToggleMockServicesCommand}"
Style="{StaticResource SettingsToggleButtonStyle}">
<controls:ToggleButton.CheckedImage>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="iOS" Value="switchOn.png" />
<On Platform="Android" Value="switch_on.png" />
<On Platform="UWP, WinRT, WinPhone" Value="Assets/switchOn.png" />
</OnPlatform>
</controls:ToggleButton.CheckedImage>
<controls:ToggleButton.UnCheckedImage>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="iOS" Value="switchOff.png" />
<On Platform="Android" Value="switch_off.png" />
<On Platform="UWP, WinRT, WinPhone" Value="Assets/switchOff.png" />
</OnPlatform>
</controls:ToggleButton.UnCheckedImage>
</controls:ToggleButton>
<!-- ENDPOINT -->
<StackLayout
Grid.Row="1"
Grid.ColumnSpan="2"
Style="{StaticResource SettingsStackLayoutStyle}"
IsVisible="{Binding UseAzureServices}">
<Label
Text="Endpoint"
Style="{StaticResource HeaderLabelStyle}"/>
<Entry
Text="{Binding Endpoint, Mode=TwoWay}">
<Entry.Style>
<OnPlatform x:TypeArguments="Style">
<On Platform="iOS, Android" Value="{StaticResource SettingsEntryStyle}" />
<On Platform="UWP, WinRT, WinPhone" Value="{StaticResource SettingsUwpEntryStyle}" />
</OnPlatform>
</Entry.Style>
</Entry>
</StackLayout>
<!-- USE LOCATIONS -->
<StackLayout
Grid.Row="2"
IsVisible="{Binding UserIsLogged}"
Style="{StaticResource SettingsStackLayoutStyle}">
<Label
Text="{Binding TitleUseFakeLocation}"
Style="{StaticResource SettingsTitleStyle}"/>
<Label
Text="{Binding DescriptionUseFakeLocation}"
Style="{StaticResource SettingsDescriptionStyle}"/>
</StackLayout>
<!-- ON / OFF -->
<controls:ToggleButton
Grid.Column="1"
Grid.Row="2"
Checked="{Binding UseFakeLocation, Mode=TwoWay}"
Command="{Binding ToggleFakeLocationCommand}"
Style="{StaticResource SettingsToggleButtonStyle}"
IsVisible="{Binding UserIsLogged}">
<controls:ToggleButton.CheckedImage>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="iOS" Value="switchOn.png" />
<On Platform="Android" Value="switch_on.png" />
<On Platform="UWP, WinRT, WinPhone" Value="Assets/switchOn.png" />
</OnPlatform>
</controls:ToggleButton.CheckedImage>
<controls:ToggleButton.UnCheckedImage>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="iOS" Value="switchOff.png" />
<On Platform="Android" Value="switch_off.png" />
<On Platform="UWP, WinRT, WinPhone" Value="Assets/switchOff.png" />
</OnPlatform>
</controls:ToggleButton.UnCheckedImage>
</controls:ToggleButton>
<!-- FAKE LOCATIONS -->
<StackLayout
Grid.Row="3"
Grid.ColumnSpan="2"
Style="{StaticResource SettingsStackLayoutStyle}"
IsVisible="{Binding UseFakeLocation}">
<Label
Text="Latitude"
Style="{StaticResource HeaderLabelStyle}"/>
<Entry
Text="{Binding Latitude, Mode=TwoWay, Converter={StaticResource DoubleConverter}}"
Keyboard="Text">
<Entry.Style>
<OnPlatform x:TypeArguments="Style">
<On Platform="iOS, Android" Value="{StaticResource SettingsEntryStyle}" />
<On Platform="UWP, WinRT, WinPhone" Value="{StaticResource SettingsUwpEntryStyle}" />
</OnPlatform>
</Entry.Style>
</Entry>
<Label
Text="Longitude"
Style="{StaticResource HeaderLabelStyle}"/>
<Entry
Text="{Binding Longitude, Mode=TwoWay, Converter={StaticResource DoubleConverter}}"
Keyboard="Text">
<Entry.Style>
<OnPlatform x:TypeArguments="Style">
<On Platform="iOS, Android" Value="{StaticResource SettingsEntryStyle}" />
<On Platform="UWP, WinRT, WinPhone" Value="{StaticResource SettingsUwpEntryStyle}" />
</OnPlatform>
</Entry.Style>
</Entry>
<Button
Command="{Binding ToggleSendLocationCommand}"
Text="Send Location"/>
</StackLayout>
<!-- ALLOW GPS LOCATION -->
<StackLayout
Grid.Row="4"
Style="{StaticResource SettingsStackLayoutStyle}"
IsVisible="{Binding UseFakeLocation, Converter={StaticResource InverseBoolConverter}}">
<Label
Text="{Binding TitleAllowGpsLocation}"
Style="{StaticResource SettingsTitleStyle}"/>
<Label
Text="{Binding DescriptionAllowGpsLocation}"
Style="{StaticResource SettingsDescriptionStyle}"/>
<Label
Text="{Binding GpsWarningMessage}"
Style="{StaticResource SettingsWarningMessageStyle}"/>
</StackLayout>
<!-- ON / OFF -->
<controls:ToggleButton
Grid.Column="1"
Grid.Row="4"
Checked="{Binding AllowGpsLocation, Mode=TwoWay}"
Command="{Binding ToggleAllowGpsLocationCommand}"
Style="{StaticResource SettingsToggleButtonStyle}"
IsVisible="{Binding UseFakeLocation, Converter={StaticResource InverseBoolConverter}}">
<controls:ToggleButton.CheckedImage>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="iOS" Value="switchOn.png" />
<On Platform="Android" Value="switch_on.png" />
<On Platform="UWP, WinRT, WinPhone" Value="Assets/switchOn.png" />
</OnPlatform>
</controls:ToggleButton.CheckedImage>
<controls:ToggleButton.UnCheckedImage>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="iOS" Value="switchOff.png" />
<On Platform="Android" Value="switch_off.png" />
<On Platform="UWP, WinRT, WinPhone" Value="Assets/switchOff.png" />
</OnPlatform>
</controls:ToggleButton.UnCheckedImage>
</controls:ToggleButton>
</Grid>
</ContentPage>

Loading…
Cancel
Save