Clever Geek Handbook

Mac OS Xダッシュボード用の最もシンプルなウィジェットを作成する

こんにちは、habravchane-makovody！



今日は、Mac OS Xでダッシュボード用のウィジェットを作成する基本を理解しようとします。これ専用のDashcodeプログラムが必要です。



まず、少しの理論。 ダッシュボードのウィジェットは、すべてのリソースとともにバンドルにパッケージ化された特別な形式のWebページです。 さて、付録に少し公式な情報があります。 したがって、使用されるプログラミング言語はJavaScriptです。 HTML / CSSに既に慣れている場合（これは必要ではないかもしれませんが）、あなたはすでに簡単なウィジェットを書くことができます。 そうでない場合、動揺するべきではありません、この言語は非常にシンプルで直感的です、あなたは十分に迅速にそれに対処することができます。 さらに、読者は多かれ少なかれJSに精通していると考えます。 記事自体は初心者向けに設計されているので、「あまりにも単純なプレゼンテーションと、基本的なものの詳細な咀for」でscられないでください。 さらに、私はあなたにもデザインを蹴らないようお願いします-まあ、私はデザイナーではなく、デザイナーでもありません！ 誰もがこの問題を支援したい場合- ようこそ=）



便宜上、すべてのソース（およびすぐに使用できるウィジェット）がgithubにアップロードされています。記事の最後にリンクがあります。 しかし、それらをダウンロードするだけで急いではいけません！ 少し時間をかけて、自分ですべてを作成する方法を見つけ出すことをお勧めします。



それでは始めましょう。 実験の目標として、私はもちろんお気に入りのHabrを選びました。 選択したhabrayuzerのha-peopleのカルマ、レーティング、およびレーティングの位置を表示するウィジェットをステップごとに作成します。



そのようなウィジェット（非常によく似ています）は、2007年にすでにネオロマンティックな小間物商 によって作成されましたが、ダウンロードリンクは機能せず、さらに、その記事にはそのようなウィジェットを作成するための実用的なガイドラインが含まれていませんでした。



権利を回復するこれらの欠点を置き換えます。



空のプロジェクトを作成します。 これを行うには、Dashcodeを実行し、目的の場所をクリックします。 プロセスは簡単です。



何が見えますか？ 基本的なウィジェットには、メイン状態と補助状態があります（それぞれ左パネルの前面と背面）。 1つ目は通常の操作モードで表示され、2つ目はウィジェットのパラメーターを構成します。 左側のコンポーネントのリストで適切なアイテムを選択することで、それらを切り替えることができます。 プライマリ状態とセカンダリ状態を切り替えるために使用される「情報」ボタンと「完了」ボタンを除き、不要なものをすべて安全に削除できます。 さらに、簡単にするために、これをウィジェットの前面および背面と呼びます。



ここで、ウィジェットの前面に（1行のコードなしで！）必要なコンポーネント、つまりいくつかのラベルをスローします。 これを行うには、コンポーネントのライブラリを開きます-ボタン 右上のライブラリ-「テキスト」タイプのコンポーネントをウィジェットにドラッグします。 今開いている インスペクター（右上のボタン）とその助けを借りて、ウィジェットのサイズ、色などを調整します。 その助けを借りて、私たちは碑文に意味のある名前を設定します-コードからより便利にアクセスできるようにします。



裏面では、碑文と入力フィールドをスローします。 さて、そして別の写真-美しさのために。 そして、最終的に次のようなものが得られます。







まあ、悪くない、GUIの準備ができました！ 刈り取ることができます Cmd+R



を押し、ボタン（i）とDoneを押して、ウィジェットを反転する効果を賞賛します。



しかし、1つのGUIでは十分ではないため、ロジックに移りましょう。 これを行うには、左上のボタンをクリックします ドロップダウンリストで[ソースコード]を表示して選択します。 そして、自動生成されたJavaScriptコードをすでに確認できます。 そして、彼を大胆に支配し始めました！



まず、ウィジェットの「アーキテクチャ」を決定しましょう。 タイマーを使用して、Haber APIを通じてユーザーに関する情報を要求し、それらを解析して、ウィジェットの前面にカルマと評価を表示します。 これを行うには、main.jsファイルの先頭でグローバル変数updateTimer



を宣言し、このタイマーで機能する関数startTimer(msec)



およびstopTimer()



作成します。 また、 updateStats()



関数を作成しupdateStats()



。これはタイマーによって呼び出されます。 



 function startTimer(msec) { updateTimer = setTimeout("updateStats()", msec); } function stopTimer() { clearTimeout(updateTimer); } function updateStats() { alert("It works!"); startTimer(updateInterval); }


show()



関数でstartTimer(5000)



呼び出しをstartTimer(5000)



、ウィジェットが表示されたときにタイマーを開始し、 hide()



関数で、 stopTimer()



をstopTimer()



、ウィジェットが表示されていない（ダッシュボードがアクティブではない）ときにリソースを保存します。 これで、ウィジェットを起動し、コンソール（Cmd + Alt + 1）で「It works！」の出力を5秒ごとに確認できます。



しかし、私たちはそのようなナンセンスには興味がありません、カルマとタイマーの評価を引き出したいです！ そのため、 updateStatus()



関数では、アラートの代わりにexecStatsRequest()



関数を呼び出します（Haber APIは、1分に1回以上ユーザーデータをプルすることを勧めているため、同時に間隔を増やします）。



さて、habrahab APIへのHTTPリクエスト次第です。 新しい関数-execStatsRequest（）およびprocessStatsRequest（）を作成します。これらは、リクエストの実行と処理に役立ちます。 ここに彼らが私とどのように見えるかがあります： 

 function execStatsRequest() { if (userName().length > 0) { var Url = "http://habrahabr.ru/api/profile/" + userName() + "/"; alert("User: " + userName() + "\nURL: " + Url); xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = processStatsRequest; xmlHttp.overrideMimeType('text/xml'); xmlHttp.open("GET", Url, true); xmlHttp.send(); } else { resetStats(); } } function processStatsRequest() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { alert("xml is " + xmlHttp.responseXML); if (xmlHttp.responseXML == null) { resetStats(); } else { alert(xmlHttp.responseText); var error = xmlHttp.responseXML.getElementsByTagName("error")[0]; if (error != null) { alert("Some error occured!"); resetStats(); setLogin("<" + userName() + " not found>"); return; } var login = xmlHttp.responseXML.getElementsByTagName("login")[0].firstChild.nodeValue; var karma = xmlHttp.responseXML.getElementsByTagName("karma")[0].firstChild.nodeValue; var rating = xmlHttp.responseXML.getElementsByTagName("rating")[0].firstChild.nodeValue; var position = xmlHttp.responseXML.getElementsByTagName("ratingPosition")[0].firstChild.nodeValue; setLogin(login); setKarma(karma); setRating(rating); setPosition(position); } } }


ここで、リクエストURLを作成し、XMLHttpRequest型のオブジェクトを作成し、その助けを借りて、GETメソッドを使用してデータをリクエストします。 注目すべきは、Habra-apiが何らかの理由で「text / html」を返すため、MIMEタイプ「text / xml」への回答を強制する必要があることです。 また、 processStatsRequest()



関数では、XMLで受信した応答を解析します。 同時に、エラーがないか確認し、ユーザーに通知します。



ここでは、コードから注意をそらし、ウィジェット自体を構成することは価値があります-ウィジェットがネットワークで動作できるようにするためです。 これを行うには、左ペインの要素のリストを下にスクロールして、ウィジェット属性項目を確認します。 ここでは、[ネットワークアクセスを許可する]チェックボックスをオンにします。 ウィジェットIDとそのバージョンを構成することもできます。 コードに戻りましょう。



関数setLogin()



、 setKarma()



などは、フロントサイドの必要なフィールドに渡された文字列を表示します。 これらは便宜上作成され、次のように同じように見えます。 



 function setLogin(login) { document.getElementById("userName").innerText = login; }


resetStats()



関数は、すべてのフィールドにデフォルト値を設定します。 また、setUserName（）およびuserName（）関数は、ウィジェットの背面にあるhabrowserの名前の入力フィールドのラッパーとして機能します。 



 function userName() { return document.getElementById("nameEdit").value; } function setUserName(name) { document.getElementById("nameEdit").value = name; }


さて、ウィジェットはほとんど準備ができています。 なぜほとんど？ はい。設定に入力したユーザー名を保存する必要があるためです。 これを行うには、関数loadPrefs()



およびsavePrefs()



ます。 



 var preferenceKey = "habraUserName"; function loadPrefs() { var name = widget.preferenceForKey(widget.identifier + "-" + preferenceKey); alert(widget.identifier + "-" + preferenceKey); alert("name from preferences: " + name); if (name != null) setUserName(name); } function savePrefs() { widget.setPreferenceForKey(userName(), widget.identifier + "-" + preferenceKey); }


これらの関数は、それぞれshow()



およびhide()



関数で呼び出すことをお勧めします。 この設定はウィジェットごとに一意であるため、複数のユーザーに関する情報を含むウィジェットをダッシュ​​ボードにドロップできます。



さて、これでウィジェットを使用する準備が整いました。 しかし、完璧に制限はありません！ 現在、ロシア語版と英語版を作成するためにウィジェットをローカライズしています。 （宿題として）フランス語と日本語でローカライズすることもできます。



私たちの前面に行くと、私たちは検査官を呼び出します。 次に、碑文を1つずつ選択し、インスペクターの[ローカライズ]セクションで、[値]フィールドに英語の値を設定します。 キーフィールドの事前定義値と一致する可能性があります。 これらの値は、デフォルト（英語）のローカライズで入力されます。これは、ファイルen.lproj/localizedStrings.js



で確認できます。



次に、ロシア語のローカライズを追加します。 ウィジェット属性とローカリゼーションセクションの遷移に、ロシア語を追加します（左側のリスト）。 これを選択すると、右側のリストにローカライズされた文字列を入力できます。



これらの値は、それぞれru.lproj/localizedStrings.js



に登録されます。



実際、これですべてです。ウィジェットを起動して、（または他の誰かの）カルマを楽しむことができます！ ダッシュボードにウィジェットをインストールするには、必要に応じて、左側のパネルで[実行と共有]を選択し、[ディスクに保存]または[ダッシュボードに展開]を選択します。



既製のウィジェットをダウンロードする場合は、大歓迎です： ここにあります！ Dashcodeのプロジェクトのソースコードはgithubで取得できます。



誰かがこの記事をお役に立てれば幸いであり、ダッシュボードのウィジェットのリストに素晴らしいものが補充されることを願っています！


More articles:


All Articles