In my BB 10 cascades App , I need to add a Button click listener for Adding a contact information like pin:210000A to Blackberry Messenger (BBM). for that I am doing the following...
main.qml is like
import bb.cascades 1.0
Page {
Container {
layout: DockLayout {
}
TextArea {
id: pinEditor
hintText: "Enter PIN to invite"
onTextChanged: {
inviter.pin = text
}
input.submitKey: SubmitKey.Send
}
Inviter {
id: inviter
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
}
}
}
and Inviter.qml is like
import bb.cascades 1.0
Container {
property string pin
Button {
text: "Invite to BBM"
onClicked: {
query.uri = "pin:" + pin
invoke.trigger("bb.action.INVITEBBM")
}
}
attachedObjects: [
Invocation {
id: invoke
query: InvokeQuery {
id: query
invokeTargetId: "sys.bbm.sharehandler"
onQueryChanged: {
invoke.query.updateQuery()
}
}
}
but I am getting "Read only property cannot be set"error in Qml.I have also added
LIBS += -lbbplatformbbm
LIBS += -lbbsystem and BBM Permission in "bar-descriptor.xml"
Do I need to Register with BBM for Adding contact in BBM from my App? and how to fix the above error?
Please help,
Thanks
I'm guessing here, but try this way:
Container {
property string pin
Button {
text: "Invite to BBM"
onClicked: {
invoke.query.setUri("pin:" + pin)
invoke.trigger("bb.action.INVITEBBM")
}
}
attachedObjects: [
Invocation {
id: invoke
query {
invokeTargetId: "sys.bbm.sharehandler"
onQueryChanged: {
invoke.query.updateQuery()
}
}
}
]
}
right now I'm trying to create a ListView which loads the dataModel using a custom QML. Here's the snippet of my code:
ListView {
id: firstPageListView
visible: false
dataModel: firstPageDataModel
layout: GridListLayout {
columnCount: 1
cellAspectRatio: 2.0
headerMode: ListHeaderMode.Standard
verticalCellSpacing: 10
}
listItemComponents: [
ListItemComponent {
//custom qml that will be used
ThumbNote {
title: ListItemData.title
text: ListItemData.text
imageSource: ListItemData.image
listmode: true //list mode
date: ListItemData.date
}
}
]
}
I want to create a button that will change the listmode property of each component into false. By doing so, the object will invoke a function that set in the onListModeChanged() of the ThumbNote QML.
Sorry for my poor english, any help would be appreciated. :)
Perhaps you might consider adding a property to the ListView and binding the ThumbNotes' properties to it.
E.g.:
ListView {
id: firstPageListView
visible: true
dataModel: firstPageDataModel
property bool listMode: true
...
listItemComponents: [
ListItemComponent {
//custom qml that will be used
ThumbNote {
title: ListItemData.title
text: ListItemData.text
imageSource: ListItemData.image
listmode: firstPageListView.listMode
date: ListItemData.date
}
}
]
}
Button {
onClicked: {
firstPageListView.listMode = false;
}
}
I am developing a Hybrid Mobile App over sencha touch 2.
Now I was in a need of a custom component to be specific a custom list item consisting of a button along with.
My view has rendered as i wanted to but the button that is added to the list item is not firing the TAP event as expected. Instead on every tap, the ITEMTAP event is fired which is creating a bit of mess.
Can someone suggest me where to look to make this work ?
Below is the code for the custom component that i created:
var listView = {
xtype : "list",
id : "desk-list-search-results",
cls : "desk-list-search-results-cls",
selectedCls : "",
defaultType:"desksearchlistitem",
store : "deskstore",
flex : 2
};
This is the code for the custom component
Ext.define("MyApp.view.DeskSearchListItem",{
extend:"Ext.dataview.component.ListItem",
requires:["Ext.Button"],
alias:"widget.desksearchlistitem",
initialize:function()
{
this.callParent(arguments);
},
config:{
layout:{
type:"hbox",
align:"left"
},
cls:'x-list-item desk-search-list-item',
title:{
cls:"desk-list-item",
flex:0,
styleHtmlContent:true,
style:"align:left;"
},
image:{
cls:"circle_image",
width:"28px",
height:"28px"
},
button:{
cls:'x-button custom-button custom-font bookdesk-button',
flex:0,
text:"Book",
width:"113px",
height:"46px",
hidden:true
},
dataMap:{
getTitle:{
setHtml:'title'
}
}
},
applyButton:function(config)
{
return Ext.factory(config,Ext.Button,this.getButton());
},
updateButton:function(newButton,oldButton)
{
if(newButton)
{
this.add(newButton);
}
if(oldButton)
{
this.remove(oldButton);
}
},
applyTitle:function(config)
{
return Ext.factory(config,Ext.Component,this.getTitle());
},
updateTitle:function(newTitle,oldTitle)
{
if(newTitle)
{
this.add(newTitle);
}
if(oldTitle)
{
this.remove(oldTitle);
}
},
applyImage:function(config)
{
return Ext.factory(config,Ext.Component,this.getImage());
},
updateImage:function(newImage,oldImage)
{
if(newImage)
{
this.add(newImage);
}
if(oldImage)
{
this.remove(oldImage);
}
}
})
Finally got a solution to this,
It can be done into the view using the listeners object.
Here is the code sample for it.
listeners:{
initialize:function()
{
var dataview = this;
dataview.on("itemtap",function(list,index,target,record,event){
event.preventDefault();
});
dataview.on("itemswipe",function(list,index,target,record,event){
if(event.direction === "right")
{
var buttonId = target.element.down(".bookdesk-button").id;
var buttonEl = Ext.ComponentQuery.query("#"+buttonId)[0];
if(Ext.isObject(buttonEl))
{
buttonEl.setZIndex(9999);
buttonEl.show({
showAnimation:{
type:"slideIn",
duration:500
}
});
var listeners = {
tap:function(btn,e,opt)
{
console.log("Button Tapped");
}
};
buttonEl.setListeners(listeners);
}
else
{
console.log("This is not a valid element");
}
}
});
}
}
Thanks Anyways.
I have invoked invite to BBM while clicking a button in qml,but i need to send the invitation for the contacts how to do this?my code
Button {
text: "Invite"
onClicked: {
invokeQuery.uri = "pin:210000A"
invokeQuery.updateQuery();
}
attachedObjects: [
Invocation {
id: invokeShare
query: InvokeQuery {
id: invokeQuery
}
onArmed: {
trigger("bb.action.INVITEBBM");
}
}
]
}
Can anyone send me some solutions to solve this.?
Thanks
Invocation query is immutable object which means that values in the query are not dynamic. If you want to update query in dynamic you need to do it via control signals or variables.
For example, you have a component called Inviter with the pin property exposed:
import bb.cascades 1.0
Container {
property string pin
Button {
text: "Invite to BBM"
onClicked: {
query.uri = "pin:" + pin
invoke.trigger("bb.action.INVITEBBM")
}
}
attachedObjects: [
Invocation {
id: invoke
query: InvokeQuery {
id: query
invokeTargetId: "sys.bbm.sharehandler"
onQueryChanged: {
invoke.query.updateQuery()
}
}
}
]
}
Then you can use it this way:
import bb.cascades 1.0
Page {
Container {
layout: DockLayout {
}
TextArea {
id: pinEditor
hintText: "Enter PIN to invite"
onTextChanged: {
inviter.pin = text
}
input.submitKey: SubmitKey.Send
}
Inviter {
id: inviter
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
}
}
}
Also, don't forget to enable "Blackberry Messenger" permission in your bar-descriptor.xml and add following libraries to your .pro file:
LIBS += -lbbplatformbbm
LIBS += -lbbsystem
I have an application in MVC with a view class:
Ext.define('a.view.Mainmenu' ,{
extend: 'Ext.menu.Menu',
alias: 'widget.mainmenu',
text: 'Menu',
items: [
{
xtype: 'menucheckitem',
id: 'mci1',
text: 'a'
},
{
xtype: 'menucheckitem',
id: 'mci2',
text: 'b'
}]
});
How I can control the click events of the menucheckitems in the controller? I want to check if the menucheckitems are checked.
I tried something in the init function of the controller, but there is an error (item.down("mci1") is null):
...
init: function() {
this.control({
'mainmenu': {
click: function(item) {
if (item.down('mci1').checked == true) {
...
}
if (item.down('mci2').checked == true) {
...
}
}
}
});
}
How I could do it right?
#Ringo,
Neither the menuitem or menucheckitem have a method of down() available to them according to the Sencha docs (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.menu.CheckItem-event-checkchange).
So, that is why those aren't working.
There is an event for the xtype of menucheckitem called 'checkchange'. This event makes the following arguments available for your function:
this (Ext.menu.CheckItem) <= the actual menucheckitem that was checked/unchecked (so mci1 or mci2 depending on which the user clicked on)
checked (Boolean) <= true if the change set the menucheckitem as checked and false if unchecked.
So, this would only require you to do something like:
...
init: function() {
this.control({
'mainmenu menucheckitem': {
checkchange: function(item, checked) {
if (checked) {
if(item.id == 'mci1'){
...
}
}else{
...
}
}
}
});
}
The item parameter is already your menu item. You don't have to query down.
so it would be:
if(item.checked && item.getId() == 'mci1'){
...
}