Next Generation B / S Development Framework - Echo Tutorial (7)
Write your own control
Envy the Echopoint control? Don't worry, you can do it.
Write controls can be divided into two ways: take a wood and colon.
A: Located by wood
In the tutorial (5), we have implemented editable drop-down menu. It is actually a combination of some controls, just like a wooden wood. Note: These blocks are reusable in OO programming, The help area that can be hidden in Echo Demo.
In the process of making a website, we usually divide the page into several large areas, each large area can be divided into several small areas. Most of these areas are repeated in different pages, or slightly change. For example, Banner / Navigation bar / shopping cart. We can pack them into separate controls and achieve dynamic effects.
In HTML, we often use CSS to change the style of the website. In Echo, you can extend each ECHO control yourself. Then use these extensions to construct your website. This seems to be Crazy, but think about it: Adjust these controls, the overall style of the website will change together. Even your control add functions, let each input box automatically Tab to the next. These work Wasted a lot of time in traditional website production.
B: Substitute
Echo will not make JS masters to be unemployed. It will only make you farewell to boring duplicate labor, focus on developing difficult controls. An example of constructing link on the page. Its Component is simple:
Package org.steeven.component;
Import nextapp.echo.component;
Public class link extends component {
PRIVATE STRING TEXT;
Private string URL;
Public Link (String text, string url) {
THIS.TEXT = TEXT;
this.url = URL;
}
Public Link (String URL) {
THIS (URL, URL);
}
Public string gettext () {
Return TEXT;
}
Public string geturl () {
Return URL;
}
Public void settext (string newvalue) {
String oldValue = text;
Text = newValue;
FirePropertyChange ("Text", OldValue, NewValue;
}
Public void seturl (String newValue) {
String oldValue = URL;
URL = NewValue;
FirePropertyChange ("URL", OldValue, NewValue;
}
}
Below is the peer class responsible for outputting HTML:
Package org.steeven.component;
Import java.beans. *;
Import nextapp.ecHoservlet. *;
Import nextapp.ecHoservlet.html. *;
Public Class Linkui Extends ComponentPeer
Implements propertychangelistener {
Public static void register () {
// The configuration file name is: peerbindings.properties, under the same directory
Echoserver.loadpeerbindings ("Org.steeven.component.peerbindings");
}
Public Void PropertyChange (PropertyChangeEvent E) {
Redraw ();
}
Public void registered () {
getComponent (). AddpropertyChangelistener (this);}
Public void unregistered () {
GetComponent (). RemovePropertyChangeListener (this);
}
Public Void Render (RenderingContext RC, Element Parent) {
LINK LINK = (LINK) getcomponent ();
ELEMENT Element = New Element ("a", false);
Element.addattribute ("Target", "_ Blank");
Element.addattribute ("href", link.geturl ());
Element.addText (link.getText ());
Parent.addelement (element);
}
}
The key part is in the render () method. Specific operation Similar to XML, it constructs a small section html: Text Note:
Parameters RenderingContext provides HTTP information and current document information. For more information, please refer to the tutorial on the Echo website. If you write a good control, you can contribute to Echopoint, see the Echopoint home page.
