# 控件创建说明
逻辑文件位置： `Softnation.Platform.Web/Controls` 控件分为 `ComplexControls` 和 `SimpleControls`
控件脚本位置： `Softnation.Web/script/Controls`
注释： `{{ControlsName}}为你要命名的控件名字`
## `ComplexControls` 创建规范
逻辑文件：
- {{ControlsName}}.cshtml
- {{ControlsName}}Config.cs
- {{ControlsName}}LayoutConfig.cs
- {{ControlsName}}Model.cs
逻辑文件示例代码：
### {{ControlsName}}.cshtml
~~~ cshtml
@using Softnation.Platform.Web.Controls.ComplexControls;
@using Softnation.Platform.Web.Pages;
@model {{ControlsName}}Model
@{
{{ControlsName}}LayoutConfig layoutConfig = Model.LayoutConfig;
var id = BuildId(Model.Config.Id);
var pageId = BuildCurrentPageId(id);
}
<div id="@pageId">
<!-- 这里实现控件的样式展示 -->
</div>
@{
<!-- 局部样式引入 -->
Page.RegisterCss("/css/without/bootstrap-datetimepicker");
<!-- 局部脚本引入 -->
Page.RegisterGlobalScript("script/without/bootstrap-datetimepicker");
<!-- 脚步引入，如果不需要脚步控制则忽略 -->
Page.RegisterControlModule("script/Controls/{{ControlsName}}", Model.RenderInitData(id));
}
~~~
### {{ControlsName}}Config.cs
~~~ C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Softnation.Platform.Web.Controls.ComplexControls
{
public class {{ControlsName}}Config : ComplexControlConfig<{{ControlsName}}LayoutConfig>
{
/// <summary>
/// 获取视图路径
/// </summary>
public override string ViewPath
{
get
{
return "Softnation.Platform.Web.Controls.ComplexControls.{{ControlsName}}";
}
}
/// <summary>
/// 创建model对象
/// </summary>
/// <returns>IControlModel.</returns>
public override IControlModel CreateModel()
{
return new {{ControlsName}}Model(this);
}
}
}
~~~
### {{ControlsName}}LayoutConfig.cs
~~~ C#
using Softnation.Common.ConfigUtility;
using Softnation.Platform.Web.Pages;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Xml;
using System.Xml.Serialization;
namespace Softnation.Platform.Web.Controls.ComplexControls
{
public class {{ControlsName}}LayoutConfig : ControlLayoutConfigBase
{
public class Item : LayoutConfigBase, ILayoutSortingItem
{
public Item()
{
}
public int Index
{
get;
set;
}
public string Id
{
get;
set;
}
}
[XmlArray("item")]
public LayoutCollection<Item> {{ControlsName}}
{
get;
set;
}
}
}
~~~
### {{ControlsName}}Model.cs
~~~ C#
using Softnation.Common.Runtime;
using Softnation.Common.Serialization;
using Softnation.Platform.Web.Runtime;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Softnation.Platform.Web.Controls.ComplexControls
{
public class {{ControlsName}}Model : ComplexControlModel<{{ControlsName}}Config, {{ControlsName}}LayoutConfig>
{
/// <summary>
/// 设置控件配置对象
/// </summary>
/// <param name="config">控件的配置对象</param>
public {{ControlsName}}Model({{ControlsName}}Config config)
: base(config)
{
}
public string DefaultTabId
{
get;
set;
}
/// <summary>
/// 写入初始数据
/// </summary>
/// <param name="writer">The writer.</param>
protected override void WriteInitData(IJsonWriter writer)
{
}
}
}
~~~
## `SimpleControls` 创建规范
逻辑文件：
- {{ControlsName}}.cshtml
- {{ControlsName}}Config.cs
- {{ControlsName}}Model.cs
逻辑文件示例代码: `SimpleControls` 与 `ComplexControls` 除了 `{{ControlsName}}LayoutConfig.cs` 其他一样，参考相应的简单控件实现即可
简单控件脚本必须脚本： `Softnation.Web/script/Controls/SimpleControls.ts`
### SimpleControls.ts
~~~ ts
// 在已操作的 create 方法添加新控件，并新建 控件类
export function create(page, initData): Rb.UI.Control.SimpleControl {
var type;
switch (initData.name) {
case "comboTree":
type = ComboTree;
break;
...
}
// 为
export class ControlsName extends Rb.UI.Control.TextSimpleControl {
protected _selectContent: JQuery;
protected _jLis: JQuery;
protected _popup: Rb.UI.Dialogs.Popup;
protected _jInput: JQuery;
private _searchExecution: Rb.Utility.DeferredExecution = new Rb.Utility.DeferredExecution();
protected _valueField: string;
protected _textField: string;
protected _searchField: string;
protected _dataId: string;
protected _alwaysUpdate: boolean;
protected _data: Array<any>;
protected _placeholder: string;
protected _emptyDataDiv: JQuery;
convertToText(val: any) {
if (val || val === 0) {
if (!this._data || this._alwaysUpdate) {
this.loadData();
}
var index = this._data.indexOfForProperty(this._valueField, val);
if (index >= 0) {
return this._data[index][this._textField];
}
return val;
}
}
/**
* 设置数据源
* @param data 数组
*/
setData(id: string);
setData(data: Array<any>);
setData(data: any) {
this._jLis = null;
if (data) {
if (typeof (data) == "string") {
this._dataId = data;
this._data = null;
}
else {
// 对数据进行排序
var item, searchField = this._searchField, textFeild = this._textField, searchValue, value;
this._data = data;
}
}
else {
this._data = [];
}
}
protected loadData() {
if (this._dataId) {
this.page.getData({
id: this._dataId,
mode: Rb.Data.DataModeEnum.singleTable,
context: this
}, true).done((data) => {
var data1 = this.initData.data.data;
if (data1 && data1.length > 0) {
if (data && data.length > 0) {
data = (<Array<any>>data1).concat(data);
}
else {
data = data1;
}
}
this.setData(data);
});
}
else {
this.setData(this.initData.data.data);
}
}
protected get focusDom(): JQuery {
// 获取焦点得控件
return this._jInput;
}
protected initialize() {
super.initialize();
var data = this.initData.data;
if (data) {
this._valueField = data.valueField;
this._textField = data.textField;
this._searchField = data.searchField;
this._dataId = data.id;
this._alwaysUpdate = data.alwaysUpdate;
}
this._placeholder = "请选择";
}
protected bindEvent() {
super.bindEvent();
}
protected updateShowValue(val: any, text?: string) {
// this._jInput.val(text); 输出
var nowText;
if (val || val === 0) {
if (text) {
this._jInput.val(text);
return;
}
if (this._data || this._alwaysUpdate) {
this.loadData();
}
var data = this._data;
var index = data && data.indexOfForProperty(this._valueField, val);
if (index >= 0) {
nowText = data[index][this._textField];
this._jInput.val(nowText);
}
}
else {
this._jInput.val(text);
nowText = "";
}
if (nowText != text) {
this.updateText(text);
}
}
protected convertValue(val): any {
return val;
}
protected updateFocusState() {
this.jDom.addClass("active");
}
protected updateBlurState() {
this._jInput.blur();
this.jDom.removeClass("active");
}
protected toggleReadonly(readonly: boolean) {
if (readonly) {
this._jInput.removeAttr("placeholder");
this._jInput.attr("readonly", "readonly");
this.jDom.addClass("readonly");
}
else {
this._jInput.attr("placeholder", this._placeholder);
this._jInput.removeAttr("readonly");
this.jDom.removeClass("readonly");
}
}
}
~~~
## 效果预览
1. 对 Softnation.Platform.Web 进行编译；把 Softnation.Web 下的 bin 文件夹 复制覆盖到要做预览的项目中
2. 修改 预览项目 下的 \Softnation.Web\App_Data\control.config 文件，根据你创建的控件类型添加如下语句：`<control name="{{ControlsName}}" type="Softnation.Platform.Web.Controls.ComplexControls.{{ControlsName}}Config" />`
3. 在对应的 page 文件下使用：
~~~ xml
<ControlsName id="toolbar">
<layout>
<item id="toolbar1"> </item>
</layout>
</ControlsName>
~~~
## 控件的分发与发布
1. 对平台源码签入： `tfs\平台项目\$\平台3.5.1\Source\Erp\Softnation.Platform.Erp.sln`
2. 对平台源码编译，在 Softnation.Web 下的 bin 文件夹生成，把 bin 文件夹 和 资源文件夹（图片、脚步、样式） 拷贝到 平台模版项目 ： `tfs\新平台项目\$\\项目代码模板\Source-3.5.1\Softnation.Template.sln`
3. 在 源代码管理器 中，对 平台模版项目 进行 分支与合并 -> 合并 操作， 选择当前开发的分支，同步即可
- 介绍
- 开发规范
- SAAS部署说明
- 移动端部署说明
- SAAS后台使用说明
- 代码编写规范
- 框架开发规范
- 移动端Web开发注意事项
- 后端平台使用文档
- 平台环境搭建
- 控件创建说明
- 平台控件使用说明
- Flex Flex布局控件
- comboTree 组合树控件
- 应用列表
- Middleground 源钉云中台前端
- IndexCustomize 钉钉工作台主页定制
- ContractManagement 合同管理
- 组件使用文档
- General
- YdyIcon 图标
- Navigation
- YdySiderMenu 侧面菜单
- YdyTabBar 标签栏
- Data Entry
- YdyForm 表单
- YdyDatePicker 时间选择器
- YdyPicker 单项选择器
- YdyImagePicker 图片选择器
- Data Display
- YdyScrollView 滚动视图
- YdyListView 列表视图
- Feedback
- YdyFallbackView 异常视图
- Other
- YdyHeader 页头
- YdyMainLayout 主布局
- 公共服务使用文档
- DingTalk 钉钉移动端API
- Service 核心服务
- HttpService http服务
- 问题反馈与汇总
- Bug修复汇总
- 问题汇总
- IIS搭建