I am using RichEditableText of flex, and i want to embed my own font in RichEditableText , so i gave fontLookUp=EMBEDD_CFF, still it is not taking my embedded fonts, and how to use text flow with this RichEditableText.
Please take a look at the following code for using embedded font with RichEditableText.
<?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/halo">
<s:layout>
<s:BasicLayout />
</s:layout>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/halo";
#font-face {
src: url("assets/ACaslonPro-Regular.otf");
fontFamily: "ACaslonProRegularEmbedded";
embedAsCFF: true;
}
s|RichEditableText {
fontFamily: ACaslonProRegularEmbedded;
fontLookup: embeddedCFF;
fontSize: 34;
}
</fx:Style>
<s:RichEditableText id="textView"
text="The quick brown fox jumped over the lazy dog. 01234567890"
width="400"
horizontalCenter="0"
verticalCenter="0" />
</s:Application>
Related
I am creating a Windowed Application in Flex3 with Adobe Flash Builder 4.7
I have two .mxml files (Main.mxml and Home.mxml)
In Main.mxml I have ButtonBar, when the user clicks on the Home ButtonBar, I want the user to be redirected to Home.mxml
I have been googling this for awhile now and there is no clear answer on this.
I have looked into ViewStack and TabNavigator and States, I am not sure if that is what I am looking for.
Here is my Main.mxml File
<?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"
applicationComplete="init()"
showStatusBar="false">
<fx:Declarations></fx:Declarations>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
s|ButtonBar s|ButtonBarButton:upAndSelected,
s|ButtonBar s|ButtonBarButton:overAndSelected,
s|ButtonBar s|ButtonBarButton:downAndSelected,
s|ButtonBar s|ButtonBarButton:disabledAndSelected {
chromeColor: #666666;
color: #FFFFFF;
fontSize: 32;
}
s|ButtonBar {
chromeColor: #000000;
color: #FFFFFF;
fontSize: 32;
bottom: 0;
typographicCase: uppercase;
}
</fx:Style>
<s:ButtonBar width="100%" height="13%">
<mx:ArrayCollection>
<fx:String>Home</fx:String>
</mx:ArrayCollection>
</s:ButtonBar>
</s:WindowedApplication>
and here is my Home.mxml file
<?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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label text="Here"/>
</s:WindowedApplication>
Please Help
You can approach this issue in several ways. I will elaborate in the one I'm more experienced in.
First, please take a look at the video inside this repository, so you can know what I'm talking about.
This application uses a lateral menu consisting on individual buttons, a similar approach to a ButtonBar.
On the right there's a TabNavigator, which I have manually added some MXML Views on it. Each View is represented as its own .mxml file.
Here's a simplified version of the main file:
<?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:views="views.*">
<s:VGroup left="0" top="0" bottom="0" width="100" horizontalAlign="center">
<s:Image width="60" height="60" source="assets/someicon.png" click="goHome(event)"/>
<s:Image width="60" height="60" source="assets/someicon.png" click="goIcons(event)"/>
</s:VGroup>
<mx:TabNavigator id="myTabNavigator" left="100" right="0" top="0" bottom="0" borderStyle="none" paddingTop="0" tabHeight="0" tabWidth="0" creationPolicy="auto" backgroundAlpha="0">
<views:HomeView />
<views:IconsView />
</mx:TabNavigator>
</s:WindowedApplication>
When a user clicks one of the buttons, the TabNavigator will change its index:
protected function goHome(event:MouseEvent):void
{
myTabNavigator.selectedIndex = 0; //This value will change depending on the clicked button.
}
protected function goIcons(event:MouseEvent):void
{
myTabNavigator.selectedIndex = 1; //This value will change depending on the clicked button.
}
Those 2 functions need to be inside your fx:Script block.
This way you can change the current shown tab in the TabNavigator from your ButtonBar.
I have a created a flex application with a video player. The application goes full screen. Now I am trying to make the video go on full screen on inital launch.
I have tried to google how to do this, but came up with nothing. Here is my app code:
<?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="myVid.play();"
applicationComplete="init()"
showStatusBar="false"
xmlns:media="org.osmf.media.*">
<s:VGroup>
<s:VideoDisplay id="myVid"
source="augusta.mp4"
autoPlay="true"
volume="0"
loop="true"
width="100%"
height="100%"
/>
</s:VGroup>
<fx:Script>
<![CDATA[
private function init():void
{
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
}
]]>
</fx:Script>
</s:WindowedApplication>
Updating the container with the newly-resized dimensions would be a first step:
<?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="onCreationComplete(event)"
applicationComplete="init()"
showStatusBar="false"
xmlns:media="org.osmf.media.*">
<s:VGroup id="vidContainer">
<s:VideoDisplay id="myVid"
source="augusta.mp4"
autoPlay="true"
volume="0"
loop="true"
width="100%"
height="100%"
/>
</s:VGroup>
<fx:Script>
<![CDATA[
private function onCreationComplete(e:FlexEvent):void
{
vidContainer.width = this.width;
vidContainer.height = this.height;
myVid.play();
}
private function init():void
{
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
}
]]>
</fx:Script>
</s:WindowedApplication>
(note that I didn't actually test this; I don't have a video file handy for testing the VideoDisplay component)
Is it possible within Flex 4 to change the background color of an <s:Application> at runtime? I've seen examples of how to do this with the MX version of the Application component, but not the spark version.
I cannot bind the backgroundColor property to a variable and modify that. However, I am thinking that I should use the styleManager property of the component to perform this change.
Could anyone explain how to do this?
Thank you for your time.
I recommend you go through this:
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7fee.html
The video tutorial steps through using CSS and using skins in Flex 4 which are the primary means of changing visual components.
Application has a backgroundColor style still:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Application.html
<?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)">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
setStyle('backgroundColor',0xCCCCCC);
}
]]>
</fx:Script>
<s:Button click="setStyle('backgroundColor','0xff0000');" label="turn red"/>
<s:Button click="setStyle('backgroundColor','0x0000ff');" label="turn blue"/>
<s:Button click="setStyle('backgroundColor','0x00ff00');" label="turn green"/>
</s:Application>
A Better way to go IMO
<?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">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
s|Application{
backgroundColor:#CCCCCC;
}
</fx:Style>
<s:Button click="setStyle('backgroundColor','0xff0000');" label="turn red"/>
<s:Button click="setStyle('backgroundColor','0x0000ff');" label="turn blue"/>
<s:Button click="setStyle('backgroundColor','0x00ff00');" label="turn green"/>
</s:Application>
Better still pull the CSS out into it's own file and just reference it with a
<fx:Style source="myStyle.css"/>
You may try it with
FlexGlobals.topLevelApplication.setStyle("backgroundColor", 0xff0000); // that would turn it into bright red
FlexGlobals.topLevelApplication.setStyle("backgroundAlpha", 1); // Sometimes background color is ignored when background alpha is zero
If the background color does not change, that means one of your component might be dictating the background color.
I have a spark list component that uses an itemrenderer. It's a list of avatar (images) and names of people. Latin and other languages are displayed correctly but for Thai, where it only shows square boxes. Please help!
Here's the code I use:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer 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:bd="com.bdement.imagecache.*"
autoDrawBackground="false" width="270" height="45">
<fx:Script>
<![CDATA[
override public function set data(object:Object):void {
userName.text = "อีฟ จันทโรทัย";
}
]]>
</fx:Script>
<s:HGroup click="onFriendClickReceived(event)" verticalAlign="middle"
color.normal="#000000" horizontalAlign="left" width="270" height="45">
<s:Spacer width="10"/>
<bd:CachedImage id="userImage" cacheId="F32x32" width="32" height="32"
left="8" verticalCenter="0"/>
<s:Label id="userName" width="188" maxDisplayedLines="1" fontLookup="auto"
fontFamily="Arial Unicode MS, Arial" verticalCenter="0" />
</s:HGroup>
</s:ItemRenderer>
You have to define a fontFamily for your language. Get a font that has Thai support in it, then embed like this:
[Embed(source="font.ttf", mimeType="application/x-font", embedAsCFF="true", fontFamily="ThaiFontFamily")]
private var ThaiFont:Class;
Then in your creationComplete handler embed font like this:
Font.registerFont(ThaiFont);
After this you are free to use your fontFamily in CSS or directly on your label in MXML. Like this:
<s:Label id="userName" width="188" maxDisplayedLines="1" fontLookup="auto" fontFamily="ThaiFontFamily" verticalCenter="0" />
I am applying s:Fade effect on s:ItemRenderer on mouseOver event. The fade effect ends fine, but during its execution, it is applied only on half of the ItemRenderer object, plus half of the adjacent (right) ItemRenderer.
ItemRenderer objects are inside a s:List which uses a HorizontalLayout.
Here is the code for the ItemRenderer called FilterTagRenderer:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false"
mouseOver="{fadeIn.play()}"
mouseOut="{alpha = 0.6}"
alpha="0.6">
<fx:Declarations>
<s:Fade id="fadeIn" alphaTo="1" duration="500" target="{this}"/>
</fx:Declarations>
<s:Label id="lblFilterName" text="{data}" paddingBottom="5" fontWeight="bold" fontSize="14"/>
</s:ItemRenderer>
Here is the code for List:
<s:List id="filterValuesList" width="{this.width}" borderVisible="false"
itemRenderer="view.FilterTagRenderer">
<s:layout>
<s:HorizontalLayout id="flowLayout" gap="6"/>
</s:layout>
</s:List>
I am using Flex SDK 4.0.
Does anyone know if this is a bug in flex or am I doing something wrong?
Thanks
You're doing something a little bit wrong, in that with Spark components you should let the state change run th effect, rather than trying to run it yourself. However, effects under the hood are just a filter on a single DisplayObject, so I'm not sure how you can get an effect that's partially on two different objects. Your renderers are probably just not where you think they are. What happens if you use one of the layouts that came with Flex, such as TileLayout?
Seems like a bug.
Steps to reproduce: simply compile and run the following two files, and then move the mouse over to any word.
Application file (FadeBug.mxml):
<?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:Script>
<![CDATA[
import mx.collections.ArrayCollection;
]]>
</fx:Script>
<s:List dataProvider="{new ArrayCollection('The quick brown fox jumped over the lazy dog'.split(' '))}"
itemRenderer="BuggyItemRenderer" >
<s:layout>
<s:HorizontalLayout gap="6"/>
</s:layout>
</s:List>
</s:Application>
BuggyItemRenderer.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false"
alpha="0.4"
mouseOver="{fadeEffect.play()}"
mouseOut="itemrenderer1_mouseOutHandler(event)">
<fx:Script>
<![CDATA[
protected function itemrenderer1_mouseOutHandler(event:MouseEvent):void
{
if (fadeEffect.isPlaying) {
fadeEffect.stop();
}
this.alpha = 0.4;
}
]]>
</fx:Script>
<fx:Declarations>
<s:Fade id="fadeEffect" target="{this}" alphaFrom="0.4" alphaTo="1"/>
</fx:Declarations>
<s:Label text="{data}" fontSize="25" fontWeight="bold"/>
</s:ItemRenderer>