elGringo Posted March 24, 2017 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 24, 2017 Share Posted March 24, 2017 Hi, If it's not difficult for you, can you make a test case for this? Quote Link to comment Share on other sites More sharing options...
elGringo Posted March 24, 2017 Author Share Posted March 24, 2017 Ok... 20 min Quote Link to comment Share on other sites More sharing options...
jaromir Posted March 24, 2017 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 24, 2017 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
elGringo Posted March 24, 2017 Author Share Posted March 24, 2017 jaromir could you give example? Quote Link to comment Share on other sites More sharing options...
elGringo Posted March 24, 2017 Author Share Posted March 24, 2017 DD, doing test case, thnks... Quote Link to comment Share on other sites More sharing options...
elGringo Posted March 24, 2017 Author Share Posted March 24, 2017 testCase... https://yadi.sk/d/BtMy_8RA3GKib7 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 24, 2017 Share Posted March 24, 2017 Ok... Quote Link to comment Share on other sites More sharing options...
elGringo Posted March 24, 2017 Author Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 24, 2017 Share Posted March 24, 2017 procedure TMainMC.BuildManyTiles; Tile:=TProductFrame.Create(ClientForm_UnitVar); Quote Link to comment Share on other sites More sharing options...
elGringo Posted March 24, 2017 Author Share Posted March 24, 2017 Why are you so clever?))) How did you get to do that? You had a similar case? It is not obvious... Quote Link to comment Share on other sites More sharing options...
elGringo Posted March 24, 2017 Author Share Posted March 24, 2017 It really works! Thanks! Quote Link to comment Share on other sites More sharing options...
elGringo Posted March 24, 2017 Author Share Posted 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? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 24, 2017 Share Posted March 24, 2017 Need to analyze Quote Link to comment Share on other sites More sharing options...
elGringo Posted March 24, 2017 Author Share Posted March 24, 2017 Forget it ))) Quote Link to comment Share on other sites More sharing options...
itognet Posted May 8, 2017 Share Posted May 8, 2017 I would love to see your test case, but the link is broken :/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.