To ensure successful communications between the client and server, interfaces recognized by both parties must be defined. The OpenHarmony Interface Definition Language (IDL) is a tool for defining such interfaces. OpenHarmony IDL decomposes objects to be transferred into primitives that can be understood by the operating system and encapsulates cross-boundary objects based on developers' requirements.
To ensure successful communications between the client and server, interfaces recognized by both parties must be defined. The OpenHarmony Interface Definition Language (IDL) is a tool for defining such interfaces. OpenHarmony IDL decomposes objects to be transferred into primitives that can be understood by the operating system and encapsulates cross-boundary objects based on developers' requirements.
Native APIs are a set of native development interfaces and tools provided by the OHOS SDK. It enables the use of C or C++ code to implement key application functionalities. Native APIs provide part of basic underlying capabilities of OHOS, such as libc, graphics library, window system, multimedia, and compression library. They do not provide complete OHOS platform capabilities as JS APIs do. Native APIs are compiled into a dynamic library before being packed into the application.
## Native API Composition
### Native API Directory Structure
Native APIs are stored in the **$(SDK_ROOT)/native** directory of the SDK. They consist of the following parts:
|Directory|Description|
|--|--|
|build|Used to build the toolchain.cmake script of the dynamic library in the application. The **ohos.toolchain.cmake** file in this directory defines OHOS cross compilation options.|
|build-tools|Stores build tools, such as CMake.|
|docs|Stores Native API reference documents, which is extracted from the header files using Doxgen.|
|llvm|Stores LLVM, a cross compiler that supports OHOS ABIs.|
|sysroot|Stores dependent files of build links, including header files and dynamic libraries.|
### Native APIs
|Category|Function|Introduced In|
|--|--|--|
|C standard library|C standard library interfaces based on musl. Currently, more than 1500 interfaces are provided.|API version 8|
|C++ standard library|C++ runtime library libc++_shared. This library must be packed or statically linked to the application during packing.|API version 8|
|Log|HiLog interfaces for printing logs to the system|API version 8|
|napi|A group of Node-APIs provided by ArkUI to facilitate access to the JS application environment during application development. Node-APIs are part of native APIs.|API version 8|
|XComponent|Provides surface and touchscreen event interfaces for developing high-performance graphics applications.|API version 8|
|libuv|Third-party asynchronous I/O library integrated by ArkUI.|API version 8|
|libz|zlib library that provides basic compression and decompression interfaces.|API version 8|
|Drawing|2D graphics library that can be used for drawing on the surface.|API version 8|
|OpenGL|OpenGL 3.0 interfaces.|API version 8|
|Rawfile|Application resource access interfaces that can be used to read various resources packed in the application.|API version 8|
|OpenSLES|Interface library used for 2D and 3D audio acceleration.|API version 8|
|Mindspore|AI model interface library.|API version 9|
|Bundle management|Bundle service interfaces that can be used to query bundle information of the application.|API version 8|
Some native APIs use open-source standards. For details, see [Native Standard Libraries Supported by OpenHarmony](../reference/native-lib/third_party_libc/musl.md) and [Node-API](../reference/native-lib/third_party_napi/napi.md).
## Usage Guidelines
### Scenarios Where Native APIs Are Recommended
You can use native APIs when you want to:
1. Develop performance-sensitive code in computing-intensive scenarios such as gaming and physical simulation.
2. Reuse the existing C or C++ library.
3. Customize libraries related to CPU features, such as neon acceleration.
### Scenarios Where Native APIs Are Not Recommended<br>You do not need to use native APIs when you want to:
1. Write a native OHOS application.
2. Develop an application compatible on as many OHOS devices as possible.
The **deviceConfig** tag contains device-specific configuration of the application, including attributes such as **default**, **tv**, **car**, and **wearable**. The **default** configuration applies to all types of devices. You need to declare the peculiar configuration of a specific device type in the associated sub-tag of this type.
The **deviceConfig** tag contains device-specific configuration of the application, including attributes such as **default**, **tv**, **car**, and **wearable**. The **default** configuration applies to all types of devices. You need to declare the peculiar configuration of a specific device type in the associated sub-tag of this type.
> To use ArkTS, your DevEco Studio must be V3.0.0.601 Beta1 or later.
>
> For best possible results, use [DevEco Studio 3.1 Beta2](https://developer.harmonyos.com/cn/develop/deveco-studio) for your development.
## Creating an ArkTS Project
1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. On the **Choose Your Ability Template** page, select **Application** (or **Atomic Service**, depending on your project), select **Empty Ability** as the template, and click **Next**.
2. In the project configuration page, set **Compile SDK** to **8** or **9** (in the latter case, you also need to set **Model** to **FA**) and **Language** to **ArkTS** and retain the default values for other parameters.
> If you are using DevEco Studio V3.0 Beta3 or later, you can use the low-code development mode apart from the traditional coding approach.
>
> On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.
>
> To use the low-code development mode, turn on **Enable Super Visual** on the page shown above.
3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
4. After the project is created, in the **entry** > **build-profile.json5** file, change **runtimeOS** under **targets** to **OpenHarmony**, and click **Sync Now** in the upper right corner to start development.
-**src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource Categories and Access](resource-categories-and-access.md#resource-categories).
-**src > main > config.json**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details, see [Application Configuration File Overview (FA Model)](application-configuration-file-overview-fa.md).
-**build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**. Under **targets**, you can set **runtimeOS** to **HarmonyOS** (default) or **OpenHarmony**, depending on the OS of your application.
-**hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation.
-**build-profile.json5**: application-level configuration information, including the signature and product configuration.
After the project synchronization is complete, choose **entry** > **src** > **main** > **ets** > **MainAbility** > **pages** in the **Project** window and open the **index.ets** file. You can see that the file contains a **\<Text>** component. The sample code in the **index.ets** file is shown below:
```ts
// index.ets
@Entry
@Component
structIndex{
@Statemessage:string='Hello World'
build(){
Row(){
Column(){
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
```
2. Add a **\<Button>** component.
On the default page, add a **\<Button>** component to respond to user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
```ts
// index.ets
@Entry
@Component
structIndex{
@Statemessage:string='Hello World'
build(){
Row(){
Column(){
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// Add a button to respond to user clicks.
Button(){
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top:20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}
```
3. On the toolbar in the upper right corner of the editing window, click **Previewer**. Below is how the first page looks in the Previewer.
- Create the second page file: In the **Project** window, choose **entry** > **src** > **main** > **ets** > **MainAbility**. Right-click the **pages** folder, choose **New** > **ArkTS File**, name the page **second**, and click **Finish**. Below is the structure of the **second** folder.
> You can also right-click the **pages** folder and choose **New** > **Page** from the shortcut menu. In this scenario, you do not need to manually configure page routes.
- Configure the route for the second page, by setting **pages/second** under **module - js - pages** in the **config.json** file. The sample code is as follows:
```json
{
"module":{
"js":[
{
"pages":[
"pages/index",
"pages/second"
]
}
]
}
}
```
2. Add **\<Text>** and **\<Button>** components.
Add **\<Text>** and **\<Button>** components and set their styles, as you do for the first page. The sample code in the **second.ets** file is shown below:
```ts
// second.ets
@Entry
@Component
structSecond{
@Statemessage:string='Hi there'
build(){
Row(){
Column(){
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button(){
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top:20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}
```
## Implementing Page Redirection
You can implement page redirection through the [page router](../reference/apis/js-apis-router.md), which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
1. Implement redirection from the first page to the second page.
In the **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **index.ets** file is shown below:
```ts
// index.ets
// Import the router module.
importrouterfrom'@ohos.router';
@Entry
@Component
structIndex{
@Statemessage:string='Hello World'
build(){
Row(){
Column(){
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// Add a button to respond to user clicks.
Button(){
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top:20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// Bind the onClick event to the Next button so that clicking the button redirects the user to the second page.
.onClick(()=>{
router.push({url:'pages/second'})
// In a project of API version 9, you can use the API below instead:
// router.pushUrl({ url: 'pages/second' })
})
}
.width('100%')
}
.height('100%')
}
}
```
2. Implement redirection from the second page to the first page.
In the **second.ets** file of the second page, bind the **onClick** event to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.ets** file is shown below:
```ts
// second.ets
// Import the router module.
importrouterfrom'@ohos.router';
@Entry
@Component
structSecond{
@Statemessage:string='Hi there'
build(){
Row(){
Column(){
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button(){
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top:20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// Bind the onClick event to the Back button so that clicking the button redirects the user back to the first page.
.onClick(()=>{
router.back()
})
}
.width('100%')
}
.height('100%')
}
}
```
3. Open the **index.ets** file and click  in the Previewer to refresh the file. The display effect is shown in the figure below.
1. Connect the development board running the OpenHarmony standard system to the computer.
2. Choose **File** > **Project Structure...** > **Project** > **SigningConfigs**, and select **Automatically generate signature**. Wait until the automatic signing is complete, and click **OK**. See the following figure.
3. On the toolbar in the upper right corner of the editing window, click . The display effect is shown in the figure below.
Congratulations! You have finished developing your OpenHarmony application in ArkTS in the FA model. To learn more about OpenHarmony application development, see [Application Development Overview](../application-dev-guide.md).
> For best possible results, use [DevEco Studio 3.1 Beta2](https://developer.harmonyos.com/cn/develop/deveco-studio#download) for your development.
## Creating a JavaScript Project
1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. On the **Choose Your Ability Template** page, select **Application** (or **Atomic Service**, depending on your project), select **Empty Ability** as the template, and click **Next**.
2. In the project configuration page, set **Compile SDK** to **8** or **9** (in the latter case, you also need to set **Model** to **FA**) and **Language** to **JS** and retain the default values for other parameters.
> **NOTE**
>
> If you are using DevEco Studio V2.2 Beta1 or later, you can use the low-code development mode apart from the traditional coding approach.
>
> On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.
>
> To use the low-code development mode, turn on **Enable Super Visual** on the page shown above.
3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
4. After the project is created, in the **entry** > **build-profile.json5** file, change **runtimeOS** under **targets** to **OpenHarmony**, and click **Sync Now** in the upper right corner to start development.
-**src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource Limitations and Access](../ui/js-framework-resource-restriction.md).
-**src > main > config.json**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details, see [Application Configuration File Overview (FA Model)](application-configuration-file-overview-fa.md).
-**build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**. Under **targets**, you can set **runtimeOS** to **HarmonyOS** (default) or **OpenHarmony**, depending on the OS of your application.
-**hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation.
-**build-profile.json5**: application-level configuration information, including the signature and product configuration.
After the project synchronization is complete, choose **entry** > **src** > **main** > **js** > **MainAbility** > **pages** > **index** in the **Project** window and open the **index.hml** file. You can see that the file contains a **<Text>** component. The sample code in the **index.hml** file is shown below:
```html
<!-- index.hml -->
<divclass="container">
<textclass="title">
Hello World
</text>
</div>
```
2. Add a button and bind the **onclick** method to this button.
On the default page, add a **\<Button>** component to respond to user clicks and implement redirection to another page. The sample code in the **index.hml** file is shown below:
```html
<!-- index.hml -->
<divclass="container">
<textclass="title">
Hello World
</text>
<!-- Add a button, set its value to Next, and bind the onclick method to the button. -->
From the **Project** window, choose **entry** > **src** > **main** > **js** > **MainAbility** > **pages** > **index**, open the **index.css** file, and set the page styles, such as the width, height, font size, and spacing. The sample code in the **index.css** file is shown below:
```css
/* index.css */
.container{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
left:0px;
top:0px;
width:100%;
height:100%;
}
.title{
font-size:100px;
font-weight:bold;
text-align:center;
width:100%;
margin:10px;
}
.btn{
font-size:60px;
font-weight:bold;
text-align:center;
width:40%;
height:5%;
margin-top:20px;
}
```
4. On the toolbar in the upper right corner of the editing window, click **Previewer**. Below is how the first page looks in the Previewer.
In the **Project** window, choose **entry** > **src** > **main** > **js** > **MainAbility**, right-click the **pages** folder, choose **New** > **Page**, name the page **second**, and click **Finish**. Below is the structure of the **second** folder.
Add **\<Text>** and **\<Button>** components and set their styles, as you do for the first page. The sample code in the **second.hml** file is shown below:
```html
<!-- second.hml -->
<divclass="container">
<textclass="title">
Hi there
</text>
<!-- Add a button, set the value to Back, and bind the back method to the button.-->
3. Set the page style. The sample code in the **second.css** file is shown below:
```css
/* second.css */
.container{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
left:0px;
top:0px;
width:100%;
height:100%;
}
.title{
font-size:100px;
font-weight:bold;
text-align:center;
width:100%;
margin:10px;
}
.btn{
font-size:60px;
font-weight:bold;
text-align:center;
width:40%;
height:5%;
margin-top:20px;
}
```
## Implementing Page Redirection
You can implement page redirection through the [page router](../reference/apis/js-apis-router.md), which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
1. Implement redirection from the first page to the second page.
In the **index.js** file of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. The sample code in the **index.js** file is shown below:
```js
// index.js
// Import the router module.
importrouterfrom'@ohos.router';
exportdefault{
onclick:function(){
router.push({
url:"pages/second/second"
})
}
}
```
2. Implement redirection from the second page to the first page.
In the **second.ets** file of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.js** file is shown below:
```js
// second.js
// Import the router module.
importrouterfrom'@ohos.router';
exportdefault{
back:function(){
router.back()
}
}
```
3. Open any file in the **index** folder and click  in the Previewer to refresh the file. The display effect is shown in the figure below.
1. Connect the development board running the OpenHarmony standard system to the computer.
2. Choose **File** > **Project Structure...** > **Project** > **Signing Configs**, and select **Automatically generate signature**. Wait until the automatic signing is complete, and click **OK**. See the following figure.
3. On the toolbar in the upper right corner of the editing window, click . The display effect is shown in the figure below.
Congratulations! You have finished developing your OpenHarmony application in JavaScript in the FA model. To learn more about OpenHarmony application development, see [Application Development Overview](../application-dev-guide.md).
