# MetaFx

**Repository Path**: default-null/meta-fx

## Basic Information

- **Project Name**: MetaFx
- **Description**: MetaFx是JavaFX的布局神器, JavaFx开发布局解决方案
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-11-12
- **Last Updated**: 2023-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Javafx

## README

# META-FX

## 简介

MetaFx是JavaFX的布局神器，用于辅助JavaFx GUI的开发和设计，MetaFx 核心功能为 **_布局思想+组件+布局工具_**

- **布局思想**：MetaFx设想一切布局皆为HBox或者VBox的应用的想法，让布局栅格化和容器化,使得可以更好的设计API,下面用少量代码实现登录页面

```java

import com.bleeth.fx.helper.ControlsHelper;
import com.bleeth.fx.layout.FormBuilder;
import com.bleeth.fx.layout.GirdCell;
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Login_2Main extends Application {
  @Override
  public void start(Stage stage) {
    show(stage);
  }

  public static void main(String[] args) {
    launch(args);
  }

  public static void show(Stage stage) {
    VBox loginForm = FormBuilder.form(400D, 400D)
            .addEmptyRow(10D)
            .addRow(GirdCell.createCell(1, Pos.CENTER), GirdCell.createCell(8, Pos.CENTER_LEFT), GirdCell.createCell(1, Pos.CENTER))
            .addCell(1, ControlsHelper.createLabel("登录", "", "h3"))
            .endRow(false)
            .addEmptyRow(20D)
            .addRow(GirdCell.createCell(1, Pos.CENTER), GirdCell.createCell(8, Pos.CENTER_LEFT), GirdCell.createCell(1, Pos.CENTER))
            .addCell(1, ControlsHelper.createLabel("你若不离不弃，我必生死相依", "", "h5"))
            .endRow(false)
            .addEmptyRow(20D)
            .addRow(GirdCell.createCell(1, Pos.CENTER), GirdCell.createCell(8, Pos.CENTER_LEFT), GirdCell.createCell(1, Pos.CENTER))
            .coverCell(1, ControlsHelper.createTextField("admin", "admin", "", "h5"))
            .endRow(false)
            .addEmptyRow(20D)
            .addRow(GirdCell.createCell(1, Pos.CENTER), GirdCell.createCell(8, Pos.CENTER_LEFT), GirdCell.createCell(1, Pos.CENTER))
            .coverCell(1, ControlsHelper.createPasswordField("admin"))
            .endRow(false)
            .addEmptyRow(20D)
            .addRow(GirdCell.createCell(1, Pos.CENTER), GirdCell.createCell(3, Pos.CENTER_LEFT), GirdCell.createCell(1, Pos.CENTER),
                    GirdCell.createCell(4, Pos.CENTER_RIGHT), GirdCell.createCell(1, Pos.CENTER))
            .addCell(1, ControlsHelper.createTextField("", "", "", "h5"))
            .addCell(3, ControlsHelper.createWrapperImg("flowers.png", 40, 135))
            .endRow(false)
            .addEmptyRow(20D)
            .addRow(GirdCell.createCell(1, Pos.CENTER), GirdCell.createCell(4, Pos.CENTER_LEFT), GirdCell.createCell(4, Pos.CENTER_LEFT),
                    GirdCell.createCell(1, Pos.CENTER))
            .addCell(1, ControlsHelper.createCheckBox("记住我"))
            .endRow(false)
            .addEmptyRow(20D)
            .addRow(GirdCell.createCell(1, Pos.CENTER), GirdCell.createCell(8, Pos.CENTER), GirdCell.createCell(1, Pos.CENTER))
            .coverCell(1, ControlsHelper.createBtn("登录", "btn-info", "h5"))
            .endRow(false)
            .build();

    ControlsHelper.createWindowBar(loginForm, stage);
    ControlsHelper.showForm(loginForm, stage);

  }
}

```

![](README/login_demo_2.jpg)

> 利用这种布局思想可以实现自定义组件容器，且可以进行多种嵌套加载,方便自定义组件

> 用工具类对常见组件进行包装,可以对组件进行美化,让开发人员更易使用

- **组件**：MetaFx设想通过上述布局思想和API封装更多更好用的组件,让开发更加方便

> 目前组件部分在思考设计中...

- **布局工具**：MetaFx设想通过上述布局思想和组件,进行可视化生成布局,结构如下,通过解析下面json实现组件构建

```json

{
  "formId": "abc",
  "formHeight": 500,
  "formWidth": 400,
  "formPos": "CENTER",
  "form": [
    {
      "rowType": "EMPTY",
      "rowHeight": 100
    },
    {
      "rowId": "aaa",
      "rowType": "NORMAL",
      "debug": "true",
      "rowSpacing": 10,
      "isCover": "true",
      "row": [
        {
          "cellId": "ccc",
          "span": 1,
          "width": 100,
          "cellPos": "CENTER",
          "cellSpacing": 10,
          "cellColor": "#ffeeff",
          "cell": [
            {
              "refId": "bcdef",
              "regionId": "fghjk",
              "regionType": "BUTTON",
              "isCover": "false",
              "region": {
                "xx": "",
                "xx": "",
                "xx": ""
              }
            }
          ]
        }
      ]
    }
  ]
}

```

> 想想用MetaFx打造的MetaFx-Tool,进行MetaFx编程,想想有点意思...

> 目前布局部分在思考设计中...


## 使用文档

- [起步](doc/get_start.md)

- [JAVAFX教程](doc/get_start.md)

- [MetaFX教程](doc/get_start.md)

## 特性

-[x] 一种栅格化布局思想
-[ ] 一套基于栅格化思想的组件库
-[x] 一套视图路由体系
-[X] 一种可以将文本(json、xml、其它格式)和UI互相转化的方案
-[ ] 一件可视化布局工具

- 组件特性
  - 样式函数
  - 操作函数
  - 路由信息
    

## 参考

JavaFx HBox VBox 布局利用Priority实现布局自适应
https://blog.csdn.net/cdc_csdn/article/details/80710001?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link

javafx布局类HBox和VBox
https://blog.csdn.net/qq_39464369/article/details/89082204

javafx css 样式
https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#poupucontrol

TOML 样式
https://toml.io/cn/v1.0.0#%E5%86%85%E8%81%94%E8%A1%A8