bones脚本篇 - 扩展标签

本篇使用扩展标签来实现前文的按钮,前文模拟的按钮 事实上并不实用,略微功能复杂点的程序 包含几十个按钮 那是非常常见的,像前文那样在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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值