# ArkUI Animation/Interaction Event Development (ArkTS)
## What should I do if the onBlur and onFocus callbacks cannot be triggered?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom**
The **onBlur** and **onFocus** callbacks of the focus event cannot be triggered.
**Solution**
Check the trigger device. By default, the focus event (and the **onBlur** and **onFocus** callbacks) can be triggered only by the Tab button and arrow buttons on the connected keyboard. To enable the focus event to be triggered by a touch, add the **focusOnTouch** attribute for the target component.
## How do I enable a component to rotate continuously?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
You can use [attribute animation](../reference/arkui-ts/ts-animatorproperty.md) to that effect.
## How do I scroll a list with the keyboard?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
- Add **focusable\(true\)** to the list item to enable it to obtain focus.
- Nest a focusable component, for example, **\<Button>**, at the outer layer of each item.
## Why is the click event not triggered for the focused component upon the press of the Enter key after keyboard navigation?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
By default, the built-in click event of the component and the custom **onClick** click event are bound to the space bar instead of the Enter key.
## How do I block event bubbling when a button is nested in multi-layer components?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
You can bind the button to the **stopPropagation** parameter.
## How do I disable the transition effect between pages when the router or navigator is used to switch between pages?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
1. Define the **pageTransition** method for the current and target pages, by following instructions in [Example](../reference/arkui-ts/ts-page-transition-animation.md#example).
2. Set the **duration** parameter of both **PageTransitionEnter** and **PageTransitionExit** to **0**.
## How do I fix misidentification of the pan gesture where container nesting is involved?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
The pan gesture requires a minimum 5 vp movement distance of a finger on the screen. You can set the **distance** parameter in **PanGesture** to **1** so that the pan gesture can be more easily recognized.
## Can I use the fontFamily attribute to set different fonts for OpenHarmony applications?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
No. For applications developed based on OpenHarmony, only the default font, HarmonyOS Sans, is supported.
## How do I implement a text input box that shows a soft keyboard when touched and hides the soft keyboard when a button is touched?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Use **focusControl** for the **\<TextInput>** component to control its focus. The **\<TextInput>** component shows a soft keyboard when it gains focus and hides the soft keyboard when it loses focus.
**Example**
```
build() {
Column() {
TextInput()
Button(`hide`)
.key('button')
.onClick(()=>{
focusControl.requestFocus('button')
})
}
}
```
## How do I implement a button that only responds to the bound onClick event, but not the onTouch event bound to the button's parent component?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Bind **onTouch** to the **\<Button>** component and use **stopPropagation\(\)** in **onTouch** to prevent **onTouch** from bubbling up to the parent component.
**Example**
```
build() {
Row() {
Button ("Click Me")
.width(100)
.width(100)
.backgroundColor('#f00')
.onClick(()=>{
console.log("Button onClick")
})
.onTouch((e) => {
console.log("Button onTouch")
e.stopPropagation()
})
}
.onTouch(() => {
console.log("Row onTouch")
})
}
```
## Why is the menu bound to a component not displayed by a right-click on the component?
Applicable to: OpenHarmony 3.2 Beta (API version 9)
**Solution**
Currently, the menu is displayed when the bound component is clicked or long pressed.
## How do I shield the default keyboard popup behavior of the \<TextInput> component?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
Set the **focusable** attribute of the **\<TextInput>** component to **false**. In this way, the component is not focusable and therefore will not bring up the keyboard.
## How do I implement the slide up and slide down effect for page transition?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
**Solution**
You can use the **pageTransition** API to implement the page transition effect. Specifically, set the **slide** attribute in **PageTransitionEnter** and **PageTransitionExit** to **SlideEffect.Bottom**. In this way, the page slides in and out from the bottom.
**Example**
```
// Index.ets
@Entry
@Component
struct PageTransition1 {
build() {
Stack({alignContent: Alignment.Bottom}) {
Navigator({ target: 'pages/Page1'}) {
Image($r('app.media.ic_banner01')).width('100%').height(200) // Save the image in the media folder.
## How do I configure custom components to slide in and out from the bottom?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
**Symptom**
Custom components A and B need to deliver the following effects: When custom component A, displayed at the bottom of the screen by default, is touched, it is hidden, and custom component B slides in from the bottom. When custom component B is touched, it is hidden, and custom component A slides in from the bottom.
**Solution**
You can use the **transition** attribute to create component transition animations. Set the **type** parameter to specify the component transition type, which can be component addition, component deletion, or both. Set the **translate** parameter to specify the translation of the component during transition. **NOTE**<br>The **transition** attribute must work with **animateTo**. The animation duration, curve, and delay follow the settings in **animateTo**.
## How do I dynamically create components using code in ArkUI?
...
...
@@ -522,7 +522,7 @@ Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Reference**
[Resource Categories and Access](../quick-start/resource-categories-and-access.md) and [@ohos.resourceManager (Resource Manager)](../reference/apis/js-apis-resource-manager.md#getstring)
[Resource Categories and Access](../quick-start/resource-categories-and-access.md) and [@ohos.resourceManager (Resource Manager)](../reference/apis/js-apis-resource-manager.md)
## How do I convert the XML format to the JSON format?
## Why can't array variables be used to control component attributes?
Applicable to: OpenHarmony (DevEco Studio 3.0.0.993, API version 8)
Currently, the web-like development paradigm does not listen for the modification of elements in an array. Therefore, the page refresh can be triggered only when the array object is modified, but not when an element in the array is modified. In the following example, the **test1\(\)** statement, which assigns values to the entire array, will disable the related **\<Button>** component; in contrast, the **test2\(\)** statement, which assigns a value to an element in the array, will not disable the **\<Button>** component. In addition to **test1\(\)**, you can also use the method of modifying the array, for example, **splice\(\)**, to trigger the page refresh.
```
test1() {this.isDisabled = [true, true, true, true, true]; // This statement disables the <Button> component.
test2() {this.isDisabled[0] = true; // This statement does not work for the <Button> component.
```
## Does the \<input> component support center alignment?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, FA model)
**Symptom**
The **text-align** style does not work for the **\<input>** component.
**Solution**
The **text-align** style works for the **\<text>** component, but not for the **\<input>** component.
## How do I determine whether a value exists in a JS object?
Applicable to: OpenHarmony 3.2 Release (API version 9)
**Solution**
Use **Object.values\(*object name*\).indexOf\(*value to be checked*\)**. If **-1** is returned, the corresponding value is not included. Otherwise, the corresponding value is included.
## What should I do if the height settings in position do not take effect?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
When **position** is set for a container component, it is taken out of normal flow and works independently from the outer container. In this case, the height does not take effect. You can replace the outer container with a stack to solve this issue.
## How do I implement horizontal scrolling on a \<Grid> component?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Set **rowsTemplate** (the number of rows) for the **\<Grid>** component and do not set **columnsTemplate** (the number of columns). In this way, the **\<Grid>** component scrolls horizontally when its content does not fit within its width.
## What should I do if the \<List> component cannot be dragged to the bottom when it is used with another component and does not have the size specified?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Add the **layoutWeight** attribute for the **\<List>** component so that it takes up the remaining height (or width, depending on the scrolling direction) adapatively.
By default, the **\<List>** component, as a scrollable container, takes up the entire screen height. When it is used with any component whose height is fixed, you need to explicitly add the **layoutWeight** attribute for the **\<List>** component so that it takes up the remaining height instead of the entire screen height.
## Can tab switching be disabled for the \<Tabs> component?
Applicable to: OpenHarmony 3.2 Release (API version 9)
No. This feature is not supported.
## How do I intercept the onBackPress event so that it does not trigger page return?
Applicable to: OpenHarmony 3.2 Release (API version 9)
If **true** is returned in **onBackPress**, the page executes its own return logic instead of the default return logic.
## How do I implement a sticky header for a list item group in the \<List> component?
Applicable to: OpenHarmony 3.2 Release (API version 9)
You can use the **sticky** attribute of the **\<List>** component together with the **\<ListItemGroup>** component. Specifically, set the **sticky** attribute of the **\<List>** component to **StickyStyle.Header** and set the **header** parameter of the corresponding **\<ListItemGroup>** component.
**Reference**
[Adding a Sticky Header](../ui/arkts-layout-development-create-list.md#adding-a-sticky-header)
## Why can't class objects be transferred through params in the router API?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
Only attributes in an object can be transferred, and methods in the object cannot.
## How do I use router to implement page redirection in the stage model?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
1. To implement page redirection through **router**, add all redirected-to pages to the **pages** list in the **main\_pages.json** file.
2. Page routing APIs in **router** can be invoked only after page rendering is complete. Do not call these APIs in **onInit** or **onReady** when the page is still in the rendering phase.
