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        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/{&#064;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                                    : {&#064;ZOOM};
441         *              transform                               : scale({&#064;ZOOM});
442         *              transform-origin                : top left;
443         *              -moz-transform                  : scale({&#064;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}