用可视化编辑器制作图形应用

JumPHP 图形应用是一个窗口由表单构成的 PHP 程序：按钮、文本框、列表、下拉列表、复选框、滑块、图片、视频。无需 HTML 和 CSS：引擎自己绘制它们，同一个应用可在 PC、Mac、Linux、浏览器和手机（Android 和 iOS）上运行。

创建项目

在 JumPHP IDE 中：New Project，然后选择 Graphic app（桌面应用）或 Mobile app（竖屏手机应用）。命令行：bin/jumphp gui:new contacts "Contacts"（手机应用加上 --mobile）。

示例应用有一个窗口 forms/MainForm.form.yaml 和它的代码 src/Form/MainForm.php。

绘制窗口

打开 forms/MainForm.form.yaml：它会以 Design 模式显示（Code 和 Split 按钮显示文件内容）。

从左侧的控件面板把控件拖到窗口中，或点击它，把它添加到所选控件之后。
拖动即可移动控件；Del 删除，Ctrl+D 复制，Ctrl+Z 撤销。
右侧的属性检查器设置所选控件：文本、样式、尺寸（auto、fill 或数字）、所占剩余空间的比例（Grow）、对齐方式。

随屏幕自适应的布局

Row（行）把控件横向排列，Column（列）纵向排列。
Spacer 占据剩余空间：放在按钮前面，就会把按钮推到行尾。
Grid 把控件排成 12 列。在属性检查器中，Columns (of 12) 为每种屏幕尺寸设置每个控件的宽度：xs（手机）、sm（平板）、md 和 lg（大屏幕）。例如 xs 设为 12、md 设为 6：手机上每行一个面板，PC 上两个并排。
Hidden on 可在某些屏幕尺寸下隐藏控件。

工具栏中的 PC、Laptop、Tablet、iPhone 和 Android 按钮会以各种尺寸显示窗口；在 PC 模式下，拖动窗口边缘即可看到布局的变化。

连接事件

双击一个控件：IDE 会把它的方法写进代码（例如 public function onAddClick(Button $sender): void）并打开，等你填写：

public function onAddClick(Button $sender): void
{
    $this->people->addItem($this->name->text);
    $this->name->text = '';
}

其他事件（文本变化、列表中选中的行……）在属性检查器的 Events 部分。每个有 Id 的控件都可以通过 $this->它的Id 访问，并支持代码补全。

图片和视频

把图片放在 assets/images/：Image 控件的 Picture 字段（或按钮的 Image 字段）会列出它们。视频可用 bin/jumphp video contacts film.mp4 连同声音切成图片，再由 Video 控件播放。

运行和导出

编辑器的 Run 按钮启动应用。之后和游戏一样：bin/jumphp build（浏览器版本）、bin/jumphp export:standalone（Windows 或 Linux 可执行文件）、bin/jumphp android 和 bin/jumphp apple（手机应用）。