Hello I am having issue with showing everything from my flex application. It only shows around of the whole application.
My application is as such:
<?xml version="1.0" encoding="utf-8"?>
<s:Application 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%"
xmlns:local="*">
<mx:ViewStack id="mainstack" width="100%" height="100%" >
<mx:HBox id="Mod1" width="100%" height="100%" label="Mod1" horizontalAlign="center" verticalAlign="middle">
<local:modloader url="Mod1.swf" id="mod1" />
</mx:HBox>
<mx:HBox id="Mod2" width="100%" height="100%" label="Mod2" horizontalAlign="center" verticalAlign="middle">
<local:modloader url="Mod2.swf" id="mod3" />
</mx:HBox>
<mx:HBox id="Mod3" width="100%" height="100%" label="Mod3" horizontalAlign="center" verticalAlign="middle">
<local:modloader url="Mod2.swf" id="mod3" />
</mx:HBox>
</mx:ViewStack>
</s:Application>
I also tried putting the following lines in initialize function of Application container but in vain:
systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL (or TO_FIT);
systemManager.stage.align = StageAlign.TOP;
In fact when using SHOW.ALL..the whole application is as if squeeed to some 50% which makes everything small and this is not nice to view.
I also modified the index.template.html and have put the width and height to 100% instead to explicit values.
BUT my application only shows around 70%..the rest(at the bottom) go beyond the screen. (Just note that my screen resolution is 1366 x 768)*
Any bright idea why this does not work??
Try setting the minHeight property of your application to 100 and see if it helps.
Related
I am actually just learning flex, and i am getting confused with some parts. The problem is that the background image i have set in the skin works fine until i add more elements, it then just becomes a white background rather than laying the elements over the top.
I am starting to think im misunderstanding how this works. I don't understand why i need to have <s:Group id="contentGroup" /> for the image to show in the first place...this just seems like a redundant tag?
Here is the main code and the skin:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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="800" height="523" maxWidth="800" maxHeight="523" initialize="httpService.send()" showStatusBar="false" backgroundColor="white" backgroundAlpha="1">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
public var returnData:ArrayCollection;
protected function httpService_handler(event:ResultEvent):void{
returnData = event.result.people.person;
}
]]>
</fx:Script>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
</fx:Style>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:HTTPService id="httpService" url="" result="httpService_handler(event)" />
</fx:Declarations>
<s:BorderContainer borderVisible="false" mouseDown="nativeWindow.startMove();" skinClass="MainStyle" width="800" height="523" id="container" >
<s:HGroup left="100" top="100" id="newsSlider" width="100" height="100">
<s:Label>
<s:text>Test</s:text>
</s:Label>
</s:HGroup>
</s:BorderContainer>
</s:WindowedApplication>
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.BorderContainer")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="disabled" />
<s:State name="normal" />
</s:states>
<!-- SkinParts
name=contentGroup, type=spark.components.Group, required=false
-->
<s:Group id="contentGroup" width="800" height="523">
<s:BitmapImage id="bg" source="#Embed('/School Catchup/libs/images/App-BG8.png')" scaleMode="stretch" left="0" top="0" right="0" bottom="0" width="800" height="523" />
</s:Group>
</s:Skin>
contentGroup is the only "skinPart" of the SkinnableContainer component, which is the base class for BorderContainer. It's not a required skinpart (the compiler would've thrown you an error otherwise in your previous version where you didn't have the skinpart in your skin).
What is a skinPart?
It's a contract between the host component and its skin. Essentially the host component is instructing the skin (through metadata) that it needs this and this and that element (skin part) in order to function correctly. Some of these elements are absolutely required for the component to function, some are optional.
What is the contentGroup skinpart?
It's the container element to which SkinnableContainer will add its nested elements. As an example:
<s:SkinnableContainer>
<s:Label text="hello"/>
</s:SkinnableContainer>
behind the scenes, the Label instance will be added to the contentGroup skinpart of SkinnableContainer's skin.
So how do I get my example to work?
As you can see from what I explained before, the contentGroup element is just a placeHolder in the skin. If you want to add "chrome" to your custom component, add it outside that Group:
<s:BitmapImage id="bg" source="#Embed('/School Catchup/libs/images/App-BG8.png')" scaleMode="stretch" left="0" top="0" right="0" bottom="0" width="800" height="523" />
<s:Group id="contentGroup" width="800" height="523"/>
This will display the image behind the contentGroup and your Labels will now be added to it without removing the BitmapImage that you declared in there.
This is just a short explanation of the skinning mechanism in the context of your needs. I suggest you do some research on this specific topic to really understand how it works.
Here is the hierarchy of my controls:
<Canvas width="100%" height="100%">
<ViewStack width="100%" height="100%">
<box id="box1" width="100%" height="100%">
<AdvancedDataGrid width="100%" height="100%"/>
</box>
<box id="box2" width="100%" height="100%">
<SomeOtherControl width="100%" height="100%"/>
</box>
</ViewStack>
</Canvas>
My ADG is having around 30 - 40 columns and i am seeing two horizontal scroll bars, 1 is coming from ADG which is ok but another one is coming from parent container, so it seems ADG's width is getting assigned more than the parent container.
I can't set the width of ADG to explicit value because it is causing problems in scaling.
Please advise/Help.
Instead of setting width="100%" on your ADG, set it to width="{box1.width}"
This must be a simple problem, but I can't get my head around it. I have a resizable title window. Inside I just want a VGroup to hold the contents of the form and an HGroup to have a few buttons at the bottom. Very standard stuff.
<!-- Content -->
<s:VGroup id="content" height="340" width="100%">
...more stuff in here...
</s:VGroup>
<!-- Buttons -->
<s:HGroup id="buttonGroup" width="100%">
...buttons in here...
</s:HGroup>
Horizonal resizing works fine. However, I want it to behave such that when the TitleWindow is resized vertically that the buttons stay in the same place relative to the TitleWindow and the content VGroup is resized vertically. But I don't know what to set the height of the VGroup to?
Ideally it would be like this:
height="{this.parent.height - buttonGroup.height - top*
or something like that....
You can also try the following trick:
<s:VGroup id="layoutContainer" width="100%" height="100%">
<s:SkinnableContainer id="content" height="100%">
....content here....
</s:SkinnableContainer>
<!-- Buttons -->
<s:HGroup id="buttonGroup">
... buttons here...
</s:HGroup>
</s:VGroup>
The intent is to make the content-container take as mush as possible vertical space within the VGroup.
Let me know if that worked for you!
Use constraint properties.
You could try for AS:
content.top = 0;
content.bottom = buttonGroup.height;
buttonGroup.bottom = 0;
But better put it to MXML definition of the components
<s:VGroup id="content" top="0" bottom="{buttonGroup.height}" width="100%">
...more stuff in here...
</s:VGroup>
<s:HGroup id="buttonGroup" bottom="0" width="100%">
...buttons in here...
</s:HGroup>
Add some paddings and margins if you like
When I create an HGroup and add elements to it, it adds the elements from left to right.
How can I change it to add Elements from right to left?
It sounds like you want to have the same controls and code as in usual MXML but with orientation of elements from right to left. So you need Flex SDK 4.1 and its Layout Mirroring feature. You can refer to the documentation how to use it.
This is the quick sample code:
<?xml version="1.0" encoding="utf-8"?>
<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">
<fx:Script>
<![CDATA[
[Bindable]
private var currentDirection:String = "ltr";
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup change="currentDirection = selectorsGroup.selectedValue.toString()" id="selectorsGroup" />
</fx:Declarations>
<mx:VBox horizontalCenter="0" verticalCenter="0">
<s:HGroup id="controls" layoutDirection="{currentDirection}">
<s:Button label="1" />
<s:Button label="2" />
</s:HGroup>
<s:HGroup id="selectors">
<s:RadioButton group="{selectorsGroup}" label="LTR" selected="true" value="ltr" />
<s:RadioButton group="{selectorsGroup}" label="RTL" value="rtl" />
</s:HGroup>
</mx:VBox>
</s:Application>
I am using Flash Builder 4 Burrito Preview - builing a Mobile Application. I have a custom component called footer.mxml. That footer has 4 buttons, and one of them has a lable that is bound to cartValue. I am trying to maintain a global variable called cartValue within all views and footer component.
footer.mxml
<s:Group 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="64" chromeColor="#000000" fontSize="10">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:CurrencyFormatter id="currencyFormatter"
currencySymbol="$"
useThousandsSeparator="true"
precision="2" />
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
public var cartValue:int;
]]>
</fx:Script>
<s:HGroup width="100%" contentBackgroundColor="#000000" paddingBottom="0" paddingLeft="0"
paddingRight="0" paddingTop="0">
<s:Button x="0" y="624.5" width="25%" height="64" label="Account" chromeColor="#2259AA"
enabled="true" fontSize="10" fontWeight="bold" icon="#Embed('assets/user.png')"/>
<s:Button x="121" y="624.5" width="25%" height="64" label="Orders" chromeColor="#2259AA"
fontSize="10" icon="#Embed('assets/doc_lines_stright.png')"/>
<s:Button x="241" y="624.5" width="25%" height="64" label="Help" chromeColor="#2259AA"
fontSize="10" icon="#Embed('assets/spechbubble.png')"/>
<s:Button x="360" y="624.5" width="25%" height="64" label="{currencyFormatter.format(cartValue)}" chromeColor="#2259AA"
fontSize="10" icon="#Embed('assets/shop_cart.png')"/>
</s:HGroup>
</s:Group>
RincoTest.mxml
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
backgroundColor="#000000" firstView="views.RincoTestHome"
>
<fx:Style source="RincoTest.css"/>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
public var cartValue:int;
]]>
</fx:Script>
<s:titleContent>
<s:Image left="1" top="3" width="173" height="75" backgroundAlpha="1.0" smooth="true"
source="assets/iphone_large.png"/>
</s:titleContent>
<s:navigationContent>
<mx:Spacer width="10" height="82"/>
</s:navigationContent>
</s:MobileApplication>
And this is how I am implementing it
<components:footer x="1.65" y="614.95" width="100%" height="64" cartValue="{cartValue}"/>
I have tried to bind Application.application.cartValue and
MobileApplication.application.cartValue. Neither of them work.
If there is a better way to maintain a cartValue across the entire application please let me know. This is my first attempt with Flex.
Thanks,
Ernie
Use a static variable in the component.
Reference it as ComponentName.staticVar. Usually, everything that needs to know about the global already knows about (e.g. imports) the component file.
Cheers
Another solution is using a singleton pattern: a single instance that everything references through a static accessor.
The effect is about the same. The only advantage to a static reference to an instance over static properties is that the instance can be part of an inheritance and can fulfill an interface.
I've also had some intermittent problems with binding to static values, but that might have been a previous version, PEBCAK, etc.
Cheers