{"size": 1269, "ext": "scrbl", "max_stars_repo_path": "post/2021-08-09-gui-easy.scrbl", "max_stars_repo_name": "CYBAI/racket-tw.github.io", "max_stars_repo_stars_event_min_datetime": "2020-06-21T15:07:58.000Z", "max_stars_repo_stars_event_max_datetime": "2020-06-21T15:07:58.000Z", "max_issues_repo_path": "post/2021-08-09-gui-easy.scrbl", "max_issues_repo_name": "CYBAI/racket-tw.github.io", "max_issues_repo_issues_event_min_datetime": "2020-06-24T03:17:49.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-08T06:00:08.000Z", "max_forks_repo_path": "post/2021-08-09-gui-easy.scrbl", "max_forks_repo_name": "CYBAI/racket-tw.github.io", "max_forks_repo_forks_event_min_datetime": "2021-05-21T12:17:27.000Z", "max_forks_repo_forks_event_max_datetime": "2021-08-22T08:03:44.000Z"}
{"max_stars_count": 1, "max_issues_count": 9, "max_forks_count": 2, "avg_line_length": 30.9512195122, "max_line_length": 310, "alphanum_fraction": 0.7021276596}
#lang scribble/manual
@(require (for-label racket))

@title{gui-easy}
@author[(author+email "Lîm Tsú-thuàn" "dannypsnl@gmail.com")]

Recently, a new great racket GUI library calls @code{gui-easy-lib} is out. The most interesting part is it is a declarative framework, which more like SwiftUI or Flutter, makes development obviously easier. Today, I will use a few examples to show the core idea. First, we can get it with command:

@codeblock{
raco pkg install gui-easy-lib
}

Then have our first tried.

@codeblock{
(require racket/gui/easy)

(render
 (window
  (hpanel
   (text "hello"))))
}

The above code shows a @bold{hello} text. Except that, we have observable variable:

@codeblock|{
(require racket/gui/easy
         racket/gui/easy/operator)

(define @counter (@ 0))

(render
 (window
  (hpanel
   (button "-" (lambda () (@counter . <~ . sub1)))
   (text (@counter . ~> . number->string))
   (button "+" (lambda () (@counter . <~ . add1))))))
}|

In this example, @code|{@}| create a new observable with initial state. @code{<~} updates observable with its second argument. @code{~>} apply its second argument with current state. In this simple introduction, you can see a good idea is raising. I hope we will move GUI program on to this, and never go back.
