КРУПНЕЙШАЯ ТЕХНИЧЕСКАЯ КОНФЕРЕНЦИЯ MICROSOFT В УКРАИНЕ

Metro приложения: работа с данными

Краковецкий Александр, MVP/RD/PhD.DevRain Solutions

agenda• What’s new and different for XAML developers in Windows

8– Connecting to services to get data– Asynchronous patterns– Local data– How to format your data for Windows 8 controls

You’ll leave with examples of how to• Connect to web and local data• Use data in Windows 8 Metro style apps

synchronous vs. asynchronousvar data = DownloadData(...);ProcessData(data);

var future = DownloadDataAsync(...); future.ContinueWith(data => ProcessData(data));

DownloadDataAsync ProcessData

STOP

ProcessDataDownloadData

synchronous vs. asynchronous

var data = DownloadData(...);ProcessData(data);

DownloadDataAsync ProcessData

STOP

ProcessDataDownloadData

STOP

var future = DownloadDataAsync(...); future.ContinueWith(data => ProcessData(data));

synchronous vs. asynchronous// синхронная версияprivate void OnButtonClick(){ TextBox.Text = new WebClient().DownloadString("http://example.com"); }

private void OnButtonClick(){ var dispatcher = Deployment.Current.Dispatcher; var client = new WebClient();

client.DownloadStringCompleted += (s, e) => { var result = e.Result; dispatcher.BeginInvoke(() => TextBox.Text = result); }; client.DownloadStringAsync(new Uri("http://example.com")); }

Представьте асинхронный мир без

callbacks

async. & await!

async превращает ваш метод в асинхронный

awaitвозвращает результат в основной поток по завершению

выполнения задачи

работает с любым объектом, у которого есть метод GetAwaiter()

async & awaitprivate void OnButtonClick(){ FetchAll();}

public async void FetchAll(){ var client = new WebClient (); string xml = await client.DownloadStringTaskAsync(uri); TextBlock.Text = xml;}

async & awaitvar Feeds = new ObservableCollection<FeedData>();

public async Task GetFeedsAsync(){ Task<FeedData> feed1 = GetFeedAsync(“http://example.com"); ... this.Feeds.Add(await feed1); ...}

привязка данных (data binding)• привязка данных – мост между UI и бизнес

логикой

• может быть декларативной (XAML) или программной (в коде)

• модели привязки данных– One-Way– Two-Way– One-Time

value converterspublic class MyValueConvertor : IValueConverter{ public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return Math.Round((double) value); } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { return null; }}

value converters// объявляем пространство именxmlns:converter="clr-namespace:MyNamespace.MyValueConverter“

// объявляем в ресурсах конвертер<converter:Formatter x:Key=“MyValueConverter" />

// пример использования:

<TextBlock Text="{Binding Value}/>

<TextBlock Text="{Binding Value, Converter={StaticResource MyValueConverter}/>

привязка данных к моделиpublic class FeedData { public string Title { get; set; } public string Description { get; set; } public DateTime PubDate { get; set; }

private var _Items = new List<FeedItem>(); // ObservableCollection public List<FeedItem> Items { get { return this._Items; } } }

привязка данных к модели<StackPanel> <TextBlock Text="{Binding Path=Title}" FontSize="24" Margin="5,0,0,0" TextWrapping="Wrap" /> <TextBlock Text="{Binding Path=Author}" FontSize="16" Margin="15,0,0,0"/> <TextBlock Text="{Binding Path=PubDate}" FontSize="16" Margin="15,0,0,0"/></StackPanel>

DEMO: DATA BINDING

получение данных• Сервис-ориентированные приложения

– XML-over-HTTP– JSON-over-HTTP– ASMX Web Services– oData

• локальное хранилище

элементы управленияПрисутствуют:• ListBox, ComboBox, FlipView, ListView

(JumpViewer), GridView (ListView + Wrap панель внутри ItemsPanelTemplate), CarouselPanel

Отсутствуют (возможно появятся в Toolkit):• DataGrid, TabControl, TreeView, Menu,

ContextMenu

элементы управления

ListView<ListView x:Name="ItemListView" ItemsSource="{Binding Items}" DisplayMemberPath="Title" Margin="60,0,0,10"></ListView>

ListView<ListView x:Name="ItemListView" ItemsSource="{Binding Items}" Margin="60,0,0,10"> <ListView.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding Title}" FontSize="24" Margin="5,0,0,0" TextWrapping="Wrap" /> <TextBlock Text="{Binding Author}" FontSize="16" Margin="15,0,0,0"/> <TextBlock Text="{Binding PubDate}" FontSize="16" Margin="15,0,0,0"/> </StackPanel> </DataTemplate> </ListView.ItemTemplate></ListView>

templatesШаблоны позволяют повторно использовать один и тот же XAML код для разных ситуаций

<TextBlock Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>

<Style x:Key="PageHeaderTextStyle" TargetType="TextBlock" BasedOn="{StaticResource HeaderTextStyle}"> <Setter Property="TextWrapping" Value="NoWrap"/> <Setter Property="VerticalAlignment" Value="Bottom"/> <Setter Property="Margin" Value="0,0,40,40"/></Style>

MVVMПаттерн Model-View-ViewModel — это паттерн, применяющийся при проектировании архитектуры приложения. Первоначально был представлен сообществу Джоном Госсманом (John Gossman) в 2005 году как модификация паттерна Presentation Model.

MVVM ориентирован на современные платформы разработки, такие как Windows Presentation Foundation, Silverlight, Windows Phone 7, Windows 8.

MVVMПаттерн MVVM делится на три части:• Модель представляет собой данные,

необходимые для работы приложения;• Вид/Представление (View) - графический

интерфейс;• Модель вида (ViewModel) является с одной

стороны абстракцией Вида, а с другой предоставляет обертку данных из Модели, которые подлежат связыванию.

MVVMpublic class Accomplishment : INotifyPropertyChanged{ public string Name { get; set; } public string Type { get; set; } ...

public event PropertyChangedEventHandler PropertyChanged;

private void RaisePropertyChanged(string propertyName) { if (this.PropertyChanged != null) { this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } }}

MVVMpublic class ViewModel{ public ObservableCollection<Accomplishment> Items { get; set; }

public ViewModel() { // filling collection

Acomplishments.Add(someObject); }}

MVVM<ListBox ItemsSource="{Binding Items}"> <ListBox.ItemTemplate> <DataTemplate> <Grid> <TextBlock x:Name="Item" Text="{Binding Path=Name, Mode=OneWay}" /> <TextBox x:Name=“Type" Text="{Binding Path=Type, Mode=TwoWay}" /> </Grid> </DataTemplate> </ListBox.ItemTemplate></ListBox>

MVVMpublic partial class MainPage : PhoneApplicationPage { // Constructor public MainPage() { InitializeComponent(); this.DataContext = new ViewModel(); }}

ПОЛЕЗНЫЕ ССЫЛКИ И МАТЕРИАЛЫ

Часть 6

• Async homepage: www.msdn.com/vstudio/async

• What's New for Visual C#: http://msdn.com/en-us/library/hh156499(VS.110).aspx

• What's New for Visual Basic:http://msdn.com/en-us/library/we86c8x2(VS.110).aspx

• Consuming a JSON Service in Window 8 Metro Style Application http://www.c-sharpcorner.com/UploadFile/65fc13/consuming-json-in-window-8-metro-style-application/

ВОПРОСЫ?wp7rocks.com, @wp7rocks_com