Best Practices for Multi page application

[boogerlad]

Consider a setup wizard or something that requires an account (and subsequently, a login / signup). I'm aware the printer demo and the IOT dashboard feature multiple pages across several tabs, but I'm looking for how to implement sequential pages.

Secondly, how can a history of pages be maintained? For example, Android's back button.

[ogoffart]

It would be nice if we could have a nice way to do that. Idea and suggestion on how that could look like in .60 are welcome.

Currently the best one can do is to use a opaque Rectangle { } (with a TouchArea over the whole rectangle to make sure events)
that is to be shown (using a if (condition) : ... construct) when that page is supposed to be shown.

An example of that is done in the printer demo. First, you have tabs, and within the main tab, you have also extra screen:
https://github.com/sixtyfpsui/sixtyfps/blob/07c1504627806a213df7d08f7c810715d1ea7ead/examples/printerdemo/ui/home_page.60#L93
In this case, the screens are moved to the right when not visible. and there is a current_subpage property that decide which screen is active.

If you want to build a stack history of page, you would probably do that in the application logic.

This works, but it is true that a nicer / easier way would be great addition to our framework.
Maybe something like a PageStack { ... } widget, which would have one active_page property (an integer) and each sub element would have a page_index property injected, and maybe some way to define transitions on how the pages are animated when the active_page change.

[samyak-jain]

I agree. I think this kind of API design would be really helpful. Is there any open issue on this?

[MiKom]

I agree. I think this kind of API design would be really helpful. Is there any open issue on this?

#1722

[antis81]

Hey, actually I just wrote myself a workaround which may be useful for this topic (in C++, but easy to adapt for Rust etc.).

export struct PageListItem {
  identifier: string,   // used for page switching
  title: string,            // a text that is shown for the item
  // icon: icon,              // in my app every page has an icon
}

export component Page inherits GroupBox {
  callback reset();
  callback submit();

  title: "Page has no title";

   // just for the example (can also be global e.g. in a page bottom/top row)
  VerticalLayout {
    @children

   reset_button := Button { 
     text: "Reset";
     root.reset();
    }
    submit_button := Button { 
      text: "Submit";
      root.submit();
    }
  }
}

export component MultiPageWindow inherits Window {
  in property <[PageListItem]> pages;
  in-out property <string> active-page;  // will hold the page identifier
}

export component PageA inherits Page {
  title: "Page A";
  // Do page a stuff
}

export component PageB inherits Page {
  title: "Page B";
  // Do page b stuff
}

export component MainWindow inherits MultiPageWindow {
  // page a api
  callback reset_page_a <=> page_a.reset;
  callback submit_page_a <=> page_a.submit;

  // page b api
  callback reset_page_b <=> page_b.reset;
  callback submit_page_b <=> page_b.submit;

  pages: [
    { identifier: "page_a", title: "Page A" },
    { identifier: "page_b", title: "Page B" },
  ];
  active-page: "page_a";   // Sets the initial active page

  // Then maybe use a TabView (I use a HorzontalLayout with ListView on the left and "page view" on the right side) to show the pages.
  // This is only the pages themselves without a selection view
  page_a := PageA { title: "Page A"; visible: root.active-page == "page_a"; }
  page_b := PageB { title: "Page B"; visible: root.active-page == "page_b"; }
}

And the C++ part (all code in main.cpp).

#include "<generated-slint-component>.h"
#include <iostream>

class App {
  slint::ComponentHandle<MainWindow> ui;
  // Can't we get some pointer to the page component(s) once "ui" is instanciated?
  // slint::ComponentHandle<PageA> page_a;
  // slint::ComponentHandle<PageB> page_b;

public:
  App() { 
    ui->create(); 
  }
  ~App() = default;

  void initialize_api() {
    // global api (none in this case)

    // page a api
    ui->on_reset_page_a([&] { /* do reset stuff */ });
    ui->on_submit_page_a([&] { /* do submit stuff */  });

    // page b api
    ui->on_reset_page_b([&] { /* do reset stuff */  });
    ui->on_submit_page_b([&] { /* do submit stuff */ });
  }

  void run() {
    ui->run();
  }
};


int main(int argc, char **argv)
{
    auto app = App();
    app.initialize_api();
    app.run();
    return 0;
}

Note this code is just written in Github's text editor and only vaguely matches my real code. Just meant as a working template…