asp.net Atlas Simple Controls Introduction

Asp.net| Control A

Sp.net Atlas introduces the concept of client-side controls, encapsulating the DOM elements that client-side JavaScript will manipulate with object-oriented thinking, bringing a clearer code model and better reusability (where inefficiencies are less efficient). The client-side control of Atlas is a bridge between JavaScript and DOM elements, and we should use client controls as much as possible to deal with DOM elements, which is to write our programs in Atlas. At the same time, Atlas's powerful JavaScript-oriented expansion (see ASP.net atlas for JavaScript extensions) also makes it easy to build custom controls by inheriting, covering, and so on.

In some of the previous posts, I introduced some of the more complex controls in Atlas. But at the same time, Atlas also provides some simple/basic client controls that are also useful in development, allowing us to familiarize ourselves with the simple client controls that come with Atlas from the series.

All of the Atlas client controls inherit from the Sys.UI.Control base class, while Sys.UI.Control inherits from the Sys.Component base class, let's take a look at the properties that Sys.Component provides:

1. Id:atlas The identifier of the component to connect the Atlas client component with the DOM element. This ID value is the same as the id attribute value of the DOM element, which Atlas uses to find the relevant DOM element.
2. Bindings: A collection of bindings for this component. For bindings in Atlas, refer to: Atlas Uncover-Bindings (Binding).
3. DataContext: The action object of the binding of this component. If you set this property, all bound entries will inherit this object by default, but you can also override this default setting in the declaration of the binding.
4. IsInitialized: Boolean value that represents whether the component has been initialized. Read-only.
5. Isupdating: This component is being updated, and is true at the beginning of the call to the BeginUpdate () method to the EndUpdate () method, and the other time false. Read-only.

Sys.Component also provides the following methods:

1. BeginUpdate and EndUpdate: Depending on the implementation of the base class, you can delay or update a batch of components by calling both methods to improve performance or reduce screen flicker.
2. Initialize: constructors, needless to say, an inheriting class can extend the method and initialize its own members.

There are also the following events:

1. PropertyChanged: This event should be raised when an attribute of a component changes. The implementation of the Atlas binding depends on this event.

Now let's look at the properties provided by Sys.UI.Control:

1. AccessKey: Gets or sets the accessKey of the control, which is the wrapper for the AccessKey property in the DOM element.
2. Associatedelement: Returns the associated DOM element of the control. This property should be passed to the constructor of the control and cannot be modified after construction.
3. Behaviors: A behavior collection of this component. For behavior in Atlas, refer to: Create a custom behavior in ASP.net atlas.
4. CssClass: Gets or sets the CSS class for the control, which is the wrapper for the Class attribute in the DOM element.
5. Enabled: Represents whether the control is enabled, which is the wrapper for the Enabled property in the DOM element.
6. Parent: Gets or sets the parent control of the control.
7. Style: Gets the Style property value of the DOM element corresponding to the control.
8. TabIndex: Gets or sets the tab index of the control.
9. VisibilityMode: Gets or sets the display mode of the control when it is hidden. Optional enumeration value: Sys.UI.VisibilityMode.Collapse represents the control when it is hidden and does not occupy the page space, and Sys.UI.VisibilityMode.Hidden still occupies its place when the control is hidden.
Visible: Gets or sets whether the control is visible.

Sys.UI.Control also provides the following methods:

1. addCssClass: Adds a CSS Class to the control.
2. Removecssclass: Deletes a CSS Class for the control.
3. Containscssclass: Returns a Boolean value that represents whether the control has the specified CSS Class.
4. toggleCssClass: If the control does not have a specified CSS Class, it is added and, if so, deleted.
5. Focus: Enables the control to get input focuses.
6. scrollIntoView: Causes the control to scroll to the visible range of the screen.
7. OnBubbleEvent: Handles the bubble event emitted by the child control of the control. You can find the practical application of this method in this article: using the ASP.net Atlas pagenavigator control to implement client paging navigation.
8. RaiseBubbleEvent: This method will invoke the OnBubbleEvent method of all the parent controls of the control to implement the bubble event. You can find the practical application of this method in this article: using the ASP.net Atlas pagenavigator control to implement client paging navigation.


Atlas
The client controls in are inherited or indirectly inherited from the Sys.UI.Control base class (refer to: ASP.net Atlas simple Control Introduction- Sys.Component base class and Sys.UI.Control base Class), and has been extended, this article introduces the simple control Inputcontrol,textbox,button and checkbox built in Atlas.

Sys.UI.InputControl

The Inputcontrol class is an abstract class that serves as a base class for all controls that provide user input (for example, a textbox, see below), providing a public operation such as input data validation. The Inputcontrol abstract class provides the following properties:

1. IsValid: This property is read-only and returns a Boolean value that indicates whether the input data is validated as valid, that is, whether all validator are passed (refer to: Create a custom validator in ASP.net atlas).
2. Validationmessage: This property is read-only, returns a string. When the validation fails, it contains the first validator error message that caused the failure, or an empty string if the validation succeeds.
3. Validators: Returns the validator collection of the Inputcontrol that enables you to add/remove a validator to validate user input information.

Sys.UI.TextBox

A TextBox control is one of the controls that any GUI must provide, and one of our most common and user-interaction controls. The textbox in Atlas encapsulates the DOM element input for type input, or the DOM element textarea, inherited from the Inputcontrol base class to obtain input data validation functionality. The textbox provides the following properties.

1. Text: Gets or sets the text in the TextBox.

Because the textbox is very commonly used in practical programming, we often need to extend it. For the expansion of the TextBox space, interested friends please refer to:

1. Using ASP.net atlas to develop in place editing input controls
2. Using ASP.net atlas to develop a textarea for automatically adjusting the number of rows with input

Sys.UI.Button

Button controls are equally important in the GUI. Atlas extends the button concept in the DOM element so that the button does not simply refer to the type as a button or submit HTML INPUT element, but can also be applied to elements such as SPAN,A, providing a unified programming interface for developers. The button provides the following two properties:

1. Command: Gets or sets a string that represents the name of the command that is thrown by the button. When the button's parent control allows event bubbling, the parent control's OnBubbleEvent event handler can access the property to get the name of the command that the button passed over.
2. Argument: Gets or sets a string that represents the command arguments that are thrown by the button. When the parent control of the button allows event bubbling, the property can be accessed by the parent control's OnBubbleEvent event handler to get the arguments passed by the button.

The above two properties are useful in some cases, and you can see their actual application in client paging navigation using the ASP.net Atlas pagenavigator control.

The button also provides the following events:

1. Click: triggers when the button is clicked.

Note: When a button is clicked, the button's Click event is triggered first, and then the OnBubbleEvent event of the button's parent control is triggered.

Sys.UI.CheckBox

The checkbox in Atlas encapsulates the input DOM element with the type as a checkbox. The user can use it to enter a Boolean value. A checkbox provides the following properties:

1. Checked: Gets or sets a Boolean value that represents whether the checkbox is selected.

The checkbox also provides the following events:

1. Click: triggers when the checkbox is clicked.


Client controls in Atlas inherit or indirectly inherit from the Sys.UI.Control base class (refer to: ASP.net Atlas simple Control Introduction- Sys.Component base class and Sys.UI.Control base Class), and has been extended in the previous article (asp.net the Atlas simple control Introduction--inputcontrol,textbox,button and CheckBox), I introduced the Inputcontrol,textbox,button and CheckBox controls. This article will continue to introduce the remaining four simple controls built in Atlas: Label,hyperlink,select and image.

Sys.UI.Label

The label control in Atlas can be used to display a piece of text and also as a placeholder for a piece of HTML. The Label control has the following properties:

1. Text: Gets or sets the contents of the label. This content can be displayed either as text or as HTML, depending on the setting of the HTMLEncode property.
2. HtmlEncode: Gets or sets a Boolean value. Represents whether the content in the label is displayed in plain text and the default value is False.

Sys.UI.HyperLink

The hyperlink control inherits from Sys.UI.Label to encapsulate the a element in HTML. In addition to owning all the attributes of a label, hyperlink provides the following properties:

1. NavigateUrl: Gets or sets the navigation URL in hyperlink, which is the wrapper over the href attribute of a element.

The following events:

1. Click: triggers when the hyperlink is clicked.

Sys.UI.Select

The select control encapsulates a DOM element select, which can be used to represent a drop down List. The Select control has the following properties:

1. Firstitemtext: Gets or sets the text of the first item in the list. Can be set to the text such as "Please select ..." to prompt the user to enter. The default value is blank, which means that the text you are prompted to enter is not displayed.
2. SelectedValue: Gets or sets the value of the selected entry in the list.
3. Data: Gets or sets a DataTable (for the Atlas client DataTable object, refer to: Sys.data under the Atlas namespace--datacolumn,datarow and DataTable), Represents the data in the select.
4. Textproperty: Gets or sets a string that represents the name of the field that will be displayed as the text in the entry in the Data property.
5. Valueproperty: Gets or sets a string that represents the name of the field in the DataTable in the Data property that will be the value in the entry in the Select.

The following events:

1. SelectionChanged: Raised when the selected entry in the Select changes.

Sys.UI.Image

The image control, as a encapsulation of the DOM element IMG, provides the following properties:

1. ImageURL: Gets or sets a string representing the path of the image that encapsulates the SRC attribute of the IMG element.
2. AlternateText: Gets or sets a string representing the caption of the picture, which is the encapsulation of the ALT attribute of the IMG element.
3. Width: Gets or sets the width of the picture.
4. Height: Gets or sets the height of the picture.

Original address: Http://dflying.cnblogs.com/archive/2006/05/07/introduct ... label_hyperlink_select_image.html