DEV Community

wei chang
wei chang

Posted on

Cangjie Development Language Beginner's Tutorial: Introduction to Common UI Components and Some Problem Pitfalls

Youlan Jun discovered a problem. It has been a year since the release of the Cangjie development language. Some well-known apps have already developed many functions using Cangjie, but there are very few tutorials on the Cangjie development language on the Internet, and systematic tutorials are even less. The documentation on the Cangjie official website is also far less detailed than that of ArkTS.

At present, it is very difficult for friends who want to learn Cangjie. Youlan Jun can create a series of tutorials for mobile developers, starting from scratch to a complete application, systematically explaining the Cangjie development language. Hope it can be helpful to everyone.

Today, we will introduce the UI components in the Cangjie language.

Image description

Yesterday, I shared how to set up the development environment for Cangjie. Regarding the directory structure of the project, I think there's no need to elaborate further because it's very similar to ArkTs. We can directly go to the main folder and find index.cj. This is the home page of the project, where there is a demo for project initialization.

Image description

Button

Since the button component is already in the initial code, let's start with it

Button(message).onClick {    evt => AppLog.info("Hello Cangjie")}
.fontSize(40)
.height(80)
Enter fullscreen mode Exit fullscreen mode

It seems that the usage of Button is not much different from ArkTs. Let's continue to add some attributes to it to see what the differences are from ArkTs:

Button(message).onClick {    evt => AppLog.info("Hello Cangjie")}
.fontSize(40)
.height(80)
.width(100.percent)
.backgroundColor(Color.BLUE)
Enter fullscreen mode Exit fullscreen mode

I added the width and background color attributes to the original code. It can be seen that the percentage used in Cangjie is.percent, corresponding to 100% in ArkTs. The case of the letters in the background color also needs to be noted.

Text

The Text component is relatively simple and similar to the button attribute. Just paste the code directly:

Text('hello')
.fontSize(15)
.fontColor(Color.BLACK)
.textAlign(TextAlign.Center)
.margin(top:10)
Enter fullscreen mode Exit fullscreen mode

Image

The most notable aspect of the Image component is loading images. The following code is for loading the resources under the media folder:

Image(@r(app.media.startIcon))
Enter fullscreen mode Exit fullscreen mode

But at the beginning, You LAN Jun encountered an error message:

Image description

The solution is to delete a large pile of references on the file:

Image description

Replace with these lines of code:

import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
Enter fullscreen mode Exit fullscreen mode

The modified Image component can be used normally:

Image description

Input box TextInput

When using the TextInput component, it is best to replace the above large section of references first.

TextInput has three parameters, namely the placeholder content, the input box content and the controller. The onChange method is used to listen for content changes:

TextInput(placeholder: '请输入内容', text: this.inputText, controller:inputController)
.onChange({ value: String =>    
    this.inputText = value
  })
Enter fullscreen mode Exit fullscreen mode

Here's another way to write the TextInput controller. It can perform some operations on the input box, such as retracting the keyboard:

var inputController:TextInputController = TextInputController()

this.inputController.stopEditing();
Enter fullscreen mode Exit fullscreen mode

Search box "search"

The search box is quite similar to the input box. The most important thing to get used to among the above components is the way callback events are written, which is quite different from ArkTs. Here's how to use it:

var searchController:SearchController = SearchController()    



Search(placeholder:'搜索',controller:searchController)
.searchButton('搜索')
.onSubmit({value =>    
  AppLog.info('onSubmit:' + value);    
  })
.onChange({value =>    
  AppLog.info('onChange:' + value);   

 })
Enter fullscreen mode Exit fullscreen mode

There are numerous components in Cangjie. Today, I will introduce a few of the more commonly used ones. If you have any other questions about the Cangjie language, you can also send a private message to Youlan Jun. Thank you for your reading.

Top comments (0)