I'm working on creating a custom component which displays a image at the top of the canvas, and loops through a passed array collection, displaying each row of the array collection in a item renderer. So the component should look like this (see attached image).
As you can see from this image the header is a image itself, this will differ every instance of the panel, there should be 3 of these panels on the page. Then each row of data is a item renderer displaying the data provided from a array collection of value object. If there are 4 items in this array collection then the panel should show 4 rows, if there are 2 row in the array then the panel will display 2 rows. Also the height of the panel will dynamically change depending on the number of rows to show.
I was thinking of extending a Canvas component, and then passing in the image URL and trying to load and draw the image dynamically, then I was thinking of using the Drawing API to create the rectangle shape using the drawRoundRectComplex() of the graphics class.
The problems I see with this is that I don't think the drawn rectangle shape can re-draw itself to show the change in height when more or less row of data need to be be displayed.
Another option I have been thinking about is extending the Panel class to create my component, this may be better for handling the height resizing, but I'm not sure it can support the look of this component (the header image and the three rounded corners).
Could anyone give me some advice on what would be the better option for creating this component.