Importing (please wait…) widget.

button

Source code

HTML

Python

CALLBACKS = {
  "btSubmit": lambda dom: dom.alert("Click on button detected!"),
}

password

Submitted password: Type a password and hit the Enter key

Source code

HTML

Python

CALLBACKS = {
  "pwSubmit": lambda dom, id: dom.setValue("pwOutput", dom.getValue(id)),
}

checkbox

Specify the type of vehicle you own:

Bicycle
Car
Pirogue

Last selected vehicle: Click on a checkbox or its label

Source code

HTML

Python

CALLBACKS = {
  "cbSelect": lambda dom, id: dom.setValue("cbOutput", "{} ({})".format(id, dom.getValue(id))),
  "cbSubmit": lambda dom: dom.alert(str(dom.getValues(["cbBicycle", "cbCar","cbPirogue"]))),
}

radio

How to contact you:

Email Phone Mail (post)

Selected contact method:

Source code

HTML

Python

CALLBACKS = {
  "rdCheck": lambda dom, id: dom.setValue("rdSelect", dom.getValue(id)),
  "rdSelect": lambda dom, id: dom.setValue("rdRadios", dom.getValue(id)),
  "rdReset": lambda dom: dom.setValues({"rdSelect": "None", "rdRadios": ""}),
}

datalist

Selected flavor: Select flavor, or type (a new) one and validate

Source code

HTML

Python

dlFlavors = ["Vanilla", "Chocolate", "Caramel", "Mint"]  


def acDlSubmit(dom, id):
  global dlFlavors

  flavor = dom.getValue(id)
  dom.setValue(id, "")
  if not flavor in dlFlavors:
    dlFlavors.append(flavor)
    dlFlavors.sort()
    dom.inner("dlFlavors", dlShape(dlFlavors))
  dom.setValue("dlOutput", flavor)


CALLBACKS = {
  "dlSubmit": acDlSubmit,
}

date

Selected date: Click on the date selector

Source code

HTML

Python

CALLBACKS = {
  "dtSelect": lambda dom, id: dom.setValue("dtOutput", dom.getValue(id)),
}

color

Selected color: Click on the color selector

Source code

HTML

Python

CALLBACKS = {
  "clSelect": lambda dom, id: dom.setValue("clOutput", dom.getValue(id)),
}

range/meter

Volume:

Source code

HTML

Python

def acRgSubmit(dom, id):
  value = dom.getValue(id)

  dom.setValues({
    "rgRange": value,
    "rgNumber": value,
    "rgMeter": value
  })        


CALLBACKS = {
  "rgSubmit": acRgSubmit,
}

select

Selected dinausor: Click on a dinosaur

Deactivate

See the above radio widget to see how to programmatically select an item from a list box.

Source code

HTML

Python

def slEmbed(other):
  html = atlastk.createHTML()
  html.pushTag("option")
  html.putAttribute("selected", "selected")
  html.putValue(other)
  return html


def acSlAdd(dom):
  dom.begin("slOthers", slEmbed(dom.getValue("slInput")))
  dom.setValue("slInput", "")
  dom.focus("slInput")  
  

CALLBACKS = {
  "slSelect": lambda dom, id: dom.setValue("slOutput", dom.getValue(id)),
  "slAdd": acSlAdd,
  "slToggle": lambda dom, id: dom.disableElement("slOthers") if dom.getValue(id) == 'true' else dom.enableElement("slOthers"),
}

CKEditor

Type content in the editor and hit the Submit button

Source code

HTML

Python

CALLBACKS = {
  "ckSubmit": lambda dom, id: dom.setValue("ckOutput", dom.getValue("ckInput")),
}