How can I load text from MySQL to an HorizontalList in Flex3 ?
I am using :
<mx:ControlBar x="10" y="40" width="460" height="230">
<mx:HorizontalList id="dataGrid"
dataProvider="{dataArr}"
labelField="lbl"
iconField="src"
itemRenderer="CustomItemRenderer"
columnCount="4"
columnWidth="100"
rowHeight="100"
horizontalScrollPolicy="on"
width="439" height="230"/>
</mx:ControlBar>
And in the CustomItemRenderer.mxml
<mx:VBox horizontalAlign="center" verticalAlign="middle">
<mx:Image source="{data.#thumbnailImage}" />
<mx:Label text="{data.#nomept}" />
</mx:VBox>
I also did the "Create Application from Database.." and tried to integrate with the success but with no success.
You need to use a "server side solution" such as php / rails / python / cf / etc... in order to get the mySQL data to Flex.
You can't execute mySQL queries directly from actionscript/flex, if you where using Adobe AIR, you could communicate with sqlite3
Cheers
Related
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.
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
So I made a simplified version of the code I'm working on ...
I have a custom Flex component that has following structure (based on the s:HGroup):
<s:HGroup 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="100%" height="100%" >
<fx:Script>
<![CDATA[
import spark.components.Button;
public function addButton():void{
var myButton:Button = new Button();
myButton.label = "New Button";
buttonContent.addElement(myButton);
}
]]>
</fx:Script>
<mx:HDividedBox width="100%" height="100%">
<s:VGroup width="100%" height="100%" gap="5">
<s:VGroup width="100%" height="100%">
</s:VGroup>
<s:Group width="100%" height="100%">
<s:Group left="5" top="15" bottom="5" right="5" id="buttonContent" />
</s:Group>
</s:VGroup>
<s:VGroup width="100%" height="100%">
</s:VGroup>
</mx:HDividedBox>
Inside this component I make use a the mx:HDividedBox component since there is no Sparkalternative...
So when I call the function addButton(), my intend is to add a custom Spark DataGrid (in this example a simple s:Button made with code) to the Spark Group with id buttonContent. I noticed that this button isn't added to the Groupwith id buttonContent.
When I commented out the mx:HDividedBox the Spark button was added like it should...
I suppose there is some conflict rising between the Sparkand mx display formats.
Has anyone had the same problem? Or know a usable solution / work around?
Any tips are welcome! Thanks!
Try adding an "id" field to the HDividedBox. Flex has had issues with not recognizing elements when their parents don't have an id in the past, this might be a regression issue?
(Would've added as a comment, but I don't have the access yet..)
Your exemple works on my computer.
Which flex SDK version are you using ?
Are you really using "100%" width and height in you real code ? (DividedBox are tricky with sizes, if you don't set resizeToContent to true then the dividedBox will not resize itself if the content changes)
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>
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.