Application Todo

Important

Ce projet est une version expérimentale. Nous espérons que vous essayez des liaisons De blazor mobiles expérimentales et fournissez des commentaires à https://github.com/xamarin/MobileBlazorBindings.

L’exemple d’application Todo terminé est disponible ici. L’exemple utilise l’injection de dépendances, les services spécifiques à la plateforme, une base de données SQLite pour le stockage, les dialogues modals, les images personnalisées et de nombreuses autres fonctionnalités. Cet exemple montre comment afficher une liste dynamique d’éléments Todo en croissance dynamique.

Pour créer une application Todo simple, commencez par le projet que vous avez déjà créé dans la section Générer votre première application . Toutes les modifications seront apportées au FirstMobileBlazorBindingsApp projet.

1. Supprimez les fichiers HelloWorld.razor et Counter.razor.

2. Ajoutez un nouveau fichier de classe au projet nommé TodoItem.cs. Dans ce fichier, définissez une nouvelle classe pour représenter un élément Todo. Remplacez le code de cette classe par le code suivant :

   namespace FirstMobileBlazorBindingsApp
   {
       public class TodoItem
       {
           public string Text { get; set; }
           public bool IsDone { get; set; }
       }
   }
   

3. Ajoutez un nouveau composant Razor au projet en cliquant avec le bouton droit sur le projet, en sélectionnant, en sélectionnant , en Razor componentsélectionnantNew Item / Add et en le TodoApp.razornommant . Remplacez le code du fichier par le code suivant :

   <ContentView>
       <StackLayout Margin="new Thickness(20)">
   
           @* Entry area *@
           <StackLayout Margin="new Thickness(20)" Orientation="StackOrientation.Horizontal">
               <Entry @bind-Text="newItemText" HorizontalOptions="LayoutOptions.FillAndExpand" />
               <Button Text="Add" OnClick="OnAddItem" />
           </StackLayout>
   
           @* TodoItem area *@
   
           @* TODO: This! *@
   
       </StackLayout>
   </ContentView>
   
   @code
   {
       string newItemText;
   
       List<TodoItem> items = new List<TodoItem>();
   
       void OnAddItem()
       {
           var newTodoItem = new TodoItem
           {
               Text = newItemText,
           };
   
           items.Add(newTodoItem);
   
           // Clear out the text in the Entry textbox
           newItemText = null;
       }
   }
   

4. Modifiez le code dans App.cs lequel référencer le nouveau TodoApp composant au lieu de HelloWorld:

   host.AddComponent<TodoApp>(parent: MainPage);
   

5. Si vous exécutez l’application, vous verrez une zone de texte Entrée et un bouton Ajouter. Si vous tapez du texte et appuyez sur le bouton Ajouter, le texte disparaît simplement. Le Entry composant a une liaison bidirectionnelle au champ à l’aide newItemText de la syntaxe @bind-Text="newItemText"Blazor. Lorsque la Text propriété des Entry modifications est modifiée, le newItemText champ est mis à jour et lorsque le champ est mis à jour, la newItemTextEntry propriété du Text composant est mise à jour pour le rendu suivant. Toutefois, cette application n’est toujours pas utile : vous pouvez ajouter des éléments à une liste todo, mais vous ne pouvez pas voir la liste de todo elle-même!

6. Pour afficher des éléments todo individuels, ajoutez un composant Razor au projet nommé TodoItemDisplay.razor avec le code suivant :

   <StackLayout Margin="new Thickness(20)" Orientation="StackOrientation.Horizontal">
       <Switch @bind-IsToggled="Item.IsDone" />
       <Label Text="@Item.Text"
           TextDecorations="(Item.IsDone ? TextDecorations.Strikethrough : TextDecorations.None)"
           HorizontalOptions="LayoutOptions.FillAndExpand" />
   </StackLayout>
   
   @code
   {
       [Parameter] public TodoItem Item { get; set; }
   }
   

   Ce composant définit l’interface utilisateur pour afficher un objet individuel TodoItem . Il accepte un TodoItem objet via un paramètre de composant Blazor, indiqué par l’attribut [Parameter] . Cela permet à un composant appelant de passer une valeur. Ce composant utilise une liaison @bind-IsToggled="Item.IsDone" bidirectionnelle pour modifier la valeur de la Item.IsDone propriété lorsque le Switch commutateur du composant est désactivé. Lorsque cette liaison a lieu, elle entraîne l’application du TextDecorations.StrikethroughLabel style au composant lorsque l’élément est marqué comme terminé.

7. Pour afficher la liste todo, accédez au fichier et remplacez le TodoApp.razor texte @* TODO: This! *@ par le code suivant :

   <ScrollView>
       <StackLayout>
           @foreach (var item in items)
           {
               <TodoItemDisplay Item="item" />
           }
       </StackLayout>
   </ScrollView>
   

   Ce code utilise une boucle C# foreach pour itérer sur la liste des éléments todo et afficher un TodoItemDisplay composant pour chacun d’eux, en passant l’élément actif à la propriété du Item composant : Item="item"

8. Vous pouvez maintenant exécuter l’application et ajouter des éléments todo et les voir affichés dans la liste ci-dessous. Si vous basculez le commutateur sur un élément donné, le texte de cet élément aura la décoration de frappe appliquée :

   

Félicitations, vous avez créé une application todo à l’aide de liaisons Blazor Mobiles expérimentales qui montrent comment créer des composants personnalisés avec des paramètres, comment utiliser des liaisons bidirectionnelle et comment effectuer une boucle sur des éléments pour afficher une interface utilisateur dynamique.