مشخصات مقاله

تعداد دانلود:
499
امتیاز :
0.0
تعداد بازدید:
2099
تعداد نظرات:
0
لایک ها :
0

بررسی عمیق تر Xamarin.Forms Quickstart

درVisual Studio 2019

در بخش های قبل، اپلیکیشن Notes ساخته شد. این مقاله به بررسی آنچه ساخته شد میپردازد تا به فهم پایه ای از کارکرد اپلیکیشن های Xamarin.Forms دست یابیم.

معرفی به Visual Studio

Visual Studio کد ها را به دو بخش Solutions و Projects تقسیم میکند. Solution مانند یک نگهدارنده است که چند Project را در خود نگه میدارد. یک Project میتواند یک application، supporting Library ، test application و یا چیز های دیگری باشد. اپلیکیشن Notes شامل یک Solution است که چهار project را ،طبق شکل زیر، در خود دارد:

پروژه های موجود :

• Notes- این پروژه، یک پروژه .NET Standard library میباشد که تمامی کد ها و UI هارا در خود نگه میدارد.
• Notes.Android- این پروژه ، کد های مختص اندروید را نگهداری میکند و نقطه شروع اندروید اپلیکیشن میباشد.
• Notes.iOS- این پروژه، کد های مختص iOS را نگهداری میکند و نقطه شروع اپلیکیشن iOS میباشد.
• Notes.UWP- این پروژه شامل کد های مختص Universal Windows Platforms (UWP) میباشد و نقطه شروع اپلیکیشن های UWP است.

آناتومی اپلیکیشن های Xamarin.Forms

شکل زیر، محتویات Notes.NET Standard library project را درfor Mac Visual Studio نشان میدهد:

این پروژه Dependency node هایی دارد که شامل NuGet nodes و SDK nodes میباشد:

NuGet- پکیج های Xamarin.Forms و sqlite-net-pcl NuGet که به پروژه اضافه شده اند.
SDK- متاپکیج های NETStandard.Library که به کلیه پکیج های NuGet، که .NET Standard را تعریف میکنند، ارجاع میدهد.

پروژه همچنین شامل تعدادی فایل میباشد:

Data\NoteDatabase.cs- این کلاس شامل کدهایی برای ایجاد دیتابیس، خواندن، نوشتن و حذف دیتا آن میباشد.
Models\Note.cs- این کلاس یک Note model تعریف میکند که instance های آن، دیتا مربوط به هر یادداشت را در اپلیکیشن، ذخیره میکند.
App.xaml- XAML markup برای کلاس App که یک Resource dictionary برای اپلیکیشن تعریف میکند.
App.xaml.cs- code-behind برای کلاس App میباشد که وظیفه ی ایجاد instance صفحه اول را دارد که توسط اپلیکیشن در پلتفرم های مختلف نشان داده میشود و برای رسیدگی به lifecycle event های اپلیکیشن، استفاده میشود.
AssemblyInfo.cs- این فایل شامل صفات اپلیکیشن درباره پروژه میباشد که در سطح اسمبلی مورد استفاده قرار میگیرد.
NotesPage.xaml- XAML markup برای کلاس NotesPage که UI صفحه، زمانی که اپلیکیشن شروع میشود را ، تعیین میکند.
NotePage.xaml.cs- code-behind برای کلاس NotesPage میباشد که شامل Business logic است که در زمان ارتباط کاربر با صفحه، اجرا میشود.
NoteEntryPage.xaml- XAML markup برای کلاس NoteEntryPage که UI صفحه ،زمانی که کاربر یک یادداشت وارد میکند را، تعیین میکند.
NoteEntryPage.xaml.cs- code-behind برای کلاس NotesEntryPage میباشد که شامل Business logic است که در زمان ارتباط کاربر با صفحه، اجرا میشود.

برای اطلاعات بیشتر درباره آناتومی اپلیکیشن های Xamarin.iOS به Anatomy of a Xamarin.iOS Application و برای Xamarin.Android به Anatomy of a Xamarin.Android Application مراجعه کنید.

معماری و پایه اپلیکیشن

معماری یک اپلیکیشن Xamarin.Forms مانند یک اپلیکیشن معمولی Cross-platform میباشد. کد به شکل معمول در یک .NET Standard library قرار دارد و اپلیکیشن های platform-specific از کد های موجود استفاده میکنند. شکل زیر ارتباط های کلی اپلیکیشن Notes را نشان میدهد:

برای حداکثر استفاده از startup code،اپلیکیشن های Xamarin.Forms یک کلاس به نام App دارند که موظف است instance صفحه اول را، که در پلتفرم های مختلف نمایش داده میشود، بسازد؛ مانند کد زیر:

    using Xamarin.Forms;

    namespace Notes
    {
        public partial class App : Application
        {
            public App()
            {
                InitializeComponent();
                MainPage = new NavigationPage(new NotesPage());
            }
            ...
        }
    }

این کد MainPage ازکلاس App را یک NavigationPage قرار میدهد که محتوای آن یک instance از NotesPage میباشد.

علاوه براین، فایل AssemblyInfo.cs یک application attribute دارد که در سطح اسمبلی اجرا میشود:

    using Xamarin.Forms.Xaml;

    [assembly: XamlCompilation(XamlCompilationOptions.Compile)]

XamalCompilation attribute ، کامپایلر XAML را روشن میکند که باعث میشود، XAML مستقیما به کد میانی کامپایل شود. برای اطلاعات بیشتر XAML Compilation را بخوانید.

شروع اپلیکیشن در هر پلتفرم

iOS

برای شروع صفحه اولیه Xamarin.Forms در iOS، پروژه Notes.iOS کلاس AppDelegate را تعریف میکند که زیر شاخه کلاس FormsApplicationDelegate میباشد:

    namespace Notes.iOS
    {
        [Register("AppDelegate")]
        public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
        {
            public override bool FinishedLaunching(UIApplication app, NSDictionary options)
            {
                global::Xamarin.Forms.Forms.Init();
                LoadApplication(new App());
                return base.FinishedLaunching(app, options);
            }
        }
    }

FinishedLaunching override فرم وورک های Xamarin.Forms را با صدا زدن متد Init مقدار اولیه میدهد. این باعث میشود پیاده سازی های iOS-specific در Xamarin.Forms ،پیش از root شدن view controller ها، با صدا زدن متد LoadApplication در اپلیکیشن load شوند.

Android

برای شروع صفحه اولیه Xamarin.Foms در اندروید، پروژه Notes.Android شامل کد هایی میشود که یک Activity با یک MainLauncher attribute ایجاد میکند، که activity زیر شاخه ای ازکلاس FormsAppCompatActivity میباشد:

    namespace Notes.Droid
    {
        [Activity(Label = "Notes",
                  Icon = "@mipmap/icon",
                  Theme = "@style/MainTheme",
                  MainLauncher = true,
                  ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
        public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
        {
            protected override void OnCreate(Bundle savedInstanceState)
            {
                TabLayoutResource = Resource.Layout.Tabbar;
                ToolbarResource = Resource.Layout.Toolbar;
    
                base.OnCreate(savedInstanceState);
                global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
                LoadApplication(new App());
            }
        }
    }

OnCreate override فرم وورک هایXamarin.Forms را با صدا زدن متد Init مقداراولیه دهی میکند. این باعث میشود ساختار های Android-specific درXamarin.Forms ، پیش از load شدن اپلیکیشن های Xamarin.Forms، در اپلیکیشن load شوند.

Universal Windows Platform

دراپلیکیشن های Universal Windows Platform (UWP) ، متد Init که فرم وورک Xamarin.Forms را ایجاد میکند از کلاس App، invoke شده است:

    Xamarin.Forms.Forms.Init (e);

    if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
    {
      ...
    }

این باعث میشود که اپلیکیشن های UWP-specific در Xamarin.Forms در اپلیکیشن load شود. صفحه اولیه Xamarin.Forms توسط کلاس MainPage ایجاد میشود:

    namespace Notes.UWP
    {
        public sealed partial class MainPage
        {
            public MainPage()
            {
                this.InitializeComponent();
                this.LoadApplication(new Notes.App());
            }
        }
    }

اپلیکیشن Xamarin.Forms توسط متد LoadApplication، Load میشود.

توجه !

اپ های Universal Windows Platforms را میتوان با Xamarin.Forms ساخت ، اما فقط توسط Visual Studio بر روی سیستم windows.

User Interface

برای ساخت UI اپلیکیشن های Xamarin.Forms، چهار گروه کنترلی اصلی وجود دارد:

Pages- صفحه های Xamarin.Forms نشان دهنده ی صفحات اپلیکیشن های موبایل Cross-platform هستند. اپلیکیشن Notes از کلاس ContentPage برای نشان دادن یک صفحه استفاده میکند. برای اطلاعات بیشتر درباره صفحات به Xamarin.Forms Pages مراجعه کنید.
View- Xamarin.Forms view ها، کنترل های نمایش داده شده بر روی UIهستند؛ مانند label ها، button ها، text ها و box های ورودی اطلاعات. اپلیکیشن نهایی Notes از ListView، Editor و Button view استفاده میکند. برای اطلاعات بیشتر میتوانید به Xamarin.Forms Views مراجعه کنید.
Layouts- Xamarin.Forms layout ها، مانند نگهدارنده های هستند که view هارا به Logic structure تبدیل میکنند. اپلیکیشن Notes ازکلاس StackLayout برای مرتب کردن view های در یک stack عمودی و یک کلاس Grid برای مرتب کردن button ها به شکل افقی، استفاده میکند. برای اطلاعات بیشتر در این باره Xamarin.Forms Layouts را ببینید.
Cells- Xamarin.Forms cell ها، المان های اختصاصی برای item های درون یک list هستند و مشخص میکنند که هر item در list چگونه باشد. اپلیکیشن Notes ازTextCell برای نشان دادن دو item در هر ردیف List استفاده میکند. برای اطلاعات بیشتر به Xamarin.Forms Cells مراجعه کنید.

در زمان اجرا، هر واحد کنترلی به معادل خود map میشود که به شکل نهایی ارائه شود.

Layout

اپلیکیشن Notes از StackLayout برای ساده سازی توسعه اپلیکیشن coss-plaform، با چیدن view ها بر روی صفحه بدون توجه به سایز صفحه، استفاده میکند. child element ها یکی پس از دیگری، عمودی یا افقی، قرار داده شده اند. میزان استفاده stack layout از صفحه به طرز قرار گیری HorizontalOptions و VerticalOptions بستگی دارد، اما به طور پیش فرض StackLayout از همه صفحه استفاده میکند.

کد XAML زیر نمونه ای از استفاده StackLayout در NoteEntryPage میباشد:

به طور پیش فرض StackLayout چینش عمودی انجام میدهد، اما میتوان با تغییر صفت StackLayout.Orientation به StackOrientation.Horizontal این چینش را تغییر داد.

توجه !

سایز view میتواند توسط صفات HeightRequest و WidthRequest تعیین شود.

برای اطلاعات بیشتر درباره StackLayout به StackLayout مراجعه کنید.

Responding to User Interaction

یک شئ که در XAML تعریف شده است، میتواند یک event که در code-behind مدیریت شده است را، ایجاد کند. در مثال زیر، در متد OnSaveButtonClicked که در code-behind برایNoteEntryPage وجود دارد، در پاسخ به clicked event، که توسط دکمه save ایجاد میشود، اجرا میشود:

    async void OnSaveButtonClicked(object sender, EventArgs e)
    {
        var note = (Note)BindingContext;
        note.Date = DateTime.UtcNow;
        await App.Database.SaveNoteAsync(note);
        await Navigation.PopAsync();
    }

متد OnSaveButtonClicked، یادداشت موجود را در دیتابیس ذخیره میکند و به صفحه قبل باز میگردد.

توجه !

فایل code-behind برای یک کلاس XAML میتواند به یک شی که در XAML تعریف شده است، با کمک صفت x:Name، دسترسی پیدا کند. مقدار این صفت، قوانین شبیه به متغیر ها در C# را دارد( باید با حرف یا زیرخط آغاز شود و فاصله نداشته باشد).

اتصال دکمه Save به متد OnSaveButtonClicked باعث ایجاد XAML markup برای کلاس NoteEntryPage میشود:

Lists

ListView برای نشان دادن تعدادی item به شکل عمودی در یک لیست میباشد. هر item موجود در ListView در یک Single Cell قرار دارد.

کد زیر مثالی از ListView در NotesPage را نشان میدهد:

Layout هر ردیف درListView توسط المان ListView.ItemTemplate مشخص میشود و از data binding برای نشان دادن هر یادداشتی که در اپلیکیشن بازیابی میشود، استفاده میشود. صفت ListView.ItemsSource ، در NotesPage.xaml.cs، data source تعیین شده است:

    protected override async void OnAppearing()
    {
        base.OnAppearing();
    
        listView.ItemsSource = await App.Database.GetNotesAsync();
    }

این کد یادداشت های موجود در دیتابیس را در ListView جمع آوری میکند.

زمانی که ردیف در ListView انتخاب شد، ItemSelected event آغاز میشود. یک event handler به نام OnListViewItemSelected زمانی که event آغاز شود، اجرا میشود:

    async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        if (e.SelectedItem != null)
        {
            ...
        }
    }

ItemSelected event میتواند به شئ های مربوط به Cell از طریق صفت e.SelectedItem ، دسترسی پیدا کند. برای اطلاعات بیشتر درباره کلاس ListView به ListView مراجعه کنید.

Navigation

توجه !

کلاس های CarouselPage، MasterDetailPage و TabbedPage جهت یابی های متفاوتی را ممکن میکنند. برای اطلاعات بیشتر Navigation را ببینید.

در جهت یابی سلسله مراتبی، کلاس NavigationPage برای جهت یابی بین یک stack از اشیاء ContentPage ، به دلخواه به جلو یا عقب، استفاده میشود. این کلاس جهت یابی را برای اشیا صفحه به شکل last-in, first-out (LIFO) ، ایجاد میکند. برای رفتن از یک صفحه به صفحه دیگر، اپلیکیشن یک صفحه جدید را به بالای stack جهت یابی اضافه میکند، و این صفحه جدید ، صفحه فعال است. برای بازگشت به صفحه قبل، اپلیکیشن صفحه فعال فعلی را از بالای stack خارج میکند و صفحه ای که حالا در بالاست، فعال میشود.

کلاس NavigationPage همچنین یک navigation bar در بالای صفحه ایجاد میکند که یک دکمه Backمناسب با عنوان مناسب بر هر پلتفرم، در بالای صفحه قرار میدهد که صفحه را یکی به قبل باز میگرداند.

اولین صفحه موجود در navigation stack ، صفحه root اپلیکیشن نام دارد. کد زیر دستیابی به این را در اپلیکیشن Notes نشان میدهد:

    public App ()
    {
        ...
        MainPage = new NavigationPage (new NotesPage ());
    }

همه ی instance های ContentPage دارای صفت Navigation هستند که حاوی متد های برای تغییر page stack است. این متد ها باید تنها در صورتی اجرا شوند که اپلیکیشن دارای NavigatePage باشد. برای جهت یابی NoteEntryPage، باید متد PushAsync مانند مثال زیر اجرا شود:

    await Navigation.PushAsync(new NoteEntryPage());

این باعث میشود که اشیا جدید NoteEntryPage که وارد navigation stack میشوند، به عنوان صفحه فعال قرار بگیرند.

صفحه فعال را میتوان با زدن دکمه back در دستگاه، صرف نظر ازاینکه دکمه فیزیکی و یا روی صفحه لمسی باشد، از navigation stack خارج کرد. برای اینکه با کد به صفحه قبل باز گردیم ، باید متد PopAsync را مانند مثال زیر اجرا کنیم:

    await Navigation.PopAsync();

برای اطلاعات بیشتر درباره جهت یابی سلسه مراتبی به Hierarchical Navigation مراجعه کنید.

Data binding

binding برای ساده سازی نمایش و ارتباط اپلیکیشن های Xamarin.Forms با داده، استفاده میشود که میتواند یک ارتباط بین UI و اپلیکیشن زیرین، شکل دهد. کلاس BindableObjects شامل زیر ساخت هایی برای پشتیبانی از data binding میباشد.

binding دو شی، که source و target هستند را، به هم متصل میکند. شی Source، دیتا را فراهم میکند و شی target، دیتا فراهم شده توسط source را، استفاده میکند و گاها نمایش میدهد.. برای مثال؛ یک editor (target object) یک متن خود را در یک string در source obj، bind میکند. شکل زیر ارتباطات binding را نشان میدهد:

مزیت اصلی data binding این است که دیگر نیازی نیست نگران هماهنگ کردن دیتا بین view ها و منبع خود باشید. تغییرات در source object اتوماتیک باعث تغییر target object توسط فرم وورک binding در Behind-the-scenes میشود و همچنین تغییرات در target object نیز، به شکل دلخواه میتوانند source object را تغییر دهند.

Data binding در دو گام ایجاد میشود:

صفت BindingContext از شی target باید source باشد.
یک binding باید بین یک source وtarget ایجاد شود که در XAML، میتوان با استفاده از Binding markup extension آن را ایجاد کرد.

در اپلیکیشن Notes،شی binding target ، editor است که یادداشت هارا نمایش میدهد، و instance ایجاد شده از Note که به عنوان BindingContext برای NoteEntryPage است، binding source میباشد.

BindingContext برای NoteEntryPage در زمان جهت یابی صفحه ست میشود که در کد زیر نشان داده شده است:

    async void OnNoteAddedClicked(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new NoteEntryPage
        {
            BindingContext = new Note()
        });
    }
    
    async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        if (e.SelectedItem != null)
        {
            await Navigation.PushAsync(new NoteEntryPage
            {
                BindingContext = e.SelectedItem as Note
            });
        }
    }

در متد OnNoteAddedCliked، که درزمان اضافه شدن یک یادداشت جدید به اپلیکیشن اجرا میشود، BindingContext برای صفحه NoteEntryPage یک note instance جدید قرار میگیرد. در متد OnListViewItemSelected، که در زمان انتخاب یک یادداشت موجود در ListView اجرا میشود، BindingContext برای صفحه NoteEntryPage ، note instance انتخاب شده قرار میگیرد که توسط e.SelectedItem قابل دسترسی است.

مهم !

با اینکه میتوان BindingContext هر target object را به طور جداگانه تنظیم کرد، این کار ضروری نیست. BindingContext یک مشخصه خاص است که به تمام children هایش منتقل میشود. بنابراین زمانی که BindingContext برای ContentPage، یک Note instance قرار بگیرد، تمام children های ContentPage، این BindingContext را خواهند گرفت و میتوانند به مشخصات public شی Note، bind شوند.

پس editor در NoteEntryPage به text از شی Note، bind میشود:

یک binding بین Editor.Text و Text از source object ایجاد شده است. تغییرات ایجاد شده در editor اتوماتیک برشی Note هم ایجاد میشوند. همچنین اگر تغییراتی در Note.Text ایجاد شود، Xamarin.Forms Binding engines محتویات Editor را آپدیت میکنند. این ارتباط two-way-binding نام دارد.

برای اطلاعات بیشتر درباره data binding، Xamarin.Forms Data Binding را ببینید.

Styling

اپلیکیشن های Xamarin.Forms اغلب المان های بصری زیادی را شامل میشوند که هریک دارای ظاهر یکتایی هستند. تنظیم ظاهر هریک از این المان ها میتواند کاری تکراری باشد که امکان خطا بالایی دارد. در عوض میتوان style هایی ایجاد کرد که ظاهر را تعیین میکنند و المان های بصری را شامل میشود.

کلاس style یک مجموعه از مقادیر برای مشخصات را در یک شی جمع میکند، که میتواند بعدا به instance های زیادی از المان های تصویری، اعمال شوند. Style ها در ResourceDictionary جمع آوری میشوند که میتوانند در سطح اپلیکیشن، سطح صفحه یا سطح view باشند. انتخاب مکان تعریف style، در استفاده آن موثر است:

Style instance هایی که در سطح اپلیکیشن تعریف شده باشند، میتوانند در اپلیکیشن اعمال شوند
Style instance هایی که در سطح صفحه تعریف شده باشند، میتوانند به صفحه و children های آن اعمال شوند.
Style instance هایی که در سطح view تعریف شوند، میتوانند به view و children های آن اعمال شوند.

مهم !

هر style که که در اپلیکیشن استفاده میشود، برای جلوگیری از تکرار، در ResourceDictionary اپلیکیشن ذخیره میشود. اما XAML خاص صفحه نباید در resource dictionary باشد زیرا که در این صورت resources ، به جای منتظر درخواست صفحه ماندن، در شروع اپلیکشن parsمیشود.

هر style شامل مجموعه ای از یک یا بیشتر setter object ها هاستند که هر setter یک Property و یک Value دارد. Property نام bindable property از المانی است که style به آن اعمال میشود و Value مقدار اعمال شده به آن property میباشد. کد زیر style ، NoteEntryPage را نشان میدهد:

    



...

...

این style به هر editor instance که در صفحه باشد، اعمال میشود.

در زمان ایجاد یک style، TargetTy.pe property همواره مورد نیاز است.

توجه !

Style یک اپلیکیشن Xamarin.Forms به طور معمول با استفاده از XAML styles انجام میشود. اما، المان های Visual Studio استفاده از Cascade Style Sheet (CSS) را نیز پشتیبانی میکنند. برای اطلاعات بیشتر Styling Xamarin.Forms apps using Cascading Style Sheets (CSS) را ببینید.

برای اطلاعات بیشتر درباره XAML styles، Styling Xamarin.Forms Apps using XAML Styles را ببینید.

Providing platform-specific style

OnPlatform markup extension به شما اجازه میدهد که UI را per-platform بسازید:

    

...
WhiteSmoke
#2196F3
Black
White


...

این style، رنگ های متفاوتی برای property های BarBackgroundColor و BarTextColor از NavigationPage، بسته به پلتفرم مورد استفاده، قرار میدهد.

برای اطلاعات بیشتر درباره XAML markup extension، XAML Markup Extensions را ببینید. برای اطلاعات بیشتر درباره OnPlatform markup extension، OnPlatform Markup Extension را ببینید.

Testing and deployment

Visual Studio for Mac و Visual Studio هر دو گزینه های زیادی را برای test و deploy اپلیکیشن در اختیار ما قرار میدهند. دیباگ اپلیکیشن یک بخش مشترک بین توسعه اپلیکیشن و یافتن مشکلات آن است. برای اطلاعات بیشتر Set a Breakpoint، Set through Code و Output Information to the Log Windows را مطالعه کنید.

ها مکان مناسبی برای شروع deploy و تست اپلیکیشن هستند که عملکرد مفیدی نیز در زین زمینه دارند. اما کاربران با اپلیکیشن در شبیه ساز کار نمیکنند، پس باید اپلیکیشن را در سیستم نیز تست و بررسی کرد. برای اطلاعات بیشتر درباره provisioning iOS به Device Provisioning مراجعه کنید. برای اطلاعات بیشتر درباره Android provisioning بهSet Up Device for Development مراجعه کنید.

گام بعد

در این بخش به بررسی اصول توسعه اپلیکیشن در Xamarin.Forms پرداختیم. گام بعدی به بررسی عملکرد های زیر میپردازد:

چهار گروه کنترلی اصلی برای ایجاد UI دراپلیکیشن های Xamarin.Forms وجود دارند. برای اطلاعات بیشتر را ببینید.
Data binding تکنیکی برای اتصال دو شی است که باعث میشود تغییرات در یکی از آنها در دیگری هم ایجاد شود. برای اطلاعات بیشتر Data Binding را مطالعه کنید.
Xamarin.Forms، Navigation های مختلفی برای صفحات را، بسته به نوع صفحه، پشتیبانی میکند. برای اطلاعات بیشتر Navigation را مطالعه کنید.
Style ها کمک میکنند markup های تکراری را کاهش دهیم و ظاهر اپلیکیشن را آسان تر تغییر دهیم. برای اطلاعات بیشتر tyling Xamarin.Forms Apps Sرا ببینید.
XAML markup extension ها ،با ممکن کردن تعیین صفات المان ها از source هایی به غیر از رشته های متنی، قدرت و انعطاف XAML را گسترش داده اند. برای اطلاعات بیشتر XAML Markup Extensions را ببینید.
Data template ها به ما این امکان را میدهند که طریقه نمایش داده ها را، در view های پشتیبانی شده، تعیین کنیم. برای اطلاعات بیشتر Data Templates را ببینید.
هر صفحه، layout و یا view در هر پلتفرم به شکل متفاوتی render میشود. این کار با کمک کلاس Renderer، که یک native control ایجاد میکند، آن را در صفحه مدیریت میکند و عملکرد مختص آن را در کد قرار میدهد، انجام میشود. توسعه دهندگان میتوانند کلاس Render خود را برای ظاهر و یا عملکرد کنترلی خاص، شخصی سازی کنند. برای اطلاعات بیشتر Custom Renderer را ببینید.
effect ها همچنین به native controls ها در هر پلتفرم، اجازه میدهند که تنظیم شوند. Effect ها در پروژه های platform-specific با subclass کردن کلاسPlatformEffect ایجاد میشودن و با اتصال به کنترل مناسب Xamarin.Forms، تنظیم میشوند. برای اطلاعات بیشتر Effects را ببینید.
Shared code میتواند، از طریق native functionality به وسیله ی کلاس DependencyService در دسترس قرار بگیرد. برای اطلاعات بیشتر Accessing Native Features with DependencyService را ببینید.

همچنین کتاب Creating Mobile Apps with Xamarin.Forms از Charles Petzold، گزینه ی مناسبی برای یادگیری درباره Xamarin.Forms میباشد. این کتاب با فرمت های مختلف، از جمله PDF، در دسترس است.

برای Visual Studio for Mac

معرفی به Visual Studio

mac کد ها را به دو بخش Solutions و Projects تقسیم میکند. Solution مانند یک نگهدارنده است که چند Project را در خود نگه میدارد. یک Project میتواند یک application، supporting Library ، test application و یا چیز های دیگری باشد. اپلیکیشن Notes شامل یک Solution است که سه project را ،طبق شکل زیر، در خود دارد:

پروژه های موجود :

Notes- این پروژه، یک پروژه .NET Standard library میباشد که تمامی کد ها و UI هارا در خود نگه میدارد.
Notes.Android- این پروژه ، کد های مختص اندروید را نگهداری میکند و نقطه شروع اندروید اپلیکیشن میباشد.
Notes.iOS- این پروژه، کد های مختص iOS را نگهداری میکند و نقطه شروع اپلیکیشن iOS میباشد.

آناتومی اپلیکیشن های Xamarin.Forms

شکل زیر، محتویات Notes.NET Standard library project را درfor Mac Visual Studio نشان میدهد:

محتویات پروژه کتابخانه استاندارد Phoneword. NET

این پروژه Dependency node هایی دارد که شامل NuGet nodes و SDK nodes میباشد:

NuGet- پکیج های Xamarin.Forms و sqlite-net-pcl NuGet که به پروژه اضافه شده اند.
SDK- متاپکیج های NETStandard.Library که به کلیه پکیج های NuGet، که .NET Standard را تعریف میکنند، ارجاع میدهد.

پروژه همچنین شامل تعدادی فایل میباشد:

Data\NoteDatabase.cs- این کلاس شامل کدهایی برای ایجاد دیتابیس، خواندن، نوشتن و حذف دیتا آن میباشد.
Models\Note.cs- این کلاس یک Note model تعریف میکند که instance های آن، دیتا مربوط به هر یادداشت را در اپلیکیشن، ذخیره میکند.
App.xaml- XAML markup برای کلاس App که یک Resource dictionary برای اپلیکیشن تعریف میکند.
App.xaml.cs- code-behind برای کلاس App میباشد که وظیفه ی ایجاد instance صفحه اول را دارد که توسط اپلیکیشن در پلتفرم های مختلف نشان داده میشود و برای رسیدگی به lifecycle event های اپلیکیشن، استفاده میشود.
AssemblyInfo.cs- این فایل شامل صفات اپلیکیشن درباره پروژه میباشد که در سطح اسمبلی مورد استفاده قرار میگیرد.
NotesPage.xaml- XAML markup برای کلاس NotesPage که UI صفحه، زمانی که اپلیکیشن شروع میشود را ، تعیین میکند.
NotePage.xaml.cs- code-behind برای کلاس NotesPage میباشد که شامل Business logic است که در زمان ارتباط کاربر با صفحه، اجرا میشود.
NoteEntryPage.xaml- XAML markup برای کلاس NoteEntryPage که UI صفحه ،زمانی که کاربر یک یادداشت وارد میکند را، تعیین میکند.
NoteEntryPage.xaml.cs- code-behind برای کلاس NotesEntryPage میباشد که شامل Business logic است که در زمان ارتباط کاربر با صفحه، اجرا میشود.

برای اطلاعات بیشتر درباره آناتومی اپلیکیشن های Xamarin.iOS بهAnatomy of a Xamarin.iOS Application و برای Xamarin.Android به Anatomy of a Xamarin.Android Application مراجعه کنید.

معماری و پایه اپلیکیشن

    using Xamarin.Forms;

    namespace Notes
    {
        public partial class App : Application
        {
            public App()
            {
                InitializeComponent();
                MainPage = new NavigationPage(new NotesPage());
            }
            ...
        }
    }

این کد MainPage ازکلاس App را یک NavigationPage قرار میدهد که محتوای آن یک instance از NotesPage میباشد.

علاوه براین، فایل AssemblyInfo.cs یک application attribute دارد که در سطح اسمبلی اجرا میشود:

    using Xamarin.Forms.Xaml;

    [assembly: XamlCompilation(XamlCompilationOptions.Compile)]

شروع اپلیکیشن در هر پلتفرم

iOS

    namespace Notes.iOS
    {
        [Register("AppDelegate")]
        public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
        {
            public override bool FinishedLaunching(UIApplication app, NSDictionary options)
            {
                global::Xamarin.Forms.Forms.Init();
                LoadApplication(new App());
                return base.FinishedLaunching(app, options);
            }
        }
    }

Android

    namespace Notes.Droid
    {
        [Activity(Label = "Notes",
                  Icon = "@mipmap/icon",
                  Theme = "@style/MainTheme",
                  MainLauncher = true,
                  ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
        public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
        {
            protected override void OnCreate(Bundle savedInstanceState)
            {
                TabLayoutResource = Resource.Layout.Tabbar;
                ToolbarResource = Resource.Layout.Toolbar;
    
                base.OnCreate(savedInstanceState);
                global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
                LoadApplication(new App());
            }
        }
    }

User Interface

برای ساخت UI اپلیکیشن های Xamarin.Forms، چهار گروه کنترلی اصلی وجود دارد:

Pages- صفحه های Xamarin.Forms نشان دهنده ی صفحات اپلیکیشن های موبایل Cross-platform هستند. اپلیکیشن Notes از کلاس ContentPage برای نشان دادن یک صفحه استفاده میکند. برای اطلاعات بیشتر درباره صفحات به Xamarin.Forms Pages مراجعه کنید.
View- Xamarin.Forms view ها، کنترل های نمایش داده شده بر روی UIهستند؛ مانند label ها، button ها، text ها و box های ورودی اطلاعات. اپلیکیشن نهایی Notes از ListView، Editor و Button view استفاده میکند. برای اطلاعات بیشتر میتوانید به Xamarin.Forms Views مراجعه کنید.
Layouts- Xamarin.Forms layout ها، مانند نگهدارنده های هستند که view هارا به Logic structure تبدیل میکنند. اپلیکیشن Notes ازکلاس StackLayout برای مرتب کردن view های در یک stack عمودی و یک کلاس Grid برای مرتب کردن button ها به شکل افقی، استفاده میکند. برای اطلاعات بیشتر در این باره Xamarin.Forms Layouts را ببینید.
Cells- Xamarin.Forms cell ها، المان های اختصاصی برای item های درون یک list هستند و مشخص میکنند که هر item در list چگونه باشد. اپلیکیشن Notes ازTextCell برای نشان دادن دو item در هر ردیف List استفاده میکند. برای اطلاعات بیشتر به Xamarin.Forms Cells مراجعه کنید.

در زمان اجرا، هر واحد کنترلی به معادل خود map میشود که به شکل نهایی ارائه شود.

Layout

کد XAML زیر نمونه ای از استفاده StackLayout در NoteEntryPage میباشد:

توجه !

سایز view میتواند توسط صفات HeightRequest و WidthRequest تعیین شود.

برای اطلاعات بیشتر درباره StackLayout به StackLayout مراجعه کنید.

Responding to User Interaction

    async void OnSaveButtonClicked(object sender, EventArgs e)
    {
        var note = (Note)BindingContext;
        note.Date = DateTime.UtcNow;
        await App.Database.SaveNoteAsync(note);
        await Navigation.PopAsync();
    }

متد OnSaveButtonClicked، یادداشت موجود را در دیتابیس ذخیره میکند و به صفحه قبل باز میگردد.

توجه !

اتصال دکمه Save به متد OnSaveButtonClicked باعث ایجاد XAML markup برای کلاس NoteEntryPage میشود:

Lists

ListView برای نشان دادن تعدادی item به شکل عمودی در یک لیست میباشد. هر item موجود در ListView در یک Single Cell قرار دارد.

کد زیر مثالی از ListView در NotesPage را نشان میدهد:

    protected override async void OnAppearing()
    {
        base.OnAppearing();
    
        listView.ItemsSource = await App.Database.GetNotesAsync();
    }

این کد یادداشت های موجود در دیتابیس را در ListView جمع آوری میکند.

    async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        if (e.SelectedItem != null)
        {
            ...
        }
    }

ItemSelected event میتواند به شئ های مربوط به Cell از طریق صفت e.SelectedItem ، دسترسی پیدا کند.

برای اطلاعات بیشتر درباره کلاس ListView به ListView مراجعه کنید.

Navigation

Xamarin.Forms، تجربه جهت یابی های مختلفی را، بسته به نوع Page مورد استفاده، بین صفحات ممکن میکند. برای instance های ContentPage، جهت یابی میتواند به شکل سلسله مراتبی یا modal باشد. برای اطلاعات بیشتر به Xamarin.Forms Modal Pages مراجعه کنید.

توجه !

کلاس های CarouselPage، MasterDetailPage و TabbedPage جهت یابی های متفاوتی را ممکن میکنند. برای اطلاعات بیشتر Navigation را ببینید.

اولین صفحه موجود در navigation stack ، صفحه root اپلیکیشن نام دارد. کد زیر دستیابی به این را در اپلیکیشن Notes نشان میدهد:

    public App ()
    {
        ...
        MainPage = new NavigationPage (new NotesPage ());
    }

    await Navigation.PushAsync(new NoteEntryPage());

این باعث میشود که اشیا جدید NoteEntryPage که وارد navigation stack میشوند، به عنوان صفحه فعال قرار بگیرند.

    await Navigation.PopAsync();

برای اطلاعات بیشتر درباره جهت یابی سلسه مراتبی به Hierarchical Navigation مراجعه کنید.

Data binding

Data binding برای ساده سازی نمایش و ارتباط اپلیکیشن های Xamarin.Forms با داده، استفاده میشود که میتواند یک ارتباط بین UI و اپلیکیشن زیرین، شکل دهد. کلاس BindableObjects شامل زیر ساخت هایی برای پشتیبانی از data binding میباشد.

Data binding دو شی، که source و target هستند را، به هم متصل میکند. شی Source، دیتا را فراهم میکند و شی target، دیتا فراهم شده توسط source را، استفاده میکند و گاها نمایش میدهد.. برای مثال؛ یک editor (target object) یک متن خود را در یک string در source obj، bind میکند. شکل زیر ارتباطات binding را نشان میدهد:

Data binding در دو گام ایجاد میشود:

صفت BindingContext از شی target باید source باشد.
یک binding باید بین یک source وtarget ایجاد شود که در XAML، میتوان با استفاده از Binding markup extension آن را ایجاد کرد.

BindingContext برای NoteEntryPage در زمان جهت یابی صفحه ست میشود که در کد زیر نشان داده شده است:

    async void OnNoteAddedClicked(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new NoteEntryPage
        {
            BindingContext = new Note()
        });
    }
    
    async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        if (e.SelectedItem != null)
        {
            await Navigation.PushAsync(new NoteEntryPage
            {
                BindingContext = e.SelectedItem as Note
            });
        }
    }

مهم !

پس editor در NoteEntryPage به text از شی Note، bind میشود:

برای اطلاعات بیشتر درباره data binding، Xamarin.Forms Data Binding را ببینید.

Styling

Style instance هایی که در سطح اپلیکیشن تعریف شده باشند، میتوانند در اپلیکیشن اعمال شوند
Style instance هایی که در سطح صفحه تعریف شده باشند، میتوانند به صفحه و children های آن اعمال شوند.
Style instance هایی که در سطح view تعریف شوند، میتوانند به view و children های آن اعمال شوند.

مهم !

<هر style="" که="" که="" در="" اپلیکیشن="" استفاده="" میشود،="" برای="" جلوگیری="" از="" تکرار،="" در="" resourcedictionary="" اپلیکیشن="" ذخیره="" میشود.="" اما="" xaml="" خاص="" صفحه="" نباید="" در="" resource="" dictionary="" باشد="" زیرا="" که="" در="" این="" صورت="" resources="" ،="" به="" جای="" منتظر="" درخواست="" صفحه="" ماندن،="" در="" شروع="" اپلیکشن="" pars="" میشود./p="">

    



...

...

این style به هر editor instance که در صفحه باشد، اعمال میشود. در زمان ایجاد یک style، TargetTy.pe property همواره مورد نیاز است.

توجه !

برای اطلاعات بیشتر درباره XAML styles، Styling Xamarin.Forms Apps using XAML Styles را ببینید.

        

   ...
   WhiteSmoke
   #2196F3
   Black
   White

   
   ...

این style، رنگ های متفاوتی برای property های BarBackgroundColor و BarTextColor از NavigationPage، بسته به پلتفرم مورد استفاده، قرار میدهد.

Testing and deployment

Simulator ها مکان مناسبی برای شروع deploy و تست اپلیکیشن هستند که عملکرد مفیدی نیز در زین زمینه دارند. اما کاربران با اپلیکیشن در شبیه ساز کار نمیکنند، پس باید اپلیکیشن را در سیستم نیز تست و بررسی کرد. برای اطلاعات بیشتر درباره provisioning iOS به Device Provisioning مراجعه کنید. برای اطلاعات بیشتر درباره Android provisioning به Set Up Device for Development مراجعه کنید.

گام بعد

در این بخش به بررسی اصول توسعه اپلیکیشن در Xamarin.Forms پرداختیم. گام بعدی به بررسی عملکرد های زیر میپردازد:

چهار گروه کنترلی اصلی برای ایجاد UI دراپلیکیشن های Xamarin.Forms وجود دارند. برای اطلاعات بیشتر Controls Reference را ببینید.
Data binding تکنیکی برای اتصال دو شی است که باعث میشود تغییرات در یکی از آنها در دیگری هم ایجاد شود. برای اطلاعات بیشتر Data Binding را مطالعه کنید.
Xamarin.Forms، Navigation های مختلفی برای صفحات را، بسته به نوع صفحه، پشتیبانی میکند. برای اطلاعات بیشتر Navigation را مطالعه کنید.
Style ها کمک میکنند markup های تکراری را کاهش دهیم و ظاهر اپلیکیشن را آسان تر تغییر دهیم. برای اطلاعات بیشتر Styling Xamarin.Forms Apps را ببینید.
XAML markup extension ها ،با ممکن کردن تعیین صفات المان ها از source هایی به غیر از رشته های متنی، قدرت و انعطاف XAML را گسترش داده اند. برای اطلاعات بیشتر XAML Markup Extensions را ببینید.
Data template ها به ما این امکان را میدهند که طریقه نمایش داده ها را، در view های پشتیبانی شده، تعیین کنیم. برای اطلاعات بیشتر Data Templates را ببینید.
هر صفحه، layout و یا view در هر پلتفرم به شکل متفاوتی render میشود. این کار با کمک کلاس Renderer، که یک native control ایجاد میکند، آن را در صفحه مدیریت میکند و عملکرد مختص آن را در کد قرار میدهد، انجام میشود. توسعه دهندگان میتوانند کلاس Render خود را برای ظاهر و یا عملکرد کنترلی خاص، شخصی سازی کنند. برای اطلاعات بیشتر Custom Renderer را ببینید.
effect ها همچنین به native controls ها در هر پلتفرم، اجازه میدهند که تنظیم شوند. Effect ها در پروژه های platform-specific با subclass کردن کلاسPlatformEffect ایجاد میشودن و با اتصال به کنترل مناسب Xamarin.Forms، تنظیم میشوند. برای اطلاعات بیشتر Effects را ببینید.
Shared code میتواند، از طریق native functionality به وسیله ی کلاس DependencyService در دسترس قرار بگیرد. برای اطلاعات بیشتر Accessing Native Features with DependencyService را ببینید.

استايل يك اپليكيشن Cross-platform در زامارين

1399/01/15 2099 499

دانلود PDF

رمز عبور : tahlildadeh.com یا www.tahlildadeh.com

سوالات و نظرات

نظرات شما