この記事では、オペラ用のシンプルなウィジェットの作成について説明します。
始めるために必要なもの：- Webテクノロジーの基本的な理解。
- テキストエディター。
- zipアーカイブを作成できるアーカイバ。
- ウィジェットを配置できる場所。
- Operaブラウザ。
一番最初のウィジェット。まず、index.htmlファイルを作成する必要があります。 これは、ウィジェットを開いたときに表示されるものです。
<！DOCTYPE html>
<html>
<head>
<title> Hello World！</ title>
</ head>
<本体>
<p> Hello World！</ p>
</ body>
</ html> </ code>
ウィジェットの設定。次に、ウィジェットに設定を追加する方法を確認します。 すべての設定は、config.xmlという名前のファイルに書き込まれ、ウィジェットの永続的なプロパティに関する情報が含まれています。 このファイルで説明する必要がある主なプロパティ：
ウィジェットの名前。
ウィジェットのサイズ。
著者に関する情報。
ウィジェットの一意のID。 IDは3つの部分で構成されます：サーバー名、ウィジェット名、およびYYYY-MM形式での最終更新日（ウィジェットを月に複数回更新する場合は、YYYY-MM-DD形式も使用できます）。
ウィジェットが機能するドメインに関する情報もオプションで追加されます。
前にindex.htmlを作成したディレクトリと同じディレクトリに新しいconfig.xmlファイルを作成します。 このコードをそこに貼り付けて保存します。
<？xml version = '1.0' encoding = 'UTF-8'？>
<ウィジェット>
<widgetname> Hello World！</ widgetname>
<description> Hello Worldチュートリアルのデモウィジェット</ description>
<width> 440 </ width>
<高さ> 200 </高さ>
<著者>
<name> John Doe </ name>
<email> john.doe@example.com </ email>
<link> http://acme-widget.example.com </ link>
<organization> Acme Examples、Inc. </ organization>
</ author>
<id>
<host> example.com </ host>
<name> HelloWorld </ name>
<改訂> 2008-01 </改訂>
</ id>
</ widget>
ウィジェットの最初の起動。config.xmlをブラウザーにドラッグアンドドロップするか、ブラウザーで開きます。 その結果、次のような結果が得られます。
おめでとうございます。 最初のウィジェットの準備ができました。
ウィジェットの顔を作ります。このフォームでは、ウィジェットの背景色は透明であり、デフォルトのスタイルがスタイル設定に使用されます。 注文ではありません。 ウィジェットに独自の外観を与えることが不可欠です。
まず最初に、index.htmlにスタイル宣言を追加する必要があります。 最終的には、次のようになります。
<！DOCTYPE html>
<html>
<head>
<title> Hello World！</ title>
<link rel = "stylesheet" type = "text / css" href = "style / helloworld.css">
</ head>
<本体>
<div id = "container">
<div id = "header">
</ div>
<div id = "content">
<h1> Hello World！</ h1>
</ div>
<div id = "footer"> Powered by Opera </ div>
</ div>
</ body>
</ html> </ code>
ここで、ウィジェットスタイルを使用してcssファイルを作成します。 スタイルを保存する「style」フォルダーを作成します。このフォルダーには、ファイルは「helloworld.css」です。 送信されたコードをこのファイルにコピーします。
/ **基本スタイル** /
body {
フォントファミリー：Verdana、Helvetica、sans-serif;
フォントサイズ：16px;
}
h1 {
マージン：0;
フォントサイズ：1.1em;
パディング：7px 0 0 10px;
フォントの太さ：通常。
}
h2 {
フォントの太さ：通常。
フォントサイズ：1.1em;
マージン：0px;
}
/ **構造** /
#container {
幅：429px;
}
#header {
background-image：url（../ images / back_top.png）;
パディング：4px 10px 0px 10px;
高さ：35px;
}
#content {
background-image：url（../ images / back_center.png）;
色：＃333;
}
.view {
パディング：10px 10px 10px 20px;
高さ：60px;
最大高さ：60px;
最大幅：393px;
オーバーフロー：自動;
-apple-dashboard-region：dashboardregion（制御矩形0px 0px 0px 0px）;
}
#footer {
background-image：url（../ images / back_bottom.png）;
高さ：23px;
パディング：2px 0 0 20px;
フォントサイズ：0.6em;
テキスト装飾：下線。
色：＃dd2222;
}
</ code>
このウィジェットでは、いくつかの背景画像を使用していることに気づいたかもしれません。 それらをウィジェットフォルダーに追加する必要があります。 このzip
ファイルで画像を見つけることができ
ます 。それらは画像フォルダにあり、このフォルダをウィジェットのルートフォルダにコピーします。
すべてのスタイルが整っているので、前回と同じように、ウィジェットをもう一度起動してみてください。 次のようになります。
ウィジェットスタイルに関する注意：美のためではなく、ユーザーのためにウィジェットを作成してみてください。
対話性を追加します。これで完全に機能するウィジェットができましたが、何もしません。 次に、ウィジェットを設定および閉じるためのボタンを追加します。
index.htmlを再度開き、その内容を次の内容に置き換えます
<！DOCTYPE html>
<html>
<head>
<title> Hello World！</ title>
<link rel = "stylesheet" type = "text / css" href = "style / helloworld.css">
<script type = "text / javascript" src = "script / helloworld.js"> </ script>
</ head>
<本体>
<div id = "container">
<div id = "header">
<div id = "controlbuttons">
<button id = "flipbutton" class = "controlbutton" type = "button"> </ button>
<button id = "closebutton" class = "controlbutton" type = "button"> </ button>
</ div>
<h1> Hello World！</ h1>
</ div>
<div id = "content">
<div id = "front" class = "view">
<h2 id = "hellotext"> Operaウィジェットの世界へようこそ！</ h2>
</ div>
<div id = "config" class = "view">
<h2> Hello World！ 設定</ h2>
<p>
<label for = "frontlabel">表示するテキスト</ label>
<input id = "frontlabel" type = "text" size = "25">
<button id = "updatebutton" type = "button">更新</ button>
</ p>
</ div>
</ div>
<div id = "footer"> Powered by Opera </ div>
</ div>
</ body>
</ html> </ code>
追加しました：
- ウィジェットの設定と実際の操作の間でウィジェットの状態変更を制御するスクリプト宣言。
- ウィジェットの状態を変更するためのボタン、および閉じるボタン。
- ウィジェットの設定を行います。
ここで、スタイルシートを更新してjavascriptを追加する必要があります。
閉じるボタンと変更ボタンのスタイル。
前のコードの下にあるhelloworld.cssに次のコードを追加します。 このコードは、コントロールボタンの表示を制御します。
/ *デフォルトで構成ビューを非表示* /
#config {
ディスプレイ：なし;
}
/ **ボタンスタイル** /
#controlbuttons {
フロート：右;
}
.controlbutton {
不透明度：0.0;
オーバーフロー：非表示。
高さ：30px;
幅：30ピクセル;
背景位置：左上;
ボーダー：0;
}
#flipbutton {
背景：透明なURL（../ images / btn_config.png）scroll no-repeat 0 0;
}
#closebutton {
背景：透明なURL（../ images / btn_close.png）scroll no-repeat 0 0;
}
/ **ボタン効果** /
#container：hover.controlButton {
不透明度：0.3;
}
#container .controlButton：hover {
不透明度：1.0;
}
#container .controlButton：active {
不透明度：1.0;
バックグラウンド位置：左下。
} </ code>
コントロールボタンの使用に関する推奨事項。
- ウィジェットには常に閉じるボタンが必要です。
- コントロールボタンは、マウスがウィジェット空間にあるときにのみ表示される必要があります
- マウスがウィジェット空間にあるとき、透明度0.3で表示されるはずです。
- マウスがボタンスペースにある場合、透明度の値は1.0になります。
- 押されると、コントロールボタンはビューを押されたものに変更するはずです。
ウィジェットをもう一度確認するときが来ました。 次のようなものが表示されるはずです。
ボタンにハンドラーを追加します。次の手順では、状態変更ボタンの機能を追加して、rがアクティブになっているボタンの状態に応じて、ウィジェットが押されたときに他の状態を表示するようにします。 このハンドラーには、簡単なJavaScriptコードが少し含まれています。必要な作業は、コードを適切な場所に配置するだけです。 写真をコピーしたリソースファイルを見て、そこからhelloworld.jsウィジェットのルートフォルダーにコピーします。
ファイルの内容：
//ウィジェット関数のネームスペースを作成します//グローバルネームスペースの目詰まりを回避しますvar helloWorld = helloWorld || {}; //セットアップと操作の間でウィジェットの状態を変更する関数helloWorld.flip = function（e）{var display = document.getElementById（ 'front'）。style.display; if（display == 'block' || display == ''）{document.getElementById（ 'front'）。style.display = "none"; document.getElementById（ 'config'）。style.display = "block"; } else {document.getElementById（ 'config'）。style.display = "none"; document.getElementById（ 'front'）。style.display = "block"; }} //ウィジェットの初期化window.addEventListener（ 'load'、function（ev）{//フリップボタンdocument.getElementById（ 'flipbutton'）に動作を追加します。addEventListener（ 'click'、function（ev）{helloWorld.flip （）;}、false）; //ボタンハンドラーを閉じるdocument.getElementById（ 'closebutton'）。addEventListener（ 'click'、function（ev）{window.close（）;}、false）; //このボタンは、 document.getElementById（ 'wocbutton'）。addEventListener（ 'click'、function（ev）{widget.openURL（ 'http://widgets.opera.com'）;}、false）; / /設定のボタンのハンドラーウィジェットのテキストを変更し、//ウィジェットを作業状態に戻しますdocument.getElementById（ 'updatebutton'）。addEventListener（ 'click'、function（ev）{document.getElementById（ 'hellotext'）。textContent = document.getElementById（ 'frontlabel'）。value; helloWorld。 flip（）;}、false）; // document.getElementById（ 'frontlabel'）設定のテキスト入力フィールドに初期値を設定しますsetAttribute（ 'value'、document.getElementById（ 'hellotext'）。textContent）; }、false）; このコードでは、ウィジェット関数をオブジェクトまたは名前空間に配置します。 したがって、関数は既に存在する場合はオーバーライドされません。 グローバルスコープをできるだけ使用しないことをお勧めします。 コードの後半は、ウィジェットの起動時に実行され、オブジェクトのハンドラーを設定する関数です。
もう一度、ウィジェットを実行し、図のように結果を取得します。
ウィジェットのパッケージ化。ウィジェットは、拡張子が.wgtに変更される通常の.zipファイルにパッケージ化されています。 ウィジェットで使用されるすべてのファイルは、このアーカイブ内に保存する必要があります。
ウィジェットの配布ウィジェットはすでに完成しています。 最後のステップは、ウィジェットをパックして他の人に提示することです。
ここでウィジェットを公開する方法の説明。
この記事では、単純なウィジェットの作成について説明しました。 そして、彼らはこれがまったく難しいことではないと確信していました。 また、最初のウィジェットも作成しました。
追伸 私はオリジナルを少し減らしました、そして、私はあまりに多くの水を翻訳することができます。