HarmonyOS SDK Live Window Service(Live View Kit) as a real-time presentation of application service information changes in a small window, all over the device's various interfaces, its charm lies in the complexity of the application scenarios of information concise distillation and real-time refresh, in the case of not affecting the current operation of other applications, always show the user the latest information dynamics, the user can also click on the live window card or capsule into the application landing page to view the Users can also click on the live window card or capsule to enter the application landing page to view detailed information and enjoy efficient information synchronization services from the application.
Live Window service customizes diverse card templates for different scenarios, including progress visualization template, emphasized text template, left and right text template, tournament score template, navigation template. In addition to these five templates in card form, Live Window also has two forms of Live Capsule and Live Timer. In the following, this article will show these templates in detail, introduce their applicable scenarios, and explain the specific implementation steps of the templates.
development capability
Before creating a local live window, you need to complete the basic preparations and open the live window service rights. There are 5 steps to activate the rights and benefits of Live Window, please refer to the detailed application procedure of Live Window service.Development Guide。
development step
The following will show the specific development steps as an example of creating, updating and ending a live window locally.
1. Import liveViewManager.
Before creating a local live window, you need to import liveViewManager in your project and create a new live window control class, construct the isLiveViewEnabled() method, which is used to check whether the live window switch is on or not. Turning on the live window switch is a prerequisite for creating a live window. The sample code is as follows:
import { liveViewManager } from '@';
export class LiveViewController {
private static async isLiveViewEnabled(): Promise<boolean> {
return await ();
}
}
2. Create a live window.
Live Window has 5 style templates depending on the extension: Progress Visualization Template, Emphasis Text Template, Left/Right Text Template, Event Score Template and Navigation Template.
Progress visualization templates
Progress visualization templates can be applied to taxi, takeaway and other scenarios that need to present the complete process and the current node. Through the live window of the progress visualization template, users can view the service process and real-time changes of the application at a glance. Here we take the instant delivery scenario as an example to show the specific sample code.
After building the LiveViewController, you need to initialize the LiveViewController and call the () method to create the live window in the code. Where the value of event is DELIVERY represents the instant delivery scenario, and if the value is TAXI, it represents the traveling taxi scenario.
import { liveViewManager } from '@';
import { Want, wantAgent } from '@';
export class LiveViewController {
public async startLiveView(): Promise<> {
// Verify that the live window switch is on
if (!()) {
throw new Error("Live view is disabled.");
}
// Creating live windows
const defaultView = await ();
return await (defaultView);
}
private static async buildDefaultView(): Promise<> {
return {
// Structuring the live window request form
id: 0, // real-time windowID，Developer Generated。
event: "DELIVERY", // real-time window的应用场景。DELIVERY：Instant delivery（takeaways、fresh food）
liveViewData: {
primary: {
title: "The rider has taken the order",
content: [
{ text: "Distance to business " },
{ text: "300 ", textColor: "#FF007DFF" },
{ text: "meter (classifier) | " },
{ text: "3 ", textColor: "#FF007DFF" },
{ text: "Minutes to store" }
], // All text can be set to one color only，unsettledtextColorhour，Default Display#FF000000
keepTime: 15,
clickAction: await (),
layoutData: {
layoutType: .LAYOUT_TYPE_PROGRESS,
progress: 40,
color: "#FF317AF7",
backgroundColor: "#f7819ae0",
indicatorType: .INDICATOR_TYPE_UP,
indicatorIcon: "", // Progress Bar Indicator Icon，take a value of
"/resources/rawfile"File name under path
lineType: .LINE_TYPE_DOTTED_LINE,
nodeIcons: ["icon_1.png", "icon_2.png", "icon_3.png"] // Progress bar icons for each node，
take a value of"/resources/rawfile"File name under path
}
}
}
};
}
private static async isLiveViewEnabled(): Promise<boolean> {
return await ();
}
private static async buildWantAgent(): Promise<Want> {
const wantAgentInfo: = {
wants: [
{
bundleName: '', // practical applicationbundleName
abilityName: 'EntryAbility'
} as Want
],
operationType: .START_ABILITIES,
requestCode: 0,
wantAgentFlags: [.UPDATE_PRESENT_FLAG]
};
const agent = await (wantAgentInfo);
return agent;
}
}
Emphasized text template
Emphasized text templates are suitable for picking up food, queuing and other scenes that need to emphasize part of the text information. By emphasizing the text template live window, the user can quickly get the food code, queuing situation and other important information, here to pick up the food scene as an example, to show the specific sample code.
In the emphasized text template, event takes the value of PICK_UP to represent the pickup scenario, and if it takes the value of QUEUE to represent the queuing scenario.
import { liveViewManager } from '@';
import { Want, wantAgent } from '@';
export class LiveViewController {
public async startLiveView(): Promise<> {
// Verify that the live window switch is on
if (!()) {
throw new Error("Live view is disabled.");
}
// Creating live windows
const defaultView = await ();
return await (defaultView);
}
private static async buildDefaultView(): Promise<> {
return {
// Structuring the live window request form
id: 0, // real-time windowID，Developer Generated。
event: "PICK_UP", // real-time window的应用场景。PICK_UP：pick up dinner。
liveViewData: {
primary: {
title: "The meal is ready.",
content: [
{ text: "please go to", textColor: "#FF000000" },
{ text: "XXX店pick up dinner", textColor: "#FF000000" }
],
keepTime: 15,
clickAction: await (),
layoutData: {
layoutType: .LAYOUT_TYPE_PICKUP,
title: "pick up dinner码",
content: "72988",
underlineColor: "#FF0A59F7",
descPic: ""
}
}
}
};
}
... ...
}
Left and right text templates
Left and right text templates are suitable for high-speed rail, flights and other left and right information symmetrical scenarios, through this template, users can quickly get the origin, destination, start and end time and other travel information. Here we take the high-speed train ticket scenario as an example to show the specific sample code.
In the left and right text templates, event with a value of TRAIN represents a high speed rail/train scenario, and with a value of FLIGHT represents a flight scenario.
import { liveViewManager } from '@';
import { Want, wantAgent } from '@';
export class LiveViewController {
public async startLiveView(): Promise<> {
// Verify that the live window switch is on
if (! ()) {
throw new Error("Live view is disabled."); }
}
// Create the live view
const defaultView = await (); return await (defaultView); }
return await (defaultView);
}
private static async buildDefaultView(): Promise<> {
return {
// Construct the live window request body
id: 0, // Live window id, developer-generated.
event: "TRAIN", // Live window application scenario. train: high speed rail/train.
liveViewData: {
primary: {
title: "Train Ticket Reminder", // liveViewData.
content: [
{ text: "Ticket Checking Gates " }, { text.
{ text:"|Seats " }, { text:"|Seats " }, { text:"|Seats
{ text: "Car 03 12F", textColor: "#FF007DFF" }
],// All text can only be set to one color, defaults to #FF000000 when no textColor is set
keepTime: 15, // If you don't set a textColor, the default is to display #FF000000.
clickAction: await (), // Default action for clicking on the live window.
layoutData: {
layoutType: .LAYOUT_TYPE_FLIGHT, // click on the live window.
firstContent: "Shanghai Hongqiao",
lastTitle: "14:20",
spaceIcon: "", isHorizontalLineDownload
isHorizontalLineDisplayed: true, additionalText: "The above information is displayed in a horizontal line.
additionalText: "The above information is for informational purposes only" // The bottom content of the extension, only available for left and right text templates.
}
}
}
}
}
... ...
}
Tournament Score Template
The tournament score template is suitable for competitive tournament scenarios. With this template, users can quickly access tournament information such as tournament teams, current scores, and number of matches.
In the Tournament Score template, SCORE stands for Tournament Score Scenario.
import { liveViewManager } from '@';
import { Want, wantAgent } from '@';
export class LiveViewController {
public async startLiveView(): Promise<> {
// Verify that the live window switch is on
if (!()) {
throw new Error("Live view is disabled.");
}
// Creating live windows
const defaultView = await ();
return await (defaultView);
}
private static async buildDefaultView(): Promise<> {
return {
// Structuring the live window request form
id: 0, // real-time windowID，Developer Generated。
event: "SCORE", // real-time window的应用场景。SCORE：Score。
liveViewData: {
primary: {
title: "In the fourth quarter",
content: [
{ text: "XX VS XX" },
{ text: " | ", textColor: "#f7b7b1b3"},
{ text: "Group stage 5"}
],
keepTime: 1,
clickAction: await (),
layoutData: {
layoutType: .LAYOUT_TYPE_SCORE,
hostName: "team nameA",
hostIcon: "",
hostScore: "110",
guestName: "team nameB",
guestIcon: "",
guestScore: "102",
competitionDesc: [
{ text: "●", textColor: "#FFFF0000" },
{ text: "Q4" }
],
competitionTime: "02:16",
isHorizontalLineDisplayed: true
}
}
}
};
}
... ...
}
Navigation templates
The navigation template is suitable for traveling navigation scenarios. With this template, the user can quickly get the approximate location information of the destination to be navigated. In the navigation template, event takes the value of NAVIGATION to represent the navigation scenario.
import { liveViewManager } from '@';
import { Want, wantAgent } from '@';
export class LiveViewController {
public async startLiveView(): Promise<> {
// Verify that the live window switch is on
if (!()) {
throw new Error("Live view is disabled.");
}
// Creating live windows
const defaultView = await ();
return await (defaultView);
}
private static async buildDefaultView(): Promise<> {
return {
// Structuring the live window request form
id: 0, // real-time windowID，Developer Generated。
event: "NAVIGATION", // real-time window的应用场景。NAVIGATION：navigator。
liveViewData: {
primary: {
title: "178in a few meters turn left",
content: [
{ text: "go to (a place)", textColor: "#FF000000" },
{ text: " Nanjing East Road", textColor: "#FF000000" }
],
keepTime: 15,
clickAction: await (),
layoutData: {
layoutType: .LAYOUT_TYPE_NAVIGATION,
currentNavigationIcon: "",
navigationIcons: ["","","",""]
}
}
}
};
}
... ...
}
Live Capsules
The live capsule is another live form different from the card form displayed in the device's off screen and status bar, and the capsule needs to display the most concise and important content to ensure that the user can get the important information at a glance. Moreover, the parameters of each template in the capsule form are fixed, independent of the type of template used to create the live window.
When creating a live window capsule synchronously, you need to carry the capsule's required parameters in the structure capsule, and different capsule types carry different parameters. Different capsule types carry different parameters. The types of capsules that can be created are: text capsule, timer capsule and progress capsule. Here to the text capsule as an example, show the specific sample code.
import { liveViewManager } from '@';
import { Want, wantAgent } from '@';
export class LiveViewController {
public async startLiveView(): Promise<> {
// Verify that the live window switch is on
if (!()) {
throw new Error("Live view is disabled.");
}
// Creating live windows
const defaultView = await ();
return await (defaultView);
}
private static async buildDefaultView(): Promise<> {
return {
// Structuring the live window request form
id: 0, // real-time windowID，Developer Generated。
event: "DELIVERY", // real-time window的应用场景。DELIVERY：Instant delivery（takeaways、fresh food）。
liveViewData: {
primary: {
title: "Meals to be paid for",
content: [
{ text: "caffeine ", textColor: "#FF000000" },
{ text: "et al. (and other authors)2item", textColor: "#FF000000" }
],
keepTime: 15,
clickAction: await (),
layoutData: {
layoutType: .LAYOUT_TYPE_PICKUP,
title: "Amount to be paid",
content: "25.5unit of money (in PRC: Chinese yuan, in USA: dollar, etc)",
underlineColor: "#FF0A59F7",
descPic: ""
}
},
// Real Capsule Related Parameters
capsule: {
type: .CAPSULE_TYPE_TEXT,
status: 1,
icon: "capsule_store.png",
backgroundColor: "#ff0676e7",
title: "To be paid"
}
}
};
}
... ...
}
Live window timer
Live window timer is suitable for queuing, ticket grabbing and other scenarios. Developers who need to use live window timers need to configure timer fields in the structure with placeholders in the currently supported fields: ${}.
The specific sample code is as follows:
import { liveViewManager } from '@';
import { Want, wantAgent } from '@';
export class LiveViewController {
public async startLiveView(): Promise<> {
// Verify that the live window switch is on
if (! ()) {
throw new Error("Live view is disabled."); }
}
// Create the live view
const defaultView = await (); return await (defaultView); }
return await (defaultView);
}
private static async buildDefaultView(): Promise<> {
return {
// Construct the live window request body
id: 0, // The live window ID, generated by the developer.
event: "QUEUE", // Application scenario for the live window. queue: queuing
timer: {
time: 620000, // The time for the live window to be queued.
isCountdown: false,
isPaused: false
},
liveViewData: {
primary: {
title: "Large Table 4 Waiting for 32 Tables",
content: [
{ text: "${}", textColor: "#ff10c1f7" }, { text: " | Estimated time to wait &#ff10c1f7" }, { text:
{ text: " | Expected to take another >30 minutes" }
], // All text can only be set to one color, defaults to #FF000000 if textColor is not set.
keepTime: 15, // If you don't set a textColor, the default is to display #FF000000.
clickAction: await (), // If no textColor is set, the default is to display #FF000000.
layoutData: {
layoutType: .LAYOUT_TYPE_PROGRESS, progress: 0, // If you don't set a textColor, the default is to display #FF000000.
LAYOUT_TYPE_PROGRESS, progress: 0, color: "#FFFF0000", { layoutType: .
color: "#FFFF0000",
backgroundColor: "#FF000000", indicatorType: .
indicatorIcon: "", // Progress bar indicator icon, takes the value of
file name in the "/resources/rawfile" path.
lineType: .LINE_TYPE_DOTTED_LINE, // Progress bar indicator icon.
nodeIcons: ["icon_1.png", "icon_2.png"] // Icons for each node of the progress bar.
file name in the "/resources/rawfile" path.
}
}
}
}
}
... ...
}
3. Local update and end of live window.
After the live window is created locally, if the business state of the application changes, you need to call updateLiveView() of the liveViewManager to update the live window, and when updating, you need to modify the corresponding parameters that need to be modified in the request body. At the end of the service process of this application, stopLiveView() needs to be called to end the live window. Here we take the progress visualization template of the instant delivery scenario as an example to illustrate the methods of updating and ending the live window and the live capsule, the specific sample code is as follows:
import { liveViewManager } from '@';
import { Want, wantAgent } from '@';
export class LiveViewController {
private static contentColor: string = '#FF000000';
private static capsuleColor: string = '#FF308977';
public async startLiveView(): Promise<> {
// Verify that the live window switch is on
if (!()) {
throw new Error("Live view is disabled.");
}
// Creating live windows
const defaultView = await ();
return await (defaultView);
}
public async updateLiveView(): Promise<> {
// Verify that the live window switch is on
if (!()) {
throw new Error("Live view is disabled.");
}
// Modify the contents of the live window
const defaultView = await ();
= "envisage23:49serve notice (law)";
= [
{ text: "Waiting for merchants to take orders，",
textColor: },
{ text: "03:20Automatic Cancellation of Unanswered Orders",
textColor: }
];
= {
layoutType: .LAYOUT_TYPE_PROGRESS,
progress: 0,
lineType: 0,
nodeIcons: [ // Progress bar icons for each node，take a value of"/resources/rawfile"File name under path
'icon_store_white.png',
'icon_finish.png'
]
};
= {
type: .CAPSULE_TYPE_TEXT,
status: 1,
icon: 'capsule_store.png',
backgroundColor: ,
title: "pending order"
};
// Updating the live window
return await (defaultView);
}
public async stopLiveView(): Promise<> {
// Verify that the live window switch is on
if (!()) {
throw new Error("Live view is disabled.");
}
// Modify the contents of the live window
const defaultView = await ();
= '商品已serve notice (law)';
= [
{ text: 'Thank you for your endorsement.,',
textColor: },
{ text: 'Looking forward to the next visit',
textColor: }
];
= {
layoutType: .LAYOUT_TYPE_PROGRESS,
progress: 100,
lineType: 0,
nodeIcons: [ // Progress bar icons for each node，take a value of"/resources/rawfile"File name under path
'icon_order.png',
'icon_finish.png'
]
};
= {
type: .CAPSULE_TYPE_TEXT,
status: 1,
icon: 'capsule_gps.png',
backgroundColor: ,
title: '已serve notice (law)'
};
// End of live window
return await (defaultView);
}
private static async buildDefaultView(): Promise<> {
return {
// Structuring the live window request form
id: 0, // real-time windowID，Developer Generated。
event: "DELIVERY", // real-time window的应用场景。DELIVERY：Instant delivery（takeaways、fresh food）
liveViewData: {
primary: {
title: "Meals to be paid for",
content: [
{ text: "caffeine ", textColor: "#FF000000" },
{ text: "et al. (and other authors)2item", textColor: "#FF000000" }
],
keepTime: 15,
clickAction: await (),
layoutData: {
layoutType: .LAYOUT_TYPE_PICKUP,
title: "Amount to be paid",
content: "25.5unit of money (in PRC: Chinese yuan, in USA: dollar, etc)",
underlineColor: "#FF0A59F7",
descPic: ""
}
},
// Real Capsule Related Parameters
capsule: {
type: .CAPSULE_TYPE_TEXT,
status: 1,
icon: "capsule_store.png",
backgroundColor: "#FF308977",
title: "To be paid",
content: "..."
}
}
};
}
... ...
}
Learn more >>
gainLive Window Service Development Guidance Document