diff --git a/code/BasicFeature/Graphics/DisplaySoloist/entry/src/main/ets/pages/Index.ets b/code/BasicFeature/Graphics/DisplaySoloist/entry/src/main/ets/pages/Index.ets
index 118ba0102d2d24d48af5bfdfb219b89e8f41db14..7f71e4a8439d533c58b9f147a25c7617a19e6b4e 100644
--- a/code/BasicFeature/Graphics/DisplaySoloist/entry/src/main/ets/pages/Index.ets
+++ b/code/BasicFeature/Graphics/DisplaySoloist/entry/src/main/ets/pages/Index.ets
@@ -84,7 +84,7 @@ struct Index {
             }
           }).margin(4)
 
-        XComponent({ id: 'xcomponentId30', type: 'surface', libraryname: 'entry' })
+        XComponent({ id: 'xcomponentId30', type: XComponentType.SURFACE, libraryname: 'entry' })
           .onLoad((xComponentContext) => {
             this.xComponentContext1 = xComponentContext as XComponentContext;
           }).width('640px')
@@ -110,7 +110,7 @@ struct Index {
             }
           }).margin(4)
 
-        XComponent({ id: 'xcomponentId60', type: 'surface', libraryname: 'entry' })
+        XComponent({ id: 'xcomponentId60', type: XComponentType.SURFACE, libraryname: 'entry' })
           .onLoad((xComponentContext) => {
             this.xComponentContext2 = xComponentContext as XComponentContext;
           }).width('640px')
@@ -136,7 +136,7 @@ struct Index {
             }
           }).margin(4)
 
-        XComponent({ id: 'xcomponentId120', type: 'surface', libraryname: 'entry' })
+        XComponent({ id: 'xcomponentId120', type: XComponentType.SURFACE, libraryname: 'entry' })
           .onLoad((xComponentContext) => {
             this.xComponentContext3 = xComponentContext as XComponentContext;
           }).width('640px')
diff --git a/code/DocsSample/graphic/DisplaySoloist/entry/src/main/ets/pages/Index.ets b/code/DocsSample/graphic/DisplaySoloist/entry/src/main/ets/pages/Index.ets
index ad64905125d8e6c3983e6fee9b7af17cd3b9a41f..69e4c3b1d7d241a964656a7fc5af9c79c22f2f59 100644
--- a/code/DocsSample/graphic/DisplaySoloist/entry/src/main/ets/pages/Index.ets
+++ b/code/DocsSample/graphic/DisplaySoloist/entry/src/main/ets/pages/Index.ets
@@ -79,7 +79,7 @@ struct Index {
             }
           }).margin(4)
 
-        XComponent({ id: 'xcomponentId30', type: 'surface', libraryname: 'entry' })
+        XComponent({ id: 'xcomponentId30', type: XComponentType.SURFACE, libraryname: 'entry' })
           .onLoad((xComponentContext) => {
             this.xComponentContext1 = xComponentContext as XComponentContext;
           }).width('640px')
@@ -105,7 +105,7 @@ struct Index {
             }
           }).margin(4)
 
-        XComponent({ id: 'xcomponentId60', type: 'surface', libraryname: 'entry' })
+        XComponent({ id: 'xcomponentId60', type: XComponentType.SURFACE, libraryname: 'entry' })
           .onLoad((xComponentContext) => {
             this.xComponentContext2 = xComponentContext as XComponentContext;
           }).width('640px')
@@ -131,7 +131,7 @@ struct Index {
             }
           }).margin(4)
 
-        XComponent({ id: 'xcomponentId120', type: 'surface', libraryname: 'entry' })
+        XComponent({ id: 'xcomponentId120', type: XComponentType.SURFACE, libraryname: 'entry' })
           .onLoad((xComponentContext) => {
             this.xComponentContext3 = xComponentContext as XComponentContext;
           }).width('640px')