K2 GTK GUI Interactive Demos

Experience the power of K2 GTK GUI with these interactive demos. See how easy it is to create native desktop applications with K2.

hello_world.k2
# K2 GTK GUI - Hello World Example
import GtkGui

# Create a new application
app = GtkGui.Application.new("org.k2lang.gtkgui.hello", "Hello World")

# Create a window
window = GtkGui.Window.new(app, "Hello World", 400, 300)

# Create a vertical layout container
layout = GtkGui.Box.new()
layout.setOrientation(GtkGui.ORIENTATION_VERTICAL)
layout.setSpacing(20)
layout.setMargin(20)

# Create a heading label
heading = GtkGui.Label.new()
heading.setText("Hello, World!")
heading.setProperty("markup", "<span size='xx-large' weight='bold'>Hello, World!</span>")

# Create a button
button = GtkGui.Button.new()
button.setLabel("Click Me")

# Add event listener to the button
button.setCallback("clicked", function(widget) {
  GtkGui.Dialog.showMessage(window, "Hello", "You clicked the button!")
})

# Add components to the layout
layout.add(heading)
layout.add(button)

# Set the window content
window.setContent(layout)

# Show the window
window.show()

# Start the application
app.run()
Hello World
Hello, World!
calculator.k2
# K2 GTK GUI - Calculator Example
# This example demonstrates a simple calculator application with K2 GTK GUI.

import GtkGui

# Create a new application
app = GtkGui.Application.new("org.k2lang.gtkgui.calculator", "Calculator")

# Create a window
window = GtkGui.Window.new(app, "Calculator", 300, 400)

# Create a vertical layout container for the main layout
mainLayout = GtkGui.Box.new()
mainLayout.setOrientation(GtkGui.ORIENTATION_VERTICAL)
mainLayout.setSpacing(10)
mainLayout.setMargin(10)

# Create a display for the calculator
display = GtkGui.Entry.new()
display.setProperty("editable", "false")
display.setProperty("xalign", "1.0") # Right-align text
display.setProperty("placeholder", "0")
display.setProperty("fontSize", "24")

# Create a grid for the calculator buttons
buttonsGrid = GtkGui.Grid.new()
buttonsGrid.setColumnSpacing(5)
buttonsGrid.setRowSpacing(5)

# Define button labels
buttonLabels = [
  ["7", "8", "9", "/"],
  ["4", "5", "6", "*"],
  ["1", "2", "3", "-"],
  ["0", ".", "=", "+"],
  ["C", "CE", "(", ")"]
]

# Current calculation state
currentValue = ""

# Function to update the display
function updateDisplay(value) {
  display.setText(value)
  currentValue = value
}

# Function to handle button clicks
function onButtonClick(label) {
  if (label == "=") {
    # Evaluate the expression
    try {
      result = eval(currentValue)
      updateDisplay(result.toString())
    } catch (error) {
      updateDisplay("Error")
    }
  } else if (label == "C") {
    # Clear all
    updateDisplay("")
  } else if (label == "CE") {
    # Clear entry (last character)
    if (currentValue.length() > 0) {
      updateDisplay(currentValue.substring(0, currentValue.length() - 1))
    }
  } else {
    # Append the button label to the current value
    updateDisplay(currentValue + label)
  }
}

# Create buttons and add them to the grid
for (row = 0; row < buttonLabels.length(); row++) {
  for (col = 0; col < buttonLabels[row].length(); col++) {
    label = buttonLabels[row][col]
    button = GtkGui.Button.new()
    button.setLabel(label)
    
    # Special styling for operator buttons
    if (label == "+" || label == "-" || label == "*" || label == "/" || label == "=") {
      button.setProperty("background", "#4CAF50")
      button.setProperty("foreground", "white")
    } else if (label == "C" || label == "CE") {
      button.setProperty("background", "#F44336")
      button.setProperty("foreground", "white")
    }
    
    # Set button click handler
    button.setCallback("clicked", function(widget) {
      onButtonClick(label)
    })
    
    # Add button to the grid
    buttonsGrid.attach(button, col, row, 1, 1)
  }
}

# Add components to the main layout
mainLayout.add(display)
mainLayout.add(buttonsGrid)

# Set the window content
window.setContent(mainLayout)

# Show the window
window.show()

# Start the application
app.run()
Calculator
0
text_editor.k2
# K2 GTK GUI - Text Editor Example
# This example demonstrates a simple text editor application with K2 GTK GUI.

import GtkGui
import FileSystem

# Create a new application
app = GtkGui.Application.new("org.k2lang.gtkgui.texteditor", "Text Editor")

# Create a window
window = GtkGui.Window.new(app, "Text Editor", 800, 600)

# Current file path
currentFilePath = null

# Create a vertical layout container for the main layout
mainLayout = GtkGui.Box.new()
mainLayout.setOrientation(GtkGui.ORIENTATION_VERTICAL)
mainLayout.setSpacing(0)

# Create a toolbar
toolbar = GtkGui.Box.new()
toolbar.setOrientation(GtkGui.ORIENTATION_HORIZONTAL)
toolbar.setSpacing(5)
toolbar.setMargin(5)

# Create toolbar buttons
newButton = GtkGui.Button.new()
newButton.setLabel("New")

openButton = GtkGui.Button.new()
openButton.setLabel("Open")

saveButton = GtkGui.Button.new()
saveButton.setLabel("Save")

saveAsButton = GtkGui.Button.new()
saveAsButton.setLabel("Save As")

# Create text area
textArea = GtkGui.TextArea.new()
textArea.setProperty("monospace", "true")
textArea.setProperty("wrapMode", "word")
textArea.setProperty("margin", "10")

# Create status bar
statusBar = GtkGui.Label.new()
statusBar.setText("Ready")
statusBar.setProperty("xalign", "0") # Left-align text
statusBar.setProperty("margin", "5")

# Function to update the window title
function updateWindowTitle() {
  if (currentFilePath) {
    window.setTitle("Text Editor - " + currentFilePath)
  } else {
    window.setTitle("Text Editor - Untitled")
  }
}

# Function to create a new document
function newDocument() {
  if (textArea.getText().length() > 0) {
    if (GtkGui.Dialog.showQuestion(window, "New Document", "Do you want to save changes to the current document?")) {
      saveDocument()
    }
  }
  
  textArea.setText("")
  currentFilePath = null
  updateWindowTitle()
  statusBar.setText("New document created")
}

# Function to open a document
function openDocument() {
  filePath = GtkGui.Dialog.showFileOpen(window, "Open Document")
  if (filePath) {
    try {
      content = FileSystem.readFile(filePath)
      textArea.setText(content)
      currentFilePath = filePath
      updateWindowTitle()
      statusBar.setText("Opened: " + filePath)
    } catch (error) {
      GtkGui.Dialog.showMessage(window, "Error", "Could not open file: " + error.message)
      statusBar.setText("Error opening file")
    }
  }
}

# Function to save the current document
function saveDocument() {
  if (!currentFilePath) {
    saveDocumentAs()
  } else {
    try {
      content = textArea.getText()
      FileSystem.writeFile(currentFilePath, content)
      statusBar.setText("Saved: " + currentFilePath)
    } catch (error) {
      GtkGui.Dialog.showMessage(window, "Error", "Could not save file: " + error.message)
      statusBar.setText("Error saving file")
    }
  }
}

# Function to save the document as a new file
function saveDocumentAs() {
  filePath = GtkGui.Dialog.showFileSave(window, "Save Document", "untitled.txt")
  if (filePath) {
    currentFilePath = filePath
    updateWindowTitle()
    saveDocument()
  }
}

# Set up button click handlers
newButton.setCallback("clicked", function(widget) {
  newDocument()
})

openButton.setCallback("clicked", function(widget) {
  openDocument()
})

saveButton.setCallback("clicked", function(widget) {
  saveDocument()
})

saveAsButton.setCallback("clicked", function(widget) {
  saveDocumentAs()
})

# Add buttons to the toolbar
toolbar.add(newButton)
toolbar.add(openButton)
toolbar.add(saveButton)
toolbar.add(saveAsButton)

# Add components to the main layout
mainLayout.add(toolbar)
mainLayout.add(textArea)
mainLayout.add(statusBar)

# Set the window content
window.setContent(mainLayout)

# Initialize the window title
updateWindowTitle()

# Show the window
window.show()

# Start the application
app.run()
Text Editor - Untitled
Ready