Custom TTMSFMXTileList

Romero_Parra_Alejandro · June 28, 2022, 6:00am

Hello

On the picture above, I will programming a kitchen monitor with your TTMSFMXTileList, however I need to include a lot of relevant information inside the Tile, I mark with red arrow the areas I need to include, so what is your suggestion?

I will love if the content area can be your TTMSFMXTableView, since I want the user be able to select rows in order to indicate preparation or finish of every item.

Thanks for your help

Romero_Parra_Alejandro · June 28, 2022, 6:09am

I think if you can send me a sample of a TTMSFMXTileList that can handle inside a TTMSFMXTableView for every tile it will be my solution. Because with the picture above I can solve my needs with such TableView component.

Thanks

Pieter_Scheldeman · June 28, 2022, 9:09am

Please take a look at the following code with the OnLoadTile & OnUnloadTile events (taken from a demo). It's with a TPanel, but can easily be replaced with a TTMSFMXTableView

procedure TForm1.TMSFMXTileList1LoadTile(Sender: TObject; ATile: TTMSFMXTile;
  ATileShape: TControl);
var
  ts: TTMSFMXTileShape;
  c: TAlphaColor;
begin
  ATile.CanSelect := False;
  ts := ATileShape as TTMSFMXTileShape;
  Panel2.Visible := True;
  ts.ShapeDetailNotes.InsertObject(ts.ShapeDetailNotes.ChildrenCount, Panel2);
  Panel2.Align := TAlignLayout.Client;
end;

procedure TForm1.TMSFMXTileList1UnLoadTile(Sender: TObject;
  ATile: TTMSFMXTile; ATileShape: TControl);
begin
  if Assigned(Panel2) then
  begin
    Panel2.Visible := False;
    Panel2.Parent := Self;
    Panel2.Align := TAlignLayout.None;
  end;
end;

Romero_Parra_Alejandro · July 1, 2022, 2:13pm

Thanks, that did the trick

On the picture in my first message there are 2 tiles with a yellow and red "headers", can you please tell me how to change background header color on TTMSFMXTableView please?

I will do that with a timer procedure that fires up every 1 minute and check time above 15 minutes of tile creation for yellow color, and maybe 25 minutes to put the tile on red color.

Once inserted the TTMSFMXTableView into the Tile with the "ts.ShapeDetailNotes.InsertObject(ts.ShapeDetailNotes.ChildrenCount, Panel2);" command, how can access that object as a TTMSFMXTableView? I mean how can I cast it?

Thanks

Romero_Parra_Alejandro · July 3, 2022, 6:20pm

I almost finish my "kitchen monitor", but I have a lot of issues on my App, I hope you can help me.

I used your code above in order to put inside every Tile a TableView, however when I delete an specific Tile the App crash. Every TableView is created on runtime with your command "ts.ShapeDetailNotes.InsertObject(ts.ShapeDetailNotes.ChildrenCount, TableViewCreatedOnRuntime);"

However I don't know how to "unload" tile in order to release the TableView object inside, I don't know if that is the best technique. How can I access the Object inside the Tile?

If I don't put a TableView inside the Tile then "Tiles.Delete(X)" method works like a charm

I don't want the motion effect on navigationMode nmPaging, I mean it's slow, how can I remove it?
When the mouse pass over the tile it shows in gray color, how can I specify a hover color

Why you use the OnLoad and UnLoad Tiles method, I debug the App and OnLoad and Unload fires up in page change, there is no other way to code ONCE the Tiles creation with a TableView each procedure that not fires up every time my user change page?

I hope you can answer me this fast, Thanks.

Pieter_Scheldeman · July 4, 2022, 9:32am

Each tile object has a property called "DataObject", you can use this to attach your tableview, and then manually retrieve and destroy it, before deleting the tile. Also, if the DataObject is assigned, you can skip the creation of the tableview. The appearance of the tile needs to be changed at style level (Right-click the component, select "Edit Custom Style"). Navigate to the TMSFMXTileList1Style1 object, search for the defaulttile object and look for FillHover in the properties.

You can turn off animation with

  TMSFMXTileList1.NeedStyleLookup;
  TMSFMXTileList1.ApplyStyleLookup;
  TMSFMXTileList1.GetContentListAnim.Duration := 0;

Romero_Parra_Alejandro · July 6, 2022, 1:06pm

Hello again

Next code won't work:

TMSFMXTileList1.NeedStyleLookup;
TMSFMXTileList1.ApplyStyleLookup;
TMSFMXTileList1.GetContentListAnim.Duration := 0;

Concerning to FillHover works like a charm
Concerning to use dataobject I don't know if works correct after I created on runtime the Tableview I assign with the comand: Tile.DataObject := TTMSFMXTAbleView

Does I need to continue using the onload and unload procedures?

I continue experience errors on delete tiles, I use the next two commands:

TTMSFMXTableView(TTMSFMXTileList.Tiles[X].DataObject).Destroy;
TTMSFMXTileList.Tiles.Delete(X);

Romero_Parra_Alejandro · July 6, 2022, 5:30pm

I think if you provide me a brief example of how to do the next it will be perfect:

Create 10 Tiles on runtime
Create 10 tableViews on runtime and assign to each tile before
I asume you will use the onload and unload procedures... if so code this too please using the 2 steps above
delete a selected tile showing how to destroy the tableview first

With that example I will be ready to go

Thanks

Romero_Parra_Alejandro · July 11, 2022, 12:45pm

Hello

I'm still waiting for answers, did you read my previous messages?

Pieter_Scheldeman · July 11, 2022, 12:52pm

The ongoing workload is currently not permitting me to allocate time to create a demo. I'll look into this as soon as possible.

Romero_Parra_Alejandro · July 11, 2022, 12:56pm

Thank you very much, I will transmit all my ideas and the issues I'm deal with right now.

Apparently using TTMSFMXTableView crash the project, in 15 minutes I will write you a list of issues and some code using on certain events.

Romero_Parra_Alejandro · July 11, 2022, 1:24pm

Alright I recorded you what's going on with my project, check the next link please:

https://timbralofacil.com/descargas/borrar2.mp4

Events using TTMSFMXTableView

Loadtile

procedure TMonitorPreparacionF.ListaComandasLoadTile(Sender: TObject;
ATile: TTMSFMXTile; ATileShape: TControl);
Var
CuadroComanda: TTMSFMXTileShape;
begin
If Assigned(ATile.DataObject) and (ATile.DataObject is TTMSFMXTableView) then
Begin
ATile.CanSelect := False;
CuadroComanda := ATileShape as TTMSFMXTileShape;
TTMSFMXTableView(ATile.DataObject).Visible := True;
//TTMSFMXTableView(ATile.DataObject).Parent := ATile.ShapeContent;
CuadroComanda.ShapeContent.InsertObject(CuadroComanda.ShapeContent.ChildrenCount, TTMSFMXTableView(ATile.DataObject));
TTMSFMXTableView(ATile.DataObject).Align := TAlignLayout.Client;
End;
end;

UnloadTile

procedure TMonitorPreparacionF.ListaComandasUnLoadTile(Sender: TObject;
ATile: TTMSFMXTile; ATileShape: TControl);
begin
If Assigned(ATile.DataObject) and (ATile.DataObject is TTMSFMXTableView) then
begin
TTMSFMXTableView(ATile.DataObject).Visible := False;
TTMSFMXTableView(ATile.DataObject).Parent := Self;
TTMSFMXTableView(ATile.DataObject).Align := TAlignLayout.None;
end;
end;

Delete Tile

               Try
                     // Eliminamos la Comanda del Listado
                     If Assigned(ListaComandas.Tiles[MensajesOperacionesComanda.Tag].DataObject) and (ListaComandas.Tiles[MensajesOperacionesComanda.Tag].DataObject is TTMSFMXTableView) then
                     Begin
                          TTMSFMXTableView(ListaComandas.Tiles[MensajesOperacionesComanda.Tag].DataObject).OnItemClick := Nil;
                          TTMSFMXTableView(ListaComandas.Tiles[MensajesOperacionesComanda.Tag].DataObject).OnItemCustomize := Nil;

                          FreeAndNil(ListaComandas.Tiles[MensajesOperacionesComanda.Tag].DataObject);
                          //TTMSFMXTableView(ListaComandas.Tiles[MensajesOperacionesComanda.Tag].DataObject).Destroy;
                     End;

                     // Borramos la comanda
                     ListaComandas.Tiles.Delete(MensajesOperacionesComanda.Tag);

Romero_Parra_Alejandro · July 15, 2022, 11:11pm

Hello again

It's been 12 days without any help or support, why?

Pieter_Scheldeman · July 16, 2022, 12:55am

Please understand that working out a case like this takes time, it’s a case that allocates quite a significant amount of time and is actually something that’s considered a custom support case, it’s working out a sample that demonstrates how to achieve adding and managing controls in tiles and not a bug or exception.

Romero_Parra_Alejandro · July 19, 2022, 10:50pm

Hello

I'm still waiting for answers, my questions was very well formulated and you just excuse with "ongoing workload"

Now it's been added 4 more days waiting

Pieter_Scheldeman · July 20, 2022, 7:34am

"ongoing workload" is not an excuse, we have many customers and many technical support questions. We want to deliver quality support and bug fixing gets priority. Next to support, we are working on improving our products on a daily basis, implementing new features. Again, this takes time. The above case is something we encounter on a daily basis. Our initial response was posted on the same day the question was asked, but unfortunately it was not sufficient. I have now relooked at this, and especially shifted my work to handle this case.

Sample.zip (8.7 KB)

Romero_Parra_Alejandro · July 29, 2022, 7:33am

Hello

Thanks a lot for the sample, I still experience troubles with the TileList after I free the selected "tile".

Captura

Sometimes gave me the next error: cannot assign a tbitmap to a tbrush

I coded the on "CustomizeTile" event in order to color the tile and put three new objects at the bottom of every tile, two button that fires a different event and a caption.

Captura3

Can you point me in the right direction please?

Pieter_Scheldeman · July 29, 2022, 9:33am

Without seeing the complete code, it's difficult to guess what is going on.

Romero_Parra_Alejandro · July 30, 2022, 3:11pm

Hello again Pieter

It seems I started solving my issues, there are few of them incredible but true

The TTMSFMXTaskDialog used on the image above create errors after the ondialogbuttonclick fires, you need to test it on your sample

Romero_Parra_Alejandro · August 6, 2022, 12:45am

Hello again

Next code won't work:

TMSFMXTileList1.NeedStyleLookup;
TMSFMXTileList1.ApplyStyleLookup;
TMSFMXTileList1.GetContentListAnim.Duration := 0;

I need your help because my solution is based on Android and iOS, both cases the "animation" is very slow so I need to turn it off but I don't know how.

Thanks