I have these labels here and they are not appearing...at all I ran the debugged and they are being populated with text, but they just not appearing, please help.
<mx:VBox
height="1920" width="1080"
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:s="library://ns.adobe.com/flex/spark" xmlns:local="*" show="initModel()"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Grid id="floorPlansListDetail" width="1080" height="1920" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:GridRow id="floorPlansDetailRow" width="1080" height="500" backgroundColor="#691a3a">
<mx:GridItem height="500">
<mx:Label id="Name" text="This is a test." fontSize="48" height="200" color="#FFFFFF" visible="true" />
<mx:Label id="Series" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="Price" text="This is a test." fontSize="30" color="#FFFFFF" />
<mx:Label id="ElevationA" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="ElevationB" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="Beds" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="Baths" text="This is a test." fontSize="20" color="#FFFFFF" />
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:VBox>
its sooooo weird, if I put my label outside the grid it works and displays, but not inside the grid.
This code runs just fine for me:
<?xml version="1.0"?>
<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">
<fx:Script><![CDATA[
]]></fx:Script>
<mx:VBox
height="1920" width="1080"
xmlns:s="library://ns.adobe.com/flex/spark"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Grid id="floorPlansListDetail" width="1080" height="1920" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:GridRow id="floorPlansDetailRow" width="1080" height="500" backgroundColor="#691a3a">
<mx:GridItem height="500">
<mx:Label id="Name" text="This is a test." fontSize="48" height="200" color="#FFFFFF" visible="true" />
<mx:Label id="Series" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="Price" text="This is a test." fontSize="30" color="#FFFFFF" />
<mx:Label id="ElevationA" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="ElevationB" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="Beds" text="This is a test." fontSize="20" color="#FFFFFF" />
<mx:Label id="Baths" text="This is a test." fontSize="20" color="#FFFFFF" />
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:VBox>
</s:Application>
Is your mx import same as above?
Related
I've got question. I created my first WebForms Application. Now I am on my way to create Site.Master
(toolbar). So I write Menu from DevExpress controls, didn't change anything in Site.css and I have something that I can't understand.
When I run project via Chrome my Toolbar looks like:
[div class float-left][div class float-left] [div class float-right]
But when I reboot PC, run project again (compile), my Toolbar looks like:
[div class float-left] [div class float-right]
[div class float-left]
I have to delete my cache from Chrome and then everything is ok.
This is code for Site.Master:
<div class="float-right">
<dx:ASPxMenu ID="ASPxLogin" runat="server" Theme="Moderno" Font-Size="Small" Cursor="pointer" ShowAsToolbar="True">
<Paddings PaddingLeft="3px" PaddingRight="3px" />
<Items>
<dx:MenuItem Text="0" Enabled="False">
<Image Url="~/Images/Controls/btn-profile-black.png" UrlHottracked="~/Images/Controlsbtn-profile-white.png" UrlDisabled="~/Images/Controls/btn-profile-grey.png" />
<ItemStyle BackColor="Aqua" Font-Size="Small"></ItemStyle>
</dx:MenuItem>
<dx:MenuItem Text="A">
<Image Url="~/Images/Controls/btn-off-white.png" UrlDisabled="~/Images/Controls/btn-off-grey.png">
</Image>
<ItemStyle BackColor="#E06666" ForeColor="White">
<HoverStyle BackColor="#970000">
</HoverStyle>
</ItemStyle>
</dx:MenuItem>
</Items>
</dx:ASPxMenu>
</div>
<div class="float-left">
<dx:ASPxMenu ID="ASPxMenu" runat="server" Theme="Moderno" Font-Size="Small" Cursor="pointer" ShowAsToolbar="True">
<Paddings PaddingLeft="3px" PaddingRight="3px" />
<Items>
<dx:MenuItem Text=" ">
<Image Url="~/Images/logo.jpg" Height="32px"></Image>
<ItemStyle BackColor="White">
<HoverStyle BackColor="White">
</HoverStyle>
</ItemStyle>
<SubMenuStyle BackColor="#CC0000" />
</dx:MenuItem>
<dx:MenuItem Text="B">
<Image Url="~/Images/Controls/btn-home-black.png" UrlDisabled="~/Images/Controls/btn-home-grey.png" UrlHottracked="~/Images/Controls/btn-home-white.png" />
<ItemStyle BackColor="Aqua">
<HoverStyle BackColor="Black">
</HoverStyle>
</ItemStyle>
</dx:MenuItem>
</Items>
</dx:ASPxMenu>
</div>
<div class="float-left">
<dx:ASPxMenu ID="ASPxMenu1" runat="server" Theme="Moderno" Font-Size="Small" Cursor="pointer" ShowAsToolbar="True">
<Paddings PaddingLeft="3px" PaddingRight="3px" />
<Items>
<dx:MenuItem Text="C" BeginGroup="True">
<Image Url="~/Images/Controls/btn-view-black.png" UrlDisabled="~/Images/Controls/btn-view-grey.png" UrlHottracked="~/Images/Controls/btn-view-white.png">
</Image>
<ItemStyle BackColor="Aqua">
<HoverStyle BackColor="Black">
</HoverStyle>
</ItemStyle>
</dx:MenuItem>
<dx:MenuItem Text="F">
<Image Url="~/Images/Controls/btn-add-black.png" UrlDisabled="~/Images/Controls/btn-add-grey.png" UrlHottracked="~/Images/Controls/btn-add-white.png">
</Image>
<ItemStyle BackColor="#B6D7A8">
<HoverStyle BackColor="#009900">
</HoverStyle>
</ItemStyle>
</dx:MenuItem>
<dx:MenuItem Text="R">
<Image Url="~/Images/Controls/btn-bin-white.png" UrlDisabled="~/Images/Controls/btn-bin-grey.png">
</Image>
<ItemStyle BackColor="#E06666" ForeColor="White">
<HoverStyle BackColor="#970000">
</HoverStyle>
</ItemStyle>
</dx:MenuItem>
</Items>
</dx:ASPxMenu>
</div>
This is code for Site.css:
header, footer, hgroup,
nav, section {
display: block;
}
mark {
background-color: #a6dbed;
padding-left: 5px;
padding-right: 5px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
I have created a application with Background image using skin class. I want to show some images on top of the image in application. Can you please suggest how to do that in flex 4.
Code is here :
BackGroundImageskin:-
<fx:Metadata>
[HostComponent("spark.components.supportClasses.SkinnableComponent")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<s:BitmapImage source="#Embed('Img/asianwoman.jpg')" left="0" right="0" top="0" bottom="0" smooth="true"/>
Main application:-
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group visible="true">
<mx:Image source="Img/News1.png" visible="true" />
<s:Button label="My Button"/>
</s:Group>
Here New1.png is not displaying and only background image displaying
Use this for your skin (assuming standard web Application):
<s:Skin xmlns:fb="http://ns.adobe.com/flashbuilder/2009" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Application")]
]]>
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" />
<s:State name="disabledWithControlBar" />
</s:states>
<s:BitmapImage top="0" left="0" bottom="0" right="0" source="#Embed('img.jpg')" smooth="true" />
<s:Group top="0" left="0" bottom="0" right="0">
<s:layout>
<s:VerticalLayout horizontalAlign="justify" gap="0" />
</s:layout>
<!---
#private
Application Control Bar
-->
<s:Group id="topGroup" minHeight="0" minWidth="0" includeIn="normalWithControlBar, disabledWithControlBar">
<!-- layer 0: control bar highlight -->
<s:Rect top="0" left="0" bottom="1" right="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" />
<s:GradientEntry color="0xD8D8D8" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 1: control bar fill -->
<s:Rect top="1" left="1" bottom="2" right="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xEDEDED" />
<s:GradientEntry color="0xCDCDCD" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: control bar divider line -->
<s:Rect height="1" left="0" bottom="0" right="0" alpha="0.55">
<s:fill>
<s:SolidColor color="0x000000" />
</s:fill>
</s:Rect>
<!-- layer 3: control bar -->
<!--- #copy spark.components.Application#controlBarGroup -->
<s:Group id="controlBarGroup" top="1" left="0" bottom="1" right="0" minHeight="0" minWidth="0">
<s:layout>
<s:HorizontalLayout paddingBottom="7" paddingLeft="10" paddingRight="10" paddingTop="7" gap="10" />
</s:layout>
</s:Group>
</s:Group>
<!--- #copy spark.components.SkinnableContainer#contentGroup -->
<s:Group id="contentGroup" width="100%" height="100%" minHeight="0" minWidth="0" />
</s:Group>
</s:Skin>
This is the scenario:
<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" minWidth="955" minHeight="600">
<s:HGroup>
<s:Form>
<s:FormItem label="label1">
<s:TextInput/>
</s:FormItem>
<s:FormItem label="label2">
<s:TextInput/>
</s:FormItem>
<s:FormItem label="label3">
<s:TextInput/>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem label="label1">
<s:Label text="soemthing"/>
</s:FormItem>
<s:FormItem label="label2">
<s:Label text="soemthing"/>
</s:FormItem>
<s:FormItem label="label3">
<s:Label text="soemthing"/>
</s:FormItem>
</s:Form>
</s:HGroup>
</s:Application>
And the question is, which would be the right way to align each formItem of the left form with the ones on the right form?
Use TileLayout for your form:
<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">
<s:Form>
<s:layout>
<s:TileLayout requestedColumnCount="2"
verticalAlign="middle" />
</s:layout>
<s:FormItem label="label1">
<s:TextInput />
</s:FormItem>
<s:FormItem label="label1">
<s:Label text="something" />
</s:FormItem>
<s:FormItem label="label2">
<s:TextInput />
</s:FormItem>
<s:FormItem label="label2">
<s:Label text="something" />
</s:FormItem>
<s:FormItem label="label3">
<s:TextInput />
</s:FormItem>
<s:FormItem label="label3">
<s:Label text="something" />
</s:FormItem>
</s:Form>
</s:Application>
i have the following code:
<mx:Script>
//I WANT TO ADRESS THE FUNCTION INSIDE MY HBOX FROM HERE
</mx:Script>
<mx:DataGrid id="dg_uploads" x="10" y="10" width="500" height="350" editable="false" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn headerText="progress" sortable="true" paddingLeft="10">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Script>
<![CDATA[
public function updateProgress(event:CustomEvent):void {
trace(event);
bar.setProgress( event.data.bytesLoaded, event.data.bytesTotal );
}
]]>
</mx:Script>
<mx:VBox>
<mx:ProgressBar id="bar" labelPlacement="top" minimum="0" visible="true" maximum="100" verticalGap="0"
color="0x323232" label="{data.name}" direction="right" mode="manual" fontWeight="bold" trackHeight="10" width="280" bottom="0"/>
<mx:ProgressBar id="subbar" mode="manual" direction="right" labelPlacement="bottom" minimum="0" visible="true" label="{data.status}"
maximum="100" width="280" styleName="subBarStyle"/>
</mx:VBox>
<mx:Image source="images/Clear-Red-Button.png" useHandCursor="true" buttonMode="true" click="outerDocument.deleteItem(event)" />
<mx:Image source="images/Clear-Green-Button.png" useHandCursor="true" buttonMode="true" click="outerDocument.stopUploadProcess(event)" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
How can i adress the function inside the hbox script from outside the hbox script? I want to trigger it when the document starts
<s:TextArea id="txtAddress" x="118" y="31" width="150" height="88" maxChars="100"
tabIndex="2"/>
txtAddress.text="AAAAAAAAAAAA CCCCCCCCCCCCCCCCCCCCCC P OABCDEFGHIJKLMNOPQRSTUVWXYZWSDER-682021";
This actionscript code crashes flash plugin. Some times it will not crash but the text inside the text area will be overwrite twice. The same is happening with every browser I have tested. I think this is flash's bug.
(Please note that if width of the textarea or if the value changes, it will work fine)
Can any one comment on this?
Below is the markup code:
<s:BorderContainer x="2" y="32" height="125" width="565" borderColor="#488AC7"
backgroundColor="#EEF0EE" cornerRadius="2">
<s:TextInput id="txtPhoneNo" x="407" y="3" width="150" maxChars="15" tabIndex="3"/>
<s:Label x="12" y="13" text="Name" fontWeight="normal" />
<s:TextInput x="118" y="3" width="150" id="txtName" maxChars="100" tabIndex="1" />
<s:Label x="12" y="40" text="Address" fontWeight="normal"/>
<s:TextArea id="txtAddress" x="118" y="31" width="150" height="88" maxChars="100"
tabIndex="2"/>
<s:Label x="302" y="13" text="Phone No." fontWeight="normal"/>
<s:Label x="302" y="40" text="Mobile" fontWeight="normal" />
<s:TextInput id="txtMobile" x="407" y="31" width="150" maxChars="15" tabIndex="4"/>
<s:Label x="302" y="70" text="Email" fontWeight="normal" />
<s:TextInput id="txtEmail" x="407" y="60" width="150" maxChars="100" tabIndex="5"/>
<s:Label x="302" y="101" text="ECS Account NO"/>
<s:TextInput id="txtECSAcNo" x="407" y="91" width="150" tabIndex="6"/>
</s:BorderContainer>
This is isolated to your system or implementation.
What you have provided is functional:
<?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"
creationComplete="creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function creationCompleteHandler(event:FlexEvent):void
{
txtAddress.text = "AAAAAAAAAAAA CCCCCCCCCCCCCCCCCCCCCC P OABCDEFGHIJKLMNOPQRSTUVWXYZWSDER-682021";
}
]]>
</fx:Script>
<s:TextArea id="txtAddress"
x="118"
y="31"
width="150"
height="88"
maxChars="100"
tabIndex="2" />
</s:Application>
it seems somewhere else, you set the fontsize of the textarea to an invalid value. I had the same problem before, maybe somewhere you just set it to some value like "10px".