[UMF] Customizing ElementView and the Shape

Step 1: Implement a IElement and extends associated view components

프로세스 모델러의 경우인 Activity, ActivityView, ActivityView.ejs.js 를 예제로 보자

Activity.java

public abstract class Activity implements IElement, Validatable, java.io.Serializable, Cloneable, ContextAware, IIntegrityElement{
...
}

ActivityView.java

public class ActivityView extends ElementView {
...
}

ActivityView.ejs

ActivityView 는 ElementView.ejs.js 를 상속한다.

var org_uengine_kernel_view_ActivityView = function(objectId, className){

	org_uengine_modeling_ElementView.apply(this, new Array(objectId, className));

    ... additional implementations goes here ....

}
extend(org_uengine_kernel_view_ActivityView, "org_uengine_modeling_ElementView");

Step2: Inserting custom code where you wish

예를 들어 ActivityView 의 왼쪽 상단에 아이콘 표시하기 Activity class 명으로된 png 이미지를 왼쪽 상단에 표시한다고 하면,

var org_uengine_kernel_view_ActivityView = function(objectId, className){

	org_uengine_modeling_ElementView.apply(this, new Array(objectId, className));

	var modeler = mw3.getAutowiredObject('org.uengine.modeling.Modeler');
	this.object.element.tracingTag = modeler.getFaceHelper().getTracingTag();


	//draw task image
	{
		var me = this.canvas._RENDERER, rElement = me._getREleById(OG.Util.isElement(this.element) ? this.element.id : this.element),
			geometry = rElement ? rElement.node.shape.geom : null,
			envelope, _upperLeft, _bBoxRect, _rect, _rect1,
			_size = me._CONFIG.COLLAPSE_SIZE,
			_hSize = _size / 2;

		_rect1 = me._getREleById(rElement.id + OG.Constants.TASKTYPE_SUFFIX);
		if (_rect1) {
			me._remove(_rect1);
		}

		envelope = geometry.getBoundary();
		_upperLeft = envelope.getUpperLeft();

		_rect1 = me._PAPER.image("resources/images/symbol/"+this.object.element.__className+".png", _upperLeft.x + 5, _upperLeft.y + 5, 20, 20);

		me._add(_rect1, rElement.id + OG.Constants.TASKTYPE_SUFFIX);
		_rect1.insertAfter(rElement);
		rElement.appendChild(_rect1);
	}
	//

}
extend(org_uengine_kernel_view_ActivityView, "org_uengine_modeling_ElementView");

Symbol.ejs

Symbol 에서도 액티비티 별 아이콘이 표시되어야 하므로, 아래와 같이 변경함.

<!--replace-->


<table id="objDiv_<%=objectId%>">
	<td width="50px">

		<img src="resources/images/symbol/<%=value.elementClassName%>.png" title="<%=value.name%>"
			 _shape_type="<%=value.shapeType%>"
			 _shape_id="<%=value.shapeId%>"
			 _width="<%=value.width%>"
			 _height="<%=value.height%>"
			 _viewclassname="<%=value.elementClassName%>"
			 <%if(value.iconResizing){%>height="30"<%}%> align="left" valign="middle"/>
	</td>
	<td width="10px"></td>
	<td>
		<a href="#" data-toggle="tooltip" data-original-title="Process" title=""><%=value.name%></a>
	</td>
</table>

위의 기능 테스트하기

DataInputActivity.java 가 있다고 가정한 이미지 명칭 및 경로

/project/uengine-custom/src/main/webapp/resources/images/symbol/com.abc.activitytype.DataInputActivity.png

이미지가 나타나지 않는 경우, 브라우저에서 다음 url을 확인한다

localhost:8080/resources/images/symbol/com.abc.activitytype.DataInputActivity.png

• web-context 가 '/' 라고 가정한 경우임.