qooxdoo 桌面全日历集成答案

【问题标题】：qooxdoo desktop fullcalendar integrationqooxdoo 桌面全日历集成
【发布时间】：2014-10-24 17:14:48
【问题描述】：

是否可以在qooxdoo（桌面）框架内使用FullCalendar？我知道 FullCalendar 是一个 jquery 插件，但是查看一些示例 qooxdoo 代码，看起来任何 javascript 代码都可以嵌入到框架中。不幸的是，qooxdoo 不像其他一些框架那样受欢迎，并且文档没有解释如何做这样的事情。任何示例代码或集成 qooxdoo/jquery/javascript 的其他项目的链接将不胜感激。

【问题讨论】：

如果 qooxdoo 提供全功能 DateField and DateChooser，为什么还要使用外部代码？
FullCalendar 提供日历调度界面——它不是日期选择器小部件。如果存在，我会使用内置的 qooxdoo 调度程序。

标签： javascript jquery qooxdoo

【解决方案1】：

通常当我需要将外部库小部件集成到 Qooxdoo 应用程序时，我会创建 qx.ui.core.Widget，监听其 appear 事件以创建底层 DOM 元素，然后将小部件添加到所需的父级。

var widget = new qx.ui.core.Widget();  
widget.addListenerOnce('appear', function(event) 
{
  var element = event.getTarget().getContentElement().getDomElement();
  // pass the DOM element to your library
}, this);
parent.add(widget);

这里是 FullCallendar 的 the demo code，您可以输入 Qooxdoo playground。

qx.bom.Stylesheet.includeFile('//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css');

var loadList = [
  '//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js',
  '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js',
  '//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js'
];

// Demonstration purpose dependency loading. In real app you would
// need to wrap external dependencies in qooxdoo classes and use 
// normal build process (look at ``qx.bom.Template`` as example).
function load(callback)
{
  var url = loadList.shift();
  if(url)
  {
    var request = new qx.bom.request.Script();
    request.onload = arguments.callee.bind(this, callback);
    request.open('GET', url);
    request.send();   
  }
  else
  {
    callback();
  }
}

load(function()
{
  var widget = new qx.ui.core.Widget();  
  widget.addListenerOnce('appear', function(event) 
  {
    var element = event.getTarget().getContentElement().getDomElement();
    $(element).fullCalendar({
      'header' : {
        'left'   : 'prev,next today',
        'center' : 'title',
        'right'  : 'month,basicWeek,basicDay'
      },
      'defaultDate' : '2014-09-12',
      'editable'    : true,
      'eventLimit'  : true, 
      'events'      : [
        {
          'title' : 'All Day Event',
          'start' : '2014-09-01'
        },
        {
          'title' : 'Long Event',
          'start' : '2014-09-07',
          'end'   : '2014-09-10'
        },
        {
          'title' : 'Birthday Party',
          'start' : '2014-09-13T07:00:00'
        },
        {
          'title' : 'Click for Google',
          'url'   : 'http://google.com/',
          'start' : '2014-09-28'
        }
      ]
    });
  }, this);
  this.getRoot().add(widget, {'edge': 8});
}.bind(this));

【讨论】：

【解决方案2】：

您为自己编写了一个 contrib - 一个 qooxdoo 类/一组封装了外部 JavaScript 组件的类。

大致步骤：

从小部件继承
为您希望 qooxdoo 类公开的日历属性添加 setter 和 getter
为要传递给 jQuery 的每个回调添加方法 - 理想情况下，这些方法应该只触发与 jQuery 事件等效的 qooxdoo 事件
在小部件的出现处理程序中：
- 创建所有回调 - 在您希望 jQuery 对您的对象调用的方法上使用 .bind(this)，或者只是动态创建新函数
- 创建完整的参数列表/您想要传递给日历创建的任何内容
- 将小部件的内部元素传递给 jQuery 以创建日历

如何撰写贡献：http://manual.qooxdoo.org/devel/pages/development/contrib.html

可用贡献列表（您可以用作示例）：http://qooxdoo.org/contrib/project - 日历贡献不在其中。

不过，将 contrib 设置为类似于您将使用的 qooxdoo 主题的样式可能会很困难。

鉴于基于现有小部件创建新的 qooxdoo 小部件很容易，我会创建自己的日历视图 - 例如具有三个面板（月、工作日）的堆栈容器，每个面板上都有一个 qooxdoo 表，顶部的按钮来控制日历视图。这将自动获得与应用程序的其余部分类似的样式，我估计开发工作只需几天时间来复制我所看到的 Fullcalendar 可以做的事情。这将自动获得与应用其他部分类似的样式。

【讨论】：