README

angular-ocDialog

基于Angular的窗体应用框架

项目状态

综合情况

综合案例，实际正在开发的项目 Demo: http://probedemo.or-change.cn/probe 托管地址: https://git.oschina.net/increase/LemonProbe.git

Version（版本）: 0.5.1 Alpha 1
Author（作者）: Chao Li, Weilin Shi, Yueyu Li
License（许可）: MIT
Supported Browsers（支持的浏览器）: Chrome,Firefox,Safari,Opera,IE 9+,iOS Safari 7.1+,Android Browser 2.3+
Document（文档）: 有标题的功能已经实现，但文档仍在努力完善

submodules（子模块）:

ocCore - 图形操作动作库: http://git.oschina.net/increase/angular-ocCore

快速开始

通过快速开始，您将了解到使用本框架的基本流程。如果需要看看效果，可以访问test/debugger.html文件，里面含有一些不完整的例子。关于更加综合的应用案例，欢迎大家了解我们团队关于WEB自动化测试的项目Lemonce - LemonProbe。相关地址见综合情况。

另外，Lemonce v0.6.4 Alpha 1版本目前停止更新，Alpha 2正在紧张研发，感兴趣的朋友仍然可以通过访问： (http://www.lemonce.net/) 来了解我们Alpha 1的产品

安装

引用脚本资源以及样式资源，注意需要加载ocCore的资源，项目地址见 项目状态 > 子模块

<script src="./ocCore_Path/dist/ocCore[.min].js"></script>
<script src="./ocDialog_Path/dist/ocDialog[.min].js"></script>
<link rel="stylesheet" src="./ocDialog_Path/dist/style.css" />

配置

angular.module("YourApp", ['oc-dialog'])
    .config(function (ocDialogProvider) {
        ...
    
        // 配置窗体资源的路由
        ocDialogProvider.config("ROUTE_PATH", "./src/dialog/");
        // 窗体的基准z-index值
        ocDialogProvider.config("BASE_Z_INDEX", 500);
        
        ...
    });

指令 - Directive

ocDialogOpen - 根据配置打开窗口

as attribute:

<ANY
    oc-dialog-open="">
...
</ANY>

使用指令方式打开窗体会自动阻塞父窗体（如果存在父窗体的话）。

例如

根据配置打开一个Dialog：

<script>
yourAppModule.controller('OpenDialog', function ($scope) {
    $scope.myDialog = {
        name: "dialogFactoryName",
        share: function () {
            return {
                data: "定义要和被打开窗体共享的数据",
                ...
            };
        }
    }
});.controller('MyDialog', function ($scope, $element, ocDialog) {
    var DI = ocDialog.queryDI($element); //根据控制器所在的dom查询所在的dialog实例对象
    console.log(DI.share); //访问共享数据
    
    ...... other statements;
});
</script>
<div ng-controller="OpenDialog">
    <button oc-dialog-open="myDialog"></button>
</div>

myDialog.html

<oc-dialog>
    <div ng-controller="MyDialog"></div>
</oc-dialog>

ocDialogSizeMode - 切换窗体最大化和普通

ocDialogClose - 关闭窗口

as attribute:

<ANY
    oc-dialog-close>
...
</ANY>

自动查询该指令最近的窗体并关闭。

例如

myDialog.html

<oc-dialog>
    <div ng-controller="MyDialog">
        <button oc-dialog-close>取消</button>
    </div>
</oc-dialog>

ocAlertOpen - 打开警告窗口

as attribute:

<ANY
    oc-alert-open="">
...
</ANY>

ocFileOpen - 打开文件列表窗口

as attribute:

<ANY
    oc-file-open="">
...
</ANY>

服务 - Service

ocDialog.queryDI(element) - 根据一个HTMLElement查询其所在的Dialog实例

ocDialog.getNewDI(dialogFactoryName) - 根据Dialog工厂名获取一个Dialog实例

ocDialog.alert(options) - 生成一个alertDialog实例并打开

ocDialog.file(options) - 生成一个fileDialog实例并打开

设计窗体

使用ocDialog可以自定义一个指令

ocDialog

定义一个最简单的没有内容窗体：

<oc-dialog></oc-dialog>

ocDialogTitle - 窗体标题

这个属性会影响到窗体的标题栏内容，值作为直接量读取：

<oc-dialog oc-dialog-title="The title of myDialog"></oc-dialog>

ocDialogIcon - 窗体标志Class

这个属性会影响到窗体左上角的图标区的class，配合自定义的css样式可以设定这个区域的样式：

<oc-dialog oc-dialog-icon="lemoncelogo"></oc-dialog>

ocDialogSwitch - 窗体开关配置

这个属性用于隐藏右上角的按钮，M隐藏最小化按钮，S隐藏尺寸模式按钮：

<oc-dialog oc-dialog-switch="MS"></oc-dialog>

编码过程

根据配置的情况，在项目路径下 src/dialog/ 目录内创建窗口定义welcome.html。创建定义一个简单的登陆窗口，窗体的布局方式参见emGrid：

<oc-dialog  style="width:10.2rem;height:6rem" oc-dialog-title="登陆窗口" oc-dialog-switch="MS">
    <div class="grid" ng-controller="Login">
        <label style="top:0rem;left:0.3rem;">输入令牌：</label>
        <input type="text" style="top:1.3rem;left:0.3rem;width:16em;">
        <button oc-dialog-open="main"
            style="right:0.3rem;bottom:0.3rem;height:1.4rem;width:4.3rem">取消</button>
    </div>
</oc-dialog>

在html中编写一个HTML元素来打开该窗体，引入的脚本资源除了Angular以外还包括安装中所提到的。应用的引导文件典型的如下：

<!DOCTYPE html>
<html ng-app="probe" ng-controller="Global" style="font-size: 20px;">
    <head>
        <meta charset="utf-8" />
        <script src="[yourPath]/angular.min.js"></script>
        <!-- 《安装》一节所需要引用的资源 -->
    </head>
    <body>
        <a oc-dialog-open="welcomeDialog">打开欢迎登陆窗口</a>
    </body>
</html>

使用了名为Global的控制器，主要提供打开welcome窗口的配置：

youApp.controller('Global', function ($scope) {
    $scope.welcomeDialog = {
        name: 'welcome'
    };
});

运行应用，点击打开欢迎登陆窗口按钮，打开了之前定义的窗口。除此之外，可以继续点击该按钮无限打开welcome窗体工厂创建的窗体实例。

emGrid

支持全局缩放的2D窗体布局方法，该特性用于支持rem单位的浏览器上

元件

模仿常用的操作系统窗体编程的控件抽象的控件集合

工具栏

操作柄

按钮 / 输入框

位于Dialog内部的<button>, <input>都会受到影响

ocAddress - 地址栏

操作页面中某个iframe的控件

ocListMenu - 列表菜单

仿Windows 10 经典模式的列表菜单

ocTabs - 选项卡

仿Windows 8/10 样式的选项卡控件，可以使用一个控制对象来从外部控制tab控件的行为和状态。

用法

as Element:

<oc-tab-set oc-tab-contro="...">
    <oc-tab oc-tab-title="..." oc-tab-active-fn="...">...</oc-tab>
    ...
</oc-tab-set>

例如

简单地用指令实现一个ocTab控件，控件的尺寸直接在ocTabSet指令内定义：

<oc-tab-set style="width:20rem;height:20rem">
    <oc-tab oc-tab-title="Tab 0"></oc-tab>
    <oc-tab oc-tab-title="Tab 1"></oc-tab>
</oc-tab-set>

使用控制对象ocTabControl设定默认激活的tab选项卡，需要在ocTabSet控件所在的$scope下定义一个对象，（例如 tabControl)。 ocTabControl会将对象反射到ocTabSet的Scope中。通过该控制对象，可以设置/获取当前被选中的选项卡序号；通过访问$tabs对象可以设定某个选项卡是否被禁用。

例，使用控制对象默认激活 第1个 选项卡，设定 第0个 选项卡禁用，并能够用外部方式激活 第2个 选项卡。

<script>
yourAppModule.controller('TabDemo', function ($scope) {
    $scope.tabControl = {
        selected: 1
    };
    
    $scope.toDisable = function (index) {
        $scope.tabControl.selected = index;
    }
    
    $scope.activeTab = function (index) {
        $scope.tabControl.$tabs[index].isDisabled = true;
    }
    
});
</script>
<div ng-controller="TabDemo">
    <button ng-click="toDisable(0)">设置第0个选项卡禁用</button>
    <button ng-click="activeTab(2)">设定第2个选项卡激活</button>
    <label>当前激活的选项卡序号</label>
    <input ng-model="tabControl.selected" />
    <oc-tab-set oc-tab-control="tabControl" style="width:20rem;height:20rem">
        <oc-tab oc-tab-title="Tab 0">tab 0</oc-tab>
        <oc-tab oc-tab-title="Tab 1">tab 1</oc-tab>
        <oc-tab oc-tab-title="Tab 2">tab 2</oc-tab>
    </oc-tab-set>
</div>

如果需要在某个选项卡激活的时候执行一个过程，则可以使用ocTab指令上的ocTabActiveFn绑定一个方法。

<script>
yourAppModule.controller('TabDemo', function ($scope) {
    
    $scope.activeFn = function () {
        console.log('hello, world.');
    }
    
});
</script>
<div ng-controller="TabDemo">
    <oc-tab-set oc-tab-control="tabControl" style="width:20rem;height:20rem">
        <oc-tab oc-tab-title="Tab 0" oc-tab-active-fn="activeFn">tab 0</oc-tab>
        <oc-tab oc-tab-title="Tab 1">tab 1</oc-tab>
        <oc-tab oc-tab-title="Tab 2">tab 2</oc-tab>
    </oc-tab-set>
</div>

以上例子，每当选项卡0被激活，都会调用一次activeFn方法。

ocGrid - 矩阵表格

类似Excel的二维数组处理控件。主要将类似：

[
    ['one', 'two', 'three'],
    ['foo', 'bar', 'baz'],
    ['duang', 'duang', 'duang'],
    ['1', '2', '3'],
    ['infantry', 'artillery', 'horse'],
    ['land', 'air', 'navy'],
    ['魏', '蜀', '吴'],
    ['1st', '2nd', '3rd'],
    ['幽州', '并州', '冀州'],
    ['青州', '兖州', '豫州'],
    ['徐州', '雍州', '凉州'],
    ['扬州', '荆州', '交州'],
    ['益州', '司隶', '淮南'],
    ...
]

这样的二维数组结构的数据以类似Excel的电子表格方式展现。

用法

as Element:

<oc-grid style="width:400px;height:500px"
    oc-grid-data="..."
    oc-grid-refresh="..."
    oc-grid-control="..."></oc-grid>

ocList - 数据列表

仿Windows文件列表的控件。主要将类似：

[
    { fileName: 'xxxx1', updateTime: 'yyyy-HH-dd', ... },
    { fileName: 'xxxx2', updateTime: 'yyyy-HH-dd', ... },
    { fileName: 'xxxx3', updateTime: 'yyyy-HH-dd', ... },
    { fileName: 'xxxx4', updateTime: 'yyyy-HH-dd', ... },
    ...
]

这样的数据用列表的形式展现。

用法

as Element:

<oc-list oc-list-data="..."
    oc-list-control="..."></oc-list>

例如

简单的指定数据源，列标题会根据列表中第一个数据对象的key自动生成，默认宽度120px：

<script>
yourAppModule.controller('listDemo', function ($scope) {
    $scope.listData = [
        { fileName: 'xxxx1', updateTime: '2001-04-21' },
        { fileName: 'xxxx2', updateTime: '2001-04-22' },
        { fileName: 'xxxx3', updateTime: '2001-04-23' },
        { fileName: 'xxxx4', updateTime: '2001-04-24' }
    ];
    
});
</script>
<div ng-controller="listDemo">
    <oc-list oc-list-data="listData"></oc-list>
</div>

通过使用控制对象，可以用外部方式控制ocList控件的行为。例如，设置/获取当前选中的项目序号，设置标题文本及宽度：

<script>
yourAppModule.controller('listDemo', function ($scope) {
    $scope.listData = [
        { fileName: 'xxxx1', updateTime: '2001-04-21' },
        { fileName: 'xxxx2', updateTime: '2001-04-22' },
        { fileName: 'xxxx3', updateTime: '2001-04-23' },
        { fileName: 'xxxx4', updateTime: '2001-04-24' }
    ];
    
    $scope.listCtrl = {
        selected: 2,
        header: [
            {
                key: 'fileName'
                text: "文件名",
                width: '70px'
            },
            {
                key: 'updateTime'
                text: "更新日期",
                width: '6em'
            }
        ]
    }
});
</script>
<div ng-controller="listDemo">
    <oc-list oc-list-data="listData" oc-list-control="listCtrl"></oc-list>
</div>

Usage no npm install needed!

README

angular-ocDialog

基于Angular的窗体应用框架

项目状态

综合情况

submodules（子模块）:

快速开始

安装

配置

指令 - Directive

ocDialogOpen - 根据配置打开窗口

例如

ocDialogSizeMode - 切换窗体最大化和普通

ocDialogClose - 关闭窗口

例如

ocAlertOpen - 打开警告窗口

ocFileOpen - 打开文件列表窗口

服务 - Service

ocDialog.queryDI(element) - 根据一个HTMLElement查询其所在的Dialog实例

ocDialog.getNewDI(dialogFactoryName) - 根据Dialog工厂名获取一个Dialog实例

ocDialog.alert(options) - 生成一个alertDialog实例并打开

ocDialog.file(options) - 生成一个fileDialog实例并打开

设计窗体

ocDialog

ocDialogTitle - 窗体标题

ocDialogIcon - 窗体标志Class

ocDialogSwitch - 窗体开关配置

编码过程

emGrid

元件

工具栏

操作柄

按钮 / 输入框

ocAddress - 地址栏

ocListMenu - 列表菜单

ocTabs - 选项卡

用法

例如

ocGrid - 矩阵表格

用法

ocList - 数据列表

用法

例如