본문 바로가기
  • You find inspiration to create your own path !
업무 자동화/JavaScript For Creo

Creo.JS 스크립트 사용 방법?

by ToolBOX01 2025. 2. 6.
반응형

Creo.JS 응용 프로그램 이해

Creo.JS 응용 프로그램은 웹 브라우저와 Creo 소프트웨어 사이에서 다리 역할을 하는, JavaScript로 만들어진 프로그램입니다. 마치 두 개의 섬을 연결하는 다리처럼, Creo.JS는 웹 브라우저의 편리함과 Creo의 강력한 기능을 함께 사용할 수 있도록 도와줍니다. Creo.JS 응용 프로그램은 크게 두 부분으로 나뉘어 있습니다.

1. 웹 브라우저 섬

  • 사용자가 직접 상호작용하는 부분입니다.
  • 웹 페이지 화면을 만들고, 사용자가 버튼을 클릭하거나 입력을 하는 등의 상호작용을 처리합니다.
  • HTML과 JavaScript로 만들어져 있으며, 웹 브라우저 안에서 실행됩니다.

2. Creo 섬

  • Creo 소프트웨어와 소통하는 부분입니다.
  • Creo의 기능을 실행하고, 데이터를 주고받는 역할을 합니다.
  • JavaScript로 만들어져 있으며, Creo 프로그램 안에서 실행됩니다.

다리 역할: Web.Link API

두 섬은 서로 직접 소통할 수 없기 때문에, Web.Link API라는 다리를 통해 정보를 주고받습니다. Web.Link API는 웹 브라우저 섬에서 Creo 섬으로 명령을 전달하거나, Creo 섬에서 웹 브라우저 섬으로 데이터를 보내는 역할을 합니다.

비동기 통신: JSON 객체

두 섬은 실시간으로 정보를 주고받는 것이 아니라, JSON 객체라는 편지를 주고받는 방식으로 소통합니다. 편지를 보내고 답장을 기다리는 것처럼, 비동기적으로 통신합니다.

JavaScript Promise: 콜백 함수

Creo.JS는 JavaScript Promise를 사용하여 비동기 통신을 처리합니다. Promise는 나중에 받을 편지 (결과)에 대한 약속과 같습니다. Promise를 사용하면 복잡한 비동기 작업을 깔끔하게 처리할 수 있습니다.

□ Web.Link API와 Creo.js 관계 

Web.Link API와 Creo.JS는 엄연히 다른 기술입니다. 하지만 Creo 환경에서 웹 기술을 활용하여 응용 프로그램을 개발하는 데 긴밀하게 연관되어 있습니다.

Web.Link API

  • 역할: 웹 브라우저 환경에서 Creo Parametric과 상호 작용하는 데 사용되는 API입니다.
  • 특징:*
    • Creo Parametric에 내장된 웹 브라우저를 통해 실행됩니다.
    • JavaScript, HTML 등의 웹 기술을 사용하여 사용자 인터페이스를 개발하고, Creo Parametric의 기능을 제어합니다.
    • Creo Parametric과의 통신은 동기 방식으로 이루어집니다.
  • 주요 사용 사례:*
    • Creo Parametric 작업을 자동화하는 웹 기반 응용 프로그램 개발
    • 웹 브라우저를 통해 Creo Parametric 모델을 조회하고 수정하는 응용 프로그램 개발

Creo.JS

  • 역할: Web.Link API의 기능을 확장하고, 최신 웹 기술을 활용하여 더욱 강력한 기능을 제공하는 JavaScript 프레임워크입니다.
  • 특징:*
    • Web.Link API를 기반으로 하며, Web.Link API의 모든 기능을 지원합니다.
    • 비동기 통신 방식을 사용하여 사용자 인터페이스의 응답성을 향상시킵니다.
    • JavaScript Promise를 사용하여 비동기 작업을 효율적으로 관리합니다.
    • 웹 브라우저와 Creo Parametric 간의 통신을 위한 JSON 기반 메시지 형식을 사용합니다.
  • 주요 사용 사례:*
    • Web.Link API를 사용하여 개발된 응용 프로그램의 성능 및 기능 개선
    • 최신 웹 기술 (예: JavaScript 프레임워크, 라이브러리)을 활용한 Creo Parametric 응용 프로그램 개발
    • 복잡한 비동기 작업을 처리해야 하는 Creo Parametric 응용 프로그램 개발

요약

  • Web.Link API는 웹 브라우저 환경에서 Creo Parametric과 상호 작용하는 기본적인 API입니다.
  • Creo.JS는 Web.Link API를 기반으로 하여 개발되었으며, 최신 웹 기술을 활용하여 더욱 강력한 기능과 편의성을 제공합니다.
  • Creo.JS는 Web.Link API의 모든 기능을 포함하고 있으며, 비동기 통신, JavaScript Promise 등의 기능을 추가하여 개발 생산성을 높여줍니다.

결론적으로, Web.Link API는 Creo Parametric과 웹 브라우저를 연결하는 핵심 기술이며, Creo.JS는 Web.Link API를 기반으로 하여 더욱 발전된 기능을 제공하는 프레임워크라고 할 수 있습니다.

웹 페이지가 로딩될 때, 우리는 다양한 요소들이 제자리를 잡고, 스크립트들이 실행되기를 기대합니다. 하지만, Creo.JS 스크립트는 일반적인 웹 페이지 스크립트와는 조금 다르게 작동합니다.

웹 페이지가 완전히 로드되면 onload 이벤트가 발생합니다. 이 이벤트를 감지하여 특정 코드를 실행하도록 설정할 수 있습니다. 하지만, Creo.JS 스크립트는 onload 이벤트가 발생하기 전에 로딩을 시작하고, onload 이벤트가 발생한 후에도 로딩이 완료되지 않을 수 있습니다.

Creo.JS 스크립트가 완전히 로드되지 않은 상태에서 Creo.JS와 관련된 코드를 실행하면 오류가 발생할 수 있습니다. 
마치 건물이 완공되기도 전에 전기 배선을 연결하려고 하는 것과 같습니다.

이러한 문제를 해결하기 위해 CreoJS.$ADD_ON_LOAD 이벤트가 존재합니다. 이 이벤트는 Creo.JS 스크립트가 완전히 로드된 후에만 발생합니다. 따라서, Creo.JS와 관련된 코드를 CreoJS.$ADD_ON_LOAD 이벤트 핸들러 안에 작성하면 오류를 방지할 수 있습니다.

웹 페이지가 Creo.JS 초기화 및 종료 이벤트를 기다리도록 하려면 각각
CreoJS.$ADD_ON_LOAD 및 CreoJS.$ADD_ON_UNLOAD 이벤트 리스너를 설정하십시오.

아래 html 파의 동작 순서 입니다

  1. 웹 페이지가 로드됩니다.
  2. Creo.JS 라이브러리와 브라우저 통합 스크립트가 로드됩니다.
  3. CreoJS.$ADD_ON_LOAD 이벤트가 발생하면 initialize 함수가 실행됩니다 (CreoJS 로딩이 완료된 시점).
  4. initialize 함수는 getActiveModelName 함수를 호출하여 활성화된 모델의 이름을 가져옵니다.
  5. 모델 이름은 <span> 태그에 표시됩니다.
<html>
<head>
<script src="creojs.js"></script>
<script type="text/creojs" src="browser.creojs"></script>
<script type="text/creojs">
	function getActiveModelName () {
	return pfcGetCurrentSession ().GetActiveModel ().FileName;
	}
</script>
</head>

<body onload="CreoJS.$ADD_ON_LOAD (initialize)">
<b>Active model:</b> <span id="MODELNAME"></span>
<script>
	function initialize () {
	CreoJS.getActiveModelName ()
	.then (function (name) {
	MODELNAME.innerHTML = name;
	})
	}
</script>
</body>
</html>

코드를 부분별로 설명해 드리겠습니다.

1. <head> 부분:

  • <script src="creojs.js"></script>: Creo.JS 라이브러리를 포함합니다. Creo.JS를 사용하기 위해서는 이 스크립트가 반드시 필요합니다.
  • <script type="text/creojs" src="browser.creojs"></script>: Creo 브라우저 통합 스크립트를 포함합니다. Creo 환경과 웹 페이지 간의 연결을 담당합니다.
  • <script type="text/creojs"> ... </script>: CreoJS 스크립트 블록입니다. 이 블록 안의 코드는 Creo 환경 내에서 실행됩니다.
    • function getActiveModelName () { ... }: 현재 활성화된 모델의 이름을 반환하는 함수입니다. pfcGetCurrentSession()은 Creo의 현재 세션을 가져오고, GetActiveModel()은 활성화된 모델을 가져오며, FileName은 모델의 파일 이름을 반환합니다.

2. <body> 부분:

  • <body onload="CreoJS.$ADD_ON_LOAD (initialize)">: 웹 페이지가 로드될 때 initialize 함수를 실행하도록 설정합니다. 중요한 점은 onload 이벤트 핸들러에서 CreoJS.$ADD_ON_LOAD를 호출하여 Creo.JS가 완전히 로드된 후에 initialize 함수가 실행되도록 하는 것입니다. 앞서 설명했듯이, 일반적인 onload 이벤트는 CreoJS 로딩이 완료되기 전에 발생할 수 있으므로, CreoJS.$ADD_ON_LOAD를 사용하는 것이 안전합니다.
  • <b>Active model:</b> <span id="MODELNAME"></span>: "Active model:" 텍스트와 모델 이름을 표시할 빈 <span> 태그를 만듭니다. id가 "MODELNAME"인 이 요소에 JavaScript를 사용하여 모델 이름을 표시할 것입니다.
  • <script> ... </script>: JavaScript 블록입니다. 이 블록 안의 코드는 웹 브라우저에서 실행됩니다.
    • function initialize () { ... }: Creo.JS가 완전히 로드된 후 실행되는 함수입니다.
      • CreoJS.getActiveModelName(): 위에서 정의한 CreoJS 함수 getActiveModelName을 호출하여 활성화된 모델의 이름을 가져옵니다. 이 함수는 Promise를 반환합니다.
      • .then(function (name) { ... }): Promise가 성공적으로 완료되면 실행되는 함수입니다. name 인자는 getActiveModelName 함수가 반환한 모델 이름입니다.
      • MODELNAME.innerHTML = name;: 모델 이름을 id가 "MODELNAME"인 <span> 태그의 내용으로 설정하여 웹 페이지에 표시합니다.

▣  CreoJS.$ADD_ON_UNLOAD 이벤트

  • CreoJS.$ADD_ON_UNLOAD: 웹 페이지가 닫히거나 다른 페이지로 이동할 때 실행되는 정리 작업용 코드입니다. 예를 들어, 사용했던 Creo 관련 기능들을 끄거나, 사용했던 메모리 등을 반환하는 코드를 작성할 수 있습니다. 마치 집을 나설 때 전등을 끄고 문을 잠그는 것과 비슷합니다.
  • 컨텍스트(Context): Creo.JS 엔진 내에서 각 웹 페이지가 사용하는 독립적인 공간이라고 생각하면 됩니다. 각 페이지는 자신만의 공간을 가지고 있으며, 이 공간은 페이지가 로드될 때 만들어지고 언로드될 때 사라집니다. 마치 각 방이 독립적인 공간을 가지는 것과 같습니다.
  • 세션 스토리지(Session Storage): 여러 웹 페이지가 공유할 수 있는 전역적인 저장 공간입니다. Window.sessionStorage와 비슷하게, 웹 페이지 간에 데이터를 교환하거나 공유할 때 사용될 수 있습니다. 마치 거실처럼 여러 사람이 함께 사용하는 공간과 같습니다.

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'업무 자동화 > JavaScript For Creo' 카테고리의 다른 글

babylon.js 테스트  (0) 2025.02.07
Babylon.js & Creo  (2) 2025.02.07
browser_test.html  (0) 2025.02.06
자비스크리트 예제 사이트  (0) 2025.02.06
자바스크립트 예시 #1  (0) 2025.02.05

관련글

티스토리툴바