← Wszystkie publikacje

PhialeGrid — jeden Core, różne technologie interfejsu

PhialeGrid to autorski komponent DataGrid, który rozwijam w ramach NeptunTech dla aplikacji biznesowych .NET. Nie chodzi mi tylko o kolejną tabelę z sortowaniem. Chcę oddzielić logikę danych i interakcji od technologii, która wyświetla komponent.

Na zrzutach pokazuję działające demonstratory WPF i Avalonii: grupowanie wielopoziomowe, podsumowania, edycję, walidację oraz konfigurację kolumn. Kolejnym etapem jest demonstrator do pobrania, a potem pierwsze pakiety Preview.

Jak to jest zbudowane

Corewspólny dla WPF, Avalonii i WinUI 3: reguły interakcji, selekcja, zapytania, edycja, dane
IGridApiinterfejsy komunikacyjne niezwiązane ze zdarzeniami (intencje aplikacji)
UniversalInputneutralne zdarzenia wejściowe
WPFfrontend
Avaloniafrontend
WinUI 3szkielet, wczesna faza

Cała logika Grida jest w Core: dane, stan, grupowanie, edycja, sesje zmian. Core komunikuje się z frontendami dwoma kanałami. IGridApi to interfejsy komunikacyjne niezwiązane ze zdarzeniami. UniversalInput to biblioteka neutralnych zdarzeń wejściowych, wspólna dla wszystkich platform.

Zdarzenia w WPF, WinUI 3 i Avalonii są zupełnie różne, więc każdy frontend jest cienką warstwą: tłumaczy zdarzenia natywne na UniversalInput i odpowiada za renderowanie oraz natywne elementy interfejsu. Dzięki temu reguły działania powstają raz, w Core, a nie osobno dla każdej technologii. Frontendy WPF i Avalonia działają; frontend WinUI 3 jest na razie szkieletem we wczesnej fazie rozwoju.

Dwa poziomy grupowania (dział i status) oraz kilka agregatów tej samej kolumny — działający renderer Avalonii.
Dwa poziomy grupowania (dział i status) oraz kilka agregatów tej samej kolumny — działający renderer Avalonii.

Dlaczego piszę własny DataGrid?

Złożoność aplikacji biznesowych nie kończy się na renderowaniu komórki. Zaczyna się przy edycji, zmianach oczekujących na zatwierdzenie, odpowiedziach backendu przychodzących w innej kolejności, konfliktach, filtrowaniu i trwałym stanie widoku. Utrzymywanie oddzielnych implementacji tych reguł w każdej technologii UI utrudnia rozwój i testowanie.

Dlatego w PhialeGrid rozdzielam wspólny Core od cienkich frontendów. Każda instancja ma własny runtime. Natywne zdarzenia WPF i Avalonii trafiają przez adaptery do neutralnego protokołu UniversalInput; aplikacja korzysta też z typowanego API. Ten podział działa w kodzie i ma testy.

Co działa?

WPF. WPF jest dzisiaj bardziej kompletnym frontendem. Ma demonstrator z lokalnymi danymi, danymi REST i snapshotem, natywnymi edytorami, grupowaniem oraz panelem zmian.

Avalonia. Implementacja Avalonii wykorzystuje wspólny Core i obsługuje m.in. grupowanie, podsumowania, edycję komórek i pracę z providerem danych. Demonstrator umożliwia obejrzenie tych funkcji w motywach dziennym, nocnym i wysokiego kontrastu.

Grupowanie, projektant podsumowań i agregaty w demonstratorze WPF.
Grupowanie, projektant podsumowań i agregaty w demonstratorze WPF.

Co mnie najbardziej interesuje w architekturze?

  • Sesje zmian: edycja komórki, zatwierdzenie bufora i trwały zapis na backendzie są rozdzielone. Testy obejmują m.in. konflikty wersji, częściowe wyniki i retry; transakcyjność i idempotencja pozostają odpowiedzialnością serwera.
  • Grupowanie: ta sama kolumna może mieć kilka osobnych agregatów, np. sumę i średnią. Wyniki są prezentowane w czytelnych blokach podsumowań.
  • Wirtualizacja: model rozdziela logiczny rozmiar zbioru od rekordów obecnych w pamięci. Jeden z testowanych scenariuszy obejmuje milion logicznych pozycji i 50 załadowanych rekordów.
Aktywny edytor wartości liczbowej w komórce Avalonii.
Aktywny edytor wartości liczbowej w komórce Avalonii.

Funkcje widoczne na zrzutach

  • Grupowanie po więcej niż jednym polu, rozwijane grupy zagnieżdżone oraz sumy i liczności prezentowane dla grup.
  • Projektant podsumowań, w którym użytkownik wybiera kolumnę i sposób agregacji — zamiast otrzymywać na sztywno jeden wiersz sum.
  • Edycja w komórkach i komunikaty walidacyjne oraz zaznaczanie, sortowanie i ustawienia kolumn.
  • Osobne motywy: dzienny, nocny i wysokiego kontrastu.
Avalonia — grupowanie i podsumowania w motywie wysokiego kontrastu.
Avalonia — grupowanie i podsumowania w motywie wysokiego kontrastu.

Dlaczego właśnie Avalonia?

Avalonia ma już rozwiązania do prezentowania danych, w tym bezpłatne kontrolki i ofertę komercyjną. W PhialeGrid interesuje mnie jednak konkretny kierunek: współdzielenie logiki z WPF oraz rozbudowany model edycji, stanu i źródeł danych. To sposób na rozwijanie aplikacji biznesowych bez utrzymywania dwóch oddzielnych silników Grida.

Kontekst rynkowy: Avalonia 12.1 ↗

Co dalej?

Kolejność będzie taka: najpierw demonstrator do pobrania, potem pakiety NuGet w wersji Preview dla WPF i Avalonii. Wraz z nimi na NeptunTech pojawią się dokumentacja integracji i przykłady użycia.