5

In the Spark BorderContainer component the border sides and corner radius styles were not copied over from the halo component set (see here).

Specifically:

  • borderSides (left, top, bottom, right)
  • cornerRadius(TL/TR/BL/BR)
  • borderThickness(Left/Right/Top/Bottom) * optional
  • backgroundAttachment (fixed, scroll) * optional

I've been trying to add them manually but I'm having some difficulty.

I've brought over some code from the HaloBorder.as skin and it is sortof working except it is appearing behind the background fill.

It's a lot of code so I pasted it here.

BTW That code was my first approach. But it looks like I could use the insetPath that is already there to draw border. That would be better since it allows me to set all the stroke properties but I don't know how to write path data so I'd have to learn that as well. But at this point I'd be happy to get anything working.

Update:
I found a class that has some methods for generating curved border path data. Look in spark/skins/spark/TabBarButtonSkin.mxml. You can see the code here, in the createPathData() method.

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
  • If I added more bounty would anyone take this? – 1.21 gigawatts Sep 27 '15 at 09:41
  • Do you just need to add the missing properties to the Spark container, or do you want it to look exactly like the Halo component as well? – approxiblue Sep 28 '15 at 13:41
  • I need it to support border sides and corner radius for each corner. I don't remember what the halo component looked like but I can check when I get home. I'm trying to make it work and look like an HTML div with border sides and corner radius. – 1.21 gigawatts Sep 28 '15 at 21:33
  • Do you need to set the radius of each corner separately? – approxiblue Sep 29 '15 at 18:14
  • A single style or property would work. CornerRadius = "8" or "8 4 8 4" where each value is a separate corner. – 1.21 gigawatts Sep 29 '15 at 18:26
  • What flex version do you use? In 4.6, spark.components.BorderContainer has the properties you need. – approxiblue Sep 29 '15 at 19:17
  • I'm using 4.6. I'll check again but I don't remember seeing these styles or properties. – 1.21 gigawatts Sep 29 '15 at 19:53
  • I'm using code completion on the s:BorderContainer and it doesn't show borderSides. It does show cornerRadius but that looks like it accepts a Number meaning it only supports setting the radius for all sides or none. There is borderWeight but that accepts only one value while borderThickness supports top, left, right and bottom values. It looks like backgroundImageFillMode has clipped, scale & repeat. In fact this is better in my opinion. The rest of the styles are still important. BorderThickness being the least. An acceptable solution would have borderSides and cornerRadius. – 1.21 gigawatts Sep 29 '15 at 20:05
  • Hey, this is probably a stupid idea, but it is still an idea. Have you tried to add something as the !important ? I don't know if there is an equivalent and if it can help, i didn't understood that much your code. – Axel Lavielle Sep 30 '15 at 08:07
  • @AxelLavielle Flex CSS doesn't support !important. – approxiblue Oct 01 '15 at 15:00
  • I found out last night that Rect class supports separate corner radius. The properties are topRightCornerRadiusX and so on. This may help?? It helps me slightly. Still no border sides tho. – 1.21 gigawatts Oct 01 '15 at 19:14
  • I found a method in the TabBarButtonSkin that is used to draw borders with path data. It is not a complete solution but it looks like a good starting point. I added links in the post above. I would offer a bounty but it hasn't refunded me my previous bounty. Since this is the first I hope I get it refunded? – 1.21 gigawatts Oct 03 '15 at 07:20
  • Bounties are [non-refundable](http://stackoverflow.com/help/bounty) unfortunately. Are you still looking for a solution? – approxiblue Oct 06 '15 at 17:40
  • You would think you would get refunded if no solution was found. Yes, I'm still looking for an answer. – 1.21 gigawatts Oct 06 '15 at 20:15

0 Answers0