0

I am working on a FLEX / AIR Spark list which lists a collection of images with differing width and height.

I am using a custom layout which works this way:

  • decide how many images can be fit in the current row based on their widths.

  • justify them in such a way that first image in the row obeys the "left" margin and the last image in the row obeys "right" margin, so with the "top" and "bottom" as specified by the user, let us say 10 pixels.

  • As an example, assuming that the current row has 4 images, the images 1 & 4 will have 10 pixels each as "left" margin "right" margin respectively. But the left and right gaps between 1-2, 2-3 & 3-4 will be equally divided based on the varying widths.

  • now i would like to draw a background that will fill the dynamic area. Please see the image below to get an idea:

Layout requirement Image

** In the image, The grey area is the background I would like to draw, and the colored rectangles represent images of differing widths and heights.**

  • the "rowHeight" is variable based on the maximum height of individual images within the row.

Issues:

a) Now I would like to draw a background (see the grey area in the pic) that fills the background area of the list. I know the current item's width & height, but I don't know the rowHeight decided by the layout, left and right margins between the images.

Something like:

bgRect:Rectangle = new rectangle ( 0, 0, (imgWidth + (LeftMargin/2) + (Right Margin/2) ), rowHeight)

b) How / where should the background be implemented? if i add the BG area within the item renderer based on the layout, again the layout will be relaid.

JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
Sathya Narayanan
  • 11
  • 3

2 Answers2

0

Children should be added in the createChildren method. Drawing (painting) the background should happen in updateDisplayList method.

flexicious.com
  • 1,601
  • 1
  • 13
  • 21
  • Hello , Thanks for your reply. The crux of the question is that the background rectangle needs to be created matching the layout information from aligning images of differing resolutions with varying rowHeights. I need to calculate the bounds of current background rectangle from the width & height of the previous row image and the one next to it.... How do i access this Layout related information from within the itemRenderer? – Sathya Narayanan Sep 16 '14 at 06:41
0

You can pass data to your itemrenderers via an itemrenderer factory. See - Flex - Sending a parameter to a custom ItemRenderer?.

var productRenderer:ClassFactory = new ClassFactory(ProductRenderer); productRenderer.properties = { showProductImage: true }; myList.itemRenderer = productRenderer;

Community
  • 1
  • 1
JTtheGeek
  • 1,707
  • 14
  • 17
  • Hello , Thanks for your reply. Please see my comment to , this is less about sending parameters to itemRenderers, but accessing the layout information from within an itemRenderer. Thanks. – Sathya Narayanan Sep 16 '14 at 06:45