诺基亚 塞班 meego qml 开发小知识点汇总
1.在一个组件创建完成时执行一个函数，可以使用Component.onCompleted:{ // 这里可以执行JSP操作 }
------------------------------------------------------------------------------------------------------------------------------------------
2.操作字符串：
问题描述： 将url的一部分和images的一项进行组合成新的url
url： http://img.fun-guide.mobi/show?src=http://qa.fun-guide.mobi:8080/tm/images/hb/735-20110802142308.jpg&w=140
images： /images/jz/735-1-20110802142309.jpg,/images/jz/735-2-20110802142309.jpg
过程：主要使用Jsp的split("xx", n)来进行字符串分隔，其中xx代表分隔处的字符串，n是一个数字，表示要返回的子字符串的个数。
步骤1： 分解字符串
var contextImages = data.movie[i].pics;
// 获取/images/jz/735-1-20110802142309.jpg,/images/jz/735-2-20110802142309.jpg ，这里的data是网上获取的JSON格式的数据
var tempArray = new Array; // 新建数组，jsp的语法
tempArray = contextImages.split(",", 2); //2表示返回两个字符串
结果：将/images/jz/735-1-20110802142309.jpg,/images/jz/735-2-20110802142309.jpg
分解为了/images/jz/735-1-20110802142309.jpg和/images/jz/735-2-20110802142309.jpg，它们分别放在tempArray[0]和tempArray[1]中
步骤2： 分离url
var tempString = url.split("/images", 1); // 1表示返回一个字符串
//url即/images/jz/735-1-20110802142309.jpg,/images/jz/735-2-20110802142309.jpg
console.log(tempString)
结果：将http://img.fun-guide.mobi/show?src=http://qa.fun-guide.mobi:8080/tm/images/hb/735-20110802142308.jpg&w=140
中取出了http://img.fun-guide.mobi/show?src=http://qa.fun-guide.mobi:8080/tm
步骤3：重组url
var contentImage1 = tempString + tempArray[0];
var contentImage2 = tempString + tempArray[1];
------------------------------------------------------------------------------------------------------------------------------------------
3.问题描述：
TextArea部件怎么获取输入的字数，怎样限定输入的字符数？
比如我们要显示现在输入的字符数，然后最多只可以输入50个字符。
TextArea{
id:textarea
onTextChanged: {
if(textarea.text.length > 5)
{
//substr and length are javastrip's string method
textarea.text = textarea.text.substr(0,5);
cursorPosition = 5;
}
}
}
------------------------------------------------------------------------------------------------------------------------------------------
4. Loading等待组件
Image {
id: loading; source: "images/loading.png"
NumberAnimation on rotation {
from: 0; to: 360; running: loading.visible == true; loops: Animation.Infinite; duration: 900
}
}
------------------------------------------------------------------------------------------------------------------------------------------
5.减慢视图切换速度：highlightMoveDuration属性
Additionally, ListView inherits from Flickable, making the list respond to mouse drags and other gestures. The last portion of the
code above sets Flickable properties to create the desired flicking movement to our view. In particular,the property
highlightMoveDuration changes the duration of the flick transition. A higher highlightMoveDuration value results in slower menu
switching.
------------------------------------------------------------------------------------------------------------------------------------------
6.实现一个按钮
Rectangle {
//identifier of the item
id: button
//these properties act as constants, useable outside this QML file
property int buttonHeight: 75
property int buttonWidth: 150
//attaches to the Text element's text content
property string label
property color textColor: buttonLabel.color
//the color highlight when the mouse hovers on the rectangle
property color onHoverColor: "lightsteelblue"
property color borderColor: "transparent"
//buttonColor is set to the button's main color
property color buttonColor: "lightblue"
property real labelSize: 14
//set appearance properties
radius:6
smooth: true
border.width: 2
border.color: borderColor
width: buttonWidth; height: buttonHeight
Text{
id: buttonLabel
anchors.centerIn: parent
text: label //bind the text to the parent's text
color: "#DCDCCC"
font.pointSize: labelSize
}
//buttonClick() is callable and a signal handler, onButtonClick is automatically created
signal buttonClick()
//define the clickable area to be the whole rectangle
MouseArea{
id: buttonMouseArea
anchors.fill: parent //stretch the area to the parent's dimension
onClicked: buttonClick()
//if true, then onEntered and onExited called if mouse hovers in the mouse area
//if false, a button must be clicked to detect the mouse hover
hoverEnabled: true
//display a border if the mouse hovers on the button mouse area
onEntered: parent.border.color = onHoverColor
//remove the border if the mouse exits the button mouse area
onExited: parent.border.color = borderColor
}
//change the color of the button when pressed
color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
//animate the color whenever the color property changes
Behavior on color { ColorAnimation{ duration: 55} }
//scale the button when pressed
scale: buttonMouseArea.pressed ? 1.1 : 1.00
//Animate the scale property change
Behavior on scale { NumberAnimation{ duration: 55} }
}
------------------------------------------------------------------------------------------------------------------------------------------
7.文本编辑器，自动换行，滚动区域
Rectangle {
width: 600
height: 400
Flickable {
id: flick
y: 100
width: 600
height: 200
contentWidth: edit.paintedWidth
contentHeight: edit.paintedHeight
clip: true
flickableDirection: Flickable.VerticalFlick
function ensureVisible(r) {
if(contentX >= r.x)
contentX = r.x;
else if(contentX + width <= r.x + r.width)
contentX = r.x + r.width - width;
if(contentY >= r.y)
contentY = r.y;
else if(contentY + height <= r.y + r.height)
contentY = r.y + r.height - height
}
TextEdit {
id: edit
width: flick.width
height: flick.height
focus: true
wrapMode: TextEdit.Wrap
onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
// // 限制只输入5个字符
// onTextChanged: {
// if(edit.text.length > 5)
// {
// edit.text = edit.text.substr(0,5);
// cursorPosition = 5;
// }
// }
}
}
}
------------------------------------------------------------------------------------------------------------------------------------------
8.使用外部字体
FontLoader组件，E:\QtSDK\Examples\4.7\declarative\text\fonts\availableFonts示例程序
------------------------------------------------------------------------------------------------------------------------------------------
9.较长字体自动移动显示部件
import QtQuick 1.0
Rectangle {
width: 360
height: 640
Rectangle {
id: textBar
height: 30
width: 200
color: "yellow"
x: 20
y: 200
clip: true
Text {
id: myText
text: "你好北京！！！！！！！！！！！！！！！！！！"
font.pointSize: 15
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: { // 当鼠标悬停时开启定时器
textTimer.running = true
}
onExited: { // 当鼠标离开时停止定时器
textTimer.running = false
}
}
Timer { // 使用定时器来移动文本
id: textTimer
interval: 150
repeat: true
onTriggered: {
myText.x -= 2;
if(myText.x + myText.width + 30 <= textBar.x + textBar.width)
{
myText.x = 0;
}
}
}
}
}
------------------------------------------------------------------------------------------------------------------------------------------
10.抽屉部件：
import QtQuick 1.0
Rectangle {
width: 360
height: 640
ListModel { // 模型
id: model
ListElement {name: "北京"}
ListElement {name: "上海"}
ListElement {name: "广州"}
ListElement {name: "大连"}
ListElement {name: "西安"}
}
Component { // 代理
id: delegate
Item {
width: view.width
height: content.visible? content.height + xialaBar.height : xialaBar.height
Column {
anchors.fill: parent
BorderImage { // 控制条
id: xialaBar
property bool isShown: false
source: isShown? "./ee02.PNG" : "./ee01.PNG"
width: view.width
border.left: 40
border.right: 40
Text {
id: xialaText
text: name
color: "white"
font.pointSize: 10
anchors.left: parent.left
anchors.leftMargin: 50
anchors.verticalCenter: parent.verticalCenter
}
MouseArea {
anchors.fill: parent
onClicked: {
xialaBar.isShown = !xialaBar.isShown;
content.visible = !content.visible;
}
}
}
Item { // 内容区域,内嵌的列表
id: content
visible: false
width: view.width
height: 200
ListModel {
id: contentModel
ListElement {name: "商店1"}
ListElement {name: "商店2"}
ListElement {name: "商店3"}
ListElement {name: "商店4"}
ListElement {name: "商店5"}
}
Component {
id: contentDelegate
Text {
text: name
font.pointSize: 10
}
}
ListView {
id: contentView
anchors.fill: parent
model: contentModel
delegate: contentDelegate
clip: true
}
}
} // column
}// item
}
ListView { // 视图
id: view
anchors.fill: parent
model: model
delegate: delegate
clip: true
}
}
------------------------------------------------------------------------------------------------------------------------------------------
11.loading文字，汉字后面的点逐渐增多效果： loading. loading.. loading...
import QtQuick 1.0
Rectangle {
width: 360
height: 640
Image {
id: background
source: "./bg.png"
anchors.fill: parent
property int count: 1
Image {
id: loading
source: "./01.jpg"
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 70
}
Timer {
interval: 300
repeat: true
running: true
onTriggered: {
background.count ++;
if (background.count == 1) loading.source = "./01.jpg";
else if (background.count == 2) loading.source = "./02.jpg";
else if (background.count == 3) loading.source = "./03.jpg";
else if (background.count == 4) loading.source = "./04.jpg";
else if (background.count == 5) loading.source = "./05.jpg";
else if(background.count == 6) {
loading.source = "./06.jpg";
background.count = 0;
}
}
}
}
}
------------------------------------------------------------------------------------------------------------------------------------------
12.// meego禁止横屏
activitiesPage.orientationLock = PageOrientation.LockPortrait
------------------------------------------------------------------------------------------------------------------------------------------
13.// 等待图片下载时显示的动画图片
import QtQuick 1.1
import com.meego 1.0
Image {
id: image
property bool loading: status != Image.Ready
Image {
id: container
property bool on: false
source: "qrc:///images/busyLoading.png"
visible: loading
anchors.centerIn: parent
NumberAnimation on rotation {
running: loading; from: 0; to:360
loops: Animation.Infinite; duration: 2000
}
}
}
------------------------------------------------------------------------------------------------------------------------------------------
14.// 提示对话框
QueryDialog {
id: tishiDialog
icon: "image://theme/icon-l-contacts"
titleText: "您确定要退出吗？"
message: ""
acceptButtonText: "是"
rejectButtonText: "否"
onAccepted: {
Qt.quit();
}
onRejected: {
tishiDialog.close();
}
}
------------------------------------------------------------------------------------------------------------------------------------------
15.调出拨打电话界面：
QueryDialog {
id: queryBill
icon: "image://theme/icon-l-contacts"
titleText: "提示"
message: "确认拨打该电话吗？"
acceptButtonText: "确定"
rejectButtonText: "取消"
onAccepted: {
Qt.openUrlExternally("file:///home/user/MyDocs/a.vcf")
}
}
调用meego拨打电话接口来拨打指定的电话号码：
Qt.openUrlExternally("tel:" + phoneNum)，phoneNum为一个指定的电话号码。
------------------------------------------------------------------------------------------------------------------------------------------
16.Meego自带的Loading动画（白色光圈）
Rectangle {
id: rectangle1
property string warningtext: "加载中..."
property bool show: false
anchors.fill: parent
color: "black"
visible: show
opacity: 0.7
focus: true
z:3
//forceActiveFocus:
BusyIndicator {
id:busy
visible: show
opacity: 1
anchors.centerIn: parent; running: show;
platformStyle: BusyIndicatorStyle {
size: "large"
period: 1000
numberOfFrames: 10
__invertedString: "inverted"
}
onRunningChanged: {
console.log("enter! BusyLoading!");
}
}
Text {
id: showText
text: warningtext
anchors.topMargin: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: busy.bottom
font.bold: true
font.pointSize: 20
verticalAlignment: Text.AlignVCenter
color: "white"
}
MouseArea
{
anchors.fill: parent
onClicked: console.log("touch the screen! BusyLoading!")
}
}
------------------------------------------------------------------------------------------------------------------------------------------
17.Button部件使用
Button
{
id: btnNext
width: 100
height: 50
text: "下一页"
style: ButtonStyle {textColor:"white";pressedBackground:"qrc:///background1.png";background:"qrc:///background2.png"}
anchors.verticalCenter: parent.verticalCenter
enabled: currentindex < totalPage ? true : false
anchors.right: comp.right
anchors.rightMargin: 5
onClicked: {
currentindex++
requestnet(currentindex);
}
}
------------------------------------------------------------------------------------------------------------------------------------------
18.创建Meego工程后生成的文件，只有以下是必须的：
qml文件夹，各种cpp文件，h文件，pri文件，qrc文件，pro文件，图标文件等。
------------------------------------------------------------------------------------------------------------------------------------------
19.生成sis文件
步骤：
1.如果要想设置程序的名称为中文，那么要修改项目目录中的.loc 文件，将其中的名称改为中文，然后使用Utf8编码保存。并设置为只读（这个很
重要，不然编译后又变成以前的了）。
2.设置程序的Uid，公司，在手机的安装列表中显示的名称，可以使用siscontents软件的工具->编辑菜单，然后进行更改，最后另存为即可。
3.进行签名。使用DOSPY签名软件。默认在C盘的“签名工具”目录的Other目录中，将自己的sis文件，证书cer文件和key文件放入其中。然后在cer
文件上单击右键，选择“导入证书（替换）”，然后按回车即可。下一步，在sis文件上点击右键，选择“签名此文件”，选择2即导入的证书，然后
回车即可。最后会在该目录中生成已经签名的sisx文件。
4.如果进行了第3步，又要进行第2步，那么第2步会将签名废弃掉，这样需要重新进行第3步进行签名。
或者使用命令行：
qmake MerchantsBank.pro
make clean
make release-gcce
make sis QT_SIS_CERTIFICATE=*.cer QT_SIS_KEY=*.key
signsis My.SIS Signed.SIS tc.cer tc.key mypassword
查看：signsis.exe -o –p mysisfile.sis
http://www.developer.nokia.com/Community/Wiki/index.php?title=Symbian%E7%AD%BE%E5%90%8D%E7%94%A8%E6%88%B7%E6%8C%87%E5%8D
%97&diff=prev&oldid=112815
------------------------------------------------------------------------------------------------------------------------------------------
20.发布Meego程序
应用程序图标：在创建的项目目录中有两个图片文件，分别为64*64和80*80，将这两个图片替换掉即可。64*64用于程序列表，80*80的用于手机桌面显示。
应用程序包信息：在项目管理模式，选择运行页面，在这里可以更改“创建包”中的信息。包名称默认为小写（只能出现小写字母和下划线）；下面是包的版本；再下面是包的简介，会在手机中程序列表里点击该软件时显示；下面是在程序列表中显示的名称，可以随意写；下面是在程序列表中的图标，可以选择项目目录中那个64*64的图片；最后是changelog文件，就是日志文件。
桌面上的应用程序名称：这里可以在项目中的Sephora_harmattan.desktop文件中进行更改。将name后的字符更改为要显示的名字即可，这里注意名称直接写就行，如果是中文，也直接写，不用加引号。最后在编辑菜单中选择文本编码，然后使用UTF-8编码将文件重新保存即可。
更改完毕后，可以清理一下项目，然后重新编译运行即可，选择release方式进行编译。
------------------------------------------------------------------------------------------------------------------------------------------
21.使用js替换字符串。
var text = "(0319)123 456";
var text1 = text.replace(new RegExp("\\(","gi"), "");
var text2 = text1.replace(new RegExp("\\)","gi"), "");
var text3 = text2.replace(new RegExp("\\ ","gi"), "");
console.log(text3);
这里使用了正则表达式来完成替换字符串text中的所有指定字符，如果不使用正则表达式，比如replace("2","3")这样只会替换第一个出现的数字2。正则表达式中的g表示替换整个字符串，i表示不区分大小写。
调用示例：
Rectangle {
width: 360
height: 360
Text {
text: "Hello World"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
var number = replace("(0319)123 456")
console.log(number)
}
}
function replace(num) {
var text1 = num.replace(new RegExp("\\(","gi"), "");
var text2 = text1.replace(new RegExp("\\)","gi"), "");
var text3 = text2.replace(new RegExp("\\ ","gi"), "");
return text3;
}
}
------------------------------------------------------------------------------------------------------------------------------------------
22 生成uuid：
function basic_createUUID(){
var s = [];
var hexDigits = "0123456789ABCDEF";
for (var i = 0; i < 32; i++) {
s[i] = hexDigits.substr(Math.floor(new Date().getTime()*Math.random()%100/100 * 0x10), 1);
}
s[12] = "4";
s[16] = hexDigits.substr((s[16] & 0x3) | 0x8, 1);
var uuid = s.join("");
return uuid;
}
详见：// http://www.ietf.org/rfc/rfc4122.txt Section 4.4
------------------------------------------------------------------------------------------------------------------------------------------