dotnet / comet Goto Github PK
View Code? Open in Web Editor NEWComet is an MVU UIToolkit written in C#
License: MIT License
Comet is an MVU UIToolkit written in C#
License: MIT License
If you go to ClipSample_None and comment out the shadow, layout is not valid.
We need an interface for Text, it should handle Text,Font,Color... All those Text properties. It will be used by Text, TextField,Button. Then we can re-use the mapper.
Create templates for Comet
Stretch Goal: Create terminal command dotnet new comet
https://docs.microsoft.com/en-us/dotnet/core/tutorials/cli-templates-create-item-template
https://docs.microsoft.com/en-us/dotnet/core/tools/custom-templates
https://github.com/xamarin/xamarin-templates
https://www.jimbobbennett.io/creating-dotnet-new-and-visual-studio-project-and-solution-templates/
YOU ARE STUPID
π Shame π Shame π Shame
The UWP TextFieldHandler sends OnCommit events when the text is changed. It should be enhanced to send that event when return is pressed and/or focus is lost.
Currently, there is a NuGet package that contains everything in one package. This is great for simplicity in adding the package; however, it breaks when a target framework moniker (TFM) supports multiple app models.
For example, right now the WPF support is set for .NET Framework 4.5. However, WPF is supported in .NET Core 3.0. Blazor also runs on .NET Core 3.0. Having both of these in the same package is impossible, unless you want the blazor dependencies in a WPF app or vice versa. This is not ideal.
I propose splitting up the package so that they make a distinction of the app model being targeted. ie having the following packages:
This could also be packaged as the following (I'm not super familiar with Xamarin conventions so this may not be a good idea):
These are some suggestions; the big issue is separating out the app platforms from the frameworks they support since NuGet packages can only be targeted by TFM and some TFMs support multiple platforms.
The current Android ListViewHandler uses a ListView. It should be refactored to use a RecyclerView.
Right now you can set a global FontSize, but you can't do Label.FontSize
, and Button.FontSize
. We also may need style id, and let people set things like StyleId.Label.FontSize
or StyleId.FontSize
Check iOS on this branch: https://github.com/Clancey/HotUI/tree/ListView.
Set a breakpoint here: https://github.com/Clancey/HotUI/blob/ListView/src/HotUI/Controls/ListView.cs#L86
and tap on the empty view
List view needs to work, and have nice syntax
namespace Tasky
{
public class MainPage : View
{
readonly ObservableCollection<TodoItem> items = new ObservableCollection<TodoItem>{
new TodoItem{
Name = "Hi",
Done = true,
},
new TodoItem
{
Name ="Finish Tasky",
}
};
[Body]
View body() => new NavigationView{
new ListView<TodoItem>(items){
ViewFor = (item)=>new VStack{
new HStack
{
new Text(item.Name).Frame(alignment: Alignment.Leading),
new Spacer(),
new Toggle(item.Done).Frame(alignment:Alignment.Center)
}.Padding(6)
}.Padding(left:12).FillHorizontal()
}.Title("Tasky"),
};
}
}
Currently, there is a Device
class that contains a number of static services. This service locator pattern is difficult to use (and is in opposition with) the dependency injection system used in ASP.NET Core (such as for Blazor). Can this be replaced with dependency injection so that services can be registered and retrieved via injection rather than static fields? I propose using Microsoft.Extensions.DependencyInjection
and IServiceProvider
as the default implementation since most containers have a way of wrapping it to provide their own implementations. I am unsure how this works on Xamarin platforms, but I've been happy with the use on UWP, .NET Core, and .NET Framework.
I see that Comet is planning support for all major platforms except desktop linux.
Would love to see Comet supporting linux via GTK#
public class MainPage : View
{
readonly ObservableCollection<TodoItem> items = new ObservableCollection<TodoItem>{
new TodoItem{
Name = "Hi",
Done = true,
},
new TodoItem
{
Name ="Finish Tasky",
}
};
[Body]
View body() => new NavigationView{
new ListView<TodoItem>(items){
ViewFor = (item)=>new ContentView{
new HStack
{
new Text(item.Name).Frame(alignment: Alignment.Leading),
new Spacer(),
new Toggle(item.Done).Frame(alignment:Alignment.Center)
}.Padding(6)
}.FillHorizontal()
}.Title("Tasky"),
};
}
I added a Button to a UI with just a title and upon tapping it crashed.
No crash, no nothing.
Boom
The following code sample should have the switch on the right and the label on the left:
They are both left aligned
public class MainPage : View
{
readonly State<int> count = 0;
readonly ObservableCollection<TodoItem> items = new ObservableCollection<TodoItem>{
new TodoItem{
Name = "Hi",
}
};
[Body]
View body() => new NavigationView{
new ListView<TodoItem>(items){
ViewFor = (item)=>new HStack
{
new Text(item.Name).Frame(alignment: Alignment.Leading),
new Toggle(item.Done).Frame(alignment:Alignment.Center)
}.FillHorizontal().Background(Color.Blue)
}.Title("Tasky"),
};
}
Fields populated from environment do not work, when added after hot reload
public class MediaItemView : View
{
[Environment]
readonly MediaItemBase item;
public MediaItemView()
{
}
[Body]
View body() => new HStack
{
new ArtworkView()
.SetEnvironment(nameof(item),item)
.Frame(44,44,alignment:Alignment.Leading)
.Padding(5),
new VStack{
new Text(item?.Name),
new Text(item?.DetailText)
}.FillHorizontal()
}.Frame(alignment: Alignment.Leading).Padding(5);
}
Stack needs defined. We need a way to specify items way of laying out in a stack
Grid row and column sizing isnβt what I expect.
Example from Demo: https://github.com/Clancey/HotUI/blob/dev/sample/HotUI.Samples/DemoCreditCardView.cs#L66
The first Grid inside is meant to be in the first row, which should be 300 high. You can see the red in the image is filling the entire screen. Then none of the rest of the UI really appears as I expect.
Source Forms version is here: https://github.com/CrossGeeks/PaymentUISample
When we are done with a View, we need to clean it up and its children.
I noticed in the readme the following
#if DEBUG
HotUI.Reload.Init();
#endif
Some folks sorta dispise compiler directives, I'm wondering if it'd be worth it to simply call that internally and decorate the method with a conditional attribute?:
namespace HotUi
{
public class Reload
{
[Conditional("DEBUG")]
internal void InitInternal()
{
// setup hot reload by default
}
[Conditional("DEBUG")]
public void Disable()
{
// method to allow developers to opt out of hot reload
}
}
}
By doing this, we get hot reload for free all the time without even having to think about it. Then we can "OptOut" by calling something like this
HotUI.Reload.Disable(); // opt out of hot reload
We need a way to define bindings, properties, and other things within a ViewBuilder Context
Global State inside Initializer syntax is not causing a rebuild.
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using Comet;
namespace Tasky
{
public class MainPage : View
{
readonly ObservableCollection<TodoItem> items = new ObservableCollection<TodoItem>{
new TodoItem{
Name = "Hi",
Done = true,
},
new TodoItem
{
Name ="Finish Tasky",
}
};
readonly State<bool> isAdding = false;
[Body]
View body() => new NavigationView{
isAdding.Value ? (View)new VStack
{
} :
new ListView<TodoItem>(items){
ViewFor = (item)=>new VStack{
new HStack
{
new Text(item.Name).Frame(alignment: Alignment.Leading),
new Spacer(),
new Toggle(item.Done).Frame(alignment:Alignment.Center)
}.Padding(6)
}.FillHorizontal()
}.Title("Tasky")
}.SetRightActionButton(new Tuple<string, Action>("+", AddItem));
void AddItem()
{
isAdding.Value = true;
Console.WriteLine("Add clicked!!!!");
}
}
}
The Android Slider handler should be enhanced to support finer grained steps.
Building out this UI: https://github.com/CrossGeeks/PaymentUISample
I need the following for TextField:
The UWP TextFieldHandler sends OnCommit events when the text is changed. It should be enhanced to send that event when return is pressed and/or focus is lost.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.