I am learning Blazor currently.
My model has a abstract class and a dozen concrete implementations of this abstract class.
For example Fruit and Apple, Banana and Orange.
Each implementation needs a specific user interface.
So I created a Razor Component for each class. Let's call them AppleView, BananaView and OrangeView.
My frontend queries a Fruit[] and loops through each entry and renders the specific Razor Component. Looks like this:
#foreach (Fruit fruit in Fruites)
{
if (fruit is Apple apple)
<AppleView fuit="apple" />
else if (fruit is Banana banana)
<BananaView fuit="banana" />
else if (fruit is Orange orange)
<OrangeView fuit="orange" />
}
Is there a better way of weaving together such a big if-else-statement? Is there a way of mapping a model class to its view?
Thanks!
Related
We're creating a dynamic page of components in Blazor. The intention is to have dynamic applets displayed on a page. The idea is that we have a list of strings which correspond to Component names. We read through the string list and for each one, instantiate a blazor component or render fragment. These are just simple components, no passed in parameters or the like. ie:
string[] componentsStrings = {"Component1", "Component2"};
Expected output:
<Component1 />
<Component2 />
We can't come up with a way to do this. It seems like a fairly standard thing to do, but perhaps not? Does anyone know if this is even possible?
You will have to programmatically create a component which adds your custom components on the page using RenderTreeBuilder.
Chris Sainty has a blog post on this which you can read here: https://chrissainty.com/building-components-via-rendertreebuilder/
Basically there is an override for BuildRenderTree in the ComponentBase class which can be used:
public class Menu : ComponentBase
{
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
base.BuildRenderTree(builder);
builder.OpenElement(0, "nav");
builder.AddAttribute(1, "class", "menu");
}
}
Here is another tutorial.
Some tips from here:
Place base.BuildRenderTree(builder); at the start of the
BuildRenderTree method , not at the end.
Always start with the value 0 for the sequence parameter.
We started to use Dart's Strong mode with our polymer dart code and honestly it looks terrible. It looks so terrible that I need a second opinion on the matter. It cant be this ugly looking, it honestly cant.
So We were creating a bunch of PolymerDart views using some mix ins for generic code. This generic code is reused everywhere so hence why we made it a mixin.
Our old design:
abstract class MyModel{ ... }
class SubModel extends MyModel with JsProxy{ ... }
#behavior
abstract class MyBehavior implements PolymerBase {
#Property(notify:true)
MyModel model = null;
// ....
}
#PolymerRegister("my-component")
class MyViewModel extends PolymerElement with MyBehavior {
#Property(notify:true)
SubModel model = null;
// ...
}
The purpose was to have a generic model to represent information and we leverage it in the behavior. Since SubModel extends it, we can slot anywhere normally and the behavior would work. My colleague says this is a huge NO and I am confused as to why. He said it a Polymer Issue, so when we leave Polymer it will be able to be done sort of.
He then pushed through the code base a refactor so it works.
#PolymerRegister("my-component")
class MyViewModel extends PolymerElement with MyBehavior {
#Property(notify:true)
MyModel model = null; // <-- changed to parent type from Behavior
//example reference
void test(){
int id = (model as SubModel).id; // <-- using AS to explain what it really is.
}
}
Now he put this EVERYWHERE, updated all references of model.id with (model as SubModel).id. I think this is ugly and just plain wrong. (Granted I get that feeling with everything PolymerDart).
Is this really how this kind of thing is done when dealing with Mixins? Since The mixin already has that definition, we shouldn't need it in the MyViewModel code either.
Can someone explain this to me as to why this is the right thing according to strong mode? Why must this change occur? While I trust in my colleague, something does seem off and I would like a deeper understanding. I believe, that he is correct that maybe it is because entirely due to Polymer Dart, but maybe there is a way to circumventing all property renames, and using (.. as Whatever) everywhere.
analysis_options.yaml:
analyzer:
strong-mode: true
Edit: The reasoning was that since the Model is defined as a property in the behavior, it is non-mutable. We cant override the type in the MyViewModel class. Since SubModel extends MyModel, It should be allowed to exist.
I am using C# Json.Encode to add some data into our DOM.
<div data-model='#Json.Encode(cliente)'>
However there is some circular reference into our model.
Is possible to configure the global converter to ignore those circular references?
Add the [ScriptIgnore] attribute to the property that would start the circular reference. For example:
public class Foo
{
public Bar Bar { get; set; }
}
public class Bar
{
[ScriptIgnore]
public Foo Foo { get; set; }
}
So, assuming you have an instance of foo, the JSON serializer will delve into the Bar reference, but will not continue into the Foo reference, there, because it's ignored.
You can only do this one way, though. If you start with an instance of Bar, you won't get the Foo reference at all, because again, it's simply ignored. If you need to handle various different scenarios like this, you'll need to utilize separate classes (call them view models, DTOs, whatever), where you simply set it up so that the circular reference doesn't exist in the first place. This is not a bad idea to just do, in general. In other words, you can use custom built classes instead of [ScriptIgnore] in the first place.
I'm migrating a swing application to JavaFX. There is a lot of Code, that abstracts from JComponent.
public abstract class ComponentLayoutHelper<TComponent extends Componend>{...
componend.setBorder()
...}
Properties like the visibility, border and opaque is set to a Component first and afterwards the properties are extended for specific Components like Labels etc.
public class LabelLayoutHelper extends ComponendLayoutHelper<JLabel>{...
label.setText();
...}
In this post:
Alternative for JComponent in JavaFX they talked about Node as an equivalent to JComponent. But node doesnt have properties like border or opaque. Does someone have an idea how to migrate JComponent?
I previously asked about what Mixins were, and have begun to get the gist of what the pattern means. But it got me wondering if there is a common pattern name for doing something like Mixins at an Object level as opposed to the Class level.
Pseudo code (in some non existent language):
Class MyClass
{
function foo()
{
print("foo")
}
}
function bar()
{
print("bar")
}
object = MyClass.new()
object.xxxx(bar)
object.bar() #output: bar
I know stuff like this can be done in several languages, in one way or another, but I'm wondering what would be the "standard" name for the functionality xxxx represents, and what is the name for this pattern, if there is one.
Thanks!
Edit: Expanding on finnsson's answer I guess something like this might be another case of this would be:
object.xxxx(OtherClass)
object.otherfoo()
Would concatenate be appropriate?
Quote: "Concatenation: Under pure prototyping, which is also referred to as concatenative prototypes..." -wikipedia
This is common in prototype-based programming languages. I belive it's called "import" in ruby but it's some time since I last programmed ruby so I'm not sure.
In js/ruby you would write
object.bar = bar;
object.bar() // output: bar
and than it's no real pattern, since it's just an assignment (o.bar = bar) making perfect sense in a prototype-based language. I guess xxxx in your example could be called prototype or something similar (see http://en.wikipedia.org/wiki/Prototype-based_programming where a language calles this proto).