IT Home May 7 news, 2021 Huawei Developer Conference (HDC2021), Huawei released a new generation of declarative UI framework - Ark Development Framework (ArkUI). The ArkUI framework introduces a declarative development paradigm based on TS extensions. Since then, more and more developers have joined the JS/eTS development team, and Huawei has also received many developers' demand for JS/eTS components, such as:
With the joint efforts of the majority of component contributors, Huawei has ushered in a new batch of open source components, including many JS/eTS components.
First, the new open source component overview
A total of 94 new open source components have been added. Components involve tools, networks, UI, graphics, audio and video and many other functions.
By development language, the distribution details of the new components are as follows:
Figure 1 Categorized by development language
As you can see from the above figure, most of the new components on the top use the JS/TS/eTS language, which adds a lot of impetus to the development journey of JS/eTS developers.
Second, the typical component effect display
The following introduces four typical components for everyone, and I look forward to finding more useful components for you
1. zxing
Developers who have been exposed to QR code-related development should be familiar with the zxing library. The zxing library is an open source barcode processing class library for parsing 1D/2D barcodes in multiple formats.
Huawei has only open-sourced the Zxing library (Zxing-Embedded) for the Java version, and this time the new TS version of the zxing library allows eTS developers to use the zxing library for QR code related application development.
The zxing library supports parsing the following 1D/2D barcode formats:
Figure 2 Supported Barcode Formats
Figure 3 shows a development example that uses this zxing library to generate and parse a QR code. In this example, the parsing result of the jsQr library is also displayed when parsing the QR code, and the correctness of the zxing library parsing the QR code is verified.
Figure 3 zxing
Source code download address:
https://gitee.com/openharmony-tpc/zxing
2. VCard
VCard, or electronic business card, is a standardized file dissemination format in the Internet, which mainly disseminates information on traditional paper business cards on the Internet in a standard format. VCard is widely used as an interchange format between various applications or systems. Users can easily forward and read information in VCard by using email directly on the Internet.
The new version of the VCard component is the eTS version, which supports VCard standard 2.0 and 3.0, and provides interfaces such as nickname, name, phone, mail, address, social tools, website address, organization, photo address, notes, groups, events, and relationships.
This VCard component makes it easy to parse and generate VCard files, as shown in the following figure:
Figure 4 VCard
(Note: To use this VCard component, you need to support OpenHarmony API version 8 and above.) ）
Source code download address:
https://gitee.com/openharmony-tpc/VCard
3. CommonsCompressEts
CommonsCompressEts is an API library developed on the eTS language that provides compression and decompression for more than a dozen file formats. File formats include: zip, gzip, xz, z, zstd, ar, brotli, bzip2, lz4, lzma(seven7), tar, snappy, dump, deflate, cpio.
Taking the zip format as an example, the compression and decompression functions are demonstrated as follows:
Figure 5 CommonsCompressEts
Source code download address:
https://gitee.com/openharmony-tpc/CommonsCompressEts
4. httpclient
httpclient (i.e. HTTP client), based on the familiar okhttp, integrates the features of android-async-http, Autobahn Android, OkGo and other libraries, and is committed to creating an efficient and easy-to-use, full-featured network request library. Using this httpcilent allows your content to load faster and save bandwidth.
At present, httpclient relies on the network request capability and upload and download capabilities provided by the system, and has completed the following functions:
Debug switches, timeouts, common request headers, and request parameters are configured globally to support chained calls.
Optimize IO with the okio library and define interfaces with retrofits using annotations.
Supports custom task schedulers to maintain task queues to handle synchronous asynchronous requests, and supports tag cancellation requests.
Support for setting up custom interceptors.
Redirection is supported.
Supports client-side gzip decompression.
Supports file upload and download.
Support for cookie management, etc.
Figure 6, Figure 7, and Figure 8 show three development examples implemented using httpclient, which implement file upload, image preview, and network request (GET and POST) functions.
Figure 6 File Upload
Figure 7 Image Preview
Figure 8 Network Request
Source code download address:
https://gitee.com/openharmony-tpc/httpclient
In addition to the four typical components described above, there are many other components, such as the powerful eTS chart view library ohos-MPChart, ohos-PickerView, which provides a rich variety of selectors, and so on. More useful components waiting for you to find Oh, let's take a look at how to get these components.
3. How to obtain open source components?
Developers can download the source code directly from the OpenHarmony Three-Party Component Library (OpenHarmony-TPC) or obtain the relevant components from the HarmonyOS Developer Resource Center (DevEco Marketplace).
1. OpenHarmony-TPC
The OpenHarmony Three-Party Component Library (OpenHarmony-TPC) brings together a variety of third-party component resources that have been open sourced. New component bands
Prefix, developers can refer to and use according to their own needs.
Figure 9 Summary of three-party component resources
OpenHarmony-TPC Address:
https://gitee.com/openharmony-tpc/tpc_resource
2. DevEco Marketplace
The HarmonyOS Developer Resource Center (DevEco Marketplace) aggregates a wealth of Hongmeng ecological development resource packages, which is convenient for developers to obtain the required resources in one stop and easily complete the development of Hongmeng Zhilian hardware, atomization services and applications. Developers can query and download components according to their own needs.
Figure 10 DevEco Marketplace
DevEco Marketplace Address:
https://repo.harmonyos.com/#/cn/application/atomService
How to use JS/eTS open source components?
After I get the open source components, how do I use them? The following is an introduction to the use of JS / eTS open source components.
1. Get the scope configuration command and npm command for the component.
The DevEco Marketplace provides installation commands for components, which are described below as an example.
(1) Find JS/eTS open source components that need to be used in the DevEco Marketplace.
Figure 11 Finding a Component
(2) Click Components to view the scope configuration command and npm command in the "Install" tab.
Figure 12 The Installation tab for the component
2. Open the project that needs to reference the component in the DevEco Studio tool and execute the scope configuration command and the npm command in Terminal.
Figure 13 Executing the command
After executing the above command, the tool automatically downloads and installs the component library. After the download and installation is complete, a node_modules folder is automatically generated under the project file, and the component library is saved in this folder.
Figure 14 node_modules
3. Next, you can import and use components in the code file.
Figure 15 Importing and Using Components