I am creating 2 elements dynamically in QML and need to assign them each an anchor binding. When I add the anchors.right and anchors.left syntax to the properties object of the createObject() function, the anchors are not working:
current_column_on_left = column_component.createObject(parent_element, {anchors.right: previous_column_on_left.left})
current_column_on_right = column_component.createObject(parent_element, {anchors.left: previous_column_on_left.right})
Qt Creator gives me the annotation/error "Expected token ','". I also tried making them strings and camel case, neither of which worked. However, when I add the property bindings separately using Qt.binding() function, everything works fine:
current_column_on_left.anchors.right = Qt.binding(function(){return previous_column_on_left.left})
current_column_on_right.anchors.left = Qt.binding(function(){return previous_column_on_right.right})
Why is the first code block not working? I would prefer not to have the two extra lines of code if I can avoid it.
The error is because javascript doesn't know what property groups are - only qml does.
This is also invalid logic. In createObject(parent_element, {anchors.left: previous_column_on_left.right}) property previous_column_on_left.right is resolved when qreating the javascript {}-style object, which leaves you bound to a fixed anchor which is never changed. But Qt.binding has a function, and resolves nothing when creating the object, which provides you with the correct binding.
Related
I have a TableView for which I've defined my own itemDelegate. Now, from within this delegate I can access the value for the column using styleData.value, but I'd also need to access the other properties in this same item but I can't find how to.
I need this, because the text styling needs to change depending on some other property of the item model.
Any ideas? thanks!
There is some documentation missing. Within the item delegate you can access the following (taken from the source code of TreeView.qml):
styleData (see documentation)
model (currently not documented)
modelData (currently not documented, not sure about this but I guess it's similar to ListView)
(By the way, what's also missing in the documentation but which is useful is styleData.role. Also, the documentation of the other delegates lacks some available properties too; the best is to peek into the source code of the QML file and have a look for the Loader element which instantiates your delegate. As a plus you learn how that creepy stuff works. ;))
With model and the row/column information you can then navigate to the item data. This code depends on the type of model.
If you're using QML's ListModel, then you can use model.get: model.get(styleData.row)[styleData.role] should then work (untested since I use it rarely, please give feedback).
If you're using a C++ QAbstractItemModel or friends, the best is to add a slot to the model class which takes just the row and role name, since that's the information the TableView works with (nor with role numbers nor with columns...).
However in both cases you shouldn't use the expression in a property binding! The notification system will not work since you don't use the property system for accessing the data. According to your question, I guess you wanted to use it in a expression with binding. I don't know how to properly listen to changes in the model manually.
An alternative approach is to access the other items of the row and provide a property there. Some hints:
From within one item, you can access other items of the same row by walking the object tree up twice (first to the Loader which instantiates your component, then to the actual row) and then down twice (first to the particular child object which is a Loader, then its instantiated item). You need to know the column number you want to access (not the role name), I assume you want to access the first column (index 0):
parent.parent.children[0].item
You can provide the model data using a property in each item. Assuming a simple Text element this might be:
Text {
property variant value: styleData.value // <-- Here you make it available
// your other stuff
}
Putting them together could look like the following. In this example I assume the first row contains an integer, and if it is zero, the second column should be red.
// (within TableView)
itemDelegate: Text {
property variant value: styleData.value
text: styleData.value
color: (styleData.column == 1 && parent.parent.children[0].item.value === 0)
"red" : "black"
}
I think it's pretty easy if you read the source code of TableViewItemDelegateLoader.qml (it is a private code in qtquickcontrol)
To access any role you use use : model[your_role_name] .
For exp: model["comment"]
Faced with same problem today, this is result of my investigations (Qt 5.2.x)
If you have hard limit to TableView, there is only one correct solution - use model.get(styleData.row)["roleForStyling"] as #leemes wrote. But it will very slow if you have big amount of data in model and using, for example, proxy model for sorting/filtering.
Direct solution from #leemes answer is great, but in general case not be working, because in TableView any Item wrapped in Loader and therefore independent from parent and other items:
When some item is created (where you want to change text style)
another element (from which to receive identity) cannot yet be
created
You may not have "parent" on item creation (i.e. binding will
be broken)
In my case, the best solution for deep customise was creation of the simple wrapper for ListView. In this case you have access for complete row data in delegate without the overhead. Highlights for making component ("My own ListView as table"):
Create standalone header (Rectangle or Item) - do not use header form ListView.This make it fixed for any amount of data.
Wrap ListView to ScrollView (if you need scrollbars)
Use Clip: true property in list for make correct
Set style for highlight and set highlightFollowsCurrentItem:true in ListView
As bonus in future this may be used for make "TreeTable" :)
I have a flex4 applciation (mx+spark). When I use:
FlexGlobals.topLevelApplication.styleManager.loadStyleDeclarations(skinName, true);
This works fine: new style is applied.
The trouble is when I apply a new style, it mixes both: this happens because I need to Unload style first.
I try to unload it with:
FlexGlobals.topLevelApplication.styleManager.unloadStyleDeclarations("style/normal.swf",false);
And I always got an error:
ReferenceError: Error #1069: La property 0 cannot be found on Number
and there is no default value.
at normal/unloadOverrides()[null/normal-generated.as:721]
at normal/unload()[null/normal-generated.as:676]
Any idea on how to load/unload swf css in Flex4?
The styles will be updated the next time one of the following methods is called with the update property set to true:
clearStyleDeclaration()
loadStyleDeclarations()
setStyleDeclaration()
unloadStyleDeclarations()
Typically, if you call the one of these methods multiple times, you set this property to true only on the last call, so that Flex does not call the styleChanged() method multiple times.
More information here.
how come that when I attach onchange by attribute and call it
onchange="validateDate(FPR_CURR_FROM);"
it works, but when I use a ASP .NET validator, and my attached function is called like :
function anonymous() {
ValidatorOnChange(event);
validateDate(FPR_CURR_FROM);
}
I get error: FPR_CURR_FROM is undefined.
First off: I know that using FPR_CURR_FROM to access element is BAD, and I should use getElementByID etc... And I will change it eventually. But as I bumped into that code, I'm curious what caused it - propably visibility of variables I guess.
I think it's a scoping issue, yes, it would take seeing more code and how anonymous is called, but that is what it looks like to me from what I see... One way around that is to attach the FPR_CURR_FROM variable to the window object, and access it via window.FPR_CURR_FROM...
How can I get the width of my LinkButton object ?
myLinkButton = new LinkButton();
myLinkButton.label = "blabla";
myLinkButton.setStyle("fontSize", 24);
myContainer.addChild(myLinkButton);
trace (myContainer.width); //this doesn't work because I haven't directly set the attribute
thanks
First, what does that trace() show? Is it null or undefined or NaN or simply a wrong value?
Then, there are several ways I can think of how you could get around this problem:
Try using getBounds() or getRect(). These methods return a Rectangle object working as the DisplayObject's bounding box (including all coordinates and dimensions). Sometimes Flex behaves a bit weird and returns wrong/off results for the coordinates or dimensions of objects.
Try experimenting with validateSize() and/or measuredWidth. Perhaps you're trying to access the width property too soon so that Flex cannot do the measuring/layouting in time.
Similar idea: what happens if you use myContainer.callLater(trace, [myContainer.width]); (assuming your myContainer inherits from UIComponent)? If you do get a valid result using callLater() but not when accessing width directly then Flex just hasn't had a chance to layout and update the container.
You could also try using this method, which creates a Bitmap from the object and returns the Bitmap's height/width. This is especially useful if you have components with visible = false in your container, because Flex doesn't handle invisible components well in that regard.
Finally, you could try accessing $width in the mx_internal namespace and check that property's value. However, using mx_internal is sort of a very ugly hack because these properties and methods weren't meant for external use and are subject to change any time (so your component could stop working when a new version is released) - so use with caution.
So, In a Flex app I add a new GUI component by creating it and calling parent.addChild(). However in some cases, this causes an error in the bowels of Flex. Turns out, addChild actually does:
return addChildAt(child, numChildren);
In the cases where it breaks, somehow the numChildren is off by one. Leading to this error:
RangeError: Error #2006: The supplied
index is out of bounds. at
flash.display::DisplayObjectContainer/addChildAt()
at
mx.core::Container/addChildAt()
at
mx.core::Container/addChild()
. . at
flash.events::EventDispatcher/dispatchEventFunction()
at
flash.events::EventDispatcher/dispatchEvent()
at
mx.core::UIComponent/dispatchEvent()
at
mx.controls::SWFLoader::contentLoaderInfo_completeEventHandler()
Is this a bug in Flex or in how I am using it? It kind of looks like it could be a threading bug, but since Flex doesn't support threads that is a bit confusing.
I have noticed that it most often occurs when re-parenting a UIComponent that is already on the display list. Are you re-parenting in this situation?
Could it be possible that you are adding a child before the component has been full initialized? Maybe try adding a child after Event.COMPLETE has been broadcast?
It may not support threads but it's still asynchronous...
numChildren doesn't validly reference an existing index in the children array. Arrays in AS3 are indexed starting at 0. This means that the last item in your array as for index numChildren - 1, not numChildren.
try addChildAt(child, numChildren - 1);
OK, like a dope, I was trying to add a child to a container even though it was already there, hence the confusing "wrong insertion index" message.
cf. http://forums.devshed.com/flash-help-38/scroll-pane-scroll-bars-not-working-818174.html - what you need to do is add children to a display object, and then set the source of the scrollpane to the be the display object. Kinda like this...
Code:
var myDisplay : DisplayObject = new DisplayObject();
myDisplay.addChild(myChild1);
myDisplay.addChild(myChild2);
myDisplay.addChild(myChild3);
myDisplay.addChild(myChild4);
ScrollPane.source = myDisplay;
ScrollPane.update();