1/* 2 * Copyright (c) 2021 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16/** 17 * ACE @ Web Helsinki 18 * 19 * eDSL version of this application 20 * 21 * ( unverified due to lack of working eDSL transpiler ) 22 * 23 * For comparison, the plain JS version of this app that works with ACE-Diff can be found here 24 * 25 * This is the ouput the eDSL transpiler should generate. 26 */ 27let tasks: Array<any> = [ 28 { label: "Wash the car" }, 29 { label: "Buy some milk" }, 30 { label: "Make the report" }, 31 { label: "Buy flight tickets" }, 32 { label: "Update profile" }, 33 { label: "Change tyres" }, 34 { label: "Walk the dog" }, 35 { label: "Feed the dog" }, 36 { label: "Paint the walls" }, 37 { label: "Wash dishes" }, 38 { label: "Water flowers" }, 39 { label: "Call parents" }, 40 { label: "Refactor: align_component.cpp" }, 41 { label: "Refactor: align_component.h" }, 42 { label: "Refactor: arc_component.cpp" }, 43 { label: "Refactor: arc_component.h" }, 44 { label: "Refactor: block_component.cpp" }, 45 { label: "Refactor: block_component.h" }, 46 { label: "Refactor: box_base_component.cpp" }, 47 { label: "Refactor: box_base_component.h" }, 48 { label: "Refactor: box_component.cpp" }, 49 { label: "Refactor: box_component.h" }, 50 { label: "Refactor: bubble_component.cpp" }, 51 { label: "Refactor: bubble_component.h" }, 52 { label: "Refactor: button_component.cpp" }, 53 { label: "Refactor: button_component.h" }, 54 { label: "Refactor: calendar_component.cpp" }, 55 { label: "Refactor: calendar_component.h" }, 56 { label: "Refactor: calendar_data_adapter.cpp" }, 57 { label: "Refactor: calendar_data_adapter.h" }, 58 { label: "Refactor: chart_component.cpp" }, 59 { label: "Refactor: chart_component.h" }, 60 { label: "Refactor: checkable_component.cpp" }, 61 { label: "Refactor: checkable_component.h" }, 62 { label: "Refactor: clip_component.cpp" }, 63 { label: "Refactor: clip_component.h" }, 64 { label: "Refactor: component.cpp" }, 65 { label: "Refactor: component_group.h" }, 66 { label: "Refactor: component.h" }, 67 { label: "Refactor: composed_component.cpp" }, 68 { label: "Refactor: composed_component.h" }, 69 { label: "Refactor: constants.cpp" }, 70 { label: "Refactor: constants.h" }, 71 { label: "Refactor: sole_child_component.h" }, 72 { label: "Refactor: stack_component.h" }, 73 { label: "Refactor: stage_component.h" }, 74 { label: "Refactor: swiper_component.h" }, 75 { label: "Refactor: tab_bar_component.cpp" }, 76 { label: "Refactor: tab_bar_component.h" }, 77 { label: "Refactor: tab_bar_indicator_component.cpp" }, 78 { label: "Refactor: tab_bar_indicator_component.h" }, 79 { label: "Refactor: tab_bar_item_component.cpp" }, 80 { label: "Refactor: tab_bar_item_component.h" }, 81 { label: "Refactor: tab_content_component.cpp" }, 82 { label: "Refactor: tab_content_component.h" }, 83 { label: "Refactor: tab_controller.cpp" }, 84 { label: "Refactor: tab_controller.h" }, 85 { label: "Refactor: test" }, 86 { label: "Refactor: text_component.cpp" }, 87 { label: "Refactor: text_component.h" }, 88 { label: "Refactor: text_field_component.cpp" }, 89 { label: "Refactor: text_field_component.h" }, 90 { label: "Refactor: text_field_controller.cpp" }, 91 { label: "Refactor: text_field_controller.h" }, 92 { label: "Refactor: text_overlay_component.cpp" }, 93 { label: "Refactor: text_overlay_component.h" }, 94 { label: "Refactor: text_span_component.cpp" }, 95 { label: "Refactor: text_span_component.h" }, 96 { label: "Refactor: texture_component.cpp" }, 97 { label: "Refactor: texture_component.h" }, 98 { label: "Refactor: toast_component.cpp" }, 99 { label: "Refactor: toast_component.h" }, 100 { label: "Refactor: toggle_component.cpp" }, 101 { label: "Refactor: toggle_component.h" }, 102 { label: "Refactor: touch_listener_component.h" }, 103 { label: "Refactor: track_component.cpp" }, 104 { label: "Refactor: track_component.h" }, 105 { label: "Refactor: transform_component.cpp" }, 106 { label: "Refactor: transform_component.h" }, 107 { label: "Refactor: transition_component.cpp" }, 108 { label: "Refactor: transition_component.h" }, 109 { label: "Refactor: triangle_component.cpp" }, 110 { label: "Refactor: triangle_component.h" }, 111 { label: "Refactor: tween_component.cpp" }, 112 { label: "Refactor: tween_component.h" }, 113 { label: "Refactor: video_component.cpp" }, 114 { label: "Refactor: video_component.h" }, 115 { label: "Refactor: watch_slider_component.cpp" }, 116 { label: "Refactor: watch_slider_component.h" }, 117 { label: "Refactor: wrap_component.h" }, 118 { /* not used */ } 119] 120 121// Add ID for each task 122tasks.forEach(function (item, index) { 123 item.id = index 124 tasks[index] = item 125}) 126 127let tasksCount: number = tasks.length - 1 128let screenCount: number = 20 129 130@Entry 131@Component 132struct RootView { 133 @State idx: number = 0 134 135 build() { 136 Column () { 137 Column() { 138 Row() { 139 Button("Next task") 140 .onClick(() => { 141 if (this.idx < tasksCount - screenCount) 142 this.idx++ 143 }) 144 Button("Prev task") 145 .onClick(() => { 146 if (this.idx > 0) 147 this.idx-- 148 }) 149 } 150 } 151 ForEach( 152 /* first parameter is an expression of type array. 153 the point of not just using an array here is to clarify ForEach can not just perate on the 154 source array (as repeat implementation in ACE-Light did) */ 155 tasks.slice(this.idx, this.idx + screenCount), 156 157 /* the third, builder function take an item as input and creates a single View from it */ 158 item => { 159 Text((item.id + 1) + " : " + item.label) 160 }, 161 162 /* second parameter is an arrow function that takes an item as input 163 and returns a persistent nique id (or key ) */ 164 item => item.id 165 ) // ForEach 166 Text("--- Page navigation ---") 167 Row() { 168 Button("First") 169 .onClick(() => this.idx = 0) 170 Button("End") 171 .onClick(() => this.idx = tasksCount - screenCount) 172 } 173 } 174 } // build 175} // struct 176