It's interesting. If you set stage.scaleMode = StageScaleMode.EXACT_FIT; all components are resized when you resize the window, BUT there is a grey stripe at the bottom of the window that is not.
What does that mean?
By the way, is it possible to take that grey line/stripe off from the window?
Try to resize this window and you'll see what happens:
<?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*"
applicationComplete="initApplication(event)" width="800" height="600" preloaderChromeColor="#FFFCFC">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
private function initApplication( evt:FlexEvent):void{
stage.scaleMode = StageScaleMode.EXACT_FIT;
var timer:Timer = new Timer(3000);
timer.addEventListener( TimerEvent.TIMER, onTimer );
timer.start();
}
private function onTimer( evt:TimerEvent ):void{
this.width = 600;
trace(this.stage.stageWidth, this.stage.stageHeight);
}
]]>
</fx:Script>
<s:Button x="185" y="245" label="Button" width="112" height="61"/>
</s:WindowedApplication>
There is also a timer just for checking if the Stage's size is the same as the application window's one.
The gray stripe is the statusBar property of the WindowedApplication class. Turn it off by setting showStatusBar="false" inside the WindowedApplication tag.
That grey stripe at the bottom is the statusbar from the windows chrome, you need to set the 'systemChrome' tag to false in the app xml descriptor file to remove it or do showStatusBar="false".
Related
I created a panel in flex which will have 2 combo-boxes that will display system font family and font styles and when user selects any font family or style from the combo-box the font gets applied on the selected text layer. But when I try to apply few fonts for eg Euro sign then the text in the selected text layers become all rectangles. I found that Character panel of Photoshop does not apply the font(Euro sign) on the selected text layer.
Is there any method in flex which can help us detect whether a font is applicable on the selected text layer or not?
Thanks
For your Q. I need a method which can tell me either a system font can be applied or not?
Here I have sample where you can read System Font and check on combobox if that font is available in system font or not. Please find below code: -
<?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" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var systemFontsCollection:ArrayCollection = new ArrayCollection();
private function getSystemFont():void
{
var fonts:Array = Font.enumerateFonts(true).sortOn("fontName");
for (var i:int = 0; i < fonts.length; i++) {
systemFontsCollection.addItem(new String(fonts[i].fontName));
}
}
private function init():void
{
var fontName:String = fontName.selectedLabel;
if(systemFontsCollection.contains(fontName))
{
trace(" ----System Font is applied ----");
}
else{
trace(" ----System Font is NOT applied ----");
}
}
]]>
</fx:Script>
<mx:Form>
<mx:FormItem label="Font name:">
<mx:ComboBox id="fontName" change="init();" creationComplete="getSystemFont()">
<mx:dataProvider>
<fx:Array>
<fx:String>Arial</fx:String>
<fx:String>ArialEmbedded</fx:String>
<fx:String>Verdana</fx:String>
<fx:String>VerdanaEmbedded</fx:String>
</fx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
</mx:Form>
</s:Application>
I have AS3 script bitfade.text.steel returning type Sprite. It works in Flash environment but not in FLEX. In Flex it displays nothing. No errors appear. It looks like the attached code also works. I use Flex SDK 4.5
Can you give me a clue what the problem with this code might be?
English is not my native language.
If there are any errors please correct me.
Chris
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="creationComplete();" >
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import bitfade.text.steel;
import flash.display.Sprite;
import mx.core.UIComponent;
function creationComplete(){
var textSteel = new steel("config.xml");
if(textSteel is Sprite){
trace("it is a sprite");
}
//var textSteelName:String = getQualifiedClassName(textSteel);
//trace(textSteelName);
textSteel.x = 150;
trace("this is visible on the screen");
var sprite:Sprite = new Sprite();
sprite.graphics.beginFill(0xFFCC00);
sprite.graphics.drawCircle( 40, 40, 40 );
sprite.graphics.endFill();
var wrapper:UIComponent = new UIComponent();
wrapper.addChild(sprite);
wrapper.addChild(textSteel);
animationStage.addElement(wrapper);
}
]]>
</fx:Script>
<s:Group id="animationStage" visible="true" x="50" y="50">
<s:Label text="test">
</s:Label>
</s:Group>
</s:WindowedApplication>
If I switch your custom class to a Sprite, and draw something on it, it shows up. Therefore I Believe there is a bug within your steel class. A sprite won't have any size until something is inside it with a size. There is no indication of the code you've shown what happens inside your steel class.
My sample:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="creationComplete();">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
// import bitfade.text.steel;
import flash.display.Sprite;
import mx.core.UIComponent;
public function creationComplete():void{
var textSteel : Sprite = new Sprite();
if(textSteel is Sprite){
trace("it is a sprite");
}
//var textSteelName:String = getQualifiedClassName(textSteel);
//trace(textSteelName);
textSteel.x = 150;
// JH Code added new
textSteel.graphics.beginFill(0xFFCC00);
textSteel.graphics.drawRect(0,0,100,100);
textSteel.graphics.endFill();
trace("this is visible on the screen");
var sprite:Sprite = new Sprite();
sprite.graphics.beginFill(0xFFCC00);
sprite.graphics.drawCircle( 40, 40, 40 );
sprite.graphics.endFill();
var wrapper:UIComponent = new UIComponent();
wrapper.addChild(sprite);
wrapper.addChild(textSteel);
animationStage.addElement(wrapper);
}
]]>
</fx:Script>
<s:Group id="animationStage" visible="true" x="50" y="50">
<s:Label text="test">
</s:Label>
</s:Group>
</s:WindowedApplication>
I think you need to set the width and height of the wrapper UIComponent instance.
UIComponents don't automatically resize to their content so it's showing up with a width and height of 0.
Maybe it is a bad habit which I still have since Flash Professional, but I'm trying to add a simple Sprite or/and Bitmap I just created to an empty Application and it's not happening.
<?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"
minWidth="955" minHeight="600"
creationComplete="application1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
import mx.core.UIComponent;
import mx.events.FlexEvent;
protected function application1_creationCompleteHandler( event : FlexEvent ) : void
{
var s:Sprite = new Sprite();
s.graphics.beginFill( 0xFF0000, 0.5 );
s.graphics.drawRect( 0, 0, 100, 100 );
s.graphics.endFill();
this.addChild( s );
}
]]>
</fx:Script>
</s:Application>
Could someone tell me what I am doing wrong and help me correct it?
Try putting your sprite in UIComponent or SpriteVisualElement.
This works for me:
<?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" minWidth="955" minHeight="600"
creationComplete="test()">
<fx:Script>
<![CDATA[
import spark.core.SpriteVisualElement;
private function test():void
{
var sprCont:SpriteVisualElement = new SpriteVisualElement();
sprCont.horizontalCenter = 0;
sprCont.verticalCenter = 0;
var spr:Sprite = new Sprite();
spr.graphics.beginFill(0xFF0000);
spr.graphics.drawCircle(0,0, 100);
spr.graphics.endFill();
sprCont.addChild(spr);
addElement(sprCont);
}
]]>
</fx:Script>
</s:Application>
For some reasons the 's:Application' tags are not shown, but they are there.
HTH,
FTQuest
There are a few things to consider. You don't specify a height or width for your sprite. Won't it default to a height and width of 0; effectively rendering it invisible?
The second thing to note is that I strongly recommend you make use of the Flex Component Lifecycle methods for creating children. Instead of using a creationComplete handler, override createChildren() to create the sprite and add it. It would be common to use updateDisplayList() for the drawing, sizing, and positioning of the component.
The second thing to note is that Application is actually a sprite. Depending on what you're trying to do you could do the drawing directly on the application:
this.graphics.beginFill( 0xFF0000, 0.5 );
this.graphics.drawRect( 0, 0, 100, 100 );
this.graphics.endFill();
I perceive it will be more flexible to use a sprite than to draw directly on the Application; but it depends what you're trying to accomplish.
I have a UIComponent (tried it also with Canvas) and some icons in it (sub views). On the UIComponent I defined some extra ContextMenuItems.
Now when I'm testing it, the context menu appears only on the subviews (icons) with a right-click.
I've checked the documentation but found nothing about required properties for using context menus.
Do you have any ideas why it's only on subviews?
This is probably happening because your UIComponent's (or Canvas') graphics are clean/empty. If the component doesn't have any "content" it will act as transparent, which means the click event will not be caught.
If you are using a Canvas there's a simple way to check this out, try to add some background color and it should work:
<mx:Canvas backgroundColor="#FFFFFF" backgroundAlpha="0.001"/>
I think this is what you're looking for:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="onCreationComplete()">
<fx:Script>
<![CDATA[
private function onCreationComplete():void
{
var menu:ContextMenu = new ContextMenu();
menu.customItems.push(new ContextMenuItem('weee'));
menu.customItems.push(new ContextMenuItem('weee2'));
menu.hideBuiltInItems();
canvas.contextMenu = menu;
}
]]>
</fx:Script>
<mx:Canvas id="canvas" backgroundColor="#000000" height="50%" width="50%" >
<s:Button label="blarg" />
</mx:Canvas>
</s:Application>
Notice how I'm creating a menu, then adding items, which then replaces the contextMenu property. This should work on any object that extends InteractiveObject.
What the problem was is the mouseEnabled="{false}" property in one of the parent-parent containers. I removed it and it works now.
as textWidth property is no more accessible in spark textinput how we can get that property ?
in spark there's something called TextLineMetrics
you can do it like this
var tm:TextLineMetrics = label.measureText( name );
var width:int = tm.width;
here's an example
<?xml version="1.0" encoding="utf-8"?>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.Text;
protected function cmdDoAction_clickHandler(event:MouseEvent):void
{
var tm:TextLineMetrics = cmdDoAction.measureText(cmdDoAction.label);
var _width:int = tm.width;
Alert.show(_width.toString());
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button id="cmdDoAction"
label="Kensodev"
click="cmdDoAction_clickHandler(event)"/>
</s:Application>
This will give you the actual width