龙博的新界面beta版预览

taocong810

浏览: 27866 次
性别:
来自: 北京

最近访客更多访客>>

郑智睿

huangst

avantnt

tsoukw

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (16)

社区版块

存档分类

JavaScript 浏览器 VB Firebug 设计模式

在专业级美工小星的帮助下，龙博的新界面（默认皮肤）开发完成，该界面是仿Office2007的，和extjs的界面有点类似。仿Mac和Windows7的界面正在紧张制作中，再过10天能和大家见面。不多说，看图先. (看完后要多提意见和建议哈)
试用:http://www.longboo.com/VisualJS/UIBuilder.html
下载:http://www.longboo.com/download.html
默认的仿Office2007的截图

仿照Mac界面的截图

仿照Vista界面的截图

分享到：

csdn正在报道龙博，请大家支持一下 | 关于龙博AJAX的版权的问题，我不得不说一下

2009-03-29 13:37
浏览 1398
评论(19)
论坛回复 / 浏览 (19 / 8740)
查看更多

19 楼 taocong810 2009-12-02

szcjlssx 写道

使用龙博的这种方式有两个最大的好处，
1.可以向前或横向兼容更多的浏览器，特别是那些DOM事件模型支持不够的浏览器。这个好像没有必要，其实用户相当大。在国内，大家都用最新的软件，但是在国外，正版普及率高，很多人还在用非常古老的软件。另外就是手机上的浏览器。
2.避免在节点删除的时候造成内存泄露。这个话题讨论的很多了，但是目前没有一种非常完美的办法来解决这个问题，你可以google一下相关的资料。
当然这种方式也有不好的地方，如air不支持innerhtml的事件，这个方法就没法用了。

szcjlssx 写道

从LINB框架,以及提供的示例(当然还有官网,官网是我对LINB的第一印象)看来,LINB对标准似乎不大重视.哦,又提到标准了,或许又有人要和我争论标准的重要性.我只是简单的认为,遵守标准,不会花多大力气,并且是有好处的.

龙博向来非常尊重w3c的规范，但是你说addListener就是规范， onclick 就不是规范，我却不能苟同。每一种处理的方式都有优点，也有缺点。就好像开车，只要你遵守交规，在你自己的车道上，靠左一点，或靠又一点，有什么关系呢？如果linb不尊重规范，又怎么能在各种现代的浏览器中运行自如呢？同时，龙博框架可以同时和jquery，extjs一起使用，我们也是做过测试的。

龙博的网站的却是在网上找了一个模板随便改了一下，有不规范的地方，我们最近准备改一下版，谢谢你的批评意见，也希望大伙儿一起来探讨相关的技术问题

18 楼天一 2009-11-30

富客户端开发是趋势，可能还不是很好用，但是我觉得楼主这玩意儿有前途

17 楼 zhourenjian 2009-11-30

zhourenjian 写道

引用

还有一个是仿Outlook的web mail。

不知道这个web mail是否前后端都可以跑起来，有没有在线 demo 地址，想体验一把，探讨下。

看到demo地址了：
http://www.longboo.com/Samples/comb/OutLook/index.html

有点失望：只有前端界面，没有和mail server的ajax交互。

16 楼 zhourenjian 2009-11-30

引用

还有一个是仿Outlook的web mail。

不知道这个web mail是否前后端都可以跑起来，有没有在线 demo 地址，想体验一把，探讨下。

我前两周弄了一个仿Gmail的web mail —— WeMail，支持Gmail/Hotmail/Yahoo!Mail和其他POP/IMAP&SMTP的邮件，demo 地址： http://webuzz.im/mail/

引用

第二个问题，事实上不是龙博的问题，是一个b/s和c/s的问题。龙博的界面完全是仿照vb/delphi的，但是结构上是b/s结构。至于到底是b/s还是c/s，要看具体情况了

我用来开发web mail的工具是桌面版的WindowsBuilder Pro，先有c/s（完全能够在桌面独立跑起来的mail client），然后才有b/s （web mail ）。其实b/s和c/s在我看来没有必要区分。

15 楼 crazy.j 2009-11-30

看了下截图界面糙了点

14 楼 szcjlssx 2009-11-13

taocong810 写道

szcjlssx 写道

虽然开发这样一个NB的东西，费时费力，说NB什么的一点也不夸张，但事实上，我还是忍不住说不句：“不够专业”，看看LONGBOO生成的代码（用FIREBUG查看的）

<div id="linb.UI.Layout-MOVE:a:a" class="linb-layout-move uibg-bar linb-layout-move-left" onmouseout="return linb.Event(arguments[0],this)" onmouseover="return linb.Event(arguments[0],this)" ondragstop="return linb.Event(arguments[0],this)" ondrag="return linb.Event(arguments[0],this)" onmousedown="return linb.Event(arguments[0],this)" style=""/>

onmouseover=.....
看得出来，事件没封装好
希望你们继续努力。。。。。。最后,我还是要说下,我还只是个新手....-_-

龙博采用的是一种dispatch的模式，
这样做的最大好处是在DOM删除的时候避免回收内存引起的各种问题，
不知道专业的样式是什么样式

可以参考一下DeanAdwards的addEvent与removeEvent方法,在不使用addEventListeners这些现代事件绑定方法的情况下,实现注册多个事件处理函数,对于上面的代码,其实看得出来与其原理一样的,但是在组件生成时,采用这种事件绑定方法,将产生混乱.本来,元素的on之类的属性应该为事件处理函数的引用 ,但现在,事实上它是一个字符串.从LINB框架,以及提供的示例(当然还有官网,官网是我对LINB的第一印象)看来,LINB对标准似乎不大重视.哦,又提到标准了,或许又有人要和我争论标准的重要性.我只是简单的认为,遵守标准,不会花多大力气,并且是有好处的.
还有类似像下面这样的

linb.Event.stopDefault = function (event){ 
    event = event || window.event; //这样的代码多次出现,可见对于事件对象的访问并没有在一处进行  统一  !
//在DeanAdwards的addEvent里面,有个fixEvent方法,生成新的事件对象,在不同浏览器中使用 统一 的方法操作事件对象
    if(event.preventDefault){ 
        event.preventDefault() 
    } 
    event.returnValue = false 
}

恕我见识不够广,对于事件绑定,至少我没看见Prototype,jQuery这些库使用这种方法

EXTJS生成的组件,也没有用这种方法(指将JS代码嵌入到HTML元素的属性中)

13 楼 vb2005xu 2009-11-13

不错,很好的东西,我之前见过一个老外的BSD授权的Tibco,只不过有些复杂,没有用,楼主这个我去下下试试,

12 楼 taocong810 2009-11-12

szcjlssx 写道

<div id="linb.UI.Layout-MOVE:a:a" class="linb-layout-move uibg-bar linb-layout-move-left" onmouseout="return linb.Event(arguments[0],this)" onmouseover="return linb.Event(arguments[0],this)" ondragstop="return linb.Event(arguments[0],this)" ondrag="return linb.Event(arguments[0],this)" onmousedown="return linb.Event(arguments[0],this)" style=""/>

onmouseover=.....
看得出来，事件没封装好
希望你们继续努力。。。。。。最后,我还是要说下,我还只是个新手....-_-

龙博采用的是一种dispatch的模式，
这样做的最大好处是在DOM删除的时候避免回收内存引起的各种问题，
不知道专业的样式是什么样式

11 楼 hcs1981 2009-11-10

个人感觉已经比extjs强多了

10 楼 szcjlssx 2009-11-06

<div id="linb.UI.Layout-MOVE:a:a" class="linb-layout-move uibg-bar linb-layout-move-left" onmouseout="return linb.Event(arguments[0],this)" onmouseover="return linb.Event(arguments[0],this)" ondragstop="return linb.Event(arguments[0],this)" ondrag="return linb.Event(arguments[0],this)" onmousedown="return linb.Event(arguments[0],this)" style=""/>

onmouseover=.....
看得出来，事件没封装好
希望你们继续努力。。。。。。最后,我还是要说下,我还只是个新手....-_-

9 楼 szcjlssx 2009-11-06

我也泼点冷水，下了源码，在index页中看到如下代码

<div id="layout">
        <div id="head">
            <div>
                <img style="float:right;" border=0 src=img/logo.gif />
                <span id='flag'>Web应用(Ajax RIA)解决方案 - 所见即所得的界面编辑器</span>
            </div>
        </div>
        <div id="body">
            <div class='block'>
<div><div class=b1></div><div class=b2></div><div class=b3></div></div><div class=bi>
                    <strong>龙博AJAX框架是跨浏览器的JavaScript框架集，构建富web应用的利器.</strong>
</div><div><div class=b3></div><div class=b2></div><div class=b1></div></div>
            </div>
            <div class='content'>
<div><div class=b1></div><div class=b2></div><div class=b3></div></div><div class=bi>
        <div id='list1'>
            <div> &bull; 富客户端技术, 可以和任意后端技术(包括但不限于php, .Net, Java, python)或静态的HTML页面.</div>
            <div> &bull; 包含40多个图形界面控件, 例如标签(Tabs),窗口对话框(Dialog),树型表格(TreeGrid),时间线(TimeLine)等等.</div>
            <div> &bull; 多浏览器兼容, 包括IE6+, firefox1.5+, opera9+, safari3+ 和 Google Chrome.</div>
            <div> &bull; 大量的<a href="API">API文档</a> 和示例.</div>
            <div> &bull; 不断更新的<a href="CodeSnip">代码片段</a>供程序员参考.</div>
            <div> &bull; 极为方便的所见即所得的<a href="VisualJS/UIBuilder.html">界面编辑器</a>. Web界面使用拖拽轻松搞定，大大降低开发时间.</div>
            <div> &bull; 和其他Ajax框架，如jQuery, prototype, mootools充分兼容.</div>
            <div> &bull; 源代码开放。在<a target=_blank href='http://www.gnu.org/licenses/lgpl-3.0-standalone.html'>LGPL许可</a>下, 可免费应用于个人或商业目的.</div>
        </div>
</div><div><div class=b3></div><div class=b2></div><div class=b1></div></div>
            </div>
            <div class='block'>
<div><div class=b1></div><div class=b2></div><div class=b3></div></div><div class=bi>
                <a href='http://www.longboo.com/download.html'>免费下载(build 2009-04-13)</a> |
                <a href='http://www.longboo.com/forum'>论坛</a> |
                <a href='API'>API文档</a> |
                <a href='CodeSnip'>代码片段</a> |
                <a href='VisualJS'>可视化编辑器</a> |
                <a href='Samples'>示例</a>
                
</div><div><div class=b3></div><div class=b2></div><div class=b1></div></div>
            </div>
            <table id='list' cellpadding=0 cellspacing=10 width='100%'>
                <tr>
                    <td width='50%'>
<div><div class=b1></div><div class=b2></div><div class=b3></div></div><div class=bi>
                    <a href=API>
                    <div class="title">API文档</div>
                    <img src=img/api.png>
                    </a>
</div><div><div class=b3></div><div class=b2></div><div class=b1></div></div>
                    </td>
                    <td width='50%'>
<div><div class=b1></div><div class=b2></div><div class=b3></div></div><div class=bi>
                    <a href=VisualJS/UIBuilder.html>
                    <div class="title">可视化编辑器</div>
                    <img src=img/builder.png>
                    </a>
</div><div><div class=b3></div><div class=b2></div><div class=b1></div></div>
                    </td>
                </tr>
                <tr>
                    <td>
<div><div class=b1></div><div class=b2></div><div class=b3></div></div><div class=bi>
                    <a href=Samples>
                    <div class="title">示例</div>
                    <img src=img/samples.png>
                    </a>
</div><div><div class=b3></div><div class=b2></div><div class=b1></div></div>
                    </td>
                    <td>
<div><div class=b1></div><div class=b2></div><div class=b3></div></div><div class=bi>
                    <a href=CodeSnip>
                    <div class="title">代码片段</div>
                    <img src=img/codesnip.png>
                    </a>
</div><div><div class=b3></div><div class=b2></div><div class=b1></div></div>
                    </td>
                </tr>
            </table>
        </div>
        <div class='block'>
<div><div class=b1></div><div class=b2></div><div class=b3></div></div><div class=bi>
                合作伙伴
               ..........................

无语，页面是XHTML STRICT DOCTYPE，写的代码也不验证下是否规范？
不谈XHTML语义WEB，也不细究什么JS的效率问题，至少HTML代码也不能太垃圾，难道这张页面是用你们的可视化编辑器编辑的？那么我更不敢用了！

8 楼 taocong810 2009-04-15

仿照Mac界面的截图

仿照Vista界面的截图

7 楼 taocong810 2009-04-14

flysunsystem 写道

牛人佩服，希望能给几个的实例。

一些示例请见
http://www.longboo.com/Samples/
我们现在也在做一些复杂一些的案例，包括有前后台

6 楼 taocong810 2009-04-14

liujunsong 写道

我来拨点冷水.
这种基于javascript的开发平台,基本上是在浪费时间.
有几个问题很难解决:
1.调试的问题.Javascript本身是没有调试功能的,这个开发平台怎么办?自己做一个javascript的调试器吗?
2.界面绘制的问题.现在问题是要绘制一个用户界面出来,为了解决这个问题,用javascript写了一个界面绘制,或者说是一个设计器,我的问题是,为啥一定要用javascript来做这件事情呢,用vb啥的,既简单又方便,为啥一定要用javascript来做这种事情呢.

世界上的技术多的很,要选择合适的技术来做合适的事情,一个语言包打天下,既不现实,也不经济.

这位兄台是说到点子上了，这两个问题都曾经困扰我们过。
第一个问题，事实上已经有解决的方案了。我不知道现在最流行的javascript的调试器是什么，但是无非分两种，attach浏览器进程的和非attach浏览器进程的。非attach浏览器，缺点不用说了，调试完了的程序在目标浏览器上可能用不了，因为js的engine（以及对dom的解释等等）是不一样的。现在最多的调试器都是attach浏览器，这个包括vs。net的调试器，aptana的调试器根本原理和attach进程是类似的。事实上最方便的就是浏览器自己调试器，包括ff所带的firebug，ie7+所带的javascript的调试器。程序员设计好了javascript以后，直接运行，然后在firebug上调试。
第二个问题，事实上不是龙博的问题，是一个b/s和c/s的问题。龙博的界面完全是仿照vb/delphi的，但是结构上是b/s结构。至于到底是b/s还是c/s，要看具体情况了

5 楼 liujunsong 2009-04-14

4 楼 flysunsystem 2009-04-13

牛人佩服，希望能给几个的实例。

3 楼 taocong810 2009-04-06

erikchang 写道

这个编辑器做的不错，但是还是觉得不实用，不知道设计人员熟悉MFC和VCL不，如果能够做成那样的界面设计就能够很好的解决设计难的问题，介于现有的webUI设计，很多人宁可自己写代码来完成界面设计，也不愿意使用webUI编辑器来做！纯属个人建议，如有不妥，不必在意！

现在设计器完全就是参考VCL的底层构架。
我很想知道现在的设计器和VCL的设计器差距在什么地方？ VCL的什么功能是你觉得非常实用，但是我们这个却没有提供？请赐教

2 楼 erikchang 2009-04-06

1 楼 taocong810 2009-04-06

移植了一个extjs项目《酒店管理系统》的界面，附在这里做一个参考

还有一个是仿Outlook的web mail。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论