Isomorphic Crystal GUI : Alpha version

News
1

The aim is to provide a portable GUI library which will allows developers to code desktop apps in Crystal.

  • One goal is to make it as easy to use as Tkinter for Python.
  • Another goal is portability across platforms (Linux, Mac, Windows)
  • Another goal is to make it easy to distribute : The only dependency is Webview for Crystal. The app is simply one (binary executable) file.
  • The library uses Crystal, HTML, CSS and Webmin, but developers using the library only need to master Crystal (no HTML, CSS, JS knowledge required).

GUI lib for Crystal-lang allowing for developing simple desktop apps using Crystal only. Zero dependencies.

# ===========================
# Pages (Structure/interface)
# ===========================

def root_frame
    interface = Gui::Frame.new(title:"My new app")
    interface.append(Div.new("This is a est"))
    
    entries = [
        FormEntry.new("First Name", "fname"),
        FormEntry.new("Last Name", "lname"),
    ]

    action = FormAction.new("Get Name", "get_name")

    form = Form.new(entries, action)

    interface.append(form)
    hint = Hint.new("This is a hint")
    interface.append(hint)
    interface.render
end
17 Likes
2

This looks nice, I’ll give it a try - Thanks!

3

Bind example might be nice somewhere, cheers!

4

Back end

require "kemal"
require "webview"


# ============
# Settings
# ============

# App params
IP = "127.0.0.1"
PORT = 3000
WIDTH = 800
HEIGHT = 600
TITLE = "My new app"


# ======
# Server
# ======


spawn do

    Kemal.config.port = (ENV["PORT"]? || PORT).to_i
    Kemal.config.host_binding = ENV["HOST_BINDING"]? || "#{IP}"
    #Kemal.config.env = "production"

    # =======
    # Actions
    # =======

    get "/root" do
        root_frame
    end

    post "/get_name" do |env|
        # fetchn form data
        x = env.params.body["fname"].as(String)
        y = env.params.body["lname"].as(String)
        # sending response to client
        <<-HTML
          #{root_frame} Data:<form>#{x}<br>#{y}</form>
        HTML
    end

    Kemal.run
end


# ========
# Client
# ========

wv = Webview.window(WIDTH, HEIGHT, Webview::SizeHints::NONE, 
"#{TITLE}", 
"http://#{IP}:#{PORT}/root")

wv.run
wv.destroy

Front end

# ===========================
# Pages (Structure/interface)
# ===========================

def root_frame
    interface = Gui::Frame.new(title:"My new app")
    interface.append(Div.new("This is a est"))
    
    entries = [
        FormEntry.new("First Name", "fname"),
        FormEntry.new("Last Name", "lname"),
    ]

    action = FormAction.new("Get Name", "get_name")

    form = Form.new(entries, action)

    interface.append(form)
    hint = Hint.new("This is a hint")
    interface.append(hint)
    interface.render
end
2 Likes