前回の投稿の続きで、Qt SoftwareとNokiaの新しいテクノロジーについてもう少しお伝えしたいと思います。 QMLは、最新のアプリケーションの開発を簡素化し、それらを動きで満たすために設計された新しいユーザーインターフェイス記述言語であることを思い出してください。
この記事では、MVCパラダイムがQMLでどのように機能するかについて少しお話ししたいと思います。
あなたが何もコンパイルする必要がないように、研究のために、qmlviewerでCreatorアセンブリを持っていることで十分です、それはftpトロールにあります。
スクリーンショットに示されているものに似たものを作成してみましょう。
Creatorでは、独自のqmlプロジェクトを作成したり、qmlファイルを使用して既存のカタログをインポートしたりできます。
その結果、* .qmlprojectファイルが表示されます。このファイルは、Creatorで開くことができ、個々のqmlファイルではなくプロジェクト全体で機能します。
基本タイプを機能させるには、インポートディレクティブを使用してqmlファイルでQtモジュールを接続する必要があります。
各qmlファイルはモジュールであり、デフォルトでは、現在のディレクトリにあるすべてのファイルが自動的にインポートされます
まず、ボタンを作成しましょう：
Button.qml
import Qt 4.6
Item {
id: container
signal clicked
property string text
property bool keyUsing: false
BorderImage {
id: buttonImage
source: "images/toolbutton.sci"
width: container.width; height: container.height
}
BorderImage {
id: pressed
opacity: 0
source: "images/toolbutton.sci"
width: container.width; height: container.height
}
MouseRegion {
id: mouseRegion
anchors.fill: buttonImage
onClicked: { container.clicked(); }
}
Text {
id: btnText
color: if (container.keyUsing){ "#DDDDDD" ;} else { "#FFFFFF" ;}
anchors.centerIn: buttonImage; font.bold: true
text: container.text; style: Text.Raised; styleColor: "black"
font.pixelSize: 12
}
states: [
State {
name: "Pressed"
when: mouseRegion.pressed == true
PropertyChanges { target: pressed; opacity: 1 }
},
State {
name: "Focused"
when: container.focus == true
PropertyChanges { target: btnText; color: "#FFFFFF" }
}
]
transitions: Transition {
ColorAnimation { target: btnText; }
}
width: (btnText.width + 20)
}
* This source code was highlighted with Source Code Highlighter .
状態配列は、ボタンのさまざまな状態を記述します。この場合、押された状態または離された状態の2つだけです。 状態自体には、オブジェクトがこれらの状態になる条件が示されています。 状態間の遷移中に発生するアクションは、遷移配列に記述されています。 また、ボタンはクリックされた信号を発し、任意のオブジェクトを受信して処理できます。
これで、他のモジュールで使用できるボタンモジュールができました。
contactlist.qml
...
Button {
id: tagsBtn
anchors.right: parent.right;
anchors.rightMargin: 5;
y: 1;
height: (parent.height - 3)
text: " "
}
...
* This source code was highlighted with Source Code Highlighter .
まったく同じ方法で、ツールバーと検索文字列が例に実装されています。
次に、モデル自体に進みましょう。
この例では、モデルはflickrに追加された最後の写真のテープを使用します。 このサイトでは、この情報をrssの形式で提供しています。 qmlには、 xpathに基づいて機能するxmlデータを処理するための特別なモデルがあります。
Rssmodel.qml
import Qt 4.6
XmlListModel {
property string tags : ""
source: "http://api.flickr.com/services/feeds/photos_public.gne?" +(tags ? "tags=" +tags+ "&" : "" )+ "format=rss2"
query: "/rss/channel/item"
namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";"
XmlRole { name: "title" ; query: "title/string()" }
XmlRole { name: "imagePath" ; query: "media:thumbnail/@url/string()" }
XmlRole { name: "url" ; query: "media:content/@url/string()" }
XmlRole { name: "description" ; query: "description/string()" }
XmlRole { name: "tags" ; query: "media:category/string()" }
XmlRole { name: "photoWidth" ; query: "media:content/@width/string()" }
XmlRole { name: "photoHeight" ; query: "media:content/@height/string()" }
XmlRole { name: "photoType" ; query: "media:content/@type/string()" }
XmlRole { name: "photoAuthor" ; query: "author/string()" }
XmlRole { name: "photoDate" ; query: "pubDate/string()" }
}
* This source code was highlighted with Source Code Highlighter .
これで、フリッカーフィードからのほぼすべての情報を含むモデルが手に入りました。 次に、モデルの要素を表示する責任を負うデリゲートを試してみましょう。ただし、隣接する要素の背景の明るさを変えることを忘れないでください。
ListDelegate.qml
import Qt 4.6
Component {
Item {
id: wrapper;
width: parent.width;
height: (avatar.y + avatar.height + 15)
Rectangle {
color: "black"
opacity: index % 2 ? 0.2 : 0.3
height: wrapper.height
width: wrapper.width
y: 1
}
Rectangle {
id: avatarBorder
width: (avatar.width + 2); height: (avatar.height + 2);
color: "transparent" ;
smooth: true
Image {
id: avatar
width: 32; height: 32
source: imagePath
anchors.centerIn: parent
}
anchors.left: wrapper.left
anchors.leftMargin: 5
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: name
color: "white"
font.bold: true
style: "Raised" ; styleColor: "black"
anchors.left: avatarBorder.right
anchors.leftMargin: 10
anchors.top: avatarBorder.top
}
Text {
text: type
color: "#CCC"
font.bold: true
style: "Raised" ; styleColor: "black"
anchors.left: avatarBorder.right
anchors.leftMargin: 10
anchors.bottom: avatarBorder.bottom
}
}
}
* This source code was highlighted with Source Code Highlighter .
ご覧のとおり、モデルの要素へのアクセスは非常に簡単です。
次に、すべてをまとめてListViewで表示します。ListViewは、情報を単純なリストで表示し、動的スクロールなどの素晴らしいボーナスを提供します。
必要なタイプのオブジェクトを作成し、ビューとデリゲートを設定します。
contactlist.qml
...
RssModel {
id: rssModel
}
ListModel {
id: proxyModel
}
ListDelegate {
id: listDelegate
}
ListView {
id: contactListView;
z: 0
model: contactlistModel; delegate : listDelegate;
highlight : highlight;highlightFollowsCurrentItem: true
focus: true
width: parent.width;
cacheBuffer: 100;
anchors.top: topToolBar.bottom
anchors.bottom: searchBar.top
}
...
* This source code was highlighted with Source Code Highlighter .
モデルとデリゲートに加えて、ビューにhighlightという要素を与えました。これは現在の要素を強調表示する役割を果たします。
Component {
id: highlight
Rectangle {
width: contactListView.currentItem.width
height: contactListView.currentItem.height
color: "white" ; radius: 5; opacity: 0.3
y: SpringFollow {
source: contactListView.currentItem.y
spring: 3
damping: 0.2
}
}
}
* This source code was highlighted with Source Code Highlighter .
SpringFollowプロパティを使用すると、現在の要素をたどる際のハイライトの動作を設定できます。
最後に、モデルごとに検索を整理してみましょう。これを行うには、通常のモデルを作成します。
ListModel {
id: MyListElementsModel
ListElement {
name: "Polly"
type: "Parrot"
imagePath: "images/avatar.png"
age: 12
size: "Small"
}
...
* This source code was highlighted with Source Code Highlighter .
検索はjavascriptを使用して実行され、条件を満たすすべてのフィールドが中間proxyModelに追加されます
onConfirmed: {
proxyModel.clear();
for ( var i=0;i!=contactlistModel.count;i++) {
var item = contactlistModel.get(i);
if (item.name.search(searchBar.text) != -1) {
proxyModel.append({ "name" : item.name, "type" : item.type, "imagePath" : item.imagePath});
}
}
contactListView.model = proxyModel;
}
onCancelled: {
contactListView.model = contactlistModel;
}
* This source code was highlighted with Source Code Highlighter .
検索スクリプトは、検索ラインからの確認信号がonConfirmedスロットに到着すると起動します。 キャンセルされたビューでスロットがアクティブになっている場合、元のモデルが返されます。
検索の仕組みを示すスクリーンショット：
私のサイトから自由にダウンロードして感じることができる両方の例：
XMLモデルの例
検索例
それらを実行するには、Creatorでプロジェクトを開くか、単にcontactlist.qmlファイルを指定してqmlviewerプログラムを使用します。
今日は以上です。 最後に、qmlを使用すると、髪が滑らかで絹のようになります。