Package library :: Package pyjamas :: Package ui :: Module DecoratorPanel
[hide private]
[frames] | no frames]

Source Code for Module library.pyjamas.ui.DecoratorPanel

  1  # Copyright (C) 2006-2008 Google Inc. 
  2  # Copyright (C) 2009 Luke Kenneth Casson Leighton <lkcl@lkcl.net> 
  3   
  4  from pyjamas import DOM 
  5  from pyjamas.ui.SimplePanel import SimplePanel 
  6  from pyjamas import Factory 
  7  from pyjamas.ui.TabPanel import TabPanel 
  8  from pyjamas.ui.TabBar import TabBar 
  9   
 10  """ 
 11   
 12    A {@link SimplePanel} that wraps its contents in stylized boxes, which can be 
 13    used to add rounded corners to a {@link Widget}. 
 14   
 15    Wrapping a {@link Widget} in a "9-box" allows users to specify images in each 
 16    of the corners and along the four borders. This method allows the content 
 17    within the {@link DecoratorPanel} to resize without disrupting the look of 
 18    the border. In addition, rounded corners can generally be combined into a 
 19    single image file, which reduces the number of downloaded files at startup. 
 20    This class also simplifies the process of using AlphaImageLoaders to support 
 21    8-bit transparencies (anti-aliasing and shadows) in ie6, which does not 
 22    support them normally. 
 23   
 24   
 25    CSS Style Rules 
 26   
 27    .gwt-DecoratorPanel { the panel } 
 28    .gwt-DecoratorPanel .top { the top row } 
 29    .gwt-DecoratorPanel .topLeft { the top left cell } 
 30    .gwt-DecoratorPanel .topLeftInner { the inner element of the cell } 
 31    .gwt-DecoratorPanel .topCenter { the top center cell } 
 32    .gwt-DecoratorPanel .topCenterInner { the inner element of the cell } 
 33    .gwt-DecoratorPanel .topRight { the top right cell } 
 34    .gwt-DecoratorPanel .topRightInner { the inner element of the cell } 
 35    .gwt-DecoratorPanel .middle { the middle row } 
 36    .gwt-DecoratorPanel .middleLeft { the middle left cell } 
 37    .gwt-DecoratorPanel .middleLeftInner { the inner element of the cell } 
 38    .gwt-DecoratorPanel .middleCenter { the middle center cell } 
 39    .gwt-DecoratorPanel .middleCenterInner { the inner element of the cell } 
 40    .gwt-DecoratorPanel .middleRight { the middle right cell } 
 41    .gwt-DecoratorPanel .middleRightInner { the inner element of the cell } 
 42    .gwt-DecoratorPanel .bottom { the bottom row } 
 43    .gwt-DecoratorPanel .bottomLeft { the bottom left cell } 
 44    .gwt-DecoratorPanel .bottomLeftInner { the inner element of the cell } 
 45    .gwt-DecoratorPanel .bottomCenter { the bottom center cell } 
 46    .gwt-DecoratorPanel .bottomCenterInner { the inner element of the cell } 
 47    .gwt-DecoratorPanel .bottomRight { the bottom right cell } 
 48    .gwt-DecoratorPanel .bottomRightInner { the inner element of the cell } 
 49   
 50  """ 
51 -class DecoratorPanel(SimplePanel):
52 #The default style name. 53 DEFAULT_STYLENAME = "gwt-DecoratorPanel" 54 55 #The default styles applied to each row. 56 DEFAULT_ROW_STYLENAMES = [ "top", "middle", "bottom" ] 57
58 - def __init__(self, rowStyles=None, containerIndex=1, **kwargs):
59 """ Creates a new panel using the specified style names to 60 apply to each row. Each row will contain three cells 61 (Left, Center, and Right). The Center cell in the 62 containerIndex row will contain the {@link Widget}. 63 64 @param rowStyles: an array of style names to apply to each row 65 @param containerIndex the index of the container row 66 """ 67 68 if rowStyles is None: 69 rowStyles = self.DEFAULT_ROW_STYLENAMES 70 71 if kwargs.has_key('Element'): 72 self.table = kwargs.pop('Element') 73 fc = DOM.getFirstChild(self.table) 74 if fc: 75 self.tbody = fc 76 else: 77 self.tbody = DOM.createTBody() 78 DOM.appendChild(self.table, self.tbody) 79 else: 80 # Add a tbody 81 self.table = DOM.createTable() 82 self.tbody = DOM.createTBody() 83 DOM.appendChild(self.table, self.tbody) 84 DOM.setAttribute(self.table, "cellSpacing", "0") 85 DOM.setAttribute(self.table, "cellPadding", "0") 86 87 if not kwargs.has_key('StyleName'): kwargs['StyleName']=self.DEFAULT_STYLENAME 88 SimplePanel.__init__(self, self.table, **kwargs) 89 90 # Add each row 91 for i in range(len(rowStyles)): 92 row = self.createTR(rowStyles[i]) 93 DOM.appendChild(self.tbody, row) 94 if i == containerIndex: 95 self.containerElem = DOM.getFirstChild(DOM.getChild(row, 1))
96
97 - def createTR(self, styleName) :
98 """ Create a new row with a specific style name. The row 99 will contain three cells (Left, Center, and Right), each 100 prefixed with the specified style name. 101 102 This method allows Widgets to reuse the code on a DOM 103 level, without creating a DecoratorPanel Widget. 104 105 @param styleName: the style name 106 @return the new row {@link Element} 107 """ 108 trElem = DOM.createTR() 109 self.setStyleName(trElem, styleName) 110 DOM.appendChild(trElem, self.createTD(styleName + "Left")) 111 DOM.appendChild(trElem, self.createTD(styleName + "Center")) 112 DOM.appendChild(trElem, self.createTD(styleName + "Right")) 113 return trElem
114
115 - def createTD(self, styleName):
116 """ Create a new table cell with a specific style name. 117 118 @param styleName: the style name 119 @return the new cell {@link Element} 120 """ 121 tdElem = DOM.createTD() 122 inner = DOM.createDiv() 123 DOM.appendChild(tdElem, inner) 124 self.setStyleName(tdElem, styleName) 125 self.setStyleName(inner, styleName + "Inner") 126 return tdElem
127
128 - def getCellElement(self, row, cell):
129 """ Get a specific Element from the panel. 130 131 @param row: the row index 132 @param cell: the cell index 133 @return the Element at the given row and cell 134 """ 135 tr = DOM.getChild(self.tbody, row) 136 td = DOM.getChild(tr, cell) 137 return DOM.getFirstChild(td)
138
139 - def getContainerElement(self):
140 return self.containerElem
141 142 Factory.registerClass('pyjamas.ui.DecoratorPanel', 'DecoratorPanel', DecoratorPanel) 143
144 -class DecoratedTabBar(TabBar):
145 146 TAB_ROW_STYLES = ["tabTop", "tabMiddle"] 147 148 STYLENAME_DEFAULT = "gwt-DecoratedTabBar" 149
150 - def __init__(self, **kwargs):
151 """ Creates an empty {@link DecoratedTabBar}. 152 """ 153 TabBar.__init__(self, **kwargs)
154
155 - def createTabTextWrapper(self):
156 return DecoratorPanel(self.TAB_ROW_STYLES, 1)
157 158 Factory.registerClass('pyjamas.ui.DecoratorPanel', 'DecoratedTabBar', DecoratedTabBar) 159
160 -class DecoratedTabPanel(TabPanel):
161 DEFAULT_STYLENAME = "gwt-DecoratedTabPanel" 162
163 - def __init__(self, **kwargs):
164 if not kwargs.has_key('StyleName'): kwargs['StyleName']=self.DEFAULT_STYLENAME 165 if kwargs.has_key('TabBar'): 166 tabbar = kwargs.pop('TabBar') 167 else: 168 tabbar = DecoratedTabBar() 169 TabPanel.__init__(self, tabbar, **kwargs) 170 171 self.getTabBar().setStyleName(DecoratedTabBar.STYLENAME_DEFAULT)
172
173 - def createTabTextWrapper(self):
175 176 Factory.registerClass('pyjamas.ui.DecoratorPanel', 'DecoratedTabPanel', DecoratedTabPanel) 177
178 -class DecoratorTitledPanel(DecoratorPanel):
179
180 - def __init__(self, title, titleStyle=None, imgStyle=None, 181 rowStyles=None, 182 containerIndex=2, titleIndex=1, 183 **kwargs) :
184 if rowStyles is None: 185 rowStyles = ["top", "top2", "middle", "bottom"] 186 187 if titleStyle is None: 188 titleStyle = "title" 189 190 DecoratorPanel.__init__(self, rowStyles, containerIndex, **kwargs) 191 192 inner = self.getCellElement(titleIndex, 1) 193 if imgStyle: 194 img = DOM.createDiv() 195 DOM.setAttribute(img, "className", imgStyle) 196 DOM.appendChild(inner, img) 197 tdiv = DOM.createDiv() 198 DOM.setAttribute(tdiv, "className", titleStyle) 199 DOM.setInnerText(tdiv, title) 200 DOM.appendChild(inner, tdiv)
201 202 Factory.registerClass('pyjamas.ui.DecoratorPanel', 'DecoratorTitledPanel', DecoratorTitledPanel) 203