在BB10 Cascades的QML中提供了按钮组件,也就是Button组件,通过它可以为用户提供一个操作按钮。
对于简单的界面操作,可以在QML中直接为按钮编写javascript代码,通过javascript执行一些操作,如果涉及到复杂的后台操作,可以在按钮事件中通过javascript调用C++/QT对象的方法。
本文先讨论如何通过简单的javascript代码为按钮添加动作。
按钮组件的使用比较简单,我们还是使用之前博文使用的“HelloWorld”样例来演示。
首先通过QML编辑器打开mail.qml页面,然后从左下角拖拽按钮控件到QML编辑器中,在希望插入按钮的地方释放鼠标,我是将按钮插入到“hello world”标签之前,所以我将按钮组件拖拽到"helllo world"那个“label”组件的上方。
拖拽完成后Cascades IDE会自动生成按钮的QML代码,选中生成的QML代码,就可以在QML Properties页面中修改按钮属性了。在Text一栏中可以输入按钮的文字,我输入的是“Chang Value”。点击On click旁边的闪电形按钮可以生成该按钮的onClicked方法,我希望点击按钮可以修改“hello world”标签的文字,所以我在onClicked事件中输入了代码:
myLabel.text = qsTr("New String");
注意这里使用了组件名myLabel,但是目前没有为“hello world”标签指定名称,所以这时运行测试程序会报找不到“myLabel”。
我们需要为“helllo world”标签指定一个名称,方法是选中对应的Label组件,在QML Properties页面中将ID设置成指定的名称,本例将“Hello World”标签的id设置成myLabel。
有关按钮的创建请参考下图:
另外,通过javascript除了可以修改标签组件的文字以外,还可以修改组件的其它属性,比如通过“布局属性”的修改可以改变一个组件的位置。我在以上的养例中添加了第二个按钮,按钮文字为“Change Position”, onClicked代码为:
myLabel.horizontalAlignment = HorizontalAlignment.Left;
这样点击“Change Position”按钮时“hello world”标签就会变成左对齐。
大家可以测试运行一下,同时可以在测试一下按钮的其它QML属性。
下面是完整的mail.qml代码,供参考:
// creates one page with a label
Page {
Container {
layout: StackLayout {
}
Button {
horizontalAlignment: HorizontalAlignment.Center
onClicked: {
myLabel.text = qsTr("New String");
}
text: "ChangValue"
}
Button {
text: "Change Position"
onClicked: {
myLabel.horizontalAlignment = HorizontalAlignment.Left;
}
horizontalAlignment: HorizontalAlignment.Center
}
Label {
id: myLabel
text: qsTr("Hello World")
textStyle.base: SystemDefaults.TextStyles.BigText
verticalAlignment: VerticalAlignment.Center
horizontalAlignment: HorizontalAlignment.Center
}
}
}
分享到:
相关推荐
BB10终端本机 BB10 Cascades 终端仿真器。
知乎日报 BB10(已停止维护此版本,继续更新 Cascades 版本。)暂时测试的机器是 passport, 其他bb10机器没有测试完成功能首页, 置顶新闻(轮播图部分), 每日新闻栏目以及查看栏目内容主题以及查看主题内容查看评论...
节点-bb10 轻松向 BlackBerry 10 应用程序发送推送通知。 安装 $ npm install node-bb10 要求 BlackBerry 10 设备和您在时从 BlackBerry 获得的相应密钥。 用法 var bb10 = require ( 'node-bb10' ) ; // create a...
黑莓10平台开发教程,Cascades教程,适合于初学者,可以了解整个BB10的开发流程。
将著名的改编为 BB10 平台,该平台使用替代的 Cascades UI 框架。 可以浏览预构建的 HTML 文档。 它位于 prebuilt-docs-html/ 目录中。
科尔多瓦-ua-bb10 BlackBerry 10 推送插件。 注意:Urban Airship 在开发模式下推送消息有问题。 消息没有被传递。 他们知道这个问题,这将在今年晚些时候修复。 如果您想在开发模式下测试您的推送消息,您可以...
gulp-cordova-build-bb10 为 BlackBerry 10 平台构建cordova 项目。 安装 npm install --save-dev gulp-cordova-build-bb10 用法 确保将的位置添加到您的路径中。 var path = require ( 'path' ) , gulp = ...
bb10world for 黑莓 很好用,是zip文件,解压即可
phonegap-ua-bb10(已弃用) 已弃用此插件已弃用,以支持 用于在令人敬畏的 BlackBerry 10 平台上使用 Urban Airship 的 PhoneGap 插件。 配置文件 您应该将以下首选项和调用目标添加到 config.xml 文件中。 &...
无标签播放器 BB10 音频播放不使用 MP3 标签,而是使用目录树
廉价亲民黑鸟单车BB10 GPS码表评测.pdf
黑莓手机中一些应用的简化
BB10安装BAR软件详细教程.黑莓Q10 Z10 详细软件安装转制教程
TurboBerry(黑莓来电通)是一款多功能黑莓手机软件,具有以下主要功能: ◆ 来电,去电归属地显示:支持 203 个国家和地区,国内 342 个地区、324 个电话区号、36 万个手机号段(采用最新数据库,支持所有新号段...
BB10基于webworks下的HTML5应用开发
BlackBerry手机,Sony定制微信流畅版,之前可以用,不知道以后还可不可以用
BB10-WebWorks-SDK_2.2 最新的SDK下载
Phonegap基于bb10的环境搭建和app的创建
BB10 的 Pouch DB 示例应用程序 这个应用程序的目的是演示在 BB10 设备上运行 PouchDB 作为本地数据库的可能应用程序,以及利用它通过同步网关连接到 Couchbase 服务器。 为了进行测试,该应用程序已部署到 ...
参考:Blackberry10 使用js+HTML5开发 RSA加密解密时遇到的问题:BB10端使用js加密与解密, 服务器端使用加密与解密 1,加密非常的简单代码机会上没怎么修改,另外js加密可能出现的问题在BB10 AES加密中已经说过,js ...