鉴行志

A blogging framework for hackers.

翻译－探索使用Yahoo!UI创建跨浏览器的WEB 2.0布局

| Comments

探索使用Yahoo!UI创建跨浏览器的WEB 2.0布局

Web 2.0 很多公司倾向于创建WEB用户界面，就像桌面应用程序。一个非常好的”Web 2.0”的例子是最新的Yahoo!Mail。在这篇文章中我将会去解释与此相关的想法，和共享一些开发中的测试使用新的布局组件创建用户界面。

边界布局

几乎所有的桌面应用程序和许多这样的新WEB界面都是从一个通用的布局（甚至并不了解）-边界布局。一个边界布局由5个区域构成：北区，南区，东区，西区，中区。所有这些区域并不是必需的。举个例子，在我的博客中，有北区，西区，和中区，但是没有南区和东欧。边界布局也可以用来嵌套用来达到所有想要的布局效果

错误的入门

需求

我从错误中吸取了教训，决定使用JAVASCRIPT创建一个可重用的布局管理叫做BorderLayout。下面是要满足的条件：

  • 应该可以跨浏览器–避免不可接受JavaScript 错误和矛盾
  • 应该在不同的浏览器中有一致的显示–
  • 应该速度很快–初始化布局和下一步的布局必须快速传输到用户-就像桌面布局管理
  • 应该支持嵌套布局–为了获得真实有益的BorderLayouts，他应该可以去嵌套
  • 应该能支持已经存在的HTML

    • 页面内的布局

    布局可以应用到页面中body元素或子元素。因此它并不是能控制所有。你能使用它去控制页面中任何容器元素。在下面所有的例子中，它就简单的应用到主页面的body

    测试1-自适应导航

    通用基础的测试。一个自适应的左列(西区)和一个滚动中列。这个很简单也可以很容易用CSS实现。

    测试2-自适应导航，头部和底部

    这也是一个没有想象力的布局。它包含了一样的自适应的左列(西区)，一个滚动的中列，添加了一个头部和底部。

    测试3-自适应的可拆分和折叠的导航和头部

    现在我们开始来做.我们有一个自适应的头部,一个自适应的左列和滚动的中列.我们也可以加入一个标题,一个分隔条和一个可折叠的功能到左列导航上.不像myblog.js和forum.js代码,加入一个分隔条和加入折叠功能就像设置属性一样简单 var layout = new YAHOO.ext.BorderLayout(document.body, {
    north: {
    split:false,
    initialSize: 35
    },
    west: {
    split:true, <-- Can it get any easier?
    initialSize: 200,
    titlebar: true,
    collapsible: true, <-- Collapsible
    minSize: 100,
    maxSize: 400
    },
    center: {
    autoScroll: true
    } });
    layout.beginUpdate();
    layout.add('north', new YAHOO.ext.ContentPanel('header', {fitToFrame:true}));
    layout.add('west', new YAHOO.ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true}));
    layout.add('center', new YAHOO.ext.ContentPanel('content'));
    layout.endUpdate();     尽管我在JavaScript使用”initialSize”设置了区域初始的尺寸,你也可以使用标准的CSS设置这些值.

    通过事件布局管理自动更新用户的界面.使用beginUpdate()和endUpdate()我们能告诉布局管理我要做的一系列更新.

    fiToFrame属性告诉布局管理这些内容可以调整到自适应的可利用的区域.

    测试4-嵌套的布局创建水平和垂直的分隔条和打叠能力

    这个非常像phpBB的界面,但是没有复杂的JavaScript事件和控制代码.

    测试5-带有分隔条和折叠功能的左右列


    高级特征

    var layout = new YAHOO.ext.BorderLayout(document.body, {
    north: {
    split:false,
    initialSize: 35
    },
    west: {
    split:true, <-- Can it get any easier?
    initialSize: 200,
    titlebar: true,
    collapsible: true, <-- Collapsible
    minSize: 100,
    maxSize: 400
    },
    center: {
    autoScroll: true
    } });
    layout.beginUpdate();
    layout.add(‘north’, new YAHOO.ext.ContentPanel(‘header’, {fitToFrame:true}));
    layout.add(‘west’, new YAHOO.ext.ContentPanel(‘nav’, {title: ‘Navigation’, fitToFrame:true}));
    layout.add(‘center’, new YAHOO.ext.ContentPanel(‘content’));
    layout.endUpdate();

    前面所有的例子我展示了基本的BorderLayout功能.这些例子还不够强大.现在我使用布局管理来做一些有高级特性的实例.

  • 自动的标签页-如果你加入了不止一个面板到一个区域中,它能创建和管理标签页标签标识可以在顶部和底部(默认)
  • 动态的面板-面板可以动态的添加,关闭和隐藏
  • 自动调整内容的大小-子布局元素可以自适应的利用空间
  • 网格面板-网格可以自动控制大小和更新数据
  • 自定义面板-创建自定义的面板,这需要特别的布局

    • 测试6-更多

    对于一个JavaScript开发的新手来说,去创建这样的用户界面是困难的 var layout = new YAHOO.ext.BorderLayout(document.body, {
    hideOnLayout: true,
    north: {
    initialSize: 25,
    titlebar: false
    },
    west: {
    split:true,
    initialSize: 200,
    minSize: 175,
    maxSize: 400,
    titlebar: true,
    collapsible: true
    },
    east: {
    split:true,
    initialSize: 202,
    minSize: 175,
    maxSize: 400,
    titlebar: true,
    collapsible: true
    },
    south: {
    split:true,
    initialSize: 100,
    minSize: 100,
    maxSize: 200,
    titlebar: true,
    collapsible: true
    },
    center: {
    titlebar: true,
    autoScroll:true
    } });
    layout.beginUpdate();
    layout.add('north', new YAHOO.ext.ContentPanel('north', 'North'));
    layout.add('south', new YAHOO.ext.ContentPanel('south', {title: 'South', closable: true}));
    layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'West'}));
    layout.add('east', new YAHOO.ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
    layout.add('east', new YAHOO.ext.GridPanel(propsGrid, {title: 'Properties', closable: true}));
    layout.add('center', new YAHOO.ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
    layout.add('center', new YAHOO.ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
    layout.getRegion('center').showPanel('center1');
    layout.getRegion('west').hide();
    layout.endUpdate();     对于这个例子,我也可以创建一个属性编辑器就像Visual Studio中使用grid.它在右边(东区)的面板内.

    一个最困难的问题是新的布局管理接下来的例子.我仍然认为它不一定正确.还有许多特性我没有示范.我计划创建一个完备的demo应用当有新布局管理的时候.

    下一步

    将会更全面的支持面板的拖放和停靠.我已经有代码去完成这些,但是我一种方法去支持面板停靠到一个区块并不是立即可见.这是一个小问题,我想我能够在新版本中完成

    已知的问题

    有一些问题需要去

    Comments