Internationalization and integration of the dojo date Control

Last Update:2018-12-04 Source: Internet

Author: User

Tags ibm db2 websphere application server

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Dojo date control type

Currently, Dojo supports two date controls:

Figure 1. dijit. Form. timetextbox

The time control is displayed in the format of HH: mm: Ss. It supports internationalization and the format varies depending on the country.

Figure 2. dijit. Form. datetextbox

The date control is displayed in the format of yyyy-mm-dd.

Class hierarchy of the dojo date Control

Figure 3. Structure of the dojo date control class

Figure 3 lists the main components on which the dojo date control depends. Their functions are described as follows:

Dijit. Form. _ formiwidget

The base classes of all dijit controls define some common features of the dojo control, such as the ID, name attribute, onfocus, and onchange events.

Dijit. Form. textbox

An encapsulation of a common HTML text box.

Dijit. Form. validationtextbox

Text Box that provides the verification function. Subclass can override the isvalid () method to customize the verification rules.

Dijit. Form. mappedtextbox

A hidden field corresponding to the text box is provided to store the results of the internal processing of dojo, and a method of serialize is provided to convert the internal value and the display value.

Dijit. Form. rangeboundtextbox

You can define the value range control and provide an interface isinrange to determine whether the control is within the specified range.

Initialization of the dojo date Control

Dojo provides two ways to initialize controls: Declaration and programming.

Declaration Method

By adding the dojotype attribute to the HTML control, the value is the class name of the dojo control. During page loading, dojo will specify the dojotype
<Input type = "text" dojotype = "dijit. Form. timetextbox"
Id = "text001">. After the page is loaded, it is converted into a dojo time control.

How does dojo convert a common HTML control to a dojo control? Dojo. parser plays a major role in it. Dojo. parser
The page is traversed to retrieve the HTML elements with the dojotype attribute, and the dojo is initialized Based on the dojotype value.
Control object. At the same time, the attribute value of the element on the page is passed as a parameter to the initialization method. dojo converts the parameter value to the desired type. Example: <input type = "text"
Dojotype = "dijit. Form. timetextbox" id = "text001" value = "T14: 22"> dojo
The dijit. Form. timetextbox control is initialized, and the value = "T14: 22" is used as a parameter to be passed to the initialization method.
The Value Attribute of dijit. Form. timetextbox is of the date type. Therefore, dojo. parser converts dijit. Form. timetextbox. In this case, the dojo
The date conversion function will be detailed later. The Code is as follows:

Listing 1. Declare the method to initialize dojo

<script　djConfig="parseOnLoad:true,isDebug:true,locale:'zh-cn'"src="<%=Context%>　　/javascript/dojo/dojo.js"　></script>　　<script　type="text/javascript">　　dojo.require("dojo.parser");　　dojo.require("dijit.form.TimeTextBox");　　</script>　　<body　class="tundra">　　<input　type="text"　id="text001"　dojoType="dijit.form.TimeTextBox"　value="T14:22">

Figure 4. Structure of the dojo date control class

Programming Method

Dojo allows you to use the dojo control in a more object-oriented manner. The above example can be initialized in the following way.

New dijit. Form. timetextbox ( {"ID": "text002", "value": dojo. Date. locale. parse ("", {selector: "Time "})}, Dojo. byid ("text001 "));

This method has two parameters: the first is a set of dojo object attribute values, and the second parameter specifies the position of the dojo control on the page. In this example, the ID value is text001.
The HTML element of is replaced with the dojo control (Note: The original HTML control will be removed ). The first parameter also has two attribute IDs and values.
The dojo control is no longer processed by dojo. parser. Therefore, the value of the Value Attribute must be of the date type. We use dojo. Date. locale. parse
Method to convert the string to the date type. here we can see that the string is also converted to the date type. The data formats of different methods are very different and will be described in detail later,
The detailed code is as follows: List (lists) is a common element in the article. The list is divided into an ordered list (a list with numerical order) and an unordered list (a list without numerical order ).

Listing 2. initialize the dojo Program

<SCRIPT djconfig = "parseonload: True, isdebug: True, locale: 'zh-cn'" src = "<% = context %> /JavaScript/dojo. js "> </SCRIPT> <SCRIPT type = "text/JavaScript"> Dojo. Require ("dojo. parser "); Dojo. Require ("dijit. Form. timetextbox "); </SCRIPT> <Body class = "tundra"> <Input type = "text" id = "text001"> <SCRIPT> New dijit. Form. timetextbox ( {"ID": "text002", "value": dojo. Date. locale. parse ("", {Selector: "Time"})}, dojo. byid ("text001 ")); </SCRIPT>

Figure 5. initialize the dojo effect by programming

We can see that these two methods have the same effect. The declaration method is simple to define the dojo control, and the dojo. parser
It helped us to do a lot of auxiliary work. The programming method is a little more complex, but it is more flexible than the declarative method, so we can easily control its initialization process.

Combination of the two methods

Of course, in some cases, there is a need to have the flexibility of programming and the simplicity of declarative methods. For example, I want to control when to generate dojo.
Control, and do not want to write the method to convert the parameter value. You can do this by using the following method. Do not add the dojotype attribute to the HTML code. when we need it, specify HTML by programming
The dojotype property value of the control, and then parse the HTML code to generate the dojo by calling the dojo. parser. instantiate () method.
In this way, we can dynamically control the generation of the dojo control and use the powerful functions of dojo. parser. The following code can be used for the example above:

Listing 3. Combining the two methods with page code

The page effect is the same as that of the first two methods.

Internationalization policy of the dojo date Control

The previous section gave a general introduction to the dojo date control. We learned the class hierarchy of dojo and how to use it. This section mainly introduces the dojo
Date control's processing of time and support for internationalization.

Time processing by the dojo date Control

Most dojo controls inherit from the same base class, so they have similar behavior methods:

The onfocus event is used to trigger the dojo control;

If it is inherited from dijit. Form. validationtextbox, the values are verified through the onkeyup event;

You can use the onblur event to close the dojo control.

The date control has the same behavior, and the corresponding time is:

Onfocus: opens the calendar window and verifies the current value;

Onkeyup: checks the current value;

Onblur: Close the calendar window and verify the current value.

After learning about the events of the dojo date control, the following describes the methods provided by dojo for data processing, setvalue () and getvalue ().

Setvalue Method

When the date control is initialized, it will pass an initial value of the date type to it. In the initialization method, it is being paid by calling setvalue ().
Setvalue (date): In this method, two operations are performed: Convert date data to a string using the format attribute defined method, and save it to the value of textbox.
In the property, textbox is the text box in the dojo date control that we can see on the page; Use the serialize property definition method to convert the date type data into strings and save them
In the value attribute of valuenode, valuenode is the hidden field corresponding to textbox. In dijit. Form. timetextbox, the default
The format method is Dojo. Date. locale. format, and the serialize method is Dojo. Date. Stamp. toisostring.
.

Getvalue Method

The getvalue () method returns the value type of the date control. The two fields textbox and valuenode of the dojo date control are mentioned above.
Data of the string type is stored in. Therefore, this method will convert it to the date type. dijit. Form. timetextbox by default.
Dojo. Date. locale. parse (/* string */value,/* object? */Options) the method is based on the specified locale (
Specify in djconfig) and format (specified in the selector attribute of the input parameter) to convert the value in textbox to the date type.

Dojo date control's support for internationalization

The dojo date control supports internationalization mainly in the two classes of dojo. Date. locale and dojo. Date. Stamp under the dojo. Date package.
.

Dojo. Date. Stamp

Converts between the date and string types based on ISO-8601 standards. The ISO-8601 supports the following formats:

Date Yyyy Yyyy-mm Yyyy-mm-dd Time Thh: mm Thh: mm: SS Thh: mm: Ss. Sss

The methods contained in the dojo. Date. Stamp class are:

Dojo. Date. Stamp. fromisostring

Converts string to date.

Example: dojo. Date. Stamp. fromisostring ("2005-06-30t08: 05: 00 ");

The converted date type is printed with firebug in Firefox as follows:

Figure 6. Date value actually stored by dojo

While dojo. Date. Stamp. fromisostring ("t08: 05: 00 ");

Because the ISO-8601 standard is not met, an empty date object is generated.

Dojo. Date. Stamp. toisostring

Convert date to string

Example: dojo. Date. Stamp. toisostring (new date ())

As mentioned above, if the dojo date control is generated using the declaration method, Dojo uses the dojo. Date. Stamp. fromisostring
Method to initialize it, so we must follow the ISO-8601 standard when re-configuring the control, otherwise a null value will be generated. How to Make dojo
What about accepting data in non-standard format? We know that the dojo date control uses two fields to store data: textbox and
Valuenode, no matter how it processes the data during initialization, the final result is stored in these two domains, so we can directly repeat our values to these two domains, even if
The conversion of the dojo. Date. Stamp. fromisostring () method fails. We can also assign the value to dojo. For example:

Listing 4. Directly assigning values to the hidden fields of dojo

Of course, it is not recommended that we do this. After all, it provides us with interfaces to operate on its values: setvalue () and getvalue ()
. However, since we do not have the chance to access these two methods in the declaration method, if we do not adopt the method of force Repeat, we can only generate dojo through programming. In programming, we directly pass a date
The object is sent to dojo rather than a string. Therefore, you can define a conversion method to convert string to date before transmission.

Listing 5. assign values through the interface provided by dojo

<SCRIPT type = "text/JavaScript"> <SCRIPT type = "text/JavaScript"> Dojo. Require ("dojo. parser "); Dojo. Require ("dojo. Date. Stamp "); Dojo. Require ("dojo. Date. locale "); Dojo. Require ("dijit. Form. timetextbox "); </SCRIPT> <Body class = "tundra"> <Input type = "text" id = "text001"> <SCRIPT> New dijit. Form. timetextbox ({"ID": "text002", "value": dojo. Date. locale. parse ("", {Selector: "Time"})}, dojo. byid ("text001 ")); </SCRIPT> </Body>

The dojo. Date. locale. parse method is used here, which is described in detail below.

Dojo. Date. locale

Converts string to date based on the specified locale.

Two methods are introduced: dojo. Date. locale. parse () and dojo. Date. locale. Format ().

Dojo. Date. locale. parse ()

Converts a string to a date type based on specified parameters.

The string format must match the locale on the current page. Otherwise, the conversion will fail. For example:

Listing 6. Code 1 for converting a string to a date type

<script　djConfig="parseOnLoad:true,isDebug:true,locale:'zh-cn'"　src="<%=Context%>　　　/javascript/dojo/dojo.js"　>　　　</script>　　<script>　　　dojo.date.locale.parse("12:30",{selector:　"time"});　　</script>

If the execution result is null, the conversion fails. Because the time format of locale: ZH-CN is "", replace it with the following code:

Listing 7. Code 2 for converting a string to a date type

<SCRIPT djconfig = "parseonload: True, isdebug: True, locale: 'zh-cn'" src = "<% = context %> /JavaScript/dojo. js "> </SCRIPT> <SCRIPT> Dojo. Date. locale. parse ("12:30 PM", {selector: "Time "}); </SCRIPT>

The conversion is successful. From this we can see that if you want to convert the string to the date type, the string format must match the locale on the current page, which adds some constraints to the conversion.

Dojo. Date. locale. Format ()

Converts a date type to a string in the specified format.

When converting a date type to a string, it is not required to match locale, so it is more flexible to use.

Listing 8. Converting a date to a string code 1

dojo.date.locale.format(new　Date(),　{selector:'time',　timePattern:'HH:mm:ss'});

The converted result is: 10:18:41.

Listing 9. Code 2 for converting a date to a string

dojo.date.locale.format(new　Date(),　{selector:'date',　datePattern:'yyyy-MM-dd'});

Conversion Result:

Listing 10. Code 3 for converting a date to a string

dojo.date.locale.format(　　　d,{selector:'datetime',　datePattern:'yyyyMMdd',timePattern:'HHmmss'});

The conversion result is 20081010 101841.

Application of the above method in the dojo date Control

Some tools provided by dojo for time processing are described above. The following describes how to use these tools for the dojo date control. When a negative value is given to the dojo date control
The format attribute definition method converts it to a string and saves it to textbox. As the display value, the serialize attribute definition method converts the date data to a string and saves it
Valuenode, used as the actual value of the dojo date control to convert the value in textbox
Date type.

The method corresponding to the format attribute is Dojo. Date. locale. format ,;

The method corresponding to the serializet attribute is Dojo. Date. Stamp. toisostring;

The method corresponding to the parse property is Dojo. Date. locale. parse;

Format method: dojo. Date. locale. Format

The dateobject is converted according to the specified format.

We can specify locale through the following configuration on the page: <SCRIPT djconfig = "parseonload: True, isdebug:
True, locale: 'zh-cn' "> the date format can be defined in the selector attribute of the input parameter options. Currently, Dojo supports three formats.
: Date, time, timestamp. However, Dojo only defines the control class dijit. Form. datetextbox and
Dijit. Form. timetextbox. If you need a timestamp-type control, you can extend dijit. Form. timetextbox
The Code is as follows:

Listing 11. Extend the dojo date Control

dojo.declare("dijit.form.TimestampTextBox",dijit.form.TimeTextBox,{　　　postMixInProperties:　function(){　　　　　this.inherited('postMixInProperties',　arguments);　　　　　this.constraints.selector　=　'timestamp';　　　}　 });

Of course, you can also customize the format method to convert the date type.

Serialize method: dojo. Date. Stamp. toisostring

Converts the date type according to the ISO-8601 standard, and the converted value is included in valuenode, which is
The real value of the date control, so if the format cannot meet our requirements, you can use the custom serialize method to solve the problem. For example: China time displayed on the page as: Morning
10:17:00. If the default serialize method is used, the actual value is T10: 17: 00. We can see that there is another t before the time. If we want the final result to be,
The serialize method can be defined as follows.

Listing 12. Custom serialize Method

function(d,　options)　{　　　return　dojo.date.locale.format(　　　　　d,　{selector:'time',timePattern:'HH:mm:ss'}　　　);　　}

These methods have been described in detail above. If the above methods cannot meet the requirements in actual application, we can change the corresponding methods of relevant attributes to achieve the goal. At the same time, we note that all the above methods have
Options parameter. this parameter is used to specify the conversion format. It is an object-type data and corresponds to the following attributes: selector: used to specify the type to be converted, Dojo
The defined values include date and time. If they are other values, both date and time are included.

Formatlength: the length of the converted string. Optional values include long, short, medium, and full. The default value is short.

Datepattern: Format of the date part

Timepattern: Format of the time part

Locale: Set international parameters

Integration with background Systems

With the introduction to the international support of the dojo date control, we know that as a popular Javascript
Open-source framework, which has powerful support for date internationalization. Currently, many web applications are based on dojo.
To internationalize the date. However, not every background system has powerful support for date internationalization, and some background systems may have limited support for date internationalization.
When we integrate with these background systems to support date internationalization, we need to do some additional development work. Here we use IBM DB2 Content Manager as an example.
If dojo is integrated with the background system, we also provide some integration development skills.

IBM DB2 Content Manager's support for date internationalization:

Is DB2 Content Manager built on DB2 Universal Database? The content repository based on the stored procedure, using IBM
WebSphere Application Server provides Content Retrieval and security, as well as Tivoli? Storage Manager
Provides object migration, backup, and recovery. Cm can be used as an enterprise repository for structured and unstructured data to store documents in any format. DB2 Content Manager supports internationalization of content
(Globalization), but it does not support date internationalization very well. For example, for date data, CM requires the format to be yyyy-mm-dd.
If the default date format of a country is mm-dd-yyyy, the date data in this format cannot be kept in cm, the only way is to convert the format of other dates to yyyy-mm-dd.
Format, and then save. The date formats supported by cm are listed below:

Listing 13. date formats supported by cm

Type	Format
Date	Yyyy-mm-dd
Time	HH. Mm. SS or hh: mm: SS
Timestamp	Yyyy-MM-dd-HH.mm.ss.SSSSSS Or yyyy-mm-dd Hh: mm: Ss. Ssssss

Based on the analysis of the date formats supported by cm, we can conclude that the date data to be saved to CM must be converted into a format before being saved. When using dojo
As the front-end, CM is used as the background web application development. In the front-end web page, dojo has powerful support for date internationalization. Therefore, you need to upload the date to the background cm in the dojo date control.
Convert the date to the format supported by cm. The flowchart is as follows:

Figure 7. flowchart of date conversion between dojo and cm

View the source image (large image)

Through the flowchart above, we can clearly know that the date format conversion is required before the dojo date control transfers the date data to CM.
Data of the date, time, and timestamp types describes how to convert a date:

Date

Listing 14. date type conversion code

　　dojo.declare("MyDateTextBox",[dijit.form.DateTextBox],{　　　serialize:　function(d,　options)　{　　　　　return　dojo.date.locale.format(　　　　　　　d,　{selector:'date',　　　　　　　　　datePattern:'yyyy-MM-dd',　　　　　　　　　timePattern:'HH:mm:ss'}).toLowerCase();　　　},　　});

Note: To define your own dojo date control, you must inherit dijit. Form. datetextbox (default date control in Dojo)
;

Overload the serialize method in dijit. Form. datetextbox: Specify the current control type as date (selector: 'date
') To convert the date value in the control to the yyyy-mm-dd format.

Time

Listing 15. Time type conversion code

　　dojo.declare("MyTimeTextBox",[dijit.form.TimeTextBox],　{　　　serialize:　function(d,　options)　{　　　　　return　dojo.date.locale.format(　　　　　　　d,　{selector:'time',　　　　　　　　　datePattern:'yyyy-MM-dd',　　　　　　　　　timePattern:'HH:mm:ss'}).toLowerCase();　　　},　　});

Note: To define your own dojo time control, you must inherit dijit. Form. timetextbox (Default Time Control in Dojo );
Serialize method in dijit. Form. timetextbox: Specify the current control type as time (selector: 'time '),
Convert the time value in the control to HH: mm: SS format.

Timestamp

Listing 16. timestamp type conversion code

dojo.declare("MyTimestampTextBox",[dijit.form.TimeTextBox],　{　　　serialize:　function(d,　options)　{　　　　　return　dojo.date.locale.format(　　　　　　　d,　{selector:'datetime',　　　　　　　　　datePattern:'yyyy-MM-dd',　　　　　　　　　timePattern:'HH:mm:ss'}).toLowerCase()　+　".000000";　　　}　　});

Note: To define your own dojo timestamp control, you must inherit dijit. Form. timetextbox (Default Time Control in Dojo ).
); Reload the serialize method in dijit. Form. timetextbox: specify the type of the current control as datetime (selector :'
Datetime '), convert the timestamp value in the control to yyyy-mm-dd hh: mm: Ss. Ssssss format. In this example, set the last six microseconds
0, because in normal applications, the microseconds are basically not used. Of course, you can set different values as needed.

Summary

Dojo is a fully functional and scalable JavaScript toolkit that provides an object-oriented programming model. This article mainly introduces dijit
The date control under the package provides a detailed description of its framework structure, usage, and extension points. By studying this article, we believe that you will be able to skillfully use the dojo date control in your project and learn how to use other dojo
Control, it also provides you with a good learning idea

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More