Metro приложения: работа с данными Краковецкий Александр , MVP/RD/PhD. DevRain Solutions

1. Metro приложения: работа с даннымиКраковецкий Александр, MVP/RD/PhD.DevRain Solutions

2. 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

3. synchronous vs. asynchronous vardata = DownloadData(...); ProcessData(data); STOP DownloadData ProcessData varfuture = DownloadDataAsync(...); future.ContinueWith(data => ProcessData(data)); DownloadDataAsync ProcessData

4. synchronous vs. asynchronous vardata = DownloadData(...); ProcessData(data); STOP STOP DownloadData ProcessData varfuture = DownloadDataAsync(...); future.ContinueWith(data => ProcessData(data)); DownloadDataAsync ProcessData

5. synchronous vs. asynchronous 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")); } // синхронная версия private void OnButtonClick() { TextBox.Text = new WebClient().DownloadString("http://example.com"); }

6. Представьте асинхронный мир без callbacks async. & await!

7. async превращает ваш метод в асинхронный await возвращает результат в основной поток по завершению выполнениязадачи работает с любым объектом, у которого есть метод GetAwaiter()

8. async & await private void OnButtonClick() { FetchAll(); } public asyncvoid FetchAll() { var client = new WebClient (); string xml = awaitclient.DownloadStringTaskAsync(uri); TextBlock.Text = xml; }

9. async & await var Feeds = new ObservableCollection<FeedData>(); public async TaskGetFeedsAsync() { Task<FeedData> feed1 = GetFeedAsync(“http://example.com"); ... this.Feeds.Add(await feed1); ... }

10. привязка данных (data binding) • привязка данных – мост между UI и бизнес логикой • может быть декларативной (XAML) или программной (в коде) • модели привязки данных • One-Way • Two-Way • One-Time

11. value converters public 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; } }

12. value converters //объявляемпространствоимен xmlns:converter="clr-namespace:MyNamespace.MyValueConverter“ // объявляемв ресурсах конвертер <converter:Formatter x:Key=“MyValueConverter" /> // пример использования: <TextBlockText="{Binding Value}/> <TextBlock Text="{Binding Value, Converter={StaticResourceMyValueConverter}/>

13. привязкаданных к модели public class FeedData { public string Title { get; set; } public string Description { get; set; } public DateTimePubDate { get; set; } private var_Items = new List<FeedItem>(); // ObservableCollection public List<FeedItem> Items { get { return this._Items; } } }

14. привязкаданных к модели <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>

15. DEMO: DATA binding

16. получение данных • Сервис-ориентированные приложения • XML-over-HTTP • JSON-over-HTTP • ASMX Web Services • oData • локальное хранилище

17. элементы управления Присутствуют: • ListBox, ComboBox, FlipView, ListView(JumpViewer), GridView(ListView + Wrap панель внутриItemsPanelTemplate), CarouselPanel Отсутствуют (возможно появятся в Toolkit): • DataGrid, TabControl, TreeView, Menu, ContextMenu

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

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

20. 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>

21. templates Шаблоны позволяют повторно использовать один и тот же XAML коддля разных ситуаций <TextBlockText="{StaticResourceAppName}" Style="{StaticResourcePageHeaderTextStyle}"/> <Style x:Key="PageHeaderTextStyle" TargetType="TextBlock" BasedOn="{StaticResourceHeaderTextStyle}"> <Setter Property="TextWrapping" Value="NoWrap"/> <Setter Property="VerticalAlignment" Value="Bottom"/> <Setter Property="Margin" Value="0,0,40,40"/> </Style>

22. MVVM Паттерн Model-View-ViewModel — это паттерн, применяющийся при проектировании архитектуры приложения. Первоначально был представлен сообществу Джоном Госсманом (JohnGossman) в 2005 году как модификация паттерна PresentationModel. MVVM ориентирован на современные платформы разработки, такие как WindowsPresentationFoundation,Silverlight, Windows Phone 7, Windows 8.

23. MVVM Паттерн MVVM делится на три части: • Модель представляет собой данные, необходимые для работы приложения; • Вид/Представление (View) - графический интерфейс; • Модель вида (ViewModel) является с одной стороны абстракцией Вида, а с другой предоставляет обертку данных из Модели, которые подлежат связыванию.

24. MVVM public class Accomplishment : INotifyPropertyChanged { public string Name { get; set; } public string Type { get; set; } ... public event PropertyChangedEventHandlerPropertyChanged; private void RaisePropertyChanged(string propertyName) { if (this.PropertyChanged != null) { this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } }

25. MVVM public class ViewModel { public ObservableCollection<Accomplishment> Items { get; set; } public ViewModel() { // filling collection Acomplishments.Add(someObject); } }

26. MVVM <ListBoxItemsSource="{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>

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

28. Часть 6 Полезные ссылки и материалы

29. 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/

30. wp7rocks.com, @wp7rocks_com Вопросы?