About placing tiles on TUniPanel

elGringo · March 24, 2017

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 · March 24, 2017

Hi,

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

elGringo · March 24, 2017

Ok... 20 min

jaromir · March 24, 2017

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 · March 24, 2017

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 · March 24, 2017

jaromir could you give example?

elGringo · March 24, 2017

DD, doing test case, thnks...

elGringo · March 24, 2017

testCase...

https://yadi.sk/d/BtMy_8RA3GKib7

Sherzod · March 24, 2017

Ok...

elGringo · March 24, 2017

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 · March 24, 2017

procedure TMainMC.BuildManyTiles;

Tile:=TProductFrame.Create(ClientForm_UnitVar);

elGringo · March 24, 2017

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

It is not obvious...

elGringo · March 24, 2017

It really works! Thanks!

elGringo · March 24, 2017

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 · March 24, 2017

Need to analyze

elGringo · March 24, 2017

Forget it )))

itognet · May 8, 2017

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

Sign In

About placing tiles on TUniPanel

Recommended Posts

elGringo

Sherzod

elGringo

jaromir

Sherzod

elGringo

elGringo

elGringo

Sherzod

elGringo

Sherzod

elGringo

elGringo

elGringo

Sherzod

elGringo

itognet

Join the conversation

Browse

Activity