Flex 4: How to center a component that is larger than its container? - flex4

I am using Flex 4 Spark Components for this one.
I have a custom component that is larger than a certain container, and I need it to be centered in that container. Best using only MXML, styles and properties
This does not work as expected:
<s:BorderContainer x="300" y="300" width="200" height="200">
<s:Button label="Not centered" horizontalCenter="0" verticalCenter="0" width="300" height="250"/>
</s:BorderContainer>
Thanks!

Got it.
I noticed that using the whole Application as the Container in the example, the Component would center itself even when larger than the Stage. I cannot use another Application, so I used the next inherited class: SkinnableContainer, instead of BorderContainer, in the above example. It works properly

Related

I'm trying to reference an image (in a svg code) that is in the same folder that my svg is, but I tried several ways that didn't work

I have this file named loadingReviewButtonSpinner.gif, and this file is saved on my computer in the folder where I have my project images (assets/images), but I'm trying to reference to this file in my SVG, and it isn't working.
<svg
<image
width="70" height="70"
transform="translate(30.1 -7.5)"
href="loadingReviewButtonSpinner.gif"
/>
</svg>
I have also uploaded this same image (loadingReviewButtonSpinner.gif) to a server online, and when I do the reference to the online image, it working 100%
<svg
<image
width="70" height="70"
transform="translate(30.1 -7.5)"
href="https://tinypic.host/images/2022/05/18/animation_500_l1ki69jf.gif"
/>
</svg>
But I really need it to work for me referring to the folder where my project is.
And I already tried so many options, but none of them is working...
For example, I tried:
href="file://loadingReviewButtonSpinner.gif" (and the variations with the path)
href="//..//..loadingReviewButtonSpinner.gif"
href="file:///loadingReviewButtonSpinner.gif"
I did what was said in the comment and it worked.

Header image on SAPUI5 application

I am just trying to add the image on index.html. I have create a folder of images under webcontent and add the image in images folder. I am calling it in the following way:
<HBox >
<Image
src="{./images/abc1.jpg}"
width="100%"
height="100%"/>
</HBox>
But it is showing nothing on browser. Please advice.
You use curly brackets when you are trying to bind data from a model.
Since you are not using a model to bind data. You can remove it and try.
Code for the same is as mentioned here:-
<HBox>
<Image src="./images/abc1.jpg" width="100%" height="100%"/>
</HBox>

flex 4.6 background image skinning

Hi everyone I'm new in flash builder with flex 4.6...
I created a mobile app with navigator view theme but I want my own personalized theme which is a simple image jpg attached in my skin: backGround.mxml
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
<fx:Metadata>[HostComponent("spark.components.View")]</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<s:BitmapImage includeIn="normal" height="100%" source="assets/fondito.jpg" width="100%"/>
I imported the skin as skinClass in my HomeView, but it covers up all the other components... labels, list, buttons, etc...
How can i display all components above the skin?
Take a look at the skinParts that are necessary for the View class here.
You'll notice that you're going to need a contentGroup optional skin part. This allows you to layout your bitmap image relative to that. As a quick fix, here is some sample code (untested):
...
<s:BitmapImage includeIn="normal" height="100%" source="assets/fondito.jpg" width="100%"/>
<s:Group id="contentGroup"/>
...

How to theme Series when using a theme.xml in system.web.helpers.chart

The support on this is currently horrible.
I'm creating my own theme for a System.Web.Helpers.Chart by using a XML file.
I've figured that the XML is basically a serialized version of the UIDataVizualazation namespace.
It works fine but I have no idea how to set theme objects tied to the Series property.
<Chart >
<ChartAreas>
<ChartArea>
<AxisY>
<MajorGrid />
</AxisY>
<AxisX>
<MajorGrid />
</AxisX>
</ChartArea>
</ChartAreas>
<Legends>
<Legend />
</Legends>
</Chart>
This is something I can manage pretty easily but according to the Chart object System.Web.UI.DataVisualization.Charting.Chart
has a series property that is a collection of series objects and
<Series>
<Series />
</Series>
Just doesn't do it. So if someone can point me towards a Xml schema for this or a pointer on how to access the Series property so I can change things like isValueShownAsLabel attribute I would appriciate it
Through experimentation I found that the case matters.
It should be:
<Series>
<series>
</series>
</Series>
Also this property may be of usefulness to anyone that is looking for an answer to this:
CustomProperties="PieLabelStyle=Outside"
Which can be placed in a series or point and perhaps other elements as well.
A list of the properties can be found here.
You can Serialize and Deserialize Chart yourself.
Take a look here Chart Serialization
I know this is too late to help you now but you can change series properties such as line width, colour, and labelling using
<Series>
<Series Name="Default" _Template_="All" BorderWidth="3" IsValueShownAsLabel="True" />
</Series>

How do I get a usemap working within a firefox XUL document

In my XUL I have the following code fragments:
<map name="KeypadMap">
<area href="javascript:pad('A')" coords="1,1,31,31" shape="rect"/>
</map>
...
<hbox flex="1">
<image src="./keypad.png" width="32" height="32" useMap="#KeypadMap"/>
</hbox>
The image displays just fine, however, when I mouse over, the cursor does not change to a hand, and clicking does not call the pad function.
Similar code works fine in straight HTML, so there must be some trick to get it working via a Firefox XUL file.
You'll have to use a namespace to embed HTML inside of XUL. Check this guide.

Resources