Help us understand the problem. What is going on with this article?

amber Smalltalk で sevenSeg.js を使ってみた

More than 5 years have passed since last update.

例によって自分用忘備録です。
走り書き乱文すみません。

はじめに

sevenSeg.js とはセグメントLED風の表示をするSVG使ったjQueryのプラグインであります。
(http://brandonlwhite.github.io/sevenSeg.js/)

これをamber Smalltalkで knockout.js と組み合わせて使ってみます。
サンプルは以下のもの。
(https://github.com/tty-hayashi/KohakuTimer)

  • sevenSeg.js ロード設定手順の概略

  • 使ってみる

sevenSeg.js ロード設定手順の概略

  1. sevenSeg.js を stプロジェクトのsubmoduleで追加
  2. {ライブラリ名}.amd.json ファイルの作成
  3. grunt devel で config.js と the.js の更新
  4. Packege の impoorts 指定

1. sevenSeg.js を stプロジェクトに submodule で追加

git で submodule で sevenSeg.js のプロジェクトを追加しました。

$ git submodule add https://github.com/BrandonLWhite/sevenSeg.js.git

2. {ライブラリ名}.amd.json ファイルの作成

jsライブラリの場所を指定するファイルを作成する。

ファイル名: sevenSeg.js.amd.json

{
   "paths": {
          "sevenSeg": "sevenSeg"
    },
    "shim": {
          "sevenSeg": {
              "deps": ["jquery", "jquery-ui", "knockout"]
          }
    }
}

3. grunt devel で config.js と the.js の更新

grunt を実行して config.js と the.js を更新する。

$ grunt devel

ここまではターミナルでの作業。

4. Packege の impoorts 指定

ここからは amber Smalltalk での作業。
Helios を使ってるならばパッケージの定義で、’sevenSeg’ を追加する。

Package
    named: 'Timer'
    imports: {'ko' -> 'knockout'. 'amber/jquery/Wrappers-JQuery'. 'amber/web/Web'. 'sevenSeg'. 'silk/Silk'}
    transport: (AmdPackageTransport namespace: 'amber-timer')

使ってみる

  1. DOM要素の動的編集
  2. ハンドラの登録

1. DOM要素の動的編集

Safari と FireFox で挙動が異なるようなので、DOM要素を amber Smalltalkから動的に編集します。抜本的対策は別途必要ですね。
DOM要素は data-bind 属性を指定したものを追加することで表示ができるはずです。以下の ‘body’ asJQuery append: しているところ。
KohakuTimer >> augmentPage

augmentPage

    '#start' asJQuery click: [self doAction].
    'body' asJQuery append: 
        '<div class="exampleContainer">
            <div data-bind="sevenSeg: { digits: 5, value: counter }" class="big-sevenSeg" style="width: 420px;"></div>
        </div>'.

    ko bindingHandlers at: #sevenSeg put: self sevenSegHandler.

    self setupModel

2. ハンドラの登録

本来、sevenSeg.js のパッケージの中に knockout.js 用のハンドラがあるのですが、今回は、それをロードできなかったので、amber Smalltalk の方で登録してやります。登録は、上記のコードの ko bindingHandlers at: #sevenSeg put: self sevenSegHandler. でやってるのですが、この sevenSegHandler の実体は以下の通りです。
KohakuTimer >> sevenSegHandler

sevenSegHandler

    ^#{
        #init -> [:element :valueAccessor :allBindingAccesso :model :bindingContex |
                    | bindingValue |
                    bindingValue := valueAccessor value.
                    element asJQuery sevenSeg: (ko toJS: bindingValue)] .
        #update -> [:element :valueAccessor :allBindingAccesso :model :bindingContex |
            element asJQuery sevenSeg: (ko toJS: valueAccessor value)]
    }

こんな感じになります

timer.png

参考URL

tetha
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした