Code Monkey home page Code Monkey logo

xuui's Introduction

XUUI

基于xLua的轻量级UI框架。

两大核心能力

  • 支持MVVM的单/双向绑定
  • 应用框架:模块加载,模块刷新(reload)、模块间(数据)隔离、模块间可控交互

科普MVVM

  • mvvm框架,支持你在UI上设置一些绑定路径,比如:info.name ,select啥的,然后你在逻辑代码那修改info.name ,所有绑定到info.name的UI组件都会自动发生变化,这是单向绑定。
  • mvvm框架还支持双向绑定:比如输入框绑定到info.name ,那么这个输入框的输入会自动修改info.name ,进而导致所有其它绑定到info.name 的UI组件都会自动发生变化。

特点

  • 可以和任意UI库配合,ugui,ngui,fairyGUI,你自己倒腾的UI库。。。Whatever you want
  • 支持把本框架作为一个mvvm驱动器,纯用C#写逻辑
  • 支持“计算属性”:“计算属性”依赖的各属性发生改变会触发“计算属性”的重计算
  • 可随时绑定View以及解绑定

示例

设置绑定信息

怎么操作?添加添加适配器(继承自MonoBehaviour)到GameObject,可以通过Component/XUUI菜单或者手动到XUUI\Scripts\UGUIAdapter目录找脚本拖放到GameObject,然后设置BindTo属性即可。

Helloworld示例UI节点的绑定信息如下:

  • InputField: info.name
  • Text : message,这是个“计算属性”,计算时用了info.name,当info.name发生变化会触发message重新计算,并自动更新Text。
  • Button : click,这会绑定到一个click command上

代码

public class Helloworld : MonoBehaviour
{
    Context context = null;

    void Start()
    {
        context = new Context(@"
            return {
                data = {
                    info = {
                        name = 'John',
                    },
                },
                computed = {
                    message = function(data)
                        return 'Hello ' .. data.info.name .. '!'
                    end
                },
                commands = {
                    click = function(data)
                        print(data.info.name)
                    end,
                },
            }
        ");

        context.Attach(gameObject);
    }

    void OnDestroy()
    {
        context.Dispose();
    }
}

根据一个lua脚本去new一个Context,该脚本仅简单的返回一个table,该table各字段含义如下:

  • data就是ViewModle(VM)
  • computed中引用到的VM元素,在其依赖的VM元素发生改变会自动重新计算并同步到各个绑定了它(比如上例的message)的节点
  • commands是类似按钮点击事件绑定的响应方法

然后就可以愉快的Attach到某个UI根节点了(可以Attach多个),这个UI跟节点设置了绑定信息的UI元素都会自动同步。

应用框架

Helloworld例子展现的是类似vue.js的能力,实际项目中,更建议以模块的方式来组织程序。XUUI提供的应用框架,能很好的实现模块间隔离,也能提供模块间的可控交互能力。

详细请看《应用框架》以及配套的实例程序。

例子说明

  • Helloworld.unity: 快速入门的例子。
  • MoreComplex.unity: 演示混合使用lua,C#静态函数,C#成员函数作为事件响应,演示怎么监听一个数组的变化并应用到UI元素上。
  • NoLua.unity: 演示不使用lua,把本框架作为一个mvvm驱动器,纯用C#写逻辑。
  • TestDetach.unity: 演示随意地挂载/卸载UI到一个ViewModel上。
  • App.unity: 演示应用框架怎么使用。

怎么支持各种UI

详细请看《如何和任意UI库适配》

xuui's People

Contributors

chexiongsheng avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

xuui's Issues

MultiFields 的使用

MultiFields 之前是用于什么功能的 翻项目里面 貌似没对这个字段的支持啊

一些疑问

看了下XUUI,按模块热重载的设计感觉很赞,配合FileSystemWatcher+lua可以实现做网页一样边改代码边看效果的体验了,不用重启在做UI方面能提升的效率是相当可观的

  1. Adapter那块的设计不太理解,目前看起来是一个uGUI的组件对应一个Adapter?
    以Image为例,可以实现一个类似ImageAdapterSprite:DataConsumer这样去绑定组件上的精灵,那么Image上的其他属性也这样实现的话,这个类的数量好像会爆炸...

  2. 在思路1里,在复杂UI界面GetComponentsInChildren的运行时开销可能会有点浪费?
    而且一个gameObject上的MonoBehaviour挂多了,反序列化的时间也会变长吧。
    思路2的话可以采用预生成+池回收的方式来管理各种RawAdapter,目前没想到有什么太大的问题

  3. module之间可以嵌套吗,比如一个玩家列表,单个玩家的视图逻辑通常是作为组件重用的,用XUUI的话怎么做更优雅一些?

Scroll View怎么绑定

例如背包系统,包含一个Scroll View, 其中每项是不复杂的Item , 怎么进行绑定呢?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.