Эти шаблоны содержат примеры пользовательского интерфейса, управляемого сервером (SDUI), и объясняют, как структурировать ваш диаграмма схема для кодирования и представления элементов пользовательского интерфейса. Затем клиенты могут использовать механизмы рендеринга для конкретной платформы для интерпретации схемы и создания компонентов пользовательского интерфейса.
SDUI на основе устройства с перечислениями
Для разных устройств (например, мобильных, веб-сайтов, Roku, Apple TV) могут потребоваться разные макеты или компоненты пользовательского интерфейса. Вы можете использовать перечисления для списков типов устройств, чтобы объявить тип извлекаемого пользовательского интерфейса.
1enum UIDeviceType {
2 MOBILE
3 WEB
4 ROKU
5 APPLETV
6}
7
8interface UIApp {}
9
10type WebApp implements UIApp {}
11type IOSApp implements UIApp {}
12type AndroidApp implements UIApp {}
13type AppleTVApp implements UIApp {}
14type RokuApp implements UIApp {}
15
16type Query {
17 app(type: UIDeviceType! = WEB): UIApp!
18}В этом примере UIDeviceType enum позволяет указать тип устройства, которое вы хотите восстановить. UIApp Для.
SDUI на основе устройства с контрактами
Вы можете использовать аналогичный SDUI на основе устройства с контрактами. чтобы удалить из схемы компоненты пользовательского интерфейса, не связанные с целевой платформой.
1type UIApp {
2 spotlight: UISpotlightComponent @tag(name: "DESKTOP")
3 dashboard: UIDashboardComponent
4 mobileMenu: UIMenuComponent @tag(name: "MOBILE")
5 menu: UIMenuComponent @tag(name: "WEB")
6}
7
8type Query {
9 app: UIApp!
10}Веб-панель SDUI
В следующем примере показана диаграмма со статической структурой, которую клиенты могут использовать для создания пользовательского интерфейса веб-панели.
1type AppLogo {
2 url: String
3 alt: String
4}
5
6type AppLink {
7 icon: String
8 label: String
9 path: String
10}
11
12type AppUserMenu {
13 user: User
14}
15
16type AppNavbar {
17 logo: AppLogo
18 items: [AppLink]
19 user: AppUserMenu
20}
21
22type AppMobileMenu {
23 items: [AppLink]
24 user: AppUserMenu
25}
26
27type AppHomePage {
28 recommended: [AppLink]
29}
30
31type WebApp {
32 navbar: AppNavbar
33 menu: AppMobileMenu
34 home: AppHomePage
35 settings: AppSettingsPage
36 profile: AppProfilePage
37}
38
39type Query {
40 app: WebApp!
41}Веб-панель SDUI с использованием интерфейсов
Пример диаграммы ниже также относится к пользовательскому интерфейсу веб-панели, но в нем используются интерфейсы. для построения динамических ответов для пользовательского интерфейса. Использование интерфейсов, «опыт» подграф может динамически возвращать различные компоненты пользовательского интерфейса.
1interface UIComponent {
2 id: ID
3}
4
5type UILogo implements UIComponent {
6 id: ID
7 url: String
8 alt: String
9}
10
11interface UINavbarItem implements UIComponent {
12 id: ID
13 label: String
14 path: String
15 icon: String
16}
17
18interface UINavbar implements UIComponent {
19 id: ID
20 logo: UILogo
21 items: [UINavbarItem]
22}
23
24interface UIMenuItem implements UIComponent {
25 id: ID
26 label: String
27 path: String
28 icon: String
29}
30
31interface UIMenu implements UIComponent {
32 id: ID
33 logo: UILogo
34 items: [UIMenuItem]
35}
36
37interface UISidebar implements UIComponent {
38 id: ID
39 title: String
40 content: [UIComponent]
41}
42
43interface UILayout implements UIComponent {
44 id: ID
45 content: [UIComponent]
46}
47
48interface UIScreen implements UIComponent {
49 id: ID
50 current: UIPage
51 navbar: UINavbar
52 menu: UIMenu
53 main: UILayout
54 sidebar: UISidebar
55}
56
57enum UIPage {
58 HOME
59 DASHBOARD
60 SETTINGS
61}
62
63type Query {
64 app(page: UIPage!): UIScreen!
65}
