PolymerWidget

Namespace: Wisej.Web.Ext.Polymer

Assembly: Wisej.Web.Ext.Polymer (4.1.0.0)

• Control
  • PolymerWidget

Represents a control that hosts a Polymer element (www.polymer-project).

C#

public class PolymerWidget : Control

VB.NET

Public Class PolymerWidget
    Inherits Control

The element identified by ElementType is imported on demand from PolymerBaseUrl, created inside the control and initialized with the values in Properties. The element events listed in Events are routed to the server through the PolymerEvent event.

Example:

Creating a Polymer slider and reading its value when it changes:

var slider = new PolymerWidget
{
    ElementType = "paper-slider",
    Events = new[] { "change" },
    Size = new Size(300, 40)
};
slider.Properties.min = 0;
slider.Properties.max = 100;
slider.Properties.value = 25;
slider.PolymerEvent += (s, e) =>
{
    if (e.Type == "change")
        AlertBox.Show("Value: " + slider.Properties.value);
};
this.Controls.Add(slider);

Constructors

PolymerWidget()

Initializes a new instance of PolymerWidget.

Properties

AllowHtml

Boolean: Returns whether the Text property can contain HTML content. Always returns true.

The Text is always rendered as HTML inside the Polymer element. Newlines (CRLF) are converted to <br/> only when the text doesn't contain any HTML.

BorderStyle

BorderStyle: Returns or sets the border style for the control. (Default: None)

Value: One of the BorderStyle values. The default is BorderStyle.None.

ElementClassName

String: Returns or sets the CSS class name added to the polymer element. (Default: "")

The class name is appended to the default class names of the element. Use it to apply custom CSS styles defined in the application.

ElementType

String: Returns or sets the polymer element type. (Default: "")

The value is the tag name of the Polymer element to create, i.e. "paper-button" or "paper-slider". If the element is not registered yet, it is imported from PolymerBaseUrl + ElementType + "/" + ElementType + ".html" (see PolymerBaseUrl).

Example:

Creating a Polymer toggle button:

this.polymerWidget1.ElementType = "paper-toggle-button";
this.polymerWidget1.Properties.@checked = true;

Events

String[]: Returns or sets the events from the polymer widget to handle on the server side. (Default: null)

Each entry is the name of a DOM event fired by the Polymer element, i.e. "tap", "change" or "iron-select". When one of these events occurs, the PolymerEvent event is fired on the server with the event name in Type and the changed values of the Properties in Data. This property hides the inherited Events list of event handlers.

Example:

Handling the "tap" event of a Polymer button:

this.polymerWidget1.ElementType = "paper-button";
this.polymerWidget1.Events = new[] { "tap" };
this.polymerWidget1.PolymerEvent += (s, e) =>
{
    if (e.Type == "tap")
        AlertBox.Show("Tapped!");
};

Properties

Object: Returns or sets the specified property values on the polymer widget and defines the properties to receive back when an event is fired.

Each field of this dynamic object is assigned to the property with the same name of the Polymer element. When one of the Events is fired, the fields whose value has changed on the client are sent back, updated in this object and passed in Data. Only properties listed here are sent back: add a field with its initial value to track a property. Changing a field of the existing object doesn't update the client automatically; call Update. The disabled field is managed automatically according to the Enabled property.

Example:

Changing the properties of a Polymer checkbox and sending them to the client:

this.polymerWidget1.ElementType = "paper-checkbox";
this.polymerWidget1.Events = new[] { "change" };
this.polymerWidget1.Properties.@checked = false;
this.polymerWidget1.Update();

// later, after the "change" event:
bool isChecked = this.polymerWidget1.Properties.@checked;

Text

String: Returns or sets the HTML content associated with this polymer widget. (Default: "")

Value: The inner HTML content of the polymer widget.

The text is assigned as the inner HTML (light DOM) of the Polymer element, i.e. the label of a paper-button or the items of a paper-listbox.

Example:

Setting the label of a Polymer button:

this.polymerWidget1.ElementType = "paper-button";
this.polymerWidget1.Text = "<iron-icon icon='check'></iron-icon>Accept";

Methods

OnEnabledChanged(e)

Fires the EnabledChanged event.

Parameter	Type	Description
e	EventArgs	An EventArgs that contains the event data.

OnPolymerEvent(e)

Fires the PolymerEvent event.

Parameter	Type	Description
e	WidgetEventArgs	A WidgetEventArgs that contains the event data.

OnWebEvent(e)

Processes the event from the client.

Parameter	Type	Description
e	WisejEventArgs	Event arguments.

OnWebRender(config)

Renders the client component.

Parameter	Type	Description
config	Object	Dynamic configuration object.

Update()

Updates the widget definition on the client.

The whole Properties object is always sent to the client, not only the changed values. Call this method after changing the fields of Properties.

Example:

Changing a property of the Polymer element:

this.polymerWidget1.Properties.value = 75;
this.polymerWidget1.Update();

Events

PolymerEvent

WidgetEventHandler Fired when the widget fires an event.

Implements

Name	Description
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejSerializable