1/** 2 * Copyright (c) 2021-2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import { 17 FormModel, 18 CardItemInfo, 19 Log, 20 windowManager, 21 localEventManager, 22 StyleConstants, 23 EventConstants 24} from '@ohos/common'; 25 26const TAG = 'FormManagerComponent'; 27 28/** 29 * Form manager view Component (phone adaptation). 30 */ 31@Component 32export struct FormManagerComponent { 33 @StorageLink('formAppInfo') formAppInfo: CardItemInfo = new CardItemInfo(); 34 @StorageLink('formMgrItem') formItem: Array<CardItemInfo> = []; 35 @State allowUpdate: boolean = false; 36 private mSwiperController: SwiperController = new SwiperController(); 37 private mFormModel: FormModel = FormModel.getInstance(); 38 private mSwiperIndex: number = 0; 39 @State enabledDomEventResponse: boolean = true; 40 @State chooseCardId: number | undefined = -1; 41 private mFormIdMap: Map<number, number> = new Map<number, number>(); 42 private mFormComponentWidth: number[] = [ 43 StyleConstants.FORM_MGR_FORM_SIZE * StyleConstants.DPI_RATIO * 2, 44 StyleConstants.FORM_MGR_FORM_SIZE * StyleConstants.DPI_RATIO * 2, 45 StyleConstants.FORM_MGR_FORM_SIZE * StyleConstants.DPI_RATIO * 4, 46 StyleConstants.FORM_MGR_FORM_SIZE * StyleConstants.DPI_RATIO * 4, 47 StyleConstants.FORM_MGR_FORM_SIZE * StyleConstants.DPI_RATIO * 1, 48 StyleConstants.FORM_MGR_FORM_SIZE * StyleConstants.DPI_RATIO * 1, 49 StyleConstants.FORM_MGR_FORM_SIZE * StyleConstants.DPI_RATIO * 4, 50 ]; 51 private mFormComponentHeight: number[] = [ 52 StyleConstants.FORM_MGR_FORM_SIZE * StyleConstants.DPI_RATIO * 1, 53 StyleConstants.FORM_MGR_FORM_SIZE * StyleConstants.DPI_RATIO * 2, 54 StyleConstants.FORM_MGR_FORM_SIZE * StyleConstants.DPI_RATIO * 2, 55 StyleConstants.FORM_MGR_FORM_SIZE * StyleConstants.DPI_RATIO * 4, 56 StyleConstants.FORM_MGR_FORM_SIZE * StyleConstants.DPI_RATIO * 2, 57 StyleConstants.FORM_MGR_FORM_SIZE * StyleConstants.DPI_RATIO * 1, 58 StyleConstants.FORM_MGR_FORM_SIZE * StyleConstants.DPI_RATIO * 6, 59 ]; 60 61 aboutToAppear(): void { 62 this.chooseCardId = -1; 63 this.mFormModel = FormModel.getInstance(); 64 Log.showInfo(TAG, `aboutToAppear formAppInfo: ${JSON.stringify(this.formAppInfo)}`); 65 this.getCurrentFormInfo(); 66 } 67 68 aboutToDisappear(): void { 69 if (this.chooseCardId !== -1) { 70 this.clearNoUseFormById(); 71 } else { 72 this.clearAllFormById(); 73 } 74 } 75 76 /** 77 * Get current form information by bundle name. 78 */ 79 private async getCurrentFormInfo() { 80 this.mFormModel.getFormsInfoByBundleName(this.formAppInfo.bundleName); 81 } 82 83 /** 84 * Get choose card info from current form information. 85 * 86 * @return {any} formCardItem 87 */ 88 private getChooseCard() { 89 this.chooseCardId = this.mFormIdMap.get(this.mSwiperIndex); 90 let formCardItem: CardItemInfo = new CardItemInfo(); 91 formCardItem.cardId = this.mFormIdMap.get(this.mSwiperIndex); 92 let count = 0; 93 let isStop = false; 94 for (let i = 0; i < this.formItem.length; i++) { 95 if (isStop) { 96 break; 97 } 98 for (let j = 0; j < this.formItem[i].supportDimensions.length; j++) { 99 if (count === this.mSwiperIndex) { 100 formCardItem.cardName = this.formItem[i].cardName; 101 formCardItem.bundleName = this.formItem[i].bundleName; 102 formCardItem.abilityName = this.formItem[i].abilityName; 103 formCardItem.moduleName = this.formItem[i].moduleName; 104 formCardItem.cardDimension = this.formItem[i].supportDimensions[j]; 105 formCardItem.formConfigAbility = this.formItem[i].formConfigAbility; 106 formCardItem.appLabelId = this.formAppInfo.appLabelId; 107 isStop = true; 108 break; 109 } 110 count++; 111 } 112 } 113 return formCardItem; 114 } 115 116 /** 117 * Keep the form which be added to the desktop, and delete the remaining forms. 118 */ 119 private clearNoUseFormById(): void { 120 for (let i = 0; i < this.mFormIdMap.size; i++) { 121 if (i != this.mSwiperIndex) { 122 this.mFormModel.deleteFormByFormID(this.mFormIdMap.get(i)); 123 } 124 } 125 } 126 127 /** 128 * Delete all form by id. 129 */ 130 private clearAllFormById(): void { 131 for (let i = 0; i < this.mFormIdMap.size; i++) { 132 this.mFormModel.deleteFormByFormID(this.mFormIdMap.get(i)); 133 } 134 } 135 136 build() { 137 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 138 Row() { 139 Image(StyleConstants.DEFAULT_FORM_MGR_BACK_IMAGE) 140 .width(StyleConstants.FORM_MGR_BACK_ICON_WIDTH * StyleConstants.DPI_RATIO) 141 .height(StyleConstants.FORM_MGR_BACK_ICON_HEIGHT * StyleConstants.DPI_RATIO) 142 .objectFit(ImageFit.Fill) 143 .margin({left: StyleConstants.FORM_MGR_BACK_ICON_LEFT_MARGIN * StyleConstants.DPI_RATIO}) 144 .onClick(() => { 145 Log.showDebug(TAG, 'hide form manager window'); 146 this.clearAllFormById(); 147 windowManager.destroyWindow(windowManager.FORM_MANAGER_WINDOW_NAME); 148 }) 149 Blank() 150 } 151 .margin({top: StyleConstants.FORM_MGR_STATUS_BAR_HEIGHT * StyleConstants.DPI_RATIO}) 152 .width('100%') 153 .height(StyleConstants.FORM_MGR_APP_BAR_HEIGHT * StyleConstants.DPI_RATIO) 154 Text(this.formAppInfo.appName) 155 .fontColor(StyleConstants.DEFAULT_FORM_MGR_FONT_COLOR) 156 .fontSize(StyleConstants.FORM_MGR_APP_LABEL_TEXT_SIZE * StyleConstants.DPI_RATIO) 157 .margin({top: 10 * StyleConstants.DPI_RATIO, bottom: 8 * StyleConstants.DPI_RATIO }) 158 Column({ space: 5 }) { 159 Swiper(this.mSwiperController) { 160 ForEach(this.formItem, (formItem: CardItemInfo) => { 161 ForEach(formItem.supportDimensions, (dimensionItem: number) => { 162 Column() { 163 Text(formItem.description) 164 .width('70%') 165 .fontColor(0xe5ffffff) 166 .fontSize(StyleConstants.FORM_MGR_DESCRIPTION_TEXT_SIZE * StyleConstants.DPI_RATIO) 167 .textAlign(TextAlign.Center) 168 Column() { 169 Flex({ 170 direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 171 if (this.formAppInfo.bundleName == formItem.bundleName) { 172 FormComponent({ 173 id: formItem.cardId as number, 174 name: formItem.cardName as string, 175 bundle: formItem.bundleName as string, 176 ability: formItem.abilityName as string, 177 module: formItem.moduleName as string, 178 dimension: dimensionItem, 179 }) 180 .enabled(false) 181 .focusable(false) 182 .clip(new Rect({ 183 width: this.mFormComponentWidth[dimensionItem - 1], 184 height: this.mFormComponentHeight[dimensionItem - 1], 185 radius: 24 186 })) 187 .size({ 188 width: this.mFormComponentWidth[dimensionItem - 1], 189 height: this.mFormComponentHeight[dimensionItem - 1] 190 }) 191 .allowUpdate(this.allowUpdate) 192 .visibility(Visibility.Visible) 193 .onAcquired((form) => { 194 let currentIndex = this.calculateIndex(formItem, dimensionItem); 195 Log.showInfo(TAG, `FormComponent card id is: ${form.id}, currentIndex: ${currentIndex}`); 196 if (currentIndex >= 0) { 197 this.mFormIdMap.set(currentIndex, form.id); 198 } 199 }) 200 .onError((error) => { 201 Log.showDebug(TAG, `FormComponent error msg: ${error.msg}`); 202 }) 203 } 204 } 205 } 206 .height('80%') 207 }.width('100%') 208 }, (dimensionItem: number) => JSON.stringify(dimensionItem)) 209 }, (formItem: CardItemInfo) => JSON.stringify(formItem)) 210 }.width('100%') 211 .height('100%') 212 .loop(false) 213 .duration(80) 214 .cachedCount(1) 215 .index(0) 216 .indicator(Indicator.dot().selectedColor(StyleConstants.DEFAULT_FORM_MGR_FONT_COLOR)) 217 .onChange((index: number) => { 218 if (this.mSwiperIndex !== index) { 219 this.mSwiperIndex = index; 220 } 221 }) 222 .onAnimationStart(() => { 223 this.enabledDomEventResponse = false; 224 }) 225 .onAnimationEnd(() => { 226 this.enabledDomEventResponse = true; 227 }) 228 }.alignItems(HorizontalAlign.Center) 229 .height('60%') 230 Blank() 231 Button({type: ButtonType.Capsule}) { 232 Row() { 233 Text($r('app.string.add_to_desktop')) 234 .fontColor(StyleConstants.DEFAULT_FORM_MGR_FONT_COLOR) 235 .fontSize(StyleConstants.FORM_MGR_ADD_TO_DESKTOP_TEXT_SIZE * StyleConstants.DPI_RATIO) 236 } 237 } 238 .enabled(this.enabledDomEventResponse) 239 .backgroundColor(0x66ffffff) 240 .width(StyleConstants.FORM_MGR_ADD_TO_DESKTOP_BUTTON_WIDTH * StyleConstants.DPI_RATIO) 241 .height(StyleConstants.FORM_MGR_ADD_TO_DESKTOP_BUTTON_HEIGHT * StyleConstants.DPI_RATIO) 242 .margin({bottom: StyleConstants.FORM_MGR_ADD_TO_DESKTOP_BUTTON_BOTTOM_MARGIN * StyleConstants.DPI_RATIO, 243 left: StyleConstants.FORM_MGR_ADD_TO_DESKTOP_BUTTON_LEFT_MARGIN * StyleConstants.DPI_RATIO, 244 right: StyleConstants.FORM_MGR_ADD_TO_DESKTOP_BUTTON_RIGHT_MARGIN * StyleConstants.DPI_RATIO}) 245 .onClick(() => { 246 Log.showDebug(TAG, 'form add to desktop'); 247 localEventManager.sendLocalEventSticky( 248 EventConstants.EVENT_REQUEST_PAGEDESK_FORM_ITEM_ADD, this.getChooseCard() 249 ); 250 this.clearNoUseFormById(); 251 windowManager.destroyWindow(windowManager.FORM_MANAGER_WINDOW_NAME); 252 windowManager.destroyWindow(windowManager.FORM_SERVICE_WINDOW_NAME); 253 localEventManager.sendLocalEventSticky(EventConstants.EVENT_OPEN_FOLDER_TO_CLOSE, null); 254 }) 255 } 256 .width(StyleConstants.DEFAULT_LAYOUT_PERCENTAGE) 257 .height(StyleConstants.DEFAULT_LAYOUT_PERCENTAGE) 258 .backgroundImage(StyleConstants.DEFAULT_FORM_MGR_BACKGROUND_IMAGE) 259 } 260 261 private calculateIndex(formInfo: CardItemInfo, dimension: number): number { 262 let count = 0; 263 for (let i = 0; i < this.formItem.length; i++) { 264 let tempItem = this.formItem[i]; 265 if (formInfo.cardName !== tempItem.cardName || 266 formInfo.bundleName !== tempItem.bundleName || 267 formInfo.abilityName !== tempItem.abilityName || 268 formInfo.moduleName !== tempItem.moduleName) { 269 count += tempItem.supportDimensions.length; 270 continue; 271 } 272 for (let j = 0; j < formInfo.supportDimensions.length; j++) { 273 if (dimension === formInfo.supportDimensions[j]) { 274 return count; 275 } 276 count++; 277 } 278 } 279 return -1; 280 } 281} 282