诺基亚 塞班 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

 

 

------------------------------------------------------------------------------------------------------------------------------------------