001/* 002 * Copyright (c) 2009 The openGion Project. 003 * 004 * Licensed under the Apache License, Version 2.0 (the "License"); 005 * you may not use this file except in compliance with the License. 006 * You may obtain a copy of the License at 007 * 008 * http://www.apache.org/licenses/LICENSE-2.0 009 * 010 * Unless required by applicable law or agreed to in writing, software 011 * distributed under the License is distributed on an "AS IS" BASIS, 012 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 013 * either express or implied. See the License for the specific language 014 * governing permissions and limitations under the License. 015 */ 016package org.opengion.hayabusa.taglib; 017 018import org.opengion.hayabusa.common.HybsSystem; 019import org.opengion.fukurou.util.ToString; 020import org.opengion.fukurou.util.TagBuffer; 021 022import static org.opengion.fukurou.util.StringUtil.nval; 023 024/** 025 * jQueryのdraggableを使用したオブジェクトの移動を行う、View を設定します。 026 * 027 * viewFormType="CustomData" の BODY 部に記述された、class="dragDiv"(固定) を持った、 028 * DIV要素をドラッグするための、各種情報を提供します。 029 * dragViewタグは、view タグの上位に記述し、class="dragView"(固定)のレイアウトのCSS とともに、 030 * 必要な情報を出力して、JQeury の引数が受け取れる形の DIVタグを生成します。 031 * また、オブジェクトの移動は、jQueryの ajax により、リアルタイムに JSP を呼び出すことで、 032 * データベースの書き込みをサポートします。 033 * 034 * og:dragView : viewタグの上位に位置して、cssと、パラメータ用のdivタグを生成します。 035 * og:dragDiv : viewタグの tbody に書き込む、簡易的な文字列生成用のタグです。 036 * common/dragSelect.jsp : GE18 の select文(scope="session") 037 * common/dragUpdate.jsp : jQueryからドラッグ終了時点でajxaで呼び出される、標準のjspファイル 038 * この中で、GE18(位置情報管理テーブル)に位置情報が書き込まれます。 039 * common/jquery/dragView.js :jQueryのdraggable 本体。$(function(){$(".dragDiv").draggable({・・・・})}); 040 * 041 * dragBox.js と、dragUpdate.jsp を独自に修正すれば、自前のテーブルに位置情報を書き込むことも可能です。 042 * 043 * @og.formSample 044 * ●形式:<og:dragView><og:view ・・・ /></og:dragView> 045 * ●body:あり(EVAL_BODY_INCLUDE:BODYをインクルードし、{@XXXX} は解析しません) 046 * 047 * ●Tag定義: 048 * <og:dragView 049 * url 【TAG】ドラッグ後に呼び出す jspファイルのアドレス(初期値:/jsp/common/dragUpdate.jsp) 050 * grid 【TAG】ドラッグ時にオブジェクトが動けるグリッドを指定します(初期値:10,10) 051 * width 【CSS】Viewを囲うdivのCSS(dragView)のwidth属性(初期値:100%) 052 * height 【CSS】Viewを囲うdivのCSS(dragView)のheight属性(初期値:100%) 053 * image 【CSS】bgImage(background-image属性)のurlの引数の値 054 * background 【CSS】Viewを囲うdivのCSS(dragView)のbackground属性 055 * bgColor 【CSS】Viewを囲うdivのCSS(dragView)のbackground-color属性 056 * bgSize 【CSS】Viewを囲うdivのCSS(dragView)のbackground-size属性(初期値:800px) 057 * bgImage 【CSS】Viewを囲うdivのCSS(dragView)のbackground-image属性 058 * bgRepeat 【CSS】Viewを囲うdivのCSS(dragView)のbackground-repeat属性(初期値:no-repeat) 059 * bgPosition 【CSS】Viewを囲うdivのCSS(dragView)のbackground-position属性 060 * zoom 【CSS】ドラッグ要素のCSS(dragDiv)に適用する拡大、縮小の倍率 061 * id 【HTML】Viewを囲うdiv要素に対して固有の名前(id)をつける場合に設定します 062 * style 【HTML】Viewを囲うdiv要素に適用させるスタイルシート(style)を設定します 063 * optionAttributes 【TAG】Viewを囲うdiv要素にそのまま追記する属性 064 * caseKey 【TAG】このタグ自体を利用するかどうかの条件キーを指定します(初期値:null) 065 * caseVal 【TAG】このタグ自体を利用するかどうかの条件値を指定します(初期値:null) 066 * caseNN 【TAG】指定の値が、null/ゼロ文字列 でない場合(Not Null=NN)は、このタグは使用されます(初期値:判定しない) 067 * caseNull 【TAG】指定の値が、null/ゼロ文字列 の場合は、このタグは使用されます(初期値:判定しない) 068 * caseIf 【TAG】指定の値が、true/TRUE文字列の場合は、このタグは使用されます(初期値:判定しない) 069 * debug 【TAG】デバッグ情報を出力するかどうか[true/false]を指定します(初期値:false) 070 * > ... Body ... 071 * </og:dragView> 072 * 073 * ●使用例 074 * ※ Select ・・・ from GE18 A {@JOIN_SQL} where ・・・ をincludeします。 075 * <og:value key="JOIN_SQL" > 076 * left outer join DBXX B on A.LOC_GRP=B.GRP and A.LOC_KEY=B.KEY 077 * </og:value> 078 * <jsp:directive.include file="/jsp/common/dragSelect.jsp" /> 079 * 080 * ※ カラムに必要なマーカーを追加します。ここでは、ICON にイメージ画像を設定していますが、viewのBODY部でもかまいません。 081 * <og:viewMarker command="{@command}"> 082 * <og:columnMarker column="ICON"> 083 * <img src="image/[LOC_GRP]/[ICON]" width="50px" title="[LABEL_NAME]" /> 084 * </og:columnMarker> 085 * </og:viewMarker> 086 * 087 * ※ dragView のなかに、viewタグで、viewFormType="CustomData" のデータを作成します。 088 * <og:dragView> 089 * <og:view 090 * viewFormType = "CustomData" 091 * command = "{@command}" 092 * writable = "false" 093 * useScrollBar = "false" 094 * numberType = "delete" 095 * bgColorCycle = "1" 096 * useHilightRow = "false" 097 * > 098 * ※ tbody のなかの、dibタグが、ドラッグ可能になり、left:[LOC_COL]px; top:[LOC_ROW]px; が位置になります。 099 * <og:tbody rowspan="1" > 100 * <div class="dragDiv" id="[UNIQ]" style="left:[LOC_COL]px; top:[LOC_ROW]px;" >[ICON]</div> 101 * </og:tbody> 102 * </og:view> 103 * </og:dragView> 104 * 105 * ●使用例 106 * ※ tbody の中を、og:dragDiv にした場合。 107 * <og:dragView> 108 * <og:view 109 * viewFormType = "CustomData" 110 * ・・・ 111 * > 112 * <og:tbody rowspan="1" > 113 * <og:dragDiv >[ICON]</og:dragDiv> 114 * </og:tbody> 115 * </og:view> 116 * </og:dragView> 117 * 118 * @og.rev 7.0.1.0 (2018/10/15) 新規作成 119 * @og.group 画面部品 120 * 121 * @version 7.0 122 * @author Kazuhiko Hasegawa 123 * @since JDK11.0, 124 */ 125public class DragViewTag extends CommonTagSupport { 126 /** このプログラムのVERSION文字列を設定します。 {@value} */ 127 private static final String VERSION = "7.0.1.0 (2018/10/15)" ; 128 private static final long serialVersionUID = 701020181015L ; 129 130 private static final String CSS_START = "<style type=\"text/css\">" ; 131 private static final String CSS_END = "</style>" ; 132 133 private String sysJsp = HybsSystem.sys( "JSP" ); 134 135 private String url = sysJsp + "/common/dragUpdate.jsp"; // dragView の div要素として作成します。 136 private String grid = "10,10" ; // dragView の div要素として作成します。 137 138 private String width = "100%" ; 139 private String height = "100%" ; 140 private String image ; // background-image属性の、url( 'XXXX' ) の 中身になります。 141 private String background ; // background属性 142 private String bgColor ; // background-color属性 143 private String bgSize = "800px" ; // background-size属性 144 private String bgImage ; // background-image属性 145 private String bgRepeat = "no-repeat" ; // background-repeat属性 146 private String bgPosition ; // background-position属性 147 private String zoom ; // 拡大、縮小の倍率 148 // id , style は、CommonTagSupport で定義され、get(キー) メソッドで取得可能です。 149 150 /** 151 * デフォルトコンストラクター 152 * 153 * @og.rev 7.0.1.0 (2018/10/15) 新規作成 154 */ 155 public DragViewTag() { super(); } // これも、自動的に呼ばれるが、空のメソッドを作成すると警告されるので、明示的にしておきます。 156 157 /** 158 * Taglibの開始タグが見つかったときに処理する doStartTag() を オーバーライドします。 159 * 160 * @og.rev 7.0.1.0 (2018/10/15) 新規作成 161 * 162 * @return 後続処理の指示( EVAL_BODY_INCLUDE ) 163 */ 164 @Override 165 public int doStartTag() { 166 if( useTag() ) { 167 jspPrint( makeStyleAndDiv() ); // style属性と、開始の divタグを出力します。 168 return EVAL_BODY_INCLUDE ; // Body インクルード( extends TagSupport 時) 169 } 170 return SKIP_BODY ; // Body を評価しない 171 } 172 173 /** 174 * Taglibの終了タグが見つかったときに処理する doEndTag() を オーバーライドします。 175 * 176 * @og.rev 7.0.1.0 (2018/10/15) 新規作成 177 * 178 * @return 後続処理の指示 179 */ 180 @Override 181 public int doEndTag() { 182 debugPrint(); 183 if( useTag() ) { 184 jspPrint( "</div>" ); // 最後の divタグを出力します。 185 } 186 187 return EVAL_PAGE ; // ページの残りを評価する。( extends TagSupport 時) 188 } 189 190 /** 191 * タグリブオブジェクトをリリースします。 192 * キャッシュされて再利用されるので、フィールドの初期設定を行います。 193 * 194 * @og.rev 7.0.1.0 (2018/10/15) 新規作成 195 */ 196 @Override 197 protected void release2() { 198 super.release2(); 199 sysJsp = HybsSystem.sys( "JSP" ); 200 url = sysJsp + "/common/dragUpdate.jsp"; 201 grid = "10,10" ; 202 width = "100%" ; 203 height = "100%" ; 204 image = null ; // url( 'image/{@LOC_GRP}.png' ) の 中身になります。 205 background = null ; 206 bgColor = null ; 207 bgSize = "800px" ; 208 bgImage = null ; 209 bgRepeat = "no-repeat" ; 210 bgPosition = null ; 211 zoom = null ; 212 } 213 214 /** 215 * style属性と、開始の divタグを生成します。 216 * 217 * ドラッグ処理に必要な、CSS 情報と、view を囲う DIV要素の開始タグを出力します。 218 * 219 * @return style属性と、開始の divタグ 220 */ 221 private String makeStyleAndDiv() { 222 final String trzoom = zoom == null ? null : "scale(" + zoom + ")" ; 223 final String origin = zoom == null ? null : "top left" ; 224 225 // CSS 作成 226 final TagBuffer tagBuf = new TagBuffer() 227 .addBuffer( CSS_START ) 228 .startCss( ".dragDiv" ) 229 .add( "position" , "absolute" ) 230 .add( "margin" , "0px" ) 231 .add( "padding" , "0px" ) 232 .add( "zoom" , zoom ) // null の場合、登録されない 233 .add( "transform" , trzoom ) // 同上 234 .add( "transform-origin" , origin ) // 同上 235 .add( "-moz-transform" , trzoom ) // 同上 236 .add( "-moz-transform-origin" , origin ) // 同上 237 .make() // ここで、一旦完成 238 .startCss( ".dragView" ) 239 .add( "width" , width ) 240 .add( "height" , height ) 241 .add( "background" , background ) 242 .add( "background-color" , bgColor ) 243 .add( "background-size" , bgSize ) 244 .add( "background-image" , nval( bgImage , image ) ) // bgImage があれば優先されます。 245 .add( "background-repeat" , bgRepeat ) 246 .add( "background-position" , bgPosition ) 247 .make() // ここで、一旦完成 248 .addBuffer( CSS_END ) 249 .startTag( "div" ) 250 .add( "class" , "dragView" ) 251 .add( "url" , url ) 252 .add( "grid" , grid ) 253 .addOptions( get( "optionAttributes" ) ) ; // id,style など 254 255 return tagBuf.toBefore(); // <div ・・・・ > まで先行して作成します。 256 } 257 258 /** 259 * 【TAG】ドラッグ後に呼び出す jspファイルのアドレス(初期値:/jsp/common/dragUpdate.jsp)。 260 * 261 * @og.tag 262 * ドラッグ後に ajax で、jspファイルを呼び出します。 263 * 初期値は、/jsp/common/dragUpdate.jsp に設定されており、GE18 テーブルに状態を書き込みます。 264 * 265 * @param url ドラッグ後に呼び出す jspファイル 266 */ 267 public void setUrl( final String url ) { 268 this.url = nval( getRequestParameter( url ),this.url ); 269 } 270 271 /** 272 * 【TAG】ドラッグ時にオブジェクトが動けるグリッドを指定します(初期値:10,10)。 273 * 274 * @og.tag 275 * ドラッグ時に、オブジェクトが、このグリッド単位で移動します。 276 * ある程度、グリッドで制約をかけると、縦や横に、きれいに配置させることができます。 277 * 1,1 にすると、1ピクセル毎に滑らかに動きます。 278 * また、10,0 を設定すると、x軸(横方向)には、10px単位で動きますが、y軸(縦方向)には動きません。 279 * 初期値は、10,10 で、10px単位に、動きます。 280 * 281 * @param grid ドラッグ時にオブジェクトが動けるグリッド 282 */ 283 public void setGrid( final String grid ) { 284 this.grid = nval( getRequestParameter( grid ),this.grid ); 285 } 286 287 /** 288 * 【CSS】Viewを囲うdivのCSS(dragView)のwidth属性(初期値:100%)。 289 * 290 * @og.tag 291 * div要素のwidth属性を指定します。 292 * これは、.dragView セレクタの style に書き込まれます。 293 * 294 * 初期値は、100% です。 295 * 296 * @param width width属性(初期値:100%) 297 */ 298 public void setWidth( final String width ) { 299 this.width = nval( getRequestParameter( width ),this.width ); 300 } 301 302 /** 303 * 【CSS】Viewを囲うdivのCSS(dragView)のheight属性(初期値:100%)。 304 * 305 * @og.tag 306 * div要素のheight属性を指定します。 307 * これは、.dragView セレクタの style に書き込まれます。 308 * 309 * 初期値は、100% です。 310 * 311 * @param height height属性(初期値:100%) 312 */ 313 public void setHeight( final String height ) { 314 this.height = nval( getRequestParameter( height ),this.height ); 315 } 316 317 /** 318 * 【CSS】Viewを囲うdivのCSS(dragView)のbackground-image属性のurlの引数の値。 319 * 320 * @og.tag 321 * div要素のbackground-image属性を簡易的に指定するのに使用します。 322 * background-image属性は、url( 'image/SAMPLE.png' ) のような書き方になりますが 323 * ここで指定するのは、'image/SAMPLE.png' の部分です。 324 * シングルクオートは、タグ内で付けますので、引数につける必要はありません。 325 * background-image と同時に指定された場合は、background-image が優先されます。 326 * 327 * 初期値は、ありません。 328 * 329 * @param image background-image属性のurlの引数の値 330 * @see #setBgImage(String) 331 */ 332 public void setImage( final String image ) { 333 final String img = nval( getRequestParameter( image ),this.image ); 334 335 if( img != null ) { 336 this.image = "url('" + img + "')" ; 337 } 338 } 339 340 /** 341 * 【CSS】Viewを囲うdivのCSS(dragView)のbackground属性。 342 * 343 * @og.tag 344 * div要素のbackground属性を指定します。 345 * 例:background = "top left/800px url( 'image/{@LOC_GRP}.png' ) no-repeat;" 346 * これは、.dragView セレクタの style に書き込まれます。 347 * 348 * 初期値は、ありません。 349 * 350 * @param background background属性 351 */ 352 public void setBackground( final String background ) { 353 this.background = nval( getRequestParameter( background ),this.background ); 354 } 355 356 /** 357 * 【CSS】Viewを囲うdivのCSS(dragView)のbackground-color属性。 358 * 359 * @og.tag 360 * div要素のbackground-color属性を指定します。 361 * これは、.dragView セレクタの style に書き込まれます。 362 * 363 * 初期値は、ありません。 364 * 365 * @param bgColor background-color属性 366 */ 367 public void setBgColor( final String bgColor ) { 368 this.bgColor = nval( getRequestParameter( bgColor ),this.bgColor ); 369 } 370 371 /** 372 * 【CSS】Viewを囲うdivのCSS(dragView)のbackground-size属性(初期値:800px)。 373 * 374 * @og.tag 375 * div要素のbackground-size属性を指定します。 376 * これは、.dragView セレクタの style に書き込まれます。 377 * 378 * 初期値:800px。 379 * 380 * @param bgSize background-size属性 381 */ 382 public void setBgSize( final String bgSize ) { 383 this.bgSize = nval( getRequestParameter( bgSize ),this.bgSize ); 384 } 385 386 /** 387 * 【CSS】Viewを囲うdivのCSS(dragView)のbackground-image属性。 388 * 389 * @og.tag 390 * div要素のbackground-image属性を指定します。 391 * background-image属性は、url( 'image/SAMPLE.png' ) のような書き方になります。 392 * これは、.dragView セレクタの style に書き込まれます。 393 * 394 * 初期値は、ありません。 395 * 396 * @param bgImage background-image属性 397 * @see #setImage(String) 398 */ 399 public void setBgImage( final String bgImage ) { 400 this.bgImage = nval( getRequestParameter( bgImage ),this.bgImage ); 401 } 402 403 /** 404 * 【CSS】Viewを囲うdivのCSS(dragView)のbackground-repeat属性(初期値:no-repeat)。 405 * 406 * @og.tag 407 * div要素のbackground-repeat属性を指定します。 408 * これは、.dragView セレクタの style に書き込まれます。 409 * 410 * 初期値:no-repeat。 411 * 412 * @param bgRepeat background-repeat属性 413 */ 414 public void setBgRepeat( final String bgRepeat ) { 415 this.bgRepeat = nval( getRequestParameter( bgRepeat ),this.bgRepeat ); 416 } 417 418 /** 419 * 【CSS】Viewを囲うdivのCSS(dragView)のbackground-position属性。 420 * 421 * @og.tag 422 * div要素のbackground-position属性を指定します。 423 * これは、.dragView セレクタの style に書き込まれます。 424 * 425 * 初期値は、ありません。 426 * 427 * @param bgPosition background-position属性 428 */ 429 public void setBgPosition( final String bgPosition ) { 430 this.bgPosition = nval( getRequestParameter( bgPosition ),this.bgPosition ); 431 } 432 433 /** 434 * 【CSS】ドラッグ要素のCSS(dragDiv)に適用する拡大、縮小の倍率。 435 * 436 * @og.tag 437 * 要素を拡大、縮小するCSSを、dragDiv に書き込みます。 438 * 1.0 が標準で、1以下が縮小、1以上が拡大になります。 439 * 440 * zoom : {@ZOOM}; 441 * transform : scale({@ZOOM}); 442 * transform-origin : top left; 443 * -moz-transform : scale({@ZOOM}); 444 * -moz-transform-origin : top left; 445 * 446 * 初期値は、ありません。 447 * 448 * @param zoom ドラッグ要素の拡大、縮小の倍率 449 */ 450 public void setZoom( final String zoom ) { 451 this.zoom = nval( getRequestParameter( zoom ),this.zoom ); 452 } 453 454 /** 455 * 【TAG】JavaScript などの HTML基本タグ以外の属性を、そのままタグとして使用します。 456 * 457 * @og.tag 458 * JavaScript などの HTML基本タグ以外の属性を、そのままタグとして使用します。 459 * 460 * @param optionAttributes オプション属性 461 */ 462 public void setOptionAttributes( final String optionAttributes ) { 463 final String optAttri = getRequestParameter( optionAttributes ); 464 if( optAttri != null && optAttri.length() > 0 ) { 465 set( "optionAttributes",optAttri ); 466 } 467 } 468 469 /** 470 * このオブジェクトの文字列表現を返します。 471 * 基本的にデバッグ目的に使用します。 472 * 473 * @return このクラスの文字列表現 474 * @og.rtnNotNull 475 */ 476 @Override 477 public String toString() { 478 return ToString.title( this.getClass().getName() ) 479 .println( "VERSION" ,VERSION ) 480 .println( "url" ,url ) 481 .println( "grid" ,grid ) 482 .println( "width" ,width ) 483 .println( "height" ,height ) 484 .println( "image" ,image ) // url文字列と合成済み 485 .println( "background" ,background ) 486 .println( "bgColor" ,bgColor ) 487 .println( "bgSize" ,bgSize ) 488 .println( "bgImage" ,bgImage ) 489 .println( "bgRepeat" ,bgRepeat ) 490 .println( "bgPosition" ,bgPosition ) 491 .println( "id" ,get("id" ) ) 492 .println( "style" ,get("style" ) ) 493 .println( "Other..." ,getAttributes().getAttribute() ) 494 .fixForm().toString() ; 495 } 496}