bones脚本篇 - 扩展标签

最新推荐文章于 2017-01-03 13:57:00 发布

dalixux

最新推荐文章于 2017-01-03 13:57:00 发布

阅读量452

点赞数

分类专栏： bones 文章标签： direct-ui bones

本文链接：https://blog.csdn.net/dalixux/article/details/49019235

版权

bones 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本篇使用扩展标签来实现前文的按钮，前文模拟的按钮事实上并不实用，略微功能复杂点的程序包含几十个按钮那是非常常见的,像前文那样在xml中包含几十个按钮是非常浪费时间和精力甚至也非常容易出错。
先看下不使用扩展标签时如何实现2个按钮的xml：

    <root id ="main" class ="red" >
      <image class ="pic">
        <notify name ="onCreate" module ="test" func ="onCreate"></notify>
        <event name ="onMouseDown" phase ="target" module ="test" func ="onMouseDown"></event>
        <event name ="onMouseUp" phase ="target" module ="test" func ="onMouseUp"></event>
        <event name ="onMouseMove" phase ="target" module ="test" func ="onMouseMove"></event>
        <event name ="onMouseLeave" phase ="target" module ="test" func ="onMouseLeave"></event>
        <event name ="onMouseEnter" phase ="target" module ="test" func ="onMouseEnter"></event>

      </image>
      <image class ="pic2">
        <notify name ="onCreate" module ="test" func ="onCreate"></notify>
        <event name ="onMouseDown" phase ="target" module ="test" func ="onMouseDown"></event>
        <event name ="onMouseUp" phase ="target" module ="test" func ="onMouseUp"></event>
        <event name ="onMouseMove" phase ="target" module ="test" func ="onMouseMove"></event>
        <event name ="onMouseLeave" phase ="target" module ="test" func ="onMouseLeave"></event>
        <event name ="onMouseEnter" phase ="target" module ="test" func ="onMouseEnter"></event>

      </image>
    </root>

可以看出2个按钮已经占了很大一坨如果是几十个按钮整个xml会非常非常混乱。但是如果我们扩展出1个button标签来代表按钮那么整个xml就变的很整洁

    <root id ="main" class ="red" >
      <button class ="pic"></button>
      <button class ="pic2"></button>
      <notify name ="onCreate" module ="test" func ="onCreate"></notify>
    </root>

对比下就可以发现使用扩展标签的好处。
一：如何在xml中使用扩展标签
先来看下test.xml：

<bones>
  <head>
    <link type ="pixmap" name ="common" file ="../res/common.png"></link>
    <link type ="pixmap" name ="highlight" file ="../res/highlight.png"></link>
    <link type ="pixmap" name ="press" file ="../res/press.png"></link>
    <link type ="pixmap" name ="disable" file ="../res/disable.png"></link>
    <link type ="script" module ="test" file="test.lua"></link>
    <link type ="xml" module ="button" file="button.xml"></link>
    <style>
      .red
      {
      color:#ffff0000;
      }
      .pic
      {
      loc:20px 20px;
      size:256px 256px;
      }
      .pic2
      {
      loc:296px 20px;
      size:256px 256px;
      }
    </style>
  </head>
  <body>
    <root id ="main" class ="red" >
      <button class ="pic"></button>
      <button class ="pic2"></button>
      <notify name ="onCreate" module ="test" func ="onCreate"></notify>
    </root>
  </body>
</bones>

要想使用扩展标签同样是使用link将扩展标签的定义链接进来

<link type ="xml" module ="button" file="button.xml"></link>

type为xml则代表链接的是一个扩展标签，module即为扩展标签名 file为相对于xml的路径，链接后就可以在xml中使用button标签了，我们把button的定义移到button.xml中去，这样就多了1个可以复用的扩展标签。
来看下button.xml:

<bones>
<head>
  <link type ='script' module ='button' file ='button.lua'></link>
</head>
<body>
  <image class ="pic">
    <notify name ="onCreate" module ="button" func ="onCreate"></notify>
    <notify name ="onHitTest" module ="button" func ="onHitTest"></notify>
    <event name ="onMouseDown" phase ="target" module ="button" func ="onMouseDown"></event>
    <event name ="onMouseUp" phase ="target" module ="button" func ="onMouseUp"></event>
    <event name ="onMouseMove" phase ="target" module ="button" func ="onMouseMove"></event>
    <event name ="onMouseLeave" phase ="target" module ="button" func ="onMouseLeave"></event>
    <event name ="onMouseEnter" phase ="target" module ="button" func ="onMouseEnter"></event>
  </image>

</body>
</bones>

可以看到扩展标签button的写法就是普通xml的写法，但还是有点区别：
普通的xml会把body下所有的节点都创建出来，但由于节点必须有父，所以body下的节点通常都是root
而扩展标签只会创建body下第一个子节点以及它的子孙节点，并且使用扩展标签时的id group class属性会直接应用到body下第一个子节点上

<button class ="pic">

相当于

<image class ="pic">

二：为什么使用扩展标签
之所以会有扩展标签这个设计，最根本的原因是因为bones本身并不像传统的direct ui库一样提供控件给用户使用，所以需要一个类似于面向对象的设计来方便用户来编写控件
如果直接提供控件给用户使用是不是会更方便简单？至少从我的实践经验来看并不是更方便简单，以按钮为例我手头写过的按钮至少有七八种而且外观功能各不相同基本上美工设计一改，我这边就多出一种按钮或者少一种按钮，而且复用极差，假设我提供了1个标准按钮控件，那么对于写direct ui的意义并不大，甚至根本用不上，比如我提供了标准按钮但程序用到并不是标准按钮而是点击会振动的按钮，那么要不要提供点击后会振动的按钮？如果把所有的按钮都实现了，那么UI库会膨胀的什么程度？这还只是按钮还有各种各样的列表以及自定义控件，而且我认为direct ui库天生就是用来写自定义控件的，所以对于一个UI库来讲，我觉得所有控件都提供并不是一个好的并且现实的设计，更进一步的说绝大多数的direct ui的程序都是不同的，用到的控件也各不一样。你会发现你只用了少数的控件但库却包含了一堆你用不到的控件，这另我相当别扭。所以最终我选择了类似bolt的设计提供了基础元素来让用户自己写控件，这样未来只需要专注于基础元素的编写就可以了。
很难说什么设计更好，最终还是看个人的选择

本篇代码下载：
http://blog.csdn.net/dalixux/article/details/48830721

dalixux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bones脚本篇 - 扩展标签

本篇使用扩展标签来实现前文的按钮，前文模拟的按钮事实上并不实用，略微功能复杂点的程序包含几十个按钮那是非常常见的,像前文那样在xml中包含几十个按钮是非常浪费时间和精力甚至也非常容易出错。先看下不使用扩展标签时如何实现2个按钮的xml： <root id ="main" class ="red" > <image class ="pic"> <not
复制链接

扫一扫