create DFX tools page

Signed-off-by: zhuhaokun <zhuhaokun1@huawei.com>
This commit is contained in:
zhuhaokun 2023-12-26 10:56:53 +08:00
parent 33a237fe90
commit 9632f8b9c8
23 changed files with 743 additions and 16 deletions

View File

@ -81,6 +81,10 @@
{
"name": "backgroundTask",
"srcPath": "./feature/backgroundTask"
},
{
"name": "DFXStateManagement",
"srcPath": "./feature/DFXStateManagement"
}
]
}

View File

@ -0,0 +1,6 @@
/node_modules
/oh_modules
/.preview
/build
/.cxx
/.test

View File

@ -0,0 +1,18 @@
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { DFXStateManagementHome } from './src/main/ets/view/DFXStateManagementHome'
export { DFXStateBeforeOptimization } from './src/main/ets/view/DFXStateBeforeOptimization'
export { DFXStateAfterOptimization } from './src/main/ets/view/DFXStateAfterOptimization'

View File

@ -0,0 +1,28 @@
{
"apiType": "stageMode",
"buildOption": {
},
"buildOptionSet": [
{
"name": "release",
"arkOptions": {
"obfuscation": {
"ruleOptions": {
"enable": true,
"files": [
"./obfuscation-rules.txt"
]
},
"consumerFiles": [
"./consumer-rules.txt"
]
}
}
},
],
"targets": [
{
"name": "default"
}
]
}

View File

@ -0,0 +1,6 @@
import { harTasks } from '@ohos/hvigor-ohos-plugin';
export default {
system: harTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
plugins:[] /* Custom plugin to extend the functionality of Hvigor. */
}

View File

@ -0,0 +1,18 @@
# Define project specific obfuscation rules here.
# You can include the obfuscation configuration files in the current module's build-profile.json5.
#
# For more details, see
# https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
# Obfuscation options:
# -disable-obfuscation: disable all obfuscations
# -enable-property-obfuscation: obfuscate the property names
# -enable-toplevel-obfuscation: obfuscate the names in the global scope
# -compact: remove unnecessary blank spaces and all line feeds
# -remove-log: remove all console.* statements
# -print-namecache: print the name cache that contains the mapping from the old names to new names
# -apply-namecache: reuse the given cache file
# Keep options:
# -keep-property-name: specifies property names that you want to keep
# -keep-global-name: specifies names that you want to keep in the global scope

View File

@ -0,0 +1,10 @@
{
"license": "Apache-2.0",
"devDependencies": {},
"author": "",
"name": "dfxstatemanagement",
"description": "Please describe the basic information.",
"main": "Index.ets",
"version": "1.0.0",
"dependencies": {}
}

View File

@ -0,0 +1,227 @@
@Observed
class NeedRenderImage {
public translateImageX: number = 0;
public translateImageY: number = 0;
public imageWidth: number = 78;
public imageHeight: number = 78;
}
@Observed
class NeedRenderScale {
public scaleX: number = 0.3;
public scaleY: number = 0.3;
}
@Observed
class NeedRenderAlpha {
public alpha: number = 0.5;
}
@Observed
class NeedRenderSize {
public width: number = 336;
public height: number = 178;
}
@Observed
class NeedRenderPos {
public posX: number = 10;
public posY: number = 50;
}
@Observed
class NeedRenderBorderRadius {
public borderRadius: number = 24;
}
@Observed
class NeedRenderFontSize {
public fontSize: number = 20;
}
@Observed
class NeedRenderTranslate {
public translateX: number = 0;
public translateY: number = 0;
}
@Observed
class UIStyle {
needRenderTranslate: NeedRenderTranslate = new NeedRenderTranslate();
needRenderFontSize: NeedRenderFontSize = new NeedRenderFontSize();
needRenderBorderRadius: NeedRenderBorderRadius = new NeedRenderBorderRadius();
needRenderPos: NeedRenderPos = new NeedRenderPos();
needRenderSize: NeedRenderSize = new NeedRenderSize();
needRenderAlpha: NeedRenderAlpha = new NeedRenderAlpha();
needRenderScale: NeedRenderScale = new NeedRenderScale();
needRenderImage: NeedRenderImage = new NeedRenderImage();
}
@Component
struct SpecialImage {
@Consume uiStyle: UIStyle;
@Prop needRenderImage: NeedRenderImage
private isRenderSpecialImage(): number {
console.log("SpecialImage is rendered");
return 1;
}
build() {
Image($r('app.media.icon'))
.width(this.needRenderImage.imageWidth)
.height(this.needRenderImage.imageHeight)
.margin({ top: 20 })
.translate({
x: this.needRenderImage.translateImageX,
y: this.needRenderImage.translateImageY
})
.opacity(this.isRenderSpecialImage())
}
}
@Component
struct CompA {
@Provide uiStyle: UIStyle = new UIStyle();
@ObjectLink needRenderTranslate: NeedRenderTranslate;
@ObjectLink needRenderFontSize: NeedRenderFontSize;
@ObjectLink needRenderBorderRadius: NeedRenderBorderRadius;
@ObjectLink needRenderPos: NeedRenderPos;
@ObjectLink needRenderSize: NeedRenderSize;
@ObjectLink needRenderAlpha: NeedRenderAlpha;
@Prop needRenderScale: NeedRenderScale;
private isRenderColumn(): number {
console.log("Column is rendered");
return 1;
}
private isRenderStack(): number {
console.log("Stack is rendered");
return 1;
}
private isRenderImage(): number {
console.log("Image is rendered");
return 1;
}
private isRenderText(): number {
console.log("Text is rendered");
return 1;
}
build() {
Column() {
SpecialImage({
needRenderImage: this.uiStyle.needRenderImage
})
SpecialImage({
needRenderImage: this.uiStyle.needRenderImage
})
Stack() {
Column() {
Image($r('app.media.icon'))
.opacity(this.needRenderAlpha.alpha)
.scale({
x: this.needRenderScale.scaleX,
y: this.needRenderScale.scaleY
})
.padding(this.isRenderImage())
.width(300)
.height(300)
}
.width('100%')
.position({ y: -80 })
Stack() {
Text("Hello World")
.fontColor($r('app.color.text_color'))
.fontWeight(FontWeight.Medium)
.fontSize(this.needRenderFontSize.fontSize)
.opacity(this.isRenderText())
.margin({ top: 12 })
}
.opacity(this.isRenderStack())
.position({
x: this.needRenderPos.posX,
y: this.needRenderPos.posY
})
.width('100%')
.height('100%')
}
.margin({ top: 50 })
.borderRadius(this.needRenderBorderRadius.borderRadius)
.opacity(this.isRenderStack())
.backgroundColor($r('app.color.stack_color'))
.width(this.needRenderSize.width)
.height(this.needRenderSize.height)
.translate({
x: this.needRenderTranslate.translateX,
y: this.needRenderTranslate.translateY
})
Column() {
Button("Move")
.width(312)
.fontSize(20)
.backgroundColor($r('app.color.button_color'))
.margin({ bottom: 10 })
.onClick(() => {
animateTo({
duration: 500
}, () => {
this.needRenderTranslate.translateY = (this.needRenderTranslate.translateY + 180) % 250;
})
})
Button("Scale")
.borderRadius(20)
.backgroundColor($r('app.color.button_color'))
.fontSize(20)
.width(312)
.margin({ bottom: 10 })
.onClick(() => {
this.needRenderScale.scaleX = (this.needRenderScale.scaleX + 0.6) % 0.8;
})
Button("Change Image")
.borderRadius(20)
.backgroundColor($r('app.color.button_color'))
.fontSize(20)
.width(312)
.onClick(() => {
this.uiStyle.needRenderImage.imageWidth = (this.uiStyle.needRenderImage.imageWidth + 30) % 160;
this.uiStyle.needRenderImage.imageHeight = (this.uiStyle.needRenderImage.imageHeight + 30) % 160;
})
}
.position({
y: 616
})
.height('100%')
.width('100%')
}
.opacity(this.isRenderColumn())
.width('100%')
.height('100%')
}
}
@Component
export struct DFXStateAfterOptimization {
@State uiStyle: UIStyle = new UIStyle();
build() {
Stack() {
CompA({
uiStyle: this.uiStyle,
needRenderTranslate: this.uiStyle.needRenderTranslate,
needRenderFontSize: this.uiStyle.needRenderFontSize,
needRenderBorderRadius: this.uiStyle.needRenderBorderRadius,
needRenderPos: this.uiStyle.needRenderPos,
needRenderSize: this.uiStyle.needRenderSize,
needRenderAlpha: this.uiStyle.needRenderAlpha,
needRenderScale: this.uiStyle.needRenderScale
})
}
.backgroundColor($r('app.color.stack_background'))
}
}

View File

@ -0,0 +1,234 @@
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
class NeedRenderImage {
public translateImageX: number = 0;
public translateImageY: number = 0;
public imageWidth: number = 78;
public imageHeight: number = 78;
}
class NeedRenderScale {
public scaleX: number = 0.3;
public scaleY: number = 0.3;
}
class NeedRenderAlpha {
public alpha: number = 0.5;
}
class NeedRenderSize {
public width: number = 336;
public height: number = 178;
}
class NeedRenderPos {
public posX: number = 10;
public posY: number = 50;
}
class NeedRenderBorderRadius {
public borderRadius: number = 24;
}
class NeedRenderFontSize {
public fontSize: number = 20;
}
class NeedRenderTranslate {
public translateX: number = 0;
public translateY: number = 0;
}
class UIStyle {
needRenderTranslate: NeedRenderTranslate = new NeedRenderTranslate();
needRenderFontSize: NeedRenderFontSize = new NeedRenderFontSize();
needRenderBorderRadius: NeedRenderBorderRadius = new NeedRenderBorderRadius();
needRenderPos: NeedRenderPos = new NeedRenderPos();
needRenderSize: NeedRenderSize = new NeedRenderSize();
needRenderAlpha: NeedRenderAlpha = new NeedRenderAlpha();
needRenderScale: NeedRenderScale = new NeedRenderScale();
needRenderImage: NeedRenderImage = new NeedRenderImage();
constructor() {
}
}
@Component
struct SpecialImage {
@Link uiStyle: UIStyle;
private isRenderSpecialImage(): number {
console.log("SpecialImage is rendered");
return 1;
}
build() {
Image($r('app.media.icon'))
.width(this.uiStyle.needRenderImage.imageWidth)
.height(this.uiStyle.needRenderImage.imageHeight)
.margin({ top: 20 })
.translate({
x: this.uiStyle.needRenderImage.translateImageX,
y: this.uiStyle.needRenderImage.translateImageY
})
.opacity(this.isRenderSpecialImage())
}
}
@Component
struct CompA {
@Prop uiStyle: UIStyle;
@Prop needRenderTranslate: NeedRenderTranslate;
@Prop needRenderFontSize: NeedRenderFontSize;
@Prop needRenderBorderRadius: NeedRenderBorderRadius;
@Prop needRenderPos: NeedRenderPos;
@Prop needRenderSize: NeedRenderSize;
@Prop needRenderAlpha: NeedRenderAlpha;
@Prop needRenderScale: NeedRenderScale;
private isRenderColumn(): number {
console.log("Column is rendered");
return 1;
}
private isRenderStack(): number {
console.log("Stack is rendered");
return 1;
}
private isRenderImage(): number {
console.log("Image is rendered");
return 1;
}
private isRenderText(): number {
console.log("Text is rendered");
return 1;
}
build() {
Column() {
SpecialImage({
uiStyle: this.uiStyle
})
Stack() {
Column() {
Image($r('app.media.icon'))
.opacity(this.needRenderAlpha.alpha)
.scale({
x: this.needRenderScale.scaleX,
y: this.needRenderScale.scaleY
})
.padding(this.isRenderImage())
.width(300)
.height(300)
}
.width('100%')
.position({ y: -80 })
Stack() {
Text("Hello World")
.fontColor($r('app.color.text_color'))
.fontWeight(FontWeight.Medium)
.fontSize(this.needRenderFontSize.fontSize)
.opacity(this.isRenderText())
.margin({ top: 12 })
}
.opacity(this.isRenderStack())
.position({
x: this.needRenderPos.posX,
y: this.needRenderPos.posY
})
.width('100%')
.height('100%')
}
.margin({ top: 50 })
.borderRadius(this.needRenderBorderRadius.borderRadius)
.opacity(this.isRenderStack())
.backgroundColor($r('app.color.stack_color'))
.width(this.needRenderSize.width)
.height(this.needRenderSize.height)
.translate({
x: this.needRenderTranslate.translateX,
y: this.needRenderTranslate.translateY
})
Column() {
Button("Move")
.width(312)
.fontSize(20)
.backgroundColor($r('app.color.button_color'))
.margin({ bottom: 10 })
.onClick(() => {
animateTo({
duration: 500
}, () => {
this.needRenderTranslate.translateY = (this.needRenderTranslate.translateY + 180) % 250;
})
})
Button("Scale")
.borderRadius(20)
.backgroundColor($r('app.color.button_color'))
.fontSize(20)
.width(312)
.margin({ bottom: 10 })
.onClick(() => {
this.needRenderScale.scaleX = (this.needRenderScale.scaleX + 0.6) % 0.8;
})
Button("Change Image")
.borderRadius(20)
.backgroundColor($r('app.color.button_color'))
.fontSize(20)
.width(312)
.onClick(() => {
this.uiStyle.needRenderImage.imageWidth = (this.uiStyle.needRenderImage.imageWidth + 30) % 160;
this.uiStyle.needRenderImage.imageHeight = (this.uiStyle.needRenderImage.imageHeight + 30) % 160;
})
}
.position({
y: 616
})
.height('100%')
.width('100%')
}
.opacity(this.isRenderColumn())
.width('100%')
.height('100%')
}
}
@Component
export struct DFXStateBeforeOptimization {
@State uiStyle: UIStyle = new UIStyle();
build() {
Stack() {
CompA({
uiStyle: this.uiStyle,
needRenderTranslate: this.uiStyle.needRenderTranslate,
needRenderFontSize: this.uiStyle.needRenderFontSize,
needRenderBorderRadius: this.uiStyle.needRenderBorderRadius,
needRenderPos: this.uiStyle.needRenderPos,
needRenderSize: this.uiStyle.needRenderSize,
needRenderAlpha: this.uiStyle.needRenderAlpha,
needRenderScale: this.uiStyle.needRenderScale
})
}
.backgroundColor($r('app.color.stack_background'))
}
}

View File

@ -0,0 +1,44 @@
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@ohos.router'
@Component
export struct DFXStateManagementHome {
@State message: string = 'Hello World DFXStateManagementHome'
build() {
Row() {
Column() {
Button($r('app.string.before_optimization'))
.width("80%")
.fontSize(18)
.margin({ top: 30 })
.onClick(() => {
router.pushUrl({ url: "pages/DFXStateManagement/DFXStateBeforeOptimizationPage" });
})
Button($r('app.string.after_optimization'))
.width("80%")
.fontSize(18)
.margin({ top: 30 })
.onClick(() => {
router.pushUrl({ url: "pages/DFXStateManagement/DFXStateAfterOptimizationPage" });
})
}
.width('100%')
}
.height('100%')
}
}

View File

@ -0,0 +1,10 @@
{
"module": {
"name": "DFXStateManagement",
"type": "har",
"deviceTypes": [
"default",
"tablet"
]
}
}

View File

@ -0,0 +1,20 @@
{
"color": [
{
"name": "text_color",
"value": "#182431"
},
{
"name": "stack_color",
"value": "#FFFFFF"
},
{
"name": "button_color",
"value": "#FF007DFF"
},
{
"name": "stack_background",
"value": "#F1F3F5"
}
]
}

View File

@ -0,0 +1,16 @@
{
"string": [
{
"name": "page_show",
"value": "page from npm package"
},
{
"name": "before_optimization",
"value": "状态优化前"
},
{
"name": "after_optimization",
"value": "状态优化后"
}
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

View File

@ -0,0 +1,8 @@
{
"string": [
{
"name": "page_show",
"value": "page from npm package"
}
]
}

View File

@ -0,0 +1,8 @@
{
"string": [
{
"name": "page_show",
"value": "page from npm package"
}
]
}

View File

@ -1,18 +1,3 @@
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
{
"lockfileVersion": 1,
"ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",

View File

@ -51,5 +51,9 @@ export let performanceTypeArray: Array<PerformanceMsg> = [
{
name: 'BackgroundTask',
uri: 'pages/backgroundTask/BackgroundTaskPage'
},
{
name: 'DFX StateManagement',
uri: 'pages/DFXStateManagement/DFXStateManagementPage'
}
]

View File

@ -0,0 +1,26 @@
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { DFXStateAfterOptimization } from '@ohos/DFXStateManagement';
@Entry
@Component
struct DFXStateAfterOptimizationPage {
build() {
Column() {
DFXStateAfterOptimization()
}
}
}

View File

@ -0,0 +1,26 @@
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { DFXStateBeforeOptimization } from '@ohos/DFXStateManagement';
@Entry
@Component
struct DFXStateBeforeOptimizationPage {
build() {
Column() {
DFXStateBeforeOptimization()
}
}
}

View File

@ -0,0 +1,26 @@
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { DFXStateManagementHome } from '@ohos/DFXStateManagement';
@Entry
@Component
struct DFXStateManagementPage {
build() {
Column() {
DFXStateManagementHome()
}
}
}

View File

@ -32,6 +32,9 @@
"pages/trace/TracePage",
"pages/backgroundTask/BackgroundTaskPage",
"pages/backgroundTask/TransientTask",
"pages/backgroundTask/LongTermTask"
"pages/backgroundTask/LongTermTask",
"pages/DFXStateManagement/DFXStateManagementPage",
"pages/DFXStateManagement/DFXStateBeforeOptimizationPage",
"pages/DFXStateManagement/DFXStateAfterOptimizationPage"
]
}