How to call functions without onClick in Qt .qml file?
Item {
id: btnSk
width: state == "wait" : lSkip.width + 3
height: parent.height
visible: player.iW
states: [
State {
name: "skip"
when: player.iWt < 0
PropertyChanges {
target: skip_layout
visible: false
}
}
]
MouseArea {
id: wait_layout
anchors.fill: parent
visible: false
onClicked: player.skipSmt();
}
}
Need to call player.skipSmt() without onClicked. How can I do it?
If you want the function player.skipSmt() to be called on startup of your Item named btnSk, then you could do the following:
Item {
id: btnSk
width: state == "wait" : lSkip.width + 3
height: parent.height
visible: player.iW
...
states: [
// your states
]
MouseArea {
// your mouse area
}
Component.onCompleted: player.skipSmt()
}
P.S. this assumes that player is an id accessible in your Item named btnSk
P.P.S. If this is not what you want, then you should pay heed to the comment given by MrEricSir!
Related
Here's an example State and PropertyChanges from the docs:
State {
name: "resized"; when: mouseArea.pressed
PropertyChanges { target: rect; color: "blue"; height: container.height }
}
The object to change is identified in the target property, and other properties of PropertyChanges map 1-to-1 to properties of the targeted object.
But if one wants to change a property named target on foo to bar, the naive thing would be PropertyChanges { target: foo; target: bar }, which I'm sure wouldn't work.
Is there a way to disambiguate the target of PropertyChanges from the target of its target?
With a little tweak, this is no problem.
If you can't alias it at the targetobject creation yourself, do it in the states like so:
Rectangle {
id: rect
property int target: 20
x: target
y: target
width: target
height: target
color: 'orchid'
states: State {
id: altState
name: 'alternative'
property alias mytarget: rect.target
PropertyChanges {
target: altState
mytarget: 50
}
}
MouseArea {
anchors.fill: parent
onClicked: parent.state = 'alternative'
}
}
I'm trying just now to implement a list with complicated data. In my case it should be an array like this:
[
{ item: "itemName1", objects: [x1,x1,x1] },
{ item: "itemName2", objects: [x2,x2,x2] }
]
As I know there are 2 ways to do that. First of them is to expose QObjectList-based model from C++ to QML. Than currently not interested for me since I want to implement that in pure QML. But ListElement's roles must contain only simple constants, line strings, numbers etc. i.e. no arrays.
So I did the data source as external array:
import QtQuick 2.5
import QtQuick.Layouts 1.2
import QtQuick.Window 2.0
Window {
width: 500
height: 500
id: window
ListView {
id: listView
anchors.fill: parent
anchors.margins: 2
spacing: 2
property var data: [ { name: "item1", objects: [1,2,3]} ]
model: data.length
delegate: Rectangle {
width: parent.width
height: content.height
property int itemIndex: index
color: index % 2 ? "#EFEFEF" : "#DEDEDE"
RowLayout {
id: content
spacing: 10
Text {
text: listView.data[itemIndex].name
}
Column {
Repeater {
model: listView.data[itemIndex].objects.length
Text {
text: listView.data[itemIndex].objects[index]
}
}
}
}
}
Component.onCompleted: {
listView.data.push( { name: "item2", objects: [4,5,6] } );
listView.data.push( { name: "item3", objects: [7,8,9] } );
listView.model = listView.data.length; // it doesnt't work without this line
}
}
}
It works fine with static array. The problem appears when I fill the array dynamically. In this case the property binding (model: data.length) suddenly stops working. So the workaround is to set it manually but I don't like this solution.
I need to create a ListModel, that contains an object (string and bool inside) statically.
If I add to an empty ListModel element by using append - all works well.
property ListModel qwe: ListModel {}
var imageToAdd { value: "picture.png", imageType: 1 }
qwe.append({
text: "TextToAdd",
image: imageToADD,
position: 1
})
// This works correct
But I need to create ListModel statically and it doesn't work.
ListModel {
ListElement {
text: "TextToAdd"
image: { value: "Qwer.png", imageType: 1 } // <-- This doesn't work
position: 1
}
}
How it should look like?
A ListElement in Qt must have values of type string, bool, numbers or enum. More complex datatypes like hashmaps are not allowed.
You can read this deep down in the Qt 5.2 sourcecode: qqmllistmodel.cpp. This didn't change since the Qt 4.7 times.
List elements are defined inside ListModel definitions, and represent items in a
list that will be displayed using ListView or Repeater items.
List elements are defined like other QML elements except that they contain
a collection of role definitions instead of properties. Using the same
syntax as property definitions, roles both define how the data is accessed
and include the data itself.
The names used for roles must begin with a lower-case letter and should be
common to all elements in a given model. Values must be simple constants; either
strings (quoted and optionally within a call to QT_TR_NOOP), boolean values
(true, false), numbers, or enumeration values (such as AlignText.AlignHCenter).
However, a ListModel seems to be capable to store all types defined in the ECMA-262 standard: The primitive types, which are Undefined, Null, Boolean, Number, and String as well as the Object type.
Edit: If you want to create the elements in QML, you have to rewrite your code to something like
ListModel {
ListElement {
text: "TextToAdd"
imageValue: "Qwer.png"
imageType: 1
position: 1
}
}
Edit2: Or you go the Javascript way. Create an empty model first and fill it on start
ListView {
model: ListModel { id: qwe }
delegate: ...
Component.onCompleted: {
qwe.append({
text: "Image 1",
image: { value: "picture.png", imageType: 1 },
position: 1
});
qwe.append({
text: "Image 2",
image: { value: "picture.png", imageType: 1 },
position: 2
});
qwe.append({
text: "Image 1",
image: { value: "picture.png", imageType: 1 },
position: 3
});
}
}
model: ListModel {
ListElement {
name: "My Name"
image: ListElement {
src: "My src"
}
}
}
You can access it in for example a delegate:
image.get(0).src
I would asume you should be able to access it via image.src but that doesn't work...
I am implementing a list view with a more button in QML.
The list and button will look like this
“a b c d e moreButton” . ( Where a b c d and e are elements of a string) and my list will have more than 5 elements. After clicking the more button I need to get the next 5 elements from the list . Say
“f g h i j “ and so on it should continue till all the elements in the list are displayed. My question is how can I get the first 5 , 2nd 5 and so on elements from the list ?
Any help is appreciated.
You can do something like this :
ListView
{
id: view
x: 50
width: 200; height: 500
property variant alphabetArray: ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z' ]
function append( )
{
// #ToDoyourself : Check all the boundary conditions in this function
var loopTime = alphabetModel.count
for( var i = loopTime ; i <= loopTime+5 ; ++ i )
alphabetModel.append({ "name" : alphabetArray[i] })
}
model: ListModel
{
id: alphabetModel
ListElement { name: "a" }
ListElement { name: "b" }
ListElement { name: "c" }
ListElement { name: "d" }
ListElement { name: "e" }
}
footer:
Text
{
text : "More" ; font.pixelSize: 35 ; color : "grey"
MouseArea
{
anchors.fill: parent
onClicked:
{
append()
}
}
}
delegate:
Item
{
height: 100
Text
{
text: name
height: 20
font.pixelSize: 30
color: index === view.currentIndex ? "black" : "red"
MouseArea
{
anchors.fill: parent
onClicked: view.currentIndex = index
}
}
}
}
Note: In the function append() I haven't done any boundary checks on the array. Do that as an exercise yourself.
in Sencha Touch 2.1 how can I load the chart dynamically from json, also with dynamic fields store, chart axes, and chart series,
I know maybe this is too much, but I need to display many kind of data, If I create 1 chart component for each display means I have to create more than 15 chart component, I'm afraid it get bloated
I did not complete this dynamically, but I made it seem dynamic.
I first request a user to fill out a form.
I also have multiple panels that holds charts with empty stores, in the form of several different layouts.
Based on the user's form, I show and hide panels, or chart when they need to be displayed only after loading the store with the required data.
yes it is bulky, and they are static, but I found it slightly easier to handle than dynamically loading.
EDIT
After thinking,
have you tried a function like
function dynamiccharts(var1, var2, var3){
return Ext.chart.Chart({
....
})
}
variables would include things like data, url, store or etc.
This is my example creating a chart on controller inside a panel: axis, series, store fields, url are became parameters, PAR_FORM is global variable showing the difference between views, I'm using this code for another chart (Column, Pie)
Ext.define("Geis.controller.app", {
extend: "Ext.app.Controller",
config: {
refs: {
mainview: 'mainview',
barchartview: 'barchartview',
btnShowChartAnggaran: '#btnShowChartAnggaran'
},
control: {
'btnShowChartAnggaran': {
tap: 'onShowChartAnggaran'
}
}
}
createBarChart: function(fields, series_xfield, series_yfield, url) {
this.getBarchartview().add(new Ext.chart.CartesianChart({
id: 'barchartgenerateview',
store: {
fields: fields,
proxy: {
type: 'jsonp',
url: url
}
},
background: 'white',
flipXY: true,
colors: Geis.view.ColorPatterns.getBaseColors(),
interactions: [
{
type: 'panzoom',
axes: {
"left": {
allowPan: true,
allowZoom: true
},
"bottom": {
allowPan: true,
allowZoom: true
}
}
},
'itemhighlight'
],
series: [{
type: 'bar',
xField: series_xfield,
yField: series_yfield,
highlightCfg: {
strokeStyle: 'red',
lineWidth: 3
},
style: {
stroke: 'rgb(40,40,40)',
maxBarWidth: 30
}
}],
axes: [{
type: 'numeric',
position: 'bottom',
fields: series_yfield,
grid: {
odd: {
fill: '#e8e8e8'
}
},
label: {
rotate: {
degrees: -30
}
},
maxZoom: 1
},
{
type: 'category',
position: 'left',
fields: series_xfield,
maxZoom: 4
}]
}));
Ext.getCmp('barchartgenerateview').getStore().load();
},
onShowChartAnggaran: function() {
this.getBarchartview().remove(Ext.getCmp('barchartgenerateview'), true);
if (PAR_FORM == 'Dana Anggaran') {
this.createBarChart(['kode', 'keterangan', 'nilai'], 'keterangan', 'nilai',
Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_dana_anggaran_json/');
} else if (PAR_FORM == 'Alokasi Anggaran') {
this.createBarChart(['kode', 'keterangan', 'belanja_pegawai', 'belanja_barang', 'belanja_modal'],
'keterangan', ['belanja_pegawai', 'belanja_barang', 'belanja_modal'],
Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_alokasi_json/');
}
this.getMainview().animateActiveItem(1, {type:'slide', direction:'left'});
}
});
base on my experiment if you want to activate the interactions features you need to set the chart id dynamically too, for example by creating Global Counter Variable