ServerDrivenVisualElements

felipebaltazar · Feb 4, 2024 · 7aacbe8 · 7aacbe8
1 parent 73047d4
commit 7aacbe8
Show file tree

Hide file tree

Showing 12 changed files with 282 additions and 43 deletions.
diff --git a/Maui.ServerDrivenUI/Abstractions/IServerDrivenVisualElement.cs b/Maui.ServerDrivenUI/Abstractions/IServerDrivenVisualElement.cs
@@ -0,0 +1,22 @@
+namespace Maui.ServerDrivenUI;
+
+public interface IServerDrivenVisualElement
+{
+    public string? ServerKey
+    {
+        get; set;
+    }
+
+    public UIElementState State
+    {
+        get; set;
+    }
+    public Action OnLoaded
+    {
+        get;
+        set;
+    }
+
+    void OnStateChanged(UIElementState newState);
+    void OnError(Exception ex);
+}
diff --git a/Maui.ServerDrivenUI/Models/ServerUIElement.cs b/Maui.ServerDrivenUI/Models/ServerUIElement.cs
@@ -25,11 +25,6 @@ public class ServerUIElement
     /// </summary>
     public string Class { get; set; }
 
-    /// <summary>
-    /// Define if this element is a root visual element
-    /// </summary>
-    public bool IsRootElement { get; set; }
-
     /// <summary>
     /// Visual element properties
     /// </summary>
@@ -57,22 +52,19 @@ public class ServerUIElement
     /// <param name="type">Maui element type</param>
     /// <param name="class">Class with namespace eg.: "MyNamespace.Folder.ClassName"</param>
     /// <param name="content">Inner visual element content</param>
-    /// <param name="isRootElement">Define if this element is a root visual element</param>
     /// <param name="customNamespaces">Custom namespaces to be used as root element</param>
     public ServerUIElement(
         string elementKey,
         string type,
         string @class,
         IList<ServerUIElement> content,
-        bool isRootElement = false,
         IList<CustomNamespace>? customNamespaces = null)
     {
         CustomNamespaces = customNamespaces ?? new List<CustomNamespace>(0);
         Content = content;
         Class = @class;
         Type = type;
         Key = elementKey;
-        IsRootElement = isRootElement;
     }
 
     [JsonConstructor]

diff --git a/Maui.ServerDrivenUI/Models/UIElementState.cs b/Maui.ServerDrivenUI/Models/UIElementState.cs
@@ -0,0 +1,9 @@
+namespace Maui.ServerDrivenUI;
+
+public enum UIElementState
+{
+    None = 0,
+    Loading = 1,
+    Loaded = 2,
+    Error = 3,
+}
diff --git a/Maui.ServerDrivenUI/Services/ServiceProviderHelper.cs b/Maui.ServerDrivenUI/Services/ServiceProviderHelper.cs
@@ -0,0 +1,11 @@
+namespace Maui.ServerDrivenUI.Services;
+
+internal static class ServiceProviderHelper
+{
+    public static IServiceProvider? ServiceProvider =>
+#if WINDOWS
+        MauiWinUIApplication.Current?.Services;
+#else
+        IPlatformApplication.Current?.Services;
+#endif
+}
diff --git a/Maui.ServerDrivenUI/Services/XamlConverterService.cs b/Maui.ServerDrivenUI/Services/XamlConverterService.cs
@@ -10,15 +10,14 @@ public static string ConvertToXml(ServerUIElement element)
         strBuilder.Append($"<{element.Type}");
         strBuilder.AppendLine();
 
-        if (element.IsRootElement)
-        {
+        if (!string.IsNullOrWhiteSpace(element.Class))
             strBuilder.AppendLine($"x:Class=\"{element.Class}\"");
-            strBuilder.AppendLine($"xmlns=\"http://schemas.microsoft.com/dotnet/2021/maui\"");
-            strBuilder.AppendLine($"xmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\"");
 
-            foreach (var cn in element.CustomNamespaces)
-                strBuilder.AppendLine($"xmlns:{cn.Alias}=\"clr-namespace:{cn.Namespace}{ParseAssembly(cn)}\"");
-        }
+        strBuilder.AppendLine($"xmlns=\"http://schemas.microsoft.com/dotnet/2021/maui\"");
+        strBuilder.AppendLine($"xmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\"");
+
+        foreach (var cn in element.CustomNamespaces)
+            strBuilder.AppendLine($"xmlns:{cn.Alias}=\"clr-namespace:{cn.Namespace}{ParseAssembly(cn)}\"");
 
         foreach (var prop in element.Properties)
             strBuilder.AppendLine($"{prop.Key}=\"{prop.Value}\"");

diff --git a/Maui.ServerDrivenUI/Views/ServerDrivenContentPage.cs b/Maui.ServerDrivenUI/Views/ServerDrivenContentPage.cs
@@ -0,0 +1,67 @@
+using Maui.ServerDrivenUI.Views;
+
+namespace Maui.ServerDrivenUI;
+
+public abstract class ServerDrivenContentPage : ContentPage, IServerDrivenVisualElement
+{
+    #region BindableProperties
+
+    public static readonly BindableProperty ServerKeyProperty = BindableProperty.Create(
+            nameof(ServerKey),
+            typeof(string),
+            typeof(ServerDrivenContentPage),
+            null);
+
+    public static readonly BindableProperty StateProperty = BindableProperty.Create(
+            nameof(State),
+            typeof(UIElementState),
+            typeof(ServerDrivenContentPage),
+            UIElementState.None,
+            propertyChanged: ServerDrivenVisualElement.OnStatePropertyChanged);
+
+    #endregion
+
+    #region Properties
+
+    public string? ServerKey
+    {
+        get => (string?)GetValue(ServerKeyProperty);
+        set => SetValue(ServerKeyProperty, value);
+    }
+
+    public UIElementState State
+    {
+        get => (UIElementState)GetValue(StateProperty);
+        set => SetValue(StateProperty, value);
+    }
+
+    public Action OnLoaded
+    {
+        get;
+        set;
+    }
+
+    #endregion
+
+    #region Constructors
+
+    public ServerDrivenContentPage() =>
+    _ = Task.Run(InitializeComponentAsync);
+
+    #endregion
+
+    #region Protected Methods
+
+    protected virtual Task InitializeComponentAsync() =>
+        ServerDrivenVisualElement.InitializeComponentAsync(this);
+
+    public virtual void OnStateChanged(UIElementState newState)
+    {
+    }
+
+    public virtual void OnError(Exception ex)
+    {
+    }
+
+    #endregion
+}
diff --git a/Maui.ServerDrivenUI/Views/ServerDrivenView.cs b/Maui.ServerDrivenUI/Views/ServerDrivenView.cs
@@ -0,0 +1,67 @@
+using Maui.ServerDrivenUI.Views;
+
+namespace Maui.ServerDrivenUI;
+
+public class ServerDrivenView : ContentView, IServerDrivenVisualElement
+{
+    #region BindableProperties
+
+    public static readonly BindableProperty ServerKeyProperty = BindableProperty.Create(
+            nameof(ServerKey),
+            typeof(string),
+            typeof(ServerDrivenView),
+            null);
+
+    public static readonly BindableProperty StateProperty = BindableProperty.Create(
+            nameof(State),
+            typeof(UIElementState),
+            typeof(ServerDrivenView),
+            UIElementState.None,
+            propertyChanged: ServerDrivenVisualElement.OnStatePropertyChanged);
+
+    #endregion
+
+    #region Properties
+
+    public string? ServerKey
+    {
+        get => (string?)GetValue(ServerKeyProperty);
+        set => SetValue(ServerKeyProperty, value);
+    }
+
+    public UIElementState State
+    {
+        get => (UIElementState)GetValue(StateProperty);
+        set => SetValue(StateProperty, value);
+    }
+
+    public Action OnLoaded
+    {
+        get;
+        set;
+    }
+
+    #endregion
+
+    #region Constructors
+
+    public ServerDrivenView() =>
+    _ = Task.Run(InitializeComponentAsync);
+
+    #endregion
+
+    #region IServerDrivenVisualElement
+
+    protected virtual Task InitializeComponentAsync() =>
+        ServerDrivenVisualElement.InitializeComponentAsync(this);
+
+    public virtual void OnStateChanged(UIElementState newState)
+    {
+    }
+
+    public virtual void OnError(Exception ex)
+    {
+    }
+
+    #endregion
+}
diff --git a/Maui.ServerDrivenUI/Views/ServerDrivenVisualElement.cs b/Maui.ServerDrivenUI/Views/ServerDrivenVisualElement.cs
@@ -0,0 +1,69 @@
+using Maui.ServerDrivenUI.Services;
+
+namespace Maui.ServerDrivenUI.Views;
+
+internal class ServerDrivenVisualElement
+{
+    internal static async Task InitializeComponentAsync(IServerDrivenVisualElement element)
+    {
+        try
+        {
+            MainThread.BeginInvokeOnMainThread(() => element.State = UIElementState.Loading);
+
+            var serverDrivenUiService = ServiceProviderHelper.ServiceProvider?.GetService<IServerDrivenUIService>();
+            if (serverDrivenUiService != null)
+            {
+                var xaml = await serverDrivenUiService.GetXamlAsync(element.ServerKey ?? element.GetType().Name).ConfigureAwait(false);
+                MainThread.BeginInvokeOnMainThread(() => {
+                    var onLoaded = element.OnLoaded;
+                    (element as VisualElement)?.LoadFromXaml(xaml);
+
+                    if (element is ServerDrivenContentPage page)
+                    {
+                        if (page.Content is null)
+                        {
+                            _ = Task.Run(() => InitializeComponentAsync(element));
+                            return;
+                        }
+                    }
+                    else if (element is ServerDrivenView view)
+                    {
+                        if (view.Content is null)
+                        {
+                            _ = Task.Run(() => InitializeComponentAsync(element));
+                            return;
+                        }
+                    }
+
+                    element.OnLoaded = onLoaded;
+                    element.State = UIElementState.Loaded;
+                });
+            }
+            else
+            {
+                MainThread.BeginInvokeOnMainThread(() => {
+                    element.State = UIElementState.Error;
+                    element.OnError(new DependencyRegistrationException("IServerDrivenUIService not found, make sure you are calling 'ConfigureServerDrivenUI(s=> s.RegisterElementGetter((k)=> yourApiCall(k)))'"));
+                });
+            }
+        }
+        catch (Exception ex)
+        {
+            MainThread.BeginInvokeOnMainThread(() => {
+                element.State = UIElementState.Error;
+                element.OnError(ex);
+            });
+        }
+    }
+
+    internal static void OnStatePropertyChanged(BindableObject bindable, object oldValue, object newValue)
+    {
+        if (bindable is not IServerDrivenVisualElement view
+            || newValue is not UIElementState newState)
+            return;
+
+        view.OnStateChanged(newState);
+        if(newState is UIElementState.Loaded)
+            view.OnLoaded?.Invoke();
+    }
+}
diff --git a/README.md b/README.md
@@ -42,15 +42,19 @@ public static class MauiProgram
 }
 ```
 
-- You can now receive the xaml and load it 
+- You can now use the ServerDrivenUI Elements 
 
-```csharp
+```xaml
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage
+    x:Class="Maui.ServerDrivenUI.Sample.MainPage"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
+
+    <ServerDrivenView x:Name="sduiView" ServerKey="MyView" />
+
+</ContentPage>
 
-var xaml = await _serverDrivenUIService.GetXamlAsync("MyView").ConfigureAwait(false);
-MainThread.BeginInvokeOnMainThread(() =>
-{
-    sduiView.LoadFromXaml(xaml);
-});
 ```
 
 ## Repo Activity

diff --git a/samples/Maui.ServerDrivenUI.Sample/MainPage.xaml b/samples/Maui.ServerDrivenUI.Sample/MainPage.xaml
@@ -4,6 +4,8 @@
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
 
-    <ContentView x:Name="sduiView" />
+    <ServerDrivenView
+        x:Name="sduiView"
+        ServerKey="MyView" />
 
 </ContentPage>
diff --git a/samples/Maui.ServerDrivenUI.Sample/MainPage.xaml.cs b/samples/Maui.ServerDrivenUI.Sample/MainPage.xaml.cs
@@ -5,24 +5,22 @@ namespace Maui.ServerDrivenUI.Sample
     [XamlCompilation(XamlCompilationOptions.Skip)]
     public partial class MainPage : ContentPage
     {
-        private readonly IServerDrivenUIService _serverDrivenUIService;
         int count = 0;
-
-        public MainPage(IServerDrivenUIService serverDrivenUIService)
+        public MainPage()
         {
-            _serverDrivenUIService = serverDrivenUIService;
             InitializeComponent();
-
-            _ = Task.Run(InitializeComponentAsync);
+            sduiView.OnLoaded = OnSDUILoaded;
         }
 
-        private async Task InitializeComponentAsync()
+        public void OnSDUILoaded()
         {
-            var xaml = await _serverDrivenUIService.GetXamlAsync("MyView").ConfigureAwait(false);
-            MainThread.BeginInvokeOnMainThread(() =>
+            if(sduiView.FindByName("myButton") is Button btn)
             {
-                sduiView.LoadFromXaml(xaml);
-            });
+                btn.Clicked += (s, e) => {
+                    count++;
+                    btn.Text = $"Cliked {count} times!";
+                };
+            }
         }
     }
 }