Book
This example shows how to create an app that functions as a book, where the user can go to different pages in the book by clicking on buttons.
Open in Online Editor
class MyApp extends App{
createStartPage(){
return CoverPage
}
}
class CoverPage extends Page{
createGui(){
return Rows.children(
Space,
Text.text(`The story about BagaWork`),
Text.text(`by Peppe L-G`),
Space,
Space,
Columns.children(
Space,
Button.text(`Start Reading`).page(Page1),
Space,
),
Space,
)
}
}
class Page1 extends Page{
createGui(){
return Rows.children(
Text.text(`Once upon a time, there was a programmer who thought creating small useful apps was too hard for beginners.`),
Space,
Columns.children(
Button.text(`←`).page(CoverPage),
Space,
Text.text(`1`),
Space,
Button.text(`→`).page(Page2),
),
)
}
}
class Page2 extends Page{
createGui(){
return Rows.children(
Text.text(`So he created his own little framework that made it easier. He called that framework for BagaWork.`),
Space,
Columns.children(
Button.text(`←`).page(Page1),
Space,
Text.text(`2`),
Space,
Button.text(`→`).page(Page3),
),
)
}
}
class Page3 extends Page{
createGui(){
return Rows.children(
Text.text(`And that's the framework you are using now!`),
Space,
Columns.children(
Button.text(`←`).page(Page2),
Space,
Text.text(`3`),
Space,
Button.text(`→`).page(Page4),
),
)
}
}
class Page4 extends Page{
createGui(){
return Rows.children(
Space,
Text.text(`The end!`),
Space.size(2),
Columns.children(
Space,
Button.text(`Read again`).page(CoverPage),
Space,
),
Space,
)
}
}