I'm trying to create a custom ItemRenderer for a TileList in Flex 4.
Here's my renderer:
<?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="true">
<mx:Image x="0" y="0" source="../images/blank-offer.png" width="160" height="144" smoothBitmapContent="true"/>
<s:Label x="5" y="20" text="{data.title}" fontFamily="Verdana" fontSize="16" color="#696565" width="155"/>
<s:Label x="5" y="42" text="{data.description}" fontFamily="Verdana" fontSize="8" color="#696565" width="154"/>
<mx:Text x="3" y="59" text="{data.details}" fontFamily="Verdana" fontSize="8" color="#696565" width="157" height="65"/>
<mx:Text x="3" y="122" text="{data.disclaimer}" fontFamily="Verdana" fontSize="5" color="#696565" width="157" height="21"/>
</s:ItemRenderer>
Here's my tile list:
<mx:TileList x="0" y="0" width="100%" height="100%" id="tileList" creationComplete="tileList_creationCompleteHandler(event)" dataProvider="{getDataResult.lastResult}" labelField="title" itemRenderer="renderers.OfferLibraryListRenderer"></mx:TileList>
When I run the app, I get this error:
Error #1034: Type Coercion failed: cannot convert renderers::OfferLibraryListRenderer#32fce0a1 to mx.controls.listClasses.IListItemRenderer.
I think in Flex4 you should use the <s:List> component instead of the <mx:TileList>. I've tried this way and it works.
Related
Made up a cloudy svg background for my project.
It works perfectly in MS Edge,in Google Chrome, it even works when placed as desktop background in XFCE.
But it ain`t working in Firefox. Neither under Win, nor Linux.
Maybe there is some crutch needed?
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
<radialGradient id="Background" cx="50%" cy="50%" r="120%">
<stop offset="0%" stop-opacity="1" stop-color="#369" />
<stop offset="170%" stop-opacity="1" stop-color="#000"/>
</radialGradient>
<filter id="noise" x="0" y="0" width="100%" height="100%">
<feImage xlink:href="#bkgrad" result="image" x="0" y="0"/>
<feTurbulence baseFrequency="0.001" seed="999" type="fractalNoise" numOctaves="8" result="fnoise"/>
<feColorMatrix in="fnoise" result="snoise"
type="saturate"
values="0" />
<feBlend in="SourceGraphics" in2="snoise" mode="multiply"></feBlend>
<feBlend in="snoise" in2="image" mode="multiply"></feBlend>
</filter>
<polyline id="Hexagon" stroke="#000" stroke-opacity="0.15" fill="none" stroke-width = "1.2px"
points="0,0 8,0 12,6.9 8,13.8 0,13.8 8,13.8 12,6.9 20,6.9 24,13.8 20,6.9 24,0 32,0 "/>
<pattern id="Hex_Pattern" patternUnits="userSpaceOnUse" patternTransform="translate(0,0)"
width="24" height="13.8" >
<use xlink:href="#Hexagon"/>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Background)" id="bkgrad" ></rect>
<rect x="0" y="0" width="100%" height="100%" style="filter:url('#noise')" fill="url(#Background)"/>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Hex_Pattern)" id="hexes"/>
</svg>
The attribute value for the <feBlend> filter is in="SourceGraphic", not in="SourceGraphics". Firefox did not render the whole filter because of that error, while other browsers and renderers used a fallback and used the last filter result as first source, effectively multiplying the result of feColorMatrix with itself. (This behavior is new in the CSS filter spec, it was not defined in SVG 1.1.)
Since the output of that part of the filter is never used anyway, remove it.
Additionally, as Robert Longson pointed out, feImage does not support references to internal fragments in Firefox. But you don't really need it. The referenced image is identical to the source graphic for the filter, so you can simply remove that primitive and reroute the input to the other primitives:
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
<radialGradient id="Background" cx="50%" cy="50%" r="120%">
<stop offset="0%" stop-opacity="1" stop-color="#369" />
<stop offset="170%" stop-opacity="1" stop-color="#000"/>
</radialGradient>
<filter id="noise" x="0" y="0" width="100%" height="100%">
<feTurbulence baseFrequency="0.001" seed="999" type="fractalNoise" numOctaves="8" result="fnoise"/>
<feColorMatrix in="fnoise" result="snoise"
type="saturate"
values="0" />
<feBlend in="snoise" in2="SourceGraphic" mode="multiply"></feBlend>
</filter>
<polyline id="Hexagon" stroke="#000" stroke-opacity="0.15" fill="none" stroke-width = "1.2px"
points="0,0 8,0 12,6.9 8,13.8 0,13.8 8,13.8 12,6.9 20,6.9 24,13.8 20,6.9 24,0 32,0 "/>
<pattern id="Hex_Pattern" patternUnits="userSpaceOnUse" patternTransform="translate(0,0)"
width="24" height="13.8" >
<use xlink:href="#Hexagon"/>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="filter:url(#noise)" fill="url(#Background)"/>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Hex_Pattern)" id="hexes"/>
</svg>
My idea is to make multiple license terms link's with different name One of them should be "license terms" next "diagnostics". But then I try to change name I faced this issue:
Here is my code for this RtfTheme.XML:
<Page Name="Install">
<Hypertext Name="EulaHyperlink" X="94" Y="-100" Width="-11" Height="17" TabStop="yes" FontId="3" HideWhenDisabled="yes">#(loc.InstallLicenseLinkText)</Hypertext>
<Checkbox Name="EulaAcceptCheckbox" Height="30" Width="300" X="120" Y="-67" FontId="3">#(loc.InstallLicenseLinkCheckBox)</Checkbox>
<Button Name="InstallButton" X="160" Y="-30" Width="75" Height="23" TabStop="yes" FontId="0">#(loc.InstallInstallButton)</Button>
<Button Name="InstallCancelButton" X="240" Y="-30" Width="75" Height="23" TabStop="yes" FontId="0">
<Text>Cancel</Text>
<CloseWindowAction />
</Button>
</Page>
Bundle.wxs:
<BootstrapperApplicationRef Id="WixStandardBootstrapperApplication.HyperlinkLicense" >
<bal:WixStandardBootstrapperApplication
LogoFile="Resources/banner.png" LogoSideFile="Resources/r2.png"
ThemeFile="Resources/RtfTheme.xml"
LocalizationFile="Resources/RtfTheme.wxl"
LicenseUrl="http://opensource.org/licenses/ms-rl" />
<Payload SourceFile="Resources/r2.png"/>
</BootstrapperApplicationRef>
RtfTheme.WXL
<String Id="InstallLicenseLinkText">By installing you accept these <a href="#">license terms</a></String>
<String Id="InstallLicenseLinkCheckBox">Also include <a href="#">diagnostics</a></String>
Maybe whom have same issue and know how can I fix this? Please suggest.
Make your check box the size of the box itself with no text. Add a second <Hypertext> that is positioned right beside the check box.
I came upon a problem, or more of a bug, really. I have a business app programmed in Flex 4.1, and the compiled Flash object displays images within it differently on different browsers.
For example this page : http://www.maastrichtuniversity.nl/web/Main/ProspectiveStudents/HomepageNewPortalProspectiveStudents/ChooseYourProgramme/RequestBrochures.htm
If you select Bachelor's programmes on browsers like Chrome or Safari you will see that flags are aligned with the text (flags are positioned using x,y coordinates. If you do exactly the same on IE 8 or 9, you will see that all flags move a few pizels to the left, and start covering some of the labels.
Has anyone else came across this issue, and how to solve it? Here is the mxml code that is used to position flags.
<mx:Image x="241" y="65" width="15" height="10" source="en.jpg"/>
<mx:Image x="245" y="95" width="15" height="10" source="en.jpg"/>
<mx:Image x="230" y="111" width="15" height="10" source="en.jpg"/>
<mx:Image x="262" y="65" width="15" height="10" source="nl.jpg"/>
<mx:Image x="160" y="246" width="15" height="10" source="en.jpg"/>
<mx:Image x="335" y="260" width="15" height="10" source="en.jpg"/>
<mx:Image x="199" y="305" width="15" height="10" source="en.jpg"/>
<mx:Image x="182" y="246" width="15" height="10" source="nl.jpg"/>
<mx:Image x="169" y="275" width="15" height="10" source="nl.jpg"/>
<mx:Image x="199" y="290" width="15" height="10" source="nl.jpg"/>
<mx:Image x="152" y="124" width="15" height="10" source="en.jpg"/>
<mx:Image x="158" y="140" width="15" height="10" source="en.jpg"/>
<mx:Image x="129" y="154" width="15" height="10" source="en.jpg"/>
<mx:Image x="152" y="230" width="15" height="10" source="en.jpg"/>
<mx:Image x="173" y="124" width="15" height="10" source="nl.jpg"/>
<mx:Image x="162" y="170" width="15" height="10" source="nl.jpg"/>
<mx:Image x="232" y="185" width="15" height="10" source="nl.jpg"/>
<mx:Image x="166" y="200" width="15" height="10" source="nl.jpg"/>
<mx:Image x="285" y="215" width="15" height="10" source="nl.jpg"/>
<mx:Image x="312" y="80" width="15" height="10" source="nl.jpg"/>
This can be achieved in the following way :
<?xml version="1.0"?>
<!-- sparktextcontrols/TLFFloat.mxml -->
<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">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
private function changeSelection(event:Event):void {
image1.float = event.currentTarget.selectedItem;
}
]]>
</fx:Script>
<s:HGroup>
<s:Label text="float for the image (default:none):"/>
<s:ComboBox id="cb1"
change="changeSelection(event)"
creationComplete="cb1.selectedIndex=0">
<s:ArrayCollection>
<fx:String>none</fx:String>
<fx:String>left</fx:String>
<fx:String>right</fx:String>
<fx:String>start</fx:String>
<fx:String>end</fx:String>
</s:ArrayCollection>
</s:ComboBox>
</s:HGroup>
<s:RichEditableText id="myRET1" width="300">
<s:textFlow>
<s:TextFlow columnWidth="290">
<s:p id="p1">Images in a flow are a good thing. For example, here is a float. <s:img id="image1" float="none" source="#Embed(source='../assets/bulldog.jpg')" paddingRight="10" paddingTop="10" paddingBottom="10" paddingLeft="10"></s:img>Don't you agree?
It should show on the left. If it doesn't show up on the left, then it is a bug. You can submit bugs at http://bugs.adobe.com/jira/. You can set how the float is positioned within
the paragraph by using the ComboBox below. You can select left, right, start, end, or none. This example does not use the clearFloats property. That is in a different example.</s:p>
</s:TextFlow>
</s:textFlow>
</s:RichEditableText>
</s:Application>
I am in a process of optimizing item renderers that display a character in a Rect, I notice that the action of dynamically setting the text is slow, now I am thinking of creating premade objects with text hard-coded in them and inside the item-renderer have a switch to select the proper text object instead of using .text = , does anyone have any other idea on how to optimize the renderer , it is a tile layout that displays about 100 renderers on screen.
also - what is the cheapest(performance-wize) text object I can use in a renderer?
Thanks
<!-- DNA Plus -->
<s:Group height="26" width="100%" y="20">
<s:Rect id="backgroundTop" left="0" right="0" top="0" bottom="0"
alpha="{(data as MiniBrick).brick.strand == StrandEnum.PLUS.value ? 1 : 0.7}">
<s:fill>
<s:SolidColor id="bgFillTop" color="{BrickColors.getColor((data as MiniBrick).brick)}"/>
</s:fill>
</s:Rect>
<s:Rect id="selectedBackgroundTop" left="0" right="0" top="2" bottom="1" includeIn="selected">
<s:fill>
<s:SolidColor id="sBgFillTop" color.selected="0xB6E0F2"/>
</s:fill>
</s:Rect>
<!--- #copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
<s:Label id="textDisplayTop" width="100%" top="4" fontFamily="Consolas" text="{(data as MiniBrick).origin}"
fontSize="20" lineBreak="explicit" verticalAlign="middle" textAlign="center"/>
</s:Group>
<!-- DNA Minus -->
<s:Group height="26" width="100%" y="46">
<s:Rect id="backgroundBottom" left="0" right="0" top="0" bottom="0"
alpha="{(data as MiniBrick).brick.strand == StrandEnum.MINUS.value ? 1 : 0.7}">
<s:fill>
<s:SolidColor id="bgFillBottom" color="{BrickColors.getColor((data as MiniBrick).brick)}"/>
</s:fill>
</s:Rect>
<s:Rect id="selectedBackgroundBottom" left="0" right="0" top="1" bottom="2" includeIn="selected">
<s:fill>
<s:SolidColor id="sBgFillBottom" color.selected="0xB6E0F2"/>
</s:fill>
</s:Rect>
<!--- #copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
<s:Label id="textDisplayBottom" width="100%" top="4" fontFamily="Consolas" text="{DnaDictionary.getComplementSequenceOneLetter((data as MiniBrick).origin)}"
fontSize="20" lineBreak="explicit" verticalAlign="middle" textAlign="center"/>
</s:Group>
<!-- DNA index [tick list] -->
<s:Group width="15" id="dnaTick" y="72">
<s:Rect horizontalCenter="0" width="2" height="2" radiusX="1">
<s:fill>
<s:SolidColor color="#666666"/>
</s:fill>
</s:Rect>
<s:Label id="dnaTickLabel" horizontalCenter="0" y="5" height="9" color="#888888" fontFamily="Arial" fontSize="9"
textAlign="left" />
</s:Group>
<s:Line id="firstMiniBrickInBrickLine" x="0" y="20" yFrom="72">
<s:stroke>
<s:SolidColorStroke caps="none" color="#FFFFFF" weight="1"/>
</s:stroke>
</s:Line>
To answer your question directly: the most optimized way to display text is to use the UITextField class. But you're going to have a hard time implementing that into your ItemRenderer since it doesn't inherit from UIComponent.
Also that is not where the most performance gain is to be made in your code. The biggest problem is that this renderer has 6 data bindings in it. If you have 100 items on screen, that makes for 600 listeners watching for data changes.
So you should remove all those bindings and set those properties by overriding the ItemRenderer's data setter, like so:
override public function set data(value:Object):void {
super.data = value;
var brick:MiniBrick = value as MiniBrick;
backgroundTop.alpha = brick.brick.strand == StrandEnum.PLUS.value ? 1 : 0.7;
bgFillTop.color = BrickColors.getColor(brick.brick);
...
}
If you want to optimize even further, I would suggest you put the information for the renderers directly on the data so that it doesn't have to be evaluated every time and you can write the following:
override public function set data(value:Object):void {
super.data = value;
var brick:MiniBrick = value as MiniBrick;
backgroundTop.alpha = brick.alpha;
bgFillTop.color = brick.color;
...
}
I've got the beginning of an air app, and I'm trying to transition between the states using Fade (a Sequence that should, in theory, fade out, then fade the next state in.) Is there a way to target it to fade out ALL the elements, or will I need to use targets="..." and list every element?
I've tried nesting all the elements in a Group, but that isn't seeming to work.
Shortened version of my current code:
<s:states>
<s:State name="HomeScreen"/>
<s:State name="EnemyBuilder"/>
<s:State name="EncyclopediaBuilder"/>
</s:states>
<fx:Declarations>
<s:Transition toState="*" fromState="*" >
<s:Sequence >
<s:Fade alphaFrom="1" alphaTo="0" duration="250" target="{wrapper}" />
<s:Fade alphaFrom="0" alphaTo="1" duration="250" target="{wrapper}" />
</s:Sequence>
</s:Transition>
</fx:Declarations>
<s:Group id="wrapper" includeIn="HomeScreen, EnemyBuilder, EncyclopediaBuilder" >
<s:BorderContainer id="encounter" includeIn="HomeScreen"
x="49" y="99" width="200" height="44"
styleName="falseButton"
rollOut="alphaOver(event)" rollOver="alphaOver(event)" click="currentState='EncyclopediaBuilder'" >
<s:Label x="48" y="8" color="#000000" fontFamily="Arial" text="Create a new encounter" />
<s:Label x="48" y="24" color="#000000" fontStyle="italic" text="Single encounter" />
<s:Image x="10" y="10" source="assets/001_01.png" />
<s:BorderContainer id="back" includeIn="EncyclopediaBuilder"
right="20" bottom="20" width="200" height="44"
styleName="falseButton"
rollOut="alphaOver(event)" rollOver="alphaOver(event)"
click="currentState='HomeScreen'" >
<s:Label x="48" y="16" color="#000000" fontFamily="Arial" text="Save and Return"/>
<s:Image x="10" y="10" source="assets/001_01.png"/>
</s:BorderContainer>
</s:BorderContainer></s:Group>
Try to use something like the following:
<s:states>
<s:State name="HomeScreen"/>
<s:State name="EnemyBuilder"/>
<s:State name="EncyclopediaBuilder"/>
</s:states>
<s:transitions>
<s:Transition toState="*" fromState="*" >
<s:Sequence target="{wrapper}">
<s:Fade alphaFrom="1" alphaTo="0" duration="250" />
<s:Fade alphaFrom="0" alphaTo="1" duration="250" />
</s:Sequence>
</s:Transition>
</s:transitions>
<s:Group id="wrapper">
<s:BorderContainer id="encounter" includeIn="HomeScreen"
x="49" y="99" width="200" height="44"
styleName="falseButton"
rollOut="alphaOver(event)" rollOver="alphaOver(event)" click="currentState='EncyclopediaBuilder'" >
<s:Label x="48" y="8" color="#000000" fontFamily="Arial" text="Create a new encounter" />
<s:Label x="48" y="24" color="#000000" fontStyle="italic" text="Single encounter" />
<s:Image x="10" y="10" source="assets/001_01.png" />
<s:BorderContainer id="back" includeIn="EncyclopediaBuilder"
right="20" bottom="20" width="200" height="44"
styleName="falseButton"
rollOut="alphaOver(event)" rollOver="alphaOver(event)"
click="currentState='HomeScreen'" >
<s:Label x="48" y="16" color="#000000" fontFamily="Arial" text="Save and Return"/>
<s:Image x="10" y="10" source="assets/001_01.png"/>
</s:BorderContainer>
</s:BorderContainer></s:Group>