随笔-159  评论-114  文章-7  trackbacks-0
写一个GWT CornerPanel,带原角的DIV。
package  com.broadtext.client.widget;

 import  com.google.gwt.user.client.DOM;
 import  com.google.gwt.user.client.Element;
 import  com.google.gwt.user.client.ui.ComplexPanel;
 import  com.google.gwt.user.client.ui.UIObject;
 import  com.google.gwt.user.client.ui.Widget;

 public   class  CornerPanel  extends  ComplexPanel  {    
    
     static   final   public  String DEFAULT_OUT_DIV_ClASSNAME  =   " default-corner-outer " ;
    
     static   final   public  String DEFAULT_CORNER_CLASS_NAME  =   " default-corner " ;
    
     static   final   public  String DEFAULT_CORNERB_CLASS_NAME  =   " default-corner-b " ;
    
     static   final   public  String DEFAULT_CORNER_MAIN_CLASS_NAME  =   " default-corner-main " ;
    
     private  Element outerDiv;
    
     private  CornerElementContainer topCec;
    
     private  CornerElementContainer bottomCec;
    
     private  CornerElement[] top  =   new  CornerElement[ 4 ];
    
     private  CornerElement[] bottom  =   new  CornerElement[ 4 ];
    
     protected  Element mainContainer;
    
     private   class  CornerElementContainer  extends  Widget {
        
         private  CornerElementContainer()
         {
            setElement(DOM.createElement( " b " ));
            setStyleName(DEFAULT_CORNER_CLASS_NAME);
        }
        
         public   void  addCornerElement(Widget w)
         {
            w.removeFromParent();
            DOM.appendChild( this .getElement(), w.getElement());
        }
        
         public   void  setStyleName(String style)
         {
             super .setStyleName(style);
        }
    }
    
     private   class  CornerElement  extends  Widget {
         public  CornerElement(String stylename)
         {
            setElement(DOM.createElement( " b " ));
            setStyleName(stylename);
        }         
        
         public   void  setStyleName(String style)
         {
             super .setStyleName(style);
        }
        
    }
    
    
     public  CornerPanel()
     {
        outerDiv  =  DOM.createDiv();
        mainContainer  =  DOM.createDiv();
        setElement(outerDiv);
        setStyleName(getElement(), DEFAULT_OUT_DIV_ClASSNAME,  true );
        initCorner();
        DOM.appendChild(outerDiv, topCec.getElement());
        DOM.appendChild(outerDiv, mainContainer);
        DOM.appendChild(outerDiv, bottomCec.getElement());
    }
    
    
    
     /**
     * 初始化上面的corner
     *
      */
     private   void  initCorner()
     {
        topCec  =   new  CornerElementContainer();        
         for ( int  i  =   0 ; i  <   4  ; i ++ )
         {
            top[i]  =   new  CornerElement(DEFAULT_CORNERB_CLASS_NAME  +  (i  +   1 ));
            topCec.addCornerElement(top[i]);
        }
        
        bottomCec  =   new  CornerElementContainer();        
         for ( int  i  =   0 ; i  <   4  ; i ++ )
         {
            bottom[i]  =   new  CornerElement(DEFAULT_CORNERB_CLASS_NAME  +  ( 4   -  i));
            bottomCec.addCornerElement(bottom[i]);
        }         
    }
    
     public   void  setOuterStyleName(String style)
     {
        setStyleName(style);
    }
    
     public   void  setCecStyleName(String style)
     {        
        topCec.setStyleName(style);
        bottomCec.setStyleName(style);
    }
    
     public   void  setCeStyleName(String style)
     {
         for ( int  i  =   0 ; i  <   4  ; i ++ )
         {
            top[i].setStyleName(style  +  (i  +   1 ));
        }
         for ( int  i  =   0 ; i  <   4  ; i ++ )
         {
            bottom[i].setStyleName(style  +  ( 4   -  i));
        }
    }

     public   void  setMainStyleName(String style)
     {
        UIObject.setStyleName( this .mainContainer, style,  true );
    }


     public   void  add(Widget w)  {
        DOM.appendChild( this .mainContainer, w.getElement());
    }

     protected   void  add(Widget w, Element container)  {
         // nothing to do
    }

     public   void  addStyleName(String style)  {
         // nothing to do
    }
    
    
    
}

/*  -------------------------------  */

/*  -- default corner style begin-- */

.default-corner-outer  {
    background :  #C6DBFF ;
    color :  #ccc ;
}

.default-corner  {
    display :  block ;
    background :  #fff ;
}

.default-corner-b1  {
    display :  block ;
    height :  1px ;
    overflow :  hidden ;
    margin :  0 5px ;
    background :  #C6DBFF ;
}

.default-corner-b2  {
    display :  block ;
    height :  1px ;
    overflow :  hidden ;
    margin :  0 3px ;
    background :  #C6DBFF ;
}

.default-corner-b3  {
    display :  block ;
    height :  1px ;
    overflow :  hidden ;
    margin :  0 2px ;
    background :  #C6DBFF ;
}

.default-corner-b4  {
    display :  block ;
    height :  1px ;
    overflow :  hidden ;
    background :  #C6DBFF ;
    margin :  0 1px ;
    height :  2px ;     
 }

.default-corner-main  {
    margin-left :  3px ;
    margin-right :  3px ;
}

/*  -- default corner style end -- */


posted on 2006-11-13 13:40 北国狼人的BloG 阅读(523) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航:
 
Powered by: 博客园 模板提供：沪江博客 Copyright ©2024 北国狼人的BloG