Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
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.
terday, 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.
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)
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)
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)
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))
But at the beginning, You LAN Jun encountered an error message:
The solution is to delete a large pile of references on the file:
Replace with these lines of code:
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
The modified Image component can be used normally:
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
})
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();
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);
})
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.
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.
terday, 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.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)
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)
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)
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))
But at the beginning, You LAN Jun encountered an error message:
The solution is to delete a large pile of references on the file:
Replace with these lines of code:
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
The modified Image component can be used normally:
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
})
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();
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);
})
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.