投稿

5月, 2018の投稿を表示しています

XPagesで色を選択してみよう その2

イメージ
皆さん、こんにちは。
・・・気が付いたら5月も半分終ろうかという日付です。
どういうことでしょう!?

このままいくと、次に気が付くときは来年になっているかもしれません・・・
そんなことのないように気を引き締めていきましょう。

さて、今日もXPagesのお話です。

以前、XPagesで色を選択してみようという記事で、XPagesで色フィールドを取り扱ってみよう!という事を書きました。
この時、IEでは動かないですね・・・という残念な結論で終わりました。

FirefoxやChromeでやればいいよ!というのも一つの回答だとは思いますが、それでも企業によってはIEでないとダメだ!というのはあり得る話なので、「できない」という回答一択ではいかんでしょう。

ということで、今回はIEでもXPagesで色フィールドを利用できるようにする!というのがテーマです。

といっても、IEではtype="color"のHTMLタグが使えないことは、以下のサイトでも書いてあるように分かり切っています。
https://caniuse.com/#search=color

そこで、探したところ・・・ありました!
IEでも使える色選択ツール!
GitHub - bgrins/spectrum: The No Hassle JavaScript Colorpicker

これをXPagesに組み込んでみましょう。

まずは、こちらからプロジェクトをダウンロードしてきて、
"spectrum.js"と"spectrum.css"を入手します。
この2つのファイルをXPagesアプリにインポートします。
CSSファイルは普通にリソースの「スタイルシート」でインポートしましょう。
JSファイルはリソースの「ファイル」で[ファイルリソースのインポート]でインポートしてください。

このライブラリですが、jQueryプラグインです。そのため、XPagesにjQueryを導入する必要があります。
今回は9.0.1 FP10(FP8以降)を使いますので、 アプリケーションのテーマに「bootstrap3」を選択して、jQueryを使えるようにします。

次にXPageを作成して、カラーピッカーを設置します。
カラーピッカーはinputタグを配置して行います。
HTM…

10進数と16進数の相互変換を考えてみよう

イメージ
久しぶりの投稿です。
今日は簡単なtipsです。できないと困ることだったので備忘録的に載せておきます。

10進数から16進数への変換やその逆を行いたいということがあります。
当ブログでもいくつか記事を載せています。
16進数を10進数に変換する関数を自作してみた
x進数を10進数に変換する関数
数値をx進数に変換してみる

ただ、今回はこれらを「XPages」(というかjavascript)で行いたいと思ったんです!そういう時ってありますよね?・・・あるんです。



そこで調べたところ、あっという間にわかってしまいました・・・
そのまま載せてしまっても芸がないので、
SSJSでもできるのかどうかの検証を行いつつ、その結果を載せることにしましょう。

まずは、10進数から16進数への変換について。
こちらに掲載されています。
Number.prototype.toString()

Number([数値]).toString(16);
[数値]は入力した値で、toString()の引数の"16"がx進数のことを表しています。

次に、16進数から10進数への変換について。
こちらも掲載されていますね。
parseInt()

parseInt( [数値], 16 );
[数値]は入力した値で、16は入力された値は16進数であることを意味しています。


あとは検証です。
こんな画面を作ってみました。

入力用は、「inputData1」というIDの編集ボックス
出力用は、「outputData1」「outputData2」というIDの計算結果フィールド(小数点を出したくなかったので、文字列と数値(整数)の2つを用意しています)
を配置してあります。

「10進数から16進数への変換」のボタンの式は
var dtInput  = getComponent( "inputData1" ).getValue(); var dtOutput = Number(dtInput).toString(16); getComponent( "outputData1" ).setValue( dtOutput );

「16進数から10進数への変換」のボタンの式は
var dtInput  = getComponent( "inputData1&quo…