2012年4月26日木曜日

grailsとROMEでRSS/ATOMの内容を表示する

grailsとROMEでRSS/ATOMの内容を表示するには、以下の手順を実行します。

1. BuildConfig.groovyでROMEのライブラリを指定します。
...省略...
    repositories {
        inherits true // Whether to inherit repository definitions from plugins
        grailsPlugins()
        grailsHome()
        grailsCentral()
        mavenCentral()

        // uncomment these to enable remote dependency resolution from public Maven repositories
// mavenCentral()をuncommentする
mavenCentral()
        //mavenLocal()
        //mavenRepo "http://snapshots.repository.codehaus.org"
        //mavenRepo "http://repository.codehaus.org"
        //mavenRepo "http://download.java.net/maven/2/"
        //mavenRepo "http://repository.jboss.com/maven2/"
    }
    dependencies {
        // specify dependencies here under either 'build', 'compile', 'runtime', 'test' or 'provided' scopes eg.
// ROMEのライブラリを指定
runtime 'rome:rome:1.0'
        // runtime 'mysql:mysql-connector-java:5.1.16'
    }
...省略...
2. コントローラークラスで以下のようなコードを記述します。
package yourpackage
import com.sun.syndication.feed.synd.*
import com.sun.syndication.io.* 

class RssController
{
  def index()
  {
    def uri = "http://groovyarekore.blogspot.com/feeds/posts/default"
    return [feed:new SyndFeedInput(false).build(
      new InputStreamReader(new URL(uri).openStream(), "UTF-8")
    )]
  }
}
3. ビューに以下のようなマークアップを記述します。
<!-- RSSの内容を出力 -->
  <h2>${feed.title}</h2>
  <ul>
    <g:each in="${feed.entries}" status="i" var="entry">
      <li>${entry.publishedDate.format('yyyy/MM/dd(E)')}:<a href="${entry.link}" target="_blank">${entry.title}</a>
      </li>
    </g:each>
  </ul>
出力画面

動作環境
grails 2.0.1

関連情報
groovyとROMEでATOM/RSSフィードのエントリを取得する
http://groovyarekore.blogspot.jp/2009/09/groovyromeatomrss.html

2012年4月25日水曜日

grailsとjqFloat.jsで指定した要素が浮かんだようなアニメーションを表示する

grailsとjqFloat.jsで指定した要素が浮かんだようなアニメーションを表示するには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
  // jqFloatのモジュールを宣言
  jqfloat {
    dependsOn 'jquery'
    resource url:'js/jqfloat.min.js', disposition:'head'
  }
}
jqfloat.min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
<!-- jqFloatを使用 -->
<r:require module="jqfloat"/>
        <r:layoutResources />
 </head>
3. viewに以下のようなコードを追加します。
<!-- jqFloatで要素をふわふわと浮かんだようにアニメーションさせる -->
<style type="text/css" media="screen">
.information {
  padding: 0.5em;
  color: #5577dd;
  background-color: #ccddff;
  -moz-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  border-radius: 0.3em;
}
</style>
<div class="information">Information</div>
<script type="text/javascript">
  $(function(){
    $(".information").jqFloat({width: 10, height: 10, speed:700});
  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
jqFloat.jsのホームページ
http://www.inwebson.com/jquery/jqfloat-js-a-floating-effect-with-jquery/

2012年4月24日火曜日

groovyとApache Commons Mathで中央値を表示する

groovyとApache Commons Mathで中央値を表示するには、以下のコードを実行します。
@Grab(group='org.apache.commons', module='commons-math', version='2.2')
import org.apache.commons.math.stat.descriptive.rank.*

// 中央値を求める
data = [10, 20, 50, 70, 90] as double[]
println "median:" + new Median().evaluate(data)

動作環境
groovy 1.8.5, JDK7 Update2, Apache Commons Math 2.2

2012年4月23日月曜日

grailsとSyntaxHilighterでgroovyコードを表示する

grailsとSyntaxHilighterでgroovyコードを表示するには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
  application {
    resource url:'js/application.js'
  }
  // SyntaxHilighterのモジュールを宣言
  syntaxhilighter {
    dependsOn 'jquery'
    resource url:'js/shCore.js', disposition:'head'
    resource url:'js/shBrushGroovy.js', disposition:'head'
    resource url:'css/shCore.css'
    resource url:'css/shThemeDefault.css'
  }
}
shCore.jsとshBrushGroovy.jsはweb-app/jsディレクトリに、css/shCore.cssとcss/shThemeDefault.cssはweb-app/cssディレクトリに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
<!-- SyntaxHilighterを使用 -->
<r:require module="syntaxhilighter"/>
        <r:layoutResources />
 </head>
3. viewに以下のようなコードを追加します。
<!-- SyntaxHilighterでgroovyコードを表示 -->
<pre class="brush: groovy"><%="""
class Greet {
  def name
  Greet(who) { name = who[0].toUpperCase() +
                      who[1..-1] }
  def salute() { println "Hello $name!" }
}

g = new Greet('world')  // create object
g.salute()               // output "Hello World!"
""".encodeAsHTML()%></pre>
<script type="text/javascript">
  $(function(){
    SyntaxHighlighter.all();
  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
SyntaxHilighterのホームページ
http://alexgorbatchev.com/SyntaxHighlighter/

2012年4月22日日曜日

grailsとjsPlumbで要素間をドラッグで接続できるようにする

grailsとjsPlumbで要素間をドラッグで接続できるようにするには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
    // jsPlumbのモジュールを宣言
    jsplumb {
      dependsOn 'jquery-ui'
      resource url: 'js/jquery.jsPlumb-1.3.7-all-min.js', disposition:'head'
    }
}
コマンドでgrails install-plugin jquery-uiを実行してjQuery UI pluginをインストールしておきます。 jquery.jsPlumb-1.3.7-all-min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
  <!-- jsPlumbを使用 -->
  <r:require module="jsplumb"/>
        <r:layoutResources />
 </head>
3. viewに以下のようなコードを追加します。
<!-- jsPlumb -->
<div id="jsplumb" style="width: 300px; height:200px; background-color: #dddddd;">jsPlumb
 <div id="node0" style="width:50px; height:50px; background-color: #7799dd; position: absolute;">
 </div>
 <div id="node1" style="width:50px; height:50px; background-color: #ffff99;position: absolute;">
 </div>
</div>
<script type="text/javascript">
  $(function(){
    // レンダーモードを設定
    jsPlumb.setRenderMode(jsPlumb.CANVAS);
    // unload処理
    $("body").unload(function(){
      jsPlumb.unload();
    });

    jsPlumb.Defaults.Container = "jsplumb";

    // endpointの作成と配置
    $("#node0").css("left", $("#jsplumb").position().left + 10);
    $("#node0").css("top", $("#jsplumb").position().top + 40);
 var node0 = jsPlumb.addEndpoint("node0", 
      {anchor:"AutoDefault",
        isSource:true,
        isTarget:true
    });

    $("#node1").css("left", $("#jsplumb").position().left + 240);
    $("#node1").css("top", $("#jsplumb").position().top + 140);
 var node1 = jsPlumb.addEndpoint("node1", 
      {anchor:"AutoDefault",
        isSource:true,
        isTarget:true
      });

  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
jsPlumbのホームページ
http://jsplumb.org/jquery/demo.html

2012年4月21日土曜日

grailsとjsPlumbで要素をドラッグ可能にする

grailsとjsPlumbで要素をドラッグ可能にするには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
    // jsPlumbのモジュールを宣言
    jsplumb {
      dependsOn 'jquery-ui'
      resource url: 'js/jquery.jsPlumb-1.3.7-all-min.js', disposition:'head'
    }
}
コマンドでgrails install-plugin jquery-uiを実行してjQuery UI pluginをインストールしておきます。 jquery.jsPlumb-1.3.7-all-min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
  <!-- jsPlumbを使用 -->
  <r:require module="jsplumb"/>
        <r:layoutResources />
 </head>
3. viewに以下のようなコードを追加します。
<!-- jsPlumb -->
<div id="jsplumb" style="width: 300px; height:200px; background-color: #dddddd;">jsPlumb
 <div id="node0" style="width:50px; height:50px; background-color: #7799dd; position: absolute;">
 </div>
 <div id="node1" style="width:50px; height:50px; background-color: #ffff99;position: absolute;">
 </div>
</div>
<script type="text/javascript">
  $(function(){
    // レンダーモードを設定
    jsPlumb.setRenderMode(jsPlumb.CANVAS);
    // unload処理
    $("body").unload(function(){
      jsPlumb.unload();
    });

    jsPlumb.Defaults.Container = "jsplumb";

    // 2つの要素をドラッグ可能にする
    jsPlumb.draggable(["node0", "node1"]);

    // endpointの作成と配置
    $("#node0").css("left", $("#jsplumb").position().left + 10);
    $("#node0").css("top", $("#jsplumb").position().top + 40);
 var node0 = jsPlumb.addEndpoint("node0", 
      {anchor:"AutoDefault",
        // 接続が切れないように設定
        beforeDetach:function(conn) { 
          return false; 
        }
    });
    $("#node1").css("left", $("#jsplumb").position().left + 240);
    $("#node1").css("top", $("#jsplumb").position().top + 140);
 var node1 = jsPlumb.addEndpoint("node1", 
      {anchor:"AutoDefault",
        // 接続が切れないように設定
        beforeDetach:function(conn) { 
          return false; 
        }
      });

    // endpointsを接続
 jsPlumb.connect({
      source:node0, target:node1, 
      paintStyle:{strokeStyle:"#707070", lineWidth:2}
    });

  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
jsPlumbのホームページ
http://jsplumb.org/jquery/demo.html

2012年4月20日金曜日

grailsとjsPlumbでコネクターを点線にする

grailsとjsPlumbでコネクターを点線にするには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
    // jsPlumbのモジュールを宣言
    jsplumb {
      dependsOn 'jquery-ui'
      resource url: 'js/jquery.jsPlumb-1.3.7-all-min.js', disposition:'head'
    }
}
コマンドでgrails install-plugin jquery-uiを実行してjQuery UI pluginをインストールしておきます。 jquery.jsPlumb-1.3.7-all-min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
  <!-- jsPlumbを使用 -->
  <r:require module="jsplumb"/>
        <r:layoutResources />
 </head>
3. viewに以下のようなコードを追加します。
<!-- jsPlumb -->
<div id="jsplumb" style="width: 300px; height:200px; background-color: #dddddd;">jsPlumb
 <div id="node0" style="width:50px; height:50px; background-color: #7799dd; position: absolute;">
 </div>
 <div id="node1" style="width:50px; height:50px; background-color: #ffff99;position: absolute;">
 </div>
</div>
<script type="text/javascript">
  $(function(){
    // レンダーモードを設定(点線の場合はSVGを指定する)
    jsPlumb.setRenderMode(jsPlumb.SVG);
    // unload処理
    $("body").unload(function(){
      jsPlumb.unload();
    });

    jsPlumb.Defaults.Container = "jsplumb";

    // endpointの作成と配置
    $("#node0").css("left", $("#jsplumb").position().left + 10);
    $("#node0").css("top", $("#jsplumb").position().top + 40);
    var node0 = jsPlumb.addEndpoint("node0", {anchor:"AutoDefault"});
    $("#node1").css("left", $("#jsplumb").position().left + 240);
    $("#node1").css("top", $("#jsplumb").position().top + 140);
    var node1 = jsPlumb.addEndpoint("node1", {anchor:"AutoDefault"});

    // endpointsを接続(点線のスタイルはdashstyleを指定する)
    jsPlumb.connect({
      source:node0, target:node1, paintStyle:{strokeStyle:"#707070", lineWidth:2, dashstyle:"4 4"}
    });

  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
jsPlumbのホームページ
http://jsplumb.org/jquery/demo.html

2012年4月19日木曜日

grailsとjsPlumbでコネクター上にラベルを描画する

grailsとjsPlumbでコネクター上にラベルを描画するには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
    // jsPlumbのモジュールを宣言
    jsplumb {
      dependsOn 'jquery-ui'
      resource url: 'js/jquery.jsPlumb-1.3.7-all-min.js', disposition:'head'
    }
}
コマンドでgrails install-plugin jquery-uiを実行してjQuery UI pluginをインストールしておきます。 jquery.jsPlumb-1.3.7-all-min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
  <!-- jsPlumbを使用 -->
  <r:require module="jsplumb"/>
        <r:layoutResources />
 </head>
3. viewに以下のようなコードを追加します。
<!-- jsPlumb -->
<div id="jsplumb" style="width: 300px; height:200px; background-color: #dddddd;">jsPlumb
 <div id="node0" style="width:50px; height:50px; background-color: #7799dd; position: absolute;">
 </div>
 <div id="node1" style="width:50px; height:50px; background-color: #ffff99;position: absolute;">
 </div>
</div>
<script type="text/javascript">
  $(function(){
    // レンダーモードを設定
    jsPlumb.setRenderMode(jsPlumb.CANVAS);
    // unload処理
    $("body").unload(function(){
      jsPlumb.unload();
    });

    jsPlumb.Defaults.Container = "jsplumb";

    // endpointの作成と配置
    $("#node0").css("left", $("#jsplumb").position().left + 10);
    $("#node0").css("top", $("#jsplumb").position().top + 40);
    var node0 = jsPlumb.addEndpoint("node0", {anchor:"AutoDefault", endpoint:["Blank"]});
    $("#node1").css("left", $("#jsplumb").position().left + 240);
    $("#node1").css("top", $("#jsplumb").position().top + 140);
    var node1 = jsPlumb.addEndpoint("node1", {anchor:"AutoDefault", endpoint:["Blank"]});

    // endpointsを接続(overlaysでLabelを指定する)
    jsPlumb.connect({
      source:node0, target:node1, 
      overlays:[["Label", {location:0.5, label:"所有する"}]]
    });

  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
jsPlumbのホームページ
http://jsplumb.org/jquery/demo.html

2012年4月17日火曜日

grailsとjsPlumbでコネクター上に矢印を描画する

grailsとjsPlumbでコネクター上に矢印を描画するには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
    // jsPlumbのモジュールを宣言
    jsplumb {
      dependsOn 'jquery-ui'
      resource url: 'js/jquery.jsPlumb-1.3.7-all-min.js', disposition:'head'
    }
}
コマンドでgrails install-plugin jquery-uiを実行してjQuery UI pluginをインストールしておきます。 jquery.jsPlumb-1.3.7-all-min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
  <!-- jsPlumbを使用 -->
  <r:require module="jsplumb"/>
        <r:layoutResources />
 </head>
3. viewに以下のようなコードを追加します。
<!-- jsPlumb -->
<div id="jsplumb" style="width: 300px; height:200px; background-color: #dddddd;">jsPlumb
 <div id="node0" style="width:50px; height:50px; background-color: #7799dd; position: absolute;">
 </div>
 <div id="node1" style="width:50px; height:50px; background-color: #ffff99;position: absolute;">
 </div>
</div>
<script type="text/javascript">
  $(function(){
    // レンダーモードを設定
    jsPlumb.setRenderMode(jsPlumb.CANVAS);
    // unload処理
    $("body").unload(function(){
      jsPlumb.unload();
    });

    jsPlumb.Defaults.Container = "jsplumb";

    // endpointの作成と配置
    $("#node0").css("left", $("#jsplumb").position().left + 10);
    $("#node0").css("top", $("#jsplumb").position().top + 40);
    var node0 = jsPlumb.addEndpoint("node0", {anchor:"AutoDefault"});
    $("#node1").css("left", $("#jsplumb").position().left + 240);
    $("#node1").css("top", $("#jsplumb").position().top + 140);
    var node1 = jsPlumb.addEndpoint("node1", {anchor:"AutoDefault"});

    // endpointsを接続(overlaysでarrowを指定する)
    jsPlumb.connect({
      source:node0, target:node1, 
      overlays:[["Arrow", {location:0.5, width:50, length:50}]]
    });

  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
jsPlumbのホームページ
http://jsplumb.org/jquery/demo.html

2012年4月16日月曜日

grailsとjsPlumbでendpoint間をState Machine形式で結ぶ

grailsとjsPlumbでendpoint間をState Machine形式で結ぶには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
    // jsPlumbのモジュールを宣言
    jsplumb {
      dependsOn 'jquery-ui'
      resource url: 'js/jquery.jsPlumb-1.3.7-all-min.js', disposition:'head'
    }
}
コマンドでgrails install-plugin jquery-uiを実行してjQuery UI pluginをインストールしておきます。 jquery.jsPlumb-1.3.7-all-min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
  <!-- jsPlumbを使用 -->
  <r:require module="jsplumb"/>
        <r:layoutResources />
 </head>
3. viewに以下のようなコードを追加します。
<!-- jsPlumb -->
<div id="jsplumb" style="width: 300px; height:200px; background-color: #dddddd;">jsPlumb
 <div id="node0" style="width:50px; height:50px; background-color: #7799dd; position: absolute;">
 </div>
 <div id="node1" style="width:50px; height:50px; background-color: #ffff99;position: absolute;">
 </div>
</div>
<script type="text/javascript">
  $(function(){
    // レンダーモードを設定
    jsPlumb.setRenderMode(jsPlumb.CANVAS);
    // unload処理
    $("body").unload(function(){
      jsPlumb.unload();
    });

    jsPlumb.Defaults.Container = "jsplumb";

    // endpointの作成と配置
    $("#node0").css("left", $("#jsplumb").position().left + 10);
    $("#node0").css("top", $("#jsplumb").position().top + 40);
    var node0 = jsPlumb.addEndpoint("node0", {anchor:"AutoDefault"});
    $("#node1").css("left", $("#jsplumb").position().left + 240);
    $("#node1").css("top", $("#jsplumb").position().top + 140);
    var node1 = jsPlumb.addEndpoint("node1", {anchor:"AutoDefault"});

    // endpointsを接続(connectorでStateMachineを指定する)
    jsPlumb.connect({
      source:node0, target:node1, connector:"StateMachine"
    });

  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
jsPlumbのホームページ
http://jsplumb.org/jquery/demo.html

2012年4月15日日曜日

grailsとjsPlumbでendpoint間をフローチャート形式で結ぶ

grailsとjsPlumbでendpoint間をフローチャート形式で結ぶには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
    // jsPlumbのモジュールを宣言
    jsplumb {
      dependsOn 'jquery-ui'
      resource url: 'js/jquery.jsPlumb-1.3.7-all-min.js', disposition:'head'
    }
}
コマンドでgrails install-plugin jquery-uiを実行してjQuery UI pluginをインストールしておきます。 jquery.jsPlumb-1.3.7-all-min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
  <!-- jsPlumbを使用 -->
  <r:require module="jsplumb"/>
        <r:layoutResources />
 </head>
3. viewに以下のようなコードを追加します。
<!-- jsPlumb -->
<div id="jsplumb" style="width: 300px; height:200px; background-color: #dddddd;">jsPlumb
 <div id="node0" style="width:50px; height:50px; background-color: #7799dd; position: absolute;">
 </div>
 <div id="node1" style="width:50px; height:50px; background-color: #ffff99;position: absolute;">
 </div>
</div>
<script type="text/javascript">
  $(function(){
    // レンダーモードを設定
    jsPlumb.setRenderMode(jsPlumb.CANVAS);
    // unload処理
    $("body").unload(function(){
      jsPlumb.unload();
    });

    jsPlumb.Defaults.Container = "jsplumb";

    // endpointの作成と配置
    $("#node0").css("left", $("#jsplumb").position().left + 10);
    $("#node0").css("top", $("#jsplumb").position().top + 40);
    var node0 = jsPlumb.addEndpoint("node0", {anchor:"AutoDefault"});
    $("#node1").css("left", $("#jsplumb").position().left + 240);
    $("#node1").css("top", $("#jsplumb").position().top + 140);
    var node1 = jsPlumb.addEndpoint("node1", {anchor:"AutoDefault"});

    // endpointsを接続(connectorでFlowchartを指定する)
    jsPlumb.connect({
      source:node0, target:node1, connector:"Flowchart"
    });

  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
jsPlumbのホームページ
http://jsplumb.org/jquery/demo.html

2012年4月14日土曜日

grailsとjsPlumbでendpoint間を直線で結ぶ

grailsとjsPlumbでendpoint間を直線で結ぶには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
    // jsPlumbのモジュールを宣言
    jsplumb {
      dependsOn 'jquery-ui'
      resource url: 'js/jquery.jsPlumb-1.3.7-all-min.js', disposition:'head'
    }
}
コマンドでgrails install-plugin jquery-uiを実行してjQuery UI pluginをインストールしておきます。 jquery.jsPlumb-1.3.7-all-min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
  <!-- jsPlumbを使用 -->
  <r:require module="jsplumb"/>
        <r:layoutResources />
 </head>
3. viewに以下のようなコードを追加します。
<!-- jsPlumb -->
<div id="jsplumb" style="width: 300px; height:200px; background-color: #dddddd;">jsPlumb
 <div id="node0" style="width:50px; height:50px; background-color: #7799dd; position: absolute;">
 </div>
 <div id="node1" style="width:50px; height:50px; background-color: #ffff99;position: absolute;">
 </div>
</div>
<script type="text/javascript">
  $(function(){
    // レンダーモードを設定
    jsPlumb.setRenderMode(jsPlumb.CANVAS);
    // unload処理
    $("body").unload(function(){
      jsPlumb.unload();
    });

    jsPlumb.Defaults.Container = "jsplumb";

    // endpointの作成と配置
    $("#node0").css("left", $("#jsplumb").position().left + 10);
    $("#node0").css("top", $("#jsplumb").position().top + 40);
    var node0 = jsPlumb.addEndpoint("node0", {anchor:"AutoDefault"});
    $("#node1").css("left", $("#jsplumb").position().left + 240);
    $("#node1").css("top", $("#jsplumb").position().top + 140);
    var node1 = jsPlumb.addEndpoint("node1", {anchor:"AutoDefault"});

    // endpointsを接続(connectorでStraightを指定する)
    jsPlumb.connect({
      source:node0, target:node1, connector:"Straight"
    });

  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
jsPlumbのホームページ
http://jsplumb.org/jquery/demo.html

2012年4月13日金曜日

grailsとjsPlumbでendpointの位置を指定する

grailsとjsPlumbでendpointの位置を指定するには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
    // jsPlumbのモジュールを宣言
    jsplumb {
      dependsOn 'jquery-ui'
      resource url: 'js/jquery.jsPlumb-1.3.7-all-min.js', disposition:'head'
    }
}
コマンドでgrails install-plugin jquery-uiを実行してjQuery UI pluginをインストールしておきます。 jquery.jsPlumb-1.3.7-all-min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
  <!-- jsPlumbを使用 -->
  <r:require module="jsplumb"/>
        <r:layoutResources />
 </head>
3. viewに以下のようなコードを追加します。
<!-- jsPlumb -->
<div id="jsplumb" style="width: 300px; height:200px; background-color: #dddddd;">jsPlumb
 <div id="node0" style="width:50px; height:50px; background-color: #7799dd; position: absolute;">
 </div>
 <div id="node1" style="width:50px; height:50px; background-color: #ffff99;position: absolute;">
 </div>
</div>
<script type="text/javascript">
  $(function(){
    // レンダーモードを設定
    jsPlumb.setRenderMode(jsPlumb.CANVAS);
    // unload処理
    $("body").unload(function(){
      jsPlumb.unload();
    });

    jsPlumb.Defaults.Container = "jsplumb";

    // endpointの作成と位置の指定
    $("#node0").css("left", $("#jsplumb").position().left + 10);
    $("#node0").css("top", $("#jsplumb").position().top + 40);
    var node0 = jsPlumb.addEndpoint("node0", {anchor:"RightMiddle"});
    $("#node1").css("left", $("#jsplumb").position().left + 240);
    $("#node1").css("top", $("#jsplumb").position().top + 140);
    var node1 = jsPlumb.addEndpoint("node1", {anchor:"TopCenter"});

    // endpointsを接続
    jsPlumb.connect({
      source:node0, target:node1
    });

  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
jsPlumbのホームページ
http://jsplumb.org/jquery/demo.html

2012年4月12日木曜日

grailsとjsPlumbでendpointの色を変更する

grailsとjsPlumbでendpointの色を変更するには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
    // jsPlumbのモジュールを宣言
    jsplumb {
      dependsOn 'jquery-ui'
      resource url: 'js/jquery.jsPlumb-1.3.7-all-min.js', disposition:'head'
    }
}
コマンドでgrails install-plugin jquery-uiを実行してjQuery UI pluginをインストールしておきます。 jquery.jsPlumb-1.3.7-all-min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
  <!-- jsPlumbを使用 -->
  <r:require module="jsplumb"/>
        <r:layoutResources />
 </head>
3. viewに以下のようなコードを追加します。
<!-- jsPlumb -->
<div id="jsplumb" style="width: 300px; height:200px; background-color: #dddddd;">jsPlumb
 <div id="node0" style="width:50px; height:50px; background-color: #7799dd; position: absolute;">
 </div>
 <div id="node1" style="width:50px; height:50px; background-color: #ffff99;position: absolute;">
 </div>
</div>
<script type="text/javascript">
  $(function(){
    // レンダーモードを設定
    jsPlumb.setRenderMode(jsPlumb.CANVAS);
    // unload処理
    $("body").unload(function(){
      jsPlumb.unload();
    });

    jsPlumb.Defaults.Container = "jsplumb";

    // endpointの作成と配置(endpointの色はpaintStyleで指定する)
    $("#node0").css("left", $("#jsplumb").position().left + 10);
    $("#node0").css("top", $("#jsplumb").position().top + 140);
    var node0 = jsPlumb.addEndpoint("node0", {
      endpoint:["Dot", {radius:10}], paintStyle:{strokeStyle:"#e83a25", fillStyle:"#e83a25"}
    });
    $("#node1").css("left", $("#jsplumb").position().left + 240);
    $("#node1").css("top", $("#jsplumb").position().top + 140);
    var node1 = jsPlumb.addEndpoint("node1", {
      endpoint:["Dot", {radius:10}], paintStyle:{strokeStyle:"#e83a25", fillStyle:"#e83a25"}
    });

    // endpointsを接続
    jsPlumb.connect({
      source:node0, target:node1
    });

  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
jsPlumbのホームページ
http://jsplumb.org/jquery/demo.html

2012年4月11日水曜日

grailsとjsPlumbでendpointとして画像を表示する

grailsとjsPlumbでendpointとして画像を表示するには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
    // jsPlumbのモジュールを宣言
    jsplumb {
      dependsOn 'jquery-ui'
      resource url: 'js/jquery.jsPlumb-1.3.7-all-min.js', disposition:'head'
    }
}
コマンドでgrails install-plugin jquery-uiを実行してjQuery UI pluginをインストールしておきます。 jquery.jsPlumb-1.3.7-all-min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
  <!-- jsPlumbを使用 -->
  <r:require module="jsplumb"/>
        <r:layoutResources />
 </head>
3. viewに以下のようなコードを追加します。
<!-- jsPlumb -->
<!-- 画像の表示順を手前に設定 -->
<style type="text/css" media="screen">
.front { z-index:100}
</style>
<div id="jsplumb" style="width: 300px; height:200px; background-color: #dddddd;">jsPlumb
 <div id="node0" style="width:50px; height:50px; background-color: #7799dd; position: absolute;">
 </div>
 <div id="node1" style="width:50px; height:50px; background-color: #ffff99;position: absolute;">
 </div>
</div>
<script type="text/javascript">
  $(function(){
    // レンダーモードを設定
    jsPlumb.setRenderMode(jsPlumb.CANVAS);
    // unload処理
    $("body").unload(function(){
      jsPlumb.unload();
    });

    jsPlumb.Defaults.Container = "jsplumb";

    // endpointの作成と配置(endpointに"Image"を指定すると画像表示になる)
    $("#node0").css("left", $("#jsplumb").position().left + 10);
    $("#node0").css("top", $("#jsplumb").position().top + 140);
    var node0 = jsPlumb.addEndpoint("node0", {endpoint:["Image", {src:"${resource(dir: 'images', file: "star.png")}", cssClass:"front"}]});
    $("#node1").css("left", $("#jsplumb").position().left + 240);
    $("#node1").css("top", $("#jsplumb").position().top + 140);
    var node1 = jsPlumb.addEndpoint("node1", {endpoint:["Image", {src:"${resource(dir: 'images', file: "star.png")}", cssClass:"front"}]});

    // endpointsを接続
    jsPlumb.connect({
      source:node0, target:node1
    });

  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
jsPlumbのホームページ
http://jsplumb.org/jquery/demo.html

2012年4月10日火曜日

grailsとjsPlumbでendpointの形を四角にする

grailsとjsPlumbでendpointを形を四角にするには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
    // jsPlumbのモジュールを宣言
    jsplumb {
      dependsOn 'jquery-ui'
      resource url: 'js/jquery.jsPlumb-1.3.7-all-min.js', disposition:'head'
    }
}
コマンドでgrails install-plugin jquery-uiを実行してjQuery UI pluginをインストールしておきます。 jquery.jsPlumb-1.3.7-all-min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
  <!-- jsPlumbを使用 -->
  <r:require module="jsplumb"/>
        <r:layoutResources />
 </head>
3. viewに以下のようなコードを追加します。
<!-- jsPlumb -->
<div id="jsplumb" style="width: 300px; height:200px; background-color: #dddddd;">jsPlumb
 <div id="node0" style="width:50px; height:50px; background-color: #7799dd; position: absolute;">
 </div>
 <div id="node1" style="width:50px; height:50px; background-color: #ffff99;position: absolute;">
 </div>
</div>
<script type="text/javascript">
  $(function(){
    // レンダーモードを設定
    jsPlumb.setRenderMode(jsPlumb.CANVAS);
    // unload処理
    $("body").unload(function(){
      jsPlumb.unload();
    });

    jsPlumb.Defaults.Container = "jsplumb";

    // endpointの作成と配置(endpointに"Rectangle"を指定すると四角表示になる)
    $("#node0").css("left", $("#jsplumb").position().left + 10);
    $("#node0").css("top", $("#jsplumb").position().top + 140);
    var node0 = jsPlumb.addEndpoint("node0", {endpoint:["Rectangle", {width:20, height:20}]});
    $("#node1").css("left", $("#jsplumb").position().left + 240);
    $("#node1").css("top", $("#jsplumb").position().top + 140);
    var node1 = jsPlumb.addEndpoint("node1", {endpoint:["Rectangle", {width:15, height:15}]});

    // endpointsを接続
    jsPlumb.connect({
      source:node0, target:node1
    });

  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
jsPlumbのホームページ
http://jsplumb.org/jquery/demo.html

2012年4月9日月曜日

grailsとjsPlumbでendpointの形を丸い点にする

grailsとjsPlumbでendpointを形を丸い点にするには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
    // jsPlumbのモジュールを宣言
    jsplumb {
      dependsOn 'jquery-ui'
      resource url: 'js/jquery.jsPlumb-1.3.7-all-min.js', disposition:'head'
    }
}
コマンドでgrails install-plugin jquery-uiを実行してjQuery UI pluginをインストールしておきます。 jquery.jsPlumb-1.3.7-all-min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。
  <g:layoutHead/>
  <!-- jsPlumbを使用 -->
  <r:require module="jsplumb"/>
        <r:layoutResources />
 </head>
3. viewに以下のようなコードを追加します。
<!-- jsPlumb -->
<div id="jsplumb" style="width: 300px; height:200px; background-color: #dddddd;">jsPlumb
 <div id="node0" style="width:50px; height:50px; background-color: #7799dd; position: absolute;">
 </div>
 <div id="node1" style="width:50px; height:50px; background-color: #ffff99;position: absolute;">
 </div>
</div>
<script type="text/javascript">
  $(function(){
    // レンダーモードを設定
    jsPlumb.setRenderMode(jsPlumb.CANVAS);
    // unload処理
    $("body").unload(function(){
      jsPlumb.unload();
    });

    jsPlumb.Defaults.Container = "jsplumb";

    // endpointの作成と配置(endpointに"Dot"を指定すると点表示になる)
    $("#node0").css("left", $("#jsplumb").position().left + 10);
    $("#node0").css("top", $("#jsplumb").position().top + 140);
    var node0 = jsPlumb.addEndpoint("node0", {endpoint:["Dot", {radius:7}]});
    $("#node1").css("left", $("#jsplumb").position().left + 240);
    $("#node1").css("top", $("#jsplumb").position().top + 140);
    var node1 = jsPlumb.addEndpoint("node1", {endpoint:["Dot", {radius:14}]});

    // endpointsを接続
    jsPlumb.connect({
      source:node0, target:node1
    });

  });
</script>
出力画面

動作環境
grails 2.0.1

関連情報
jsPlumbのホームページ
http://jsplumb.org/jquery/demo.html