iam learning Flex and practising skins. So, i just had one doubt:
I have written one custom skin named : ApplicationContainerSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 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:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Metadata>
[HostComponent("spark.components.Application")]
</fx:Metadata>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group horizontalCenter="0" verticalCenter="0">
<s:Rect left="0" right="0" top="0" bottom="0"
radiusX="10" radiusY="10">
<s:fill>
<s:SolidColor color="#CCCCCC" />
</s:fill>
</s:Rect>
<s:Group id="contentGroup"
left="30" right="30" top="30" bottom="30">
</s:Group>
</s:Group>
</s:SparkSkin>
My Doubt:
When I removed s:Group id="contentGroup" , iam unable to see any content inside my application, so why is this 'contentGroup' id necessary?
where this id predefinedly specified.? sorry if its a noob query, but iam eager to knew it.I even tried to check the source code, but I didnt found it, Could anyone tell me where it specified and how does my content render only after using this contentGroup id...? ( I mean, how it internally works? )
Awaiting your responses!
Skinnable Spark components specify "skin parts," identified by the id.
The Application component, which you are skinning, defines 2 skin parts - contentGroup and controlBarGroup, as you can see in the documentation here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Application.html#SkinPartSummary
The Application class uses the contentGroup skin part (if it has been added in the skin) to lay out the content. Skin parts can either be required or not. The contentGroup part is not required, and therefore when you left it out, the content just did not display.
Related
So me and a friend have made a tool using flex which we have released, we made the window 680x480 and people are saying its too small for them.
So what i want to do is include possibly a switch or something that switches the size from 640x480 to 800x600, so you have both options available to use.
I just wondered if this was possible? I have searched google all morning and cant find exactly what i need.
I am also pretty novice at this... my friend is the coder but he has no idea and no time to sort this out, so would be a great help if i could get some insight here please.
I failed to mention, it's not a scale, i have all the assets in the package for 800x600 aswell as the standard files so, i guess would be a state change, but i'm not sure if its possible to change state to a larger page.
Thanks.
Well, basically, you can occupy 100% width and 100% height by your SWF within the containing HTML page.
Then if you need a fixed size, you can organize your application within a Group container and size it accordingly.
Try this:
<?xml version="1.0" encoding="utf-8"?>
<s:Application
width="100%"
height="100%"
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:Group horizontalCenter="0" verticalCenter="0" width="{resolutionDropDownList.selectedItem.w}" height="{resolutionDropDownList.selectedItem.h}">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#FF0000"/>
</s:fill>
</s:Rect>
</s:Group>
<s:HGroup top="10" horizontalCenter="0" gap="5" verticalAlign="baseline">
<s:Label text="Size:"/>
<s:DropDownList id="resolutionDropDownList" labelField="label" selectedIndex="0">
<s:dataProvider>
<s:ArrayList>
<fx:Object w="640" h="480" label="640x480"/>
<fx:Object w="800" h="600" label="800x600"/>
</s:ArrayList>
</s:dataProvider>
</s:DropDownList>
</s:HGroup>
</s:Application>
Veeeeeery rough convertion from 640x480 to 800x600 resolution:
stage.scaleX = 800 / 640;
stage.scaleY = 600 / 480;
Does anyone know a way to apply style on selected text in a Spark DataGrid?
I think that the best way is to have an itemrenderer with textarea but after, I don't know how to do.
My goal isn't to change color label if cell is selected.
Indeed, in my dream, item is editable, and you can selected only some words inside cell and apply a specific style to the selected part of text (by click on a button, one for bold, one for italic...). Than, text may be store in database like html text.
I'd like use cell itemrenderer like a RichTextEditor but without ControlBar. In my case, I'd like to have only one control bar outside the datadgrid.
I'll happy, if you can help me.
Thanks
Best approach with Spark is generally a skin.
There's rudimentary control via properties, such as changing the selected color:
<?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">
<s:DataGrid selectionColor="0xff0000">
<s:dataProvider>
<s:ArrayList>
<fx:String>a</fx:String>
<fx:String>b</fx:String>
<fx:String>c</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:DataGrid>
</s:Application>
To implement an item renderer for a GridColumn, use States to define how the selected state will appear
GridColumnItemRenderer
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
clipAndEnableScrolling="true">
<s:states>
<s:State name="normal" />
<s:State name="selected" />
</s:states>
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void
{
lblData.text = data[column.dataField]
}
]]>
</fx:Script>
<s:Label id="lblData"
color.selected="0x00ff00"
top="9"
left="7" />
</s:GridItemRenderer>
DataGrid
Item renderer above is specified from a Spark GridColumn, as in:
<s:DataGrid>
<s:columns>
<s:ArrayList>
<s:GridColumn itemRenderer="GridColumnItemRenderer" />
</s:ArrayList>
</s:columns>
</s:DataGrid>
I have googled around but the only resource for teaching me how to create an Adobe Air Desktop Application uses mx controls instead.
inside app-xml i have set transparent to true and systemChrome to none.
the following is my main mxml
<?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"
xmlns:dragdrop="org.robotlegs.demos.draganddrop.*"
xmlns:view="org.robotlegs.demos.draganddrop.view.*"
mouseOver="layoutCanvas.visible = true;"
mouseOut="layoutCanvas.visible = false;"
>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
s|Application {
background-alpha:"0.7";
padding: 0px;
}
</fx:Style>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<dragdrop:DragAndDropContext contextView="{this}"/>
</fx:Declarations>
<s:Image id="background" width="100%" height="100%"
source="#Embed('theme/assets/MaxBackground.png')"/>
<s:BorderContainer id="layoutCanvas" width="100%" height="100%" visible="false">
<s:Image id="applicationClose" right="5" top="2"
click="stage.nativeWindow.close()"
source="#Embed('theme/assets/buttons/CLOSE WINDOW icon.png')"/>
<s:Image id="applicationMaximize" right="25" top="2"
click="stage.nativeWindow.maximize()"
source="#Embed('theme/assets/buttons/EXPAND WINDOW icon.png')"/>
<s:Image id="applicationMinimize" right="45" top="2"
click="stage.nativeWindow.minimize()"
source="#Embed('theme/assets/buttons/COLLAPSED WINDOW icon.png')"/>
</s:BorderContainer>
</s:WindowedApplication>
I have two issues.
1) the initial application window size. How can i set this to 100% full screen?
2) there is a strange grey horizontal footer at the bottom. How do i get rid of it? See here
I do not wish to use mx controls. I want to use sparks controls as much as possible.
Thank you.
1) the initial application window size. How can i set this to 100% full screen?
To do this you can add a CREATION_COMPLETE handler to your application and within that handler add a line similar to:
this.maximize() where this is you WindowedApplication.
2) there is a strange grey horizontal footer at the bottom
From the sounds of it, this is the status bar. Try setting the showStatusBar property on you WindowedApplication root tag to false :
showStatusBar="false"
Hope this helps.
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>
I'm writing a s:ItemRenderer to render some simple graphical components in my app. Each element can have multiple shapes that can be selected by the user, i.e. a certain element can be a square, or a circle, or a star, or whatever else.
The simplest way I could think for doing this was to include all possible shapes in a s:Group and then manage their visible tag depending on what shape the user has selected. Is there a better way to do that?
Also, if I encapsulate the group in a separate MXML component, how do I propagate the state of the itemRenderer (say "hovered") down to the MXML component that manages the shapes?
thank you!
f
Edited: here's a code snippet to better explain the situation. Let's say you want to display three types of objects alternatively - the IR below with an AS snippet that turns visible to false for 2 out of the 3 objects definitely does the trick, but seems so ugly to me. In the mean time I found setCurrentState(stateName:String, playTransition:Boolean=true) to propagate the state down, so that's solved.
<s:ItemRenderer>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
</s:states>
<s:Group width="100%">
<s:Rect width="20" height="10" radiusX="3" radiusY="3">
<s:stroke>
<s:SolidColorStroke color="Black" weight="1" pixelHinting="true"/>
</s:stroke>
<s:fill>
<s:SolidColor color="red" />
</s:fill>
</s:Rect>
<s:Rect id="square" width="10" height="10" radiusX="3" radiusY="3">
<s:stroke>
<s:SolidColorStroke color="Black" weight="1" pixelHinting="true"/>
</s:stroke>
<s:fill>
<s:SolidColor color="green"/>
</s:fill>
</s:Rect>
<s:Ellipse id="circle" visible="true" width="10" height="10">
<s:stroke>
<s:SolidColorStroke color="Black" pixelHinting="true" weight="1"/>
</s:stroke>
<s:fill>
<s:SolidColor color.normal="yellow" color.hovered="0xCEDBEF"/>
</s:fill>
</s:Ellipse>
</s:Group>
The simplest way I could think for
doing this was to include all possible
shapes in a s:Group and then manage
their visible tag depending on what
shape the user has selected. Is there
a better way to do that?
Yes. Item renderers need to be made as light weight as possible. Using the includeInLayout would be a bit better since it will only add what you need to the display list.
Also, if I encapsulate the group in a
separate MXML component, how do I
propagate the state of the
itemRenderer (say "hovered") down to
the MXML component that manages the
shapes?
I'm not quite sure I understand the question. Item renderer are data driven, so their instances have no reliable state. Renderer instances may display any given data item at any given time. Any information passed to an item renderer should be passed down through it's data item or you will run into syncing errors in your display.