基本特性

BlockView提供items属性让你添加一个数组或一个EntityList对象，然后将这些对象按照块的方式自动布局到BlockView中。

当控件的大小发生变化时会自动的调整布局。看附件提供的：动画效果。

使用简介

在View中添加一个BlockView控件：

XML源码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?><ViewConfig>
  <Arguments/>
  <Context/>
  <Model/>
  <View layout="padding:20">
    <Property name="title">BlockView</Property>
    <BlockView id="blockView1">
      <Property name="style">
        <Property name="bordr">1px solid gray</Property>
      </Property>
    </BlockView>
  </View>
</ViewConfig>

并设定BlockView的onReady事件：

// @Bind #blockView1.onReady
!function(self, arg) {
     self.set("items",["item1","item2","item3","item4","item5","item6","item7","item8","item9","item10","item11","item12","item13","item14","item15","item16","item17"]);
}

JS代码中我们为BlockView的items属性初始化了一个数组。

这样我们浏览这个页面的时候，就能看到如下的效果图：

BlockView控件已经将onReady事件中初始化好的items中的数组以块的形式渲染到界面上了。

而至于每一个块的显示内容是由块渲染器决定的。

块渲染器

BlockView默认提供的块渲染器对象为：dorado.widget.blockview.DefaultBlockRenderer,其DOM渲染机制为：

dom.innerText = dom.itemIndex + ": " + data;//序号加渲染的数据对象

其中序号itemIndex是内部管理的序号，不能直接访问。

data代表了数组中的数据对象，前面范例中就是一个字符串，如果改为JSON对象，如(暂时以空的JSON对象说明)：

// @Bind #blockView1.onReady
!function(self, arg) {
  self.set("items",[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]);
}

则最终渲染的效果就如下：

当然在大多数情况下，这种渲染效果并不是我们想要的，这个时候我们就需要定义自己的块渲染器，如：

var SimpleBlockRenderer1 = $extend(dorado.widget.blockview.DefaultBlockRenderer,{
	render: function(dom, arg) {
		dom.innerText = arg.data;
	}
});

注意arg.data表示数组对象中的数据。

并调整BlockView的默认块渲染器对象：

// @Bind #blockView1.onReady
!function(self, arg) {
	self.set("renderer", new SimpleBlockRenderer1());//修改默认的块渲染器对象
	self.set("items",["item1","item2","item3","item4","item5","item6","item7","item8","item9","item10","item11","item12","item13","item14","item15","item16","item17"]);
}

这样浏览器中的页面效果就如下：

通过上面块渲染器的使用，我们可以知道只要定义一个块渲染器的方法非常简单：扩展实现DefaultBlockRenderer类的renderer方法就可以，并且在这个方法中我们可以拿到HTML中的DOM对象。

利用这种机制获取到的DOM对象，我们就可以充分利用HTML中的技术为这个DOM定义更丰富的格式，如定制文字风格：

var SimpleBlockRenderer2 = $extend(dorado.widget.blockview.DefaultBlockRenderer,{
	render: function(dom, arg) {
		dom.innerHTML = "<font size='3' color='green'>"+arg.data+"</font>";
	}
});

支持图片显示的块渲染器：

var SimpleBlockRenderer2 = $extend(dorado.widget.blockview.DefaultBlockRenderer,{
	render: function(dom, arg) {
		dom.innerHTML = "<img src='"+arg.data+"' />";
	}
});

当然如果items数组中的数据是JSON时，上面的代码调整也不麻烦：

var SimplePropertyBlockRenderer = $extend(dorado.widget.blockview.DefaultBlockRenderer,{
	captionProperty: "caption",
	render: function(dom, arg) {
		dom.innerText = arg.data[captionProperty];
	}
});

并调整BlockView的默认块渲染器对象：

SimplePropertyBlockRenderer应用范例1：

// @Bind #blockView1.onReady
!function(self, arg) {
	self.set("renderer", new SimplePropertyBlockRenderer({captionProperty:"label"}));//设定JSON中的label为SimplePropertyBlockRenderer的captionProperty属性
	self.set("items",[{id:"1", label:"item1"},{id:"2", label:"item2"},{id:"3", label:"item3"},{id:"4", label:"item4"},{id:"5", label:"item5"},{id:"6", label:"item6"},{id:"7", label:"item7"},{id:"8", label:"item8"}]);
}

SimplePropertyBlockRenderer应用范例2：

// @Bind #blockView1.onReady
!function(self, arg) {
	self.set("renderer", new SimplePropertyBlockRenderer({}));//由于JSONcaption属性名与SimplePropertyBlockRenderer中的captionProperty的默认值一致，因此构造函数得以简化
	self.set("items",[{id:"1", caption:"item1"},{id:"2", caption:"item2"},{id:"3", caption:"item3"},{id:"4", caption:"item4"},{id:"5", caption:"item5"},{id:"6", caption:"item6"},{id:"7", caption:"item7"},{id:"8", caption:"item8"}]);
}

ImageBlockRenderer

在块渲染器中我们详细介绍了块渲染器的扩展和定制的方法，下面再给大家介绍一个Dorado已经提供的为图片显示服务的块渲染器：ImageBlockRenderer。它将块分为图片区和标题区，如下：

对于这种显示形式的块，就可以直接用ImageBlockRenderer。它提供了两个基本的属性captionProperty和imageProperty属性分别用于定义标题和图片，如JSON对象的结构为：

{
	label:"安林",
	photo:"images/anlin.jpg"
}

则渲染器构造的时候就可以这么设定：

blockView.set("renderer", new dorado.widget.blockview.ImageBlockRenderer({
	captionProperty:"label", 
	imageProperty: "photo"
	}));

另外captionProperty的默认值为"caption"，imageProperty的默认值为"image",也就是说如果你的JSON结构如下，就不需要指定这两个属性:

{
	caption:"安林",
	image:"images/anlin.jpg"
}

则渲染器构造的时候就可以更简洁：

blockView.set("renderer", new dorado.widget.blockview.ImageBlockRenderer());

关于ImageBlockRenderer的其他属性的详细说明，请参考：ImageBlockRenderer

详细属性说明

blockLayout

通过下图可以知道默认情况下，块是按照从左到右横向逐个布局块的：

另外BlockView也支持从上到下的垂直的布局方式，如：

修改布局的方式很简单，只要调整BlockView的blockLayout属性即可，参考IDE设计视图：

blockWidth和blockHeight

通过blockWidth和blockHeight的大小调整可以调整块的大小，如下图blockWidth和blockHeight的值都设置为80：

如果将它们调整为100,则效果如下：

lineSize

设置每行或列显示的块的个数。

如果blockLayout为vertical就表示设置每行显示的块的个数，如果blockLayout为horizontal就表示设置每列显示的块的个数。

如果设置为0，就表示系统自动根据blockLayout的值自动计算每行或每列的块个数。

fillLine

如果我们设置了blockWidth和blockHeight，并且设置了lineSize属性，这样当BlockView的总宽度或高度超出块的总和时，BlockView中的空白区域就会比较大，如下的效果图：

blockLayout为vertical情况下，右侧会有一片空白区：

blockLayout为horizontal情况下，下方会有一片空白区：

如果我们希望其能根据高度或宽度自动调整Block的高度或宽度，则可以设置fillLine属性为true,设置后效果：

blockLayout为vertical情况(右侧空白区消失)

blockLayout为horizontal情况(下方空白区消失)

无法实现块的高度和宽度同时自适应，只能针对blockLayout的布局方式在一个方向上实现高度或宽度的自动调整。

blockDecoratorSize

该属性用于设置块装饰器的大小，所谓块装饰器是指BlockView中当前块或当鼠标经过时当前块会有一个特殊的CSS特效，如下图：

仔细观察上面动画中鼠标下面的块的宽度和高度都会比原来的都块都大一下，肯能这样效果还不明显，我们将blockDocoratorSize设置为20，再看看执行效果：

blockDocoratorSize就是用来设置装饰器在每个方向上比块的尺寸大多少的一个属性。

horiPadding和vertPadding

horiSpacing和vertSpacing

allowNoCurrent

当此属性为true时，如果用户点击了BlockView中空白区域后，当前块将被设置为空。如下的动画中我们选择了其中的一个块，这个块就有一个绿色背景，这个时候将鼠标移到BlockView的空白区域，并单击后选中块的绿色背景就消失：

默认值为false,当这个值为false时，激活的块的背景色就始终存在：

scrollMode

当BlockView中的items中的数据较多，导致渲染BlockView必须出现滚动栏的时候，scrollMode将决定在BlockView中可视范围外的块的渲染处理方式。

如上图中滚动栏下方的块如何渲染由scrollMode决定，当然scrollMode只决定了块第一次渲染的渲染方式，如果块已经被渲染，后面再拖动滚动栏的时候就直接显示了。

我们以HTML结构来说明scrollMode的三种模式：simple,lazyRender和viewport。

首先将BlockView的高度缩小，使之出现竖向滚动栏：

之后我们分别设置scrollMode为simple, lazyRender和viewport,并利用Chrome的元素审查工具查看其DOM结构看他们的差别：

序号

scrollMode

DOM结构

说明

使用差别

1

simple

不可见的块也被初始化了，

并且注意有小箭头，

表示这是一个完整的DOM对象

控件初始化最耗时，

初始化好之后，

滚动栏滚动操作平滑性最好，

没有延迟

2

lazyRender

不可见的块也被初始化了，

并且注意没有小箭头，

表示这是一个占位DOM对象，

只有当我们将滚动栏移到下面的时候，

这些DOM才会被出示化

控件初始化效率处于两者之间，

初始化好之后，

滚动栏滚动操作时，

由于所有的控件内部的信息都是动态创建，

会有一定的延迟，

但是效率会好于viewport类型

3

viewport

viewport类型的scrollMode中，

不可见的块没有任何DOM对象，

只有当滚动栏下拉的时候才会

初始化整个块对象

控件初始化最高效，

初始化好之后，

滚动栏滚动操作时，

由于所有的控件都是动态创建，

会有一定的延迟

scrollMode的默认值为lazyRender,一般情况下我们不需要特别调整这个参数。

特殊情况下(主要指数据量特别大情况下)要依据用户的接受度以及页面的业务特征等，再综合上表提到的各项差别，综合考虑，找到一个最优解作为scrollMode的渲染方式。

Dorado 9 : BlockView(DCUG)

基本特性

使用简介

块渲染器

ImageBlockRenderer

详细属性说明

blockLayout

blockWidth和blockHeight

lineSize

fillLine

blockDecoratorSize

horiPadding和vertPadding

horiSpacing和vertSpacing

allowNoCurrent

scrollMode

selectionMode

Attachments: