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)をつける場合に設定します。7.2.6.2 (2020/07/29) 削除 062 * style (未使用) 【HTML】Viewを囲うdiv要素に適用させるスタイルシート(style)を設定します。7.2.6.2 (2020/07/29) 削除 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 // 8.1.0.0 (2021/12/28) HTML5 準拠に見直し(type="text/css" 不要) 131// private static final String CSS_START = "<style type=\"text/css\">" ; 132 private static final String CSS_START = "<style>" ; 133 private static final String CSS_END = "</style>" ; 134 135 private String sysJsp = HybsSystem.sys( "JSP" ); 136 137 private String url = sysJsp + "/common/dragUpdate.jsp"; // dragView の div要素として作成します。 138 private String grid = "10,10" ; // dragView の div要素として作成します。 139 140 private String width = "100%" ; 141 private String height = "100%" ; 142 private String image ; // background-image属性の、url( 'XXXX' ) の 中身になります。 143 private String background ; // background属性 144 private String bgColor ; // background-color属性 145 private String bgSize = "800px" ; // background-size属性 146 private String bgImage ; // background-image属性 147 private String bgRepeat = "no-repeat" ; // background-repeat属性 148 private String bgPosition ; // background-position属性 149 private String zoom ; // 拡大、縮小の倍率 150 // id , style は、CommonTagSupport で定義され、get(キー) メソッドで取得可能です。 151 152 /** 153 * デフォルトコンストラクター 154 * 155 * @og.rev 7.0.1.0 (2018/10/15) 新規作成 156 */ 157 public DragViewTag() { super(); } // これも、自動的に呼ばれるが、空のメソッドを作成すると警告されるので、明示的にしておきます。 158 159 /** 160 * Taglibの開始タグが見つかったときに処理する doStartTag() を オーバーライドします。 161 * 162 * @og.rev 7.0.1.0 (2018/10/15) 新規作成 163 * 164 * @return 後続処理の指示( EVAL_BODY_INCLUDE ) 165 */ 166 @Override 167 public int doStartTag() { 168 if( useTag() ) { 169 jspPrint( makeStyleAndDiv() ); // style属性と、開始の divタグを出力します。 170 return EVAL_BODY_INCLUDE ; // Body インクルード( extends TagSupport 時) 171 } 172 return SKIP_BODY ; // Body を評価しない 173 } 174 175 /** 176 * Taglibの終了タグが見つかったときに処理する doEndTag() を オーバーライドします。 177 * 178 * @og.rev 7.0.1.0 (2018/10/15) 新規作成 179 * 180 * @return 後続処理の指示 181 */ 182 @Override 183 public int doEndTag() { 184 debugPrint(); 185 if( useTag() ) { 186 jspPrint( "</div>" ); // 最後の divタグを出力します。 187 } 188 189 return EVAL_PAGE ; // ページの残りを評価する。( extends TagSupport 時) 190 } 191 192 /** 193 * タグリブオブジェクトをリリースします。 194 * キャッシュされて再利用されるので、フィールドの初期設定を行います。 195 * 196 * @og.rev 7.0.1.0 (2018/10/15) 新規作成 197 */ 198 @Override 199 protected void release2() { 200 super.release2(); 201 sysJsp = HybsSystem.sys( "JSP" ); 202 url = sysJsp + "/common/dragUpdate.jsp"; 203 grid = "10,10" ; 204 width = "100%" ; 205 height = "100%" ; 206 image = null ; // url( 'image/{@LOC_GRP}.png' ) の 中身になります。 207 background = null ; 208 bgColor = null ; 209 bgSize = "800px" ; 210 bgImage = null ; 211 bgRepeat = "no-repeat" ; 212 bgPosition = null ; 213 zoom = null ; 214 } 215 216 /** 217 * style属性と、開始の divタグを生成します。 218 * 219 * ドラッグ処理に必要な、CSS 情報と、view を囲う DIV要素の開始タグを出力します。 220 * 221 * @return style属性と、開始の divタグ 222 */ 223 private String makeStyleAndDiv() { 224 final String trzoom = zoom == null ? null : "scale(" + zoom + ")" ; 225 final String origin = zoom == null ? null : "top left" ; 226 227 // CSS 作成 228 final TagBuffer tagBuf = new TagBuffer() 229 .addBuffer( CSS_START ) 230 .startCss( ".dragDiv" ) 231 .add( "position" , "absolute" ) 232 .add( "margin" , "0px" ) 233 .add( "padding" , "0px" ) 234 .add( "zoom" , zoom ) // null の場合、登録されない 235 .add( "transform" , trzoom ) // 同上 236 .add( "transform-origin" , origin ) // 同上 237 .add( "-moz-transform" , trzoom ) // 同上 238 .add( "-moz-transform-origin" , origin ) // 同上 239 .make() // ここで、一旦完成 240 .startCss( ".dragView" ) 241 .add( "width" , width ) 242 .add( "height" , height ) 243 .add( "background" , background ) 244 .add( "background-color" , bgColor ) 245 .add( "background-size" , bgSize ) 246 .add( "background-image" , nval( bgImage , image ) ) // bgImage があれば優先されます。 247 .add( "background-repeat" , bgRepeat ) 248 .add( "background-position" , bgPosition ) 249 .make() // ここで、一旦完成 250 .addBuffer( CSS_END ) 251 .startTag( "div" ) 252 .add( "class" , "dragView" ) 253 .add( "url" , url ) 254 .add( "grid" , grid ) 255 .addOptions( get( "optionAttributes" ) ) ; // id,style など 256 257 return tagBuf.toBefore(); // <div ・・・・ > まで先行して作成します。 258 } 259 260 /** 261 * 【TAG】ドラッグ後に呼び出す jspファイルのアドレス(初期値:/jsp/common/dragUpdate.jsp)。 262 * 263 * @og.tag 264 * ドラッグ後に ajax で、jspファイルを呼び出します。 265 * 初期値は、/jsp/common/dragUpdate.jsp に設定されており、GE18 テーブルに状態を書き込みます。 266 * 267 * @param url ドラッグ後に呼び出す jspファイル 268 */ 269 public void setUrl( final String url ) { 270 this.url = nval( getRequestParameter( url ),this.url ); 271 } 272 273 /** 274 * 【TAG】ドラッグ時にオブジェクトが動けるグリッドを指定します(初期値:10,10)。 275 * 276 * @og.tag 277 * ドラッグ時に、オブジェクトが、このグリッド単位で移動します。 278 * ある程度、グリッドで制約をかけると、縦や横に、きれいに配置させることができます。 279 * 1,1 にすると、1ピクセル毎に滑らかに動きます。 280 * また、10,0 を設定すると、x軸(横方向)には、10px単位で動きますが、y軸(縦方向)には動きません。 281 * 初期値は、10,10 で、10px単位に、動きます。 282 * 283 * @param grid ドラッグ時にオブジェクトが動けるグリッド 284 */ 285 public void setGrid( final String grid ) { 286 this.grid = nval( getRequestParameter( grid ),this.grid ); 287 } 288 289 /** 290 * 【CSS】Viewを囲うdivのCSS(dragView)のwidth属性(初期値:100%)。 291 * 292 * @og.tag 293 * div要素のwidth属性を指定します。 294 * これは、.dragView セレクタの style に書き込まれます。 295 * 296 * 初期値は、100% です。 297 * 298 * @param width width属性(初期値:100%) 299 */ 300 public void setWidth( final String width ) { 301 this.width = nval( getRequestParameter( width ),this.width ); 302 } 303 304 /** 305 * 【CSS】Viewを囲うdivのCSS(dragView)のheight属性(初期値:100%)。 306 * 307 * @og.tag 308 * div要素のheight属性を指定します。 309 * これは、.dragView セレクタの style に書き込まれます。 310 * 311 * 初期値は、100% です。 312 * 313 * @param height height属性(初期値:100%) 314 */ 315 public void setHeight( final String height ) { 316 this.height = nval( getRequestParameter( height ),this.height ); 317 } 318 319 /** 320 * 【CSS】Viewを囲うdivのCSS(dragView)のbackground-image属性のurlの引数の値。 321 * 322 * @og.tag 323 * div要素のbackground-image属性を簡易的に指定するのに使用します。 324 * background-image属性は、url( 'image/SAMPLE.png' ) のような書き方になりますが 325 * ここで指定するのは、'image/SAMPLE.png' の部分です。 326 * シングルクオートは、タグ内で付けますので、引数につける必要はありません。 327 * background-image と同時に指定された場合は、background-image が優先されます。 328 * 329 * 初期値は、ありません。 330 * 331 * @param image background-image属性のurlの引数の値 332 * @see #setBgImage(String) 333 */ 334 public void setImage( final String image ) { 335 final String img = nval( getRequestParameter( image ),this.image ); 336 337 if( img != null ) { 338 this.image = "url('" + img + "')" ; 339 } 340 } 341 342 /** 343 * 【CSS】Viewを囲うdivのCSS(dragView)のbackground属性。 344 * 345 * @og.tag 346 * div要素のbackground属性を指定します。 347 * 例:background = "top left/800px url( 'image/{@LOC_GRP}.png' ) no-repeat;" 348 * これは、.dragView セレクタの style に書き込まれます。 349 * 350 * 初期値は、ありません。 351 * 352 * @param background background属性 353 */ 354 public void setBackground( final String background ) { 355 this.background = nval( getRequestParameter( background ),this.background ); 356 } 357 358 /** 359 * 【CSS】Viewを囲うdivのCSS(dragView)のbackground-color属性。 360 * 361 * @og.tag 362 * div要素のbackground-color属性を指定します。 363 * これは、.dragView セレクタの style に書き込まれます。 364 * 365 * 初期値は、ありません。 366 * 367 * @param bgColor background-color属性 368 */ 369 public void setBgColor( final String bgColor ) { 370 this.bgColor = nval( getRequestParameter( bgColor ),this.bgColor ); 371 } 372 373 /** 374 * 【CSS】Viewを囲うdivのCSS(dragView)のbackground-size属性(初期値:800px)。 375 * 376 * @og.tag 377 * div要素のbackground-size属性を指定します。 378 * これは、.dragView セレクタの style に書き込まれます。 379 * 380 * 初期値:800px。 381 * 382 * @param bgSize background-size属性 383 */ 384 public void setBgSize( final String bgSize ) { 385 this.bgSize = nval( getRequestParameter( bgSize ),this.bgSize ); 386 } 387 388 /** 389 * 【CSS】Viewを囲うdivのCSS(dragView)のbackground-image属性。 390 * 391 * @og.tag 392 * div要素のbackground-image属性を指定します。 393 * background-image属性は、url( 'image/SAMPLE.png' ) のような書き方になります。 394 * これは、.dragView セレクタの style に書き込まれます。 395 * 396 * 初期値は、ありません。 397 * 398 * @param bgImage background-image属性 399 * @see #setImage(String) 400 */ 401 public void setBgImage( final String bgImage ) { 402 this.bgImage = nval( getRequestParameter( bgImage ),this.bgImage ); 403 } 404 405 /** 406 * 【CSS】Viewを囲うdivのCSS(dragView)のbackground-repeat属性(初期値:no-repeat)。 407 * 408 * @og.tag 409 * div要素のbackground-repeat属性を指定します。 410 * これは、.dragView セレクタの style に書き込まれます。 411 * 412 * 初期値:no-repeat。 413 * 414 * @param bgRepeat background-repeat属性 415 */ 416 public void setBgRepeat( final String bgRepeat ) { 417 this.bgRepeat = nval( getRequestParameter( bgRepeat ),this.bgRepeat ); 418 } 419 420 /** 421 * 【CSS】Viewを囲うdivのCSS(dragView)のbackground-position属性。 422 * 423 * @og.tag 424 * div要素のbackground-position属性を指定します。 425 * これは、.dragView セレクタの style に書き込まれます。 426 * 427 * 初期値は、ありません。 428 * 429 * @param bgPosition background-position属性 430 */ 431 public void setBgPosition( final String bgPosition ) { 432 this.bgPosition = nval( getRequestParameter( bgPosition ),this.bgPosition ); 433 } 434 435 /** 436 * 【CSS】ドラッグ要素のCSS(dragDiv)に適用する拡大、縮小の倍率。 437 * 438 * @og.tag 439 * 要素を拡大、縮小するCSSを、dragDiv に書き込みます。 440 * 1.0 が標準で、1以下が縮小、1以上が拡大になります。 441 * 442 * zoom : {@ZOOM}; 443 * transform : scale({@ZOOM}); 444 * transform-origin : top left; 445 * -moz-transform : scale({@ZOOM}); 446 * -moz-transform-origin : top left; 447 * 448 * 初期値は、ありません。 449 * 450 * @param zoom ドラッグ要素の拡大、縮小の倍率 451 */ 452 public void setZoom( final String zoom ) { 453 this.zoom = nval( getRequestParameter( zoom ),this.zoom ); 454 } 455 456 /** 457 * 【TAG】JavaScript などの HTML基本タグ以外の属性を、そのままタグとして使用します。 458 * 459 * @og.tag 460 * JavaScript などの HTML基本タグ以外の属性を、そのままタグとして使用します。 461 * 462 * @param optionAttributes オプション属性 463 */ 464 public void setOptionAttributes( final String optionAttributes ) { 465 final String optAttri = getRequestParameter( optionAttributes ); 466 if( optAttri != null && optAttri.length() > 0 ) { 467 set( "optionAttributes",optAttri ); 468 } 469 } 470 471 /** 472 * このオブジェクトの文字列表現を返します。 473 * 基本的にデバッグ目的に使用します。 474 * 475 * @return このクラスの文字列表現 476 * @og.rtnNotNull 477 */ 478 @Override 479 public String toString() { 480 return ToString.title( this.getClass().getName() ) 481 .println( "VERSION" ,VERSION ) 482 .println( "url" ,url ) 483 .println( "grid" ,grid ) 484 .println( "width" ,width ) 485 .println( "height" ,height ) 486 .println( "image" ,image ) // url文字列と合成済み 487 .println( "background" ,background ) 488 .println( "bgColor" ,bgColor ) 489 .println( "bgSize" ,bgSize ) 490 .println( "bgImage" ,bgImage ) 491 .println( "bgRepeat" ,bgRepeat ) 492 .println( "bgPosition" ,bgPosition ) 493 // .println( "id" ,get("id" ) ) 494 // .println( "style" ,get("style" ) ) 495 .println( "Other..." ,getAttributes().getAttribute() ) 496 .fixForm().toString() ; 497 } 498}