Terminal.Gui.Elmish - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #typescript #llm #golang #deep-learning #windows #awesome #awesome-list #vue #ios #openai

Terminal.Gui.Elmish

(★ 233)

An elmish wrapper around Miguel de Icaza's 'Gui.cs' https://github.com/migueldeicaza/gui.cs including a fable like view DSL.

파일 탐색기

최종 버전 다운로드 (.zip)

- ISSUE_TEMPLATE.md
- - github-blue.png
  - github.png
  - style.css
  - style_light.css
  - tips.js
- - _logo.png
  - lmish_console_gif3.gif
  - lmish_console_gif4.gif
  - lmish_console_gif4_lower_fps.gif
  - logo-template.pdn
  - logo.png
- - index.html
  - terminal-gui-elmish-cmd-1.html
  - terminal-gui-elmish-cmd-ofasync.html
  - terminal-gui-elmish-cmd-offunc.html
  - terminal-gui-elmish-cmd-oftask.html
  - terminal-gui-elmish-cmd.html
  - terminal-gui-elmish-dispatch-1.html
  - terminal-gui-elmish-program-4.html
  - terminal-gui-elmish-programmodule.html
  - terminal-gui-elmish-sub-1.html
- index.html
- license.html
- release-notes.html
- tutorial.html
- - index.fsx
  - tutorial.fsx
- - App.fs
  - Counter.fs
  - Elmish.Console.Elements.fsproj
  - ListView.fs
  - MessageBoxes.fs
  - Program.fs
  - RadioCheck.fs
  - ScrollView.fs
  - Start.fs
  - TabView.fs
  - TextFields.fs
  - TextView.fs
  - Wizard.fs
- - Data.fs
  - ElmishConsoleTest01.fsproj
  - Program.fs
- - Elements.fs
  - Interop.fs
  - Props.fs
  - Terminal.Gui.Elmish.fsproj
  - TreeDiff.fs
  - Types.fs
  - Views.fs
.gitattributes
.gitignore
.travis.yml
appveyor.yml
LICENSE.txt
README.md
RELEASE_NOTES.md
Terminal.Gui.Elmish.sln

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/Hardt-Coded/Terminal.Gui.Elmish

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd Terminal.Gui.Elmish

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. .NET

보통 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
.NET SDK dotnet 명령어를 쓰기 위한 SDK입니다.

dotnet add package Terminal.Gui.Elmish

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ dotnet run 실행 후 터미널에 나타나는 안내 메시지나 주소를 확인하세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Terminal.Gui.Elmish

[![Build Status](https://travis-ci.org/DieselMeister/Terminal.Gui.Elmish.svg?branch=master)](https://travis-ci.org/DieselMeister/Terminal.Gui.Elmish)

An elmish wrapper around Miguel de Icaza's 'Gui.cs' https://github.com/migueldeicaza/gui.cs including a Feliz-like like view DSL.

![20220614_terminal_gui_2](https://user-images.githubusercontent.com/13096516/173627457-eb4d5e71-9819-4c9f-aa13-a037846745a4.gif)

# Major Changes

I decided to rework the DSL to a Feliz-style. Thank you Zaid Ajaj (https://github.com/Zaid-Ajaj/Feliz) for that awesome idea! You can leverage now more the Intellisense of your IDE.  
I also introduced a diffing mechanism, so that the elements are not recreated on every cycle. I try actually to update the current elements.

This can be end up sometimes in some weird behavior or exceptions. I try to find all the quirks, but help me out and open an issue if you find something.

# Documentation

It's missing again!

Almost all properties from the View-Elements should be available. Some events I extended. For example the Toggled-Event from a checkbox returns the old value in the event.  
I mapped the event to return both.

# Example

In the examples you find the old project, which I converted to the new DSL

# Usage:

```fs
Program.mkProgram init update view  
|> Program.run
    
```

Some fable-elmish DSL:
```fs

module Counter

open Terminal.Gui
open Terminal.Gui.Elmish
open System

type Model = {
    Counter:int
    IsSpinning: bool
}

type Msg =
    | Increment
    | Decrement
    | Reset
    | StartSpin
    | StopSpin
    | Spinned

let init () : Model * Cmd<Msg> =
    let model = {
        Counter = 0
        IsSpinning = false
    }
    model, Cmd.none

module Commands =
    let startSpinning isSpinning =
        fun dispatch ->
            async {
                do! Async.Sleep 20
                if isSpinning then
                    dispatch Increment
                    dispatch Spinned
            }
            |> Async.StartImmediate
        |> Cmd.ofSub

let update (msg:Msg) (model:Model) =
    match msg with
    | Increment ->
        {model with Counter = model.Counter + 1}, Cmd.none
    | Decrement ->
        {model with Counter = model.Counter - 1}, Cmd.none
    | Reset ->
        {model with Counter = 0}, Cmd.none
    | StartSpin ->
        {model with IsSpinning = true}, Commands.startSpinning true
    | StopSpin ->
        {model with IsSpinning = false}, Cmd.none
    | Spinned ->
        model, Commands.startSpinning model.IsSpinning

let view (model:Model) (dispatch:Msg->unit) =
    View.page [
        page.menuBar [
            menubar.menus [
                menu.menuBarItem [
                    menu.prop.title "Menu 1"
                    menu.prop.children [
                        menu.submenuItem [
                            menu.prop.title "Sub Menu 1"
                            menu.prop.children [
                                menu.menuItem ("Sub Item 1", (fun () -> System.Diagnostics.Debug.WriteLine($"Sub menu 1 triggered")))
                                menu.menuItem [
                                    menu.prop.title "Sub Item 2"
                                    menu.item.action (fun () -> System.Diagnostics.Debug.WriteLine($"Sub menu 2 triggered"))
                                    menu.item.itemstyle.check
                                    menu.item.isChecked true
                                ]
                            ]
                        ]
                    ]
                ]
            ]
        ]
        prop.children [
            View.label [
                prop.position.x.center
                prop.position.y.at 1
                prop.textAlignment.centered
                prop.color (Color.BrightYellow, Color.Green)
                label.text "'F#ncy' Counter!"
            ]

View.button [
                prop.position.x.center
                prop.position.y.at 5
                label.text "Up"
                button.onClick (fun () -> dispatch Increment)
            ]

View.label [
                let c = (model.Counter |> float) / 100.0
                let x = (16.0 * Math.Cos(c)) |> int 
                let y = (8.0 * Math.Sin(c)) |> int

prop.position.x.at (x + 20)
                prop.position.y.at (y + 10)
                prop.textAlignment.centered
                prop.color (Color.Magenta, Color.BrightYellow)
                label.text $"The Count of 'Fancyness' is {model.Counter}"
            ]

View.button [
                prop.position.x.center
                prop.position.y.at 7
                label.text "Down"
                button.onClick (fun () -> dispatch Decrement)
            ]

View.button [
                prop.position.x.center
                prop.position.y.at 9
                label.text "Start Spinning"
                button.onClick (fun () -> dispatch StartSpin)
            ]

View.button [
                prop.position.x.center
                prop.position.y.at 11
                label.text "Stop Spinning"
                button.onClick (fun () -> dispatch StopSpin)
            ]

View.button [
                prop.position.x.center
                prop.position.y.at 13
                label.text "Reset"
                button.onClick (fun () -> dispatch Reset)
            ]
        ]
    ]

```

Install via Nuget:

https://www.nuget.org/packages/Terminal.Gui.Elmish

```
dotnet add package Terminal.Gui.Elmish
```

# Referencing the underlying Element

You can reference the underlying element. Also use this to influcence further setting when the element is created!

use `prop.ref (fun view -> ...)`

```fs
View.button [
    prop.position.x.center
    prop.position.y.at 13
    label.text "Reset"
    button.onClick (fun () -> dispatch Reset)
    prop.ref (fun view -> myButtonRef <- (view :?> Terminal.Gui.Button).xxxx // do your stuff here)
]

```

A lot of Thanks to Miguel de Icaza. Nice Project!.