mirror of
https://github.com/taigrr/bubbletea.git
synced 2026-04-02 11:09:17 -07:00
Update tutorials per new Model interface-based structure
This commit is contained in:
@@ -2,9 +2,7 @@ Bubble Tea Basics
|
||||
=================
|
||||
|
||||
Bubble Tea is based on the functional design paradigms of [The Elm
|
||||
Architecture][elm]. It might not seem very Go-like at first, but once you get
|
||||
used to the general structure you'll find that most of the idomatic Go things
|
||||
you know and love are still relevant and useful here.
|
||||
Architecture][elm] which happens work nicely with Go.
|
||||
|
||||
By the way, the non-annotated source code for this program is available
|
||||
[on GitHub](https://github.com/charmbracelet/bubbletea/tree/master/tutorials/basics).
|
||||
@@ -32,9 +30,9 @@ import will be the Bubble Tea library, which we'll call `tea` for short.
|
||||
```
|
||||
|
||||
Bubble Tea programs are comprised of a **model** that describes the application
|
||||
state and three simple functions that are centered around that model:
|
||||
state and three simple methods on that model:
|
||||
|
||||
* **Initialize**, a function that returns the model's initial state.
|
||||
* **Init**, a function that returns an initial command for the application to run.
|
||||
* **Update**, a function that handles incoming events and updates the model accordingly.
|
||||
* **View**, a function that renders the UI based on the data in the model.
|
||||
|
||||
@@ -51,35 +49,34 @@ It can be any type, but a `struct` usually makes the most sense.
|
||||
}
|
||||
```
|
||||
|
||||
## The Initialization Function
|
||||
## Initialization
|
||||
|
||||
Next we'll define a function that will initialize our application. An
|
||||
initialize function returns a model representing our application's initial
|
||||
state, as well as a `Cmd` that could perform some initial I/O. For now, we
|
||||
don't need to do any I/O, so for the command we'll just return `nil`, which
|
||||
translates to "no command."
|
||||
Next we'll define our application’s initial state. We’ll store our initial
|
||||
model in a simple variable, and then define the `Init` method. `Init` can
|
||||
return a `Cmd` that could perform some initial I/O. For now, we don't need to
|
||||
do any I/O, so for the command we'll just return `nil`, which translates to "no
|
||||
command."
|
||||
|
||||
```go
|
||||
func initialize() (tea.Model, tea.Cmd) {
|
||||
m := model{
|
||||
var initialModel = model{
|
||||
// Our to-do list is just a grocery list
|
||||
choices: []string{"Buy carrots", "Buy celery", "Buy kohlrabi"},
|
||||
|
||||
// Our to-do list is just a grocery list
|
||||
choices: []string{"Buy carrots", "Buy celery", "Buy kohlrabi"},
|
||||
// A map which indicates which choices are selected. We're using
|
||||
// the map like a mathematical set. The keys refer to the indexes
|
||||
// of the `choices` slice, above.
|
||||
selected: make(map[int]struct{}),
|
||||
}
|
||||
|
||||
// A map which indicates which choices are selected. We're using
|
||||
// the map like a mathematical set. The keys refer to the indexes
|
||||
// of the `choices` slice, above.
|
||||
selected: make(map[int]struct{}),
|
||||
}
|
||||
|
||||
// Return the model and `nil`, which means "no I/O right now, please."
|
||||
func (m model) Init() (tea.Cmd) {
|
||||
// Just return `nil`, which means "no I/O right now, please."
|
||||
return m, nil
|
||||
}
|
||||
```
|
||||
|
||||
## The Update Function
|
||||
## The Update Method
|
||||
|
||||
Next we'll define the update function. The update function is called when
|
||||
Next we'll define the update method. The update function is called when
|
||||
"things happen." Its job is to look at what has happened and return an updated
|
||||
model in response to whatever happened. It can also return a `Cmd` and make
|
||||
more things happen, but for now don't worry about that part.
|
||||
@@ -98,9 +95,7 @@ For now, we'll just deal with `tea.KeyMsg` messages, which are automatically
|
||||
sent to the update function when keys are pressed.
|
||||
|
||||
```go
|
||||
func update(msg tea.Msg, mdl tea.Model) (tea.Model, tea.Cmd) {
|
||||
m, _ := mdl.(model)
|
||||
|
||||
func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
|
||||
switch msg := msg.(type) {
|
||||
|
||||
// Is it a key press?
|
||||
@@ -147,20 +142,18 @@ You may have noticed that "ctrl+c" and "q" above return a `tea.Quit` command
|
||||
with the model. That's a special command which instructs the Bubble Tea runtime
|
||||
to quit, exiting the program.
|
||||
|
||||
## The View Function
|
||||
## The View Method
|
||||
|
||||
At last, it's time to render our UI. Of all the functions, the view is the
|
||||
simplest. A model, in it's current state, comes in and a `string` comes out.
|
||||
That string is our UI!
|
||||
At last, it's time to render our UI. Of all the methods, the view is the
|
||||
simplest. We look at the model in it's current state and use it to return
|
||||
a `string`. That string is our UI!
|
||||
|
||||
Because the view describes the entire UI of your application, you don't have
|
||||
to worry about redraw logic and stuff like that. Bubble Tea takes care of it
|
||||
for you.
|
||||
|
||||
```go
|
||||
func view(mdl tea.Model) string {
|
||||
m, _ := mdl.(model)
|
||||
|
||||
func (m model) View() string {
|
||||
// The header
|
||||
s := "What should we buy at the market?\n\n"
|
||||
|
||||
@@ -193,12 +186,12 @@ for you.
|
||||
|
||||
## All Together Now
|
||||
|
||||
The last step is to simply run our program. We pass our functions to
|
||||
The last step is to simply run our program. We pass our initial model to
|
||||
`tea.NewProgram` and let it rip:
|
||||
|
||||
```go
|
||||
func main() {
|
||||
p := tea.NewProgram(initialize, update, view)
|
||||
p := tea.NewProgram(initialModel)
|
||||
if err := p.Start(); err != nil {
|
||||
fmt.Printf("Alas, there's been an error: %v", err)
|
||||
os.Exit(1)
|
||||
|
||||
@@ -13,16 +13,16 @@ type model struct {
|
||||
selected map[int]struct{}
|
||||
}
|
||||
|
||||
func initialize() (tea.Model, tea.Cmd) {
|
||||
return model{
|
||||
choices: []string{"Carrots", "Celery", "Kohlrabi"},
|
||||
selected: make(map[int]struct{}),
|
||||
}, nil
|
||||
var initialModel = model{
|
||||
choices: []string{"Carrots", "Celery", "Kohlrabi"},
|
||||
selected: make(map[int]struct{}),
|
||||
}
|
||||
|
||||
func update(msg tea.Msg, mdl tea.Model) (tea.Model, tea.Cmd) {
|
||||
m, _ := mdl.(model)
|
||||
func (m model) Init() tea.Cmd {
|
||||
return nil
|
||||
}
|
||||
|
||||
func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
|
||||
switch msg := msg.(type) {
|
||||
case tea.KeyMsg:
|
||||
switch msg.String() {
|
||||
@@ -49,9 +49,7 @@ func update(msg tea.Msg, mdl tea.Model) (tea.Model, tea.Cmd) {
|
||||
return m, nil
|
||||
}
|
||||
|
||||
func view(mdl tea.Model) string {
|
||||
m, _ := mdl.(model)
|
||||
|
||||
func (m model) View() string {
|
||||
s := "What should we buy at the market?\n\n"
|
||||
|
||||
for i, choice := range m.choices {
|
||||
@@ -74,7 +72,7 @@ func view(mdl tea.Model) string {
|
||||
}
|
||||
|
||||
func main() {
|
||||
p := tea.NewProgram(initialize, update, view)
|
||||
p := tea.NewProgram(initialModel)
|
||||
if err := p.Start(); err != nil {
|
||||
fmt.Printf("Alas, there's been an error: %v", err)
|
||||
os.Exit(1)
|
||||
|
||||
@@ -85,19 +85,19 @@ And notice that we've defined two new `Msg` types. They can be any type, even
|
||||
an empty struct. We'll come back to them later later in our update function.
|
||||
First, let's write our initialization function.
|
||||
|
||||
## The Initialization Function
|
||||
## The Initialization Method
|
||||
|
||||
The initilization function is very simple. We return an empty model and the
|
||||
the `Cmd` we made earlier. Note that we don't call the function; the Bubble Tea
|
||||
runtime will do that when the time is right.
|
||||
The initilization method is very simple: we return the `Cmd` we made earlier.
|
||||
Note that we don't call the function; the Bubble Tea runtime will do that when
|
||||
the time is right.
|
||||
|
||||
```go
|
||||
func initialize() (tea.Model, tea.Cmd) {
|
||||
return model{}, checkServer
|
||||
func (m model) Init() (tea.Cmd) {
|
||||
return checkServer
|
||||
}
|
||||
```
|
||||
|
||||
## The Update Function
|
||||
## The Update Method
|
||||
|
||||
Internally, `Cmd`s run asynchronously in a goroutine. The `Msg` they return is
|
||||
collected and sent to our update function for handling. Remember those message
|
||||
@@ -105,9 +105,7 @@ types we made earlier when we were making the `checkServer` command? We handle
|
||||
them here. This makes dealing with many asynchronous operations very easy.
|
||||
|
||||
```go
|
||||
func update(msg tea.Msg, mdl tea.Model) (tea.Model, tea.Cmd) {
|
||||
m, _ := mdl.(model)
|
||||
|
||||
func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
|
||||
switch msg := msg.(type) {
|
||||
|
||||
case statusMsg:
|
||||
@@ -144,9 +142,7 @@ Our view is very straightforward. We look at the current model and build a
|
||||
string accordingly:
|
||||
|
||||
```go
|
||||
func view(mdl tea.Model) string {
|
||||
m, _ := mdl.(model)
|
||||
|
||||
func (m model) View() string {
|
||||
// If there's an error, print it out and don't do anything else.
|
||||
if m.err != nil {
|
||||
return fmt.Sprintf("\nWe had some trouble: %v\n\n", m.err)
|
||||
@@ -167,11 +163,13 @@ func view(mdl tea.Model) string {
|
||||
|
||||
## Run the program
|
||||
|
||||
The only thing left to do is run the program, so let's do that!
|
||||
The only thing left to do is run the program, so let's do that! Our initial
|
||||
model doesn't need any data at all in this case, we just initialize it with
|
||||
as a `struct` with defaults.
|
||||
|
||||
```go
|
||||
func main() {
|
||||
if err := tea.NewProgram(initialize, update, view).Start(); err != nil {
|
||||
if err := tea.NewProgram(model{}).Start(); err != nil {
|
||||
fmt.Printf("Uh oh, there was an error: %v\n", err)
|
||||
os.Exit(1)
|
||||
}
|
||||
|
||||
@@ -33,13 +33,11 @@ type errMsg struct{ err error }
|
||||
// error interface on the message.
|
||||
func (e errMsg) Error() string { return e.err.Error() }
|
||||
|
||||
func initialize() (tea.Model, tea.Cmd) {
|
||||
return model{}, checkServer
|
||||
func (m model) Init() tea.Cmd {
|
||||
return checkServer
|
||||
}
|
||||
|
||||
func update(msg tea.Msg, mdl tea.Model) (tea.Model, tea.Cmd) {
|
||||
m, _ := mdl.(model)
|
||||
|
||||
func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
|
||||
switch msg := msg.(type) {
|
||||
|
||||
case statusMsg:
|
||||
@@ -59,9 +57,7 @@ func update(msg tea.Msg, mdl tea.Model) (tea.Model, tea.Cmd) {
|
||||
return m, nil
|
||||
}
|
||||
|
||||
func view(mdl tea.Model) string {
|
||||
m, _ := mdl.(model)
|
||||
|
||||
func (m model) View() string {
|
||||
if m.err != nil {
|
||||
return fmt.Sprintf("\nWe had some trouble: %v\n\n", m.err)
|
||||
}
|
||||
@@ -74,7 +70,7 @@ func view(mdl tea.Model) string {
|
||||
}
|
||||
|
||||
func main() {
|
||||
if err := tea.NewProgram(initialize, update, view).Start(); err != nil {
|
||||
if err := tea.NewProgram(model{}).Start(); err != nil {
|
||||
fmt.Printf("Uh oh, there was an error: %v\n", err)
|
||||
os.Exit(1)
|
||||
}
|
||||
|
||||
@@ -2,6 +2,6 @@ module tutorial
|
||||
|
||||
go 1.14
|
||||
|
||||
require github.com/charmbracelet/bubbletea v0.10.3
|
||||
require github.com/charmbracelet/bubbletea v0.11.1
|
||||
|
||||
replace github.com/charmbracelet/bubbletea => ../
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
github.com/containerd/console v1.0.1 h1:u7SFAJyRqWcG6ogaMAx3KjSTy1e3hT9QxqX7Jco7dRc=
|
||||
github.com/containerd/console v1.0.1/go.mod h1:XUsP6YE/mKtz6bxc+I8UiKKTP04qjQL4qcS3XoQ5xkw=
|
||||
github.com/google/goterm v0.0.0-20190703233501-fc88cf888a3f h1:5CjVwnuUcp5adK4gmY6i72gpVFVnZDP2h5TmPScB6u4=
|
||||
github.com/google/goterm v0.0.0-20190703233501-fc88cf888a3f/go.mod h1:nOFQdrUlIlx6M6ODdSpBj1NVA+VgLC6kmw60mkw34H4=
|
||||
github.com/lucasb-eyer/go-colorful v1.0.3 h1:QIbQXiugsb+q10B+MI+7DI1oQLdmnep86tWFlaaUAac=
|
||||
@@ -8,15 +10,16 @@ github.com/mattn/go-runewidth v0.0.9 h1:Lm995f3rfxdpd6TSmuVCHVb/QhupuXlYr8sCI/Qd
|
||||
github.com/mattn/go-runewidth v0.0.9/go.mod h1:H031xJmbD/WCDINGzjvQ9THkh0rPKHF+m2gUSrubnMI=
|
||||
github.com/muesli/termenv v0.7.2 h1:r1raklL3uKE7rOvWgSenmEm2px+dnc33OTisZ8YR1fw=
|
||||
github.com/muesli/termenv v0.7.2/go.mod h1:ct2L5N2lmix82RaY3bMWwVu/jUFc9Ule0KGDCiKYPh8=
|
||||
github.com/pkg/term v0.0.0-20200520122047-c3ffed290a03 h1:pd4YKIqCB0U7O2I4gWHgEUA2mCEOENmco0l/bM957bU=
|
||||
github.com/pkg/term v0.0.0-20200520122047-c3ffed290a03/go.mod h1:Z9+Ul5bCbBKnbCvdOWbLqTHhJiYV414CURZJba6L8qA=
|
||||
github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
|
||||
github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
|
||||
golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
|
||||
golang.org/x/crypto v0.0.0-20200709230013-948cd5f35899 h1:DZhuSZLsGlFL4CmhA8BcRA0mnthyA/nZ00AqCUo7vHg=
|
||||
golang.org/x/crypto v0.0.0-20200709230013-948cd5f35899/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
|
||||
golang.org/x/crypto v0.0.0-20201012173705-84dcc777aaee h1:4yd7jl+vXjalO5ztz6Vc1VADv+S/80LGJmyl1ROJ2AI=
|
||||
golang.org/x/crypto v0.0.0-20201012173705-84dcc777aaee/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
|
||||
golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
|
||||
golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
|
||||
golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
|
||||
golang.org/x/sys v0.0.0-20200116001909-b77594299b42/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
|
||||
golang.org/x/sys v0.0.0-20200821140526-fda516888d29 h1:mNuhGagCf3lDDm5C0376C/sxh6V7fy9WbdEu/YDNA04=
|
||||
golang.org/x/sys v0.0.0-20200821140526-fda516888d29/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
|
||||
golang.org/x/sys v0.0.0-20200916030750-2334cc1a136f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
|
||||
golang.org/x/sys v0.0.0-20201009025420-dfb3f7c4e634 h1:bNEHhJCnrwMKNMmOx3yAynp5vs5/gRy+XWFtZFu7NBM=
|
||||
golang.org/x/sys v0.0.0-20201009025420-dfb3f7c4e634/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
|
||||
golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
|
||||
|
||||
Reference in New Issue
Block a user