About placing tiles on TUniPanel

[elGringo]

Hi, dear all. Doing showcase tiles.

 

Having

 

uUniShop.Client.Form - Application Form Unit; pTiles is TUniPanel for tiles

uUniShop.Client.Form.MC - ModelController Unit - Free DataModule which is created on create of form like this further

uUniShop.Product.Frame - is the unit which contan tile (tunipanel) on the frame

FMC:=TUniShopClientFormMC.Create(Self); // In Application Form on Create

Tested following code for placing 20 tiles on TUniPanel - All Ok. 

procedure TUniShopClientForm.BuildManyTiles;
var
  Tile: TProductFrame;
  i: Integer;
  x: Integer;
  y: Integer;
  PictureWidth,PictureHeight:integer;
begin
//

  PictureWidth:=250;
  PictureHeight:=320;

   x:=-250+10;
   y:=10;


for i := 0 to 20 do  begin

Tile:=TProductFrame.Create(Self);
Tile.Name:=Tile.Name+i.ToString();
Tile.Parent:=pTiles;

Inc(x,PictureWidth+20); // adding width

    if x+PictureWidth<pTiles.ClientWidth then begin

     Tile.Left:=x;
     Tile.Top:=y;
     Tile.Show;

    end else

    // moving vertically

    // new row
    begin

      x:=10+20;
      Inc(y,PictureHeight+20); // adding height

      Tile.Left:=x;
      Tile.Top:=y;


      Tile.Show;


     // increasing parent panel height if needed
     if Tile.Top+Tile.Height>pTiles.Height then
     pTiles.Height:=Tile.Top+Tile.Height+100;

    end;


end;


end;

If to put the same code to MC

procedure TUniShopClientFormMC.PositionTiles;
var
  Tile: TProductFrame;
  i: Integer;
  x: Integer;
  y: Integer;
  TileWidth,TileHeight:integer;
  ptiles:tunipanel;
begin
//
  TileWidth:=250;
  TileHeight:=320;

   x:=-250+10;
   y:=10;

pTiles:=ClientForm_UnitVar.pTiles;
Tile.Parent:=pTiles;

for i := 0 to 10 do  begin


Tile:=TProductFrame.Create(Self);
Tile.Name:=Tile.Name+i.ToString();


    Inc(x,TileWidth+20); // adding width

        if x+TileWidth<pTiles.ClientWidth then begin

         Tile.Left:=x;
         Tile.Top:=y;


         Tile.Show;

        end else

        // moving vertically

        // new row
        begin

          x:=10+20;
          Inc(y,TileHeight+20); // adding height

          Tile.Left:=x;
          Tile.Top:=y;


          Tile.Show;


         // increasing parent panel height if needed
         if Tile.Top+Tile.Height>pTiles.Height then
         pTiles.Height:=Tile.Top+Tile.Height+100;

    //     pTiles.Height:=y+PictureHeight+5;



        end;





end;


end;

and call it like

FMC.PositionTiles;

panel is increased but no tiles visible

 

See pics

 

What am I doing wrong? i just tried to separate logic from code...

 

p.s. i think that if I will put code to the form all will work - but it will be mess to mix logic and interface. 

[Sherzod]

Hi,

 

If it's not difficult for you, can you make a test case for this?

[elGringo]

Ok... 20 min

[jaromir]

ElGringo. I don't know Your system size - but in my opinion building gui like this is not good solution. It will work slowly due to many visual components rendering.

I resolve this by uni html frame. It very easy to generate and display HTML with thumbnails - links, with custom css - as You wish.

It works like a charm.

[Sherzod]

Also you can analyze these examples I think:

 

http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/view/chooser/chooser.html

http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/view/animated-dataview.html

[elGringo]

 

jaromir could you give example?

 

[elGringo]

DD, doing test case, thnks...

[elGringo]

testCase...

https://yadi.sk/d/BtMy_8RA3GKib7

 

[Sherzod]

Ok...

[elGringo]

I believe will do showcase on clear js one day ))) But for the moment I just need to finish the order with the tools I already learned.

[Sherzod]

procedure TMainMC.BuildManyTiles;

 

Tile:=TProductFrame.Create(ClientForm_UnitVar);

[elGringo]

Why are you so clever?))) How did you get to do that? You had a similar case?

It is not obvious...

[elGringo]

It really works! Thanks!

[elGringo]

I liked your example

http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/view/animated-dataview.js

 

but it is not clear for me how to load data from db to this component, I see data section

Ext.onReady(function() {
    //data to be loaded into the ArrayStore
    var data = [
        [true,  false, 1,  "LG KS360", 54, "240 x 320 pixels", "2 Megapixel", "Pink", "Slider", 359, 2.400000],
        [true,  true,  2,  "Sony Ericsson C510a Cyber-shot", 180, "320 x 240 pixels", "3.2 Megapixel", "Future black", "Candy bar", 11, 0.000000],
        [true,  true,  3,  "LG PRADA KE850", 155, "240 x 400 pixels", "2 Megapixel", "Black", "Candy bar", 113, 0.000000],
        [true,  true,  4,  "Nokia N900 Smartphone 32 GB", 499, "800 x 480 pixels", "5 Megapixel", "( the image of the product displayed may be of a different color )", "Slider", 320, 3.500000],
        [true,  false, 5,  "Motorola RAZR V3", 65, "96 x 80 pixels", "0.3 Megapixel", "Silver", "Folder type phone", 5, 2.200000],
        [true,  true,  6,  "LG KC910 Renoir", 242, "240 x 400 pixels", "8 Megapixel", "Black", "Candy bar", 79, 0.000000],
        [true,  true,  7,  "BlackBerry Curve 8520 BlackBerry", 299, "320 x 240 pixels", "2 Megapixel", "Frost", "Candy bar", 320, 2.640000],
        [true,  true,  8,  "Sony Ericsson W580i Walkman", 120, "240 x 320 pixels", "2 Megapixel", "Urban gray", "Slider", 1, 0.000000],
        [true,  true,  9,  "Nokia E63 Smartphone 110 MB", 170, "320 x 240 pixels", "2 Megapixel", "Ultramarine blue", "Candy bar", 319, 2.360000],
        [true,  true,  10, "Sony Ericsson W705a Walkman", 274, "320 x 240 pixels", "3.2 Megapixel", "Luxury silver", "Slider", 5, 0.000000],
        [false, false, 11, "Nokia 5310 XpressMusic", 140, "320 x 240 pixels", "2 Megapixel", "Blue", "Candy bar", 344, 2.000000],
        [false, true,  12, "Motorola SLVR L6i", 50, "128 x 160 pixels", "", "Black", "Candy bar", 38, 0.000000],
        [false, true,  13, "T-Mobile Sidekick 3 Smartphone 64 MB", 75, "240 x 160 pixels", "1.3 Megapixel", "", "Sidekick", 115, 0.000000],
        [false, true,  14, "Audiovox CDM8600", 5, "", "", "", "Folder type phone", 1, 0.000000],
        [false, true,  15, "Nokia N85", 315, "320 x 240 pixels", "5 Megapixel", "Copper", "Dual slider", 143, 2.600000],
        [false, true,  16, "Sony Ericsson XPERIA X1", 399, "800 x 480 pixels", "3.2 Megapixel", "Solid black", "Slider", 14, 0.000000],
        [false, true,  17, "Motorola W377", 77, "128 x 160 pixels", "0.3 Megapixel", "", "Folder type phone", 35, 0.000000],
        [true,  true,  18, "LG Xenon GR500", 1, "240 x 400 pixels", "2 Megapixel", "Red", "Slider", 658, 2.800000],
        [true,  false, 19, "BlackBerry Curve 8900 BlackBerry", 349, "480 x 360 pixels", "3.2 Megapixel", "", "Candy bar", 21, 2.440000],
        [true,  false, 20, "Samsung SGH U600 Ultra Edition 10.9", 135, "240 x 320 pixels", "3.2 Megapixel", "", "Slider", 169, 2.200000]
    ];

which is in json format as I can see

 

So, main idea

 

 -use HTML frame

 -extract data from db

 -convert it to json format

 -insert this part of code to HTML frame among other code from example?

[Sherzod]

Need to analyze

[elGringo]

Forget it ))) 

[itognet]

I would love to see your test case, but the link is broken :/