I am embedding a flash file in my flex file and then trying to add it to the stage. IU try addChild to a canvas element and to a container element, but it keeps giving me the error, the symbol "myBtn" is cannot be converted to a IUIcomponent.
I understand that I need to place everything inside some sort of component, but what is the proper way to do this in flex?
Adding to rawChildren isn't the way to go here. Containers ignore rawChildren when doing things such as layout, measurement, etc.
Instead, simply wrap it in a UIComponent:
[Embed(source="...")]
public var someSwf:Class;
public function addSwf():void
{
var swf:Sprite = new someSwf();
var wrapper:UIComponent = new UIComponent();
wrapper.addChild(swf);
this.addChild(wrapper);
}
Look here for info on Embedding swf files and embedding swf symbols.
I figured it out thanks to this post: http://craiggrummitt.blogspot.com/2007/11/how-to-add-children-in-flex.html
you use something called rawChildren. so I would do myComponent.rawChildren.addChild('mymc');
Here you can downlod a complement to conver a symbol into a flex component from Flash
www.adobe.com/go/flex_ck_en
You can add all your move into a symbol then convert to flex component
Select the symbol from the libary then go to:
Commands > Convert Symbol to Flex Component
then import the swc resultant in flex
finally add the elemento into flex:
public var swfImported:NameOfTheSymbol=new NameOfTheSymbol();
private function init():void{
stage.addChild(swfImported);
}
Related
I have code that will hide components dynamically; it uses [component].addStyleName("name") to add a style to a component, and that style is defined to hide the component.
I have a page which will have a large number of components; I can put them in an array and do this, but I'm hoping for a different way. I would like to assign all those components their own style - something like "costPanel" - and then use server-side vaadin code to alter the definition of the style "costPanel" at runtime.
The Page.Styles class in Vaadin has no methods for obtaining existing styles nor altering ones that are there -- the only methods are for adding them.
Is this possible in Vaadin, even if I have to do something on the client side for it?
This is perhaps best suited as a comment, but it does not really fit in there.
Not trying to be patronising, but it sounds like you're trying in a very complicated way to reinvent the wheel. component.setVisible(false) will do exactly what you need, as in the component will not take up any space since it won't actually exist in the DOM itself. Take a look at the example below:
Code:
public class LayoutWithInvisibleComponents extends VerticalLayout {
private int index = 0;
public LayoutWithInvisibleComponents() {
// add a visibility toggling button
addComponent(new Button("Toggle next", event -> {
Component component = getComponent(++index);
if (component instanceof Button) {
// just toggle the next one if it's a button
component.setVisible(!component.isVisible());
}
if (index == getComponentCount() - 1) {
// reset counter
index = 0;
}
}));
// add some invisible dummy buttons
for (int i = 0; i < 5; i++) {
Button button = new Button("Button " + i);
button.setVisible(false);
addComponent(button);
}
// and add a visual delimiter
Panel rightPanel = new Panel(new Label("---------- some visual delimiter ----------"));
rightPanel.setSizeFull();
addComponent(rightPanel);
}
}
Result:
Is there anything else I'm missing?
This also would make a better comment, but doesn't fit well enough there.
The following is from the Book of Vaadin:
Beware that invisible beings can leave footprints. The containing layout cell that holds the invisible
component will not go away, but will show in the layout as extra empty space. Also expand ratios
work just like if the component was visible - it is the layout cell that expands, not the component.
The phrase "show in the layout as extra empty space" convinced me that there would be blank, open, background-colored space where my component was supposed to be. I don't remember if I tried it, but I might have and had some other error that caused me to conclude my assumption was correct, and that the setting was for making it un-rendered but with the space still visible.
Vaadin has much better documentation than most of the industry, but in this case I got the meaning crossed up. In succeeding paragraphs they even have additional explanation that does say what I learned through this question, but the part quoted here seemed to contradict it.
I know that QML does not support CSS styling like widgets do, and I have read up on alternative approaches to styling/theming:
https://qt-project.org/wiki/QmlStyling
http://www.slideshare.net/BurkhardStubert/practical-qml-key-navigation/34
Common for these approaches is that they require the developer to specify the parts of the QML that can be styled, either by binding to a property in a “styling QML file/singleton”, or by using a Loader to load a different QML component based on style name. What I would like is something that works like the "id" selector in CSS instead of the "class" selector, so that the individual QML files do not have to know whether they will be styled later on or not.
My current approach make all the QML files look similar to this (using approach in link 2):
Main.qml
Rectangle {
Id: background
color: g_theme.background.color
//g_theme is defined in root context and loaded dynamically
}
What I would like to do is:
Main.qml
Rectangle {
Id: background
color: “green” // default color
}
And then have a styling file that defines (or similar)
Main.qml #background.color: red
Is this possible at the moment, or something that is in the pipeline for a future Qt version, or will the preferred way of styling continue to be something similar to the approach described in the links above?
The preferred way isn't applying a style on default components, but deriving from these components to create pre-styled custom components.
What I do for my projects :
First, I create one centralized 'theme' file, as a JavaScript shared module :
// MyTheme.js
.pragma library;
var bgColor = "steelblue";
var fgColor = "darkred";
var lineSize = 2;
var roundness = 6;
Next, I create custom components that rely on it :
// MyRoundedRect.qml
import QtQuick 2.0;
import "MyTheme.js" as Theme;
Rectangle {
color: Theme.bgColor;
border {
width: Theme.lineSize;
color: Theme.fgColor;
}
radius: Theme.roundness;
}
Then, I can use my pre-styled component everywhere with a single line of code :
MyRoundedRect { }
And this method has a huge advantage : it's really object-oriented, not simple skinning.
If you want you can even add nested objects in your custom component, like text, image, shadow, etc... or even some UI logic, like color-change on mouse hover.
PS : yeah one can use QML singleton instead of JS module, but it requires extra qmldir file and is supported only from Qt 5.2, which can be limiting. And obviously, a C++ QObject inside a context property would also work (e.g. if you want to load skin properties from a file on the disk...).
It could also be helpful to look at Qt Quick Controls Styles
When using Controls Styles it is not necessary to explicitly assign each property in the target control. All properties can be defined in a separate [ControlName]Style component (e.g. ButtonStyle).
Then in target component (e.g. Button) you can just reference to style component in one line of code.
The only one downside here is that Style components are available for Qt Quick Controls only. Not for any Qt Component.
I have followed the example code laid out in an earlier posting regarding styling GWT CellTables, replicating the code for the new GWT 2.4 DataGrids. Unfortunately, nothing seemed to work. All I want to do is set the font-size of the cells smaller, so in my local css file (see the second parameter of the #Source annotation in the linked post) I included:
.dataGridCell {
font-size: 6px;
}
Nothing happened. The font size stubbornly refused to change. Then I noticed this in the DataGrid code:
#ImportedWithPrefix("gwt-CellTable")
public interface Style extends CssResource {
I copied DataGrid into my workspace, along with the related three gif files, and commented out the one dependency on a protected method in AbstractCellTable (no empty table widgets -- oh well). I changed the prefix defined in the annotation to gwt-DataGrid -- and pfffft! -- still it didn't work.
So what am I missing here? Is that gwt-CellTable prefix correct in the annotation? Seems fishy to me, though I failed to get it to work with my change.
Turns out the names matter. Duh!
OK, got it working. Turns out it matters to use the same names. Duh!
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.DataGrid.Style;
import com.google.gwt.user.cellview.client.DataGrid.Resources;
public interface MyDataGridResources extends Resources {
public static final MyDataGridResources INSTANCE = GWT.create(MyDataGridResources.class);
#Override
#Source({DataGrid.Style.DEFAULT_CSS, "../resources/styling/mydatagridstyles.css"})
Style dataGridStyle(); // ***********************
}
When I made the name of the style the same as the name of the style interface in DataGrid.java ("dataGridStyle") then it started working.
I sorta kinda get it...but not quite. I will need think more about scoping rules, and also study exactly what happens to the resources parameter passed into the DataGrid constructor.
I just did it as described in the post you are linking to, and it works as expected. My Resources class looks like that:
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.DataGrid.Resources;
public interface CustomDataGridResources extends Resources {
#Source({DataGrid.Style.DEFAULT_CSS, "../resources/customDataGrid.css"})
CustomStyle dataGridStyle();
interface CustomStyle extends DataGrid.Style {
}
}
And then use that class when creating the DataGrid instance:
DataGrid.Resources resources = GWT.create(CustomDataGridResources.class);
gridUnits = new DataGrid<Unit>(50, resources, new UnitKeyProvider());
When you overwrite a style which is being set by the GWT CSS file, you need to add "!important" in your own CSS definition. Like this:
.dataGridCell {
font-size: 6px !important;
}
.dataGridEvenRow {
background: #ff0000 !important;
}
be careful when using the line
#Source({DataGrid.Style.DEFAULT_CSS, "../resources/customDataGrid.css"})
it means gwt uses both the default and your own css. i know it is coded like that but when you use copy & paste you may get confused like me why do you have both styles together.
I am having one mxml in which I am doing dodrag of buttons into other canvas I want to have acceptdragdrop in other file so that the canvas accepts dragged buttons
there is Panel.mxml in which I am writing
this.addChild(button);
button.addEventListener(MouseEvent.MOUSE_MOVE,dragTaskImage)
private function dragTaskImage(event:MouseEvent):void
{
.....
}
Now I want to have other function in workflow.mxml in which I accept drag?
There are several good examples and tutorials out there on drag and drop for Flex. Take a look at:
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64595-7fed.html
http://www.flexafterdark.com/tutorials/Flex-Drag-and-Drop
http://www.truespire.com/examples/dual-list-manager/
http://blog.flexexamples.com/2007/09/19/dragging-rows-between-two-different-flex-datagrid-controls/
I have a component which is created dynamically. I want to access the properties on it.
for example i create a vbox and i want to access the text font or gap of the component
var MyVBox: VBox = new VBox;
MyPanel.addChild(MyVBox);
How should it be done?
All properties and methods are accessed with "." (dot) notation.
Example:
myVBox.width = 400;
Styles are set using the setStyle() method. In your case that would be
myVBox.setStyle("fontFamily", "arial");
myVBox.setStyle("verticalGap", 20);
Check the docs at http://livedocs.adobe.com/flex/3/langref/ for the available properties and styles of each component.
The thing to remember when using ActionScript instead of MXML is that the style properties are not accessed as properties on the object but through the getStyle("propertyName") method. Font is a style for example.