ABP官方文档(三十八)【Notification,Message,UIBlockBusy...】

6.6 ABP表现层 - Notification

6.6.3.1 Javascript Notification API

当一些事情发生的时候，我们喜欢显示一些别致的能够自动消失的通知，例如，当某个记录被保存或者某个问题发生的时候。ABP定义了标准的API实现了该功能。

abp.notify.success('a message text','optional title');
abp.notify.info('a message text','optional title');
abp.notify.warn('a message text','optional title');
abp.notify.error('a message text','optional title');

作为通知库的 自定义选项，它也能够取得第3个参数(对象)。

通知API默认是使用toastr库实现的。要使toastr生效，你应该引用toastr的css和javascript文件，然后再在页面中包含abp.toastr.js作为适配器。一个toastr成功通知如下所示：

你也可以用你最喜欢的通知库实现通知。只需要在自定义javascript文件中重写所有的函数，然后把它添加到页面中而不是abp.toastr.js中(你可以检查该文件看它是否实现，这个相当简单)。

6.6 ABP表现层 - Message

6.6.4.1 简介

消息API被用来向用户显示一个消息或者从用户那里得到一个确认。

消息API默认实现方式是使用了sweetalert库。使用时你需要引用sweetalert的样式和js，然后把 abp.sweet-alert.js 作为适配器包含到你的页面中。

6.6.4.2 显示消息

如下所示：

abp.message.info('some info message','some optional title');
abp.message.success('some success message','some optional title');
abp.message.warn('some warning message','some optional title');
abp.message.error('some error message','some optional title');

成功的消息框显示如下:

6.6.4.3 Confirmation对话框

如下所示：

abp.message.confirm(
    'User admin will be deleted.',//确认提示
    'Are you sure?',//确认提示（可选参数）
    function (isConfirmed) {
        if (isConfirmed) {
            //...delete user 点击确认后执行
        }
    }
);

第二个参数(标题)是可选的(所以，回调函数可以作为第二个参数)。

确认消息框显示如下：

ABP在内部使用了消息API，例如：如果某个AJAX调用失败，那么它会调用abp.message.error。

6.6 ABP表现层 - Javascript UI Block & Busy API

ABP提供了有用的API，使整个页面或者页面的某个部分被遮罩层覆盖实现阻塞或者繁忙指示(使用加载图标表示繁忙)。

6.6.4.1 UI Block API

这个API使用一个透明的遮罩层(透明度可调节)来遮住整个页面或者该页面的某个元素。因此用户不能够点击。当你保存表单或者加载某个区域时(某个层或者整个页面)，这是相当有用的。

如下所示：

abp.ui.block(); //遮住整个页面
abp.ui.block($('#Mydivelement')); //遮罩某个元素，在这里可以使用jQuery选择器选择元素..
abp.ui.block('#Mydivelement'); //..或者直接指定元素
abp.ui.unblock(); //解除遮罩
abp.ui.unblock('#Mydivelement'); //对指定元素解除遮罩

UI Block API 默认是使用jQuery插件block UI来实现的。为了能正常运行，你需要引用脚本文件，然后包含 abp.blockUI.js 文件作为适配器到你的页面中。

6.6.4.1 UI Busy API

该API被用来指示某些页面或者元素正在忙碌(加载)。例如：当你提交表单数据到服务器的时候，你可能想要遮罩这个表单并显示一个忙碌的指示器。

如下所示：

abp.ui.setBusy('#MyLoginForm');
abp.ui.clearBusy('#MyLoginForm');

参数应该是一个jQuery选择器(如：#MyLoginForm)或者jQuery对象(如：$(‘#MyLoginForm’))。为了使整个页面都是在繁忙状态，你应该传递null或者body作为选择器。

setBusy函数能够传入一个promise(作为第二个参数)并且自动的清除busy，当该promise完成的时候。如下所示：

abp.ui.setBusy(
    $('#MyLoginForm'),abp.ajax({ ... })   
);

由于abp.ajax返回的是promise，所以我们能直接使用它作为参数。如果你想了解更多关于promise的资料，请查阅jQuery的Deferred。setBusy对Q提供支持(以及angulars的$http服务)。

UI Busy API 使用spin.js实现的。为使其正常运行，你应该引用该脚本文件，然后在你的页面中包含 abp.spin.js 作为适配器。

6.6 ABP表现层 - 事件总线

6.6.6.1 简介

Pub/Sub 事件模型被广泛的应用在客户端。ABP包含了一个 简单的全局事件总线 用来注册事件并且触发事件。

6.6.6.2 注册事件

你可以使用 abp.event.on 来 注册 一个 全局事件 。示例如下：

abp.event.on('itemAddedToBasket',function (item) {
    console.log(item.name + ' is added to basket!');
});

第一个参数是 该事件的唯一名称。另一个参数是 回调函数，当指定的事件被触发后将调用该参数。

你可以使用 abp.event.off 方法来 卸载 已注册的事件。
注意：为了能够卸载指定的事件，应该提供相同的事件函数。
正如上面的示例所展示的，你应该将回调函数设置为一个变量，然后在 on和off 中使用它。

6.6.6.3 触发事件

abp.event.trigger 被用来触发全局事件。触发一个已注册的事件的代码如下：

abp.event.trigger('itemAddedToBasket',{
    id: 42,name: 'Acme Light MousePad'
});

第一个参数是 该事件的唯一名称。第二个是(可选的)事件参数。你可以添加任何数量的参数，并且在回调方法中获得它们。

6.6 ABP表现层 - Javascript 日志 API

6.6.7.1 简介

当你想要在客户端写一些简单的日志的时候，你可以使用 console.log(‘…’) API。但是，它不是所有的浏览器都支持该API，并且该函数也可能破坏你的脚本。所以，在使用的时候你首先应该检查console是否有效。还有，你可能想在其它地方写日志。甚至你可能对写日志的等级也有要求。ABP定义了安全的日志函数：

abp.log.debug('...');
abp.log.info('...');
abp.log.warn('...');
abp.log.error('...');
abp.log.fatal('...');

你可以通过设置 abp.log.level 对 abp.log.levels 中的某个日志等级进行更改(例如：abp.log.levels.INFO 不会记录调试日志)。这些函数默认将日志记录到了浏览器的控制台里了。但如果你需要的话，你也可以重写或者扩展这个行为。

6.6 ABP表现层 - 其他工具函数

ABP提供了一些通用的工具函数。

6.6.8.1 abp.utils.createNamespace

用于创建更深的命名空间。假设我们有一个基命名空间 abp，然后想要创建或者获得 abp.utils.strings.formatting 命名空间。不需要像下面这样写：

//创建或获得namespace
abp.utils = abp.utils || {};
abp.utils.strings = abp.utils.strings || {};
abp.utils.strings.formatting = abp.utils.strings.formatting || {};

//给该namespace添加一个function
abp.utils.strings.formatting.format = function() { ... };

我们可以这样写：

var formatting = abp.utils.createNamespace(abp,'utils.strings.formatting');

//给该namespace添加一个function
formatting.format = function() { ... };

这样即安全又简单的创建了更深层次的命名空间。注意，第一个参数是必须存在的根命名空间。

6.6.8.2 abp.utils.formatString

近似于C#中的string.Format()方法。示例如下：

var str = abp.utils.formatString('Hello {0}!','World'); //str = 'Hello World!'
var str = abp.utils.formatString('{0} number is {1}.','Secret',42); //str = 'Secret number is 42'