= Dashboard開発メモ

info.plistのひな形

※自作widget(サンプル)から ※キーの解説は別途

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>AllowMultipleInstances</key>
	<true/>
	<key>AllowNetworkAccess</key>
	<true/>
	<key>CFBundleIdentifier</key>
	<string>com.koshigoe.widget.rssbean</string>
	<key>CFBundleName</key>
	<string>HTB</string>
	<key>CFBundleShortVersionString</key>
	<string>0.1</string>
	<key>CFBundleVersion</key>
	<string>0.1</string>
	<key>DefaultImage</key>
	<string>Default</string>
	<key>Height</key>
	<integer>400</integer>
	<key>MainHTML</key>
	<string>HTB.html</string>
	<key>Width</key>
	<integer>200</integer>
</dict>
</plist>

HTMLのひな形

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
    @import "スタイルシートのパス";
</style>
<script type="text/javascript" src="javascriptのパス"></script>
</head>
<body background="背景画像">
<!-- Begin: 前面に関するコード -->
<div id="front">
  <!-- Begin: 背面へのリンクボタン(フリップアニメーション) -->
  <div id="flippers">
    <div class='flip' id='fliprollie'></div>
    <div class='flip' id='flip' onclick="showPrefs()" onmouseover='enterflip(event);' onmouseout='exitflip(event);'></div>
  </div>
  <!-- End: 背面へのリンクボタン(フリップアニメーション) -->
</div>
<!-- End: 前面に関するコード -->
<!--  Begin: 背面に関するコード-->
<div id="back" onclick="hidePrefs();">
</div>
<!-- End: 背面に関するコード -->
</body>
</html>

CSSのひな形

※平面へのリンクボタン”i”マークに関する記述(システムで用意されている画像を利用する: 黒バージョンはblack_*.jpg)

#flip {
  opacity:0;
  background: url(/System/Library/WidgetResources/ibutton/white_i.png) no-repeat top left;
}
 
#fliprollie {
  display:none;
  opacity:0.15;
  background: url(/System/Library/WidgetResources/ibutton/white_rollie.png) no-repeat top left;
}

JSのひな形

※フリップアクション周りの記述

var flipShown = false;
var animation = {duration:0, starttime:0, to:0.5, now:0.0, from:0.0, element:null, timer:null};
function limit_3 (a, b, c)
{
  return a < b ? b : (a > c ? c : a);
}
function computeNextFloat (from, to, ease)
{
  return from + (to - from) * ease;
}
function animate()
{
  var T;
  var ease;
  var time = (new Date).getTime();
  T = limit_3(time-animation.starttime, 0, animation.duration);
  if (T >= animation.duration)
  {
    clearInterval (animation.timer);
    animation.timer = null;
    animation.now = animation.to;
  }
  else
  {
    ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration));
    animation.now = computeNextFloat (animation.from, animation.to, ease);
  }
  animation.element.style.opacity = animation.now;
}
function mousemove (event)
{
  if (!flipShown)
  {
    // fade in the flip widget
    if (animation.timer != null)
    {
      clearInterval (animation.timer);
      animation.timer  = null;
    }
    var starttime = (new Date).getTime() - 13; // set it back one frame
    animation.duration = 500;
    animation.starttime = starttime;
    animation.element = document.getElementById ('flip');
    animation.timer = setInterval ("animate();", 13);
    animation.from = animation.now;
    animation.to = 0.5;
    animate();
    flipShown = true;
  }
}
function mouseexit (event)
{
  if (flipShown)
  {
    // fade out the flip widget
    if (animation.timer != null)
    {
      clearInterval (animation.timer);
      animation.timer  = null;
    }
    var starttime = (new Date).getTime() - 13; // set it back one frame
    animation.duration = 500;
    animation.starttime = starttime;
    animation.element = document.getElementById ('flip');
    animation.timer = setInterval ("animate();", 13);
    animation.from = animation.now;
    animation.to = 0.0;
    animate();
    flipShown = false;
  }
}
function enterflip(event)
{
  document.getElementById('fliprollie').style.display = 'block';
}
function exitflip(event)
{
  document.getElementById('fliprollie').style.display = 'none';
}
function showPrefs()
{
  var front = document.getElementById("front");
  var back = document.getElementById("back");
  if (window.widget)
    widget.prepareForTransition("ToBack");
  front.style.display="none";
  back.style.display="block";
  if (window.widget)
    setTimeout ('widget.performTransition();', 0);  
}
function hidePrefs()
{
  var front = document.getElementById("front");
  var back = document.getElementById("back");
  if (window.widget)
    widget.prepareForTransition("ToFront");
  back.style.display="none";
  front.style.display="block";
  if (window.widget)
    setTimeout ('widget.performTransition();', 0);
}

widgetオブジェクト

ブラウザでページを開く

widget.openURL('http://~');

※aタグのhref属性だとtarget属性の_blankを使ってもブラウザは開かない。

 
koshigoewiki/dashboard/開発メモ.txt · 最終更新: 2005/10/15 02:25 by koshigoebushou
 
Creative Commons License Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki