服务器驱动UI模式设计

使用枚举、合约和接口实现SDUI

模式设计服务器驱动UI

💡 提示

如果您是企业客户，想了解更多关于这个主题的信息，请尝试企业最佳实践：模式设计课程奥德赛.

不是企业客户？了解GraphOS Enterprise。

这些模式提供了服务器驱动UI（SDUI）的示例以及如何构建图's方案结构以编码和表示UI元素。然后客户端可以使用平台特定的渲染引擎来解释该方案并生成UI组件。

💡 提示

有关SDUI一般信息的更多信息，请参阅服务器驱动UI基础知识。

基于设备的枚举SDUI

不同的设备（例如，移动，网页，Roku，Apple TV）可能需要不同的UI布局或组件。您可以使用枚举来声明设备类型列表，以获取哪个UI类型。

1
enum UIDeviceType {
2
  MOBILE
3
  WEB
4
  ROKU
5
  APPLETV
6
}
7

8
interface UIApp {}
9

10
type WebApp implements UIApp {}
11
type IOSApp implements UIApp {}
12
type AndroidApp implements UIApp {}
13
type AppleTVApp implements UIApp {}
14
type RokuApp implements UIApp {}
15

16
type Query {
17
  app(type: UIDeviceType! = WEB): UIApp!
18
}

在以下示例中，UIDeviceType 枚举允许您指定要获取 UIApp 的设备类型。

基于设备的 SDUI 与合约

您可以使用类似基于设备的 SDUI 与合约从您的模式中移除与目标平台无关的 UI 组件。

1
type UIApp {
2
  spotlight: UISpotlightComponent @tag(name: "DESKTOP")
3
  dashboard: UIDashboardComponent
4
  mobileMenu: UIMenuComponent @tag(name: "MOBILE")
5
  menu: UIMenuComponent @tag(name: "WEB")
6
}
7

8
type Query {
9
  app: UIApp!
10
}

💡 提示

更多关于合约使用模式的信息。

SDUI 网页仪表板

以下示例展示了一个静态结构的模式，客户端可以使用它来创建网页仪表板 UI。

1
type AppLogo {
2
  url: String
3
  alt: String
4
}
5

6
type AppLink {
7
  icon: String
8
  label: String
9
  path: String
10
}
11

12
type AppUserMenu {
13
  user: User
14
}
15

16
type AppNavbar {
17
  logo: AppLogo
18
  items: [AppLink]
19
  user: AppUserMenu
20
}
21

22
type AppMobileMenu {
23
  items: [AppLink]
24
  user: AppUserMenu
25
}
26

27
type AppHomePage {
28
  recommended: [AppLink]
29
}
30

31
type WebApp {
32
  navbar: AppNavbar
33
  menu: AppMobileMenu
34
  home: AppHomePage
35
  settings: AppSettingsPage
36
  profile: AppProfilePage
37
}
38

39
type Query {
40
  app: WebApp!
41
}

使用接口的 SDUI 网页仪表板

以下示例模式也是针对网页仪表板 UI 的，但它使用接口来构造动态响应 UI。通过使用接口，子图 “体验” 可以动态返回不同的 UI 组件。

1
interface UIComponent {
2
  id: ID
3
}
4

5
type UILogo implements UIComponent {
6
  id: ID
7
  url: String
8
  alt: String
9
}
10

11
interface UINavbarItem implements UIComponent {
12
  id: ID
13
  label: String
14
  path: String
15
  icon: String
16
}
17

18
interface UINavbar implements UIComponent {
19
  id: ID
20
  logo: UILogo
21
  items: [UINavbarItem]
22
}
23

24
interface UIMenuItem implements UIComponent {
25
  id: ID
26
  label: String
27
  path: String
28
  icon: String
29
}
30

31
interface UIMenu implements UIComponent {
32
  id: ID
33
  logo: UILogo
34
  items: [UIMenuItem]
35
}
36

37
interface UISidebar implements UIComponent {
38
  id: ID
39
  title: String
40
  content: [UIComponent]
41
}
42

43
interface UILayout implements UIComponent {
44
  id: ID
45
  content: [UIComponent]
46
}
47

48
interface UIScreen implements UIComponent {
49
  id: ID
50
  current: UIPage
51
  navbar: UINavbar
52
  menu: UIMenu
53
  main: UILayout
54
  sidebar: UISidebar
55
}
56

57
enum UIPage {
58
  HOME
59
  DASHBOARD
60
  SETTINGS
61
}
62

63
type Query {
64
  app(page: UIPage!): UIScreen!
65
}

下一步

首页