diff --git a/en/application-dev/Readme-EN.md b/en/application-dev/Readme-EN.md
index 0363d1f89ac76ca3c8187637a46b3b4230d3dab6..206b69d6dc613a4e9434bbbf161f2d33c99c1b1c 100644
--- a/en/application-dev/Readme-EN.md
+++ b/en/application-dev/Readme-EN.md
@@ -16,6 +16,7 @@
- [Data Management](database/Readme-EN.md)
- [USB Service](usb/Readme-EN.md)
- [DFX](dfx/Readme-EN.md)
+- [WebGL](webgl/Readme-EN.md)
- [Development References](reference/Readme-EN.md)
- [JavaScript-based Web-like Development Paradigm](reference/arkui-js/Readme-EN.md)
- [TypeScript-based Declarative Development Paradigm](reference/arkui-ts/Readme-EN.md)
diff --git a/en/application-dev/reference/apis/js-apis-i18n.md b/en/application-dev/reference/apis/js-apis-i18n.md
index 0763a1598728414c51ec8036cbe2243235d012b0..27dc8eb464f9615f0b61462a5f7f81d71195d1f1 100644
--- a/en/application-dev/reference/apis/js-apis-i18n.md
+++ b/en/application-dev/reference/apis/js-apis-i18n.md
@@ -1,7 +1,6 @@
-# Internationalization (i18n)
+# Internationalization \(i18n\)
-
-> **NOTE:**
+> **NOTE:**
>- The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>- This module contains enhanced i18n APIs, which are not defined in ECMA 402.
@@ -21,10 +20,9 @@ getDisplayLanguage\(language: string, locale: string, sentenceCase?: boolean\):
Obtains the localized script for the specified language.
-- Parameters
+- Parameters
-
Name
Type
@@ -85,8 +83,8 @@ Obtains the localized script for the specified language.
- Example
```
- i18n.getDisplayLanguage("zh", "en-GB", true);
- i18n.getDisplayLanguage("zh", "en-GB");
+ I18n.getDisplayLanguage("zh", "en-GB", true);
+ I18n.getDisplayLanguage("zh", "en-GB");
```
@@ -159,8 +157,8 @@ Obtains the localized script for the specified country.
- Example
```
- i18n.getDisplayCountry("zh-CN", "en-GB", true);
- i18n.getDisplayCountry("zh-CN", "en-GB");
+ I18n.getDisplayCountry("zh-CN", "en-GB", true);
+ I18n.getDisplayCountry("zh-CN", "en-GB");
```
@@ -242,7 +240,7 @@ Obtains the system language.
- Example
```
- i18n.getSystemLanguage();
+ I18n.getSystemLanguage();
```
@@ -272,7 +270,7 @@ Obtains the system region.
- Example
```
- i18n.getSystemRegion();
+ I18n.getSystemRegion();
```
@@ -302,7 +300,7 @@ Obtains the system locale.
- Example
```
- i18n.getSystemLocale();
+ I18n.getSystemLocale();
```
@@ -366,7 +364,7 @@ Obtains a **Calendar** object.
- Example
```
- i18n.getCalendar("zh-Hans", "gregory");
+ I18n.getCalendar("zh-Hans", "gregory");
```
@@ -532,7 +530,7 @@ Sets the year, month, day, hour, minute, and second for this **Calendar** obje
- Example
```
- var calendar = i18n.getCalendar("zh-Hans");
+ var calendar = I18n.getCalendar("zh-Hans");
calendar.setTime(2021, 10, 1, 8, 0, 0); // set time to 2021.10.1 08:00:00
```
@@ -571,7 +569,7 @@ Sets the time zone of this **Calendar** object.
- Example
```
- var calendar = i18n.getCalendar("zh-Hans");
+ var calendar = I18n.getCalendar("zh-Hans");
calendar.setTimeZone("Asia/Shanghai");
```
@@ -602,7 +600,7 @@ Obtains the time zone of this **Calendar** object.
- Example
```
- var calendar = i18n.getCalendar("zh-Hans");
+ var calendar = I18n.getCalendar("zh-Hans");
calendar.setTimeZone("Asia/Shanghai");
calendar.getTimeZone(); // Asia/Shanghai"
```
@@ -674,7 +672,7 @@ Sets the start day of a week for this **Calendar** object.
- Example
```
- var calendar = i18n.getCalendar("zh-Hans");
+ var calendar = I18n.getCalendar("zh-Hans");
calendar.setFirstDayOfWeek(0);
```
@@ -705,7 +703,7 @@ Obtains the minimum number of days in the first week of a year.
- Example
```
- var calendar = i18n.getCalendar("zh-Hans");
+ var calendar = I18n.getCalendar("zh-Hans");
calendar.getMinimalDaysInFirstWeek();
```
@@ -800,7 +798,7 @@ Obtains the value of the specified field in the **Calendar** object.
- Example
```
- var calendar = i18n.getCalendar("zh-Hans");
+ var calendar = I18n.getCalendar("zh-Hans");
calendar.setTime(2021, 10, 1, 8, 0, 0); // set time to 2021.10.1 08:00:00
calendar.get("hour_of_day"); // 8
```
@@ -857,7 +855,7 @@ Obtains the name of the **Calendar** object displayed for the specified locale
- Example
```
- var calendar = i18n.getCalendar("en-US", "buddhist");
+ var calendar = I18n.getCalendar("en-US", "buddhist");
calendar.getDisplayName("zh"); // Obtain the name of the Buddhist calendar in zh.
```
@@ -913,7 +911,7 @@ Checks whether the specified date in this **Calendar** object is a weekend.
- Example
```
- var calendar = i18n.getCalendar("zh-Hans");
+ var calendar = I18n.getCalendar("zh-Hans");
calendar.setTime(2021, 11, 11, 8, 0, 0); // Set the time to 2021.11.11 08:00:00.
calendar.isWeekend(); // false
var date = new Date(2011, 11, 6, 9, 0, 0);
@@ -966,7 +964,7 @@ Parameters
- Example
```
- var phoneNumberFormat= new i18n.PhoneNumberFormat("CN", {"type": "E164"});
+ var phoneNumberFormat= new I18n.PhoneNumberFormat("CN", {"type": "E164"});
```
@@ -1022,7 +1020,7 @@ Checks whether the format of the specified phone number is valid.
- Example
```
- var phonenumberfmt = new i18n.PhoneNumberFormat("CN");
+ var phonenumberfmt = new I18n.PhoneNumberFormat("CN");
phonenumberfmt.isValidNumber("15812312312");
```
@@ -1079,7 +1077,7 @@ Formats a phone number.
- Example
```
- var phonenumberfmt = new i18n.PhoneNumberFormat("CN");
+ var phonenumberfmt = new I18n.PhoneNumberFormat("CN");
phonenumberfmt.format("15812312312");
```
@@ -1303,7 +1301,7 @@ Creates an **IndexUtil** object.
- Example
```
- var indexUtil= i18n.getInstance("zh-CN");
+ var indexUtil= I18n.getInstance("zh-CN");
```
@@ -1444,7 +1442,7 @@ Obtains the index of a **text** object.
isDigit\(char: string\): boolean
-Checks whether the input character string is comprised of digits.
+Checks whether the input character is a digit.
- Parameters
@@ -1500,7 +1498,7 @@ Checks whether the input character string is comprised of digits.
isSpaceChar\(char: string\): boolean
-Checks whether the input character is comprised of space.
+Checks whether the input character is a space.
- Parameters
@@ -1556,7 +1554,7 @@ Checks whether the input character is comprised of space.
isWhitespace\(char: string\): boolean
-Checks whether the input character is comprised of white space.
+Checks whether the input character is a white space.
- Parameters
@@ -1612,7 +1610,7 @@ Checks whether the input character is comprised of white space.
isRTL\(char: string\): boolean
-Checks whether the input character string is of the right to left \(RTL\) language.
+Checks whether the input character is of the right to left \(RTL\) language.
- Parameters
@@ -1668,7 +1666,7 @@ Checks whether the input character string is of the right to left \(RTL\) langua
isIdeograph\(char: string\): boolean
-Checks whether the input character string is comprised of ideographic characters.
+Checks whether the input character is an ideographic character.
- Parameters
@@ -1724,7 +1722,7 @@ Checks whether the input character string is comprised of ideographic characters
isLetter\(char: string\): boolean
-Checks whether the input character string is comprised of letters.
+Checks whether the input character is a letter.
- Parameters
@@ -1780,7 +1778,7 @@ Checks whether the input character string is comprised of letters.
isLowerCase\(char: string\): boolean
-Checks whether the input character is comprised of lowercase letters.
+Checks whether the input character is a lowercase letter.
- Parameters
@@ -1836,7 +1834,7 @@ Checks whether the input character is comprised of lowercase letters.
isUpperCase\(char: string\): boolean
-Checks whether the input character is comprised of uppercase letters.
+Checks whether the input character is an uppercase letter.
- Parameters
@@ -1995,7 +1993,7 @@ Obtains a [BreakIterator](#section1312302611613) object for text segmentation.
- Example
```
- i18n.getLineInstance("en");
+ I18n.getLineInstance("en");
```
@@ -2036,8 +2034,8 @@ Sets the text to be processed by the [BreakIterator](#section1312302611613) ob
- Example
```
- iterator = I18n.getLineInstance("en");
- iterator.setLineBreakText("Apple is my favorite fruit.");
+ var iterator = I18n.getLineInstance("en");
+ var iterator.setLineBreakText("Apple is my favorite fruit.");
```
@@ -2068,7 +2066,7 @@ Obtains the text being processed by the [BreakIterator](#section1312302611613)
- Example
```
- iterator = I18n.getLineInstance("en");
+ var iterator = I18n.getLineInstance("en");
iterator.setLineBreakText("Apple is my favorite fruit.");
iterator.getLineBreakText(); // Apple is my favorite fruit.
```
@@ -2101,7 +2099,7 @@ Obtains the position of the [BreakIterator](#section1312302611613) object in t
- Example
```
- iterator = I18n.getLineInstance("en");
+ var iterator = I18n.getLineInstance("en");
iterator.setLineBreakText("Apple is my favorite fruit.");
breakIter.current(); // 0
```
@@ -2167,7 +2165,7 @@ Puts the [BreakIterator](#section1312302611613) object to the last text bounda
- Example
```
- iterator = I18n.getLineInstance("en");
+ var iterator = I18n.getLineInstance("en");
iterator.setLineBreakText("Apple is my favorite fruit.");
iterator.last(); // 27
```
@@ -2226,7 +2224,7 @@ Moves the [BreakIterator](#section1312302611613) object backward by the specif
- Example
```
- iterator = I18n.getLineInstance("en");
+ var iterator = I18n.getLineInstance("en");
iterator.setLineBreakText("Apple is my favorite fruit.");
iterator.first(); // 0
iterator.next(); // 6
@@ -2261,7 +2259,7 @@ Moves the [BreakIterator](#section1312302611613) object to the previous text b
- Example
```
- iterator = I18n.getLineInstance("en");
+ var iterator = I18n.getLineInstance("en");
iterator.setLineBreakText("Apple is my favorite fruit.");
iterator.first(); // 0
iterator.next(3); // 12
@@ -2322,7 +2320,7 @@ Moves the [BreakIterator](#section1312302611613) object to the text boundary a
- Example
```
- iterator = I18n.getLineInstance("en");
+ var iterator = I18n.getLineInstance("en");
iterator.setLineBreakText("Apple is my favorite fruit.");
iterator.following(0); // 6
iterator.following(100); // -1
@@ -2383,9 +2381,285 @@ Checks whether the position specified by the offset is a text boundary. If **tr
- Example
```
- iterator = I18n.getLineInstance("en");
+ var iterator = I18n.getLineInstance("en");
iterator.setLineBreakText("Apple is my favorite fruit.");
iterator.isBoundary(0); // true;
iterator.isBoundary(5); // false;
```
+
+## i18n.is24HourClock8+
+
+is24HourClock\(\): boolean
+
+Checks whether the 24-hour clock is used.
+
+- Return values
+
+
+
Type
+
+
Description
+
+
+
+
boolean
+
+
The value true indicates that the 24-hour clock is used, and value false indicates the opposite.
Whether to enable the 24-hour clock. The value true means to enable the 24-hour clock, and value false means the opposite.
+
+
+
+
+
+- Return values
+
+
+
Type
+
+
Description
+
+
+
+
boolean
+
+
The value true indicates that the 24-hour clock is enabled, and value false indicates the opposite.
+
+
+
+
+
+
+- Example
+
+ ```
+ // Set the system time to the 24-hour format.
+ var success = I18n.set24HourClock(true);
+ ```
+
+
+## i18n.addPreferredLanguage8+
+
+addPreferredLanguage\(language: string, index?: number\): boolean
+
+Adds a preferred language to the specified position on the preferred language list.
+
+- Parameters
+
+
+
Name
+
+
Type
+
+
Mandatory
+
+
Description
+
+
+
+
language
+
+
string
+
+
Yes
+
+
Preferred language to add.
+
+
+
index
+
+
number
+
+
No
+
+
Position to which the preferred language is added.
+
+
+
+
+
+- Return values
+
+
+
Type
+
+
Description
+
+
+
+
boolean
+
+
The value true indicates that the preferred language is added, and value false indicates the opposite.
+
+
+
+
+
+
+- Example
+
+ ```
+ // Add zh-CN to the preferred language list.
+ var language = 'zh-CN';
+ var index = 0;
+ var success = i18n.addPreferredLanguage(langauge, index);
+ ```
+
+
+## i18n.removePreferredLanguage8+
+
+removePreferredLanguage\(index: number\): boolean
+
+Deletes a preferred language from the specified position on the preferred language list.
+
+- Parameters
+
+
+
Name
+
+
Type
+
+
Mandatory
+
+
Description
+
+
+
+
index
+
+
number
+
+
Yes
+
+
Position of the preferred language to delete.
+
+
+
+
+
+- Return values
+
+
+
Type
+
+
Description
+
+
+
+
boolean
+
+
The value true indicates that the preferred language is deleted, and value false indicates the opposite.
+
+
+
+
+
+
+- Example
+
+ ```
+ // Delete the first preferred language from the preferred language list.
+ var index = 0;
+ var success = i18n.removePreferredLanguage(index);
+ ```
+
+
+## i18n.getPreferredLanguageList8+
+
+getPreferredLanguageList\(\): Array
+
+Obtains the preferred language list.
+
+- Return values
+
+
+
Type
+
+
Description
+
+
+
+
Array<string>
+
+
Preferred language list.
+
+
+
+
+
+
+- Example
+
+ ```
+ var preferredLanguageList = i18n.getPreferredLanguageList();
+ ```
+
+
+## i18n.getFirstPreferredLanguage8+
+
+getFirstPreferredLanguage\(\): string
+
+Obtains the preferred language that best matches the HAP resource.
+
+- Return values
+
+
+
Type
+
+
Description
+
+
+
+
string
+
+
Preferred language that best matches the HAP resource.
+
+
+
+
+
+
+- Example
+
+ ```
+ var firstPreferredLangauge = i18n.getFirstPreferredLangauge();
+ ```
+
diff --git a/en/application-dev/ui/figures/datatype.png b/en/application-dev/ui/figures/datatype.png
deleted file mode 100644
index fde616c73000d3f58fd98eea59088177221127a5..0000000000000000000000000000000000000000
Binary files a/en/application-dev/ui/figures/datatype.png and /dev/null differ
diff --git a/en/application-dev/webgl/Readme-EN.md b/en/application-dev/webgl/Readme-EN.md
new file mode 100644
index 0000000000000000000000000000000000000000..06be1865f19400714bfbaaf1d49386ee6a3341fc
--- /dev/null
+++ b/en/application-dev/webgl/Readme-EN.md
@@ -0,0 +1,4 @@
+# WebGL
+
+- [WebGL Overview](webgl-overview.md)
+- [WebGL Development](webgl-guidelines.md)
diff --git a/en/application-dev/webgl/figures/en-us_image_0000001192269746.gif b/en/application-dev/webgl/figures/en-us_image_0000001192269746.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e4c7ed66998e8c6b4b87c587edb5986cc547d9dc
Binary files /dev/null and b/en/application-dev/webgl/figures/en-us_image_0000001192269746.gif differ
diff --git a/en/application-dev/webgl/figures/en-us_image_0000001192429306.gif b/en/application-dev/webgl/figures/en-us_image_0000001192429306.gif
new file mode 100644
index 0000000000000000000000000000000000000000..2297841f49ed784fbe4ecd131df8965202e1c14c
Binary files /dev/null and b/en/application-dev/webgl/figures/en-us_image_0000001192429306.gif differ
diff --git a/en/application-dev/webgl/figures/en-us_image_0000001238544451.png b/en/application-dev/webgl/figures/en-us_image_0000001238544451.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e95598c6f204f9e9165ad183e2b33b7adcadca4
Binary files /dev/null and b/en/application-dev/webgl/figures/en-us_image_0000001238544451.png differ
diff --git a/en/application-dev/webgl/public_sys-resources/icon-caution.gif b/en/application-dev/webgl/public_sys-resources/icon-caution.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571
Binary files /dev/null and b/en/application-dev/webgl/public_sys-resources/icon-caution.gif differ
diff --git a/en/application-dev/webgl/public_sys-resources/icon-danger.gif b/en/application-dev/webgl/public_sys-resources/icon-danger.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571
Binary files /dev/null and b/en/application-dev/webgl/public_sys-resources/icon-danger.gif differ
diff --git a/en/application-dev/webgl/public_sys-resources/icon-note.gif b/en/application-dev/webgl/public_sys-resources/icon-note.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6314297e45c1de184204098efd4814d6dc8b1cda
Binary files /dev/null and b/en/application-dev/webgl/public_sys-resources/icon-note.gif differ
diff --git a/en/application-dev/webgl/public_sys-resources/icon-notice.gif b/en/application-dev/webgl/public_sys-resources/icon-notice.gif
new file mode 100644
index 0000000000000000000000000000000000000000..86024f61b691400bea99e5b1f506d9d9aef36e27
Binary files /dev/null and b/en/application-dev/webgl/public_sys-resources/icon-notice.gif differ
diff --git a/en/application-dev/webgl/public_sys-resources/icon-tip.gif b/en/application-dev/webgl/public_sys-resources/icon-tip.gif
new file mode 100644
index 0000000000000000000000000000000000000000..93aa72053b510e456b149f36a0972703ea9999b7
Binary files /dev/null and b/en/application-dev/webgl/public_sys-resources/icon-tip.gif differ
diff --git a/en/application-dev/webgl/public_sys-resources/icon-warning.gif b/en/application-dev/webgl/public_sys-resources/icon-warning.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571
Binary files /dev/null and b/en/application-dev/webgl/public_sys-resources/icon-warning.gif differ
diff --git a/en/application-dev/webgl/webgl-guidelines.md b/en/application-dev/webgl/webgl-guidelines.md
new file mode 100644
index 0000000000000000000000000000000000000000..2d6f0f756ac3f3e27c2a016f47bbec89ce4f51cf
--- /dev/null
+++ b/en/application-dev/webgl/webgl-guidelines.md
@@ -0,0 +1,715 @@
+# WebGL Development
+
+## When to Use
+
+WebGL helps you process graphics at the frontend, for example, drawing color graphics.
+
+
+## Available APIs
+
+To use WebGL, you must import the following module:
+
+
+```
+import webgl from "@ohos.webglnapi";
+```
+
+ **Table 1** WebGL APIs
+
+| API | Description |
+| -------- | -------- |
+| canvas.getContext | Obtains the canvas context. |
+| webgl.createBuffer(): WebGLBuffer \| null | Creates and initializes a WebGL buffer. |
+| webgl.bindBuffer(target: GLenum, buffer: WebGLBuffer \| null): void | Binds the WebGL buffer to the target. |
+| webgl.bufferData(target: GLenum, srcData: ArrayBufferView, usage: GLenum, srcOffset: GLuint, length?: GLuint): void | Creates and initializes the WebGL buffer object's data store. |
+| webgl.getAttribLocation(program: WebGLProgram, name: string): GLint | Obtains the address of the **attribute** variable in the shader from the given WebGLProgram. |
+| webgl.vertexAttribPointer(index: GLuint, size: GLint, type: GLenum, normalized: GLboolean, stride: GLsizei, offset: GLintptr): void | Assigns a **Buffer** object to a variable. |
+| webgl.enableVertexAttribArray(index: GLuint): void | Connects a variable to the **Buffer** object allocated to it. |
+| webgl.clearColor(red: GLclampf, green: GLclampf, blue: GLclampf, alpha: GLclampf): void | Clears the specified color on the **<canvas>** component. |
+| webgl.clear(mask: GLbitfield): void | Clears the **<canvas>** component. |
+| webgl.drawArrays(mode: GLenum, first: GLint, count: GLsizei): void | Draws data. |
+| webgl.flush(): void | Flushes data to the GPU and clears the buffer. |
+| webgl.createProgram(): WebGLProgram \| null | Creates a **WebGLProgram** object. |
+
+
+## How to Develop
+
+The following describes how to draw a 2D image without using shaders and how to draw a color triangle using shaders.
+
+>  **Note：**
+> When using WebGL for development, use a real device to ensure the GUI display effect.
+
+
+### Drawing a 2D Image Without Using Shaders
+
+To draw a 2D image without using WebGL, that is, to implement CPU rather than GPU drawing, perform the following steps:
+
+1. Create a page layout in the **index.hml** file. The following is an example of the file content:
+
+ ```
+
+
+
+
+ ```
+
+2. Set the page style in the **index.css** file. The following is an example of the file content:
+
+ ```
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+ .btn-button {
+ margin: 1px;
+ height: 40px;
+ width: 220px;
+ background-color: lightblue;
+ font-size: 20px;
+ text-color: blue;
+ }
+ ```
+
+3. Edit the **index.js** file to add the 2D drawing logic code. The following is an example of the file content:
+
+ ```
+ //index.js
+ export default { // Native API interaction code
+ data: {
+ title: "DEMO BY TEAMOL",
+ fit:"cover",
+ fits: ["cover", "contain", "fill", "none", "scale-down"]
+ },
+ onInit() {
+ this.title = this.$t('strings.world');
+ },
+ BtnDraw2D(){
+ // Obtain the