きもさべにっき

2015年6月13日土曜日

考える人

去年の10月頃ネットで見つけ、衝動的にポチッと予約してしまった「ポーズの変えられる考える人」が到着しました。
6月は誕生月です、昨日の自分からの今日の自分への誕生日プレゼントをお披露目します。

考える人

考えすぎた人

走りながら考える人?

ほんとに考えているの？...な人

いろいろなポーズ、しばらく楽しめそうです。

昨日なんてもうあらへん
明日なんてまだあらへん
あるのんは今日だけどす
キモサベ！！

2015年6月5日金曜日

久しぶりの記事公開です(何年ぶりや)。

冬から春先にかけては、土日は近所の川辺で野鳥撮影を楽しんでいましたが、
土手が草で覆われ、ほとんど鳥を見つけることができなくなり鳥撮るトーさんの鳥撮るカメラの出番もすっかり減ってしまいました。

昨夜、窓越しに外を見るとほぼ満月状態の月が浮かんでいました。
鳥撮るカメラの出番です。

酔写1

35mm換算1200mmの超望遠で、酔っぱらいが手持ちで月を撮るのは無謀でした。

カメラを三脚にセットして酔写!

酔写2

三脚でもブレてますね、酔っぱらいですからまぁこんなもんでしょう。
三脚をセットしている途中、ジェット旅客機が月を横切る「ET」的
なシーンを撮り損なりました、残念!

キモサベ

2011年8月19日金曜日

ZK:グリッドに追加した最後の行を必ず見えるようにする

Clients.scrollIntoView(component)メソッドを使うことで、親エレメントをスクロールし、指定したエレメントを見えるようにすることができます。元ネタ

--- zul ---
<window title="動的に追加した最後の行を必ず見えるようにする方法" border="normal"
                     apply="ctrl.MyCtrl" width="350px">
    <grid height="50px">
        <rows id="rows" />
    </grid>
    <button label="行を追加" id="addBtn" />
</window>

--- java ---
public class MyCtrl extends GenericForwardComposer {
    private Rows rows;
    private static int count=0;
    @Override
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
    }

    public void onClick$addBtn(){	
        count++;
        Row row =new Row();
        row.appendChild(new Label("new"+count));
        row.setParent(rows);
        Clients.scrollIntoView(row);		
    }
}

2011年8月9日火曜日

Javaコントローラ内でJavaScriptコードをコールする

元ネタ

JavaのコントローラからJavaScriptのコードを実行させることが必要になるケースがあるかもしれません。例えばサーバ・プッシュを使い下記の様な処理をする場合が考えられます。
サーバ・サイドでイベントを発行する

そのイベントは専用のスレッドで操作される

そのスレッドの中からなにがしかのJava Script関数をコールしたい
こんな時はこんな風に!! Clients.evalJavaScript("alert('Hello World!')); 簡単でしょ?

--- zul --
<window title="JavaコントローラからJavaScript関数をコールする" 
       apply="zkexamples.ViewController2"  border="normal" width="350px">
      <button id="btn" label="click"  />                  
</window>

--- java ---
public class ViewController2 extends GenericForwardComposer {
    public void onClick$btn(Event event){
        Clients.evalJavaScript("alert('Hello world!');");	
   }
   public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
    }	
}

2011年8月1日月曜日

ZK: JavaScriptからJavaコントローラのメソッドをコールする

JavaScriptからコントローラ内のJavaメソッドをコールするときは、JavaScript内で親コンポーネントに対しイベントを送り、親コンポーネントのイベントハンドラでコールしたいJavaメソッドを呼び出すようにします。

サーバにイベントを送るJavaScript関数


   function callJavaMethod(){
       zAu.send(new zk.Event(zk.Widget.$(this), 'onLinkClicked', 'Parameter'));
   }

    zk.Widget.$(this)    => 親コンポーネント(この場合は "rootwindow"を指す)
    'onLinkClicked'      => 送出するイベントを処理するコントローラのイベントハンドラメソッド名
    'Parameter'          => イベントハンドラへ渡すパラメータ。(オプション)
                             ※イベントハンドラ内で Event event を ForwardEventにキャストし
                               getOrigin().getData()でパラメータの値を取得できる。

JavaScriptから送出されたイベントのイベントハンドラメソッド


    public void onLinkClicked$rootwindow(Event event){
        someJavaMethod();
   }


--- zul ---
<window id="rootwindow" 
    title="JavaScriptからJavaコントローラのメソッドをコールする" border="normal" 
                          apply="zkexamples.calljavafromjavascript.ViewController">
   <html><![CDATA[
    <script type="text/javascript">
      function callJavaMethod(){
       zAu.send(new zk.Event(zk.Widget.$(this), 'onLinkClicked', 'Parameter'));
    }
    </script>
    <a href="#" onClick="callJavaMethod();">Click me</a>
    ]]></html>
</window>


--- java ---
public class ViewController extends GenericForwardComposer {

    // JavaScriptからイベントハンドラを経由してコールされるコントローラのメソッド
    private void callMe() {
        alert("Hello JavaScript, this is Java!");
    } 
   
    // コントローラのイベントハンドラ名の最後に親コンポーネント名をつけること忘れないこと!!
    public void onLinkClicked$rootwindow(Event event){
        ForwardEvent fevent = (ForwardEvent)event;
        System.out.println(fevent.getOrigin().getData()); 
        callMe();
    }
}

2011年7月22日金曜日

ZK: Fileアップロードサンプル

ZKForum のこのスレッドで紹介されていたヘルパークラスを使い、アップロードされたファイルをサーバに格納するサンプルです。


簡単な使い方:
--- zul ---
<button id="uploadBtn" label="Upload file" upload="true,maxsize=300"/>

--- java ---
public void onUpload$uploadBtn(UploadEvent event) throws InterruptedException {
    org.zkoss.util.media.Media media = event.getMedia();  
    Medias.saveToFile(media, "/path/to/save");;
}

ソース


ヘルパークラス
--- Medias.java ---
import java.io.BufferedInputStream;
import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.Reader;
import java.io.StringReader;

import org.apache.commons.io.IOUtils;
import org.zkoss.util.media.Media;


public class Medias {
 
 public static File saveToFile(Media media, String path) {
    try {
       File file = new File(path + File.separator + media.getName());
       OutputStream output = new FileOutputStream(file);
       if (media.isBinary()) {
           InputStream input = Medias.asStream(media);
           IOUtils.copy(input, output);
           input.close();
       } else {
           Reader input = Medias.asReader(media);
           IOUtils.copy(input, output);
           input.close();
       }
       output.close();
       return file;
    } catch (Exception e) {
        throw new RuntimeException(e);
    }
}

public static String asString(Media media) {
    try {
        String result = null;
        if (media.isBinary()) {
        InputStream input = Medias.asStream(media);
        result = IOUtils.toString(input);
        input.close();
    } else {
        Reader reader = Medias.asReader(media);
        result = IOUtils.toString(reader);
        reader.close();
    }
        return result;
    } catch (Exception e) {
        throw new RuntimeException(e);
    }
}

private static InputStream asStream(Media media) {
    return new BufferedInputStream(
        media.inMemory() ?  
            new ByteArrayInputStream(media.getByteData()): media.getStreamData());
    }

private static Reader asReader(Media media) {      
    return new BufferedReader(media.inMemory() ? 
           new StringReader(media.getStringData()) : media.getReaderData());
    }
}


ビュー
--- fileupload.zul ----
<?page title="ファイルアップロード" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="ファイルアップロード" border="normal" apply="sample.ctrl.UploadCtrl ">
  <button id="uploadBtn" label="Upload file" upload="true,maxsize=300" />
  <separator />
  <image id="img" />
  <separator />
  <label id="msgLbl" />

</window>
</zk>


コントローラ
--- FileUploadCtrl.java ---
public class FileUploadCtrl extends GenericForwardComposer {
private Label msgLbl;
    private Image img;

    public void onUpload$uploadBtn(UploadEvent event) throws InterruptedException  {    
        msgLbl.setValue("");
        org.zkoss.util.media.Media media = event.getMedia();  

        if(media == null){
            msgLbl.setValue("ファイルを選択してください。");
            return;
         }

         if (media instanceof org.zkoss.image.Image) {
              org.zkoss.zul.Image image = new org.zkoss.zul.Image();
              image.setContent((org.zkoss.image.Image)media);
              image.setParent(img);
         }

         Medias.saveToFile(media, "/path/to/save");;
    }
}

2011年7月16日土曜日

ZK: コミュニティ・エディションで Captchaを使う

ZK コミュニティ・エディション(CE)では残念ながらCaptchaコンポーネントを利用することができません。
しかし SimpleCaptcha を用いることで、CEでも Captchaを簡単に利用することができる方法が ZKforum で紹介されていたのでまとめてみました。

元ネタ

SimpleCaptcha サイトからsimplecaptcha.jarをダウンロードし WEB-INF/libへ配備する。

CaptchaUtils クラスを作成する。


import nl.captcha.Captcha;
import nl.captcha.backgrounds.GradiatedBackgroundProducer;
import nl.captcha.text.renderer.ColoredEdgesWordRenderer;

/**
 * CAPTCHAを作成するユーティリティクラス <br>
 * Captchaは直接 org.zkoss.zul.Imageにロード可能 <br>
 * 
 * <pre>
 * Image img = new org.zkoss.zul.Image();
 * img.setContent(CaptchaUtils.getCaptcha());
 * 
 * String verifyStr = captcha.getAnswer();
 * </pre>
 * 
 * @author Stephan Gerth
 */
public class CaptchaUtils 
    public CaptchaUtils(){
    }

    /**
    * 5桁のキャプチャを作成する
    */
    public static Captcha getCaptcha() {

        Captcha captcha = new Captcha.Builder(140, 50)
                       .addText(new ColoredEdgesWordRenderer()).addNoise()
                       .addBackground(new GradiatedBackgroundProducer())
                       .addBorder()
                       .build();

        return captcha;
    }
}

コントローラクラスを作成する。


public class CaptchaCtrl extends GenericForwardComposer {
    private static final long serialVersionUID = -804655396850565215L;
    private Image img_captcha;
    private Textbox txt_captcha;
    private Captcha captcha;
 

    public void onCreate$win(Event event){
        doReCaptcha();
    }
 
    public void onClick$btn1(Event event){
        if (txt_captcha.getValue().equals(captcha.getAnswer())){
            alert("正しいキャプチャです。"); 
        } else { 
            alert("間違っています!!"); 
       } 
    }

    public void onClick$btn2(Event event){
        doReCaptcha();
    }

    /**
    * キャプチャを再表示する<br>
    * 
    */
    private void doReCaptcha() {
        captcha = CaptchaUtils.getCaptcha();
        img_captcha.setContent(captcha.getImage());
    } 
}

ZULを作成する。


<window id="win"  border="normal" width="350px" 
          title="コミュニティ・エディションでもキャプチャが使えます"  apply="ctrl.CaptchaCtrl" >
    <vlayout id="input" width="100%" >
        <hbox>
            <image id="img_captcha" /> 
            <button label="再表示" id="btn2"/>  
        </hbox>
    キャプチャを入力してください。 
        <textbox id="txt_captcha" hflex="1" width="250px"/>
        <button label="確認" id="btn1"/> 
   </vlayout> 
</window>

2010年5月10日月曜日

2009年12月5日土曜日

http://ruby-oci8.rubyforge.org/ja/InstallForInstantClient.html
を参考にセットアップ

環境
Ubuntu 8.04
Ruby1.8.6
Apache 2.2.8
Oracle Instantclient 11.2
ruby-oci8

環境変数設定
$ export LD_LIBRARY_PATH=/opt/oracle/instantclient_11_2
$ export NLS_LANG=Japanese_Japan.UTF8

でコンソールでは文字化けせずに日本語の入った列もselectできた。
ところが同じスクリプトをCGIから実行すると日本語が文字化けする。


[Fri Dec 04 08:44:47 2009] [error] [client 127.0.0.1] Premature end of script headers: hogehoge.cgi
env.c:257:in oci8lib.so: Error while trying to retrieve text for error ORA-12705 (OCIError)
        from /usr/local/lib/site_ruby/1.8/oci8.rb:229:in `initialize'
        from /usr/local/lib/site_ruby/1.8/hoge/hogehoge.rb:309:in `new'
        from /usr/local/lib/site_ruby/1.8/hoge/hogehoge.rb:309:in `initialize'
        from /var/www/hogehoge.cgi:4:in `new'
        from /var/www/hogehoge.cgi:4

Apacheの起動スクリプトに環境変数を設定してもだめ、検索した結果Apacheの環境変数は
SetEvnディレクティブでセットすることが分かりapache2.confを編集後再起動し無事に日
本語が表示できた。


...
SetEnv LD_LIBRARY_PATH /opt/oracle/instantclient_11_2
SetEnv NLS_LANG Japanese_JAPAN.UTF8
...

/etc/apache2/apache2.conf

2009年7月6日月曜日

Trac:ワークフローをカスタマイズする

Tracのデフォルトのワークフローは僕にとってあまり直感的ではないのでカスタマイズしてみる。

着手するまでは課題を修正できる。

着手したら解決するだけ。

解決した課題は終了するか、差し戻しにする。

だけのワークフローにしよう。
Tracプロジェクトディレクトリ/conf/trac.iniを編集する。


[ticket-workflow]
revise = new,revised -> revised
revise.name = 課題を修正する
revise.permissions = TICKET_MODIFY

accept = new,revised,reopened -> accepted
accept.name = 着手する
accept.operations = set_owner_to_self
accept.permissions = TICKET_MODIFY

reopen = resolved,closed -> reopened
reopen.operation = del_resolution
reopen.permissions = TICKET_CREATE
reopen.name = 差し戻す

resolve = accepted -> resolved
resolve.name = 解決にする
resolve.operations = set_resolution
resolve.permissions = TICKET_MODIFY

close = resolved -> closed
close.name = 終了にする
close.permissions = TICKET_MODIFY

カスタマイズしたワークフローを画像で確認する。

trac.iniファイルをworkflow_parser.pyで処理して.dotファイルを作成してからGraphvizのdotコマンドでdotファイルを処理し画像ファイルに変換することで視覚化出きるそうだ。

workflow_parser.pyでtrac.iniファイルを処理し.dotファイルを作成する。


Trac-0.11.2.1.ja1/contrib/workflow/workflow_parser.py trac.ini
...
UnicodeEncodeError: 'ascii' codec can't encode ...

どうやらUTF-8でエンコードした日本語をasciiとして扱っているみたい。
http://trac.edgewall.org/ticket/6930 によるとworkflow_parser.py を修正すれば良いようだ。

import locale, codecs を追加し
sys.stdout.write(''.join(digraph_lines))
を
sys.stdout = codecs.getwriter(locale.getpreferredencoding())(sys.stdout);
sys.stdout.write(''.join(digraph_lines))
に修正してから動作確認。


$ workfloe_parser.py trac.ini > trac.dot

今度は無事dotファイルが作成できたようだ。
Graphvizのdotコマンドでdotファイルを処理し画像ファイルに変換する。


$ dot -T png < trac.dot > trac.png

いいじゃないですか！！

2008年12月24日水曜日

ZK: MVC ラベルの日付を和暦で表示する

DateUserを参考に日付を和暦(元号)で表示する。(Java6)


public class DateUserWAREKI implements TypeConverter {

    @Override
    public Object coerceToBean(Object arg0, Component arg1) {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public Object coerceToUi(Object arg0, Component arg1) {
        if (arg0 == null) {
            return null;
        }
        Locale locale = Locale("ja","JP","JP");
        SimpleDateFormat sdf = new SimpleDateFormat("GGGGyy年M月d日", locale);
        Date date = (Date) arg0;
        return sdf.format(date);
    }
}


<listcell label="@{employee.hireDate, converter='org.zkforge.converters.DateUserWAREKI'}"/>

ZK: MVC ラベルの日付をyyyy/MM/dd形式で表示する

http://www.pichelhofer.at/ZKDemoで紹介されているTypeConverterを利用し日付をロケールに合わせて表示する。

http://www.pichelhofer.at/ZKDemo/src/DateUser.java.html


<listcell label="@{employee.hireDate, converter='org.zkforge.converters.DateUser'}"/>

ZK: MVC 変数selectedにアクセスする

ビューの変数selectedにコントローラからアクセスする。


public void onClick$selectedBtn(Event e) throws Exception{
   Employee selected =(Employee)win.getVariable("selected", true);
   if (selected != null){
       alert(selected.firstName);
   }
}

ZK: MVC リストボックスをクリアする

データバインドされているリストボックスをクリアするにはbeanにnullを代入し、
データバインダを使用してデータロードする。


public void onClick$clearBtn(Event e) throws Exception{
    empData = null;
    empListbox.unsetVariable("selected", true);
    binder = (AnnotateDataBinder)page.getVariable("binder");
    binder.loadAll();
}

ZK: MVC 選択を解除する

unsetVariableメソッドを使いlistboxからselected変数を取り除いた後、
データバインダを使用してデータをロードし直すことでリストボックスの選択を解除し、
明細をクリアできる。

   
 public void onClick$clearSelBtn(Event e) throws Exception{
        empListbox.unsetVariable("selected", true);
        binder = (AnnotateDataBinder)page.getVariable("binder");
        binder.loadAll();
    }

2008年12月10日水曜日

ZK: MVC

GenericFowardComposerを拡張したコントローラ・クラスを作成しwindowのapply属性の値に設定すると、イベント・リスナーが自動的に登録されると同時にzulコンポーネントとコントローラのフィールドが自動的に紐つけられる。このためコントローラのコードが非常にすっきり記述できるようになった。

ボタンをクリックすると2個のintboxの値を足し算しlabelへ表示するサンプル
ビュー


<window id="win" title="MVCサンプル" border="normal" width="300px" apply="Controler1">
  <hbox>
    <intbox id="arg1"/> + <intbox id="arg2"/> <button label=" = " id="addBtn" /> <label id = "ans"/>
  </hbox>   
</window>

コントローラ


public class Controler1 extends GenericForwardComposer {
    private Intbox arg1;    //ビューの<intbox id="arg1"/>コンポーネントと自動的に紐付けされる
    private Intbox arg2;    //ビューの<intbox id="arg2"/>コンポーネントと自動的に紐付けされる
    private Label ans;      //ビューの<label id="and"/>コンポーネントと自動的に紐付けされる
   
   // addBtnボタンの onClickイベント・リスナー
    public void onClick$addBtn(Event e) throws Exception{
        ans.setValue(String.valueOf(arg1.getValue() + arg2.getValue()));
    }
}

コントローラでビューのzulコンポーネントと同じ型でidと同じ名称のフィールドを宣言するとzulコンポーネントと自動的に紐つけされる。
onイベント名$コンポーネント名の形でイベント・リスナーを書いておけば自動的に登録され対応するビューのコンポーネントのイベントが処理できる

データバインド
S2JDBCを使いFirebirdに付属のemployeeテーブルをリストと明細で表示するサンプル。

データバインダを利用するにはビューを<?init class="org.zkoss.zkplus.AnnotateDataBinderInit" ?>で初期化する。
バリアブル・リゾルバにorg.zkoss.zkplus.seasar.DelegatingVariableResolverを使用しSeasar変数jdbcManagerを利用できるようにする。

ビュー


<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<?variable-resolver class="org.zkoss.zkplus.seasar.DelegatingVariableResolver"?>
<window id="win" title="Employee" border="normal" width="300px" apply="MyControler">
      <listbox id="empListbox" width="200px" rows="10" multiple="true"  height="100%"
        checkmark="true" model="@{controler.empData}" selectedItem="@{selected}">
        <!--
          controlerはMyControlerのdoAfterComposeメソッドでWindow変数に追加されている。
               aWindow.setVariable("controler", this, true); //aWindowはdoAfterComposeの引数
          empDataはcontrolerで定義されているList<Employee>型のプロパティ
         -->
        <listhead>
            <listheader label="姓" />
            <listheader label="名" />
       </listhead>
        <listitem self="@{each=employee}">
            <listcell label="@{employee.lastName}"/>
            <listcell label="@{employee.firstName}"/>
        </listitem>
    </listbox>
  <vbox>
    <hbox>姓: <label value="@{selected.lastName}"/></hbox>
    <hbox>名:<label value="@{selected.firstName}"/></hbox>
    <hbox>内線番号: <label value="@{selected.phoneExt}"/></hbox>
    <hbox>入社日:<label value="@{selected.hireDate}"/></hbox>   
  </vbox>
</window>

コントローラ


public class MyControler extends GenericForwardComposer {
    private List<Employee> empData;
    private JdbcManager jdbcManager; //super.doAfterComposeのコール後Seasar変数と自動で紐付けされる
 
    @Override
    public void doAfterCompose(Component aWindow) throws Exception {
        super.doAfterCompose(aWindow);

        // 自分自身をwindowの変数に追加するとビューからアクセス可能なオブジェクトになる。
        aWindow.setVariable("controler", this, true);
        empData = jdbcManager.from(Employee.class).getResultList();
    }

    //zulのListboxのmodelプロパティには controler.empData を設定する
     public List<Employee> getEmpData() {
         return empData;
    }
}

2008年12月5日金曜日

ZK: forEach属性のeach変数の値へコンポーネント生成後にアクセス

コンポーネントのeach属性はforEach属性で配列を使用してコンポーネントを表示するときに使われる一時変数なので、あとからonXXXイベント等でこの値にアクセスしたい場合はコンポーネントを表示すると同時にcustom-attributesを使用しeachの値を保存して置く。


<window  width="100%">  
  <zscript>
    // コンポーネントのforEach属性を利用して生成するボタンの国名ラベルの配列
   String[] countries = {"China", "France", "Germany", "United Kindom", "United States", "Japan"};
  </zscript>
  <hbox>
    <button label="${each}" forEach="${countries}">
      <!-- eachの値をcustom-attributesのcountryに保存する -->
     <custom-attributes country="${each}"/>
     <attribute name="onClick">
       {
       //countryにアクセスする。
       alert(componentScope.get("country"));
       }              
     </attribute>
    </button>
  </hbox>
</window>

2008年12月4日木曜日

ZK: Listitemのフォントサイズを変更する


<style> 
  div.cell-inner{ 
  font-size:xx-small;
  //font-size:xx-large;
} 
</style>

ZK: 小文字の入力時に自動で大文字に変換するtextbox

小文字の入力が入力と同時に大文字に変換される。


<textbox style="text-transform:uppercase" id="idx" />

登録: 投稿 (Atom)