1
2
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 """
52
53 DEFAULT_STYLENAME = "gwt-DecoratorPanel"
54
55
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
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
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
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
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
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
140 return self.containerElem
141
142 Factory.registerClass('pyjamas.ui.DecoratorPanel', 'DecoratorPanel', DecoratorPanel)
143
157
158 Factory.registerClass('pyjamas.ui.DecoratorPanel', 'DecoratedTabBar', DecoratedTabBar)
159
175
176 Factory.registerClass('pyjamas.ui.DecoratorPanel', 'DecoratedTabPanel', DecoratedTabPanel)
177
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