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