フォーカスモードサンプル

フォーカスモードになった時に画像が変わるサンプルです。

このサンプルのポイントは2点あります。

まず、layout.xmlですが、ノーマルモード用のComponentに入っているBitmap nodeはvisible="0"にしていません。 visibleアトリビュートのデフォルト値は1なので、name="normal"のComponentは読み込まれると表示されます。

一方、フォーカスモード用Componentは、Component全体がvisible="0"になっています。

2点目のポイントは、widget.jsにあります。 最初に画像を読み込んでしまい、onFocus、onUnfocus、onActiveそれぞれで必要に応じてnodeに対してsetVisibleしています。

setVisibleはPNGそのものを表すnodeNormalBaseなどではなく、Component全体であるnodeNormal等に対して行っています。 このようにComponentは、全体を同時に表示したり非表示にするためのグループ化に利用できます。 もちろん、nodeNormalBaseなどの各nodeに対して別々にsetVisibleを行う事も可能です。

layout.xml

<?xml version="1.0" encoding="UTF-8"?>
<Widget>
  <Component name="widget">
    <Bitmap name="initial-bg"/>
    <Component name="normal">
      <Bitmap name="normalBase"/>
    </Component>
    <Component name="focus" visible="0">
      <Bitmap name="focusBase"/>
    </Component>
    <Component name="active" visible="0">
    </Component>
  </Component>
</Widget>

widget.js

var nodeNormal     = getNode("normal");
var nodeNormalBase = getChildNode(nodeNormal, "normalBase");
var nodeFocus      = getNode("focus");
var nodeFocusBase  = getChildNode(nodeFocus, "focusBase");

function onLoad() {
    loadImage(nodeNormalBase, "./parts/normal.png");
    loadImage(nodeFocusBase,  "./parts/focus.png");
}

function onUpKey() {
}

function onDownKey() {
}

function onRightKey() {
}

function onLeftKey() {
}

function onConfirmKey(type) {
}

function onFocus() {
  setVisible(nodeNormal, 0);
  setVisible(nodeFocus, 1);
}

function onUnfocus() {
  setVisible(nodeNormal, 1);
  setVisible(nodeFocus, 0);
}

function onActivate() {
  setVisible(nodeNormal, 0);
  setVisible(nodeFocus, 0);
}

動作例

サンプルダウンロード

ウィジェットバンドルFocusMode.zip