Sunday, September 15, 2019

MVVM and mobil app development.

A big part of the MVVM Pattern is separation and binding. I don't know how you are developing you mobil apps, but in my apps, many parts, I mean more then 80%, are created "on the fly" at runtime. Sometimes the elements would be created from the content of a database, sometimes from a REST(full) Webservice and sometimes from a config or user settings.

So here comes the funny part: Imagine controls has to be created from a database. From a ButtonClick on the View, the Viewmodel calls the Model. The Model loads all the necessary information and hast to provide this information to the Viewmodel. So far so good.

If you take a closer look, every component -  like a TEdit - is some kind of View. Views are created by the composition-root, perhaps from a event of the navigation-service, perhaps from a ViewLocator  or in case of e.g. Messagedialogs, from a dialog-service. 

In this case the Viewmodel is created with a component-service to create a component from a predefined collection. Wouldn't is be great I we already had a service like this? Yes we have. My FluentCreator could be called by this service and is able to provide an easy way to create predefined  - even complex - view-structures like I've demonstrated in my scale-able calender component. 

But where is the target? The target is a container (TLayout/ListBox) on the View, but we don't have a View-reference in our ViewModel. Conclusion the View must call the component-creation-service. Not a big deal, we could create the View with this service. But how to pass all the information from the Model to the ViewModel to the View to the component-service and keep in mind, the Viewmodul has to be testable and if possible the service, too.

One problem, the possibilities of component creation are endless. We could fire a PropertyChange with some kind of string. E.g. "Create Edit_ID parent Listbox1" we could find the Listbox1 and we could create a TEdit_ID from our lookup list in our component-service. But our Viewmodel should not know "Listbox1".

Next problem is the binding. How could we create the binding to our ViewModel? There aren't any properties to bind to. We also have to create a dynamic receiver for the created components and I'm sure we have to provide some kind of database connection to the receiver.

It looks like our component-service as three parts: One for the View, one for the ViewModel and one for the Model... 

To implement an easy to use MVVM framework is not trivial, but doing everything at runtime is a step forward. Of course, there will be a way, but finding the "best" way is the tricky part.

Think about it, I would love to read your ideas on this topic.

PS.: The dynamic creation stuff is probably not mobil related, but from my point of view Desktop apps are more static these days...


Friday, September 13, 2019

VCL and FMX Styles and the Styledesigner...

I never used VCL-Styles before, because my last app for VCL is still on D2007 and we have written our own styling. 

Since XE 2, I use FMX only.

For FMX - of course - I had to use styling and the Bitmap-Styledesigner. I'm not so happy with this app. There is a QC Entry from 2018, RSP-22407, please support.

If you tried the Styledesigner there are many objects - that's fine - and PNG's for different resolution. From my point of view one big image is only helpful if you are using some kind of template for a well know graphic program. By comparing different styles you find out, that nearly every style has it's own layout. Horrible. Unfortunately, there is no guide which part of the graphic is used for which object/action. Also the Style/New creates different layouts. 

Ok, lets take it easy: Use a predefined style, save the png file, convert the colors, reload the png file, done... Isn't it? No... You have to adjust the font-colors, because this colors are set individually. Wouldn't it be nice if the colors are taken from the png?
The is a choose color under mouse tool, but you can not open the png file and at the same time choose a color. The trick is to open on object, select background and open the rectangle editor. This windows could stay open while choosing the color.

How to uses this colors at runtime? There is no Color table in the style and if you change one color, the values are set to all objects. If you want to match a TRectangle to the given style the have to chose a control and get the color from there. So if your color settings are different from the SysColors, it's difficult. I like to have more than the given SysColors like: clHelpTextColor, clWarnColor, clInfoColor. 

So how to select a color in the ObjectInspector? You can select "Red" or "clRed" but not "clMenu" or "clScrollBar". 

The Styles that are downloadable or included are - from my point of view - all to monochrome. Most dark styles are to dark (lol... perhaps, because I do not like dark-styles at all) and all of the colored- styles have only one dominant color. I like my UI uniform, but not so uniform. Colors helps you to guide the users attention. If you place some controls on a Panel / Rectangle with a different color you can show the user that these inputs are important or less important. Perhaps UserColor1, UserColor2..UserColorN would be nice.

How to get a button with an icon? You can use a button with an Icon or you can create a new entry in the object list, add an image to the "Big-Picture", select all rectangles for enabled, disabled, hot, focused. Copying a button is a piece of cake, but how to add the image? There is no build-in function. You have to take a graphic-editor to expand your png's (1x,1.5x,2x,3x) keep in mind to place your 5 images on the same spot, if not, you have to select all rectangle individually. But how? Solution: Write a tool to add Images. After your tool has created all png's you can import this images and select the rectangles. But where are the right corners? There is no grid  and if your icon has no outside Rectangle. you never find the right points (up/left,bottom/right). Wouldn't it be great if your tool could provide a config to do this selection on import of the png? And why is there no function to do this inside the Styledesigner. And why is there a big image depending on how to create and find all the right places? 

Wouldn't it be cool if you can provide single images for all functions/objects and on style-save this images got composed (with no,or less spaces) into one big png? (for each resolution)! No Rectangle selection no guessing game where to find what? Perhaps single images are not so easy to create if you are a style-artist, but is this case the Bitmap-Styledesigner should be able to export an uniform png with rectangles where to place your images. This image could be re imported, and could be striped into single images for later composing.

If you want to change the Font-Color for e.g. TabTextActiveNormal, you can open is (Font Dialog, no selection of pre-select colors) or you can change the color, but the actual color is not set in the color-dialog. So to change the color to a darker color you have to guess or you have to put in the colors for RGB. (Not with the clipboard.)

Many stuff to do... Like in RSP-22407 - I really have no time to write my own Styledesigner starting by New-FMX-Project.

Please leave a comment of your idea or if I'm totally wrong. ;-)



Wednesday, September 11, 2019

FDK - Unit-List is online!

I finally found some time put some kind of Information about my FDK on my website.

Full documentation is coming, but for a start you can have a look at the Unitlist.




Tuesday, September 10, 2019

MVVM Survey results and feedback!

First of all, thanks to everyone who participated in my MVVM survey. Your feedback will influence my decisions!

Here are the Results:

693 Views resulting in 159 completed surveys. (22.9%)


I created 4 different links (my Blog, DelphiPraxis (german only), Twitter and Facebook. Main difference is the View/Fill out ratio.

Facebook : 32,4% // Best of 4 - Thanx
DelphiPraxis : 30,6% // not bad! Danke an meine Leser!
Twitter : 16,5% // I still have no clue why anybody is writing here
This blog: 14,6% // Hey my friend's - you are already reading here!

Perhaps I have to add DelphiPraxis and my blog, because some got the RSS-Feed link!


Do you already separate your logic and your UI  with (MVP, MVC or MVVM)

58 from 159 would like to separate logic and UI.
66 already using some kind of separation. // more than I expected

Interfaces?

14 from 159 answered : Don't want to learn how to... // Strange
104 had no problems with interfaces.
41 want to learn how to work with interfaces. // Should I do a Youtube Video for this topic? 

Please leave a comment!

Attributes?

48 of 155 never used
78 of 155 knows how to use
57 of 155 already implemented own Attributes // Good
12 of 155 dislike Attributes in the sourcecode // Ohh... Please give it a try  

Generics?

19 of 159 never used
8 of 159 dislikes generics

If I would use a MVVM-Framework it has to

- match the C# tutorials (12,6%)   // Sorry this won't happen
- work save and fast! (42 %) // Thanx you are my target group
- be freeware (38%) // Sorry this will not be free
- work with VCL (73,3%) // OK, I will implement this too *grumpf*
- work with FMX (50%) // Main target - of course it will work with FMX
- on all platforms (50,6 %) // Of course... With and without ARC I hope for 10.4

If the MVVM framework is not  free/opensource what is the chance you would spent money to buy it?



How much would you spend for a Delphi-MVVM-Framework


less than 100€ (58,8%) // For so much work it's a little to low (perhaps as early Bird)
100€-199€ (24%) // May be
200€-299€ (8,5%) // It's a good prize
300€-399€ (2,1%) // Good news it would be less
more than 400€ (6,3%) // Thanx, but I think for this prize it's unsaleable

Remember it would be with free updates for one year.

How old are you?


How long have you been developing with Pascal/Delphi?


Mark all your Delphi Versions you are still using.


29% are using a Delphi-Version older than Delphi 2007 // Wow why?
14,7% still using 2007 // Welcome in the non Unicode migration club
31,8% Delphi 2009-XE9 // Please update at least to Seattle
12,1% Seattle // OK
24,2% Berlin // Better
41,4% Tokyo // Very good!
70% Rio // NICE!


So far so good, thanx again and leave a comment or give me a call if you want more information!

Saturday, September 7, 2019

Is there a sharp border between MVVM and MVC/MVP?

This is a really good question... And without long thinking about it, you probably would say "yes"!

Ok! But where do you draw this line? And why?

Many MVVM Experts - what ever makes them experts - would tell you : Delphi is unable to do "real" MVVM because we have not the binding stuff like C#. 

And no! We don't compare the livebinding with C#'s binding.

So why I'm still on this project since 2015, to prove the experts wrong? No...

The reason why I'm still developing a MVVM-Framework is, because I'm looking for the best way - with delphi - to separate the form from the business logic and the database. 

Perhaps at the end we will have some kind of patter that should not be named MVVM, but I don't care if it works as expected. Comparisons with C# should be stopped here immediately. We do not edit XML files by hand and we like to avoid so much typing for every propertychange. :-)

Transferring data from an Edit to a property in the ViewModel, to the Model, to the database is a peace of cake. But even at this point I do not want to fire an event like "Hey my Name has changed guess what the new value is, or ask me". So I like to broadcast my Name to all listener!

But when it comes to ListViews or Grids, things getting difficult. What event should I fire or what if the Grid is scrolled, should I preload more rows? Is this part of the binding or the ViewModel or a Cache-Class? Where to store the data?

But back to the topic!

MVVM did not have access to a component, MVVM is only dealing with properties. MVC/MVP has more direct access. So what can we do to get "kind of" access but not the component itself? If I cross this line, will every expert tear me up in the air? So I do not do this.

Of course you can do some kind of imposer grid that is able to handle a properychanged event and then? Get the complete data to compare or just refresh all data in the grid? Because one "cell" has changed? No sorry, not on my shift.  

The View has - perhaps - some stuff to do with the grid. But not holding the data! That's why I like the FMX,TGrid implementation where you have to provide the Data to the Grid only for the cells that are currently displayed. But how can you connect the Grid to the ViewModel, I mean how could the ViewModel throw some events to do so?
Your GridViewModel could have a property Cell[Row,Cell : Integer] : TValue; But I dislike to have a ViewModel for every Grid! 

Imagine this kind of application:

One Form as Person.View für editing all the Person-Datafields. But at the bottom a nice grid with matching addresses. If you klick on the Grid the data is loaded into Edit's.

So wouldn't it be nice to have some access / datastore in your Person.ViewModel for the grid also?

I think so...  I call it GridProperty and in this case I call it:
fMatchingAddresses : TGridProperty;

On the View I have a normal TGrid, but how to connect to the
Property MatchingAddresses : TGridProperty;?
Just place a TGridAdapter  from the MVVM tab on you form and connect your Grid to the GridAdapter. DONE. Everything else is done behind the scenes. You can configure the GridAdapter like the were a database involved, to select the Fields you want from the all-possible-field-list.

I call this a #PropertyChangedTunnel. Is this already not MVVM anymore? Whatever, then find a better name for my pattern and I will consider changing the framework name... ( Perhaps not )

And there will be some kind of ORM interface stuff to fill the property with the necessary data from the model and/or give a callback to read more data from the Model/Database. 

Does it work?

#FastAsHell

Stay tuned... More info's are in the pipeline.