sample-app/webapp/view/App.view.xml at 2bb19ddc4f9ca6c3f5ff94aa34bfb1ce176411c0 · UI5/sample-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:f="sap.f" controllerName="sap.ui.demo.todo.controller.App" displayBlock="true">
		<App>
			<Page>
				<customHeader>
					<f:ShellBar core:require="{ Helper: 'sap/ui/demo/todo/util/Helper' }" title="{i18n>TITLE}">
						<f:profile>
							<f:Avatar id="avatar-profile" />
						</f:profile>
					</f:ShellBar>
				</customHeader>
				<content>
					<f:DynamicPage>
						<f:header>
							<f:DynamicPageHeader pinnable="false">
								<Input class="todoInput" id="addTodoItemInput" value="{/newTodo}" placeholder="{i18n>INPUT_PLACEHOLDER}" change=".addTodo" />
							</f:DynamicPageHeader>
						</f:header>
						<f:content>

							<List id="todoList"
								items="{ path: '/todos', events: { change: '.onUpdateItemsLeftCount' } }"
								mode="None"
								growing="true"
								growingScrollToLoad="true"
								showNoData="false"
								showSeparators="None">
								<headerToolbar>
									<OverflowToolbar id="toolbar" class="sapUiSizeCompact" visible="{= !${view>/isMobile} }">
										<ToolbarSpacer />
										<SearchField id="searchTodoItemsInput" liveChange=".onSearch" width="20rem"/>
										<SegmentedButton selectedKey="all" selectionChange=".onFilter" class="sapMSegmentedButtonNoAutoWidth">
											<items>
												<SegmentedButtonItem text="{i18n>LABEL_ALL}" key="all"/>
												<SegmentedButtonItem text="{i18n>LABEL_ACTIVE}" key="active"/>
												<SegmentedButtonItem text="{i18n>LABEL_COMPLETED}" key="completed"/>
											</items>
										</SegmentedButton>
										<Button id="clearCompleted" enabled="{/itemsRemovable}" icon="sap-icon://delete" text="{i18n>CLEAR_COMPLETED}" press=".onClearCompleted"/>
									</OverflowToolbar>
								</headerToolbar>
								<infoToolbar>
									<OverflowToolbar
										id="filterToolbar"
										visible="false"
										active="false">
										<Label id="filterLabel"/>
									</OverflowToolbar>
								</infoToolbar>
								<CustomListItem>
									<HBox>
										<CheckBox selected="{completed}"  />
										<VBox justifyContent="Center">
											<Text text="{title}"/>
										</VBox>
									</HBox>
									<customData>
										<core:CustomData key="todo-item-completed" value="{= String(${completed})}" writeToDom="true" />
									</customData>
								</CustomListItem>
							</List>

						</f:content>
					</f:DynamicPage>
				</content>

				<footer>
					<OverflowToolbar id="toolbar-footer" visible="{= !!${view>/isMobile} }">
						<SegmentedButton selectedKey="all" selectionChange=".onFilter" class="sapMSegmentedButtonNoAutoWidth">
							<items>
								<SegmentedButtonItem text="All" key="all"/>
								<SegmentedButtonItem text="Active" key="active"/>
								<SegmentedButtonItem text="Completed" key="completed"/>
							</items>
						</SegmentedButton>
						<ToolbarSpacer />
						<Button id="clearCompleted-footer" enabled="{/itemsRemovable}" icon="sap-icon://delete" text="{i18n>CLEAR_COMPLETED}" press=".onClearCompleted"/>
					</OverflowToolbar>
				</footer>

			</Page>
		</App>
</mvc:View>