Renders grid/chart control buttons to switch between both components
775133
public function renderChartControlButtons()
    {
        echo '<div class="row-fluid">';
        echo TbHtml::buttonGroup(
            array(
                array(
                    'label' => Yii::t('zii', 'Display Grid'),
                    'url' => '#',
                    'htmlOptions' => array('class' => 'active ' . $this->grid->getId() . '-grid-control grid')
                ),
                array(
                    'label' => Yii::t('zii', 'Display Chart'),
                    'url' => '#',
                    'htmlOptions' => array('class' => $this->grid->getId() . '-grid-control chart')
                ),
            ),
            array('toggle' => TbHtml::BUTTON_TOGGLE_RADIO, 'style' => 'margin-bottom:5px', 'class' => 'pull-right')
        );
        echo '</div>';

    }
827181
function(evt) {
        var btn = evt.buttonElement;
        switch (btn.action) {
            case "panup": 
                this.map.pan(0, -this.getSlideFactor("h"));
                break;
            case "pandown": 
                this.map.pan(0, this.getSlideFactor("h"));
                break;
            case "panleft": 
                this.map.pan(-this.getSlideFactor("w"), 0);
                break;
            case "panright": 
                this.map.pan(this.getSlideFactor("w"), 0);
                break;
            case "zoomin": 
                this.map.zoomIn(); 
                break;
            case "zoomout": 
                this.map.zoomOut(); 
                break;
            case "zoomworld": 
                this.map.zoomToMaxExtent(); 
                break;
        }
    }
151506
function () {
		var chart = this,
			lang = defaultOptions.lang,
			btnOptions = chart.options.chart.resetZoomButton,
			theme = btnOptions.theme,
			states = theme.states,
			alignTo = btnOptions.relativeTo === 'chart' ? null : 'plotBox';
			
		this.resetZoomButton = chart.renderer.button(lang.resetZoom, null, null, function () { chart.zoomOut(); }, theme, states && states.hover)
			.attr({
				align: btnOptions.position.align,
				title: lang.resetZoomTitle
			})
			.add()
			.align(btnOptions.position, false, alignTo);
			
	}
921788
@Override
	public void doRender(final WComponent component, final WebXmlRenderContext renderContext) {
		WDataTableRowRenderer renderer = (WDataTableRowRenderer) component;
		XmlStringBuilder xml = renderContext.getWriter();
		WDataTable table = renderer.getTable();
		TableDataModel dataModel = table.getDataModel();
		UIContext uic = UIContextHolder.getCurrent();

		final int numCols = table.getColumnCount();
		int[] columnOrder = table.getColumnOrder();
		int rowIndex = getRowIndex(table, (SubUIContext) uic);
		boolean unselectable = table.getSelectMode() != SelectMode.NONE
				&& !dataModel.isSelectable(rowIndex);

		xml.appendTagOpen("ui:tr");
		xml.appendAttribute("rowIndex", rowIndex);
		xml.appendOptionalAttribute("unselectable", unselectable, "true");
		xml.appendOptionalAttribute("selected", table.getSelectedRows().contains(rowIndex), "true");
		xml.appendOptionalAttribute("filterValues", getFilterValues(dataModel, rowIndex));

		if (table.getExpandMode() != WDataTable.ExpandMode.NONE && dataModel instanceof TreeTableDataModel) {
			TableTreeNode node = ((TreeTableDataModel) dataModel).getNodeAtLine(rowIndex);
			boolean expandable = !node.isLeaf() && !node.isExpanded();
			xml.appendOptionalAttribute("expandable", expandable, "true");
		}

		xml.appendClose();

		if (table.isShowRowHeaders()) {
			xml.appendTag("ui:th");
			renderer.getRowHeader().paint(renderContext);
			xml.appendEndTag("ui:th");
		}

		for (int i = 0; i < numCols; i++) {
			int colIndex = columnOrder == null ? i : columnOrder[i];
			WTableColumn col = table.getColumn(colIndex);

			if (col.isVisible()) {
				xml.appendTag("ui:td");
				renderer.getRenderer(colIndex).paint(renderContext);
				xml.appendEndTag("ui:td");
			}
		}

		if (table.getExpandMode() != WDataTable.ExpandMode.NONE && dataModel instanceof TreeTableDataModel) {
			TreeTableDataModel treeModel = (TreeTableDataModel) dataModel;
			TableTreeNode node = treeModel.getNodeAtLine(rowIndex);

			if (!node.isLeaf()) {
				xml.appendTagOpen("ui:subtr");
				xml.appendOptionalAttribute("open", node.isExpanded(), "true");
				xml.appendClose();

				if (node.isExpanded() || table.getExpandMode() == ExpandMode.CLIENT) {
					WRepeater repeater = table.getRepeater();

					// If there a renderer specified by any child, we only paint content that has a specified renderer
					boolean rendererPresent = false;

					for (Iterator<TreeNode> i = node.children(); !rendererPresent && i.hasNext();) {
						TableTreeNode child = (TableTreeNode) i.next();

						if (child.getRendererClass() != null) {
							rendererPresent = true;
						}
					}

					// Paint immediate children only.
					if (rendererPresent) {
						xml.appendTagOpen("ui:content");
						xml.appendOptionalAttribute("spanAllCols", node.isRendererSpansAllCols(),
								"true");
						xml.appendClose();

						for (Iterator<TreeNode> i = node.children(); i.hasNext();) {
							TableTreeNode child = (TableTreeNode) i.next();
							Integer rowId = child.getRowIndex() - 1;
							UIContext nodeContext = repeater.getRowContext(rowId);

							WComponent expandedRenderer = renderer.getExpandedTreeNodeRenderer(
									child.getRendererClass());

							if (expandedRenderer != null) {
								UIContextHolder.pushContext(nodeContext);

								try {
									expandedRenderer.paint(renderContext);
								} finally {
									UIContextHolder.popContext();
								}
							}
						}

						xml.appendEndTag("ui:content");
					} else {
						for (Iterator<TreeNode> i = node.children(); i.hasNext();) {
							TableTreeNode child = (TableTreeNode) i.next();
							Integer rowId = child.getRowIndex() - 1;
							UIContext nodeContext = repeater.getRowContext(rowId);

							UIContextHolder.pushContext(nodeContext);

							try {
								render(component, renderContext);
							} finally {
								UIContextHolder.popContext();
							}
						}
					}
				}

				xml.appendEndTag("ui:subtr");
			}
		}

		xml.appendEndTag("ui:tr");
	}
141723
function(el, options) {

    if (typeof options === 'undefined') {
        options = {};
    }

    // apply defaults
    options = _.defaults(options, defaults, {
        orientation : 'left',
        labelText: '',
        // true to position the axis-label
        // when chart uses layout positioning of axis-labels is handled by layout
        position: true 
    });

    this._labelText = options.labelText;
    this._animDuration = options.duration;
    this._orientation = options.orientation;
    this._margin = options.margin;
    this._width = options.width;
    this._height = options.height;
    this._isPositioned = options.position;

    this._container = d3.select(el);
    this._g = null;
    this._text = null;

}
229001
function() {
      webhookit.WiringEditor.superclass.renderButtons.call(this);

      var toolbar = YAHOO.util.Dom.get('toolbar');

		
      var editTemplateButton = new YAHOO.widget.Button({ label:"Edit template", id:"WiringEditor-templateButton", container: toolbar });
      editTemplateButton.on("click", webhookit.editTemplateButton, webhookit, true);

		// "Run" button
      var runButton = new YAHOO.widget.Button({ label:"Run", id:"WiringEditor-runButton", container: toolbar });
      runButton.on("click", webhookit.run, webhookit, true);

   }
691246
function (settings) {
        var self = this;

        self._super(settings);

        if (self.isRtl()) {
          self.classes.add('rtl');
        }

        self.classes.add('window');
        self.bodyClasses.add('window-body');
        self.state.set('fixed', true);

        // Create statusbar
        if (settings.buttons) {
          self.statusbar = new Panel({
            layout: 'flex',
            border: '1 0 0 0',
            spacing: 3,
            padding: 10,
            align: 'center',
            pack: self.isRtl() ? 'start' : 'end',
            defaults: {
              type: 'button'
            },
            items: settings.buttons
          });

          self.statusbar.classes.add('foot');
          self.statusbar.parent(self);
        }

        self.on('click', function (e) {
          var closeClass = self.classPrefix + 'close';

          if (DomUtils.hasClass(e.target, closeClass) || DomUtils.hasClass(e.target.parentNode, closeClass)) {
            self.close();
          }
        });

        self.on('cancel', function () {
          self.close();
        });

        self.aria('describedby', self.describedBy || self._id + '-none');
        self.aria('label', settings.title);
        self._fullscreen = false;
      }
981593
function Multipanel( canvas ) {

	Panel.call( this, canvas );

	this._config.padding.top = 25;
	this._config.padding.left = 40;

	this._config.rows = 1;
	this._config.cols = 1;

	this._config.headers = [];
	this._config.labels = [];

	// REGISTER //
	if ( canvas._config.hasOwnProperty( 'panel' ) ) {
		canvas._config.panel.push( this._config );
	} else {
		canvas._config.panel = [ this._config ];
	}
	if ( canvas._children.hasOwnProperty( 'panel' ) ) {
		canvas._children.panel.push( this );
	} else {
		canvas._children.panel = [ this ];
	}

	return this;

}
1107938
function (settings) {
        var self = this;

        self._super(settings);
        self._eventsRoot = self;

        self.classes.add('floatpanel');

        // Hide floatpanes on click out side the root button
        if (settings.autohide) {
          bindDocumentClickHandler();
          bindWindowResizeHandler();
          visiblePanels.push(self);
        }

        if (settings.autofix) {
          bindDocumentScrollHandler();

          self.on('move', function () {
            repositionPanel(this);
          });
        }

        self.on('postrender show', function (e) {
          if (e.control == self) {
            var $modalBlockEl, prefix = self.classPrefix;

            if (self.modal && !hasModal) {
              $modalBlockEl = $('#' + prefix + 'modal-block', self.getContainerElm());
              if (!$modalBlockEl[0]) {
                $modalBlockEl = $(
                  '<div id="' + prefix + 'modal-block" class="' + prefix + 'reset ' + prefix + 'fade"></div>'
                ).appendTo(self.getContainerElm());
              }

              Delay.setTimeout(function () {
                $modalBlockEl.addClass(prefix + 'in');
                $(self.getEl()).addClass(prefix + 'in');
              });

              hasModal = true;
            }

            addRemove(true, self);
          }
        });

        self.on('show', function () {
          self.parents().each(function (ctrl) {
            if (ctrl.state.get('fixed')) {
              self.fixed(true);
              return false;
            }
          });
        });

        if (settings.popover) {
          self._preBodyHtml = '<div class="' + self.classPrefix + 'arrow"></div>';
          self.classes.add('popover').add('bottom').add(self.isRtl() ? 'end' : 'start');
        }

        self.aria('label', settings.ariaLabel);
        self.aria('labelledby', self._id);
        self.aria('describedby', self.describedBy || self._id + '-none');
      }
976454
function(options)
	{
		options = options || {};

		this._modelBindersMap = null;
		this._collectionBinder = null;
		this._bindingIndex = null;
		this._itemAlias = null;

		this._subviewsStruct = null;
		this._explicitSubviewsStruct = null;
		this._pendingRefresh = false;
		this._pendingRefreshRoot = false;
		this._subviewsArgs = null;
		this._isRunning = false;
		this._isSuspended = false;
		this._template = null;
		this._isolated = false;
		this.subviews = null;

		if(options.isolated)
		{
			this._isolated = true;
		}

		if(options.parentView)
		{
			this.scope = options.scope || null;
			this._setParentView(options.parentView);
		}
		else if(options.scope) this.scope = mixin({}, options.scope);
		else this.scope = {};

		options.scope = null;

		if(options.events)
		{
			this.domEvents = options.events.slice();
		}
		else this.domEvents = [];

		if(options.dispatcher)
		{
			this.dispatcher = options.dispatcher;
		}
		else this.dispatcher = null;

		if(options.actions)
		{
			this.actions = mixin({
				set: actionSet
			}, options.actions);
		}
		else if((this.parentView == null || this._isolated )&& !options._clone)
		{
			this.actions = {
				set: actionSet
			};
		}
		else this.actions = null;

		if(options.env)
		{
			this.env = options.env;
		}
		else this.env = { document: document, window: window };

		if(options.element)
		{
			this.element = options.element
			options.element = null;
		}
		else this.element = this.env.document.body;

		this.options = options;
	}
650250
function (horiz, pinchDown, touches, transform, selectionMarker, clip, lastValidTouch) {
		var chart = this.chart,
			xy = horiz ? 'x' : 'y',
			XY = horiz ? 'X' : 'Y',
			sChartXY = 'chart' + XY,
			wh = horiz ? 'width' : 'height',
			plotLeftTop = chart['plot' + (horiz ? 'Left' : 'Top')],
			selectionWH,
			selectionXY,
			clipXY,
			scale = 1,
			inverted = chart.inverted,
			bounds = chart.bounds[horiz ? 'h' : 'v'],
			singleTouch = pinchDown.length === 1,
			touch0Start = pinchDown[0][sChartXY],
			touch0Now = touches[0][sChartXY],
			touch1Start = !singleTouch && pinchDown[1][sChartXY],
			touch1Now = !singleTouch && touches[1][sChartXY],
			outOfBounds,
			transformScale,
			scaleKey,
			setScale = function () {
				if (!singleTouch && mathAbs(touch0Start - touch1Start) > 20) { // Don't zoom if fingers are too close on this axis
					scale = mathAbs(touch0Now - touch1Now) / mathAbs(touch0Start - touch1Start);	
				}
				
				clipXY = ((plotLeftTop - touch0Now) / scale) + touch0Start;
				selectionWH = chart['plot' + (horiz ? 'Width' : 'Height')] / scale;
			};

		// Set the scale, first pass
		setScale();

		selectionXY = clipXY; // the clip position (x or y) is altered if out of bounds, the selection position is not

		// Out of bounds
		if (selectionXY < bounds.min) {
			selectionXY = bounds.min;
			outOfBounds = true;
		} else if (selectionXY + selectionWH > bounds.max) {
			selectionXY = bounds.max - selectionWH;
			outOfBounds = true;
		}
		
		// Is the chart dragged off its bounds, determined by dataMin and dataMax?
		if (outOfBounds) {

			// Modify the touchNow position in order to create an elastic drag movement. This indicates
			// to the user that the chart is responsive but can't be dragged further.
			touch0Now -= 0.8 * (touch0Now - lastValidTouch[xy][0]);
			if (!singleTouch) {
				touch1Now -= 0.8 * (touch1Now - lastValidTouch[xy][1]);
			}

			// Set the scale, second pass to adapt to the modified touchNow positions
			setScale();

		} else {
			lastValidTouch[xy] = [touch0Now, touch1Now];
		}

		
		// Set geometry for clipping, selection and transformation
		if (!inverted) { // TODO: implement clipping for inverted charts
			clip[xy] = clipXY - plotLeftTop;
			clip[wh] = selectionWH;
		}
		scaleKey = inverted ? (horiz ? 'scaleY' : 'scaleX') : 'scale' + XY;
		transformScale = inverted ? 1 / scale : scale;

		selectionMarker[wh] = selectionWH;
		selectionMarker[xy] = selectionXY;
		transform[scaleKey] = scale;
		transform['translate' + XY] = (transformScale * plotLeftTop) + (touch0Now - (transformScale * touch0Start));
	}
465235
function Chart(options) {

	this.__proto__ = new Control();

	this.init = function(options) {
		this.type = options.type = 'Chart';
		this.parent = options.parent;
		this.defaults = {
			x:48, y:48, w:288, h:144,
			text: '',
			script: undefined,
			onload: undefined,
			fill: this.parent.fill,
			fill_highlight: this.parent.lighter(this.parent.stroke), 	// ??
			stroke: this.parent.stroke,
			'stroke-width': this.parent.control_stroke,
			fontsize: this.parent.fontsize,
			repeat: 0,
			running: 0,
			corner: this.parent.button_corner,
			subtype: undefined,
			r: this.w/2,		//?? chart??
			autorun: undefined,
			interpolate: 'step-after',	// vs. 'basis'
			ticks: 5,
			target: undefined,
			refresh: 0,
			ymax: undefined,
			ymin: undefined
		};
		//console.log('Chart defaults:', this.defaults);
		this.setoptions(options);
		this.render();		// render D3 chart
		var self = this;
		if (this.refresh) setInterval(function() { self.redraw.call(self); }, this.refresh);
		return this;
	};

	this.attr = function(attrs) {
		this.__proto__.attr.call(this);
		this.svg.attr(attrs);
	};

	this.render = function() {

		var margin = {top: 0, right: 0, bottom: 0, left: 0};
		var width = this.w - margin.left - margin.right;
		var height = this.h - margin.top - margin.bottom;

		var x = d3.scale.linear().range([0, width]);
		var y = d3.scale.linear().range([height, 0]);
		var color = d3.scale.category10();
		var xAxis = d3.svg.axis().scale(x).ticks(this.ticks).orient('bottom');
		var yAxis = d3.svg.axis().scale(y).ticks(this.ticks).orient('left');

		var line = d3.svg.line().interpolate(this.interpolate)
				.x(function(d) { return x(d.time); })
				.y(function(d) { return y(d.value); });

		var self = this;
		this.outerrect = this.parent.paper.rect(this.x, this.y, this.w, this.h, this.parent.button_corner)
			.attr({fill: this.fill, stroke: this.stroke, 'stroke-width':this.parent.control_stroke});
		this.elts.push(this.outerrect);

		this.label = this.parent.paper.text(this.x + (this.w/2), this.y + this.h + this.fontsize*2, this.text)
			.attr({fill:this.stroke, stroke:this.stroke, 'font-size': this.fontsize});
		this.textelts.push(this.label);

		this.sethandlers();

		this.svg = d3.select(this.parent.paper.canvas).append('g')
				.attr('width', width + margin.left + margin.right)
				.attr('height', height + margin.top + margin.bottom)
			.append('g')
				//.attr('transform', 'translate(' + (this.x+margin.left) + ',' + (this.y+margin.top) + ')');
				.attr('transform', 'translate(' + (this.x) + ',' + (this.y) + ')');

		d3.json('/d3/' + this.target, function(data) {

			// console.log('d3:', typeof data, data);

			color.domain(d3.keys(data[0]).filter(function(key) { return key !== 'time'; }));
			var values = color.domain().map(function(name) {
				return {
					name: name,
					values: data.map(function(d) {
						return {time: d.time, value: +d[name]};
					})
				};
			});

			x.domain(d3.extent(data, function(d) { return d.time; }));
			if (self.ymax !== undefined) y.domain([self.ymin, self.ymax]);
			else y.domain([
				d3.min(values, function(c) { return d3.min(c.values, function(v) { return v.value; }); }),
				d3.max(values, function(c) { return d3.max(c.values, function(v) { return v.value; }); })
			]);

			self.svgx = self.svg.append('g')
					.attr('class', 'x axis')
					.attr('transform', 'translate(0,' + height + ')')
					.attr('stroke', self.stroke)
					.attr('fill', self.stroke)
					.call(xAxis);

			self.svgy = self.svg.append('g')
					.attr('class', 'y axis')
					.attr('stroke', self.stroke)
					.attr('fill', self.stroke)
					.call(yAxis);
/* y axis label
				.append('text')
					.attr('transform', 'rotate(-90)')
					.attr('y', 6)
					.attr('dy', '.71em')
					.style('text-anchor', 'end')
					.attr('stroke', self.stroke)
					.attr('fill', self.stroke)
					.text(' ');
*/
			self.svgvalue = self.svg.selectAll('.value')
					.data(values)
				.enter().append('g')
					.attr('class', 'value');

			self.svgvalue.append('path')
					.attr('class', 'line')
					.attr('d', function(d) { return line(d.values); })
					.style('stroke', function(d) { return color(d.name); })
					.style('fill', self.fill)
					.style('stroke-width', self['stroke-width']);

			self.svgvalue.append('text')
					.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
					.attr('transform', function(d) { return 'translate(' + x(d.value.time) + ',' + y(d.value.value) + ')'; })
					.attr('x', 3)
					.attr('dy', '.35em')
					.attr('stroke', self.stroke)
					.attr('fill', self.stroke)
					.text(function(d) { return d.name; });
		});
	};

	this.redraw = function() {
		if (this.svg) {
			var doomed_svg = this.svg;
			delete this.svg;
			this.render();
			doomed_svg.remove();
		}
	};

	this.remove = function() {
		this.__proto__.remove.call(this);
		this.svg.remove();
	};

	this.move = function(x, y) {
		this.x = x;
		this.y = y;
		this.outerrect.attr({x:this.x, y:this.y, width:this.w, height:this.h});
		this.label.attr({x:this.x + this.w/2, y:this.y + this.h + this.fontsize*2});

		var translation = ['translate(', this.x, ',', this.y,')'].join('');
		//console.log('translation:', translation)
		this.svg.attr('transform', translation);
	};

	this.handleClick = function(e) {
		if (this.repeat) {
			if (this.running) {
				this.running = false;
				clearInterval(this.intervalid);
				delete this.intervalid;
			} else {
				this.running = true;
				this.exec();
			}
		}
		else this.redraw();

		if (e) {
			e.preventDefault();
			e.stopPropagation();
		}
		return false;
	};

	this.setValue = function(value) {
		this.value = value;
		//this.label.attr({text: this.text + ': ' + this.value});
		var update = {id: this.id, value: this.value};
		this.fire('update', update);
	};

	return this.init(options || {});
}
1367313
@Override
	public void doRender(final WComponent component, final WebXmlRenderContext renderContext) {
		WPanel panel = (WPanel) component;
		XmlStringBuilder xml = renderContext.getWriter();
		BorderLayout layout = (BorderLayout) panel.getLayout();
		Size hgap = layout.getHorizontalGap();
		String hgapString = hgap == null ? null : hgap.toString();
		Size vgap = layout.getVerticalGap();
		String vgapString = vgap == null ? null : vgap.toString();

		xml.appendTagOpen("ui:borderlayout");

		xml.appendOptionalAttribute("hgap", hgapString);
		xml.appendOptionalAttribute("vgap", vgapString);

		xml.appendClose();

		// Fetch the children and their constraints.
		final int childCount = panel.getChildCount();
		List<Duplet<WComponent, BorderLayoutConstraint>> children = new ArrayList<>(childCount);

		for (int i = 0; i < childCount; i++) {
			WComponent child = panel.getChildAt(i);
			children.add(new Duplet<>(child, getConstraints(panel, child)));
		}

		// Now paint them
		paintChildrenWithConstraint(children, renderContext, BorderLayout.NORTH);
		paintChildrenWithConstraint(children, renderContext, BorderLayout.EAST);
		paintChildrenWithConstraint(children, renderContext, BorderLayout.SOUTH);
		paintChildrenWithConstraint(children, renderContext, BorderLayout.WEST);
		paintChildrenWithConstraint(children, renderContext, BorderLayout.CENTER);

		xml.appendEndTag("ui:borderlayout");
	}
316327
function renderSelection() {
  if (!this.selectedItem) {
    return;
  }
  const selection = FractionalSelectionMixin.helpers.elementSelection(this);
  const itemCount = this.items ? this.items.length : 0;
  const damped = FractionalSelectionMixin.helpers.dampedSelection(selection, itemCount);
  // Use a percentage so the transform will still work if screen size changes
  // (e.g., if device orientation changes).
  const left = -damped * 100;
  const transform = 'translateX(' + left + '%)';
  this.$.slidingContainer.style.webkitTransform = transform;
  this.$.slidingContainer.style.transform = transform;
}
415806
function( entireComponent ) {

                // Insert a new component holder in the root or box.
                if ( entireComponent ) P.$root.html( createWrappedComponent() )
                else P.$root.find( '.' + CLASSES.box ).html( P.component.nodes( STATE.open ) )

                // Trigger the queued “render” events.
                return P.trigger( 'render' )
            }
191000
@Override
	public void doRender(final WComponent component, final WebXmlRenderContext renderContext) {
		WDataTable table = (WDataTable) component;
		XmlStringBuilder xml = renderContext.getWriter();

		xml.appendTagOpen("ui:table");
		xml.appendAttribute("id", component.getId());
		xml.appendOptionalAttribute("track", component.isTracking(), "true");
		xml.appendOptionalAttribute("hidden", table.isHidden(), "true");
		xml.appendOptionalAttribute("caption", table.getCaption());

		switch (table.getType()) {
			case TABLE:
				xml.appendAttribute("type", "table");
				break;
			case HIERARCHIC:
				xml.appendAttribute("type", "hierarchic");
				break;
			default:
				throw new SystemException("Unknown table type: " + table.getType());
		}

		switch (table.getStripingType()) {
			case ROWS:
				xml.appendAttribute("striping", "rows");
				break;
			case COLUMNS:
				xml.appendAttribute("striping", "cols");
				break;
			case NONE:
				break;
			default:
				throw new SystemException("Unknown striping type: " + table.getStripingType());
		}

		switch (table.getSeparatorType()) {
			case HORIZONTAL:
				xml.appendAttribute("separators", "horizontal");
				break;
			case VERTICAL:
				xml.appendAttribute("separators", "vertical");
				break;
			case BOTH:
				xml.appendAttribute("separators", "both");
				break;
			case NONE:
				break;
			default:
				throw new SystemException("Unknown separator type: " + table.getSeparatorType());
		}

		xml.appendClose();

		if (table.getPaginationMode() != PaginationMode.NONE) {
			paintPaginationElement(table, xml);
		}

		if (table.getSelectMode() != SelectMode.NONE) {
			paintRowSelectionElement(table, xml);
		}

		if (table.getExpandMode() != ExpandMode.NONE) {
			paintRowExpansionElement(table, xml);
		}

		if (table.isSortable()) {
			paintSortElement(table, xml);
		}

		paintColumnHeadings(table, renderContext);
		paintRows(table, renderContext);
		paintTableActions(table, renderContext);

		xml.appendEndTag("ui:table");
	}
544510
@Override
	public void doRender(final WComponent component, final WebXmlRenderContext renderContext) {
		WPanel panel = (WPanel) component;
		XmlStringBuilder xml = renderContext.getWriter();
		GridLayout layout = (GridLayout) panel.getLayout();
		Size hgap = layout.getHorizontalGap();
		String hgapString = hgap == null ? null : hgap.toString();
		Size vgap = layout.getVerticalGap();
		String vgapString = vgap == null ? null : vgap.toString();
		int rows = layout.getRows();
		int cols = layout.getCols();

		xml.appendTagOpen("ui:gridlayout");

		xml.appendAttribute("rows", rows > 0 ? String.valueOf(rows) : "0");
		xml.appendAttribute("cols", cols > 0 ? String.valueOf(cols) : "0");
		xml.appendOptionalAttribute("hgap", hgapString);
		xml.appendOptionalAttribute("vgap", vgapString);

		xml.appendClose();

		int size = panel.getChildCount();

		for (int i = 0; i < size; i++) {
			xml.appendTag("ui:cell");
			WComponent child = panel.getChildAt(i);
			child.paint(renderContext);
			xml.appendEndTag("ui:cell");
		}

		xml.appendEndTag("ui:gridlayout");
	}