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 = -1; 41 private mFormIdList: 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.mFormIdList[this.mSwiperIndex]; 90 let formCardItem: CardItemInfo = new CardItemInfo(); 91 formCardItem.cardId = this.mFormIdList[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 let id = this.mFormIdList[this.mSwiperIndex]; 121 for (let i = 0; i < this.mFormIdList.length; i++) { 122 if (i != this.mSwiperIndex) { 123 this.mFormModel.deleteFormByFormID(this.mFormIdList[i]); 124 } 125 } 126 } 127 128 /** 129 * Delete all form by id. 130 */ 131 private clearAllFormById(): void { 132 for (let i = 0; i < this.mFormIdList.length; i++) { 133 this.mFormModel.deleteFormByFormID(this.mFormIdList[i]); 134 } 135 } 136 137 build() { 138 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 139 Row() { 140 Image(StyleConstants.DEFAULT_FORM_MGR_BACK_IMAGE) 141 .width(StyleConstants.FORM_MGR_BACK_ICON_WIDTH * StyleConstants.DPI_RATIO) 142 .height(StyleConstants.FORM_MGR_BACK_ICON_HEIGHT * StyleConstants.DPI_RATIO) 143 .objectFit(ImageFit.Fill) 144 .margin({left: StyleConstants.FORM_MGR_BACK_ICON_LEFT_MARGIN * StyleConstants.DPI_RATIO}) 145 .onClick(() => { 146 Log.showDebug(TAG, 'hide form manager window'); 147 this.clearAllFormById(); 148 windowManager.destroyWindow(windowManager.FORM_MANAGER_WINDOW_NAME); 149 }) 150 Blank() 151 } 152 .margin({top: StyleConstants.FORM_MGR_STATUS_BAR_HEIGHT * StyleConstants.DPI_RATIO}) 153 .width('100%') 154 .height(StyleConstants.FORM_MGR_APP_BAR_HEIGHT * StyleConstants.DPI_RATIO) 155 Text(this.formAppInfo.appName) 156 .fontColor(StyleConstants.DEFAULT_FORM_MGR_FONT_COLOR) 157 .fontSize(StyleConstants.FORM_MGR_APP_LABEL_TEXT_SIZE * StyleConstants.DPI_RATIO) 158 .margin({top: 10 * StyleConstants.DPI_RATIO, bottom: 8 * StyleConstants.DPI_RATIO }) 159 Column({ space: 5 }) { 160 Swiper(this.mSwiperController) { 161 ForEach(this.formItem, (formItem: CardItemInfo) => { 162 ForEach(formItem.supportDimensions, (dimensionItem: number) => { 163 Column() { 164 Text(formItem.description) 165 .width('70%') 166 .fontColor(0xe5ffffff) 167 .fontSize(StyleConstants.FORM_MGR_DESCRIPTION_TEXT_SIZE * StyleConstants.DPI_RATIO) 168 .textAlign(TextAlign.Center) 169 Column() { 170 Flex({ 171 direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 172 if (this.formAppInfo.bundleName == formItem.bundleName) { 173 FormComponent({ 174 id: formItem.cardId as number, 175 name: formItem.cardName as string, 176 bundle: formItem.bundleName as string, 177 ability: formItem.abilityName as string, 178 module: formItem.moduleName as string, 179 dimension: dimensionItem, 180 }) 181 .enabled(false) 182 .focusable(false) 183 .clip(new Rect({ 184 width: this.mFormComponentWidth[dimensionItem - 1], 185 height: this.mFormComponentHeight[dimensionItem - 1], 186 radius: 24 187 })) 188 .size({ 189 width: this.mFormComponentWidth[dimensionItem - 1], 190 height: this.mFormComponentHeight[dimensionItem - 1] 191 }) 192 .allowUpdate(this.allowUpdate) 193 .visibility(Visibility.Visible) 194 .onAcquired((form) => { 195 Log.showDebug(TAG, `FormComponent card id is: ${form.id}`); 196 this.mFormIdList.push(form.id); 197 }) 198 .onError((error) => { 199 Log.showDebug(TAG, `FormComponent error msg: ${error.msg}`); 200 }) 201 } 202 } 203 } 204 .height('80%') 205 }.width('100%') 206 }, (dimensionItem: number) => JSON.stringify(dimensionItem)) 207 }, (formItem: CardItemInfo) => JSON.stringify(formItem)) 208 }.width('100%') 209 .height('100%') 210 .loop(false) 211 .duration(80) 212 .cachedCount(1) 213 .index(0) 214 .indicator(Indicator.dot().selectedColor(StyleConstants.DEFAULT_FORM_MGR_FONT_COLOR)) 215 .onChange((index: number) => { 216 if (this.mSwiperIndex !== index) { 217 this.mSwiperIndex = index; 218 } 219 }) 220 .onAnimationStart(() => { 221 this.enabledDomEventResponse = false; 222 }) 223 .onAnimationEnd(() => { 224 this.enabledDomEventResponse = true; 225 }) 226 }.alignItems(HorizontalAlign.Center) 227 .height('60%') 228 Blank() 229 Button({type: ButtonType.Capsule}) { 230 Row() { 231 Text($r('app.string.add_to_desktop')) 232 .fontColor(StyleConstants.DEFAULT_FORM_MGR_FONT_COLOR) 233 .fontSize(StyleConstants.FORM_MGR_ADD_TO_DESKTOP_TEXT_SIZE * StyleConstants.DPI_RATIO) 234 } 235 } 236 .enabled(this.enabledDomEventResponse) 237 .backgroundColor(0x66ffffff) 238 .width(StyleConstants.FORM_MGR_ADD_TO_DESKTOP_BUTTON_WIDTH * StyleConstants.DPI_RATIO) 239 .height(StyleConstants.FORM_MGR_ADD_TO_DESKTOP_BUTTON_HEIGHT * StyleConstants.DPI_RATIO) 240 .margin({bottom: StyleConstants.FORM_MGR_ADD_TO_DESKTOP_BUTTON_BOTTOM_MARGIN * StyleConstants.DPI_RATIO, 241 left: StyleConstants.FORM_MGR_ADD_TO_DESKTOP_BUTTON_LEFT_MARGIN * StyleConstants.DPI_RATIO, 242 right: StyleConstants.FORM_MGR_ADD_TO_DESKTOP_BUTTON_RIGHT_MARGIN * StyleConstants.DPI_RATIO}) 243 .onClick(() => { 244 Log.showDebug(TAG, 'form add to desktop'); 245 localEventManager.sendLocalEventSticky( 246 EventConstants.EVENT_REQUEST_PAGEDESK_FORM_ITEM_ADD, this.getChooseCard() 247 ); 248 this.clearNoUseFormById(); 249 windowManager.destroyWindow(windowManager.FORM_MANAGER_WINDOW_NAME); 250 windowManager.destroyWindow(windowManager.FORM_SERVICE_WINDOW_NAME); 251 localEventManager.sendLocalEventSticky(EventConstants.EVENT_OPEN_FOLDER_TO_CLOSE, null); 252 }) 253 } 254 .width(StyleConstants.DEFAULT_LAYOUT_PERCENTAGE) 255 .height(StyleConstants.DEFAULT_LAYOUT_PERCENTAGE) 256 .backgroundImage(StyleConstants.DEFAULT_FORM_MGR_BACKGROUND_IMAGE) 257 } 258} 259