→ ↺

The CLOG manual

Table of Contents

• 1 clog ASDF System Details
• 2 CLOG System
• 3 CLOG Utilities
• 4 CLOG Objects
• 5 CLOG Elements
• 6 CLOG Body Objects
• 7 CLOG Window Objects
• 8 CLOG Document Objects
• 9 CLOG Location Objects
• 10 CLOG Navigator Objects

[in package CLOG]

The Common Lisp Omnificient GUI, CLOG for short, uses web technology to produce graphical user interfaces for applications locally or remotely. The CLOG package starts up the connectivity to the browser or other websocket client (often a browser embedded in a native application.

← ↑ → ↺

1 clog ASDF System Details

• Version: 0.0.2
• Description: The Common Lisp Omnificent GUI
• Licence: BSD
• Author: David Botton mailto:david@botton.com

← ↑ → ↺

2 CLOG System

CLOG Startup and Shutdown

• [function] INITIALIZE ON-NEW-WINDOW-HANDLER &KEY (HOST "0.0.0.0") (PORT 8080) (BOOT-FILE "/boot.html") (STATIC-ROOT #P"static-files/")

  Inititalze CLOG on a socket using HOST and PORT to serve BOOT-FILE as the default route to establish web-socket connections and static files located at STATIC-ROOT.

• [function] SET-ON-NEW-WINDOW ON-NEW-WINDOW-HANDLER

  Change the on-new-window handler.

• [function] SHUTDOWN

  Shutdown CLOG.

← ↑ → ↺

3 CLOG Utilities

CLOG utilities

• [function] JS-TRUE-P VALUE

  Return true if VALUE equalp the string true

• [function] OPEN-BROWSER &KEY (URL "http://127.0.0.1:8080")

  Open a web browser to URL.

• [function] ESCAPE-STRING STR

  Escape STR for sending to browser script.

← ↑ → ↺

4 CLOG Objects

CLOG-Obj - Base class for CLOG Objects

• [class] CLOG-OBJ

  CLOG objects (clog-obj) encapsulate the connection between lisp and the HTML DOM element.

CLOG-Obj - General Properties

• [generic-function] PROPERTY CLOG-OBJ PROPERTY-NAME

  Get/Setf html property. (eg. draggable)

CLOG-Obj - General Methods

• [generic-function] HEIGHT CLOG-OBJ

  Get/Setf html height in pixels.

• [generic-function] WIDTH CLOG-OBJ

  Get/Setf html width in pixels.

• [generic-function] FOCUS CLOG-OBJ

  Focus on CLOG-OBJ

• [generic-function] BLUR CLOG-OBJ

  Remove focus from CLOG-OBJ

CLOG-Obj - Low Level

• [generic-function] CONNECTION-DATA CLOG-OBJ

  Get connection-data that is associated with clog-obj that will persist regardless of thread. The event hooks are stored in this string based hash in the format of: "html-id:event-name" => event-handler.

• [generic-function] VALIDP CLOG-OBJ

  Returns true of connection is valid on this CLOG-OBJ.

CLOG-Obj - Event Handling

• [generic-function] SET-ON-RESIZE CLOG-WINDOW ON-RESIZE-HANDLER

  Set the ON-RESIZE-HANDLER for CLOG-OBJ. If ON-RESIZE-HANDLER is nil unbind the event.

• [generic-function] SET-ON-FOCUS CLOG-OBJ ON-FOCUS-HANDLER

  Set the ON-FOCUS-HANDLER for CLOG-OBJ. If ON-FOCUS-HANDLER is nil unbind the event.

• [generic-function] SET-ON-BLUR CLOG-OBJ ON-BLUR-HANDLER

  Set the ON-BLUR-HANDLER for CLOG-OBJ. If ON-BLUR-HANDLER is nil unbind the event.

• [generic-function] SET-ON-CHANGE CLOG-OBJ ON-CHANGE-HANDLER

  Set the ON-CHANGE-HANDLER for CLOG-OBJ. If ON-CHANGE-HANDLER is nil unbind the event.

• [generic-function] SET-ON-FOCUS-IN CLOG-OBJ ON-FOCUS-IN-HANDLER

  Set the ON-FOCUS-IN-HANDLER for CLOG-OBJ. If ON-FOCUS-IN-HANDLER is nil unbind the event.

• [generic-function] SET-ON-FOCUS-OUT CLOG-OBJ ON-FOCUS-OUT-HANDLER

  Set the ON-FOCUS-OUT-HANDLER for CLOG-OBJ. If ON-FOCUS-OUT-HANDLER is nil unbind the event.

• [generic-function] SET-ON-RESET CLOG-OBJ ON-RESET-HANDLER

  Set the ON-RESET-HANDLER for CLOG-OBJ. If ON-RESET-HANDLER is nil unbind the event. This event is activated by using reset on a form. If this even is bound, you must call the form reset manually.

• [generic-function] SET-ON-SEARCH CLOG-OBJ ON-SEARCH-HANDLER

  Set the ON-SEARCH-HANDLER for CLOG-OBJ. If ON-SEARCH-HANDLER is nil unbind the event.

• [generic-function] SET-ON-SELECT CLOG-OBJ ON-SELECT-HANDLER

  Set the ON-SELECT-HANDLER for CLOG-OBJ. If ON-SELECT-HANDLER is nil unbind the event. This event is activated by using submit on a form. If this even is bound, you must call the form submit manually.

• [generic-function] SET-ON-SUBMIT CLOG-OBJ ON-SUBMIT-HANDLER

  Set the ON-SUBMIT-HANDLER for CLOG-OBJ. If ON-SUBMIT-HANDLER is nil unbind the event.

• [generic-function] SET-ON-SELECT CLOG-OBJ ON-SELECT-HANDLER

  Set the ON-SELECT-HANDLER for CLOG-OBJ. If ON-SELECT-HANDLER is nil unbind the event. This event is activated by using submit on a form. If this even is bound, you must call the form submit manually.

• [generic-function] SET-ON-CONTEXT-MENU CLOG-OBJ ON-CONTEXT-MENU-HANDLER

  Set the ON-CONTEXT-MENU-HANDLER for CLOG-OBJ. If ON-CONTEXT-MENU-HANDLER is nil unbind the event. Setting on-mouse-right-click will replace this handler.

• [generic-function] SET-ON-CLICK CLOG-OBJ ON-CLICK-HANDLER

  Set the ON-CLICK-HANDLER for CLOG-OBJ. If ON-CLICK-HANDLER is nil unbind the event. Setting this event will replace an on-mouse click if set.

• [generic-function] SET-ON-DOUBLE-CLICK CLOG-OBJ ON-DOUBLE-CLICK-HANDLER

  Set the ON-DOUBLE-CLICK-HANDLER for CLOG-OBJ. If ON-DOUBLE-CLICK-HANDLER is nil unbind the event. Setting the on-mouse-double-click event will replace this handler.

• [generic-function] SET-ON-MOUSE-CLICK CLOG-OBJ ON-MOUSE-CLICK-HANDLER

  Set the ON-MOUSE-CLICK-HANDLER for CLOG-OBJ. If ON-MOUSE-CLICK-HANDLER is nil unbind the event. Setting this event will replace on an on-click event.

• [generic-function] SET-ON-MOUSE-DOUBLE-CLICK CLOG-OBJ ON-MOUSE-DOUBLE-CLICK-HANDLER

  Set the ON-MOUSE-DOUBLE-CLICK-HANDLER for CLOG-OBJ. If ON-MOUSE-DOUBLE-CLICK-HANDLER is nil unbind the event. Setting this event will replace on an on-double-click event.

• [generic-function] SET-ON-MOUSE-RIGHT-CLICK CLOG-OBJ ON-MOUSE-RIGHT-CLICK-HANDLER

  Set the ON-MOUSE-RIGHT-CLICK-HANDLER for CLOG-OBJ. If ON-MOUSE-RIGHT-CLICK-HANDLER is nil unbind the event. Setting this event will replace on an on-context-menu event.

• [generic-function] SET-ON-MOUSE-ENTER CLOG-OBJ ON-MOUSE-ENTER-HANDLER

  Set the ON-MOUSE-ENTER-HANDLER for CLOG-OBJ. If ON-MOUSE-ENTER-HANDLER is nil unbind the event.

• [generic-function] SET-ON-MOUSE-LEAVE CLOG-OBJ ON-MOUSE-LEAVE-HANDLER

  Set the ON-MOUSE-LEAVE-HANDLER for CLOG-OBJ. If ON-MOUSE-LEAVE-HANDLER is nil unbind the event.

• [generic-function] SET-ON-MOUSE-OVER CLOG-OBJ ON-MOUSE-OVER-HANDLER

  Set the ON-MOUSE-OVER-HANDLER for CLOG-OBJ. If ON-MOUSE-OVER-HANDLER is nil unbind the event.

• [generic-function] SET-ON-MOUSE-OUT CLOG-OBJ ON-MOUSE-OUT-HANDLER

  Set the ON-MOUSE-OUT-HANDLER for CLOG-OBJ. If ON-MOUSE-OUT-HANDLER is nil unbind the event.

• [generic-function] SET-ON-MOUSE-DOWN CLOG-OBJ ON-MOUSE-DOWN-HANDLER

  Set the ON-MOUSE-DOWN-HANDLER for CLOG-OBJ. If ON-MOUSE-DOWN-HANDLER is nil unbind the event.

• [generic-function] SET-ON-MOUSE-UP CLOG-OBJ ON-MOUSE-UP-HANDLER

  Set the ON-MOUSE-UP-HANDLER for CLOG-OBJ. If ON-MOUSE-UP-HANDLER is nil unbind the event.

• [generic-function] SET-ON-MOUSE-MOVE CLOG-OBJ ON-MOUSE-MOVE-HANDLER

  Set the ON-MOUSE-MOVE-HANDLER for CLOG-OBJ. If ON-MOUSE-MOVE-HANDLER is nil unbind the event.

• [generic-function] SET-ON-CHARACTER CLOG-OBJ ON-CHARACTER-HANDLER

  Set the ON-CHARACTER-HANDLER for CLOG-OBJ. If ON-CHARACTER-HANDLER is nil unbind the event. Setting this event will replace a on-key-press

• [generic-function] SET-ON-KEY-DOWN CLOG-OBJ ON-KEY-DOWN-HANDLER

  Set the ON-KEY-DOWN-HANDLER for CLOG-OBJ. If ON-KEY-DOWN-HANDLER is nil unbind the event.

• [generic-function] SET-ON-KEY-UP CLOG-OBJ ON-KEY-UP-HANDLER

  Set the ON-KEY-UP-HANDLER for CLOG-OBJ. If ON-KEY-UP-HANDLER is nil unbind the event.

• [generic-function] SET-ON-KEY-PRESS CLOG-OBJ ON-KEY-PRESS-HANDLER

  Set the ON-KEY-PRESS-HANDLER for CLOG-OBJ. If ON-KEY-PRESS-HANDLER is nil unbind the event.

• [generic-function] SET-ON-COPY CLOG-OBJ ON-COPY-HANDLER

  Set the ON-COPY-HANDLER for CLOG-OBJ. If ON-COPY-HANDLER is nil unbind the event.

• [generic-function] SET-ON-CUT CLOG-OBJ ON-CUT-HANDLER

  Set the ON-CUT-HANDLER for CLOG-OBJ. If ON-CUT-HANDLER is nil unbind the event.

• [generic-function] SET-ON-PASTE CLOG-OBJ ON-PASTE-HANDLER

  Set the ON-PASTE-HANDLER for CLOG-OBJ. If ON-PASTE-HANDLER is nil unbind the event.

← ↑ → ↺

5 CLOG Elements

CLOG-Element - Base class for CLOG Elements

• [class] CLOG-ELEMENT CLOG-OBJ

  CLOG Element Objects is the base class for all html element objects.

CLOG-Element - Low Level Creation

• [generic-function] CREATE-CHILD CLOG-OBJ HTML &KEY AUTO-PLACE

  Create a new CLOG-Element from HTML as child of CLOG-OBJ and if :AUTO-PLACE (default t) place-inside-bottom-of CLOG-OBJ

• [generic-function] ATTACH-AS-CHILD CLOG-OBJ HTML-ID

  Create a new CLOG-Element and attach an existing element with HTML-ID. The HTML-ID must be unique.

CLOG-Element - Placement

• [generic-function] PLACE-AFTER CLOG-OBJ NEXT-OBJ

  Places NEXT-OBJ after CLOG-OBJ in DOM

• [generic-function] PLACE-BEFORE CLOG-OBJ NEXT-OBJ

  Places NEXT-OBJ before CLOG-OBJ in DOM

• [generic-function] PLACE-INSIDE-TOP-OF CLOG-OBJ NEXT-OBJ

  Places NEXT-OBJ inside top of CLOG-OBJ in DOM

• [generic-function] PLACE-INSIDE-BOTTOM-OF CLOG-OBJ NEXT-OBJ

  Places NEXT-OBJ inside bottom of CLOG-OBJ in DOM

CLOG-Element - General Properties

• [generic-function] STYLE CLOG-ELEMENT STYLE-NAME

  Get/Setf css style.

• [generic-function] ATTRIBUTE CLOG-ELEMENT ATTRIBUTE-NAME

  Get/Setf html tag attribute. (eg. src on img tag)

CLOG-Element - Properties

• [generic-function] ACCESS-KEY CLOG-ELEMENT

  Get/Setf access-key.

• [generic-function] ADVISORY-TITLE CLOG-ELEMENT

  Get/Setf advisory-title.

• [generic-function] CLASS-NAME CLOG-ELEMENT

  Get/Setf class-name.

• [generic-function] EDITABLEP CLOG-ELEMENT

  Get/Setf editable.

• [type] BOX-SIZING-TYPE

• [generic-function] BOX-SIZING CLOG-ELEMENT

  Get/Setf box-sizing.

• [type] CLEAR-SIDE-TYPE

• [generic-function] CLEAR-SIDE CLOG-ELEMENT

  Get/Setf clear-side.

• [type] FLOAT-WRAP-TYPE

• [generic-function] FLOAT-WRAP CLOG-ELEMENT

  Get/Setf for element float left or right and other elements wrap around it.

• [type] DISPLAY-TYPE

• [generic-function] DISPLAY CLOG-ELEMENT

  Get/Setf display.

← ↑ → ↺

6 CLOG Body Objects

CLOG-Body - CLOG Body Objects

• [class] CLOG-BODY CLOG-OBJ

  CLOG Body Object encapsulate the view in the window.

CLOG-Body - Properties

• [generic-function] WINDOW CLOG-BODY

  Reader for CLOG-Window object

• [generic-function] HTML-DOCUMENT CLOG-BODY

  Reader for CLOG-Document object

• [generic-function] LOCATION CLOG-BODY

  Reader for CLOG-Location object

• [generic-function] NAVIGATOR CLOG-BODY

  Reader for CLOG-Navigator object

← ↑ → ↺

7 CLOG Window Objects

CLOG-Window - CLOG Window Objects

• [class] CLOG-WINDOW CLOG-OBJ

  CLOG Window Objects encapsulate the window.

CLOG-Window - Properties

• [generic-function] WINDOW-NAME CLOG-WINDOW

  Get/Setf name for use by hyperlink "target" for this window.

• [generic-function] INNER-HEIGHT CLOG-WINDOW

  Get/Setf inner height of browser window.

• [generic-function] INNER-WIDTH CLOG-WINDOW

  Get/Setf inner width of browser window.

• [generic-function] OUTER-HEIGHT CLOG-WINDOW

  Get/Setf outer height of browser window.

• [generic-function] OUTER-WIDTH CLOG-WINDOW

  Get/Setf outer width of browser window.

• [generic-function] X-OFFSET CLOG-WINDOW

  Get/Setf browser window x offset from left edge.

• [generic-function] Y-OFFSET CLOG-WINDOW

  Get/Setf browser window y offset from top edge.

• [generic-function] LEFT CLOG-WINDOW

  Get/Setf browser x position.

• [generic-function] TOP CLOG-WINDOW

  Get/Setf browser y postion.

• [generic-function] PIXEL-RATIO CLOG-WINDOW

  Get device pixel ratio.

• [generic-function] SCREEN-WIDTH CLOG-WINDOW

  Get screen width.

• [generic-function] SCREEN-HEIGHT CLOG-WINDOW

  Get screen height.

• [generic-function] SCREEN-AVAILABLE-WIDTH CLOG-WINDOW

  Get available screen width.

• [generic-function] SCREEN-AVAILABLE-HEIGHT CLOG-WINDOW

  Get available screen height.

• [generic-function] SCREEN-AVAILABLE-TOP CLOG-WINDOW

  Get available screen top.

• [generic-function] SCREEN-AVAILABLE-LEFT CLOG-WINDOW

  Get available screen left.

• [generic-function] SCREEN-COLOR-DEPTH CLOG-WINDOW

  Get screen color depth.

CLOG-Window - Methods

• [generic-function] ALERT CLOG-WINDOW MESSAGE

  Launch an alert box. Note that as long as not dismissed events and messages may not be trasmitted on most browsers.

• [generic-function] LOG-CONSOLE CLOG-WINDOW MESSAGE

  Print message to browser console.

• [generic-function] LOG-ERROR CLOG-WINDOW MESSAGE

  Print error message to browser console.

• [generic-function] PRINT-WINDOW CLOG-WINDOW

  Send browser window to printer.

• [generic-function] SCROLL-BY CLOG-WINDOW X Y

  Scroll browser window by x y.

• [generic-function] SCROLL-TO CLOG-WINDOW X Y

  Scroll browser window to x y.

• [generic-function] CLOSE-WINDOW CLOG-WINDOW

  Close browser window.

• [generic-function] CLOSE-CONNECTION CLOG-WINDOW

  Close connection to browser with out closing browser.

CLOG-Window - Events

• [generic-function] SET-ON-ABORT CLOG-WINDOW ON-ABORT-HANDLER

  Set the ON-ABORT-HANDLER for CLOG-OBJ. If ON-ABORT-HANDLER is nil unbind the event.

• [generic-function] SET-ON-ERROR CLOG-WINDOW ON-ERROR-HANDLER

  Set the ON-ERROR-HANDLER for CLOG-OBJ. If ON-ERROR-HANDLER is nil unbind the event.

• [generic-function] SET-ON-BEFORE-UNLOAD CLOG-WINDOW ON-BEFORE-UNLOAD-HANDLER

  Set the ON-BEFORE-UNLOAD-HANDLER for CLOG-OBJ. If ON-BEFORE-UNLOAD-HANDLER is nil unbind the event.

• [generic-function] SET-ON-HASH-CHANGE CLOG-WINDOW ON-HASH-CHANGE-HANDLER

  Set the ON-HASH-CHANGE-HANDLER for CLOG-OBJ. If ON-HASH-CHANGE-HANDLER is nil unbind the event.

• [generic-function] SET-ON-ORIENTATION-CHANGE CLOG-WINDOW ON-ORIENTATION-CHANGE-HANDLER

  Set the ON-ORIENTATION-CHANGE-HANDLER for CLOG-OBJ. If ON-ORIENTATION-CHANGE-HANDLER is nil unbind the event.

• [generic-function] SET-ON-STORAGE CLOG-WINDOW ON-STORAGE-HANDLER

  Set the ON-STORAGE-HANDLER for CLOG-OBJ. If ON-STORAGE-HANDLER is nil unbind the event.

• [generic-function] SET-ON-RESIZE CLOG-WINDOW ON-RESIZE-HANDLER

  Set the ON-RESIZE-HANDLER for CLOG-OBJ. If ON-RESIZE-HANDLER is nil unbind the event.

• [generic-function] MOVE-BY CLOG-WINDOW X Y

  Move browser window by x y.

• [generic-function] MOVE-TO CLOG-WINDOW X Y

  Move browser window to x y.

• [generic-function] RESIZE-BY CLOG-WINDOW X Y

  Resize browser window by x y.

• [generic-function] RESIZE-TO CLOG-WINDOW X Y

  Resize browser window to x y.

← ↑ → ↺

8 CLOG Document Objects

CLOG-Document - CLOG Document Objects

• [class] CLOG-DOCUMENT CLOG-OBJ

  CLOG Document Objects encapsulate the document.

• [generic-function] DOMAIN CLOG-DOCUMENT

  Get domain.

• [generic-function] INPUT-ENCODING CLOG-DOCUMENT

  Get input encoding.

• [generic-function] LAST-MODIFIED CLOG-DOCUMENT

  Get last modified.

• [generic-function] REFERER CLOG-DOCUMENT

  Get referer.

• [generic-function] TITLE CLOG-DOCUMENT

  Get/setf title.

• [generic-function] URL CLOG-LOCATION

  Get/Setf full url.

• [generic-function] HEAD-ELEMENT CLOG-DOCUMENT

  Reader for Head Element object

• [generic-function] BODY-ELEMENT SELF

• [generic-function] DOCUMENT-ELEMENT CLOG-DOCUMENT

  Reader for Body Element object

• [generic-function] READY-STATE CLOG-DOCUMENT

  Get ready-state.

• [generic-function] LOAD-CSS CLOG-DOCUMENT CSS-URL

  Load css from CSS-URL.

• [generic-function] PUT CLOG-DOCUMENT MESSAGE

  Write text to browser document object.

• [generic-function] PUT-LINE CLOG-DOCUMENT MESSAGE

  Write text to browser document object with new-line.

• [generic-function] PUT-BR CLOG-DOCUMENT MESSAGE

  Write text to browser document object with
  new-line.

• [generic-function] NEW-LINE CLOG-DOCUMENT

  Write to browser document
  new-line.

← ↑ → ↺

9 CLOG Location Objects

CLOG-Location - CLOG Location Objects

• [class] CLOG-LOCATION CLOG-OBJ

  CLOG Location Objects encapsulate the location.

CLOG-Location - Properties

• [generic-function] URL CLOG-LOCATION

  Get/Setf full url.

• [generic-function] HASH CLOG-LOCATION

  Get/Setf url hash.

• [generic-function] HOST CLOG-LOCATION

  Get/Setf url host.

• [generic-function] HOST-NAME CLOG-LOCATION

  Get/Setf url host name.

• [generic-function] ORIGIN CLOG-LOCATION

  Get url origin.

• [generic-function] PATH-NAME CLOG-LOCATION

  Get/Setf url path-name.

• [generic-function] PORT CLOG-LOCATION

  Get/Setf url port.

• [generic-function] PROTOCOL CLOG-LOCATION

  Get/Setf url protocol.

• [generic-function] URL-SEARCH CLOG-LOCATION

  Get/Setf url-search.

CLOG-Location - Methods

• [generic-function] RELOAD CLOG-WINDOW

  Reload browser window.

• [generic-function] URL-REPLACE CLOG-WINDOW REPLACE-URL

  Replace browser url.

• [generic-function] URL-ASSIGN CLOG-WINDOW ASSIGN-URL

  Assign browser url.

← ↑ ↺

10 CLOG Navigator Objects

CLOG-Navigator - CLOG Navigator Objects

• [class] CLOG-NAVIGATOR CLOG-OBJ

  CLOG Navigator Objects encapsulate the navigator.

CLOG-Navigator - Properties

• [generic-function] COOKIE-ENABLED-P CLOG-NAVIGATOR

  Get if cookie enabled.

• [generic-function] LANGUAGE CLOG-NAVIGATOR

  Get user prefered language.

• [generic-function] USER-AGENT CLOG-NAVIGATOR

  Get user agent.

• [generic-function] VENDOR CLOG-NAVIGATOR

  Get browser vendor.