Code Monkey home page Code Monkey logo

Comments (6)

jtdaugherty avatar jtdaugherty commented on July 30, 2024

This is a great question and one that gets at the heart of how you can get the most out of the library.

The short answer is that what you draw depends on one and only one thing: the application state. So if you need to make decisions about what to draw, the information that informs those decisions always goes in the state.

Let's say we have an app that has two "screens" - a main list an an editing interface for elements in the main list. Here's a way to program it. I've omitted some details just to provide the structure so you can see how you'd transition between interfaces and draw them. I'm assuming for the sake of illustration that the Enter key is used to switch between interfaces. The key is to use events to set a flag in the state that tells the drawing function which interface should be drawn.

data Screen = MainList | EditForm

data MyState = MyState { screen :: Screen, ... }

draw :: MyState -> [Widget]
draw st@(MyState MainList ...) = [drawMainList st]
draw st@(MyState EditForm ...) = [drawEditForm st]

myEvent :: MyState -> Event -> EventM (Next MyState)
myEvent st e =
  case screen st of
    MainList -> handleMainListEvent st e
    EditForm -> handleEditFormEvent st e

handleMainListEvent :: MyState -> Event -> EventM (Next MyState)
handleMainListEvent st e =
   case e of
    EvKey KEnter [] -> continue $ st { screen = EditForm }
    ..

handleEditFormEvent :: MyState -> Event -> EventM (Next MyState)
handleEditFormEvent st e =
   case e of
    EvKey KEnter [] -> continue $ st { screen = MainList }
    ..

-- Then create an App with the above event-handling and drawing functions and state type.

from brick.

jtdaugherty avatar jtdaugherty commented on July 30, 2024

To see this pattern in action you can take a look at this application:

https://github.com/jtdaugherty/dbmigrations-client/tree/master/src

See Types.hs for the application state type, UI.hs for the drawing function, and Events.hs for the event-handling function.

from brick.

jtdaugherty avatar jtdaugherty commented on July 30, 2024

If that application I mentioned helped, then please feel free to close this issue. I don't plan on adding more sophisticated examples to the library at this point because my goal is different, which is to keep the example programs as simple as possible while only showing how to use one feature or set of related features at a time. If the documentation doesn't tackle the design questions, I can address those there.

from brick.

simonmichael avatar simonmichael commented on July 30, 2024

You can get some more ideas from this prototype, though it is in flux and may not at all represent best practices.

from brick.

PyroLagus avatar PyroLagus commented on July 30, 2024

Oh, yes. The application helped very much, and after lots of refactoring, I actually managed to make the code a lot nicer.

from brick.

jtdaugherty avatar jtdaugherty commented on July 30, 2024

Great!

from brick.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.