CLOG项目教程：如何将现有HTML页面快速转换为交互式应用-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00443/article/details/148971490

CLOG项目教程：如何将现有HTML页面快速转换为交互式应用

clog CLOG - The Common Lisp Omnificent GUI 项目地址: https://gitcode.com/gh_mirrors/cl/clog

前言

在现代Web开发中，设计师和工程师通常分工明确：设计师负责界面设计，工程师负责功能实现。CLOG项目提供了一个独特的解决方案，能够将现有的静态HTML页面快速转换为功能完备的交互式应用，而无需重写整个页面。

将现有HTML转换为CLOG应用

要将任何现有的HTML页面转换为CLOG应用，只需在HTML文件中添加以下两行代码：

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/boot.js" type="text/javascript"></script>

第一行引入jQuery库，CLOG使用它来增强浏览器兼容性；第二行引入CLOG的核心启动文件"boot.js"。

实际案例解析

本教程以一个从Bootstrap表单生成器创建的表单页面为例，展示了如何将其转换为CLOG应用。关键步骤如下：

准备工作：
- 确保表单元素有唯一的ID（如id='form1'）
- 添加上述两行CLOG必需的脚本引用
Lisp端实现：
- 使用attach-as-child方法将HTML元素绑定到CLOG对象
- 为按钮添加点击事件处理器
- 处理表单数据并显示结果

核心代码解析

(defun on-new-window (body)
  (debug-mode body)
  (let* ((form (attach-as-child body "form1" :clog-type 'clog-form))
    ;; 绑定按钮元素
    (set-on-click 
      (attach-as-child body "button1id")
      (lambda (obj)
        ;; 创建结果显示区域
        (let ((alert-div (create-div body)))
          ;; 隐藏表单，显示结果
          (setf (hiddenp form) t)
          ;; 获取表单数据
          (radio-value form "radios")
          (name-value form "textinput"))))

代码中展示了几个关键CLOG技术点：