Sdílené webové uživatelské rozhraní

Důležité

Tento projekt je experimentální verze. Doufáme, že vyzkoušíte experimentální mobilní vazby Blazor a poskytnete nám zpětnou vazbu na adrese https://github.com/xamarin/MobileBlazorBindings.

Teď, když jste vytvořili hybridní aplikaci Mobile Blazor Bindings, která zahrnuje webové uživatelské rozhraní (HTML s CSS), vám tento návod ukáže, jak sdílet webové uživatelské rozhraní s webovou aplikací Blazor, abyste mohli poskytnout stejné uživatelské rozhraní aplikace na webu.

V Blazoru se to provádí umístěním sdíleného uživatelského rozhraní do projektu Knihovny tříd Razor nebo zkráceně RCL. To umožňuje zabalit webové uživatelské rozhraní a kód jako opakovaně použitelnou entitu, na kterou může odkazovat více projektů v řešení nebo je sdílet obecněji tím, že je distribuuje jako balíček NuGet. Na balíček RCL může odkazovat aplikace Mobile Blazor Bindings a webová aplikace Blazor, aby sdílely úplně stejné uživatelské rozhraní.

V tomto návodu vytvoříte opakovaně použitelné uživatelské rozhraní Email zobrazení v seznamu RCL a použijete ho v hybridní aplikaci Mobile Blazor Binding a ve webové aplikaci Blazor.

Poznámka

Tato stránka je pokračováním průvodce sestavením první hybridní aplikace . Než budete pokračovat, doporučujeme tento názorný postup dokončit.

Přidání knihovny tříd Razor (RCL)

Přidání seznamu RCL do aplikace:

1. Klikněte pravým tlačítkem na uzel Řešení v Průzkumník řešení a vyberte Přidat nebo nový projekt.
2. Vyhledejte typ projektu Knihovna tříd Razor a klikněte na Další.
3. Zadejte název projektu, například EmailDisplayUI a klikněte na Vytvořit.
4. V dalším dialogovém okně se ujistěte, že jsou vybraná následující nastavení: .NET Core 3.1, Bez ověřování a žádná podpora pro stránky a zobrazení, a pak klikněte na Vytvořit.

Nový projekt obsahuje vlastní soubory Razor, ve kterých vytvoříte webové uživatelské rozhraní a wwwroot složku, která bude obsahovat statické prostředky, které jsou součástí této komponenty.

Přidání sdíleného webového uživatelského rozhraní do seznamu RCL

1. Klikněte pravým tlačítkem na projekt RCL a vyberte Přidat / Třída.

2. Zadejte název EmailData.cs a klikněte na Přidat.

3. Přidání souboru s názvem Email.cs do seznamu RCL

4. Nahraďte jeho obsah následujícím kódem jazyka C#:

   namespace EmailDisplayUI
   {
       public class EmailData
       {
           public string From { get; set; }
           public string To { get; set; }
           public string Subject { get; set; }
           public bool IsImportant { get; set; }
           public string Body { get; set; }
       }
   }
   

5. Přejmenujte Component1.razor na DisplayEmail.razor.

6. Nahraďte jeho obsah následujícím kódem Razor:

   <div class="emailDisplay">
       <div class="emailHeader">
           <div>
               <label>From:</label> @Email.From
           </div>
           <div>
               <label>To:</label> @Email.To
           </div>
           <div>
               <label>Priority:</label> @(Email.IsImportant ? "High" : "Normal")
           </div>
           <div>
               <label>Subject:</label> @Email.Subject
           </div>
       </div>
       <div class="emailBody">
           @Email.Body
       </div>
   </div>
   
   @code
   {
       [Parameter] public EmailData Email { get; set; }
   }
   

7. Změňte obsah wwwroot/styles.css na následující:

   label {
       font-weight: bold;
       font-style: italic;
   }
   
   .emailDisplay {
       background-image: url('background.png');
   }
   
   .emailHeader {
       border: 2px solid #808080;
       padding: 1em;
       margin: 1em 0;
   }
   
   .emailBody {
       border: 1px solid #808080;
       padding: 1em;
       margin: 1em 0;
   }
   

Odkaz na seznam RCL

Chcete-li použít seznam RCL, musíte na něj odkazovat z hlavního projektu uživatelského rozhraní, aby bylo možné odkazovat na uživatelské rozhraní z něj. Musíte na něj také odkazovat z projektů specifických pro konkrétní platformu, aby se statické prostředky zjistily a zahrnuly do těchto aplikací.

V každém z projektů FirstBlazorHybridApp, FirstBlazorHybridApp.Android, FirstBlazorHybridApp.iOS, FirstBlazorHybridApp.macOS a FirstBlazorHybridApp.Windows dělají toto:

1. Klikněte pravým tlačítkem na projekt a vyberte Přidat / Odkaz na projekt nebo Přidat / Odkaz.
2. Vyberte EmailDisplayUI a klikněte na OK.

Teď jste připraveni použít uživatelské rozhraní Email Display v projektu:

1. V projektu FirstBlazorHybridApp otevřete WebUI/_Imports_.razor soubor a přidejte tento řádek na konec souboru: @using EmailDisplayUI

2. V projektu FirstBlazorHybridApp otevřete soubor.WebUI/Pages/Index.razor

3. Na konec souboru přidejte následující obsah:

   <DisplayEmail Email="email" />
   
   @code
   {
       EmailData email = new EmailData { From="sender@example.com", To="recipient@example.com", IsImportant=true, Subject="Learn about Blazor", Body="Tutorials are wonderful!" };
   }
   

4. Přidejte odkaz na šablony stylů CSS z každého projektu specifického pro konkrétní platformu přidáním řádku <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> do oddílu <head> :

   • Android: wwwroot/index.html
   • Ios: Resources/wwwroot/index.html
   • Macos: Resources/wwwroot/index.html
   • Windows: wwwroot/index.html

Spuštěním aplikací otestujte uživatelské rozhraní.

Teď jste připraveni otestovat nové uživatelské rozhraní. Klikněte pravým tlačítkem na kterýkoli z projektů Pro Android, iOS, macOS nebo Windows, vyberte Nastavit jako spouštěný projekt a spusťte aplikaci. Mělo by se zobrazit nativní načtení uživatelského rozhraní s webovým uživatelským rozhraním pod ním a webové uživatelské rozhraní by mělo zobrazovat uživatelské rozhraní pro zobrazení e-mailu, které jste vytvořili.

Na simulátoru iOS by měl vypadat takto:

[ ! [Email zobrazení uživatelského rozhraní spuštěného v simulátoru iOS[(./media/shared-web-ui/ios-shared-ui-inline.png) [(./media/shared-web-ui/ios-shared-ui-expanded.png#lightbox)

Přidání webového projektu Blazor

Teď jste připraveni znovu použít uživatelské rozhraní, které jste vytvořili ve webové aplikaci.

1. Klikněte pravým tlačítkem na uzel řešení v Průzkumník řešení a vyberte Přidat nebo nový projekt.

2. Vyberte šablonu aplikace Blazor a klikněte na Další.

3. Zadejte název, například FirstBlazorWebApp a klikněte na Vytvořit.

4. Vyberte možnost Blazor Server App ( .NET Core 3.1Aplikace Blazor Serveru), No Auth (Bez ověřování), Yes for HTTPS (Ano pro HTTPS) a No for Docker (Ne pro Docker) a klikněte na Create (Vytvořit).

5. Klikněte pravým tlačítkem na projekt FirstBlazorWebApp a vyberte Přidat / Odkaz na projekt.

6. EmailDisplayUI Vyberte projekt a klikněte na OK.

7. Pages/_Host.cshtml Otevřete soubor a přidejte řádek <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> do oddílu.<head>

8. _Imports.razor Otevřete soubor a přidejte tento řádek na konec souboru:@using EmailDisplayUI

9. Pages/Index.razor Otevřete soubor a do dolní části souboru přidejte následující obsah:

   <DisplayEmail Email="email" />
   
   @code
   {
       EmailData email = new EmailData { From="sender@example.com", To="recipient@example.com", IsImportant=true, Subject="Learn about Blazor", Body="Tutorials are wonderful!" };
   }
   

10. Pokud chcete projekt spustit, klikněte pravým tlačítkem na projekt, vyberte Nastavit jako spouštěný projekt a spusťte ho. Tím se spustí webová aplikace ASP.NET Core a otevře se výchozí webový prohlížeč pro aplikaci.

Ve webovém prohlížeči by měl vypadat takto:

[ ! [Email zobrazení uživatelského rozhraní spuštěného ve webovém prohlížeči[(./media/shared-web-ui/web-shared-ui-inline.png) [(./media/shared-web-ui/web-shared-ui-expanded.png#lightbox)

Další materiály

Další informace o knihovnách tříd Razor najdete v těchto zdrojích informací:

• knihovny tříd komponent ASP.NET Core Razor
• Vytvoření opakovaně použitelného uživatelského rozhraní pomocí projektu knihovny tříd Razor v ASP.NET Core

Souhrn

V tomto návodu jste vytvořili hybridní aplikaci Blazor, která používá knihovnu tříd Razor (RCL) pro část uživatelského rozhraní (zobrazení e-mailu). Pak jste stejný seznam RCL použili k hostování uživatelského rozhraní v ASP.NET Core webové aplikaci.

Tento názorný postup ukázal příklad uživatelského rozhraní jen pro čtení, ale stejné techniky je možné použít k vytvoření libovolně složitého uživatelského rozhraní s libovolně složitou aplikační logikou, která splní všechny požadavky aplikace. K vytváření služeb specifických pro platformu můžete použít vzory, jako je injektáž závislostí .