---Question---
I create a "TextBtn" component and add a signal "btnClicked" in it:
TextBtn.qml
import Qt 4.7
Rectangle {
property alias btnText: showStr.text
width:100
height:30
border.color: "black"
border.width: 1
color: "white"
signal btnClicked()
//the default signal handler
onBtnClicked: console.log(btnText+" is clicked.")
MouseArea {
id: btnMouseArea
anchors.fill: parent
onClicked: btnClicked()
}
Text {
id: showStr
anchors.centerIn: parent
color: "black"
}
}
Another component "MenuRow" contains three "TextBtn"s as follows:
MenuRow.qml
import Qt 4.7
Row {
spacing: 5
TextBtn {
id: testBtn01
btnText: "test01"
}
TextBtn {
id: testBtn02
btnText: "test02"
}
TextBtn {
id: testBtn03
btnText: "test03"
}
}
The default single handler "onBtnClicked" in "TextBtn" should be triggered when one of "TextBtn"s in "MenuRow" is clicked, but it doesn't. What's going on?
The related qml doc is here: http://doc.qt.nokia.com/4.7/gettingstartedqml.html#basic-component-a-button
---Development Environment---
OS: Ubuntu 10.04
Qt Version: 4.7.0(Use "qt-sdk-linux-x86-opensource-2010.05.1.bin" to install qt sdk in the default path "$HOME/qtsdk-2010.05/")
Before running qml, I source a file "qtsetup.sh" to set the related paths,
$ source qtsetup.sh
qtsetup.sh
QTDIR=$HOME/qtsdk-2010.05/qt/
PATH=$PATH:$QTDIR/bin
LD_LIBRARY_PATH=$LD_LIBRARY_PATH:$QTDIR/lib
then run qml files with "qmlviewer".
$ qmlviewer MenuRow.qml
A qmlviewer window is triggered and shows the "MenuRow". No error occurs. I use mouse to click "TextBtn" in "MenuRow", but nothing happens. (It should show a message "text0X is clicked" in the terminal.)
I use qmlviewer to run other examples and demos, they seem to work well. I don't know why this example cannot work.
The problem happens here too (qmlviewer 4.7.0).
Looks like it's a bug in qmlviewer, read the follow-ups here.
If you remove your alias (btnText), the signal will work. (But the proper solution is update to 4.7.1+)
Related
Here Is it possible to use arrow keys alone to expand tree node in package explorer in Eclipse on Linux? I've found good idea to change behavior of treeview in eclipse. I'd like to improve it, but I'm don't know how to do, because i cant found example of using if-then-else statement in gtk.css configuration file.
I've found the couple of methods "test-collapse-row" and "test-expand-row" in ref below https://developer.gnome.org/gtk3/stable/GtkTreeView.html#GtkTreeView-select-cursor-row to test current line on expandable it or not. I've tried to find an example with condition for css key bindings but yet not found.
#binding-set MyTreeViewBinding
{
bind "Left" { "select-cursor-parent" ()
"expand-collapse-cursor-row" (0,0,0) };
/* I've try code below instead code above - isn't work
bind "Left" { if ("test-expand-row" ())
"expand-collapse-cursor-row" (0,0,0)
else
"select-cursor-parent" () }; */
bind "Right" { "expand-collapse-cursor-row" (0,1,0) };
}
treeview
{
-gtk-key-bindings: MyTreeViewBinding;
}
I need if it node, and it not collapsed collapse it, but if it not node or it already collapsed set up pointer to parent, but don't collapse it.
I am using react-native-navigation v2 and showing an overlay,
and at some place in my code. i want to show an over lay and later disable it .
for example to show loading.
I have Read the docs and followed it as much I could understand. I can show an overlay but can not dismiss it. A warning always comes up saying - overlay with id offlineoverlay1 was not found.
async showOverLay(){
await Navigation.showOverlay({
component: {
id: "OfflineOverlay1",
name: 'Uploading',
options: {
overlay: {
interceptTouchOutside: true
}
}
}
});
}
async closeOverLay(){
await Navigation.dismissOverlay('OfflineOverlay1')
}
Expected Result- the overlay should be closed when calling closeOverLay() function
you have defined
component :{id:"OfflineOverlay1"} // the use of ""
but you have called like this,
Navigation.dismissOverlay('OfflineOverlay1') // & the use of ''
I can not capture images in new thread
can you tell me what does it mean?
import qyvlik.thread.runnable 0.1
import qyvlik.utility 0.1
import QtMultimedia 5.5
QmlRunnable
{
id: runnable
Camera
{
id: cam
}
onMessageReceived:
{
cam.imageCapture.capture()
}
}
EDIT (#derM): It seems this is the source of the third-party modules.
As #KevinKrammer pointed out:
The error appears, as your class QmlRunnable has no default property, to which your Camera-object could be assigned. This is standard for most non-Item-QObjects in QML.
The author of your class knows of this problem, therefore he defines a property to store his DirSize-object in his example
Example:
import qyvlik.thread.runnable 0.1
import qyvlik.utility 0.1
QmlRunnable {
id: runnable
readonly property var __: DirSize {
id: dirsize
}
onMessageReceived: {
console.time("dirsize")
sendMessage(dirsize.dirSize(message));
console.timeEnd("dirsize")
}
}
From this I guess the solution would be this:
import qyvlik.thread.runnable 0.1
import qyvlik.utility 0.1
import QtMultimedia 5.5
QmlRunnable
{
id: runnable
property Camera cam: Camera // <--- create a property to assign it to.
{
}
onMessageReceived:
{
cam.imageCapture.capture()
}
}
You are using some third party QML modules, one of which apparently provides a QmlRunnable type.
Without any information on that type, such as a link to its documentation, the error would suggest that it is the one that does not have a default property.
When you try to create the Camera object inside the QmlRunnable the engine will try to assign that instance to the "parent's" default property.
Again, without any knowledge about the type it is difficult to provide any help.
Well, the QmlRunnable can not use the gui class, because it is Undetermined behavior
I tried to use both HaxeUI and HaxeFlixel, but what I obtain is HaxeUI's interface over a white background, covering everything underneath. Moreover, even if it was possible to somewhat make HaxeUI and HaxeFlixel work together, it's not clear how to change the UI of HaxeUI when the state change in HaxeFlixel. Here is the code I used:
private function setupGame():Void {
Toolkit.theme = new GradientTheme();
Toolkit.init();
var stageWidth:Int = Lib.current.stage.stageWidth;
var stageHeight:Int = Lib.current.stage.stageHeight;
if (zoom == -1) {
var ratioX:Float = stageWidth / gameWidth;
var ratioY:Float = stageHeight / gameHeight;
zoom = Math.min(ratioX, ratioY);
gameWidth = Math.ceil(stageWidth / zoom);
gameHeight = Math.ceil(stageHeight / zoom);
}
trace('stage: ${stageWidth}x${stageHeight}, game: ${gameWidth}x${gameHeight}, zoom=$zoom');
addChild(new FlxGame(gameWidth, gameHeight, initialState, zoom, framerate, framerate, skipSplash, startFullscreen));
Toolkit.openFullscreen(function(root:Root) {
var view:IDisplayObject = Toolkit.processXmlResource("assets/xml/haxeui-resource.xml");
root.addChild(view);
});
}
I can guess that, probably, both HaxeUI and HaxeFlixel have their own main loop and that their event handling might not be compatible, but just in case, can someone have a more definitive answer?
Edit:
Actually, it's much better when using openPopup:
Toolkit.openPopup( { x:20, y:150, width:100, height:100 }, function(root:Root) {
var view:IDisplayObject = Toolkit.processXmlResource("assets/xml/haxeui-naming.xml");
root.addChild(view);
});
It's possible to interact with the rest of the screen (managed with HaxeFlixel), but the mouse pointer present in the part of the screen managed with HaxeFlixel remains under the HaxeUI user interface elements.
When using Flixel and HaxeUI together, its almost like running two applications at once. However, they both rely on OpenFL as a back-end and each attach themselves to its display tree.
One technique I'm experimenting with right now is to open a Flixel sub state, and within the sub state, call Toolkit.openFullscreen(). From inside of this, you can set the alpha of the root's background to 0, which allows you to see through it onto the underlying bitmap that Flixel uses to render.
Here is a minimal example of how you might "embed" an editor interface inside a Flixel sub state:
import haxe.ui.toolkit.core.Toolkit;
import haxe.ui.toolkit.core.RootManager;
import haxe.ui.toolkit.themes.DefaultTheme;
import flixel.FlxG;
import flixel.FlxSubState;
// This would typically be a Haxe UI XMLController
import app.MainEditor;
class HaxeUIState extends FlxSubState
{
override public function create()
{
super.create();
// Flixel uses a sprite-based cursor by default,
// so you need to enable the system cursor to be
// able to see what you're clicking.
FlxG.mouse.useSystemCursor = true;
Toolkit.theme = new DefaultTheme();
Toolkit.init();
Toolkit.openFullscreen(function (root) {
var editor = new MainEditor();
// Allows you to see what's going on in the sub state
root.style.backgroundAlpha = 0;
root.addChild(editor.view);
});
}
override public function destroy()
{
super.destroy();
// Switch back to Flixel's cursor
FlxG.mouse.useSystemCursor = true;
// Not sure if this is the "correct" way to close the UI,
// but it works for my purposes. Alternatively you could
// try opening the editor in advance, but hiding it
// until the sub-state opens.
RootManager.instance.destroyAllRoots();
}
// As far as I can tell, the update function continues to get
// called even while Haxe UI is open.
override public function update() {
super.update();
if (FlxG.keys.justPressed.ESCAPE) {
// This will implicitly trigger destroy().
close();
}
}
}
In this way, you can associate different Flixel states with different Haxe UI controllers. (NOTE: They don't strictly have to be sub-states, that's just what worked best in my case.)
When you open a fullscreen or popup with haxeui, the program flow will be blocked (your update() and draw() function won't be called). You should probably have a look at flixel-ui instead.
From my experience haxeflixel and haxeui work well together but they are totally independent projects, and as such, any coordination between flixel states and displayed UI must be added by the coder.
I don't recall having the white background problem you mention, it shouldn't happen unless haxeui root sprite has a solid background, in that case it should be addressed to haxeui project maintainer.
I'm currently trying to create an application with Griffon 0.9.5 and the FlamingoBuilder.
I've the changed the value of frameClass in Application.groovy to 'org.jvnet.flamingo.ribbon.JRibbonFrame' and tried a few things in order to add a ribbon to the application window.
My first attempt was creating a ribbonTask node with nested ribbonBand nodes. The application starts but the buttons are not shown.
application(title: 'test01',
preferredSize: [320, 240],
pack: true,
locationByPlatform: true,
iconImage: imageIcon('/griffon-icon-48x48.png').image,
{
ribbonTask(title: 'Start') {
ribbonBand(id: 'fooBarBand', title: 'FooBar', image: imageIcon('/griffon-icon-48x48.png').image) {
commandButton(id: 'fooButton', text: 'Foo', image: imageIcon('/griffon-icon-48x48.png').image)
commandButton(id: 'barButton', text: 'Bar', image: imageIcon('/griffon-icon-48x48.png').image)
}
}
// add content here
label('Content Goes Here') // delete me
}
)
In my second attempt I explicitly create a RibbonTask and call addTask. The buttons are shown. However, I'm not sure if this is really the Griffon-way of doing things.
Question: Is there a better way to create a ribbon?
application(title: 'test01',
preferredSize: [320, 240],
pack: true,
locationByPlatform: true,
iconImage: imageIcon('/griffon-icon-48x48.png').image,
{
ribbonBand(id: 'fooBarBand', title: 'FooBar', image: imageIcon('/griffon-icon-48x48.png').image) {
commandButton(id: 'fooButton', text: 'Foo', image: imageIcon('/griffon-icon-48x48.png').image)
commandButton(id: 'barButton', text: 'Bar', image: imageIcon('/griffon-icon-48x48.png').image)
}
current.ribbon.addTask new RibbonTask('Start', fooBarBand)
// add content here
label('Content Goes Here') // delete me
}
)
I then tried adding a ribbonApplicationMenu with the following code snippet:
ribbonApplicationMenu(id: 'appMenu') {
ribbonApplicationMenuEntryPrimary(id: 'quitMenuEntry', text: 'Quit',
entryKind: JCommandButton.CommandButtonKind.ACTION_ONLY,
image: imageIcon('/griffon-icon-48x48.png').image)
}
However, it doesn't work. I get the following runtime exception:
java.lang.RuntimeException: Failed to create component for
'ribbonApplicationMenuEntryPrimary' reason:
groovy.lang.MissingPropertyException: No such property: text for
class:
griffon.builder.flamingo.factory.RibbonApplicationMenuEntryPrimaryFactory
The documentation of FlamingoBuilder states that there is a text property and when I remove the text property I get an exception because the text property must be set. I'm a little bit at loss. What's wrong with this code snippet?
I'm afraid the first issue is related to the application() node factory vs ribbonFrame() factory. You see, Griffon assumes the frame subclass to behave like any other regular JFrame however JRibbonFrame handles its children in a different way. This is not know to ApplicationFactory so it "fails" to add ribbon tasks unless you add them manually as you show in the second snippet.
This problem can be fixed by moving the parent/child relationship code from ribbonFrame() to ribbonBand/ribbonTask factories. This requires a new release of FlamingoBuilder.
Now on the second problem, that appears to be a bug on our side. Considering that FlamingoBuilder should be updated in any case we'll fix this problem too.