I am trying to render an image in a Flex mobile grid, but I can't get the MobileGridBitmapCellRenderer to display. There is just no image visible.
Does anyone see anything wrong? Here is my code:
<ns:MobileGrid id="myDataGrid" textAlign="left" width="100%" height="100%" borderVisible="true" dataProvider="{pDataCollection}"
sortChange="myDataGrid_sortChangeHandler(event)" scrollSnappingMode="leadingEdge" change="myDataGrid_changeHandler(event)"
touchInteractionEnd="myDataGrid_touchInteractionEndHandler(event)">
<ns:columns>
<ns:MobileGridColumn dataField="id" width="8%">
<ns:itemRenderer>
<fx:Component>
<ns:MobileGridBitmapCellRenderer source="#Embed('images/espn-profile-pics/tiny4821.png')" width="100%" />
</fx:Component>
</ns:itemRenderer>
</ns:MobileGridColumn>
<!--ns:MobileGridColumn dataField="player">
<ns:itemRenderer>
<fx:Component>
<ns:MobileGridTextCellRenderer labelField="player"/>
</fx:Component>
</ns:itemRenderer>
</ns:MobileGridColumn-->
<ns:MobileGridColumn dataField="player" width="22%"/>
<ns:MobileGridColumn dataField="year" width="9%"/>
<ns:MobileGridColumn dataField="team" width="9%" />
</ns:columns>
</ns:MobileGrid>
However, the MobileGridTextCellRenderer works just fine. I've read the following documentation, but I still don't get it.
http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Usage-Example-td5308.html
http://flex.apache.org/asdoc/spark/components/itemRenderers/IMobileGridCellRenderer.html
http://flex.apache.org/asdoc/spark/components/itemRenderers/MobileGridBitmapCellRenderer.html
If I try this code for the itemRanderer:
<ns:itemRenderer>
<fx:Component>
<s:Image source="#Embed('images/espn-profile-pics/tiny4821.png'" width="100%" />
</fx:Component>
</ns:itemRenderer>
I get the runtime error:
Error: MobileGridColumn item renderer must implement spark.components.itemRenderers.IMobileGridCellRenderer
<ns:itemRenderer>
<fx:Component>
<s:Image source="#Embed('images/espn-profile-pics/tiny4821.png'" width="100%" />
</fx:Component>
</ns:itemRenderer>
The issue with this code is that Image is not a valid ItemRenderer, you need to wrap the Image in something that is, for example: (EDIT: code updated)
<ns:MobileGridColumn dataField="id" width="8%">
<ns:itemRenderer>
<fx:Component>
<ns:MobileGridTextCellRenderer>
<s:Image source="#Embed('images/espn-profile-pics/tiny4821.png'" width="100%" />
</ns:MobileGridTextCellRenderer>
</fx:Component>
</ns:itemRenderer>
</ns:MobileGridColumn>
By using the MobileGridBitmapCellRenderer iconFunction I can embed an image as described on this page
A couple of issues persist.
Scale mode of "repeat" is the only mode I can see the image.
I'd like to use dynamic images from the MobileGrid datasource. At this time I have to declare an icon using embed in AS3.
I would like to combine an image and text in the same cell.
Ideally, I would be able to simply specify the source property.
Related
On an Adobe Photoshop panel - which uses Adobe Flex 3 - I'd like some textual elements not to be selectable. If I have a text element like
<mx:Text id="t1" text="My text" x="4" width="200" textAlign="left"/>
I currently take care of that in an init() function using AS3 like this
t1.selectable = false;
My question is: Do I have to do that or is there an MXML way to do the same?
Pretty sure it is just
<mx:Text id="t1" text="My text" x="4" width="200" textAlign="left" selectable="false" />
http://help.adobe.com/en_US/flex/using/WS02f7d8d4857b1677-165a04e1126951a2d98-7fe4.html
I have a component with 2 states and I have added transitions for switching between the states, where 2 Move affects are applied to 2 different objects. This all works fine, however, after the transition from the first state to the second has completed the second state doesn not render correctly. It contains a TextInput control which is not visible, and a Button with a custom skin that is only sometimes visible and vanishes if you click on it. I have tried called invalidateDisplayList() and validateNow() after loading the second state but that has done nothing. I also have a VBox with a cornerRadius property set, strangely this does not seem to apply anymore and the corners are square, where they displayed correctly before I added the transition in. Does anyone have any ideas?
Thank you!
Here is the code for my states and their transitions:
<!-- different states of this component -->
<mx:states>
<s:State name="useForFree"
enterState="renderState()"/>
<s:State name="enterLicence"
enterState="renderState()"/>
</mx:states>
<!-- transitions between different states -->
<mx:transitions>
<!-- transition from useForFree to enterLicence state -->
<s:Transition id="toEnterLicence"
fromState="useForFree"
toState="enterLicence">
<s:Parallel id="p1"
targets="{[freeBtn, _enterLicenceMask]}">
<s:Move yFrom="250"
yTo="0"
duration="500"
targets="{[freeBtn]}"/>
<s:Move yFrom="289"
yTo="39"
duration="500"
targets="{[_enterLicenceMask]}"/>
</s:Parallel>
</s:Transition>
<!-- transition from enterLicence to useForFree state -->
<s:Transition id="toUseForFree"
fromState="enterLicence"
toState="useForFree">
<s:Parallel id="p2"
targets="{[enterLicenceBtn, _useForFreeMask]}">
<s:Move yFrom="0"
yTo="240"
duration="500"
targets="{[enterLicenceBtn]}"/>
<s:Move yFrom="-250"
yTo="0"
duration="500"
targets="{[_useForFreeMask]}"/>
</s:Parallel>
</s:Transition>
</mx:transitions>
and here is the code for my layout:
<mx:Canvas id="freeStateCanvas"
width="100%">
<mx:VBox width="100%"
horizontalAlign="center"
top="0"
mask="{_useForFreeMask}">
<mx:VBox id="freeBox"
includeIn="useForFree">
<s:Label text="some text"/>
<s:Spacer height="20"/>
<s:Image source="image path"/>
<s:Spacer height="20"/>
<mx:Button id="connectBtn"/>
<s:Spacer height="10"/>
<mx:HBox >
<s:Label text="some text"/>/>
</mx:HBox>
</mx:VBox>
<s:Label text="some text"
includeIn="useForFree"/>
</mx:VBox>
<mx:Button id="enterLicenceBtn"
includeIn="useForFree"/>
</mx:Canvas>
<!-- enter licence state -->
<mx:Canvas id="enterLicenceStateCanvas"
width="100%">
<mx:VBox id="enterLicenceBox"
mask="{_enterLicenceMask}"
includeIn="enterLicence">
<s:Label text="some text"/>
<s:Spacer height="20"/>
<s:TextInput id="licenceInput"
width="200"
height="30"/>
<s:Spacer height="20"/>
<mx:Button id="registerBtn"/>
<s:Spacer height="10"/>
<mx:HBox>
<s:Label text="some text"/>
<s:Label text="some more text"/>
</mx:HBox>
</mx:VBox>
<mx:Button id="freeBtn"
includeIn="enterLicence"/>
</mx:Canvas>
where the variables being set as masks are UIComponent instances where I have used their graphics property to draw a rectangle.
Okay, so I found what the problem was, but thanks for trying to help shaunhusain.
In my code you can see I have 2 VBox containers called "freeBox" and "enterLicenceBox" and these actually had a white background and rounded corners, and a DropShadowFilter applied to them (I removed these properties when putting up the code as I felt they were irrelevant, that was a mistake).
This DropShadowFilter was the cause of all my problems and on removing it, the transitions worked fine and all content was rendered correctly. I assume this is just a strange Flex bug, and I didn't find a workaround, I just used images as the box backgrounds for a quick fix.
I've written a flex (mobile) application, that ended up bigger than I expected.
I'm pretty happy with all my classes and everything on my AS files. However, the view turned out really big, as I'm using MXML to layout my app.
I was thinking about creating external components I could call on my view to make it more readable, but am not sure what's the best way to do, or if doing so is the best way at all.
As an example, I have in my view a v:Group with the following:
<s:VGroup width="100%" height="80%" includeIn="normal" horizontalAlign="center" top="70" id="imageGroup">
<s:Label id="lblFile" visible="false" width="98%" textAlign="center" includeInLayout="true" color="0xFFFFFF"/>
<s:BorderContainer id="framingBorder" borderColor="0xFFFFFF" borderWeight="15" cornerRadius="7">
<s:Image id="image" source="{IMAGE_SAMPLE}" horizontalCenter="0"/>
</s:BorderContainer>
<s:BorderContainer id="shareBorder" borderColor="0xFFFFFF" borderWeight="5" height="30" cornerRadius="7" width="{framingBorder.width}" visible="false" buttonMode="true" click="copyToClipboard(lblURL.text)">
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="left" gap="3"/>
</s:layout>
<s:Label text="url:" styleName="copyURL" />
<s:BorderContainer borderColor="0xCDCDCD" borderWeight="1" width="{lblURL.width + 5}" height="{lblURL.height + 5}">
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<s:Label id="lblURL" text="" styleName="copyURL" />
</s:BorderContainer>
<s:Spacer width="100%" />
<s:HGroup>
<s:Label color="0xFF0000" text="copy" styleName="copyURL" />
<s:Image source="/assets/icons/page_copy_small.png" horizontalCenter="0" horizontalAlign="right"/>
</s:HGroup>
</s:BorderContainer>
</s:VGroup>
Could anyone point me to the right direction as to how I can move this out from the view to make it cleaner, and how to still have access to items inside this block of code (i.e. I would still like to be able to modify lblURL from my view as this is a dynamic value)
Thanks in advance,
You're on the right track, and the link Amy posted has a good example of how to lay it out. You might also be interested in cairngorm and parsely, which are frameworks/tools for a more complete solution.
But for now I think just separating parts of your view into components is a good start.
You can still modify your label in the main app (e.g.):
<views:myBox id="box" />
<s:Button click="{box.myLabel.text = 'changed'}" />
myBox.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<s:Label id="myLabel" text="this is my label" />
</s:BorderContainer>
Please, can anyone help me out on this : the piece of code below was working fine until i decided to add a scroller for better view and suddenly, i get the error:
"Multiple initializer values for default property, 'viewport' of type 'spark.core.IViewport'"
Thanks
[CODE]
<s:Scroller
width="100%"
height="100%"
>
<s:Group id="basicDataGroup" includeIn="initial">
<s:HGroup id="buttonGroup"
x="250"
paddingTop="20"
gap="15">
<s:Button id="addBT" label="{resourceManager.getString('aggregationUI','add')}" click="addBT_clickHandler(event)"/>
<s:Button id="delBT" label="{resourceManager.getString('aggregationUI','delete')}"/>
</s:HGroup>
<s:DropDownList id="languageCombo"
prompt="{resourceManager.getString('aggregationUI','lang')}"
dataProvider="{new ArrayCollection([{locale:'fr_FI',label:'France'}, {locale:'en_US', label:'English'}])}"
change="languageChange(event)"
width="100"
x="473"
y="20"/>
<components:SearchComponent id="searchModel" searchClick="searchModel_searchClickHandler(event)"/>
<components:DataComponent id="basicData"
x="250"
y="50"/>
</s:Group>
<s:Group id="newModelGroup" includeIn="newModel">
<components:NewDataComponent id="newModelData"/>
</s:Group>
</s:Scroller>
[/CODE]
A scroller can only be a viewport to one component. In your scroller, you have basicDataGroup and newModelGroup. Even though you have states so they don't both exist at the same time, I don't think Flex is that coordinated to know that. Instead, wrap those two Groups in one Group, and make that parent Group the Scroller's viewport.
Hope that helps,
Ryan
Here is my problem, fairly obvious: [img at bottom]
The problem, as you can see, is that the text (height and width) is nothing like the Height and Width of the compoent (Spark TextArea) that I have set via the Main.mxml file in Flex 4. This is pissing me off so much because nobody can tell me why this is happening, or how to fix it. Text is dynamically added to the TextArea as people send messages in the server, hence the valueCommit line.
I don't understand this, because I know it's not the fault of my fx:Script. I know this, because when I switch over to the Design tab of Adobe Flex Builder 4; the lines are just as messed up as in the screen shot.
I've been tearing my hair out (metaphorically) over this issue, please help me come to an answer.
<!-- State: interface -->
<s:TextArea id="incomingMessages" includeIn="interface"
heightInLines="{NaN}" widthInChars="{NaN}"
y="10" x="9" minWidth="426" minHeight="442"
text="Connected to Chat Paradise v5.00a, By CharlesBroughton."
valueCommit="incomingMessages_valueCommitHandler(event)"/>
<!-- Toolbar -->
<s:HGroup includeIn="interface" x="10" y="460" width="363" height="22">
<mx:ColorPicker id="tintColor" selectedColor="#FFFFFF" includeIn="interface"/>
<s:Label id="curname" height="22" width="100" text="<user>" fontSize="16" includeIn="interface"/>
<s:CheckBox label="AutoScroll" id="scrollToggle" selected="true"/>
<s:Button id="clearButton" width="60" height="22" label="Clear" click="incomingMessages.text = "";"/>
</s:HGroup>
<!-- end Toolbar -->
<s:Button id="sendMessage" width="60" height="22" label="SEND" includeIn="interface" x="375" y="460"/>
<s:TextArea id="outgoingMessages" x="10" y="480" maxChars="2048" editable="true" width="425" height="50" includeIn="interface" skinClass="graphite.skins.TextAreaSkin"/>
<s:List id="userlist" x="443" y="10" width="128" height="488" includeIn="interface" itemRenderer="userlistRenderer"/>
<s:ComboBox includeIn="interface" x="444" y="506" width="127" id="songs" selectedIndex="0"/>
<!-- end State: interface -->
Here is the FX:SCRIPT for incomingMessages_valueCommitHandler(event) if you care:
protected function incomingMessages_valueCommitHandler(event:FlexEvent):void
{
if (scrollToggle.selected)
incomingMessages.textDisplay.verticalScrollPosition = incomingMessages.textDisplay.maxHeight;
}
I'm not allowed to post images [less than 10 repute] so here is a link: Image Link
Edited to include the surrounding code as asked for. What you all don't seem to understand is that the text box is taking up the size I set it to, but the TEXT inside the text box is only taking up like 100px wide and high of the total text box area, please check the picture link.
Okay so, we found the problem, graphite.styles.TextAreaSkin ... WHAT WAS ADOBE SMOKING?
<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" minViewportInset="1" measuredSizeIncludesScrollBars="false">
<s:RichEditableText id="textDisplay"
lineBreak="toFit"
textAlign="left"
selectable="true"
verticalAlign="top"
paddingBottom="4"
paddingTop="4"
paddingLeft="4"
paddingRight="4"
height="125"
width="125"
maxWidth="125"
maxHeight="125"/>
</s:Scroller>
What type of component is the parent to your TextArea? Without knowing any of the surrounding mxml, you may want to set width and height to 100%. If that doesn't work, post some more of your mxml and we'll try to figure it out. Hope that helps.
As you said, this is a problem with the graphite textarea skin. I created a new skinClass for my textarea(based on graphite text area skin). and replaced the scroller and richeditabletext with the Spark text area ones. And added textAlign = "left". And it started working fine. Let me know if this helped. Thanks.