Port the printer demo to use exported globals

examples/printerdemo/cpp/main.cpp

@@ -30,13 +30,13 @@ int main()
 
 
     auto printer_queue = std::make_shared<sixtyfps::VectorModel<PrinterQueueItem>>();
-    auto default_queue = printer_demo->get_printer_queue();
+    auto default_queue = printer_demo->global<PrinterQueueData>().get_printer_queue();
     for (int i = 0; i < default_queue->row_count(); ++i) {
         printer_queue->push_back(default_queue->row_data(i));
     }
-    printer_demo->set_printer_queue(printer_queue);
+    printer_demo->global<PrinterQueueData>().set_printer_queue(printer_queue);
 
-    printer_demo->on_start_job([=](sixtyfps::SharedString name) {
+    printer_demo->global<PrinterQueueData>().on_start_job([=](sixtyfps::SharedString name) {
         std::time_t now = std::chrono::system_clock::to_time_t(std::chrono::system_clock::now());
         char time_buf[100] = { 0 };
         std::strftime(time_buf, sizeof(time_buf), "%H:%M:%S %d/%m/%Y", std::localtime(&now));
@@ -51,9 +51,8 @@ int main()
         printer_queue->push_back(item);
     });
 
-    printer_demo->on_cancel_job([=](int index) {
+    printer_demo->global<PrinterQueueData>().on_cancel_job(
-        printer_queue->erase(int(index));
+            [=](int index) { printer_queue->erase(int(index)); });
-    });
 
     sixtyfps::Timer printer_queue_progress_timer(std::chrono::seconds(1), [=]() {
         if (printer_queue->row_count() > 0) {

examples/printerdemo/cpp_interpreted/main.cpp

@@ -67,13 +67,13 @@ int main()
     auto printer_queue = std::make_shared<sixtyfps::VectorModel<Value>>();
 
     sixtyfps::SharedVector<Value> default_queue =
-            *instance->get_property("printer_queue")->to_array();
+            *instance->get_global_property("PrinterQueueData", "printer_queue")->to_array();
     for (const auto &default_item : default_queue)
         printer_queue->push_back(default_item);
 
-    instance->set_property("printer_queue", Value(printer_queue));
+    instance->set_global_property("PrinterQueueData", "printer_queue", Value(printer_queue));
 
-    instance->set_callback("start_job", [=](auto args) {
+    instance->set_global_callback("PrinterQueueData", "start_job", [=](auto args) {
         std::time_t now = std::chrono::system_clock::to_time_t(std::chrono::system_clock::now());
         char time_buf[100] = { 0 };
         std::strftime(time_buf, sizeof(time_buf), "%H:%M:%S %d/%m/%Y", std::localtime(&now));
@@ -91,7 +91,7 @@ int main()
         return Value();
     });
 
-    instance->set_callback("cancel_job", [=](auto args) {
+    instance->set_global_callback("PrinterQueueData", "cancel_job", [=](auto args) {
         auto index = *args[0].to_number();
         printer_queue->erase(int(index));
         return Value();

examples/printerdemo/rust/main.rs

@@ -57,12 +57,15 @@ pub fn main() {
         InkLevel { color: sixtyfps::Color::from_rgb_u8(0, 0, 0), level: 0.80 },
     ]));
 
-    let default_queue: Vec<PrinterQueueItem> = main_window.get_printer_queue().iter().collect();
+    let default_queue: Vec<PrinterQueueItem> =
+        main_window.global::<PrinterQueueData>().get_printer_queue().iter().collect();
     let printer_queue = Rc::new(PrinterQueue {
         data: Rc::new(sixtyfps::VecModel::from(default_queue)),
         print_progress_timer: Default::default(),
     });
-    main_window.set_printer_queue(sixtyfps::ModelHandle::new(printer_queue.data.clone()));
+    main_window
+        .global::<PrinterQueueData>()
+        .set_printer_queue(sixtyfps::ModelHandle::new(printer_queue.data.clone()));
 
     main_window.on_quit(move || {
         #[cfg(not(target_arch = "wasm32"))]
@@ -70,12 +73,12 @@ pub fn main() {
     });
 
     let printer_queue_copy = printer_queue.clone();
-    main_window.on_start_job(move |title| {
+    main_window.global::<PrinterQueueData>().on_start_job(move |title| {
         printer_queue_copy.push_job(title);
     });
 
     let printer_queue_copy = printer_queue.clone();
-    main_window.on_cancel_job(move |idx| {
+    main_window.global::<PrinterQueueData>().on_cancel_job(move |idx| {
         printer_queue_copy.data.remove(idx as usize);
     });
 

examples/printerdemo/ui/common.60

@@ -95,17 +95,6 @@ export Page := Rectangle {
         }
     }
 }
-
-export struct PrinterQueueItem := {
-    status: string, // WAITING..., PRINTING
-    progress: int,
-    title: string,
-    owner: string,
-    pages: int,
-    size: string, // number instead and format in .60?
-    submission-date: string
-}
-
 export Label := Text {
     color: DemoPalette.text-foreground-color;
     vertical-alignment: center;

examples/printerdemo/ui/copy_page.60

@@ -9,10 +9,10 @@
 LICENSE END */
 
 import { DemoPalette, Page, SpinBox, Label, ComboBox, PushButton, CheckBox } from "./common.60";
+import { PrinterQueueData } from "./printer_queue.60";
 
 
 export CopyPage := Page {
-    callback start-job(string);
     has-back-button: true;
     header: "Copy";
 
@@ -101,7 +101,7 @@ export CopyPage := Page {
                     icon: @image-url("images/copy.svg");
                     text: "Start copying";
                     clicked => {
-                        root.start-job("Copy");
+                        PrinterQueueData.start-job("Copy");
                     }
                 }
                 Rectangle {

examples/printerdemo/ui/home_page.60

@@ -8,7 +8,7 @@
     Please contact info@sixtyfps.io for more information.
 LICENSE END */
 
-import { DemoPalette, Page, PrinterQueueItem, PushButton } from "./common.60";
+import { DemoPalette, Page, PushButton } from "./common.60";
 import { CopyPage } from "./copy_page.60";
 import { ScanPage } from "./scan_page.60";
 import { PrintPage } from "./print_page.60";
@@ -49,11 +49,7 @@ ActionButton := Rectangle {
 }
 
 export HomePage := Page {
-    callback start-job(string);
-    callback cancel-job(int);
-    callback pause-job(int);
     property <length> header-row-height: 40px;
-    property <[PrinterQueueItem]> printer-queue;
 
     property <length> button-spacing: 35px;
     property <length> button-width: 127px;
@@ -84,7 +80,6 @@ export HomePage := Page {
     queue-view := PrinterQueue {
         x: parent.width - width;
         width: 313px;
-        printer-queue: root.printer-queue;
         show-job-details(idx) => {
             current-subpage = 1; // Not nice to hard-code the index here...
         }
@@ -94,26 +89,20 @@ export HomePage := Page {
         x: current-subpage == 1 ? 0 : parent.width + parent.x + 2px;
         animate x { duration: 125ms; easing: ease; }
         back => { current-subpage = 0 }
-        printer-queue: root.printer-queue;
-        cancel-job(id) => { root.cancel-job(id); }
-        pause-job(id) => { root.pause-job(id); }
     }
     ScanPage {
         x: current-subpage == 2 ? 0 : parent.width + parent.x + 2px;
         animate x { duration: 125ms; easing: ease; }
         back => { current-subpage = 0 }
-        start-job(title) => { root.start-job(title); }
     }
     CopyPage {
         x: current-subpage == 3 ? 0 : parent.width + parent.x + 2px;
         animate x { duration: 125ms; easing: ease; }
         back => { current-subpage = 0 }
-        start-job(title) => { root.start-job(title); }
     }
     UsbPage {
         x: current-subpage == 4 ? 0 : parent.width + parent.x + 2px;
         animate x { duration: 125ms; easing: ease; }
         back => { current-subpage = 0 }
-        start-job(title) => { root.start-job(title); }
     }
 }

examples/printerdemo/ui/print_page.60

@@ -8,17 +8,13 @@
     Please contact info@sixtyfps.io for more information.
 LICENSE END */
 
-import { DemoPalette, Page, SpinBox, Label, PushButton, PrinterQueueItem } from "./common.60";
+import { DemoPalette, Page, SpinBox, Label, PushButton } from "./common.60";
 import { WidePrinterQueueList } from "./printer_queue.60";
 
 
 export PrintPage := Page {
     has-back-button: true;
     header: "Print";
-    callback cancel-job(int);
-    callback pause-job(int);
-
-    property <[PrinterQueueItem]> printer-queue <=> queue.printer-queue;
 
     GridLayout {
         padding-top: 46px /* header line height in design */
@@ -35,8 +31,6 @@ export PrintPage := Page {
 
         Row {
             queue := WidePrinterQueueList {
-                cancel-job(id) => { root.cancel-job(id); }
-                pause-job(id) => { root.pause-job(id); }
                 viewport-width: width;
             }
         }

examples/printerdemo/ui/printer_queue.60

@@ -8,7 +8,30 @@
     Please contact info@sixtyfps.io for more information.
 LICENSE END */
 
-import { DemoPalette, PrinterQueueItem, PushButton } from "./common.60";
+import { DemoPalette, PushButton } from "./common.60";
+
+export struct PrinterQueueItem := {
+    status: string, // WAITING..., PRINTING
+    progress: int,
+    title: string,
+    owner: string,
+    pages: int,
+    size: string, // number instead and format in .60?
+    submission-date: string
+}
+
+export global PrinterQueueData := {
+    callback start-job(string);
+    callback cancel-job(int);
+    callback pause-job(int);
+
+    property <[PrinterQueueItem]> printer-queue: [
+        { status: "PRINTING", progress: 63, title: "210106-FinalPresentation.pdf", owner: "simon.hausmann@sixtyfps.io", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" },
+        { status: "WAITING...", title: "Adressliste.docx", owner: "simon.hausmann@sixtyfps.io", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" },
+        { status: "WAITING...", title: "210106-FinalPresentation.pdf", owner: "simon.hausmann@sixtyfps.io", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" },
+    ];
+}
+
 
 PrintQueueDetailsLabel := Text {
     font-weight: 500;
@@ -195,13 +218,12 @@ NarrowPrintQueueElement := Rectangle {
 
 NarrowPrinterQueueList := Flickable {
     callback show-job-details(int);
-    property <[PrinterQueueItem]> printer-queue;
     VerticalLayout {
         alignment: start;
         padding: 0px;
         spacing: 13.5px;
 
-        for queue-item[idx] in root.printer-queue: NarrowPrintQueueElement {
+        for queue-item[idx] in PrinterQueueData.printer-queue: NarrowPrintQueueElement {
             width: root.width;
             queue-item: queue-item;
             show-job-details => {
@@ -320,25 +342,21 @@ WidePrintQueueElement := Rectangle {
 
 
 export WidePrinterQueueList := Flickable {
-    callback cancel-job(int);
-    callback pause-job(int);
-    property <[PrinterQueueItem]> printer-queue;
 
     VerticalLayout {
         alignment: start;
         padding: 0px;
         spacing: 13.5px;
 
-        for queue-item[idx] in root.printer-queue: WidePrintQueueElement {
+        for queue-item[idx] in PrinterQueueData.printer-queue: WidePrintQueueElement {
             queue-item: queue-item;
-            cancel-job => { root.cancel-job(idx) }
+            cancel-job => { PrinterQueueData.cancel-job(idx) }
-            pause-job => { root.pause-job(idx) }
+            pause-job => { PrinterQueueData.pause-job(idx) }
         }
     }
 }
 
 export PrinterQueue := Rectangle {
-    property <[PrinterQueueItem]> printer-queue <=> queue-list.printer-queue;
     callback show-job-details(int);
 
     border-radius: 27px;

examples/printerdemo/ui/printerdemo.60

@@ -8,10 +8,14 @@
     Please contact info@sixtyfps.io for more information.
 LICENSE END */
 
-import { DemoPalette, PrinterQueueItem, Page } from "common.60";
+import { DemoPalette, Page } from "common.60";
 import { HomePage } from "./home_page.60";
 import { InkLevel, InkPage } from "./ink_page.60";
 import { SettingsPage } from "./settings_page.60";
+import { PrinterQueueData } from "./printer_queue.60";
+
+// re-export for the native code
+export { PrinterQueueData }
 
 import "./fonts/NotoSans-Regular.ttf";
 import "./fonts/NotoSans-Bold.ttf";
@@ -32,15 +36,6 @@ SideBarIcon := Rectangle {
 
 MainWindow := Window {
     callback quit();
-    callback start-job(string);
-    callback cancel-job(int);
-    callback pause-job(int);
-
-    property <[PrinterQueueItem]> printer-queue: [
-        { status: "PRINTING", progress: 63, title: "210106-FinalPresentation.pdf", owner: "simon.hausmann@sixtyfps.io", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" },
-        { status: "WAITING...", title: "Adressliste.docx", owner: "simon.hausmann@sixtyfps.io", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" },
-        { status: "WAITING...", title: "210106-FinalPresentation.pdf", owner: "simon.hausmann@sixtyfps.io", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" },
-    ];
 
     width: 772px;
     height: 504px;
@@ -79,10 +74,6 @@ MainWindow := Window {
                 home-page := HomePage {
                     y: active-page == 0 ? 0 : active-page < 0 ? - height - 1px : parent.height + 1px;
                     animate y { duration: 125ms; easing: ease; }
-                    printer-queue: root.printer-queue;
-                    start-job(title) => { root.start-job(title); }
-                    cancel-job(title) => { root.cancel-job(title); }
-                    pause-job(title) => { root.pause-job(title); }
                 }
                 SettingsPage {
                     y: active-page == 1 ? 0 : active-page < 1 ? - height - 1px : parent.height + 1px;

examples/printerdemo/ui/scan_page.60

@@ -9,10 +9,9 @@
 LICENSE END */
 
 import { DemoPalette, Page, SpinBox, Label, ComboBox, PushButton } from "./common.60";
-
+import { PrinterQueueData } from "./printer_queue.60";
 
 export ScanPage := Page {
-    callback start-job(string);
     has-back-button: true;
     header: "Scan";
 
@@ -89,7 +88,7 @@ export ScanPage := Page {
                     icon: @image-url("images/scan.svg");
                     text: "Start scanning";
                     clicked => {
-                        root.start-job("Scan");
+                        PrinterQueueData.start-job("Scan");
                     }
                 }
                 Rectangle {

examples/printerdemo/ui/usb_page.60

@@ -10,10 +10,10 @@ LICENSE END */
 
 import { DemoPalette, Page, SpinBox, Label, ComboBox, PushButton, CheckBox } from "./common.60";
 import { StandardListView } from "sixtyfps_widgets.60";
+import { PrinterQueueData } from "./printer_queue.60";
 
 
 export UsbPage := Page {
-    callback start-job(string);
     has-back-button: true;
     header: "USB";
 
@@ -81,13 +81,13 @@ export UsbPage := Page {
                 clicked => {
                     //FIXME!
                     if (list-view.current-item == 2) {
-                        root.start-job("dog.png");
+                        PrinterQueueData.start-job("dog.png");
                     } else if (list-view.current-item == 3) {
-                        root.start-job("elephant.png");
+                        PrinterQueueData.start-job("elephant.png");
                     } else if (list-view.current-item == 4) {
-                        root.start-job("snake.png");
+                        PrinterQueueData.start-job("snake.png");
                     } else {
-                        root.start-job("cat.png");
+                        PrinterQueueData.start-job("cat.png");
                     }
                 }
             }