ArkUI

ArkUI
Developer(s)Huawei
Initial releaseOctober 22, 2021
Operating systemHarmonyOS, OpenHarmony, Oniro OS
TypeSoftware framework
Licenseopen source, Apache License[1]
Websitehttps://developer.harmonyos.com/en/develop/arkUI

ArkUI is a declarative based user interface framework for building user interfaces on native HarmonyOS, OpenHarmony alongside Oniro OS applications developed by Huawei for the ArkTS and Cangjie programming language.[2]

Overview

[edit]

ArkUI 3.0 is declarative in eTS (extended TypeScript) in HarmonyOS 3.0, followed by main ArkTS programming language in HarmonyOS 3.1, contrasting with the imperative syntax used in Java development in earlier versions of HarmonyOS in HarmonyOS 1.0 and 2.0. ArkUI allows for 2D drawing as well as 3D drawing, animations, event handling, Service Card widgets, and data binding. ArkUI automatically synchronizes between UI views and data.[3]

ArkUI integrates with DevEco Studio IDE to provide for real-time previews during editing, alongside support for debugging and other development features.[4]

ArkJS primarily used for web development paradigm, based on JavaScript that targets smaller and basic applications on ArkUI for web developers on JS and CSS.[5]

History

[edit]

During HDC 2021 on October 22, 2021, the HarmonyOS 3.0 developer preview introduced ArkUI 3.0 for eTS, JS programming languages with ArkCompiler. Compared to previous versions of ArkUI 1.0 and 2.0 under imperative development with Java in earlier versions of HarmonyOS.[6]

During HDC 2022 HarmonyOS 3.1 in November 2022, Huawei ArkUI evolved into full declarative development featuring declarative UI capabilities, improved layout ability, component capability improvement and others. In April 2023, HarmonyOS 3.1 Beta 1 build included ArkUI declarative 2D and 3D drawing capabilities. The upgrade also improves layout, component, and app state management capabilities.[7]

During HDC 2023, August 2023, Huawei announced HarmonyOS 4.0 improvements of ArkUI with ArkTS alongside native HarmonyOS NEXT software development using Ark Engine with ArkGraphics 2D and ArkGraphics 3D. Also, the company announced a cross platform extension of ArkUI called ArkUI-X which would allow developers to run applications across Android, iOS and HarmonyOS under one project using DevEco Studio IDE and Visual Studio Code plugins. On January 18, 2024, during HarmonyOS Ecology Conference, Huawei revealed the HarmonyOS NEXT software stack, that included ArkUI/ArkUI-X programming framework with the Ark Compiler/BiSheng Compiler/Ark Runtime compiler & runtime, for both ArkTS and incoming Cangjie programming language.[8]

ArkUI-X

[edit]
ArkUI-X
Developer(s)Huawei
Initial releaseDecember 8, 2023
Operating systemAndroid, iOS, OpenHarmony, Oniro OS, HarmonyOS, Web platform (ArkJS)
TypeApplication framework
LicenseApache License
Websitehttps://developer.harmonyos.com/en/develop/arkUI

ArkUI-X is an open-source UI software development kit which is the extension of ArkUI created by Huawei. It is used to develop cross platform applications as an application framework from a single codebase for any platform such as Android, iOS, OpenHarmony and native HarmonyOS with HarmonyOS NEXT system, including Web platform with ArkJS which was released on December 8, 2023, after Canary 1 build on August 4, 2023.[9]

ArkUI-X consists of both a UI language and a rendering engine. When a ArkUI-X application is compiled, the key modules used by ArkUI, such as the core engine, graphics engine, and ArkTS runtime, are all cross-platform. The goal is to allow developers to build advanced, high-performance applications on open source OpenHarmony as foundation that can run on different OS platforms while using a single set of master code in reduced development times.[10]

Examples

[edit]

The following is an example of a simple Hello World program. It is standard practice in ArkUI to separate the application struct and views into different structs, with the main view named Index.[11]

import ArkTS // Index.ets  import router from '@ohos.router';  @Entry @Component struct Index {   @State message: 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.pushUrl({ url: 'pages/Second' })         })       }       .width('100%')     }     .height('100%')   } } 

See also

[edit]

References

[edit]
  1. ^ "ArkUI API参考". Gitee. OpenAtom OpenHarmony. Retrieved 21 May 2024.
  2. ^ Parker, Victoria (26 January 2024). "HDC Technical Sub-forum: A comprehensive look at HarmonyOS 'next-generation UI Framework". Mo4Tech. Retrieved 12 February 2024.
  3. ^ "2:2 Introduction to the ArkUI framework". arkui.club. © arkui.club. Retrieved 12 February 2024.
  4. ^ Sarkar, Amy (26 October 2021). "HarmonyOS 3.0 ArkUI 3.0: Declarative User Interface framework". HC Newsroom. Retrieved 12 February 2024.
  5. ^ Kapuściak, Kacper; Wajgelt, Juliusz; Schmidt, Stefan (8 November 2023). "Bringing Graphical Applications to Oniro on the Example of React Native". YouTube. Eclipse Foundation. Retrieved 29 February 2024.
  6. ^ "New release of HarmonyOS 3.0.0 developer preview". SegmentFault. Retrieved 12 February 2024.
  7. ^ Sarkar, Amy (25 April 2023). "HarmonyOS 3.1 Beta 2 rolling out". HC Newsroom. Retrieved 12 February 2024.
  8. ^ Bhati, Kamlesh. "Huawei HarmonyOS NEXT Official Now: Bring Spatial Design and Vivid Color Concepts". Sparrownews.com. Archived from the original on 13 February 2024. Retrieved 12 February 2024.
  9. ^ "ArkUI-X Release Notes". ArkUI-X GitHub. Retrieved 12 February 2024.
  10. ^ "ArkUI-X 预览版正式开源". 知乎专栏 (in Chinese). Retrieved 2024-05-21.
  11. ^ "Getting Started with ArkTS in Stage Model - Implementing Page Redirection". HarmonyOS. Retrieved 12 February 2024.
[edit]