diff --git a/FAQ b/FAQ index 16cbf84..a95fcff 100644 --- a/FAQ +++ b/FAQ @@ -4,7 +4,7 @@ A) If running a tutorial or demo: Did you start the application / emacs and slime in the directory of clog? By default that is /common-lisp/clog? - Or you can use (defparameter clog::*overide-static-root* #P"~/common-lisp/clog/static-files/") + Or you can use (setf clog::*overide-static-root* #P"~/common-lisp/clog/static-files/") to overide the static path in (clog:initialize) If running your own app. Make sure the :static-file key is set correctly on (clog:initialize) diff --git a/README.md b/README.md index 330fd54..7b5d7eb 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,6 @@ an active soft realtime connection. For most CLOG applications all programming logic, events and decisions are done on the server which can be local or remote over the web. - CLOG is developed on an M1 MacBook with ECL, it is tested fairly regulary with SCBL on Linux, Windows and Intel MacBook. It should in theory work on any system QuickLisp and CLACK will load on to. @@ -49,9 +48,10 @@ CLOG will be in QuickSlip in the next update, but a good idea, since I am still adding code daily, is to cloan the github repo in to your ~/common-lisp directory: +``` cd ~/common-lisp git clone https://github.com/rabbibotton/clog.git - +``` To load this package and work through tutorials (assuming you have QuickSlip configured): @@ -119,6 +119,29 @@ Here is a sample CLOG app: (open-browser)) ``` +Work in progress: +(Add an enhacement request if want to see some feature specificly not + covered yet.) + +Tutorial Summary + +- 01-tutorial.lisp - Hello World +- 02-tutorial.lisp - Closures in CLOG +- 03-tutorial.lisp - Events fire in parallel +- 05-tutorial.lisp - The event target, reusing event handlers +- 05-tutorial.lisp - Using connection-data-item +- 06-tutorial.lisp - Tasking and events +- 07-tutorial.lisp - My first CLOG video game (and handling disconnects) +- 08-tutorial.lisp - Mice Love Containers +- 09-tutorial.lisp - Tabs, pannels and forms +- 10-tutorial.lisp - Canvas +- 11-tutorial.lisp - Attaching to existing HTML +- 12-tutorial.lisp - Running a website in CLOG (routing) + +Demo Summary + +- 01-snake-game.lisp - Sparkey the Snake Game + Enhancements being worked on now: diff --git a/clog-docs.lisp b/clog-docs.lisp new file mode 100644 index 0000000..49723dc --- /dev/null +++ b/clog-docs.lisp @@ -0,0 +1,81 @@ +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;;;; CLOG - The Common Lisp Omnificent GUI ;;;; +;;;; (c) 2020-2021 David Botton ;;;; +;;;; License BSD 3 Clause ;;;; +;;;; ;;;; +;;;; clog-docs.lisp ;;;; +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(in-package :clog) + +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Exports - clog documentation sections +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(defsection @clog-getting-started (:title "CLOG Getting Started") +" +# CLOG - The Common Lisp Omnificent GUI + +## David Botton + +### License BSD 3-Clause License + +The Common Lisp Omnificient GUI, CLOG for short, uses web technology to +produce graphical user interfaces for applications locally or remotely. +CLOG can take the place, or work along side, most cross platform GUI +frameworks and website frameworks. The CLOG package starts up the +connectivity to the browser or other websocket client (often a browser +embedded in a native template application.) + +STATUS: CLOG is complete enough for most uses, there are a few loose +ends (multimedia, client side storage, integrations with databases), +but CLOG is actually based on a framework I wrote for Ada, GNOGA, in +2013 and used in commercial production code for the last 6 years, +i.e. the techiniques it uses are solid and proven. + +Some of the things CLOG can be used for: + +* Cross platform GUIs and Reports +* Secure websites and complex interactive web applications +* Write mobile software +* Write massive multiplayer online games +* Monitoring software for embedded systems +* A fun way to teaching programming and advanced multi-tasking + parallel programming techniques. (CLOG is a parallel GUI) +* And the list goes on + +The key to CLOG is the relationship it forms with a Browser window +or Browser control compiled to native code. CLOG uses websockets +for communications and the browser to render a GUI that maintanes +an active soft realtime connection. For most CLOG applications all +programming logic, events and decisions are done on the server +which can be local or remote over the web. + +CLOG is developed on an M1 MacBook with ECL, it is tested fairly +regulary with SCBL on Linux, Windows and Intel MacBook. It should +in theory work on any system QuickLisp and CLACK will load on to. + +CLOG will be in QuickSlip in the next update, but a good idea, +since I am still adding code daily, is to cloan the github repo +in to your ~/common-lisp directory: + +``` +cd ~/common-lisp +git clone https://github.com/rabbibotton/clog.git +``` + +To load this package and work through tutorials (assuming you +have QuickSlip configured): + +1. cd to the CLOG dir (the dir should be one used by QuickLisp ex. ~/common-lisp/) +2. Start emacs/slime or your common lisp \"repl\" in _that_ directory. +3. In the REPL run: + +CL-USER> (ql:quickload :clog) +CL-USER> (load \"~/common-lisp/clog/tutorial/01-tutorial.lisp\") +CL-USER> (clog-user:start-tutorial) + +Work your way through the tutorials. You will see how quick and easy it is +to be a CLOGer. + + ") diff --git a/clog-element.lisp b/clog-element.lisp index 1c65809..b6ddb64 100644 --- a/clog-element.lisp +++ b/clog-element.lisp @@ -1632,6 +1632,19 @@ A list of standard cursor types can be found at: (defmethod click ((obj clog-element)) (jquery-execute obj "click()")) + +;;;;;;;;;;;;;;;;;;;; +;; parent-element ;; +;;;;;;;;;;;;;;;;;;;; + +(defgeneric parent-element (clog-element) + (:documentation "Return a new clog-element represeting the parent of +CLOG-ELEMENT.")) + +(defmethod parent-element ((obj clog-element)) + (attach-as-child obj (jquery-execute obj (format nil "parent().attr('id');")))) + + ;;;;;;;;;;;;;;;;; ;; first-child ;; ;;;;;;;;;;;;;;;;; @@ -1656,3 +1669,15 @@ to no actual HTML elemen.")) (defmethod next-sibling ((obj clog-element)) (attach-as-child obj (jquery-execute obj (format nil "next().attr('id');")))) + +;;;;;;;;;;;;;;;;;;;;;; +;; previous-sibling ;; +;;;;;;;;;;;;;;;;;;;;;; + +(defgeneric previous-sibling (clog-element) + (:documentation "Traverse to previous sibling element. If Child does not have an +html id than Element_Type will have an ID of undefined and therefore attached +to no actual HTML elemen.")) + +(defmethod previous-sibling ((obj clog-element)) + (attach-as-child obj (jquery-execute obj (format nil "previous().attr('id');")))) diff --git a/clog-system.lisp b/clog-system.lisp index 1fbc17d..50b43c3 100644 --- a/clog-system.lisp +++ b/clog-system.lisp @@ -18,6 +18,8 @@ (defvar *clog-running* nil "If clog running.") +(defvar *overide-static-root* nil "Overide the static-root settings.") + ;;;;;;;;;;;;;;;; ;; initialize ;; ;;;;;;;;;;;;;;;; diff --git a/clog.asd b/clog.asd index d5f73dd..536d1cd 100644 --- a/clog.asd +++ b/clog.asd @@ -13,6 +13,7 @@ #:mgl-pax #:quri) :components ((:file "clog-connection") (:file "clog") + (:file "clog-docs") (:file "clog-system") (:file "clog-utilities") (:file "clog-base") diff --git a/clog.lisp b/clog.lisp index 0c02942..720dd6c 100644 --- a/clog.lisp +++ b/clog.lisp @@ -12,33 +12,34 @@ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (mgl-pax:define-package :clog - (:documentation "The Common List Omnificent GUI - Parent package") + (:documentation "The Common List Omnificent GUI - CLOG") (:local-nicknames (:cc :clog-connection)) (:use #:cl #:mgl-pax)) (in-package :clog) (defsection @clog-manual (:title "The CLOG manual") - "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." + "The Common Lisp Omnificient GUI, CLOG for short, uses web technology to +produce graphical user interfaces for applications locally or remotely. +CLOG can take the place, or work along side, most cross platform GUI +frameworks and website frameworks. The CLOG package starts up the +connectivity to the browser or other websocket client (often a browser +embedded in a native template application.)" - (clog asdf:system) - - (@clog-system section) - (@clog-utilities section) - (@clog-obj section) - (@clog-element section) - (@clog-element-common section) - (@clog-form section) - (@clog-canvas section) - (@clog-body section) - (@clog-window section) - (@clog-document section) - (@clog-location section) - (@clog-navigator section)) + (@clog-getting-started section) + + (@clog-system section) + (@clog-utilities section) + (@clog-obj section) + (@clog-element section) + (@clog-element-common section) + (@clog-form section) + (@clog-canvas section) + (@clog-body section) + (@clog-window section) + (@clog-document section) + (@clog-location section) + (@clog-navigator section)) (defsection @clog-system (:title "CLOG System") "CLOG Startup and Shutdown" @@ -113,14 +114,14 @@ application." ;; need to add drag and drop events (defsection @clog-element (:title "CLOG Elements") - "CLOG-Element - Base class for CLOG Elements" + "CLOG-Element - Class for CLOG Elements" (clog-element class) "CLOG-Element - Low Level Creation" (create-child generic-function) (attach-as-child generic-function) - "CLOG-Element - Placement" + "CLOG-Element - DOM Placement" (place-after generic-function) (place-before generic-function) (place-inside-top-of generic-function) @@ -239,9 +240,11 @@ application." (remove-from-dom generic-function) (click generic-function) - "CLOG-Element - Traversal Methods" - (first-child generic-function) - (next-sibling generic-function)) + "CLOG-Element - DOM Traversal Methods" + (parent-element generic-function) + (first-child generic-function) + (previous-sibling generic-function) + (next-sibling generic-function)) (defsection @clog-element-common (:title "Common CLOG Elements") "CLOG-A - Class for CLOG Anchors" @@ -259,12 +262,12 @@ application." (create-button generic-function) (disabledp generic-function) - "CLOG-IMG - Class for CLOG Imgs" + "CLOG-IMG - Class for CLOG Images" (clog-img class) (create-img generic-function) (url-src generic-function) - "CLOG-Div - Class for CLOG Divs" + "CLOG-Div - Class for CLOG Div Blocks" (clog-div class) (create-div generic-function) @@ -292,7 +295,7 @@ application." (clog-p class) (create-p generic-function) - "CLOG-Span - Class for CLOG Spans" + "CLOG-Span - Class for CLOG Inline Spans" (clog-span class) (create-span generic-function)) @@ -308,6 +311,11 @@ application." (encoding generic-function) (validate-on-submit generic-function) + "CLOG-Fieldset - Class for CLOG Fieldsets" + (clog-fieldset class) + (create-fieldset generic-function) + + "CLOG-Form-Element - Class for form elements" (clog-form-element class) (form-element-type type) @@ -346,10 +354,6 @@ application." (create-label generic-function) (label-for generic-function) - "CLOG-Fieldset - Class for CLOG Fieldsets" - (clog-fieldset class) - (create-fieldset generic-function) - "CLOG-Select - Class for CLOG Selects" (clog-select class) (create-select generic-function) diff --git a/demos/README.md b/demos/README.md index b551fed..cf0f45f 100644 --- a/demos/README.md +++ b/demos/README.md @@ -34,4 +34,4 @@ Most demos startup a browser, if not use http://127.0.0.1:8080 Demo Summary -- 01-snake-game.lisp - Snake Gamey +- 01-snake-game.lisp - Sparkey the Snake Game diff --git a/doc/clog-manual.html b/doc/clog-manual.html index d54eed8..425f7c4 100644 --- a/doc/clog-manual.html +++ b/doc/clog-manual.html @@ -27,14 +27,14 @@

-

→ ↺

+

→ ↺

The CLOG manual

Table of Contents

@@ -1572,7 +1605,16 @@ A list of standard cursor types can be found at:

simulate click.

-

CLOG-Element - Traversal Methods

+

CLOG-Element - DOM Traversal Methods

+ +

+ +

@@ -1584,6 +1626,16 @@ html id than Element_Type will have an ID of undefined and therefore attached to no actual HTML elemen.

+

+ + +

-

CLOG-BR - Class for CLOG Line Breaks

+

CLOG-BR - Class for CLOG Line Breaks

@@ -1661,14 +1713,14 @@ place-inside-bottom-of CLOG-OBJ.

line break and if :AUTO-PLACE (default t) place-inside-bottom-of CLOG-OBJ

-

CLOG-BUTTON - Class for CLOG Buttons

+

CLOG-BUTTON - Class for CLOG Buttons

@@ -1689,14 +1741,14 @@ line break and if :AUTO-PLACE (default t) place-inside-bottom-of Get/Setf form element disabledp.

-

CLOG-IMG - Class for CLOG Imgs

+

CLOG-IMG - Class for CLOG Images

@@ -1718,14 +1770,14 @@ placing image to constrain image size.

Get/Setf the url-src of the img.

-

CLOG-Div - Class for CLOG Divs

+

CLOG-Div - Class for CLOG Div Blocks

@@ -1738,14 +1790,14 @@ placing image to constrain image size.

CLOG-OBJ

-

CLOG-HR - Class for CLOG Hortizontal Rules

+

CLOG-HR - Class for CLOG Hortizontal Rules

@@ -1758,14 +1810,14 @@ horizontal rule (line) and if :AUTO-PLACE (default t) place-inside- CLOG-OBJ

-

CLOG-Meter - Class for CLOG Meters

+

CLOG-Meter - Class for CLOG Meters

@@ -1829,14 +1881,14 @@ instead through the value property.

Get/Setf the optimum of the meter.

-

CLOG-Progress-Bar - Class for CLOG Progress Bars

+

CLOG-Progress-Bar - Class for CLOG Progress Bars

@@ -1867,14 +1919,14 @@ instead through the value property.

Get/Setf form element maximum.

-

CLOG-P - Class for CLOG Paragraphs

+

CLOG-P - Class for CLOG Paragraphs

@@ -1887,14 +1939,14 @@ instead through the value property.

CLOG-OBJ

-

CLOG-Span - Class for CLOG Spans

+

CLOG-Span - Class for CLOG Inline Spans

@@ -1920,7 +1972,7 @@ and if :AUTO-PLACE (default t) place-inside-bottom-of

  • [class] CLOG-FORM CLOG-ELEMENT

    -

    CLOG Form Objecs is the base class for all html forms.

    • +

    CLOG Form Objecs is the base class for all html forms.

@@ -1930,7 +1982,7 @@ and if :AUTO-PLACE (default t) place-inside-bottom-of

Create a new CLOG-Form as child of CLOG-OBJ that organizes a collection of form elements in to a single form if :AUTO-PLACE (default t) -place-inside-bottom-of CLOG-OBJ. In CLOG a form's on-submit handler should be +place-inside-bottom-of CLOG-OBJ. In CLOG a form's on-submit handler should be set and the form element values handled in that handler as opposed to the HTML model of submitting to a new "page". If though one wishes to submit to another page can use the :ACTION :METHOD and :TARGET keys and either do not @@ -1989,6 +2041,24 @@ text/plain

Get/Setf form validate-on-submit.

+

CLOG-Fieldset - Class for CLOG Fieldsets

+ +

+ + + +

+ +
    +

  • [generic-function] CREATE-FIELDSET CLOG-OBJ &KEY LEGEND

    + +

    Create a new clog-fieldset as child of CLOG-OBJ.

    • +
+

CLOG-Form-Element - Class for form elements

@@ -1996,7 +2066,7 @@ text/plain

@@ -2249,14 +2319,14 @@ virtual keyboards.

Get/Setf form element maximum-length.

-

CLOG-Label - Class for CLOG Labels

+

CLOG-Label - Class for CLOG Labels

@@ -2275,32 +2345,14 @@ virtual keyboards.

Set label is for ELEMENT.

-

CLOG-Fieldset - Class for CLOG Fieldsets

- -

- - - -

- -
    -

  • [generic-function] CREATE-FIELDSET CLOG-OBJ &KEY LEGEND

    - -

    Create a new clog-fieldset as child of CLOG-OBJ.

    • -
- -

CLOG-Select - Class for CLOG Selects

+

CLOG-Select - Class for CLOG Selects

@@ -2316,7 +2368,7 @@ virtual keyboards.

@@ -2332,7 +2384,7 @@ virtual keyboards.

@@ -2367,14 +2419,14 @@ virtual keyboards.

Add group of options to select.

-

CLOG-Data-List - Class for CLOG Option Data Lists

+

CLOG-Data-List - Class for CLOG Option Data Lists

@@ -2402,14 +2454,14 @@ optionally fill in with contents of data-list.

Add option VALUE to data-list.

-

CLOG-Text-Area - Class for CLOG Text Areas

+

CLOG-Text-Area - Class for CLOG Text Areas

@@ -2458,14 +2510,14 @@ optionally fill in with contents of data-list.

8 CLOG Canvas Objects

-

CLOG-Canvas - Class for CLOG canvas objects

+

CLOG-Canvas - Class for CLOG canvas objects

@@ -2806,14 +2858,14 @@ https://developer.mozilla.org/en-US/docs/Web/CSS/font

9 CLOG Body Objects

-

CLOG-Body - CLOG Body Objects

+

CLOG-Body - CLOG Body Objects

  • [class] CLOG-BODY CLOG-ELEMENT

    -

    CLOG Body Object encapsulate the view in the window.

    • +

    CLOG Body Object encapsulate the view in the window.

CLOG-Body - Properties

@@ -2866,14 +2918,14 @@ or global objects.

10 CLOG Window Objects

-

CLOG-Window - CLOG Window Objects

+

CLOG-Window - CLOG Window Objects

  • [class] CLOG-WINDOW CLOG-OBJ

    -

    CLOG Window Objects encapsulate the window.

    • +

    CLOG Window Objects encapsulate the window.

CLOG-Window - Properties

@@ -3176,14 +3228,14 @@ If ON-ORIENTATION-CHANGE-HANDLER is nil unbind the event.

11 CLOG Document Objects

-

CLOG-Document - CLOG Document Objects

+

CLOG-Document - CLOG Document Objects

  • [class] CLOG-DOCUMENT CLOG-OBJ

    -

    CLOG Document Objects encapsulate the document.

    • +

    CLOG Document Objects encapsulate the document.

@@ -3310,14 +3362,14 @@ If ON-ORIENTATION-CHANGE-HANDLER is nil unbind the event.

12 CLOG Location Objects

-

CLOG-Location - CLOG Location Objects

+

CLOG-Location - CLOG Location Objects

  • [class] CLOG-LOCATION CLOG-OBJ

    -

    CLOG Location Objects encapsulate the location.

    • +

    CLOG Location Objects encapsulate the location.

CLOG-Location - Properties

@@ -3426,14 +3478,14 @@ If ON-ORIENTATION-CHANGE-HANDLER is nil unbind the event.

13 CLOG Navigator Objects

-

CLOG-Navigator - CLOG Navigator Objects

+

CLOG-Navigator - CLOG Navigator Objects

  • [class] CLOG-NAVIGATOR CLOG-OBJ

    -

    CLOG Navigator Objects encapsulate the navigator.

    • +

    CLOG Navigator Objects encapsulate the navigator.

CLOG-Navigator - Properties