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
Related
I'm using ion-slides to have a slider with different "selectable" tags like the image below
I have already accomplished that. The point that I'm struggling with is that I need to make the slide that I click on selected and the older one unselected without the need to scroll to that slide like the following screenshot
I could get the clicked index dynamically by the following snippet
I register for click action
(ionSlideTouchEnd)="onSlideTap($event)"
Then later on code I get the event
onSlideTap(event) {
this.slides.getSwiper().then(swiper => {
console.log("clicked Index = ", swiper.clickedIndex);
});
}
Does anyone have an idea of how to change active slide without scroll?
I have an idea. I hope it's helpful for you.
Template
<ion-slides #slides (ionSlideTouchEnd)=ionSlideTouchEnd($event)>
<ion-slide class="slide-item" *ngFor="let item of items; index as index;" (click)="onClickSlide(index)">
<ion-button [ngClass]="{'active': activeIndex === index}">{{item.title}}</ion-button>
</ion-slide>
</ion-slides>
TS file
import { IonSlides } from '#ionic/angular';
...
#ViewChild('slides', { read: IonSlides }) slides: IonSlides;
activeIndex: number = 0;
items = [
{
id: 1,
title: 'Item 1'
},
{
id: 2,
title: 'Item 2'
},
{
id: 3,
title: 'Item 3'
}
];
...
onClickSlide(id) {
this.activeIndex = id;
}
// Emitted when the user releases the touch.
ionSlideTouchEnd(){
// Lock the ability to slide to the next or previous slide.
this.slides.lockSwipes(true);
}
Style file
.active {
// style to detect the active slide
}
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
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');