Shulou(Shulou.com)06/03 Report--

The process function of Actviti is already very powerful, but the part of its form is still weak, so in the following articles, we will gradually strengthen this piece through some open source and commercial UI tools. Although the forms in the process approval need to interact with the data of the third party, in my opinion, these are the data models carried by the process, which do not have to be too complicated. The process instance only needs to manage the process instance data associated with itself, and the source and interaction of these data only need to be executed by the data model of the process. This effectively divides the responsibilities of the process definition and the data of the form, while the approved form is displayed by the UI layer combined with the data model of the process. In this article, we do not intend to discuss and analyze the implementation of this function, this article is only about how to customize the UI of data online, that is, how to define the form.

With regard to the display of forms, there are more UI frameworks on the market, including open source and commercial ones. This article only discusses the MiniUI I recently adopted on a project, this framework is still quite good, its principle is to transform html with MINI-UI-style controls, this article focuses on how to customize mini controls in UEditor.

Although the UEditor function is already very powerful, but sometimes we still need to develop our own plug-ins, today we have time to do it ourselves, found that it is quite simple, students in need can refer to, I use the UEditor version is 1.4.3.

Step one

Add the form-design folder under ueditor, as follows:

At the same time, add design-plugin.js, add the config directory to place the property page of the development control, and the button icon and style of the toolbar under the css. In this example, we place the textfield.png icon in the directory images and define the style under toolbars.css, such as

Html code

.textfield {

Background: url (images/textfield.png) no-repeat

}

Step two

In order not to affect the old ueditor, copy the ueditor.all.js file to ueditor-fd.all.js, copy the ueditor.config.js file, and rename it to ueditor-fd-config.js

Step three

In the parameter toolbars in ueditor-fd-config.js, add a string min-textbox and a new labelMap for

Move the mouse in to display a description of the control. As follows:

, toolbars: [., print', 'preview',' searchreplace', 'help' / /,' drafts' load / / add custom button from draft box, 'mini-textbox']]

Find the btnCmds array of ueditor-fd.all.js under the ueditor folder and add the string 'mini-textbox'

When you refresh the page, you can add a button after the help button, but the icon of the button shows B (default style).

Html code

.edui-for-mini-textbox. Edui-icon {

Background-position:-200px-40px

}

Then define the style icon of the buttons on the toolbar. Go to ueditor.css under the default folder under the themes folder under the ueditor folder, and add the following css at the end of the file: in this example, we define the buttons on these toolbars outside the Ueditor, so step 4 can be omitted in this step

Register our plug-in in UEditor, add design-plugin.js to the form-design directory, and write the following code

Js code

/ / basic directory

UE.FormDesignBaseUrl = 'form-design'

/ / text controller

UE.plugins ['mini-textbox'] = function () {

Var me = this,thePlugins = 'mini-textbox'

Me.commands [thePlugins] = {

ExecCommand:function () {

Var dialog = new UE.ui.Dialog ({

IframeUrl:this.options.UEDITOR_HOME_URL + UE.FormDesignBaseUrl+'/config/mini-textbox.html'

Name:thePlugins

Editor:this

Title: 'text box'

C***ules: "width:600px;height:380px;"

Buttons: [

{

ClassName:'edui-okbutton'

Label:' determines'

Onclick:function () {

Dialog.close (true)

}

}

{

ClassName:'edui-cancelbutton'

Label:' cancel'

Onclick:function () {

Dialog.close (false)

}

}]

});

Dialog.render ()

Dialog.open ()

}

}

Var popup = new baidu.editor.ui.Popup ({

Editor:this

Content:''

ClassName: 'edui-bubble'

_ edittext: function () {

Baidu.editor.plugins [the Plugins] .editdom = popup.anchorEl

Me.execCommand (thePlugins)

This.hide ()

}

_ delete:function () {

If (window.confirm ('confirm to delete this control?') ) {

Baidu.editor.dom.domUtils.remove (this.anchorEl,false)

}

This.hide ()

}

})

Popup.render ()

Me.addListener ('mouseover', function (t, evt) {

Evt = evt | | window.event

Var el = evt.target | | evt.srcElement

Var leipiPlugins = el.getAttribute ('plugins')

If (/ input/ig.test (el.tagName) & & leipiPlugins==thePlugins) {

Var html = popup.formatHtml (

'text box: edit delete')

If (html) {

Popup.getDom ('content') [xss_clean] = html

Popup.anchorEl = el

Popup.showAnchor (popup.anchorEl)

} else {

Popup.hide ()

}

}

});

}

One of the places above is that when using the plug-in, an edit box will pop up to edit our custom properties, which is the code definition of config/mini-textbox.html, as follows:

Html code

MINI-TextField

Text box basic properties

Field Properties *

Required *

Yes

Function createElement (type, name) {

Var element = null

Try {

Element = document.createElement ('')

} catch (e) {}

If (element==null) {

Element = document.createElement (type)

Element.name = name

}

Return element

}

Mini.parse ()

Var form=new mini.Form ('miniForm')

/ / the value of the edited control

Var oNode = null

ThePlugins = 'mini-textbox'

_ window.onload = function () {

/ / if the control already exists, set the callback value

If (UE.plugins [thePlugins] .editdom) {

/ /

ONode = UE.plugins [the Plugins] .editdom

/ / get the field name

Var name = oNode.getAttribute ('name')

Var isRequried=oNode.getAttribute ("required")

Mini.get ('name') .setValue (name)

Mini.get ('isRequired') .setValue (isRequried)

}

}

/ / cancel button

Dialog.oncancel = function () {

If (UE.plugins [thePlugins] .editdom) {

Delete UE.plugins[thePlugins] .editdom

}

}

/ / confirm

Dialog.onok = function () {

Form.validate ()

If (form.isValid ()) = = false) {

Return false

}

Var name=mini.get ('name') .getValue ()

Var isRequired=mini.get ('isRequired') .getValue ()

/ / if the control does not exist, create a new control, otherwise update it

If (! oNode) {

Try {

ONode = createElement ('input',name)

ONode.setAttribute ('type','text')

ONode.setAttribute ('class','mini-textbox')

ONode.setAttribute ('required',isRequired)

/ / this property needs to be set, otherwise there is no way to edit and delete the pop-up menu

ONode.setAttribute ('plugins',thePlugins)

Editor.execCommand ('insertHtml',oNode.outerHTML)

} catch (e) {

Try {

Editor.execCommand ('error')

} catch (e) {

Alert ('control exception, please contact technical support')

}

Return false

}

} else {/ / already exists, then update the property can

ONode.setAttribute ('title', name)

ONode.setAttribute ('required', isRequired)

Delete UE.plugins[thePlugins] .editdom

}

}

Step 5:

An example of using the form designer on the page, the code is as follows:

Html code

Control customization of MiniUI

Form designer example

Text control

Description:

Example of a text control in the form designer

Mini.parse ()

Var designer = UE.getEditor ('designer')

Schematic diagram:

The generated html code is:

For more control properties, please add.

Understanding and consultation: 1361783075

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.