How to use FolderListModel - qml

I create a QtQuick app and replace the main.qml with the code below. I try to show all files and dirs in my home path in a Mac OS X system. But nothing shows up. How can I figure out what I did wrong?
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import Qt.labs.folderlistmodel 2.1
ApplicationWindow {
visible: true
title: "Test"
width: 200
height: 400
ListView {
anchors.fill: parent
FolderListModel {
id: folderModel
showDirs: true
showDirsFirst: true
rootFolder: "file:///Users/enderson"
nameFilters: ["*.*"]
}
Component {
id: fileDelegate
Text { text: fileName }
}
model: folderModel
delegate: fileDelegate
}
}
b.t.w.:
Qt5.5
and .pro file:
TEMPLATE = app
QT += qml quick widgets
SOURCES += main.cpp \
UiBridge.cpp
RESOURCES += qml.qrc
LIBS += -framework CoreFoundation -framework Foundation
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
# Default rules for deployment.
include(deployment.pri)

I found the problem. Using rootFolder is wrong. Use 'folder' property like below
folder: "file:///Users/enderson"

Related

Module not found: Error: Can't resolve 'react-native/Libraries/Image/resolveAssetSource'

I'm adding an audio module in my current react-native project. I have tried installing several modules (react-native-sound, react-native-track-player). Getting in both modules the same Error output, which is always pointing in the 'react-native/Libraries/Image/resolveAssetsource' as module not found.
ERROR in ./node_modules/react-native-track-player/lib/index.js
Module not found: Error: Can't resolve 'react-native/Libraries/Image/resolveAssetsource' in 'D:\workspaces\web\react\blink\node_modules\react-native-track-player\lib'
# ./node_modules/react-native-track-player/lib/index.js 1:401-459
# ./node_modules/react-native-track-player/index.js
# ./components/ui/BlinkAudio/BlinkAudio.web.js
# ./components/ui/BlinkAudio/index.web.js
# ./components/dialogs/ResourceDetails/ResourceDetails.js
# ./components/dialogs/ResourceDetails/index.js
# ./components/panels/catalog/CatalogPanel.js
# ./components/parts/Main/Main.js
# ./components/parts/Main/index.js
# ./index.web.js
This is the current imports in the index file of the audio module react-native-track-player:
import { Platform, AppRegistry, DeviceEventEmitter, NativeEventEmitter, NativeModules } from 'react-native';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetsource';
I have tried to fix this including 'resolveAssetsource' from the imports of 'react-native' as below:
import {
Platform,
AppRegistry,
DeviceEventEmitter,
NativeEventEmitter,
NativeModules,
resolveAssetsource
} from 'react-native';
But I am not pretty sure if it would be the best way and normally I don't like to touch package node-modules directly.
I also tried to exclude the audio module from webpack loaders with no result.
module: {
loaders: [
{
test: /\.js?$/,
exclude: function (modulePath) {
return (
/node_modules/.test(modulePath) &&
!/node_modules(\\|\/)react-native-track-player/.test(modulePath)
);
},
I wonder if someone could help me to find an answer and if is possible to deal with this react-native issue, as I'm thinking that these audio modules are calling wrongly the resolveAssetsource, or in the other hand, react-native doesn't provide this specific Library for third parties, I don't know.
This seems to be a syntax error issue. There is no file nor module named resolveAssetsource, the module and filename is resolveAssetSource with a capital S.
Try to remove react-native-track-player with yarn remove react-native-track-player and install it again (or delete the entire node_modules directory and run yarn install again) as the source code under react-native-track-player/lib/index.js has it properly without any errors:
import { Platform, AppRegistry, DeviceEventEmitter, NativeEventEmitter, NativeModules } from 'react-native';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
If you use it elsewhere, you'll have to import it like this:
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
But that is not the prefered way to do it, as this method is a member of the RN Image class/component Image.resolveAssetSource(source), so, it's better to just import the Image component and use it like this:
import {
Platform,
AppRegistry,
DeviceEventEmitter,
NativeEventEmitter,
NativeModules,
Image // Add Image import
} from 'react-native';
// and use the function as of Image method
let audioAssetSource = Image.resolveAssetSource(audioSource);
Either way, you'll have the method working and resolve the asset source information.

ApplicationWindow with Toolbar cannot hold SwipeView because of import errors

I am using Qt Opensource 5.10.0 with Qt Creator 4.5.0 based on ArchLinux 64bit. and the docs for ApplicationWindow states it requires QtQuick.Controls 1.4:
import QtQuick 2.10
import QtQuick.Controls 1.4
ApplicationWindow
{
width: 640
height: 480
visible: true
toolBar: ToolBar
{
} // ToolBar
} // ApplicationWindow
which compiles and runs ok. Now, I want to add SwipeView to upper ApplicationWindow, however QtQuickControls 1.4 does not recognize it, as it also states in SwipeView's docs and requires import QtQuick.Controls 2.3, so if I let import QtQuick.Controls 1.4 in main.qml:
import QtQuick 2.10
import QtQuick.Controls 1.4
ApplicationWindow
{
width: 640
height: 480
visible: true
toolBar: ToolBar
{
} // ToolBar
SwipeView
{
} // SwipeView
} // ApplicationWindow
I get error:
Starting /mnt/projects/build-test12-Desktop_Qt_5_10_0_GCC_64bit-Debug/test12...
QML debugging is enabled. Only use this in a safe environment.
QQmlApplicationEngine failed to load component
qrc:/main.qml:15 SwipeView is not a type
/mnt/projects/build-test12-Desktop_Qt_5_10_0_GCC_64bit-Debug/test12 exited with code 255
and if use import QtQuick.Controls 2.3:
import QtQuick 2.10
import QtQuick.Controls 2.3
ApplicationWindow
{
width: 640
height: 480
visible: true
toolBar: ToolBar
{
} // ToolBar
SwipeView
{
} // SwipeView
} // ApplicationWindow
I get following error:
Starting /mnt/projects/build-test12-Desktop_Qt_5_10_0_GCC_64bit-Debug/test12...
QML debugging is enabled. Only use this in a safe environment.
QQmlApplicationEngine failed to load component
qrc:/main.qml:11 Cannot assign to non-existent property "toolBar"
/mnt/projects/build-test12-Desktop_Qt_5_10_0_GCC_64bit-Debug/test12 exited with code 255
Now, if I include both imports:
import QtQuick 2.10
import QtQuick.Controls 1.4
import QtQuick.Controls 2.3
ApplicationWindow
{
width: 640
height: 480
visible: true
toolBar: ToolBar
{
} // ToolBar
SwipeView
{
} // SwipeView
} // ApplicationWindow
I still get:
Starting /mnt/projects/build-test12-Desktop_Qt_5_10_0_GCC_64bit-Debug/test12...
QML debugging is enabled. Only use this in a safe environment.
QQmlApplicationEngine failed to load component
qrc:/main.qml:12 Cannot assign to non-existent property "toolBar"
/mnt/projects/build-test12-Desktop_Qt_5_10_0_GCC_64bit-Debug/test12 exited with code 255
as in second case.
The first error is logical, since in version 1.4 there was not SwipeView, however, why QtQuick.Controls 2.3 does not recognize ApplicationWindow's member/property ApplicationWindow.toolbar in second case?
Ok, this duality arose from the fact that there are 2 ApplicationWindow, one came from import QtQuick.Controls 1.4 and the second one come from import QtQuick.Controls 2.3. The new one have no toolBar so you get the error.
If you still want to use the old one you can use aliasing as following:
import QtQuick.Controls 1.4 as Old
Old.ApplicationWindow {
toolBar: ToolBar
{
}
}
or you should use ApplicationWindow.header instead in the new one:
ApplicationWindow {
header: TabBar {
// ...
}
}
I don't know why Qt changed the name from toolBar to header. For me it looks illogical.

create-react-app to import css from node-module

I'm quite new to react. I've just started following instructions and experimenting with create-react-app. After create a empty application, I tried to add a grid which is from react-bootstrap-table.
Very simple codes below:
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
var products = [{
id: 1,
name: "Item name 1",
price: 100
},{
id: 2,
name: "Item name 2",
price: 100
}];
function priceFormatter(cell, row){
return '<i class="glyphicon glyphicon-usd"></i> ' + cell;
}
ReactDOM.render(
<BootstrapTable data={products} striped={true} hover={true}>
<TableHeaderColumn dataField="id" isKey={true} dataAlign="center" dataSort={true}>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField="name" dataSort={true}>Product Name</TableHeaderColumn>
<TableHeaderColumn dataField="price" dataFormat={priceFormatter}>Product Price</TableHeaderColumn>
</BootstrapTable>,
document.getElementById("root")
);
However it doesn't seem to be able to load stylesheet correctly.
I've also tried to use :
require('react-bootstrap-table/dist/react-bootstrap-table-all.min.css')
according to suggestion from other posts but no luck.
Did I make any mistakes?
I figured out at the end. Looks like document of react-bootstrap-table in github is incomplete and has an dependency of bootstrap/react-bootstrap.
Problem solved after I installed react-bootstrap and bootstrap module also import bootstrap css.
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap-theme.min.css';

PyQt5 QtQuick Error - "libQt5Network undefined symbol: _Z24qt_subtract_from_timeoutii"

After installing PyQt5.5.1 together with Qt5.5.1 on my Ubuntu 14.04 successfully, I ran my simple pyqt file using QtQuick and met this error:
libQt5Network.so.5: undefined symbol: _Z24qt_subtract_from_timeoutii
Anyone has run into this before?
Thanks.
Python.py:
# Main Function
if __name__ == '__main__':
# Create main app
myApp = QApplication(sys.argv)
# Create a label and set its properties
appLabel = QQuickView()
appLabel.setSource(QUrl('basic.qml'))
# Show the Label
appLabel.show()
# Execute the Application and Exit
myApp.exec_()
sys.exit()
Basic.qml:
Grid {
id: colorPicker
rows: 2; columns: 3; spacing: 3
Rectangle { color: "white";}
Rectangle { color: "green";}
Rectangle { color: "blue"; }
Rectangle { color: "yellow";}
Rectangle { color: "steelblue";}
Rectangle { color: "black";}
}
The reason is i also installed python-Qt5, which is based on older Qt5 version.
With
find / -name libQt*
I could see some old qt lib residing in /usr/lib folder:
/usr/lib/i386-linux-gnu/libQt5Network.so
/usr/lib/i386-linux-gnu/libQt5Network.so.5
/usr/lib/i386-linux-gnu/libQt5Network.so.5.2
/usr/lib/i386-linux-gnu/libQt5Network.so.5.2.1
/home/tad/Qt5.5.1/gcc/lib/libQt5Network.so.5.5
/home/tad/Qt5.5.1/gcc/lib/libQt5Network.so
/home/tad/Qt5.5.1/gcc/lib/libQt5Network.so.5.5.1
/home/tad/Qt5.5.1/gcc/lib/libQt5Network.so.5
/home/tad/Qt5.5.1/Tools/QtCreator/lib/qtcreator/libQt5Network.so.5
/home/tad/Qt5.5.1/Tools/QtCreator/lib/qtcreator/libQt5Network.so.5.5.1
/home/tad/Qt5.5.1/Tools/QtCreator/lib/qtcreator/libQt5Network.so.5
The problem maybe inconsistent qt libs, so I remove all qt libs in /usr/lib and replace them with the ones in my home folder. It worked!However this is not recommended since some built-in Ubuntu components may use libQt* in /usr/lib folders. So, just remove python-qt5 and reinstall pyqt5 all over again!
By the way, for the error relating to Sip API version, we just have to run to remove all sip-related packages then reinstall sip again:
dpkg -l | grep sip
then
sudo apt-get purge python3-sip python3-sip-dev

Running simple QtWebEngine app on Raspberry Pi 2, page not showing

I compiled and installed QtWebEngine + QML plugins on Raspberry Pi 2 with Yocto recipes using information in this tutorial using Yocto dizzy branch and run the following script:
root#raspberrypi2:~# more chromium.qml
import QtQuick 2.1
import QtQuick.Controls 1.1
import QtWebEngine 0.9
ApplicationWindow {
width: 1280
height: 720
color: "lightgray"
visible: true
WebEngineView {
id: webview
url: "file:///home/root/hello.html"
anchors.fill: parent
}
}
Note that the IMPORT VERSION 0.9, not 1.0
I have tried both url: "file:///home/root/hello.html" and url: "https://duckduckgo.com" but all I am getting is a red screen with the black square mouse pointer.
root#raspberrypi2:~# more hello.html
<html>
<header><title>This is title</title></header>
<body>
Hello world
</body>
</html>
On the console:
root#raspberrypi2:~# /usr/bin/qt5/qmlscene -v -platform eglfs chromium.qml
[0605/163256:WARNING:resource_bundle.cc(280)] locale_file_path.empty()
[0605/163257:WARNING:proxy_service.cc(890)] PAC support disabled because there is no system implementation
[0605/163257:WARNING:resource_bundle.cc(280)] locale_file_path.empty()
PAC support disabled ... seems to be a none issue read here
UPDATE
I have followed this step-by-step tutorial (Poky fido branch) and then added qtwebengine (import QtWebEngine 1.0 this time) and qtwebengine-qmlplugins in my Yocto Image and created again my image with bitbake
When I booted and ran /usr/bin/qt5/qmlscene -v -platform eglfs chromium.qml I could see my HTML page.
I have tested a couple of dozen of websites and not all page show. So their might be a little more to it.
e.g.
http://wikipedia.com shows!!!
http://google.com doesn't show ???
http://https://stackoverflow.com/ shows!!!
http://facebook.com doesn't
Any further pointers are welcome
UPDATE 20160309
root#raspberrypi2:~/app# uname -a
Linux raspberrypi2 4.1.10 #1 SMP PREEMPT Wed Feb 17 16:51:44 CET 2016 armv7l GNU/Linux
root#raspberrypi2:~/app# lsb_release -a
LSB Version: core-4.1-noarch:core-4.1-arm
Distributor ID: poky
Description: Poky (Yocto Project Reference Distro) 2.0.1
Release: 2.0.1
Codename: jethro
QML
root#raspberrypi2:~/app# more chromium.qml
import QtQuick 2.1
import QtQuick.Controls 1.1
import QtWebEngine 1.0
ApplicationWindow {
width: 800
height: 600
color: "lightgray"
visible: true
WebEngineView {
id: webview
//url: "http://raspberrypi.stackexchange.com/" // PASS
//url: "http://google.com" // FAIL
//url: "http://video.webmfiles.org/big-buck-bunny_trailer.webm" // PASS but no Sound
//url: "https://youtube.com/" // FAIL
//url: "https://opentokrtc.com/anybots" // FAIL
//url: "http://speedof.me/" // PASS
url: "http://facebook.com" // FAIL
anchors.fill: parent
}
}
Maybe it is a little late but I tried to build QtWebEngine in Qt 5.6 alpha and it works properly for me on Raspberry Pi 2 for all the URLs you listed. This is a demo. Maybe they fixed something in QtWebEngine, so you can try 5.6-alpha.
Unfortunately, the branch jethro for meta-qt5 the qtwebengine caused many problems.
I was happy to see that in this branch master with chromium 45:
Branch jethro:
QT_MODULE BRANCH CHROMIUM = "40.0.2214-based"
Branch master:
QT_MODULE BRANCH CHROMIUM = "45-based"
I will try to build;)