こんばんは

前回、バーコードを作成し画像を保存するところまでご紹介しました
実際の裏側について説明したいと思います

今回の改修場所、まず1か所目

出力スクリプトコントロールです。

出力スクリプトコントロールの中身は以前ページにコピペしたＨＴＭＬタグの＜script＞部分になります。

まずは、以下のfunction内にあるJQueryをXPagesで解釈できる形にしなければなりません。

generateBarcode()
showConfig1D()
showConfig2D()
clearCanvas()
function()

普通通りにソースで確認すると・・・

「view:_id1:_id3:barcodeValue」

何だこれ？？となっていると思います。
（人によってはview:_id1:_id2:barcodeValueだったり、view:_id1:_id8:barcodeValueだったりマチマチ）

これでは、idやnameの統一ができないじゃないか

というわけで打開策ネタを探しておりました・・・

そして見つけましたよ！

※すいません、勝手にリンク貼っちゃいました。問題あればすぐに削除します。

//function is called using x$("#{id:inputText1}", " parameters").
  
function x$(idTag, param){ //Updated 18 Feb 2012
   idTag=idTag.replace(/:/gi, "\\:")+(param ? param : "");
   return($("#"+idTag));
}

でも、自分はこれを使いませんでした

function追加するのが面倒だったのでｗｗ

それでほかにも探した結果、とっても簡単な方法を見つけました

（使えるかどうかは検証してください）

https://xomino.com/2012/03/09/x-reference-examples/

このページの一番下にあるじゃないですか

Selecting a field by attribute with wildcard (no x$)

と、いうことで↑こちら↑を使わせていただきました。

これらの

generateBarcode()
showConfig1D()
showConfig2D()
clearCanvas()
function()

functionに使用されているIdやname要素の変換を行います

一例として「generateBarcode()」functionの変換例を載せておきます。

function generateBarcode(){
        var value = $("[name$=barcodeValue]").val();
       var btype = $("[name$=btype]:checked").val();
       var renderer = $("[name$=renderer]:checked").val();

       var quietZone = false;
        if ($("#quietzone").is(':checked') || $("#quietzone").attr('checked')){
          quietZone = true;
        }

        var settings = {
          output:renderer,
          bgColor: $("[name$=bgColor]").val(),
          color: $("[name$=color]").val(),
          barWidth: $("[name$=barWidth]").val(),
          barHeight: $("[name$=barHeight]").val(),
          moduleSize: $("[name$=moduleSize]").val(),
          posX: $("[name$=posX]").val(),
          posY: $("[name$=posY]").val(),
          addQuietZone: $("[name$=quietZoneSize]").val()
        };

        if (renderer == 'canvas'){
          clearCanvas();
          $("[name$=barcodeTarget]").hide();
          $("[id$=canvasTarget]").show().barcode(value, btype, settings);
        } else {
          $("[name$=canvasTarget]").hide();
          $("[id$=barcodeTarget]").html("").show().barcode(value, btype, settings);
        }
      }

※あくまで一例です。XPagesの構成に合わせて変換してください。

同じように、残りのfunctionのIdやnameを変換していきます。

出力スクリプトに関してはこれで改修は完了です。

次の改修場所はまた今度

長くなってきたので今日はこの辺で

あでゅー

商品管理を作る-XPagesに組み込んでみた２-