| 구 분 |
내 용 |
|
메뉴영역에는 File / Edit / Objects / Link / Align 의 다섯가지 메뉴가 있습니다.
 File 메뉴 : 새로운 다이어그램을 만들거나(New), 기존 다이어그램을 오픈(Open), 작업중인
다이어그램을 저장(Save), 현재 화면을 이미지로 저장(Save as Image), 현재 화면을
프린트로 출력(Print) 등의 기능을 할 수 있는 메뉴입니다.
Edit 메뉴 : 작업중에 이동이나, 변경을 할 수 없도록 잠금기능(Editable Toggle) 이나 화면상의
전체 element 를 선택하는 기능(Select All), 현재 선택된 element의 삭제(Delete), 잘라내기(Cut),
복사하기(Copy), 붙여넣기(Paste) 등의 기능을 할 수 있는 메뉴입니다.
(참고: 현재 Undo 기능은 지원되지 않습니다.)
Objects 메뉴 : 이 메뉴는 화면상의 각 element들의 그룹핑이나(Grouping, Ungrouping), 겹쳐진
element들이 있을 경우 앞(To Front)/뒤(To Back)의 관계를 표시하기 위한 메뉴입니다.
Link 메뉴 : 각 node들간의 연결을 위해서 제공되는 선(link)은 점선(dashed-line), 직선(straight),
꺽임선(orthogonal, 90도 방향으로만 긋기), 곡선(curve) 이 제공됩니다. 각선의 끝은 화살표의
유무에 따라 단방향/양방향/무방향 등이 있습니다.
Align 메뉴 : 선택된 여러개체들의 정렬을 위한 메뉴로서 맞춤(왼쪽/오른쪽/위쪽/아래쪽/수평중앙,
수직중앙 등이 있으며, 가로 세로의 간격을 동일하게 하는 기능이 제공됩니다.
|
|
|
자주 사용되는 기능을 버튼으로 뽑아 신속히 처리 할 수 있도록 하였습니다. 제공되는 버튼은
마우스드래그에 대한 토글 : 판이동 혹은 그룹선택 (이 기능의 default를 Layout 파일에서
프로퍼티를 통해서도 설정할 수 있으며, Shift key + 마우스드래그 설정을 통해, Shift Key를
사용하실 수 있습니다.)
확대, 축소 : 이 기능은 버튼 클릭을 통해서도 지원되지만, Layout 파일에서 퍼로퍼티 설정을 통해
마우스 휠 시에 확대/축소가 될 수 있도록 설정할 수 있습니다.
1배율 보기 : 원래 제작된 원본 크기 그대로 표시됩니다.
화면에 맞추기 : 현재 화면의 크기에 맞추어서 전체가 표시되도록 합니다.
중앙으로이동 : 모든 element들이 화면의 정중앙을 중심으로 배치되도록 합니다.
선택된 element만 보기 : 현재 선택된 element만 한 화면에 표시되게 합니다. 이는 그룹노드에
유용하게 사용하실 수 있습니다.
폭에 최적화되어 보이기 : 버튼영역에는 포함되어져 있지 않으나, 현재 화면의 폭에 맞추어
보이는 기능이 제공됩니다.
|
|
|
알메이트-다이어그램에서 제공되는 도형은 기본도형과 순서도 도형이 있습니다.
제공되는 도형의 내역은 아래와 같습니다.
기본도형 : 추가 텍스트, 네모, 둥그런 네모, 다이아몬드, 세모, 십자가, 정사각형, 오각형, 정오각형,
정육각형, 정칠각형, 정팔각형, 정십각형, 정십이각형, 4 별, 5 별, 6 별, 7 별, 8 별, 12 별, 좌 화살표,
우 화살표, 상 화살표, 하 화살표, 세로 선, 가로 선, 괄호, 둥그런 괄호 등
순서도 도형 : 처리, 대체 처리, 판단, 데이터, 종속처리, 내부저장소, 문서, 다중 문서, 시작종료,
준비, 수동입력, 수동연산, 연결자, 페이지연결자, 카드, 천공테이프, 논리합, 논리곱, 대조,
정렬/분류, 추출, 병합, 저장데이타, 지연, 순차적 액세스 저장소, 자기디스크, 직접 액세서 저장소,
화면 표시 등
|
|
|
제품내에서 기본적으로 제공되는 이미지는 많지 않으며, 그 수량이나, 용도가 한정적입니다.
따라서 직접 원하는 이미지를 URL만 등록하면 사용할 수 있도록 하였습니다.
이미지는 jpg, png, gif 등이 가능하며, 동적 이미지를 위하여 swf 를 지원합니다.
확대/축소등에서 이미지의 깨짐이 덜하기 위하여는 벡터이미지를 swf로 저장하여 사용하시는 것을
권장합니다
|
|
|
연결선은 각 node등을 선으로 연결하기 위한 것입니다.
선을 그리는 방법 : 각 node에 마우스를 over하게 되면 4분면에 조그만 화살표가 보입니다.
이를 드래그하면 화살표가 생성됩니다. 연결 하고자 하는 노드에 가까이 가면 해당 노드에도 4분면
화살표가 나타나는데, 이때 해당 화살표에 마우스를 놓으면 됩니다.
선을 그리는 방법 : 각 node에 마우스를 over하게 되면 4분면에 조그만 3개의 화살표가 보입니다.
이중 하나를 드래그하면 화살표가 생성됩니다. 연결 하고자 하는 노드에 가까이 가면 해당 노드에도
4분면 화살표가 나타나는데, 해당 화살표위로 마우스가 이동하게 되면 컬러가 바뀝니다.
이때 해당 화살표에 마우스를 놓으면 됩니다.
(이렇게 될 경우에는 노드이동시에 화살표가 한 몸과 같이 움직입니다.)
각 노드는 4개의 분면으로 나누어지며, 각 면마다 3개의 서로 다른 위치에 화살표를 그을 수
있습니다. 따라서 하나의 노드에는 총 12개의 서로다른 위치의 화살표를 그을 수 있습니다.
화살표를 그리는 중간에 임의의 위치에 화살표를 놓으면 해당 위치까지만 화살표만 그려집니다.
제공되는 선은 점선(dashed-line), 직선(straight), 꺽임선(orthogonal, 90도 방향으로만 긋기),
곡선(curve) 이 제공됩니다. 각선의 끝은 화살표의 유무에 따라 단방향/양방향/무방향이 있습니다.
이미 그린 선을 바꾸려면, 메뉴를 이용하거나, 연결선을 클릭한후 오른쪽 버튼의 개체서식을
통해서도 바꿀 수 있습니다.
연결선의 중간의 임의의 지점을 클릭하여, 드래그하면 선의 위치를 바꾸거나, 자유형선을 그릴 수
있습니다.
|
|
|
|
그룹노드는 여러 개의 element를 묶어서 그룹화하여 하나의 element와 같이 움직이도록 하기 위한 노드입니다.
그룹노드의 지정 : (ctrl key+노드 마우스 클릭) -> 메뉴 Object Grouping 혹은 마우스오른쪽 버튼
그룹지정
그룹노드의 속성설정 : 그룹 click 후 마우스오른쪽 버튼 -> 개체서식 -> 그룹서식
그룹노드의 특화 속성들 :
- 펼치기/숨기기(그룹노드에 헤더를 보이기로 체크하면 펼치기/숨기기를 할 수 있습니다.)
- 컬러변경 : 헤더 컬러를 지정할 수 있습니다.
- 기타 속성들은 아래의 개체(element)서식에서의 속성지정과 동일합니다.
|
|
|
각 element를 클릭후 마우스 오른쪽 버튼->개체서식을 클릭하면 각 개체에 대한 속성을 지정할 수
있습니다.
개체(element)의 속성
- 개체의 ID 및 크기지정 : 개체 ID : 개체를 구별하는 구별자입니다. 이 구별자는 자동으로
지정되나, 직접 수정하여 지정할 수 있습니다.
또한 자바스크립트를 통해 팝업으로 select button을 통해 귀사에 맞는 ID를 넣을 수 있습니다.
- 개체 ID는 개체동적변경이 필요할 시 유용히 사용될 수 있습니다.
- 개체의 크기 : 폭과 높이의 크기 지정. 마우스 드래그를 통해서도 조정할 수 있으나,
정밀수치필요시 사용.
- 색상지정 : 색상은 기본적으로 그라데이션처리 됩니다.
따라서 그라데이션의 시작색상과 끝색상의 두가지를 지정합니다.
- 테두리선의 종류/두께/색상 : 개체의 테두리선에 대한 설정을 할 수 있습니다.
테두리선 종류 : 실선 or 점선
테두리선 두께 : 값으로 지정
테두리선 색상 : 색상지정 및 투명도 지정
- 라벨텍스트 : 개체에 표시될 라벨(이름)을 적습니다. (폰트체, 폰트크기, 진하기, 기울이기,
언더라인 등을 설정가능)
- 툴팁텍스트 : 마우스 over시에 표시될 툴팁을 적습니다.
- 그룹헤드 : 그룹노드에만 나타나는 속성입니다.
헤드 유무설정을 통해 헤드의 사이즈 및 헤드의 색상등을 지정할 수 있습니다.
비고 : 개체의 ID를 통해, 자바스크립트로, 라벨, 색상, 깜박거림, 툴팁, 이미지일경우 이미지변경,
개체의 보이기/숨기기 등의 동적기능을 수행할 수 있습니다.
|
|
|
이 기능은 툴팁을 사용자가 정의한 항목별로 분류하여 입력받을 수 있도록 하기위한 기능입니다.
가령 툴팁에 항목을 부여하여 1. 서버명 : 2. IP주소: 3. 관리자 등의 항목으로 분류하여, 각 항목별로
입력코자 할 경우 유용합니다.
이의 처리는 다이어그램의 외형을 설정하는 레이아웃파일에서 툴팁의 항목에 대한 정의를 통해
가능합니다.
툴팁의 각 항목은 동적변경에서 제공되는 자바스크립트를 통해 동적으로 변경이 가능합니다.
|
|
|
|
Edit Mode를 통해서 제작된 데이터는 내부적으로 사용되는 코드로 저장이 됩니다.
이 코드를 서버에서 받아서 저장해 두었다가, 실제 조회용(View Mode) 혹은 추후 제작모드(Edit Mode)에서 재사용 하실 수 있습니다.
이 기능을 통해 Edit Mode에서 제작된 데이터를 Java Script를 통해 서버프로그램에서 받아서,서버에 저장하실 수 있습니다.
(주의 : 내부적으로 저장되는 데이터코더는 그대로 저장하시고, 변경하지 않는 것이 좋습니다.
동적으로 변경해야 할 필요가 있을 경우에는, 동적변경에서 제공되는 자바스크립트를 통해 처리해주십시오.)
|
|
|
| 구 분 |
주요기능 |
|
|
기본형 다이어그램(제공된 도형들로 그려진 다이어그램), 이미지 다이어그램(내장된 기본이미지 및
remote 이미지), 기본형 + 이미지, 그룹형 다이어그램등을 조회할 수 있습니다.
조회모드에서는 마우스 드래깅 및 휠을 통해 판이동 기능과 개체선택기능 혹은 확대/축소 기능과
스크롤 기능을 사용하실 수 있습니다.(설정가능)
확대, 축소, 1배율, 화면에 맞추기, 중앙으로이동, 선택된 element만 보기 등의 기능이 제공됩니다.
(이를 위한 버튼들의 아이콘은 직접 원하신는 이미지로 바꾸실 수 있습니다.)
그룹노드는 펼치고 접을 수 있는 기능이 있습니다.
View Mode에서 일반이용자가 화면상의 element를 옮기거나, 크기를 늘리거나 하는 액션이
가능하게 할 지 말지를 지정할 수 있습니다.
|
|
|
|
초기에 다이어그램이 로딩될때 화면에 표시되는 크기,모양을 지정하실 수 있습니다.
이 작업은 화면 초기 로딩시에 Java Script를 통해 처리하도록 만들어져 있습니다.
제작시 저장된 배율대로 보이기 (default) : 제작자가 제작시에 저장했던 다이어그램의 배율대로
보이게 됩니다.
화면에 최적화되어 보이기 : 다이어그램의 전체크기와 브라우저의 화면크기를 고려하여 가장
최적화된 배율로 자동조정하여 보이게 됩니다.
1배율로 보이기 : 제작된 다이어그램의 원본(1배율)그대로를 화면에 표시합니다.
특정영역을 초기화면으로 보이기 : 다이어그램의 특정 element(그룹노드포함)를 지정하여,
이 element를 화면의 크기에 맞추어 우선적으로 보이게 할 수 있습니다.
|
|
|
|
알메이트-다이어그램의 가장 파워풀한 기능중의 하나로, 제작시에 제작된 다이어그램의
엘리먼트중 동적으로 변경되는 데이터를 다이어그램에 표현하기 위한 기능입니다.
가령 네트웍다이어그램에서 장애가 발생한 노드를 표시하거나, 결재 플로우 다이어그램에서 현재
결재가 대기중인 사람의 노드를 표시할 수 있습니다.
엘리먼트의 동적변경은
1. 다이어그램 로딩시
2. element 클릭시
3. 기타 이벤트 전달시 에 가능합니다.
엘리먼트에 동적인 변경을 할 수 있는 요소는 아래와 같습니다.
깜빡이는 효과주기 : 각 엘리먼트에 깜빡깜빡이는 효과를 줄 수 있습니다.
색상 변경하기 : 각 엘리먼트의 색상 및 테두리선 두께등을 변경할 수 있습니다.
(연결선(link)의 경우 색상 및 선두께)
라벨텍스트 변경하기 : 엘리먼트내의 라벨(텍스트)를 바꿀 수 있습니다.
(텍스트의 폰트, 색상, 크기 등)
외부이미지 변경하기 : 엘리먼트가 이미지노드일 경우 이 이미지를 교체할 수 있습니다.
(이미지의 종류는 png, gif, jpg, swf 가 지원됩니다.)
툴팁 변경하기 : 마우스 over시의 툴팁을 변경할 수 있습니다.
보이기/숨기기 : 화면에 보인 엘리먼트를 숨기기하여 보이지 않게 처리할 수 있습니다.
동적변경은 제공되는 자바스크립트를 통해 처리하여야 하며, 각 엘리먼트는 고유한 ID를 통해 구별됩니다.
|
|
|
|
마우스이벤트에 대한 엘리먼트의 정보를 자바스크립트를 통해 전달해 드립니다.
클릭이벤트 : 엘리먼트를 클릭시에 엘리먼트의 정보를 자바스크립트를 통해 전달해 드립니다.
더블클릭 이벤트 : 엘리먼트를 더블클릭시에 엘리먼트의 정보를 자바스크립트를 통해 전달해
드립니다.
영역 선택 이벤트 : 이용자가 마우스 드래그를 통해 특정영역을 선택할 경우 영역선택에 대한
이벤트를 자바스크립트를 통해 전달해 드립니다.
클릭시 jQuery연동하셔 속성변경 : 엘리먼트를 클릭시 클릭한 엘리먼트의 속성을 원하는
모양으로 동적으로 변경하여 이를 화면에 display할 수 있도록 제공하는 기능으로, jQuery와
연동하여 이를 수행할 수 있습니다.
|
|
|
