תרגיל: יצירת דף XAML הראשון שלך

הושלמה

מהנדסים מהחברה שלך לצריכת חשמל מבצעים באופן קבוע ביקורים אצל הלקוחות כדי לתקן מכשירים ולבצע משימות תחזוקה חשמליות אחרות. חלק מהיישום מאפשר למהנדס לרשום הערות לגבי הביקור. הוא מציג עורך פשוט שבו המהנדס יכול להזין את הפרטים ולשמור אותם.

ב- Android, האפליקציה נראית כך:

התבקשת להוסיף כמה תכונות נוספות לדף זה. לפני שתתחיל, ברצונך להבין כיצד הדף נוצר, כך שתעיין בקוד המקור. שים לב שממשק המשתמש נוצר לחלוטין באמצעות קוד C#. למרות שגישה זו פועלת, היא מחברת בין הקוד המטפל בפריסה באמצעות הקוד הקובע את אופן הפעולה של ממשק המשתמש. אתה מבין שבעבור זמן רב, יש סכנה של שני היבטים של האפליקציה להינעל יחד, מה שהופך תחזוקה עתידית קשה ואולי להפוך את האפליקציה לשברירית יותר ככל מתווספים תכונות נוספות. אתה מחליט להפריד בין עיצוב ממשק המשתמש לבין לוגיקת ממשק המשתמש על-ידי חילוץ קוד C# המגדיר את הפריסה מהאפליקציה ומחליף אותה בדף XAML.

מודול זה משתמש ב-SDK של .NET 10.0. ודא שיש לך .NET 10.0 מותקן על ידי הרצת הפקודה הבאה בטרמינל הפקודות המועדף עליך:

dotnet --list-sdks

הפלט דומה לדוגמה הבאה מופיע:

9.0.100 [C:\Program Files\dotnet\sdk]
10.0.100 [C:\Program Files\dotnet\sdk]

ודא שגירסה המתחילה 10 רשומה. אם לא מופיעה פקודה או שהפקודה לא נמצאת, התקן את ערכת הפיתוח העדכנית ביותר .NET 10.0.

סקור את היישום הקיים

1. שכפל מאגר GitHub עבור תרגיל זה באופן מקומי במחשב שלך.

   הערה

   מומלץ לשכפל או להוריד את תוכן התרגיל לנתיב תיקיה קצר, כגון C:\dev, כדי להימנע מקבצים שנוצרו על-ידי גירסאות Build שחורגים מאורך הנתיב המרבי.

2. עבור אל תרגיל 1 בעותק המקומי של המאגר.

3. פתח את Notes.sln הפתרון של Visual Studio בתיקיה זו או בתיקיה ב- Visual Studio Code.

4. בחלון פתרון, הרחב את פרוייקט הערות, הרחב את הקובץ MainPage.xaml ופתח את קובץ MainPage.xaml.cs.

5. סקור את המחלקה MainPage המוגדרת בקובץ זה. בנאי מכיל את הקוד הבא יוצר את ממשק המשתמש:

   public MainPage()
   {
       var notesHeading = new Label() { Text = "Notes", HorizontalOptions = LayoutOptions.Center, FontAttributes = FontAttributes.Bold };
   
       editor = new Editor() { Placeholder = "Enter your note", HeightRequest = 100 };
       editor.Text = File.Exists(_fileName) ? File.ReadAllText(_fileName) : string.Empty;
   
       var buttonsGrid = new Grid() { HeightRequest = 40.0 };
       buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });
       buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(30.0, GridUnitType.Absolute) });
       buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });
   
       var saveButton = new Button() { WidthRequest = 100, Text = "Save" };
       saveButton.Clicked += OnSaveButtonClicked;
       Grid.SetColumn(saveButton, 0);
       buttonsGrid.Children.Add(saveButton);
   
       var deleteButton = new Button() { WidthRequest = 100, Text = "Delete" };
       deleteButton.Clicked += OnDeleteButtonClicked;
       Grid.SetColumn(deleteButton, 2);
       buttonsGrid.Children.Add(deleteButton);
   
       var stackLayout = new VerticalStackLayout 
       { 
           Padding = new Thickness(30, 60, 30, 30),
           Children = { notesHeading, editor, buttonsGrid }
       };
   
       this.Content = stackLayout;
   }
   

   ממשק המשתמש מורכב מממשק VerticalStackLayout המכיל Label, Editorו- Grid עם שלוש עמודות. העמודה הראשונה מכילה את saveButton, השניה היא מקש רווח והעמודה השלישית כוללת את deleteButton הפקד.

   הדיאגרמה הבאה מציגה את מבנה ממשק המשתמש:

   

   שים לב שהמחלקה MainPage מכילה גם שיטות לטיפול באירועים עבור הלחצנים וקוד מסויים המאתחל את Editor הפקד. קוד זה אינו נבדל מהגדרת ממשק המשתמש.

6. בנה והפעל את האפליקציה ב- Windows, רק כדי לראות איך היא נראית. בחר F5 כדי לבנות ולהפעיל את האפליקציה.

7. סגור את האפליקציה וחזור אל Visual Studio או Visual Studio Code לאחר שתסיים.

יצירת גירסת XAML של ממשק המשתמש

1. פתח את MainPage.xaml שלך. הסימונים בדף זה מייצגים דף תוכן MAUI ריק:

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="Notes.MainPage">
   
   </ContentPage>
   

2. הוסף פקד VerticalStackLayout לדף התוכן:

   <ContentPage ...>
       <VerticalStackLayout Margin="30,60,30,30">
   
       </VerticalStackLayout>
   </ContentPage>
   

3. הוסף פקד Label לפקד VerticalStackLayout. הגדר את הטקסט, HorizontalTextAlignmentו- FontAttributes של פקד זה, כפי שמוצג להלן:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label Text="Notes"
                  HorizontalOptions="Center"
                  FontAttributes="Bold" />
       </VerticalStackLayout>
   </ContentPage>
   

4. הוסף פקד Editor לפקד ה- VerticalStackLayout:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor x:Name="editor"
                   Placeholder="Enter your note"
                   HeightRequest="100" />
       </VerticalStackLayout>
   </ContentPage>
   

5. הוסף ילד Grid לחשבון VerticalStackLayout. תבנית Grid אמורה להכיל שלוש עמודות; הגודל של הראשון והשלישי משתנה באופן אוטומטי, בעוד שהרוחב של השני הוא 30:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor .../>
   
           <Grid ColumnDefinitions="Auto, 30, Auto">
   
           </Grid>
       </VerticalStackLayout>
   </ContentPage>
   

6. הוסף Button לעמודה הראשונה של הילד Grid. זהו לחצן שמור הבא:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor .../>
   
           <Grid ...>                    
               <Button Grid.Column="0"
                       Text="Save" 
                       WidthRequest="100"
                       Clicked="OnSaveButtonClicked" />
           </Grid>
       </VerticalStackLayout>
   </ContentPage>
   

7. הוסף עוד Button לעמודה השלישית של הילד Grid. זהו לחצן מחק הבא:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor .../>
   
           <Grid ...>                    
               <Button ... />
   
               <Button Grid.Column="2"
                       Text="Delete" 
                        WidthRequest="100"
                       Clicked="OnDeleteButtonClicked" />
           </Grid>
       </VerticalStackLayout>
   </ContentPage>
   

הסרת קוד הפריסה מקובץ הקוד שמאחורי

1. בחלון פתרון, הרחב את MainPage.xaml ופתח את MainPage.xaml.cs הקובץ.

2. הסר את העורך מהמחלקה MainPage זו.

3. בקובץ MainPage.xaml.cs, בנאי MainPage, הסר את כל הקוד יוצר את רכיבי ממשק המשתמש והחלף אותם בשיחה אל פעולת השירות InitializeComponent זו. הוסף קוד שבדוק אם הקובץ ששימש לאחסון ההערות קיים, ואם כן, קורא את התוכן מאכלס את השדה Editor של Text. הבונים אמורים להיראות כך:

   public partial class MainPage : ContentPage
   {
       string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");
   
       public MainPage()
       {
           InitializeComponent();
   
           if (File.Exists(_fileName))
           {
               editor.Text = File.ReadAllText(_fileName);
           }
       }
   
       ...
   }
   

4. בתפריט בנייה , בחר באפשרות בנה מחדש פתרון. ודא כי גירסאות ה- Build של היישום קיימות ללא שגיאות.

5. הפעל את היישום. היא אמורה לפעול בדיוק כמו בעבר.

6. אם יש לך זמן, פרוס והפעל את האפליקציה באמצעות אמולטור Android. ממשק המשתמש של האפליקציה אמור להיות דומה לזה שמוצג בתמונה בתחילת תרגיל זה.