I am trying to develop for BlackBerry and I am just playing around with it to try and learn the basics.
So this is really simple but how do I launch a new activity using a button?
I have the onClick property in the QML file and I don't know which code to put in the {}'s.
It's unclear what exactly do you expect but I'll give you the example of making a new Sheet. Sheets are full screen views that appear on top of your current content and are usually used for creating or editing content or other activities that are not a main focus of your application.
Lets say that you already have a Page with a button on it:
Page {
Container {
Button {
text: "Open sheet"
onClicked: {
}
}
}
}
Now to open a new Sheet when you click a button you can attach it to existing Page and define its content. After that you just need to call newSheet.open() from the onClicked() method.
Page {
Container {
Button {
text: "Open sheet"
onClicked: {
newSheet.open()
}
}
}
attachedObjects: [
Sheet {
id: newSheet
Page {
Container {
Label {
text: "Sheet"
}
Button {
text: "Close sheet"
onClicked: newSheet.close()
}
}
}
}
]
}
That is the example with opening a new Sheet when clicking the button. You should also check Tabs and NavigationPane
Related
I'm trying to create a contextMenu for a rightClick action. The Menu has two SubMenus, "print in ..." and other subMenu. When I hoverover "print in..." it display the submenu, but to create this submenu it has to consult how many printers are availables in that moment. I can create the complete subMenu listing all the printers using the "MENU.addItem()" but I can't set the "onTriggered" handler to add an action to these Items. How can I fix it
Try this:
Menu {
id: contextMenu
Menu {
title: "print in..."
id: submenu1
onPopupVisibleChanged: {
submenu1.clear();
for(var i =0;i < 10;i ++) {
submenu1.addItem("item" + i);
}
}
}
Menu {
title: "another submenu"
MenuItem {
text: "submenu_item1"
}
MenuItem {
text: "submenu_item2"
}
}
}
as #BaCaRoZzo commented the connect and the approach in this answer works very well for this case
I need make small app on BB10 using QML, which record and play some voice. I have all needed permision (microphone and store file) and this code:
import bb.cascades 1.0
import bb.multimedia 1.0
Page {
property string dataUrl;
Container {
background: Color.create("#001100")
layout: StackLayout {
}
attachedObjects: [
MediaPlayer {
id: audioPlayer
sourceUrl: dataUrl + "/recording.mp4"
},
AudioRecorder {
id: recorder
outputUrl: dataUrl + "/recording.mp4"
}
]
Button {
id: btnRecord
text: "Record"
onClicked: {
recorder.record();
}
}
Button {
id: btnStop
text: "Stop Record"
onClicked: {
recorder.reset();
}
}
Button {
text: "Play Audio"
onClicked: {
audioPlayer.play()
}
}
Button {
text: "Stop Audio"
onClicked: {audioPlayer.stop()
}
}
}
}
After running I can see all buttons, but recording and/or playing is not work. I dont know what is wrong. I cant see any errors.
You're almost there. The problem is your sourceUrl is wrong. The best place to store your recording is in your app's data directory but your QML has no idea where that is.
To solve this you need to expose your app's data path to your QML using C++. You can do this using a property (more info here).
Add the following C++ code under where you create your AbstractPane object (in my case called root). This is normally done in applicationui.cpp.
root->setProperty("dataUrl", "file://" + QDir::currentPath() + "/data");
Now add the dataUrl property to your QML and use it for your sourceUrl:
Page {
property string dataUrl;
Container {
background: Color.create("#001100")
layout: StackLayout {
}
attachedObjects: [
MediaPlayer {
id: audioPlayer
sourceUrl: dataUrl + "/recording.m4a"
},
AudioRecorder {
id: recorder
outputUrl: dataUrl + "/recording.m4a"
}
]
....
}
Edit: Make sure you call audioPlayer.reset() after you've finished recording, this forces the player to reload the recorded audio. If you don't do this your audio playback may be truncated.
I am creating a application which has a global tab bar ."Actionbar" should have 5 buttons and should be seen on every screen.
Is there any way to place 5 tabs on "ActionBar" at one moment without help of "tabbed menu" ?
And how I can make this tabbed-pane global? because latter in the app I use navigationPane and it replaces tabbedpane. I want the tabbedPane bar to be visible on all screens
UPDATE ::::
I tried sheets but tabs are dissappearing
import bb.cascades 1.0
TabbedPane {
showTabsOnActionBar: true
Tab {
Page {
titleBar: TitleBar {
title: "1"
}
attachedObjects: [
ComponentDefinition {
id: mySheet
source: "sheets.qml"
}
]
Button {
onClicked: {
var sheet = mySheet.createObject();
sheet.open();
}
text: "sheet"
}
}
}
Tab {
}
}
and my sheets.qml file
import bb.cascades 1.0
Sheet {
id: mySheet
content: Page {
Container {
Label {
text: "Hi then"
}
Button {
text: "close"
onClicked: {
onClicked: mySheet.close()
}
}
}
}
}
"And how I can make this tabbedpane global? because latter in the app I use navigationPane and it replaces tabbedpane."
If I understand your question correctly, you want there to always be a tabbedpane instead of it being replaced by the navigationpane later.
What you need to to is have your tabbedpane as the main object in your qml. The navigationpane should be inside each tab, so basically 5 tabs means you would have 5 x navigation panes.
When you need to push a page, push it to the relevant tab's navigationpane.
UPDATE:
Sheets allow you to push a page ontop of the tabbedpane. Here is an example:
Create a qml file with the root item being a sheet, e.g.
Sheet {
content: Page {
Container {
... insert content
}
}
}
Then in your tabbedpane you would do the following:
inside attachedObjects
ComponentDefinition {
id: sheetDefinition
source: "mypage.qml"
}
in your function/onclick/etc:
var sheet = sheetDefinition.createObject;
sheet.open();
UPDATE 2:
To push pages within a tabbedpane do something similar to the following:
TabbedPane {
Tab {
NavigationPane {
id: tab1Nav
Page {
}
}
}
}
Then to push a page use
tab1Nav.push(page);
Or replace the content of the navigationpane to keep the tabs in place.
I need to create custom UI elements like buttons and lists with image backgrounds in Cascades Qml, However there doesn't seem to be a way to set the background of controls such as Button.
I can't find any examples of this anywhere.
It seems like this could be possible by using a container and creating a custom control, but I don't see a way of getting that container to have an onClick event.
Custom control is actually very easy in BB10. Here's an example of what you are trying to do:
Container {
property alias text: label.text
property alias image: imagev.imageSource
ImageView {
id: imagev
imageSource: "asset:///images/Button1.png"
}
Label {
id: label
text: "demo"
}
gestureHandlers: [
TapHandler {
onTapped: {
//do tapped code
}
},
LongPressHandler {
onLongPressed: {
//do long press code
}
}
]
}
Save it as "CustomButton.qml" and then in your main QML file you can access it like so:
Page {
CustomButton {
text: "my text"
image: "images/myimage.png"
}
}
You can do this by using MouseArea element:
Item {
Image {
anchors.fill: parent
source: "yourimg.png"
}
MouseArea {
anchors.fill: parent
onClicked: {
console.log("do your action here!")
}
}
}
If you put this code in a separate QML file e.g. CustomButton.qml. You can use it in the other QML file like a custom button element:
CustomButton {
}
You can read more about this here.
I'm using Dojo to create a DropDownButton within a Toolbar. The Toolbar, and button are created dynamically, like this:
this.widget = new Toolbar({ style: "background:black;" }, "toolbar");
this.dropMenu = new DropDownMenu({tooltip : "ToolTip", style: "display: none;"});
this.button = new DropDownButton({dropDown: this.dropMenu});
this.button.set('label', '<img src="data:image/png;base64,'+ this.icon + '"/>');
this.widget.addChild(this.button);
Note that the above code is dynamically creating an icon as part of the button from a base64 encoded string through setting an img src for the label property of the button.
I want to differentiate between a click on the "label" element for the DropDownButton and a click on the down arrow for the button, but am not sure if this is possible. Ie, when clicking on the label, I capture the onClick, but don't cause the drop down to be displayed. However, if the down arrow is clicked on or any other place on the button is clicked, the drop down will be displayed.
One alternate would be to split this into a standard Button, and then a drop down button adjacent to it, but I'm wondering if there is any way to do this from a single standard DropDownButton?
Check whether or not its the downarrow or buttontext class in the clicked element. To properly hook into the 'flow' of events, you should override the classfunction _onDropDownMouseDown
var customDropDownButton = declare("customDropDownButton", [ DropDownButton ], {
toggleDropDown: function() {
console.log('toggling');
this.inherited(arguments);
},
_onDropDownMouseDown: function(evt) {
console.log(arguments, evt.srcElement.className);
if (/dijitButtonText/.test(evt.srcElement.className)) {
// negate popup functionality
console.log('negating');
return false;
}
this.inherited(arguments);
return true;
}
});
var b = new customDropDownButton({
label: "hello!",
name: "programmatic1",
dropDown: someMenu
});
Alternatively, if you can live with popup showing and then immediately closing again - easy way is:
var b = new DropDownButton({
label: 'hello!',
name: "programmatic2",
dropDown: someMenu,
onClick: function(evt) {
if(/dijitButtonText/.test(evt.srcElement.className)) {
// negate popup
popup.close(this.dropDown);
}
}
}, 'button');