Flex UI Inconsistencies - apache-flex

I am having some issue with consistency across different machines with my flex application.
There are three things that I have noticed with my application. On my development machine (Windows XP) I can not reproduce these issues.
I have noticed them on a Windows Vista machine as well as a Windows 7 machine.
The three things that I have found are:
Label's will be truncated with '...'
Tabs in a tab navigator will be truncated with a '...'
Some Images will be rendered with an inconsistent width and height
My labels are defined pretty simply
<mx:Label x="261" y="15" text="Date Prepared" fontWeight="bold" width="113"/>
Tabs are custom components but defined in a pretty standard format:
<mx:TabNavigator borderStyle="solid"
x="10" y="10" width="665" height="450" id="tabs" creationPolicy="all">
<local:FormPanel id="formPanel" name="formPanel"
label="Incident Details "
width="665" height="450"/>
</mx:TabNavigator>
You may notice extra white space following the label in the custom FormPanel, I have found that this might help solve a subset of the truncation issues (not 100% sure).
As for my images, again, I am not doing anything to amazing:
<mx:Image id="vehicle_image"
source="#Embed(source='../../../../../images/icons/basic/vehicles.swf')"
height="45" width="45" toolTip="Vehicles"
toolTipShow="handleToolTipShow(event)"
click="showBar(event, vehicle_bar)" enabled="true" x="47" y="0"/>
The image is contained in a canvas and I will have about 10 of these images all sized 45x45. On certain machines I will see 3 of the 10 images rendered smaller what would appear about 30x30 relative to the other 45x45 sized images.
The problem I am having is that I can not reproduce these issues on my development machine, and do not have any clue on how to fix these issues. I would expect that the things I am seeing are bugs in the FlexSDK, but even if they are bugs I do need a temporary work around.
Any ideas?

For some reason it won't let me add a comment, but..
This sounds a lot like some of the changes (CSS fixes) put in from Flex 2 to 3 (maybe 3 to 4 as well?) (Button components can do this too if the width is a fixed size.)
Are you absolutely sure that your development machine is running the same version of the app as the others? If you're using Flex/Flash Builder's "run" functionality to run on the dev machine, but building and deploying with Flex Ant tasks or some kind of separate build for the others, it's possible to have this happen by using different SDKs even though the code hasn't been changed at all.

Related

Display HTML text in the Adobe Air Label

I am trying to display HTML text inside the Label in my Adobe Air mobile application, so far
I realized that Label doesn't support HTML, I went through the few solutions I found so far on the web:
Instead of Label - User TextArea and then use:
StyleableTextField(message.textDisplay).htmlText = messageText;
and in the TextArea declaration - specify mobile skin
<s:TextArea editable="false" selectable="false" skinClass="spark.skins.mobile.TextAreaSkin" id="message" x="0" y="0" width="100%" height="100%" paddingLeft="5" paddingRight="5" textAlign="left"/>
First of all, HTML still doesn't work, instead of converted HTML it just shows me ..... garbage, but even if it would have worked - TextArea component looks different than Label and doesn't feet in the design I am implementing.
User RichText component - unfortunately it's not supported in mobile apps
Any other ideas?
Yes, HTML is not supported in the Label and TextArea components for Spark (it was supported in Halo, or the mx components).
The only Flex components that officially do support it are RichText and RichEditableText. The skins for these components are not mobile optimized, but they run on mobile just fine. You may run into some speed issues when using massive amounts of it, but you can still use them (as you can with most, if not all, other components that aren't mobile optimized).

Flex embed swf : blank if embedded with spark works if linked or with mx

I have a very strange error in Flex
<s:Image width="27" height="39" source="assets/cards/down.swf"/>
Works perfectly (down.swf is a swf with no script inside at all)
But
<s:Image width="27" height="39" source="#Embed('assets/cards/down.swf')"/>
Shows me nothing at all !
Any idea why ?
(I tried with PNG and JPG and with PNG/JPEG everything works normally.
and it works with
<mx:Image width="27" height="39" source="#Embed('assets/cards/down.swf')"/>
Regards
This is expected behavior. You're trying to load a SWF using an Image component.
<mx:Image> extends the <mx:SWFLoader> class. As such, you can imagine that an <mx:Image> therefore has the ability to load SWF files.
However, the <s:Image> does not extend <mx:SWFLoader>, it extends SkinnableComponent.
As such, you cannot use <s:Image> to work with SWF files like you could with <mx:Image>. I would recommend you use a <mx:SWFLoader> instead.

GroubBox in Flex 3 with heading

I need to have a group box in flex 3 - simple border with a heading at the top but the heading at the top should not have any border line through it.
I searched on the Net and the closest that I could get with source is
http://keg.cs.uvic.ca/flexdevtips/titledborder/srcview/
But the problem with this is that I can’t view in design mode what is on the group box. Does anyone know how to fix this?
Then I decided to go with canvases and an input box
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:TextInput
text="This should be my label"
x="124" y="72"
width="166" height="32"
borderStyle="solid"
fontWeight="bold"
color="#003366" backgroundColor="#D81010"/>
<mx:Canvas x="107" y="88" width="263" height="200" borderStyle="solid" label="Testst">
</mx:Canvas>
</mx:Application>
But I can't seem to get the Textinput to be ontop of the canvas. There is a line through the box as in the below picture
Does anyone know how to resolve this or have a better idea?
thanks
What you are looking for is a component equivalent to "fieldset" in HTML. It would be easier to use create component for better styling control. For Flex 2/3, you may use jwopitz-lib; but if you could use Flex 4 or above, try the ShinyLib component (specifically the FieldSet class and FieldSet skin). It would be easier if you could migrate the application to Flex 4 or the latest Flex, you would be exposed to a lot more components.
To get a custom component to work in design mode, you need to compile the code into a SWC library. Then reference the SWC library in your application project. I've never bothered to do this, I imagine you may get mixed results. I haven't bothered w/design mode in over 5 years :)
The reason the "window" component (in the URL that you linked to in the question) works in design mode is that it extends the Flex component TitleWindow. Since it extends an existing Flex component, I am assuming design mode knows how to render it.

Should I use PurePDF or AlivePdf

My company has only two flex pdf libraries available, AlivePDF and PurePDF.
I am having trouble finding very good documentation related to what I need to do so I hope to get some feedback from people who have used these libs.
The primary thing I need to do is paste a group of DisplayObjects into a pdf, with decent quality of the image. I had used org.alivepdf.pdf.PDF.addImage(..) function before but the image quality was very poor and somehow the process cropped off parts of the image, making it unusable.
Here is an example of something that might need to be pasted into a pdf:
<s:HGroup id="imageGroup">
<s:Label text="Chart Title" />
<mx:Legend dataProvider="myChart" />
<mx:LineChart id="myChart">
<!-- do chart stuff here -->
</mx:LineChart>
</s:HGroup>
PDF.addImage() generates low resolution graphics. For higher quality, use this instead:
take a snapshot of the image group using ImageSnapshot.captureImage(), setting the dpi to 300
add the resulting bytearray to the PDF using addImageStream()
I have used AlivePDF for a while. There are a few quirks and the documentation is sparse, but this is workable and the results are great.

What is the state of a TextArea in the Flex when we could not enter the cursor in it and no text is passed into it

I need to know that what is the state or property of text-area in the flex when we could not enter the text in it, my concern is that whether the text has entered(may after it deleted) or not.
(I think i try my best to explain my problem)
Thanks
Thanks of all of you that you provide the solution/answer
Both MX and Spark TextAreas supports editable and selectable properties. The first one prevent user to change text, the second - to select it:
<mx:TextArea editable="false" selectable="false"
text="Sample Text"/>
<s:TextArea editable="false" selectable="false"
text="Sample Text"/>
I am not sure if I understand your problem, but it sounds like it could be the Safari 5.1 / Flash Debug player bug. Try switching to another browser when debugging/testing your project. If you get the same behaviour, forget everything I just said.
Read more here:
https://discussions.apple.com/message/15666579#15666579
"I also don't think this was intentional at all.  I think it was just a bit careless (Apple pushing out Safari 5.1 before it being thoroughly tested - the flash problem is only one of several issues I've noted with the new browser.  Very dissapointing.)."
If you're talking about MX TextArea you can disable component:
myTextArea.enabled = false;
If you're using Spark TextArea you can use editable property.

Resources