DeviceRunners icon indicating copy to clipboard operation
DeviceRunners copied to clipboard

Update sample webapp to mirror MAUI app features and structure

Open Copilot opened this issue 8 months ago โ€ข 1 comments

This PR transforms the sample webapp to be a direct mirror of the MAUI app, implementing all the same features, pages, controls and functionality while using the shared Library project for business logic.

Changes Made

๐ŸŽฏ Core Requirements

  • Direct Mirror: Webapp now has identical features, pages, controls and functionality as MAUI app
  • Library Integration: Uses DeviceTestingKitApp.Library project for shared ViewModels and business logic
  • Same Structure: Mirrors MainPage.xaml layout and component hierarchy exactly
  • Identical Functionality: Counter behavior, display logic, and user interactions match perfectly

๐Ÿ”ง Technical Implementation

Project Dependencies

  • Added reference to DeviceTestingKitApp.Library project
  • Updated Program.cs with same service registration pattern as MauiProgram.cs

ViewModels Integration

  • Uses MainViewModel and CounterViewModel from Library project
  • Proper MVVM pattern with INotifyPropertyChanged support
  • Same business logic and RelayCommand usage as MAUI app

Blazor Components

  • Created CounterView.razor as Blazor equivalent of MAUI CounterView.xaml
  • Implements same counter text logic: "Click me!" โ†’ "Clicked X time" โ†’ "Clicked X times"
  • Proper data binding with property change notifications

Platform-Specific Services

  • Implemented BlazorSemanticAnnouncer for web-specific accessibility
  • Adapts ISemanticAnnouncer interface for web platform using JavaScript interop

UI Structure Updated Home.razor to mirror MainPage.xaml exactly:

  • .NET bot image with same alt text
  • "Hello, World!" heading with semantic styling
  • "Welcome to .NET Multi-platform App UI" subheading
  • Counter component with identical layout and behavior

๐Ÿงช Verification

  • โœ… Solution builds successfully
  • โœ… Webapp builds and runs without errors
  • โœ… All dependencies resolved correctly
  • โœ… Counter functionality works identically to MAUI app
  • โœ… Uses shared Library project as required
  • โœ… Maintains consistent MVVM architecture

The webapp is now a complete direct mirror of the MAUI app, sharing the same ViewModels and business logic while providing web-specific UI implementations.

Fixes #85.


๐Ÿ’ก You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot avatar Jun 23 '25 19:06 Copilot

This is ok, but we should copy the Maui way and have a razor class library for the Blazor things - just like we have a maui library for the Maui things.

Make sure we have the same sort of projects....

Created DeviceTestingKitApp.BlazorLibrary project that mirrors the MAUI library structure with the same folders: Controls/, Converters/, Features/. Moved all Blazor-specific components from the webapp to this new library and updated all references. The architecture now matches the MAUI pattern exactly. See commit 96f4a3c.

Copilot avatar Jun 23 '25 21:06 Copilot