js 书写较复杂的UI日记

2008。12。2
一、初步设想----要封装组件的功能
    
     说明：
       （1） 首先针对div 作一个能跑起的实例。在这个原始版本里，不追求最好，不追求
没有BUG,不追求其实现代码漂亮与高效。
       （2）这个版本一经能运行，估计后续版本期限几乎为无穷，理由：本人的目标不是想作一个搞UI设计的人。
       （3） 本人要把自已的这个小组件编写过程公布出来，是为了展示思维过程。
       （4）本人基础较烂，js水本更臭(看本人本类其他博文的回复与留言能验证）。能不实现自已的想法，是个未知数。如果能作出来，希望能给新手信心：我们的目标是够用就好，能够实现就行。如果不能实现，希望新手以我为反面教材！
  
      下面是具体的草图规划：
    
      1  每个组件允许设定锚点，以决定本组件在哪个DIV节点上显示。要存储起来。
      2  本组件的管理生存外观界面的对象，要存储起来。以便再次生存新的对象

      3 每个组件要有一个初始方法，一个显示外观界面的方法。一个销毁本对象及子孙对象的方法。
     
      4 每个组件显示界面的长宽要保存起来。
 

      5 要设立一个布局管理器。初步选中模仿表格布局管理器。这个管理器很有难度，暂不处理。

      6 要保存布局管理器。

      7 为了与struts2兼容，特允许对指定UI标签的name属性质进行设置，也总是相信用户会设正确，不乱设。

  明天计划：做一个简单的具有标题标，内容区的组件。并重点思考布局管理器算法。

在这里先说明：要借用ymPrompt 3.0的全部gif与css.如果其作者有意见，本人跑起来后，会新自自已动手作外观。不管ymPrompt作者同不同意，本人先谢了。


==========================================================================
2008-12-3

本项目今天没有进行！公司的事，忙了一整天，外带还加了点班！明天估计有半天时间。

===========================================================================
2008-12-4
今天进行了半天
初步外观弄出来了，也能调整组件大小，还有许多细节需搞清。争取明天能把这个简单的组件完成，以便进行布局管理器处理。

下面是效果图。


===============================================================================
2008-12-5
今天又接到任务了，暂停。下周也会继续忙起来了


＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
2008-12-6
今天周六。 弄了一下该计划。
重写了拖动管理组件。小项目中的组件外观得到了完善。
在这个组件中，在这几个问题上有点不清楚：
  1 保存本组件各部份的id名呢，还是dom节点对象。如果所存的dom节点对象的变量，是引用型的，当然会保存对象。但是如果不是引用型的，对内存有较大的开销。如果仅保存id名，
则会让源代码变得较长。
  2 子组件对象如何保存组织呢？
  3 在什么时候如何刷新子组件呢？

以上问题，暂时保留 ，等到布局管理器出来，在调试中也许自然就会有答案了。

接下来，进行布局管理器的设计了。由于是表格布局管理器，最重要最简单一点如何在有效的区域内，用几个div进行均分。由于各个浏览器不一样，用div均分，比较麻烦。
在均分的基础上，如何合并div，这就很重要了。这些弄好，就可把它向本组件中整合了。
接下来，就思考与调试在一个div中作表格了。

下面Fbag是今天的源代码。
===============================================================================
2008-12-7

抽空，搜了一下用div css 做表格的网文，结果很是郁闷。在网上，div 与table存在争执。
然后看了一下extjs的tableLayout，又看了一下dhtmlx的grid，结果他们用的是table.

那么，用什么方便就用什么吧。接下来，采用table进行桌面布局管理器了。接下来，搜索与测试table相关方面的使用。重点是单元格的合并，大小设置，排列。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
2008-12-8
上午，处理公司的事，没弄。下午看到javaeye中的访问者模式。居然没印象了，下午就顺带复习了一下各个模式的应用场景及大体实现原理。明天进行。

===============================================================================
2008-12-9
上午正式搜了一下table. 有相当多的人认为table如果作为布局的话，会影响性能。而自已
要作的布局管理器，就是用在布局上。对采用table的考虑，深有疑惑。

又认真看了一下div css布局。在这里，通常是在一个div中采用一到三列的方式。 至于行通常也是1-3行。在web中目前，网页打开的速度，还是要考虑的因素，如果做成组件，意味数量很大。我不想在这里花过多的时间，决定放弃用tableLayout布局管理器。而思考1-3列，多行的布局方式。

今天下午弄这个，很郁闷，在js操作float，按其他方式搞始终不行，结果上网一搜，晕，原来看见过，只不过现在没印象罢了。div中搞布局，还真有点不习惯。

好在，下行终算把两行，多列的例子跑起来了。 接下来，要考虑加边框、加间隔、百分比处理的问题了。 哎，web布局真烦！

===============================================================================
2008-12-10
公司有任务，进行了一小会。 整理了一下思路。接下来，目标，计算正确间隔，但愿明天没有麻烦。
  
=================================================================================
2008-12-11
布局管理器，是最大的困难。昨天到现在，仅仅是把组件自动计算间隔弄出来。
这个初步的效果，静态地增以json形式表示的对象，进行构建布局器。在自动计旱獭间隔时，能起到自动居中的作用。这有点意外。边框计算也加进去了。

突然发现，这种方式不灵活。看一下效果图。再说明。



下面是核心的数据结枢

table={
        border:{thick:0,colour:"red",lineShap:''},//边框信息
        rows:{
            0:{id:"",sn:0,height:30,lastID:'',widthsum:0,
                colcount:0,
                //列
                cols:{
                    0:{id:'',sn:'',width:40,obj:null}
                }
            },
            1:{id:"",sn:0,height:30,lastID:'',
                colcount:0,
                //列
                cols:{
                    0:{id:'',sn:'',width:40,obj:null},
                    1:{id:'',sn:'',width:40,obj:null},
                    2:{id:'',sn:'',width:40,obj:null}
                }
            }
        }
    };

第一行，有一个div居中了，如果我想让他位于最左边，于第二的第一个对齐，怎么解决呢？

总算想到一个办法，增加一个虚拟div对象,此对象仅起占位作用。（有宽，高度，仅在程序计算时，按一个对象算，但并不生成div). 不足，效率与空间都增加了。不管这些了。呵呵。

=================================================
2008-12-14

今天布局管理器的雏形完成。可以根据比例设管理器的div的长宽，能根据每行、每列的div的参数，自动计算div与div之间的间隔。在这个布局管理器中，默认是div的高度之和加上编纵向边框宽度之和不能大于管理器的高度，同样宽度之和加上横向边框宽度之和。



接下来的事，布局管理器中如何进行嵌套本布局管理器。由于js要求代码简短，如果不是这样，可用模拟类进行，再加组合设计模式。另外，布局管理器中，当用户不指定目标div时，如何生成一个div并能与其他组件进行配合。

当上面的任务完成后，就可把该管理器加上fbox中了。

====================================================
2008-12-15

呵呵，布局管理器中已经能套布局管理器了。明天与FBox整合.

大功快成

下面是效果图

该布局管理器的源代码下载，见FRowColFlowLayout_demo.rar


=======================================================
2008-12-16

任务完成。
完整源代码 见附件：fbox_ok
网址：
http://yunhaifeiwu.iteye.com/upload/attachment/60313/4d51efe0-644d-3482-9881-660faa9f5078.rar
看效果图