在iDevUI中,创建自己的小部件

分享于 

14分钟阅读

Web开发

  繁體 雙語

介绍

在本文中,我将向你介绍如何在iDevUI框架中开发你自己的定制小部件。 这些通常称为 UXs ( 用户扩展),并向iDevUI添加额外的功能。

背景

iDevUI是一个位于jQuery之上的JavaScript框架。 通过简单地将它们作为一组JavaScript对象编写,iDevUI使你能够创建丰富的web应用程序。 这使得开发者可以创建惊人的web应用程序仅仅简单地定义一些对象,让完成剩下的任务。

要了解更多关于iDevUI的信息,你可以到这里的iDevUI网站 如果你不知道 iDevUI,我建议你先尝试在你自己的自定义小部件中扩展它。

iDevUI是在MIT许可下发布的。

代码

所以我们将创建我们自己的示例小部件,我将向你展示iDevUI为你的小部件添加了哪些工具。

设置

所以首先,我们需要下载一个新的iDevUI插件副本,并将它放到一个文件夹中。 完成这里操作后,目录结构应该如下所示:

css
images
js
- idevui

我们将创建idevui文件夹的自定义小部件 inside。 在 idevui/ux中创建一个名为examplewidget的新文件夹

在这个新文件夹中,我们将创建 2个新的空文件: examplewidget.css 和 examplewidget.js。

CSS文件将保存新部件的样式,当开发人员在 app.js 中写入插件时,iDevUI文件将保存用于呈现小部件的代码。

现在我们只需要告诉iDevUI装载它。 为此,打开 js/preferences。js和 inside array 添加一个新行,如下所示:

ux:[
 "gauge/gauge.js",
 "uploader/uploader.js",
 "datepicker/datepicker.js",
 "signature/signature.js",
 "pictures/pictures.js",
 "treeview/treeview.js",
 "examplewidget/examplewidget.js"],

现在iDevUI会知道你的定制小部件。 让我们写吧 !

编写 JavaScript

对于本文,我们将创建一个小部件,它将在渲染时输出当前时间。

首先,打开我们先前创建的idevui/ux/examplewidget/examplewidget.js 文件。

首先,定义一个小部件,它应该从idevui类的baseWidget扩展:

idev.ux.widgetExample = baseWidget.extend(
{
});

iDevUI需要我们创建初始化小部件的初始化函数:

idev.ux.widgetExample = baseWidget.extend(
{
 init: function(config)
 {
 }
});

就像上面所见,iDevUI会自动将参数传递给init函数,名为 config。 这个配置是开发人员在他们的app.js ( 为缺少的任何内容添加默认值) 中定义的一个对象。

我们可以使用它为我们的小部件设置自己的属性:

idev.ux.widgetExample = baseWidget.extend(
{
 init: function(config)
 {
 this._super(config); // Required by iDevUIthis.wtype = "example"; // The wtype for the widgetthis.twelvehour = config.twelvehour || false;
 this.tpl = new idev.wTemplate(
 "<div id='{id}' class='ui-example' style='{elementstyle}{style}'>",
 "{clock}",
 "</div>" );
 }
});

现在,我们只有 1个正确叫做 twelvehour,它将设置时钟是 12小时而不是 24. 默认情况下,时钟将为 24小时。

tpl 属性是一个 iDevUI wTemplate,它定义我们要呈现的模板。 它使用标签( 由 {}) 包围,用 array 来填充,我们将把它传递给它。

iDevUI需要的另一件事是渲染方法。 当iDevUI想要渲染你的部件时,将调用这里方法:

idev.ux.widgetExample = baseWidget.extend(
{
 init: function(config)
 {
 this._super(config); // Required by iDevUIthis.wtype = "example"; // The wtype for the widgetthis.twelvehour = config.twelvehour || false;
 this.tpl = new idev.wTemplate(
 "<div id='{id}' class='ui-example' style='{elementstyle}{style}'>",
 "{clock}",
 "</div>" );
 },
 render: function()
 {
 if (this.renderTo == null) return; // If there is nowhere to render our widget, don't render it!var data = new Array();
 data['id'] = this.id;
 data['width'] = this.width;
 data['height'] = this.height;
 data['elementstyle'] = this.elementstyle;
 data['style'] = this.style;
 data['clock'] = this.generateClock(); // Our custom methodvar sHTML = this.tpl.render(data);
 $("#" + this.renderTo).append(sHTML);
 this.rendered = true;
 }
});

这个渲染方法将成功地渲染我们的小部件。 但是,我们需要创建 generateClock() 方法来提供当前时间。 让我们来写。

idev.ux.widgetExample = baseWidget.extend(
{
 init: function(config)
 {
 this._super(config); // Required by iDevUIthis.wtype = "example"; // The wtype for the widgetthis.twelvehour = config.twelvehour || false;
 this.tpl = new idev.wTemplate(
 "<div id='{id}' class='ui-example' style='{elementstyle}{style}'>",
 "{clock}",
 "</div>" );
 },
 render: function()
 {
 if (this.renderTo == null) return; // If there is nowhere to render our widget, don't render it!var data = new Array();
 data['id'] = this.id;
 data['width'] = this.width;
 data['height'] = this.height;
 data['elementstyle'] = this.elementstyle;
 data['style'] = this.style;
 data['clock'] = this.generateClock(); // Our custom methodvar sHTML = this.tpl.render(data);
 $("#" + this.renderTo).append(sHTML);
 this.rendered = true;
 },
 generateClock: function()
 {
 var d = new Date();
 var ampm;
 var time;
 var hours = d.getHours();
 var minutes = d.getMinutes();
 if(hours <12)
 {
 ampm = "AM";
 }
 else {
 ampm = "PM";
 }
 if(this.twelvehour)
 {
 if(hours == 0)
 {
 hours = 12;
 }
 if(hours> 12)
 {
 hours = hours - 12;
 }
 }
 if(minutes.length == 1)
 {
 minutes = "0" + minutes;
 }
 if(this.twelvehour)
 {
 time = hours + ":" + minutes + "" + ampm;
 }
 else {
 time = hours + ":" + minutes + "" + ampm;
 }
 delete d;
 return time;
 }
});

现在我们有了一个成功生成的时间,它将在渲染时生成。 但是,这仍然不是一个完整的小部件,iDevUI中的小部件有自己的自定义 public 方法。 让我们把它们加起来:

idev.ux.widgetExample = baseWidget.extend(
{
 init: function(config)
 {
 this._super(config); // Required by iDevUIthis.wtype = "example"; // The wtype for the widgetthis.twelvehour = config.twelvehour || false;
 this.tpl = new idev.wTemplate(
 "<div id='{id}' class='ui-example' style='{elementstyle}{style}'>",
 "{clock}",
 "</div>" );
 },
 render: function()
 {
 if (this.renderTo == null) return; // If there is nowhere to render our widget, don't render it!var data = new Array();
 data['id'] = this.id;
 data['width'] = this.width;
 data['height'] = this.height;
 data['elementstyle'] = this.elementstyle;
 data['style'] = this.style;
 data['clock'] = this.generateClock(); // Our custom methodvar sHTML = this.tpl.render(data);
 // beforerender event which the developer can hook ontoif(this.events && this.events.beforerender) this.events.beforerender(this);
 if(this.events && this.events.beforeRender) this.events.beforeRender(this);
 $("#" + this.renderTo).append(sHTML);
 // afterrender event which the developer can hook ontoif(this.events && this.events.afterrender) this.events.afterrender(this);
 if(this.events && this.events.afterRender) this.events.afterRender(this);
 this.rendered = true;
 },
 generateClock: function()
 {
 var d = new Date();
 var ampm;
 var time;
 var hours = d.getHours();
 var minutes = d.getMinutes();
 if(hours <12)
 {
 ampm = "AM";
 }
 else {
 ampm = "PM";
 }
 if(this.twelvehour)
 {
 if(hours == 0)
 {
 hours = 12;
 }
 if(hours> 12)
 {
 hours = hours - 12;
 }
 }
 if(minutes.length == 1)
 {
 minutes = "0" + minutes;
 }
 if(this.twelvehour)
 {
 time = hours + ":" + minutes + "" + ampm;
 }
 else {
 time = hours + ":" + minutes;
 }
 delete d;
 return time;
 },
 setTwelveHour: function()
 {
 this.twelvehour = true;
 idev.dom('#' + this.id).html(this.generateClock());
 },
 setTwentyFourHour: function()
 {
 this.twelvehour = false;
 idev.dom('#' + this.id).html(this.generateClock());
 }
});

现在我们有 2个事件,afterRenderbeforeRender,我们有 2定制方法,开发者可以调用它们,setTwelveHoursetTwentyFourHour

完成触摸

最后,让我们将这个 register 作为iDevUI的小部件,并添加我们的CSS样式。

idev.ux.widgetExample = baseWidget.extend(
{
 init: function(config)
 {
 this._super(config); // Required by iDevUIthis.wtype = "example"; // The wtype for the widgetthis.twelvehour = config.twelvehour || false;
 this.tpl = new idev.wTemplate(
 "<div id='{id}' class='ui-example' style='{elementstyle}{style}'>",
 "{clock}",
 "</div>" );
 },
 render: function()
 {
 if (this.renderTo == null) return; // If there is nowhere to render our widget, don't render it!var data = new Array();
 data['id'] = this.id;
 data['width'] = this.width;
 data['height'] = this.height;
 data['elementstyle'] = this.elementstyle;
 data['style'] = this.style;
 data['clock'] = this.generateClock(); // Our custom methodvar sHTML = this.tpl.render(data);
 // beforerender event which the developer can hook ontoif(this.events && this.events.beforerender) this.events.beforerender(this);
 if(this.events && this.events.beforeRender) this.events.beforeRender(this);
 $("#" + this.renderTo).append(sHTML);
 // afterrender event which the developer can hook ontoif(this.events && this.events.afterrender) this.events.afterrender(this);
 if(this.events && this.events.afterRender) this.events.afterRender(this);
 this.rendered = true;
 },
 generateClock: function()
 {
 var d = new Date();
 var ampm;
 var time;
 var hours = d.getHours();
 var minutes = d.getMinutes();
 if(hours <12)
 {
 ampm = "AM";
 }
 else {
 ampm = "PM";
 }
 if(this.twelvehour)
 {
 if(hours == 0)
 {
 hours = 12;
 }
 if(hours> 12)
 {
 hours = hours - 12;
 }
 }
 if(minutes.length == 1)
 {
 minutes = "0" + minutes;
 }
 if(this.twelvehour)
 {
 time = hours + ":" + minutes + "" + ampm;
 }
 else {
 time = hours + ":" + minutes;
 }
 delete d;
 return time;
 },
 setTwelveHour: function()
 {
 this.twelvehour = true;
 idev.dom('#' + this.id).html(this.generateClock());
 },
 setTwentyFourHour: function()
 {
 this.twelvehour = false;
 idev.dom('#' + this.id).html(this.generateClock());
 }
});
idev.ux.loadCSS("examplewidget/examplewidget.css");
idev.register("example",idev.ux.widgetExample);
.ui-example {
 border: 2px dashed red;}

我们完成了我们有一个完整的工作小部件。 显然这只是一个例子,时钟只显示渲染的时间,不会每分钟更新一次。

使用小部件

现在我将向你展示开发人员如何使用你的小部件。

首先他们必须从( 称为小部件) 文件夹下载你的小部件文件夹并把它放在文件夹中。 然后他们必须更新他们的首选项( 用我们上面的方法)。

现在他们可以打开 js/app。js并将你的小部件添加到页面:

{
 wtype: 'example',
 twelvehour: true}
{
 wtype: 'example',
 events:{
 beforerender: function(wgt){
 wgt.setTwelveHour();
 }
 }
}

结束语

这是在iDevUI中创建新定制部件的强大方法,允许你为iDevUI开发人员创建令人惊奇的新。


IDE  wid  Widget  
相关文章