Click or drag to resize

Designer

Wisej is the only Web Application system that supports a pixel-perfect designer. It's a unique technology integrated with Visual Studio designer (all versions, works with SharpDevelop as well) that renders the final HTML directly on the designer surface with very little, if any, limitations.

You can design any JavaScript widget, including custom-built controls, and including C#/VB.NET backed widgets.

Designer Surface

The designer surface can host a full page, a form, and a custom control. All the typical functionality is supported: snap lines, alignments, multiple selection, tab index, child controls, context menus.

A typical design view.
designer-1

At the bottom of the designer surface we have the Wisej designer bar, which allows you to (from left to right):

  • theme List.Image Change the theme used in the designer.

    Different designer views can use different themes. The theme list includes the built-in themes plus all the application's themes in the /Theme folder.

    Note Note

    The theme that you select in the designer is not used at runtime. See the Configuration topic for more information on how to change the default runtime theme.

  • show Grid.Image Change the size of the surface grid.

  • screenshot.Image Take a screenshot of the control being designed. The image is saved to the clipboard.

  • Show or hide the controls that have the Visible property set to false.

    show Hidden Controls.Image Visual Studio designer always shows all controls, including the controls with Visible set to false. When a container has several controls that overlap and may be shown/hidden at runtime, the design view can become quite messy. This toggle button solves this problem.

  • refresh.Image Refresh the entire designer surface. Useful when the underlying HTML renderer falls behind because of a complex control or a third party library slow to download.

  • toolbox.Image Show the toolbox.

  • properties.Image Show the property panel for the selected control.

Extension Providers

Wisej supports all sorts of extensions, including Extension Providers. These are components that when added to a container extend (add properties and functionality) to all the qualified controls in the container. The designer also supports this functionality, and is capable of updating the view of the extended controls as they are designer.

The ProgressCircle control has been rotated by 60 degrees using the Rotation extender.
designer-2
C#/VB.NET Widgets/Controls

The designer can also show controls that are managed and/or drawn by server code. Which means that you can create complex controls in C#/VB.NET and use them in the designer as if they were JavaScript widgets.

The ProgressCircle control visible in the image above, for example, is entirely drawn by server code using the HTML5 canvas element.

C#
// clear the canvas.
base.ClearRect(this.DisplayRectangle);

// calculate the position and radius.
int lineWidth = this.LineWidth;
int centerX = this.Width / 2;
int centerY = this.Height / 2;
int radius = Math.Min(centerX, centerY) - (lineWidth / 2);

// fill the circle?
if (this._fillCircle)
{
    base.Arc(centerX, centerY, radius - lineWidth, 0, 360);
    base.FillStyle = this.BackColor;
    base.Fill();
}

// draw the circle empty perimeter.
base.LineWidth = 1;
base.StrokeStyle = this.ForeColor;
base.BeginPath();
base.Arc(centerX, centerY, radius, 0, 360);
base.Stroke();
base.BeginPath();
base.Arc(centerX, centerY, radius - LineWidth, 0, 360);
base.Stroke();

// fill the perimeter line proportional to the value.
base.LineWidth = lineWidth;
base.BeginPath();
base.Arc(centerX, centerY, radius - lineWidth / 2, 0, 360 * this.Value / 100);
base.Stroke();

// draw the text?
if (this._showText)
{
    base.TextFont = this.Font;
    base.FillStyle = this.ForeColor;
    base.TextAlign = CanvasTextAlign.Center;
    base.TextBaseline = CanvasTextBaseline.Middle;
    string percent = this.Value.ToString() + "%";
    base.FillText(percent, centerX, centerY);
}
Custom Painting

Custom controls are not limited to using the HTML5 canvas functionality. With Wisej you can actually paint a control of any complexity and still use it in the designer.

A custom panel that paints the Mandelbrot set in C#.
designer-3
Unsupported Features
  • Animations are obviously not supported at design time.

  • Extender providers that add visual items that are outside of the extended component's rectangle are not shown at design time. For example, tooltips, error icons, and information bubbles cannot be displayed in the designer because they are typically outside of the frame used by the component that they extend.

  • Transparencies are not supported since each component is rendered independently.

  • Rotations that make the content of a component exit its rectangle cause the outside parts to be truncated at design time. They are visible at runtime.

See Also