🍃 👨🏻‍⚕️ 🎞️ ReactiveUI और Avalonia के साथ क्रॉस-प्लेटफ़ॉर्म .NET कोर GUI ऐप में डिस्क पर रूटिंग स्टेट को सेव करना 👨🏽‍🎨 👫 👳

आधुनिक उद्यम अनुप्रयोगों के उपयोगकर्ता इंटरफेस काफी जटिल हैं। आप, एक डेवलपर के रूप में, अक्सर इन-ऐप नेविगेशन को लागू करने, उपयोगकर्ता इनपुट को मान्य करने, उपयोगकर्ता वरीयताओं के आधार पर स्क्रीन दिखाने या छिपाने की आवश्यकता होती है। बेहतर UX के लिए, आपका ऐप डिस्क को स्टेट को सेव करने में सक्षम होना चाहिए जब ऐप सस्पेंड हो रहा हो और ऐप को फिर से शुरू करने पर स्टेट को रिस्टोर कर रहा हो।

जब ऐप बंद हो रहा हो या निलंबित हो रहा हो, तब रिएक्टिविव आपको व्यू मॉडल ट्री को क्रमबद्ध करके एप्लिकेशन स्टेट को बनाए रखने की सुविधा प्रदान करता है। प्रति प्लेटफॉर्म पर सस्पेंशन की घटनाएं बदलती रहती हैं। ReactiveUI WPF के लिए Exit इवेंट का उपयोग करता है, DidEnterBackground लिए एक्टिविटीपॉन्ड किया।एंड्रॉयड, DidEnterBackground लिए DidEnterBackground, UWP के लिए OnLaunched ।

इस ट्यूटोरियल में हम एक नमूना एप्लिकेशन बनाने जा रहे हैं जो एवलोनिया के साथ रिएक्टिविव्यू सस्पेंशन फ़ीचर के उपयोग को प्रदर्शित करता है - एक क्रॉस-प्लेटफॉर्म .NET कोर XAML- आधारित GUI फ्रेमवर्क। इस नोट को पढ़ने से पहले आपको MVVM पैटर्न और प्रतिक्रियाशील एक्सटेंशन के साथ परिचित होने की उम्मीद है। यदि आप विंडोज 10 या उबंटू 18 का उपयोग कर रहे हैं तो ट्यूटोरियल में वर्णित चरणों को काम करना चाहिए। चलो शुरू हो जाओ!

बूटस्ट्रैपिंग प्रोजेक्ट

रिएक्टिवयूआई को कार्रवाई में देखने के लिए, हम एवलोनिया एप्लिकेशन टेम्प्लेट के आधार पर एक नया .NET कोर प्रोजेक्ट बनाते हैं। तब हम Avalonia.ReactiveUI पैकेज स्थापित करते हैं। पैकेज प्लेटफ़ॉर्म-विशिष्ट एवलोनिया जीवन चक्र हुक, रूटिंग और सक्रियण अवसंरचना प्रदान करता है। .NET कोर को स्थापित करने और नीचे दिए गए आदेशों को निष्पादित करने से पहले याद रखें।

 git clone https://github.com/AvaloniaUI/avalonia-dotnet-templates git --git-dir ./avalonia-dotnet-templates/.git checkout 9263c6b dotnet new --install ./avalonia-dotnet-templates dotnet new avalonia.app -o ReactiveUI.Samples.Suspension cd ./ReactiveUI.Samples.Suspension dotnet add package Avalonia.ReactiveUI dotnet add package Avalonia.Desktop dotnet add package Avalonia

चलो एप्लिकेशन चलाते हैं और यह सुनिश्चित करते हैं कि यह "एवलोनिया में आपका स्वागत है" प्रदर्शित करता है!

 # Use .NET Core version which you have installed. # It can be netcoreapp2.0, netcoreapp2.1 and so on. dotnet run --framework netcoreapp3.0

MyGet से Avalonia प्रीव्यू बिल्ड की स्थापना

नवीनतम एवलोनिया पैकेज को MyGet पर प्रकाशित किया जाता है, हर बार एक नई प्रतिबद्धता GitHub पर एवलोनिया भंडार की master शाखा को धकेल दी जाती है। हमारे ऐप में MyGet के नवीनतम पैकेजों का उपयोग करने के लिए, हम एक nuget.config फ़ाइल बनाने जा रहे हैं। लेकिन ऐसा करने से पहले, हम .NET कोर CLI का उपयोग करते हुए पहले बनाई गई परियोजना के लिए एक sln फ़ाइल बनाते हैं:

 dotnet new sln # Ctrl+C dotnet sln ReactiveUI.Samples.Suspension.sln add ReactiveUI.Samples.Suspension.csproj

अब हम निम्नलिखित सामग्री के साथ nuget.config फ़ाइल बनाते हैं:

 <?xml version="1.0" encoding="utf-8"?> <configuration> <packageSources> <add key="AvaloniaCI" value="https://www.myget.org/F/avalonia-ci/api/v2" /> </packageSources> </configuration>

आमतौर पर, नए जोड़े गए MyGet फ़ीड से पैकेजों का पता लगाने के लिए हमारी IDE को बाध्य करने के लिए एक पुनरारंभ की आवश्यकता होती है, लेकिन समाधान को फिर से लोड करने के लिए भी मदद करनी चाहिए। फिर, हम न्यूगेट पैकेज मैनेजर जीयूआई, या .NET कोर सीएलआई का उपयोग करके एवलोनिया पैकेज को सबसे हाल के संस्करण (या कम से कम 0.9.1 ) में अपग्रेड करते हैं:

 dotnet add package Avalonia.ReactiveUI --version 0.9.1 dotnet add package Avalonia.Desktop --version 0.9.1 dotnet add package Avalonia --version 0.9.1 cat ReactiveUI.Samples.Suspension.csproj

ReactiveUI.Samples.Suspension.csproj फ़ाइल को कुछ इस प्रकार दिखना चाहिए:

 <Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <OutputType>WinExe</OutputType> <TargetFramework>netcoreapp3.0</TargetFramework> </PropertyGroup> <ItemGroup> <Compile Update="**\*.xaml.cs"> <DependentUpon>%(Filename)</DependentUpon> </Compile> <AvaloniaResource Include="**\*.xaml"> <SubType>Designer</SubType> </AvaloniaResource> </ItemGroup> <ItemGroup> <PackageReference Include="Avalonia" Version="0.9.1" /> <PackageReference Include="Avalonia.Desktop" Version="0.9.1" /> <PackageReference Include="Avalonia.ReactiveUI" Version="0.9.1" /> </ItemGroup> </Project>

हम प्रोजेक्ट रूट डायरेक्टरी के अंदर दो नए फोल्डर बनाते हैं, जिन्हें क्रमशः Views/ और ViewModels/ नाम दिया गया है। इसके बाद, हम MainWindow क्लास का नाम बदलकर MainView कर MainView और इसे Views/ folder में ले जाते हैं। संबंधित XAML फ़ाइल में संपादित वर्ग के संदर्भों का नाम बदलना याद रखें, अन्यथा, परियोजना संकलित नहीं होगी। इसके अलावा, MainView लिए नाम बदलने के लिए याद रखें ReactiveUI.Samples.Suspension.Views स्थिरता के लिए। फिर, हम दो अन्य फ़ाइलों को संपादित करते हैं, Program.cs और App.xaml.cs हम UseReactiveUI ऐप बिल्डर के लिए UseReactiveUI लिए एक कॉल जोड़ते हैं, ऐप इनीशियलाइज़ेशन कोड को OnFrameworkInitializationCompleted से OnFrameworkInitializationCompleted । OnFrameworkInitializationCompleted एप्लिकेशन को आजीवन प्रबंधन दिशानिर्देशों के अनुरूप बनाने के लिए विधि:

Program.cs

 class Program { // The entry point. Things aren't ready yet, so at this point // you shouldn't use any Avalonia types or anything that // expects a SynchronizationContext to be ready. public static void Main(string[] args) => BuildAvaloniaApp() .StartWithClassicDesktopLifetime(args); // This method is required for IDE previewer infrastructure. // Don't remove, otherwise, the visual designer will break. public static AppBuilder BuildAvaloniaApp() => AppBuilder.Configure<App>() .UseReactiveUI() // required! .UsePlatformDetect() .LogToDebug(); }

App.xaml.cs

 public class App : Application { public override void Initialize() => AvaloniaXamlLoader.Load(this); // The entrypoint for your application. Here you initialize your // MVVM framework, DI container and other components. You can use // the ApplicationLifetime property here to detect if the app // is running on a desktop platform or on a mobile platform (WIP). public override void OnFrameworkInitializationCompleted() { new Views.MainView().Show(); base.OnFrameworkInitializationCompleted(); } }

परियोजना के निर्माण का प्रयास करने से पहले, हम सुनिश्चित using Avalonia.ReactiveUI का using Avalonia.ReactiveUI Program.cs फ़ाइल के शीर्ष पर जोड़ा जाता है। सबसे अधिक संभावना है कि हमारी IDE ने पहले ही उस नाम स्थान को आयात कर लिया है, लेकिन अगर ऐसा नहीं हुआ, तो हमें एक संकलन-समय त्रुटि मिलेगी। अंत में, यह सुनिश्चित करने का समय है कि ऐप एक नई विंडो को संकलित करता है, चलाता है और दिखाता है:

 dotnet run --framework netcoreapp2.1

क्रॉस-प्लेटफॉर्म रिएक्टिवयू रूटिंग

क्रॉस-प्लेटफ़ॉर्म .NET ऐप में इन-ऐप नेविगेशन के आयोजन के दो सामान्य दृष्टिकोण हैं - दृश्य-प्रथम और दृश्य मॉडल-प्रथम। पूर्व दृष्टिकोण मानता है कि दृश्य परत नेविगेशन स्टैक का प्रबंधन करती है - उदाहरण के लिए, प्लेटफ़ॉर्म-विशिष्ट फ़्रेम और पृष्ठ कक्षाओं का उपयोग करके। बाद के दृष्टिकोण के साथ, दृश्य मॉडल परत एक मंच-अज्ञेय अमूर्त के माध्यम से नेविगेशन का ख्याल रखता है। ReactiveUI टूलींग को देखने के मॉडल-प्रथम दृष्टिकोण को ध्यान में रखते हुए बनाया गया है। ReactiveUI रूटिंग में एक IScreen कार्यान्वयन होता है, जिसमें वर्तमान रूटिंग अवस्था, कई IRoutableViewModel कार्यान्वयन और एक प्लेटफ़ॉर्म-विशिष्ट XAML नियंत्रण होता है जिसे RoutedViewHost कहा जाता है।

RoutingState ऑब्जेक्ट नेविगेशन स्टैक प्रबंधन को RoutingState करता है। IScreen नेविगेशन रूट है, लेकिन नाम के बावजूद, इसे पूरी स्क्रीन पर कब्जा नहीं करना है। RoutedViewHost बाध्य RoutingState में परिवर्तन के लिए प्रतिक्रिया करता है और वर्तमान में चयनित IRoutableViewModel लिए उपयुक्त दृश्य एम्बेड करता है। वर्णित कार्यक्षमता को बाद में अधिक व्यापक उदाहरणों के साथ चित्रित किया जाएगा।

स्थायी दृश्य मॉडल स्थिति

एक उदाहरण के रूप में एक खोज स्क्रीन दृश्य मॉडल पर विचार करें।

हम यह तय करने जा रहे हैं कि एप्लिकेशन बंद होने से बचाने के लिए कौन से व्यू मॉडल के कौन से गुण हैं और किन लोगों को फिर से बनाना है। एक प्रतिक्रियाशील कमांड की स्थिति को बचाने की कोई आवश्यकता नहीं है जो ICommand इंटरफ़ेस को लागू करता है। ReactiveCommand<TIn, TOut> वर्ग को आमतौर पर कंस्ट्रक्टर में आरंभीकृत किया जाता है, इसका CanExecute इंडिकेटर आमतौर पर पूरी तरह से मॉडल के गुणों पर निर्भर करता है और हर बार उन गुणों में से किसी भी परिवर्तन के बाद ReactiveCommand<TIn, TOut> हो जाता है। यदि आप खोज परिणाम रखना चाहते हैं तो यह बहस का विषय है, लेकिन खोज क्वेरी को सहेजना एक अच्छा विचार है।

ViewModels / SearchViewModel.cs

 [DataContract] public class SearchViewModel : ReactiveObject, IRoutableViewModel { private readonly ReactiveCommand<Unit, Unit> _search; private string _searchQuery; // We inject the IScreen implementation via the constructor. // If we receive null, we use Splat.Locator to resolve the // default implementation. The parameterless constructor is // required for the deserialization feature to work. public SearchViewModel(IScreen screen = null) { HostScreen = screen ?? Locator.Current.GetService<IScreen>(); // Each time the search query changes, we check if the search // query is empty. If it is, we disable the command. var canSearch = this .WhenAnyValue(x => x.SearchQuery) .Select(query => !string.IsNullOrWhiteSpace(query)); // Buttons bound to the command will stay disabled // as long as the command stays disabled. _search = ReactiveCommand.CreateFromTask( () => Task.Delay(1000), // emulate a long-running operation canSearch); } public IScreen HostScreen { get; } public string UrlPathSegment => "/search"; public ICommand Search => _search; [DataMember] public string SearchQuery { get => _searchQuery; set => this.RaiseAndSetIfChanged(ref _searchQuery, value); } }

हम [DataContract] विशेषता के साथ संपूर्ण दृश्य मॉडल वर्ग को चिह्नित करते हैं, संपत्तियों को एनोटेट करते हैं जिन्हें हम [DataMember] विशेषता के साथ क्रमबद्ध करने जा रहे हैं। यह पर्याप्त है अगर हम ऑप्ट-इन क्रमांकन मोड का उपयोग करने जा रहे हैं। क्रमबद्धता के तरीकों को ध्यान में रखते हुए, ऑप्ट-आउट का मतलब है कि सभी सार्वजनिक क्षेत्रों और संपत्तियों को क्रमबद्ध किया जाएगा, जब तक कि आप [IgnoreDataMember] विशेषता के साथ एनोटेट करके स्पष्ट रूप से उन्हें अनदेखा नहीं करते हैं, ऑप्ट-इन का मतलब विपरीत है। इसके अतिरिक्त, हम अपने दृश्य मॉडल वर्ग में IRoutableViewModel इंटरफ़ेस लागू करते हैं। यह आवश्यक है जब हम नेविगेशन स्टैक के एक भाग के रूप में दृश्य मॉडल का उपयोग करने जा रहे हैं।

लॉगिन दृश्य मॉडल के लिए कार्यान्वयन विवरण

ViewModels / LoginViewModel.cs

 [DataContract] public class LoginViewModel : ReactiveObject, IRoutableViewModel { private readonly ReactiveCommand<Unit, Unit> _login; private string _password; private string _username; // We inject the IScreen implementation via the constructor. // If we receive null, we use Splat.Locator to resolve the // default implementation. The parameterless constructor is // required for the deserialization feature to work. public LoginViewModel(IScreen screen = null) { HostScreen = screen ?? Locator.Current.GetService<IScreen>(); // When any of the specified properties change, // we check if user input is valid. var canLogin = this .WhenAnyValue( x => x.Username, x => x.Password, (user, pass) => !string.IsNullOrWhiteSpace(user) && !string.IsNullOrWhiteSpace(pass)); // Buttons bound to the command will stay disabled // as long as the command stays disabled. _login = ReactiveCommand.CreateFromTask( () => Task.Delay(1000), // emulate a long-running operation canLogin); } public IScreen HostScreen { get; } public string UrlPathSegment => "/login"; public ICommand Login => _login; [DataMember] public string Username { get => _username; set => this.RaiseAndSetIfChanged(ref _username, value); } // Note: Saving passwords to disk isn't a good idea. public string Password { get => _password; set => this.RaiseAndSetIfChanged(ref _password, value); } }

दो दृश्य मॉडल IRoutableViewModel इंटरफ़ेस को लागू करते हैं और एक नेविगेशन स्क्रीन में एम्बेडेड होने के लिए तैयार हैं। अब IScreen इंटरफ़ेस को लागू करने का समय आ गया है। फिर, हम [DataContract] विशेषताओं का उपयोग यह इंगित करने के लिए करते हैं कि किन भागों को क्रमबद्ध करना है और किन लोगों को अनदेखा करना है। नीचे दिए गए उदाहरण में, RoutingState प्रॉपर्टी सेटर को जानबूझकर सार्वजनिक घोषित किया गया है - यह हमारे धारावाहिक को संपत्ति को संशोधित करने की अनुमति देता है जब वह RoutingState हो जाता है।

ViewModels / MainViewModel.cs

 [DataContract] public class MainViewModel : ReactiveObject, IScreen { private readonly ReactiveCommand<Unit, Unit> _search; private readonly ReactiveCommand<Unit, Unit> _login; private RoutingState _router = new RoutingState(); public MainViewModel() { // If the authorization page is currently shown, then // we disable the "Open authorization view" button. var canLogin = this .WhenAnyObservable(x => x.Router.CurrentViewModel) .Select(current => !(current is LoginViewModel)); _login = ReactiveCommand.Create( () => { Router.Navigate.Execute(new LoginViewModel()); }, canLogin); // If the search screen is currently shown, then we // disable the "Open search view" button. var canSearch = this .WhenAnyObservable(x => x.Router.CurrentViewModel) .Select(current => !(current is SearchViewModel)); _search = ReactiveCommand.Create( () => { Router.Navigate.Execute(new SearchViewModel()); }, canSearch); } [DataMember] public RoutingState Router { get => _router; set => this.RaiseAndSetIfChanged(ref _router, value); } public ICommand Search => _search; public ICommand Login => _login; }

हमारे मुख्य दृश्य मॉडल में, हम डिस्क पर केवल एक फ़ील्ड को सहेजते हैं - एक प्रकार का RoutingState । हमें प्रतिक्रियाशील आदेशों की स्थिति को बचाने की आवश्यकता नहीं है, क्योंकि उनकी उपलब्धता पूरी तरह से राउटर की वर्तमान स्थिति और प्रतिक्रियाशील परिवर्तनों पर निर्भर करती है। राउटर को उसी स्थिति में पुनर्स्थापित करने में सक्षम होने के लिए, जब हम राउटर को क्रमबद्ध करते समय हमारे IRoutableViewModel कार्यान्वयन की विस्तारित प्रकार की जानकारी शामिल करते हैं। हम बाद में इसे प्राप्त करने के लिए Newtonsoft.Json की TypenameHandling.All सेटिंग का उपयोग करेंगे। हम ViewModels/ फ़ोल्डर में MainViewModel , ReactiveUI.Samples.Suspension.ViewModels होने के लिए नाम स्थान समायोजित करते हैं।

एक Avalonia ऐप में रूटिंग

फिलहाल, हमने अपने एप्लिकेशन के प्रेजेंटेशन मॉडल को लागू कर दिया है। बाद में, एक अलग असेंबली टारगेटिंग .NET स्टैंडर्ड में व्यू मॉडल क्लासेस को निकाला जा सकता है, इसलिए हमारे ऐप के मुख्य भाग को कई .NET GUI फ्रेमवर्क में पुन: उपयोग किया जा सकता है। अब यह हमारे ऐप के एवलोनिया-विशिष्ट जीयूआई भाग को लागू करने का समय है। हम क्रमशः SearchView.xaml और SearchView.xaml.cs नाम के Views/ फ़ोल्डर में दो फाइलें बनाते हैं। ये एकल खोज दृश्य के दो भाग हैं - पूर्व वाला UI XAML में घोषित रूप से वर्णित है, और बाद वाले में C # कोड-पीछे है। यह अनिवार्य रूप से पहले बनाए गए खोज दृश्य मॉडल के लिए दृश्य है।

अवलोनिया में प्रयुक्त XAML बोली को WPF, UWP या XF से आने वाले डेवलपर्स के लिए तुरंत परिचित महसूस करना चाहिए। ऊपर दिए गए उदाहरण में हम एक सरल लेआउट बनाते हैं जिसमें टेक्स्ट बॉक्स और एक बटन होता है जो खोज को ट्रिगर करता है। हम SearchViewModel से गुण और आदेश को SearchViewModel में घोषित नियंत्रणों से SearchView ।

दृश्य / SearchView.xaml

 <UserControl xmlns="https://github.com/avaloniaui" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DataContext="{d:DesignInstance viewModels:SearchViewModel}" xmlns:viewModels="clr-namespace:ReactiveUI.Samples.Suspension.ViewModels" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="ReactiveUI.Samples.Suspension.Views.SearchView" xmlns:reactiveUi="http://reactiveui.net" mc:Ignorable="d"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="48" /> <RowDefinition Height="48" /> <RowDefinition Height="48" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="Search view" Margin="5" /> <TextBox Grid.Row="1" Text="{Binding SearchQuery, Mode=TwoWay}" /> <Button Grid.Row="2" Content="Search" Command="{Binding Search}" /> </Grid> </UserControl>

दृश्य / SearchView.xaml.cs

 public sealed class SearchView : ReactiveUserControl<SearchViewModel> { public SearchView() { // The call to WhenActivated is used to execute a block of code // when the corresponding view model is activated and deactivated. this.WhenActivated((CompositeDisposable disposable) => { }); AvaloniaXamlLoader.Load(this); } }

WPF और UWP डेवलपर्स को SearchView.xaml फ़ाइल के लिए कोड-पीछे मिल सकता है। जब सक्रियण तर्क को निष्पादित करने के लिए WhenActivated कॉल को जोड़ा जाता है। WhenActivated लिए पहली दलील के रूप में आने वाले डिस्पोजेबल का निपटान तब किया जाता है जब दृश्य निष्क्रिय किया जाता है। यदि आपका एप्लिकेशन गर्म वेधशालाओं (जैसे स्थिति सेवाओं, टाइमर, ईवेंट एग्रीगेटर्स) का उपयोग कर रहा है, तो एक DisposeWith कॉल जोड़कर WhenActivated समग्र डिस्पोजेबल के लिए सदस्यता संलग्न करने का एक बुद्धिमान निर्णय होगा, इसलिए यह दृश्य उन हॉट DisposeWith से अलग हो जाएगा और मेमोरी लीक नहीं होगी।

लॉगिन दृश्य के लिए कार्यान्वयन विवरण

दृश्य / LoginView.xaml

 <UserControl xmlns="https://github.com/avaloniaui" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DataContext="{d:DesignInstance viewModels:LoginViewModel, IsDesignTimeCreatable=True}" xmlns:viewModels="clr-namespace:ReactiveUI.Samples.Suspension.ViewModels" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="ReactiveUI.Samples.Suspension.Views.LoginView" xmlns:reactiveUi="http://reactiveui.net" mc:Ignorable="d"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="48" /> <RowDefinition Height="48" /> <RowDefinition Height="48" /> <RowDefinition Height="48" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="Login view" Margin="5" /> <TextBox Grid.Row="1" Text="{Binding Username, Mode=TwoWay}" /> <TextBox Grid.Row="2" PasswordChar="*" Text="{Binding Password, Mode=TwoWay}" /> <Button Grid.Row="3" Content="Login" Command="{Binding Login}" /> </Grid> </UserControl>

दृश्य / LoginView.xaml.cs

 public sealed class LoginView : ReactiveUserControl<LoginViewModel> { public LoginView() { this.WhenActivated(disposables => { }); AvaloniaXamlLoader.Load(this); } }

हम Views/MainView.xaml और Views/MainView.xaml.cs फ़ाइलें संपादित करते हैं। हम मुख्य विंडो XAML लेआउट में Avalonia.ReactiveUI नामस्थान से RoutedViewHost नियंत्रण को जोड़ते हैं और RoutedViewHost के Router MainViewModel को RoutedViewHost.Router गुण से RoutedViewHost.Router हैं। हम दो बटन जोड़ते हैं, एक खोज पृष्ठ खोलता है और दूसरा प्राधिकरण पृष्ठ खोलता है।

दृश्य / MainView.xaml

 <Window xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" x:Class="ReactiveUI.Samples.Suspension.Views.MainView" xmlns:reactiveUi="http://reactiveui.net" Title="ReactiveUI.Samples.Suspension"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="48" /> </Grid.RowDefinitions> <!-- The RoutedViewHost XAML control observes the bound RoutingState. It subscribes to changes in the navigation stack and embedds the appropriate view for the currently selected view model. --> <reactiveUi:RoutedViewHost Grid.Row="0" Router="{Binding Router}"> <reactiveUi:RoutedViewHost.DefaultContent> <TextBlock Text="Default Content" /> </reactiveUi:RoutedViewHost.DefaultContent> </reactiveUi:RoutedViewHost> <Grid Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button Grid.Column="0" Command="{Binding Search}" Content="Search" /> <Button Grid.Column="1" Command="{Binding Login}" Content="Login" /> <Button Grid.Column="2" Command="{Binding Router.NavigateBack}" Content="Back" /> </Grid> </Grid> </Window>

दृश्य / MainView.xaml.cs

 public sealed class MainView : ReactiveWindow<MainViewModel> { public MainView() { this.WhenActivated(disposables => { }); AvaloniaXamlLoader.Load(this); } }

एक सरल अवलोनिया और रिएक्टिवुई रूटिंग डेमो ऐप अब तैयार है। जब कोई उपयोगकर्ता खोज या लॉगिन बटन दबाता है, तो नेविगेशन को ट्रिगर करने वाली एक कमांड को आमंत्रित किया जाता है और RoutingState अपडेट हो जाता है। RoutedViewHost XAML नियंत्रण रूटिंग स्थिति को देखता है, IViewFor<TViewModel> से उपयुक्त IViewFor<TViewModel> कार्यान्वयन को हल करने का प्रयास करता है। यदि एक IViewFor<TViewModel> कार्यान्वयन पंजीकृत है, तो नियंत्रण का एक नया उदाहरण IViewFor<TViewModel> विंडो में बनाया और एम्बेड किया गया है।

हम Locator.CurrentMutable का उपयोग करके App.OnFrameworkInitializationCompleted विधि में हमारे IViewFor और IScreen कार्यान्वयन को पंजीकृत करते हैं। IViewFor करने के लिए RoutedViewHost नियंत्रण के लिए IViewFor कार्यान्वयन को पंजीकृत करना आवश्यक है। IScreen रजिस्टर करने से हमारे SearchViewModel और LoginViewModel को LoginViewModel दौरान प्रॉपर्टी इनिशियलाइज़ करने की अनुमति LoginViewModel है, जो कि पैरामीटर रहित कंस्ट्रक्टर का उपयोग करता है।

App.xaml.cs

 public override void OnFrameworkInitializationCompleted() { // Here we register our view models. Locator.CurrentMutable.RegisterConstant<IScreen>(new MainViewModel()); Locator.CurrentMutable.Register<IViewFor<SearchViewModel>>(() => new SearchView()); Locator.CurrentMutable.Register<IViewFor<LoginViewModel>>(() => new LoginView()); // Here we resolve the root view model and initialize main view data context. new MainView { DataContext = Locator.Current.GetService<IScreen>() }.Show(); base.OnFrameworkInitializationCompleted(); }

आइए हमारे एप्लिकेशन को लॉन्च करें और राउटिंग प्रदर्शन सुनिश्चित करें कि यह होना चाहिए। यदि XAML UI मार्कअप के साथ कुछ गलत होता है, तो Avalonia XamlIl कंपाइलर हमें कंपाउंड समय पर किसी भी त्रुटि के बारे में सूचित करेगा। इसके अलावा, XamlIl XAML डिबगिंग का समर्थन करता है !

 dotnet run --framework netcoreapp3.0

सेविंग एंड रिस्टोरिंग एप्लीकेशन स्टेट

जब ऐप निलंबित और फिर से शुरू हो रहा है तो ऐप स्टेट को बचाने और पुनर्स्थापित करने के लिए जिम्मेदार निलंबन चालक को लागू करने का समय आ गया है। प्लेटफ़ॉर्म-विशिष्ट AutoSuspendHelper वर्ग चीजों को शुरू करने का ध्यान रखता है, आप, एक डेवलपर के रूप में, केवल ऐप कंपोज़िशन रूट में इसका एक उदाहरण बनाने की आवश्यकता है। इसके अलावा, आपको RxApp.SuspensionHost.CreateNewAppState फैक्टरी को इनिशियलाइज़ करना RxApp.SuspensionHost.CreateNewAppState । यदि एप्लिकेशन में कोई सहेजा गया डेटा नहीं है, या यदि सहेजा गया डेटा दूषित है, तो ReactiveUI अनुप्रयोग स्थिति ऑब्जेक्ट का डिफ़ॉल्ट उदाहरण बनाने के लिए उस फ़ैक्टरी विधि को आमंत्रित करता है।

उसके बाद, हम RxApp.SuspensionHost.SetupDefaultSuspendResume विधि को लागू करते हैं, और ISuspensionDriver लिए ISuspensionDriver का एक नया उदाहरण पास करते हैं। आइए Newtonsoft.Json और System.IO नामस्थान से कक्षाओं का उपयोग करते हुए ISuspensionDriver इंटरफ़ेस लागू करें।

 dotnet add package Newtonsoft.Json

ड्राइवर / NewtonsoftJsonSuspensionDriver.cs

 public class NewtonsoftJsonSuspensionDriver : ISuspensionDriver { private readonly string _file; private readonly JsonSerializerSettings _settings = new JsonSerializerSettings { TypeNameHandling = TypeNameHandling.All }; public NewtonsoftJsonSuspensionDriver(string file) => _file = file; public IObservable<Unit> InvalidateState() { if (File.Exists(_file)) File.Delete(_file); return Observable.Return(Unit.Default); } public IObservable<object> LoadState() { var lines = File.ReadAllText(_file); var state = JsonConvert.DeserializeObject<object>(lines, _settings); return Observable.Return(state); } public IObservable<Unit> SaveState(object state) { var lines = JsonConvert.SerializeObject(state, _settings); File.WriteAllText(_file, lines); return Observable.Return(Unit.Default); } }

वर्णित दृष्टिकोण में एक खामी है - कुछ System.IO कक्षाएं UWP फ्रेमवर्क के साथ काम नहीं करेंगी, UWP एप्लिकेशन सैंडबॉक्स में चलते हैं और चीजों को अलग तरीके से करते हैं। यह हल करना आसान है - आपको UWP को लक्षित करते समय File और Directory बजाय StorageFile और StorageFolder कक्षाओं का उपयोग करने की आवश्यकता है। डिस्क से नेविगेशन स्टैक पढ़ने के लिए, एक सस्पेंशन ड्राइवर को JSON ऑब्जेक्ट्स को ठोस IRoutableViewModel कार्यान्वयन में समर्थन देना चाहिए, इसीलिए हम TypeNameHandling.All Newtonsoft.Json serializer सेटिंग का उपयोग करते हैं। हम एप्लिकेशन कंपोज़िशन रूट में सस्पेंशन ड्राइवर को App.OnFrameworkInitializationCompleted विधि में App.OnFrameworkInitializationCompleted करते हैं:

 public override void OnFrameworkInitializationCompleted() { // Initialize suspension hooks. var suspension = new AutoSuspendHelper(ApplicationLifetime); RxApp.SuspensionHost.CreateNewAppState = () => new MainViewModel(); RxApp.SuspensionHost.SetupDefaultSuspendResume(new NewtonsoftJsonSuspensionDriver("appstate.json")); suspension.OnFrameworkInitializationCompleted(); // Read main view model state from disk. var state = RxApp.SuspensionHost.GetAppState<MainViewModel>(); Locator.CurrentMutable.RegisterConstant<IScreen>(state); // Register views. Locator.CurrentMutable.Register<IViewFor<SearchViewModel>>(() => new SearchView()); Locator.CurrentMutable.Register<IViewFor<LoginViewModel>>(() => new LoginView()); // Show the main window. new MainView { DataContext = Locator.Current.GetService<IScreen>() }.Show(); base.OnFrameworkInitializationCompleted(); }

Avalonia.ReactiveUI पैकेज से AutoSuspendHelper वर्ग आपके आवेदन के लिए जीवन चक्र हुक स्थापित करता है, इसलिए ReactiveUI फ्रेमवर्क इस बात से अवगत होगा कि प्रदान किए गए ISuspensionDriver कार्यान्वयन का उपयोग करके डिस्क पर एप्लिकेशन स्टेट को कब लिखना है। हम अपना एप्लिकेशन लॉन्च करने के बाद, निलंबन ड्राइवर appstate.json नामक एक नई JSON फ़ाइल appstate.json । जब हम UI में परिवर्तन करते हैं (जैसे कि टेक्स्ट फ़ील्ड में कुछ टाइप करें, या किसी भी बटन पर क्लिक करें) और फिर ऐप को बंद कर दें, appstate.json फ़ाइल निम्नलिखित के समान दिखाई देगी:

appstate.json

ध्यान दें, फ़ाइल में प्रत्येक JSON ऑब्जेक्ट में एक पूरी तरह से योग्य नाम के साथ $type कुंजी है, जिसमें नेमस्पेस भी शामिल है।

 { "$type": "ReactiveUI.Samples.Suspension.ViewModels.MainViewModel, ReactiveUI.Samples.Suspension", "Router": { "$type": "ReactiveUI.RoutingState, ReactiveUI", "_navigationStack": { "$type": "System.Collections.ObjectModel.ObservableCollection`1[[ReactiveUI.IRoutableViewModel, ReactiveUI]], System.ObjectModel", "$values": [ { "$type": "ReactiveUI.Samples.Suspension.ViewModels.SearchViewModel, ReactiveUI.Samples.Suspension", "SearchQuery": "funny cats" }, { "$type": "ReactiveUI.Samples.Suspension.ViewModels.LoginViewModel, ReactiveUI.Samples.Suspension", "Username": "worldbeater" } ] } } }

यदि आप ऐप को बंद करते हैं और फिर इसे फिर से लॉन्च करते हैं, तो आपको स्क्रीन पर वही सामग्री दिखाई देगी जो आपने पहले देखी है! UWP, WPF, Xamarin Forms या Xamarin मूल सहित, ReactiveUI द्वारा समर्थित प्रत्येक प्लेटफॉर्म पर वर्णित कार्यक्षमता काम करती है।

बोनस: ISuspensionDriver इंटरफ़ेस को अकावाचे का उपयोग करके लागू किया जा सकता है - एक अतुल्यकालिक, लगातार कुंजी-मूल्य स्टोर। यदि आप अपने डेटा को UserAccount सेक्शन या Secure सेक्शन में स्टोर करते हैं, तो iOS और UWP पर आपका डेटा स्वचालित रूप से क्लाउड पर बैकअप हो जाएगा और सभी डिवाइस पर उपलब्ध होगा, जिस पर ऐप इंस्टॉल है। साथ ही, ReactiveUI.AndroidSupport पैकेज में एक BundleSuspensionDriver मौजूद है। Xamarin.Essentials SecureStorage API का उपयोग डेटा स्टोर करने के लिए भी किया जा सकता है। आप दूरस्थ सर्वर पर या प्लेटफ़ॉर्म-स्वतंत्र क्लाउड सेवा में भी अपना ऐप स्टेट स्टोर कर सकते हैं।

उपयोगी लिंक

वर्णित एप्लिकेशन का स्रोत कोड GitHub पर उपलब्ध है ।
ढांचा सीखना शुरू करने के लिए अवलोनिया प्रलेखन देखें।
अधिक भयानक सुविधाओं की खोज करने के लिए ReactiveUI हैंडबुक पढ़ें।

ReactiveUI और Avalonia के साथ क्रॉस-प्लेटफ़ॉर्म .NET कोर GUI ऐप में डिस्क पर रूटिंग स्टेट को सेव करना