-
-
-
-
-
- {{title}}
- {{detail}}
-
-
-
- ```
-
- - CSS file:
-
- ```css
-.container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-.bg-img {
- flex-shrink: 0;
- height: 100%;
-}
-
-.container-inner {
- flex-direction: column;
- justify-content: flex-end;
- align-items: flex-start;
- height: 100%;
- width: 100%;
- padding: 12px;
-}
-
-.title {
- font-size: 19px;
- font-weight: bold;
- color: white;
- text-overflow: ellipsis;
- max-lines: 1;
-}
-
-.detail_text {
- font-size: 16px;
- color: white;
- opacity: 0.66;
- text-overflow: ellipsis;
- max-lines: 1;
- margin-top: 6px;
-}
- ```
-
- - JSON file:
- ```json
- {
- "data": {
- "title": "TitleDefault",
- "detail": "TextDefault"
- },
- "actions": {
- "routerEvent": {
- "action": "router",
- "abilityName": "com.example.entry.EntryAbility",
- "params": {
- "message": "add detail"
- }
- }
- }
- }
- ```
-
-Now you've got a widget shown below.
-
-![fa-form-example](figures/fa-form-example.png)
-
-### Developing Widget Events
-
-You can set router and message events for components on a widget. The router event applies to ability redirection, and the message event applies to custom click events. The key steps are as follows:
-
-1. Set the **onclick** field in the HML file to **routerEvent** or **messageEvent**, depending on the **actions** settings in the JSON file.
-2. Set the router event.
- - **action**: **"router"**, which indicates a router event.
- - **abilityName**: target ability name, for example, **com.example.entry.EntryAbility**, which is the default UIAbility name in DevEco Studio for the FA model.
- - **params**: custom parameters of the target ability. Set them as required. The value can be obtained from **parameters** in **want** used for starting the target ability. For example, in the lifecycle function **onCreate** of the EntryAbility in the FA model, **featureAbility.getWant()** can be used to obtain **want** and its **parameters** field.
-3. Set the message event.
- - **action**: **"message"**, which indicates a message event.
- - **params**: custom parameters of the message event. Set them as required. The value can be obtained from **message** in the widget lifecycle function **onEvent**.
-
-The code snippet is as follows:
-
- - HML file:
- ```html
-