RE: [flexcoders] Re: Flex 4 CSS
Alex, I have no idea of what you just said. I'm converting my one and only Flex app to 4 in the hopes that management will see an advantage to using that. Once (and if) it gets to 4, I'm going to try to get 4.5 so I can make it into an app (my distant dream). Doing things in net is OK, but I'd rather stick with Flex if I can. I'm just dying on the completely different product from 3 and don't have anywhere to turn but here. Even simple things like I can't see in design view half the application or you have to jump through hoops to get a scroll bar to appear. I think our contract with Adobe only has support for LiveCycle. So it's hit or miss on forums. You probably hear that a lot and I appreciate the time you do spend helping those of us that are lost at sea. Jerry From: flexcoders@yahoogroups.com [mailto:flexcoders@yahoogroups.com] On Behalf Of Alex Harui Sent: Wednesday, August 24, 2011 8:10 PM To: flexcoders@yahoogroups.com Subject: Re: [flexcoders] Re: Flex 4 CSS You can always use an image/BitmapImage as one of the children/elements of a container. Doing so affects value of numChildren/numElements and potentially other things in case it matters, and limits re-usability. If you can do that, you might as well add it to the skin. On 8/24/11 5:55 AM, Davidson, Jerry jerry.david...@illinois.gov wrote: Thanks. Now I know. I still need the effect, so can I put an image out there and write over it (z-order)? There would be two lines of text over the image. From: flexcoders@yahoogroups.com [mailto:flexcoders@yahoogroups.com] On Behalf Of Alex Harui Sent: Monday, August 22, 2011 11:35 PM To: flexcoders@yahoogroups.com Subject: Re: [flexcoders] Re: Flex 4 CSS Jerry, the spark theme doesn't support backgroundImage. Every capability has a cost, and we chose not to make the container backgrounds as heavy as the Halo theme. It doesn't matter how many lines of code are in the skin if it doesn't include the logic to load and position images. -- Alex Harui Flex SDK Team Adobe System, Inc. http://blogs.adobe.com/aharui
Re: [flexcoders] Re: Flex 4 CSS
FlexExamples.com might have some examples. Flex 4 is pretty different especially around skinning and styles. It was deemed the right thing to do to enable designers to control every pixel without having to learn code. There are plenty of folks on this forum who are willing to help. On 8/25/11 5:50 AM, Davidson, Jerry jerry.david...@illinois.gov wrote: Alex, I have no idea of what you just said. I’m converting my one and only Flex app to 4 in the hopes that management will see an advantage to using that. Once (and if) it gets to 4, I’m going to try to get 4.5 so I can make it into an app (my distant dream). Doing things in net is OK, but I’d rather stick with Flex if I can. I’m just dying on the completely different product from 3 and don’t have anywhere to turn but here. Even simple things like I can’t see in design view half the application or you have to jump through hoops to get a scroll bar to appear. I think our contract with Adobe only has support for LiveCycle. So it’s hit or miss on forums. You probably hear that a lot and I appreciate the time you do spend helping those of us that are lost at sea. Jerry From: flexcoders@yahoogroups.com [mailto:flexcoders@yahoogroups.com] On Behalf Of Alex Harui Sent: Wednesday, August 24, 2011 8:10 PM To: flexcoders@yahoogroups.com Subject: Re: [flexcoders] Re: Flex 4 CSS You can always use an image/BitmapImage as one of the children/elements of a container. Doing so affects value of numChildren/numElements and potentially other things in case it matters, and limits re-usability. If you can do that, you might as well add it to the skin. On 8/24/11 5:55 AM, Davidson, Jerry jerry.david...@illinois.gov wrote: Thanks. Now I know. I still need the effect, so can I put an image out there and write over it (z-order)? There would be two lines of text over the image. From: flexcoders@yahoogroups.com [mailto:flexcoders@yahoogroups.com] On Behalf Of Alex Harui Sent: Monday, August 22, 2011 11:35 PM To: flexcoders@yahoogroups.com Subject: Re: [flexcoders] Re: Flex 4 CSS Jerry, the spark theme doesn’t support backgroundImage. Every capability has a cost, and we chose not to make the container backgrounds as heavy as the Halo theme. It doesn’t matter how many lines of code are in the skin if it doesn’t include the logic to load and position images. -- Alex Harui Flex SDK Team Adobe System, Inc. http://blogs.adobe.com/aharui
Re: [flexcoders] Re: Flex 4 CSS
I explained in the previous reply. Everything has a cost, and we chose not to
pack asset loading and positioning into the background of every container. It
is pretty straightforward to add it in a custom skin for the few containers
that need it.
On 8/22/11 10:16 PM, The Real Napster myad...@gmail.com wrote:
Hello Alex,
Thanks for the note. I am wondering why new release build of flex/spark does't
have this feature? Its up to user whether to use it or not. Background on
components is the basic requirement of many clients now a days.
Hope in future adobe will implement/add this feature. Thanks for the reply Alex.
Regards,
Myadi
On Tue, Aug 23, 2011 at 10:05 AM, Alex Harui aha...@adobe.com wrote:
Jerry, the spark theme doesn’t support backgroundImage. Every capability has a
cost, and we chose not to make the container backgrounds as heavy as the Halo
theme. It doesn’t matter how many lines of code are in the skin if it doesn’t
include the logic to load and position images.
On 8/22/11 7:27 AM, Davidson, Jerry jerry.david...@illinois.gov
http://jerry.david...@illinois.gov wrote:
I tried both BorderContainer and Panel, but neither would display an image. I
can get the background color to change, but not add an image.
Perhaps a skin will work, but I can’t get it to work so far. I’ve replaced the
two lines of CSS with the default class “panel skin” which is over 300 lines
long, includes three overrides and other methods and still doesn’t seem to have
an ability to add an image.
Who would have guessed a simple image would bring Flex to its knees?
From: flexcoders@yahoogroups.com http://flexcoders@yahoogroups.com
[mailto:flexcoders@yahoogroups.com] On Behalf Of valdhor
Sent: Friday, August 19, 2011 1:59 PM
To: flexcoders@yahoogroups.com http://flexcoders@yahoogroups.com
Subject: [flexcoders] Re: Flex 4 CSS
Instead of using mx:Canvas try using s:BorderContainer.
?xml version=1.0 encoding=utf-8?
s:Application xmlns:fx=http://ns.adobe.com/mxml/2009;
xmlns:s=library://ns.adobe.com/flex/spark
http://ns.adobe.com/flex/spark
xmlns:mx=library://ns.adobe.com/flex/mx http://ns.adobe.com/flex/mx
fx:Style
.bgImage
{
color: #DEDACF;
contentBackgroundColor: #DEDACF;
backgroundImage: Embed(BannerBackground.jpg);
backgroundImageFillMode: repeat;
}
/fx:Style
s:BorderContainer width=100% height=600 styleName=bgImage
s:Label text=CSS Background test /
/s:BorderContainer
/s:Application
--
Alex Harui
Flex SDK Team
Adobe System, Inc.
http://blogs.adobe.com/aharui
RE: [flexcoders] Re: Flex 4 CSS
Thanks. Now I know. I still need the effect, so can I put an image out there and write over it (z-order)? There would be two lines of text over the image. From: flexcoders@yahoogroups.com [mailto:flexcoders@yahoogroups.com] On Behalf Of Alex Harui Sent: Monday, August 22, 2011 11:35 PM To: flexcoders@yahoogroups.com Subject: Re: [flexcoders] Re: Flex 4 CSS Jerry, the spark theme doesn't support backgroundImage. Every capability has a cost, and we chose not to make the container backgrounds as heavy as the Halo theme. It doesn't matter how many lines of code are in the skin if it doesn't include the logic to load and position images.
Re: [flexcoders] Re: Flex 4 CSS
You can always use an image/BitmapImage as one of the children/elements of a container. Doing so affects value of numChildren/numElements and potentially other things in case it matters, and limits re-usability. If you can do that, you might as well add it to the skin. On 8/24/11 5:55 AM, Davidson, Jerry jerry.david...@illinois.gov wrote: Thanks. Now I know. I still need the effect, so can I put an image out there and write over it (z-order)? There would be two lines of text over the image. From: flexcoders@yahoogroups.com [mailto:flexcoders@yahoogroups.com] On Behalf Of Alex Harui Sent: Monday, August 22, 2011 11:35 PM To: flexcoders@yahoogroups.com Subject: Re: [flexcoders] Re: Flex 4 CSS Jerry, the spark theme doesn’t support backgroundImage. Every capability has a cost, and we chose not to make the container backgrounds as heavy as the Halo theme. It doesn’t matter how many lines of code are in the skin if it doesn’t include the logic to load and position images. -- Alex Harui Flex SDK Team Adobe System, Inc. http://blogs.adobe.com/aharui
[flexcoders] Re: Flex 4 CSS
Have you tried; This is using flex 4, the following workaround;
Where the image would be the same size as the container
mx:Image id=backgroundImage styleName=backgroundImage
alpha=.8 source={backgroundImage.getStyle('source')}
maintainAspectRatio=false/
then in the CSS, you add the following;
mx|Image.backgroundImage{
source: Embed(/assets/images/someimage.png);
width:580;
height:246;
x:114;
y:161;
border: 1px green solid;
}
You can extend bordercontainer and add code to handle a style change;
public override function styleChanged(styleProp:String):void {
// code to handle element properties and not just styles
// such as x, y, height and width handled in css
}
If you need code example, then just write back to me and I will supply with
what you need, as time permits.
--- In flexcoders@yahoogroups.com, Davidson, Jerry jerry.davidson@... wrote:
I tried both BorderContainer and Panel, but neither would display an
image. I can get the background color to change, but not add an image.
Perhaps a skin will work, but I can't get it to work so far. I've
replaced the two lines of CSS with the default class panel skin which
is over 300 lines long, includes three overrides and other methods and
still doesn't seem to have an ability to add an image.
Who would have guessed a simple image would bring Flex to its knees?
From: flexcoders@yahoogroups.com [mailto:flexcoders@yahoogroups.com] On
Behalf Of valdhor
Sent: Friday, August 19, 2011 1:59 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: Flex 4 CSS
Instead of using mx:Canvas try using s:BorderContainer.
?xml version=1.0 encoding=utf-8?
s:Application xmlns:fx=http://ns.adobe.com/mxml/2009;
xmlns:s=library://ns.adobe.com/flex/spark
xmlns:mx=library://ns.adobe.com/flex/mx
fx:Style
.bgImage
{
color: #DEDACF;
contentBackgroundColor: #DEDACF;
backgroundImage: Embed(BannerBackground.jpg);
backgroundImageFillMode: repeat;
}
/fx:Style
s:BorderContainer width=100% height=600 styleName=bgImage
s:Label text=CSS Background test /
/s:BorderContainer
/s:Application
Re: [flexcoders] Re: Flex 4 CSS
I too have tried in many ways, but could not resolve the problem. Doing few
more tests.
BTW one option is to use addChild();
Something like this.
var image : Image = new Image();
image.source = FSCalc/images/BannerBackground.jpg;
image.scaleContent = true;
image.maintainAspectRatio =false;
image.percentWidth = 100;
image.percentHeight = 100;
PictureBox.addChild(image);
I am eyeing on this post. All the best guys
On Mon, Aug 22, 2011 at 7:57 PM, Davidson, Jerry
jerry.david...@illinois.gov wrote:
**
I tried both BorderContainer and Panel, but neither would display an
image. I can get the background color to change, but not add an image.***
*
** **
Perhaps a skin will work, but I can’t get it to work so far. I’ve replaced
the two lines of CSS with the default class “panel skin” which is over 300
lines long, includes three overrides and other methods and still doesn’t
seem to have an ability to add an image.
** **
Who would have guessed a simple image would bring Flex to its knees?
** **
** **
** **
*From:* flexcoders@yahoogroups.com [mailto:flexcoders@yahoogroups.com] *On
Behalf Of *valdhor
*Sent:* Friday, August 19, 2011 1:59 PM
*To:* flexcoders@yahoogroups.com
*Subject:* [flexcoders] Re: Flex 4 CSS
** **
Instead of using mx:Canvas try using s:BorderContainer.
?xml version=1.0 encoding=utf-8?
s:Application xmlns:fx=http://ns.adobe.com/mxml/2009;
xmlns:s=library://ns.adobe.com/flex/spark
xmlns:mx=library://ns.adobe.com/flex/mx
fx:Style
.bgImage
{
color: #DEDACF;
contentBackgroundColor: #DEDACF;
backgroundImage: Embed(BannerBackground.jpg);
backgroundImageFillMode: repeat;
}
/fx:Style
s:BorderContainer width=100% height=600 styleName=bgImage
s:Label text=CSS Background test /
/s:BorderContainer
/s:Application
Re: [flexcoders] Re: Flex 4 CSS
Hello Alex,
Thanks for the note. I am wondering why new release build of flex/spark
does't have this feature? Its up to user whether to use it or not.
Background on components is the basic requirement of many clients now a
days.
Hope in future adobe will implement/add this feature. Thanks for the reply
Alex.
Regards,
Myadi
On Tue, Aug 23, 2011 at 10:05 AM, Alex Harui aha...@adobe.com wrote:
**
Jerry, the spark theme doesn’t support backgroundImage. Every capability
has a cost, and we chose not to make the container backgrounds as heavy as
the Halo theme. It doesn’t matter how many lines of code are in the skin if
it doesn’t include the logic to load and position images.
On 8/22/11 7:27 AM, Davidson, Jerry jerry.david...@illinois.gov wrote:
I tried both BorderContainer and Panel, but neither would display an image.
I can get the background color to change, but not add an image.
Perhaps a skin will work, but I can’t get it to work so far. I’ve replaced
the two lines of CSS with the default class “panel skin” which is over 300
lines long, includes three overrides and other methods and still doesn’t
seem to have an ability to add an image.
Who would have guessed a simple image would bring Flex to its knees?
*From:* flexcoders@yahoogroups.com
[mailto:flexcoders@yahoogroups.comflexcoders@yahoogroups.com]
*On Behalf Of *valdhor
*Sent:* Friday, August 19, 2011 1:59 PM
*To:* flexcoders@yahoogroups.com
*Subject:* [flexcoders] Re: Flex 4 CSS
Instead of using mx:Canvas try using s:BorderContainer.
?xml version=1.0 encoding=utf-8?
s:Application xmlns:fx=http://ns.adobe.com/mxml/2009;
xmlns:s=library://ns.adobe.com/flex/spark
xmlns:mx=library://ns.adobe.com/flex/mx
fx:Style
.bgImage
{
color: #DEDACF;
contentBackgroundColor: #DEDACF;
backgroundImage: Embed(BannerBackground.jpg);
backgroundImageFillMode: repeat;
}
/fx:Style
s:BorderContainer width=100% height=600 styleName=bgImage
s:Label text=CSS Background test /
/s:BorderContainer
/s:Application
--
Alex Harui
Flex SDK Team
Adobe System, Inc.
http://blogs.adobe.com/aharui
RE: [flexcoders] Re: Flex 4 CSS
I tried both BorderContainer and Panel, but neither would display an
image. I can get the background color to change, but not add an image.
Perhaps a skin will work, but I can't get it to work so far. I've
replaced the two lines of CSS with the default class panel skin which
is over 300 lines long, includes three overrides and other methods and
still doesn't seem to have an ability to add an image.
Who would have guessed a simple image would bring Flex to its knees?
From: flexcoders@yahoogroups.com [mailto:flexcoders@yahoogroups.com] On
Behalf Of valdhor
Sent: Friday, August 19, 2011 1:59 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: Flex 4 CSS
Instead of using mx:Canvas try using s:BorderContainer.
?xml version=1.0 encoding=utf-8?
s:Application xmlns:fx=http://ns.adobe.com/mxml/2009;
xmlns:s=library://ns.adobe.com/flex/spark
xmlns:mx=library://ns.adobe.com/flex/mx
fx:Style
.bgImage
{
color: #DEDACF;
contentBackgroundColor: #DEDACF;
backgroundImage: Embed(BannerBackground.jpg);
backgroundImageFillMode: repeat;
}
/fx:Style
s:BorderContainer width=100% height=600 styleName=bgImage
s:Label text=CSS Background test /
/s:BorderContainer
/s:Application
Re: [flexcoders] Re: Flex 4 CSS
Jerry, the spark theme doesn’t support backgroundImage. Every capability has a
cost, and we chose not to make the container backgrounds as heavy as the Halo
theme. It doesn’t matter how many lines of code are in the skin if it doesn’t
include the logic to load and position images.
On 8/22/11 7:27 AM, Davidson, Jerry jerry.david...@illinois.gov wrote:
I tried both BorderContainer and Panel, but neither would display an image. I
can get the background color to change, but not add an image.
Perhaps a skin will work, but I can’t get it to work so far. I’ve replaced the
two lines of CSS with the default class “panel skin” which is over 300 lines
long, includes three overrides and other methods and still doesn’t seem to have
an ability to add an image.
Who would have guessed a simple image would bring Flex to its knees?
From: flexcoders@yahoogroups.com [mailto:flexcoders@yahoogroups.com] On Behalf
Of valdhor
Sent: Friday, August 19, 2011 1:59 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: Flex 4 CSS
Instead of using mx:Canvas try using s:BorderContainer.
?xml version=1.0 encoding=utf-8?
s:Application xmlns:fx=http://ns.adobe.com/mxml/2009;
xmlns:s=library://ns.adobe.com/flex/spark
xmlns:mx=library://ns.adobe.com/flex/mx
fx:Style
.bgImage
{
color: #DEDACF;
contentBackgroundColor: #DEDACF;
backgroundImage: Embed(BannerBackground.jpg);
backgroundImageFillMode: repeat;
}
/fx:Style
s:BorderContainer width=100% height=600 styleName=bgImage
s:Label text=CSS Background test /
/s:BorderContainer
/s:Application
--
Alex Harui
Flex SDK Team
Adobe System, Inc.
http://blogs.adobe.com/aharui
[flexcoders] Re: Flex 4 CSS
Instead of using mx:Canvas try using s:BorderContainer.
?xml version=1.0 encoding=utf-8?
s:Application xmlns:fx=http://ns.adobe.com/mxml/2009;
xmlns:s=library://ns.adobe.com/flex/spark
xmlns:mx=library://ns.adobe.com/flex/mx
fx:Style
.bgImage
{
color: #DEDACF;
contentBackgroundColor: #DEDACF;
backgroundImage: Embed(BannerBackground.jpg);
backgroundImageFillMode: repeat;
}
/fx:Style
s:BorderContainer width=100% height=600 styleName=bgImage
s:Label text=CSS Background test /
/s:BorderContainer
/s:Application
--- In flexcoders@yahoogroups.com, Davidson, Jerry
jerry.davidson@... wrote:
Alex, you might be Flex harUI in the other forum. But I'm going to
ask the question here as no one there seems to know the answer.
I'm trying to convert a Flex 3 application to Flex 4. I find CSS
isn't
working under Flex 4 as it did before. What I want to do is set a
back
ground image on a canvas object. Here is that object:
mx:Canvas
xmlns:mx=http://www.adobe.com/2006/mxml;
xmlns:s=library://ns.adobe.com/flex/spark
styleName=bgImage
backgroundColor=#DEDACF
borderColor=#DEDACF
width=100%
horizontalScrollPolicy=off verticalScrollPolicy=off
Here is bgImage:
.bgImage {
/*background-image: /src/images/BannerBackground.jpg; */
/*background-image: src/images/BannerBackground.jpg; */
/*background-image: images/BannerBackground.jpg; */
/*background-image: /images/BannerBackground.jpg; */
/*background-image: ../images/BannerBackground.jpg; */
/*background-image: ../BannerBackground.jpg; */
/*background-image: FSCalc/images/BannerBackground.jpg; */
/*background-image: url(images/BannerBackground.jpg); */
/*background-image: url(images/BannerBackground.jpg); */
/*background-image: url(/images/BannerBackground.jpg); */
/*background-image: url(../images/BannerBackground.jpg); */
background-image: url(FSCalc/images/BannerBackground.jpg);
/*background-image: Embed(images/BannerBackground.jpg); */
/*background-image: Embed(/images/BannerBackground.jpg); */
/*background-image: Embed(../images/BannerBackground.jpg); */
/*background-image: Embed(source=images/BannerBackground.jpg);
*/
/*background-image: Embed(source=/images/BannerBackground.jpg);
*/
/*background-image:
Embed(source=../images/BannerBackground.jpg);
*/
/*background-image:
Embed(source=src/images/BannerBackground.jpg);
*/
text-align: right;
border-style: solid;
}
Obviously, many tests have not resulted in something that works. The
directory structure as I see it in Flash is:
FSCalc
src
css
DHSclasses
images
scripts
If I change the color in the CSS class, I do see the color change in
the
canvas object. Therefore, I know that the CSS is available to the
component.
Any ideas anyone?
