isb corporation - isus• 資本金 14億4,060 ... 2005 - 全てのプラットフォームがgpl...

96
Copyright ISB CORPORATION / Confidential Information 1 2011/7/15 ISB CORPORATION MeeGoを使用したQt/QMLのネイティブ・プラグインの作成法 ISB 1st Business Unit July 2011 Rev.2

Upload: others

Post on 21-May-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Copyright ISB CORPORATION / Confidential Information1 2011/7/15

ISB CORPORATIONMeeGoを使用したQt/QMLのネイティブ・プラグインの作成法

ISB 1st Business UnitJuly 2011

Rev.2

Copyright ISB CORPORATION / Confidential Information2 2011/7/15

会社概要

• 設立 1970年6月4日

• 資本金 14億4,060万円(2010年12月31日現在)

• 社員数 882名(連結) (2011年06月08日現在)

• 売上 110億5800万円(2010年度実績)

• 本社 東京都品川区大崎5-1-11• 開発拠点 国内:8

海外:1

子会社:3社

Copyright ISB CORPORATION / Confidential Information3 2011/7/15

Index

• Qt• MeeGo• Qt C++• Qt Quick• Creating Extension Plugins

Copyright ISB CORPORATION / Confidential Information4 2011/7/15

Qt

Copyright ISB CORPORATION / Confidential Information5 2011/7/15

Qt

・Qt Demo

先ずは Qt のデモをご覧ください。

Painting Demonstrations/Vector DeformationGraphics View Demonstrations/40.000 Chips

これらのデモは、Qt SDK に同梱されています。

Copyright ISB CORPORATION / Confidential Information6 2011/7/15

Qt

・What is Qt?

Qt はクロスプラットフォームのアプリケーションフレーム

ワークです。

最初はユーザーインターフェース用に作られました。

今は全ての物が揃っています。

Databases, XML, WebKit, multimedia, networking, OpenGL, scripting, non-GUI...

Copyright ISB CORPORATION / Confidential Information7 2011/7/15

Qt

・Qt の利用例

Copyright ISB CORPORATION / Confidential Information8 2011/7/15

Qt

・Qt の歴史

1991 - Haavard Nord 氏と Eirik Chambe-Eng 氏が、

X11 と Windows の Qt のサポート始めました。

1994 - Trolltech 社が設立されました。

1996 - Matthias Ettrich 氏が KDE プロジェクトを開始し、

Qt が採用されました。

Copyright ISB CORPORATION / Confidential Information9 2011/7/15

Qt

・Qt の歴史

2001 - Mac OS X のサポートを追加

2005 - 全てのプラットフォームが GPL ライセンス化

2008 - Nokia が Trolltech を買収

2009 - S60 のサポートを追加

2010 - Qt を採用した MeeGo が リリース

Copyright ISB CORPORATION / Confidential Information10 2011/7/15

Qt

・Qt に関して

- 世界8ヶ所で、250 名以上の人が従事しています。

- 6,500 社以上の会社で採用されました。

- デスクトップ、携帯そして組込み開発に利用可能です。

- 350,000 以上の商用ライセンス、オープンソースの開発者により使用されています。

- コンサルティング、サポート及びトレーニングによるサポートがあります。

Copyright ISB CORPORATION / Confidential Information11 2011/7/15

Qt

・Qt を採用する理由

- 同じコードを、複数のプラットフォームで動作する事が可能です。

- コンパクトで高いパフォーマンスのアプリケーションです。

- 基礎部分では無く、革新的な所に注目しています。

- 複数のライセンスがあります。- Commercial, LGPL or GPL

- プロフェッショナルサービス、サポート及びトレーニングが充実。- Qt のエコシステムに参加する事が可能です。

16年の間、お客様の成功と成長を支えてきました。

Copyright ISB CORPORATION / Confidential Information12 2011/7/15

Qt

・Qt Architecture

Mee

Go

Copyright ISB CORPORATION / Confidential Information13 2011/7/15

Qt

・Qt LicensesCommercial LGPL GPL

ライセンス費用 有料 無料 無料

Qt 変更部分のソースコードの開示

ソースコード開示する必要がありません

ソースコード開示の必要があります

ソースコード開示の必要があります

所有権のあるアプリケーションの開発

はいソースコードを公開する

必要はありません

はいLGPL v. 2.1 に準拠していれば可能です

いいえアプリケーションは

GPL 従い、ソースコードの公開が必要です

アップデート

はい直ぐにサポートとアップデート同意の通知が行

われます

はい利用可能です

はい利用可能です

サポート はいいいえ

別途購入する事も可能です

いいえ別途購入する事も可能

です

ランタイム料はい

(条件によります)いいえ いいえ

Copyright ISB CORPORATION / Confidential Information14 2011/7/15

Qt

・Getting Qt

Qt SDK は以下のサイトからダウンロード可能ですhttp://qt.nokia.com/downloads-jp

Copyright ISB CORPORATION / Confidential Information15 2011/7/15

MeeGo

Copyright ISB CORPORATION / Confidential Information16 2011/7/15

MeeGo

・What’s MeeGo?

2010 年 2 月 15 日、世界最大のチップ メーカーである Intel 社と、同じく世界最大のモバイル ハンドセットメーカーである Nokia 社は、両社の従来のオープン ソース プロジェクト、すなわち Moblin とMaemoとを結合し、MeeGo という新しいプロジェクトを開設することを発表しました。

MeeGo プロジェクトは、The Linux Foundation において運営管理されます。

Copyright ISB CORPORATION / Confidential Information17 2011/7/15

MeeGo

・Upstream first

MeeGo は、アップストリーム プロジェクト(コミュニティ)と密に連携し

ており、パッチを提出する場合は、対応するアップストリームプロジェクトにもパッチを提出し、承認されるという手順を踏む必要があります。

(通常は 逆に、オープンソースからプラットフォームを作成し、それをアップストリームにコントリビューションします。)

MeeGo プロジェクトは、The Linux Foundationが運営管理するオープン ソースプロジェクトです。

Copyright ISB CORPORATION / Confidential Information18 2011/7/15

MeeGo

・Architecture

MeeGo は、コアの OS からユーザー インタフェース ライブラリやツールにいたるまで、フル オープン ソースのソフトウェア スタックを提供します。

また、MeeGo はリファレンス ユーザー エクスペリエンスを実装して

いるため、各ベンダーが独自のアドオンを追加することにより、ハードウェア、サービス、個々のユーザー エクスペリエンスをサポートすることができます。

(通常のプラットフォームはUXが固定されています)

Copyright ISB CORPORATION / Confidential Information19 2011/7/15

MeeGo

・Architecture

Linux Kernel

設定データベース システムライブラリ メッセージバス プラットフォーム情報

通信サービス

インターネットサービス

ビジュアルサービス

メディアサービス

データ管理

デバイスサービス

パーソナルサービス

接続管理

テレフォニーAPIs

セルラースタック

IP, VOIP, プレゼンス

Bluetooth

レイアウトエンジン

Webサービス

WebRun Time

ロケーション

GTK / Clutter

3Dグラフィック

2Dグラフィック

i18n レンダリング

メディアアプリケーショ

ンフレームワーク

メディア

フレームワーク

オーディオ

カメラ

コーデック

UPnP

コンテンツフレームワーク

コンテキストフレームワーク

パッケージマネージャー

エネルギー管理

センサー

フレームワーク

システムポリシー

デバイス同期

バックアップ

& リストア

PIMサービス

アカウント& シングルサインオン

MeeGo UI ツールキット(Qt フレームワーク) GTK / Clutter

MeeGo ハンドセット UX MeeGo ネットブック UX その他の UX

ハンドセット UI とアプリケーション

ハンドセット UI フレームワーク

ネットブック UI とアプリケーション

ネットブック UI フレームワーク

Mee

Go

OS

ベース

Mee

Go

OS

ミドル

ウェア

Mee

Go

OS

ユーザ

ーエクスペリエンス

MeeGo IVI UX

MeeGo Tablet UX

Copyright ISB CORPORATION / Confidential Information20 2011/7/15

MeeGo

・MeeGo ネットブック UX

Copyright ISB CORPORATION / Confidential Information21 2011/7/15

MeeGo

・MeeGo ハンドセット UX

Copyright ISB CORPORATION / Confidential Information22 2011/7/15

MeeGo

・MeeGo IVI UX

Copyright ISB CORPORATION / Confidential Information23 2011/7/15

MeeGo

・MeeGo タブレット UX

Copyright ISB CORPORATION / Confidential Information24 2011/7/15

MeeGo

・MeeGo アイ・エス・ビー UX

M

10:35Radio Meter Map

Flick Scroll Flick Scroll

Memo : It’s time!

X

X

Desktop Picture

Copyright ISB CORPORATION / Confidential Information25 2011/7/15

MeeGo

・MeeGo プラットフォームのメリット

MeeGo オープン ソース プロジェクトは、開発者から通信オペレー

ター、あるいはデバイス製造企業に至るまで、エコシステム全体のあらゆる人々が恩恵を受けるという点で特徴的です。

MeeGo では、より高機能なデバイスを目指す業界全体の技術革新

に参加者が直接関わり、貢献し、チャンスに速やかに対応し、目標市場での差別化に重点的に取り組むことができます。

Copyright ISB CORPORATION / Confidential Information26 2011/7/15

MeeGo

・MeeGo SDK

http://developer.meego.com/meego-sdk

対象:Ubuntu 10.04, 10.10; Fedora 13,14; Windows XP, Windows 7

Copyright ISB CORPORATION / Confidential Information27 2011/7/15

MeeGo

・MeeGo アプリケーションの例

例:ジェスチャーコントロールを用いた MeeGo アプリ (展示ブースでご覧ください。)

Linux Kernel

設定データベース システムライブラリ メッセージバス プラットフォーム情報

通信サービス

インターネットサービス

ビジュアルサービス

メディアサービス

データ管理

デバイスサービス

パーソナルサービス

接続管理

テレフォニーAPIs

レイアウトエンジン

Webサービス

GTK / Clutter

3Dグラフィック

メディアアプリケーショ

ンフレームワーク

メディア

フレームワーク

コンテンツフレームワーク

コンテキストフレームワーク

エネルギー管理

センサー

フレームワーク

PIMサービス

アカウント& シングルサインオン

MeeGo UI ツールキット(Qt フレームワーク)

MeeGo ISB UX

ISB UI とアプリケーション

MeeGo IVI UI フレームワーク

Mee

Go

OS

ベース

Mee

Go

OS

ミドル

ウェア

Mee

Go

OS

ユーザ

ーエクスペリエンス

… … … … … … …

Open NI

USB ジェスチャーデバイス

Copyright ISB CORPORATION / Confidential Information28 2011/7/15

MeeGo

・MeeGo アプリケーションの例

例:ジェスチャーコントロールを用いた MeeGo アプリ (展示ブースでご覧ください。)

Linux Kernel

設定データベース システムライブラリ メッセージバス プラットフォーム情報

通信サービス

インターネットサービス

ビジュアルサービス

メディアサービス

データ管理

デバイスサービス

パーソナルサービス

接続管理

テレフォニーAPIs

レイアウトエンジン

Webサービス

GTK / Clutter

3Dグラフィック

メディアアプリケーショ

ンフレームワーク

メディア

フレームワーク

コンテンツフレームワーク

コンテキストフレームワーク

エネルギー管理

センサー

フレームワーク

PIMサービス

アカウント& シングルサインオン

MeeGo UI ツールキット(Qt フレームワーク)

MeeGo ISB UX

ISB UI とアプリケーション

MeeGo IVI UI フレームワーク

Mee

Go

OS

ベース

Mee

Go

OS

ミドル

ウェア

Mee

Go

OS

ユーザ

ーエクスペリエンス

… … … … … … …

Open NI

USB ジェスチャーデバイス

Copyright ISB CORPORATION / Confidential Information29 2011/7/15

Qt C++

Copyright ISB CORPORATION / Confidential Information30 2011/7/15

Qt C++

・“Hello World”

// main.cpp#include <QtGui>int main(int argc, char *argv[]){

QApplication app(argc, argv);QPushButton button("Hello world");button.show();return app.exec();

}

プログラムは以下のファイルから成っています。main.cpp – アプリケーション コード

helloworld.pro – プロジェクト ファイル

Copyright ISB CORPORATION / Confidential Information31 2011/7/15

Qt C++

・プロジェクトファイル

• helloworld.pro file– ソースとヘッダーファイルのリスト

– プロジェクトの設定を行う

# File: helloworld.proSOURCES = main.cppHEADERS += # No headers used

• 変数の設定

– 利用可能な演算子 =, +=, -=

Copyright ISB CORPORATION / Confidential Information32 2011/7/15

Qt Quick

Copyright ISB CORPORATION / Confidential Information33 2011/7/15

Qt Quick

・What’s Qt Quick?

Qt Quick (Qt Quick User Interface Creation Kit)とは、Qt が新たに提唱する UI テクノロジーのフレームワークであり、以下の要素から構成されています。

• 宣言的なマークアップ言語: QML• QML をサポートした Qt Creator IDE• グラフィカルなデザインツール

• Qt アプリケーションとの統合用 C++ API

Copyright ISB CORPORATION / Confidential Information34 2011/7/15

Qt Quick

・What’s Qt Quick?

Qt Quick (Qt Quick User Interface Creation Kit)とは、Qt が新たに提唱する UI テクノロジーのフレームワークであり、以下の要素から構成されています。

• 宣言的なマークアップ言語: QML• QML をサポートした Qt Creator IDE• グラフィカルなデザインツール

• Qt アプリケーションとの統合用 C++ API

Copyright ISB CORPORATION / Confidential Information35 2011/7/15

Qt Quick

・Qt Quick の方針

• 直観的な User Interfaces• デザイン指向

• 短期間でのプロトタイピングと提供

• 簡単な開発

Copyright ISB CORPORATION / Confidential Information36 2011/7/15

Qt Quick

・直観的な User Interfaces

• アプリケーションとの自然な操作

• どのエレメントがどんな操作をするか簡単にイメージが可能

• 実世界のオブジェクトのようなスムーズな動作

Copyright ISB CORPORATION / Confidential Information37 2011/7/15

Qt Quick

・デザイン指向

• 伝統的な Qt の手法

– 開発者向けのデザインツール

– 高機能で、プラットフォームにネイティブな Wigets

• Qt Quick の手法

– デザイナー用に使いやすい開発ツールとプロセス

– 軽くて、カスタマイズ可能なエレメント

Copyright ISB CORPORATION / Confidential Information38 2011/7/15

Qt Quick

・短期間でのプロトタイピングと提供

• コンパイル処理が不要

• JavaScript をスクリプト言語に使用– JavaScript のガイド本を参照してください

– 以下のURLを参照してくださいhttps://developer.mozilla.org/en/JavaScript

• 理解するのに参考となる物

– HTML, CSS (必須ではありません)

• 少しのプログラミング経験しか必要でありません。

Copyright ISB CORPORATION / Confidential Information39 2011/7/15

Qt Quick

・What’s QML?

QML は Qt Quick (Qt Quick User Interface Creation Kit) で新たに導入された、UI を記述するためのプログラミング言語。

CSS に似たシンタックスを持ち、UI を宣言的に記述することが出来ます。

Copyright ISB CORPORATION / Confidential Information40 2011/7/15

Qt Quick

Copyright ISB CORPORATION / Confidential Information41 2011/7/15

Qt Quick

・Viewing an Example

import QtQuick 1.0Rectangle {

width: 400; height: 400color: "lightblue"

}

• rectangle.qml で作成します

• QML viewer を以下のように起動します

qmlviewer rectangle.qml

Copyright ISB CORPORATION / Confidential Information42 2011/7/15

Qt Quick

・Example のコンセプト

import QtQuick 1.0// Define a light blue squareRectangle {

width: 400; height: 400color: "lightblue"

}• Qt の機能を利用するため、 Qt モジュールを import します

• 必要な機能のバージョン情報を書きます

– 指定されたバージョンからのみの機能をインポートしてきます

– 最新のバージョンが出ていたとしても、指定されたバージョンのみインポートします

– 前のバージョンから機能が落ちる事はありません

• コードの動作が変更されない事が保障されています

– モジュールは複数のバージョンのサポートをします

– アップグレードされたモジュールは、古いバージョン自身のサポートを保ちます

Copyright ISB CORPORATION / Confidential Information43 2011/7/15

Qt Quick

・Example のコンセプト

import QtQuick 1.0// Define a light blue squareRectangle {

width: 400; height: 400color: "lightblue"

}

• 1行のコメントは、// を記述します

• 複数行のコメントは /* and */ を記述します

Copyright ISB CORPORATION / Confidential Information44 2011/7/15

Qt Quick

・Example のコンセプト

import QtQuick 1.0// Define a light blue squareRectangle {

width: 400; height: 400color: "lightblue"

}

• 使用したエレメントを記述します

• 各エレメントの内容は { } の間に、記述します

• デフォルトのエレメントは、Qt モジュールの中に含まれています– (デフォルト以外のエレメントを使用したい時の説明は、後程行います)

Copyright ISB CORPORATION / Confidential Information45 2011/7/15

Qt Quick

・Example のコンセプト

import QtQuick 1.0// Define a light blue squareRectangle {

width: 400; height: 400color: "lightblue"

}

• エレメントは、 プロパティが存在します

• 各プロパティは、名前 と 値で定義します

• name : value

Copyright ISB CORPORATION / Confidential Information46 2011/7/15

Qt Quick

・Example Summary

import QtQuick 1.0Rectangle {

width: 400; height: 400color: "lightblue"

}

• Rectangle エレメント

– { ... } で囲まれます

– width, height と color のプロパティがあります

– 改行やセミコロンで区切られます

• qmlviewer で、サンプルを起動します

– 400 × 400 のウィンドウが表示されます

Copyright ISB CORPORATION / Confidential Information47 2011/7/15

Qt Quick

・Elements

• エレメントはマークアップ言語で構成されます

– 表示される物、されない物があります

• Item は表示されるエレメントの基本的な型です

– それ自身では表示されません

– 位置や大きさを持ちます

– 表示されるエレメントをグループ化する事に使われます

– トップレベルのエレメントとして使われます

– Rectangle, Text, TextInput, ...

Copyright ISB CORPORATION / Confidential Information48 2011/7/15

Qt Quick

・Elements

• 表示されないエレメント:– states, transitions, ...– models, paths, ...– gradients, timers, etc.

• エレメントにはプロパティがあります

– カスタムプロパティで拡張する事も可能です

Copyright ISB CORPORATION / Confidential Information49 2011/7/15

Qt Quick

・Properties

エレメントはプロパティにより表示されます

• 簡単な name:value の定義です– width, height, color, ...– デフォルト値が設定されています

– 各プロパティは、型が明確に定義されています

– セミコロンや改行で分けられます

• 以下の用途で使用されます– エレメントの識別 (id property)– 表示のカスタマイズ

– 動作の変更

Copyright ISB CORPORATION / Confidential Information50 2011/7/15

Qt Quick

・Property Examples

• スタンダードなプロパティに、値が設定されます

Text {text: "Hello world"height: 50

}• グループ化されたプロパティは、関連するプロパティを保持します

Text {font.family: "Helvetica"font.pixelSize: 24

}

• 識別用のプロパティは、エレメントの名前を設定します

Text {id: labeltext: "Hello world"

}

Copyright ISB CORPORATION / Confidential Information51 2011/7/15

Qt Quick

・Identifying Elements

id プロパティは、エレメントに識別子を定義します

• これで他のエレメントから参照する事が可能です

– 関連するアライメント、位置

– プロパティに使用

– プロパティの変更用 (例., アニメーション用)– 共通のエレメントの再利用 (e.g., gradients, images)

• エレメント間の関係を作成する時に用いられます

Copyright ISB CORPORATION / Confidential Information52 2011/7/15

Qt Quick

・Using Identities

import QtQuick 1.0Item {

width: 300; height: 115Text {

id: text_elementx: 50; y: 25text: "Qt Quick"font.family: "Helvetica"; font.pixelSize: 50

}Rectangle {

x: 50; y: 75; height: 5width: text_element.widthcolor: "green"

}

}

Copyright ISB CORPORATION / Confidential Information53 2011/7/15

Qt Quick

・Using Identities

Text {id: text_elementx: 50; y: 25text: "Qt Quick"font.family: "Helvetica"; font.pixelSize: 50

}Rectangle {

x: 50; y: 75; height: 5width: text_element.widthcolor: "green"

}

• Text エレメントの識別子に text_element を設定

• Rectangle の width は、text_element の width となる

• Text の代わりに TextInput を使用する

Copyright ISB CORPORATION / Confidential Information54 2011/7/15

Creating Extension Plugins

Copyright ISB CORPORATION / Confidential Information55 2011/7/15

Creating Extension Plugins

・Creating a New Type

app.qmlpiechart.cpppiechart.hmain.cppchapter1-basics.pro

http://doc.qt.nokia.com/4.7/declarative-tutorials-extending-chapter1-basics.html

Copyright ISB CORPORATION / Confidential Information56 2011/7/15

Creating Extension Plugins

・app.qml

新しい QML タイプ:PieChartプロパティ: name, colorモジュール: Charts 1.0

import Charts 1.0

PieChart {width: 100; height: 100name: "A simple pie chart"color: "red"

}

Copyright ISB CORPORATION / Confidential Information57 2011/7/15

Creating Extension Plugins

・C++ class

以下の2つが必要です。

– QObject からの継承

– Q_PROPERTY マクロを使用した、プロパティの宣言

Copyright ISB CORPORATION / Confidential Information58 2011/7/15

Creating Extension Plugins

・piechart.h

描画用の、QDeclarativeItem::paint() をオーバーライドしたいので、QDeclarativeItem を継承します。

クラスがデータタイプのみで、アイテムを何も表示する必要が無い場合は、単純に QObject の継承で良いです。

QObject ベースのクラスの機能を使用したい時は、そちらを継承します。

Copyright ISB CORPORATION / Confidential Information59 2011/7/15

Creating Extension Plugins

・piechart.cpp

PieChart クラスは、Q_PROPERTY で name, color 2つのプロパティを定義しています。

そして、QDeclarativeItem::paint() をオーバーライドしています。

piechart.cpp での実装は、単純に必要に応じて m_name とm_color を設定、取得する事です。

そして、paint() で、パイチャートを描画するだけです。

また、描画を可能にするため、QGraphicsItem::ItemHasNoContents フラグをオフにします。

Copyright ISB CORPORATION / Confidential Information60 2011/7/15

Creating Extension Plugins

・piechart.cpp

color は QML で文字列として定義されましたが、PieChart の color プロパティ用の QColor オブジェクトに変換されます。

自動的な変換は様々な他の基本タイプのために提供されます。

例えば、“640x480” の様な文字列は、自動的に QSize の値に変換されます。

Copyright ISB CORPORATION / Confidential Information61 2011/7/15

Creating Extension Plugins

・chapter1-basics.pro

.pro ファイルにファイルと declarative ライブラリーを記述します。

QT += declarative

HEADERS += piechart.hSOURCES += piechart.cpp ¥

main.cpp

Copyright ISB CORPORATION / Confidential Information62 2011/7/15

Creating Extension Plugins

・main.cpp

app.qml を実行して表示するため、QDeclarativeView を用います。

このアプリケーションは、QML から使用される為に、PieChart タイプを登録する必要があります。

PieChart を登録していない場合は、app.qml は PieChart を使用する事ができません。

qmlRegisterType<PieChart>("Charts", 1, 0, "PieChart"); これは、 1.0 のモジュールバージョンの “Charts” の、“PieChart” というタイプとして登録された PieChart クラスを登録するために記述します。

Copyright ISB CORPORATION / Confidential Information63 2011/7/15

Creating Extension Plugins

・Connecting to C++ Methods and Signals

app.qmlpiechart.cpppiechart.hmain.cppchapter2-basics.pro

http://doc.qt.nokia.com/4.7/declarative-tutorials-extending-chapter2-methods.html

Copyright ISB CORPORATION / Confidential Information64 2011/7/15

Creating Extension Plugins

・app.qml

PieChart にチャートを消去する method の “clearChart()” を実装するには、“chartCleared” signal を emit させます。

app.qml は、clearChart() を call して、chartCleared() signal を受けます。

Copyright ISB CORPORATION / Confidential Information65 2011/7/15

Creating Extension Plugins

・piechart.h

signal の送受信を行うには、C++ のクラスに、clearChart() method とchartCleared() signal を追加します。

Q_INVOKABLE を使用すると、clearChart() method が QML で使用可能となります。

public: ... Q_INVOKABLE void clearChart();...

signals: void chartCleared();...

Copyright ISB CORPORATION / Confidential Information66 2011/7/15

Creating Extension Plugins

・piechart.cpp

clearChart() method は、色を Qt::transparent に変更するだけです。

その後、Chart をアップデートし、chartCleared() signal を emit します。

void PieChart::clearChart(){

setColor(QColor(Qt::transparent));update();

emit chartCleared();}

Copyright ISB CORPORATION / Confidential Information67 2011/7/15

Creating Extension Plugins

・Adding Property Bindings

app.qmlpiechart.cpppiechart.hmain.cppchapter3-basics.pro

http://doc.qt.nokia.com/4.7/declarative-tutorials-extending-chapter3-bindings.html

Copyright ISB CORPORATION / Confidential Information68 2011/7/15

Creating Extension Plugins

・Adding Property Bindings

app.qmlpiechart.cpppiechart.hmain.cppchapter3-basics.pro

http://doc.qt.nokia.com/4.7/declarative-tutorials-extending-chapter3-bindings.html

Copyright ISB CORPORATION / Confidential Information69 2011/7/15

Creating Extension Plugins

・Adding Property Bindings

Property binding は 異なるエレメントの値を自動的に同期を行う、便利な機能です。

プロパティの値が変わった時に、signal を使って通知し、他のエレメントの値を更新します。

Copyright ISB CORPORATION / Confidential Information70 2011/7/15

Creating Extension Plugins

・piechart.h

値が変わった時、“colorChanged” signal が emit される事を指定するため、Q_PROPERTY() に、 NOTIFY を記述する事で宣言します。

class PieChart : public QDeclarativeItem{

...Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)...

signals:void colorChanged();...

};

Copyright ISB CORPORATION / Confidential Information71 2011/7/15

Creating Extension Plugins

・piechart.cpp

colorChanged() signal を、 setColor() 内で emit します。

void PieChart::setColor(const QColor &color){

if (color != m_color) {m_color = color;update(); // repaint with the new coloremit colorChanged();

}}

Copyright ISB CORPORATION / Confidential Information72 2011/7/15

Creating Extension Plugins

・piechart.cpp

setColor() で colorChanged() を emit する前に、 color の値が実際に変わったかどうか確かめる事は重要です。

これは、他の element の値が変わった事によるループを防止し、 signal が必要で無い時に emit されない様にします。

Copyright ISB CORPORATION / Confidential Information73 2011/7/15

Creating Extension Plugins

・Using Custom Property Types

app.qmlpiechart.cpppiechart.hpieslice.cpppieslice.hmain.cppchapter4-customPropertyTypes.pro

http://doc.qt.nokia.com/4.7/declarative-tutorials-extending-chapter4-custompropertytypes.html

Copyright ISB CORPORATION / Confidential Information74 2011/7/15

Creating Extension Plugins

・Using Custom Property Types

PieChart は、文字列型と QColor 型のプロパティでした。

その他にも様々なプロパティを持つことができます。

例えば、識別子を確保するための、int 型なども可能です。

Copyright ISB CORPORATION / Confidential Information75 2011/7/15

Creating Extension Plugins

・piechart.h

class PieChart : public QDeclarativeItem{

Q_PROPERTY(int chartId READ chartId WRITE setChartId NOTIFY chartIdChanged)

...

public:void setChartId(int chartId);int chartId() const;...

signals:void chartIdChanged();

};

Copyright ISB CORPORATION / Confidential Information76 2011/7/15

Creating Extension Plugins

・その他の型

プロパティには以下のような型が設定可能です。

bool, unsigned int, int, float, double, qrealQString, QUrl, QColorQDate, QTime, QDateTimeQPoint, QPointF, QSize, QSizeF, QRect, QRectFQVariant

QML で標準でサポートされていない型をプロパティにしたい場合は、QML で定義する必要があります。

Copyright ISB CORPORATION / Confidential Information77 2011/7/15

Creating Extension Plugins

・app.qml

“PieSlice” の color プロパティを変更する例を記します。

color を設定する代わりに、color の値を持つ PieSlice を設定します。

PieChart {id: chartwidth: 100; height: 100

pieSlice: PieSlice {anchors.fill: parentcolor: "red"

}}

Copyright ISB CORPORATION / Confidential Information78 2011/7/15

Creating Extension Plugins

・pieslice.h

PieChart のように、この新しい PieSlice は QDeclarativeItem を継承し、Q_PROPERTY() でそのプロパティを宣言しています。

class PieSlice : public QDeclarativeItem{

Q_OBJECTQ_PROPERTY(QColor color READ color WRITE setColor)...

};

Copyright ISB CORPORATION / Confidential Information79 2011/7/15

Creating Extension Plugins

・piechart.h

PieSlice を PieChart で使うために、color プロパティの宣言と、関連する method の記述を変更します。

class PieChart : public QDeclarativeItem{

Q_OBJECTQ_PROPERTY(PieSlice* pieSlice READ pieSlice WRITE setPieSlice)...

public:...PieSlice *pieSlice() const;void setPieSlice(PieSlice *pieSlice);...

};

Copyright ISB CORPORATION / Confidential Information80 2011/7/15

Creating Extension Plugins

・piechart.cpp

PieSlice は表示するアイテムであるため、QDeclarativeItem::setParentItem() を使用した PieChart の子要素であり、表示時に PieChart がこの子要素を知っておく必要があります。

void PieChart::setPieSlice(PieSlice *pieSlice){

m_pieSlice = pieSlice;pieSlice->setParentItem(this);

}

Copyright ISB CORPORATION / Confidential Information81 2011/7/15

Creating Extension Plugins

・piechart.cpp

PieSlice は表示するアイテムであるため、QDeclarativeItem::setParentItem() を使用した PieChart の子要素であり、表示時に PieChart がこの子要素を知っておく必要があります。

void PieChart::setPieSlice(PieSlice *pieSlice){

m_pieSlice = pieSlice;pieSlice->setParentItem(this);

}

Copyright ISB CORPORATION / Confidential Information82 2011/7/15

Creating Extension Plugins

・main.cpp

PieChart のように QML から使用されるため、PieSlice は qmlRegisterType() で登録されている必要があります。

PieChart と同様に、“Charts” module の version 1.0 を追加します。

int main(int argc, char *argv[]){

...qmlRegisterType<PieSlice>("Charts", 1, 0, "PieSlice");...

}

Copyright ISB CORPORATION / Confidential Information83 2011/7/15

Creating Extension Plugins

・Using List Property Types

app.qmlpiechart.cpppiechart.hpieslice.cpppieslice.hmain.cppchapter5-listproperties.pro

http://doc.qt.nokia.com/4.7/declarative-tutorials-extending-chapter5-listproperties.html

Copyright ISB CORPORATION / Confidential Information84 2011/7/15

Creating Extension Plugins

・app.qml

PieChart は PieSlice を1つしか持つことが出来ません。

Chart が異なるサイズや色の複数の slice を表示できるのが理想です。

これを行うには、PieSlice アイテムのリストに対応する slices プロパティを設定します。

slices: [PieSlice {

anchors.fill: parentcolor: "red"fromAngle: 0; angleSpan: 110

},PieSlice {…

Copyright ISB CORPORATION / Confidential Information85 2011/7/15

Creating Extension Plugins

・piechart.h

List Property を使用するには、 QDeclarativeListProperty と宣言する事により、slices property で PieChart の pieSlice property に変更します。

QDeclarativeListProperty クラスは、QML の List Property の生成を可能にします。

pieSlice() 関数を slices のリストを返す slices() に変更し、 内部に append_slice() 関数を追加します。

Q_PROPERTY(QDeclarativeListProperty<PieSlice> slices READ slices)...QDeclarativeListProperty<PieSlice> slices();...static void append_slice(QDeclarativeListProperty<PieSlice> *list, PieSlice *slice);...QList<PieSlice *> m_slices;

...

Copyright ISB CORPORATION / Confidential Information86 2011/7/15

Creating Extension Plugins

・piechart.cpp

slices property は WRITE 関数にかんする物はありませんが、QDeclarativeListPropertyの働きにより変更する事が可能となります。

PieChart の実装で、QDeclarativeListProperty の値を返す PieChart::slices() を実装します。

PieChart::append_slice() は、QML から呼ばれた時に、アイテムをリストに追加します。

QDeclarativeListProperty<PieSlice> PieChart::slices(){

return QDeclarativeListProperty<PieSlice>(this, 0, &PieChart::append_slice);}

Copyright ISB CORPORATION / Confidential Information87 2011/7/15

Creating Extension Plugins

・piechart.cpp

void PieChart::append_slice(QDeclarativeListProperty<PieSlice> *list, PieSlice *slice){

PieChart *chart = qobject_cast<PieChart *>(list->object);if (chart) {

slice->setParentItem(chart);chart->m_slices.append(slice);

}}

append_slice() 関数は、parent のアイテムをセットし、m_slices にアイテムを追加します。

Copyright ISB CORPORATION / Confidential Information88 2011/7/15

Creating Extension Plugins

・Writing an Extension Plugin

app.qmlchartsplugin.cppchartsplugin.hpiechart.cpppiechart.hpieslice.cpppieslice.hchapter6-plugins.proqmldir

http://doc.qt.nokia.com/4.7/declarative-tutorials-extending-chapter6-plugins.html

Copyright ISB CORPORATION / Confidential Information89 2011/7/15

Creating Extension Plugins

・ app.qml

現在、PieChart と PieSlice は app.qml によって使われ、C++ アプリケーションでQDeclarativeViewを 使って、表示されます。

QML エンジンで使う事のできるプラグインのライブラリを作成する事で、 QML を拡張する代わりとなります。

これで、app.qml は、 main.cpp を書いて C++ アプリケーションをロードする代わりに、 qmlviewer からロード可能となります。

プラグインを作成するためには、以下が必要です:

・QML タイプを登録したプラグインクラス

・プラグインを記述したプロジェクトファイル

・QML エンジンにプラグインをロードさせる qmldir ファイル

Copyright ISB CORPORATION / Confidential Information90 2011/7/15

Creating Extension Plugins

・ chartsplugin.h

最初に、ChartsPlugin プラグインクラスを作成します

それは、QDeclarativeExtensionPlugin を継承しており、継承されたregisterTypes() で QML を登録します。

#include <QDeclarativeExtensionPlugin>

class ChartsPlugin : public QDeclarativeExtensionPlugin{

Q_OBJECTpublic:

void registerTypes(const char *uri);};

Copyright ISB CORPORATION / Confidential Information91 2011/7/15

Creating Extension Plugins

・ chartsplugin.cpp

Q_EXPORT_PLUGIN2 を設定します

#include "piechart.h"#include "pieslice.h"#include <qdeclarative.h>

void ChartsPlugin::registerTypes(const char *uri){

qmlRegisterType<PieChart>(uri, 1, 0, "PieChart");qmlRegisterType<PieSlice>(uri, 1, 0, "PieSlice");

}

Q_EXPORT_PLUGIN2(chartsplugin, ChartsPlugin);Q_EXPORT_PLUGIN2 ( PluginName, ClassName )

Copyright ISB CORPORATION / Confidential Information92 2011/7/15

Creating Extension Plugins

・ chapter6-plugins.pro

.pro のプロジェクトファイルに、プラグインライブラリーである事を定義します。

DESTDIR でライブラリファイルが “lib” サブディレクトリーに組み込まれます。

TEMPLATE = libCONFIG += qt pluginQT += declarative

DESTDIR = libOBJECTS_DIR = tmpMOC_DIR = tmp

Copyright ISB CORPORATION / Confidential Information93 2011/7/15

Creating Extension Plugins

・ qmldir

“chapter6-plugins“ のプラグインが、”lib” サブディレクトリにある事を指定します。

plugin chapter6-plugins lib

plugin <Name> [<Path>]

Copyright ISB CORPORATION / Confidential Information94 2011/7/15

Creating Extension Plugins

・ qmlviewer

main.cpp 及び 実行形式を持つ代わりに、 プラグインがあるので、プロジェクトをビルドし、QML Viewer から QML ファイルをロードする事が可能です。

qmlviewer app.qml

Copyright ISB CORPORATION / Confidential Information95 2011/7/15

For More Information

Please visit our website:http://www.isb.co.jp/http://www.isb.co.jp/english/index.html

Contact:株式会社アイ・エス・ビー 第一事業部 高橋 和良

Kazuyoshi Takahashi, Leader,[email protected]

Copyright ISB CORPORATION / Confidential Information96 2011/7/15

End of Document