Jekyll2018-12-05T23:57:39+00:00https://kwon6838.github.io//feed.xml개발자 매뉴얼EDISON Platform 개발자 지원을 위한 매뉴얼권예진<br>Yejin Kwonyejinkwon@kisti.re.krhttps://www.edison.re.kr공용 함수2018-10-03T00:00:00+00:002018-10-03T00:00:00+00:00https://kwon6838.github.io//workbench/Analyzer-Development-Guide-8<h3 id="공용함수">공용함수</h3>
<p>이벤트에 대한 응답이나 데이터를 처리하고 실제 가시화를 하기 위한 공용 함수들이 필요합니다. 예를 들어 워크벤치와 연동되어 시뮬레이션을 수행할 때, 시뮬레이션이 종료되고 결과를 확인하기 위해서는 워크벤치에서 데이터를 로드하라는 OSP_LOAD_DATA 이벤트를 분석기에 보내게 됩니다.</p>
<p>해당 이벤트를 해석하고 데이터를 로드하는 함수를 정의하고 로드된 데이터를 통해 시뮬레이션 분석을 위한 가시화를 진행할 수 있습니다. 따라서 데이터를 처리하고 파일을 분석하는 내용에 대한 공용 함수를 정의합니다.</p>
<p>분석기에서 사용되는 함수의 종류와 설명은 아래와 같습니다.</p>
<table>
<thead>
<tr>
<th style="text-align: left">함수명</th>
<th style="text-align: left">정의</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">loadXXXXXXFile(OSPInputData)</td>
<td style="text-align: left">실제 서버쪽의 파일을 읽어오는 방법에 대한 정의<br />Output 포트의 path 타입에 따라 케이스를 나누고 처리 방법에 대한 정의가 되어 있음</td>
</tr>
<tr>
<td style="text-align: left">getFirstFileName(OSPInputData)</td>
<td style="text-align: left">Output 포트의 파일 타입이 폴더이거나 확장자일 경우 해당 결과 result 폴더에서 첫 번 째 파일을 읽어오도록 정의</td>
</tr>
<tr>
<td style="text-align: left">drawXXXXXXView()</td>
<td style="text-align: left">서버와 연동되어서 선택된 파일을 실제 뷰 부분의 iframe 내부로 전달하여 가시화 함</td>
</tr>
<tr>
<td style="text-align: left">initializeFileExplorer()</td>
<td style="text-align: left">서버와 연결된 파일 익스플로러 초기값 설정</td>
</tr>
<tr>
<td style="text-align: left">DownloadCurrentFile()</td>
<td style="text-align: left">현재 사용자가 파일 익스플로러에서 선택한 파일을 다운로드</td>
</tr>
</tbody>
</table>
<h3 id="loadxxxxxxfileospinputdata">loadXXXXXXFile(OSPInputData)</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">loadTestviewFile</span><span class="p">(</span> <span class="nx">inputData</span> <span class="p">){</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">currentData</span> <span class="o">=</span> <span class="nx">inputData</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"[testView] Load Data : input Data "</span><span class="p">,</span> <span class="nx">inputData</span><span class="p">);</span>
<span class="k">switch</span><span class="p">(</span> <span class="nx">inputData</span><span class="p">.</span><span class="nx">type</span><span class="p">()</span> <span class="p">){</span>
<span class="k">case</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FILE</span><span class="p">:</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">drawView</span><span class="p">(</span> <span class="nx">inputData</span> <span class="p">);</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FOLDER</span><span class="p">:</span>
<span class="k">case</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">EXT</span><span class="p">:</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">getFirstFileName</span><span class="p">(</span> <span class="nx">inputData</span> <span class="p">);</span>
<span class="c1">// serveResourceUrl.setParameter('command', 'READ_FIRST_FILE');</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">URL</span><span class="p">:</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Un supported yet.'</span><span class="o">+</span><span class="nx">inputData</span><span class="p">.</span><span class="nx">type</span><span class="p">());</span>
<span class="k">break</span><span class="p">;</span>
<span class="nl">default</span><span class="p">:</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Un supported yet.'</span><span class="o">+</span><span class="nx">inputData</span><span class="p">.</span><span class="nx">type</span><span class="p">());</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="drawxxxxxxview">drawXXXXXXView()</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">drawView</span><span class="p">(</span> <span class="nx">inputData</span> <span class="p">){</span>
<span class="nx">setTimeout</span><span class="p">(</span>
<span class="kd">function</span><span class="p">(){</span>
<span class="kd">var</span> <span class="nx">iframe</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'<portlet:namespace/>canvas'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">iframeDoc</span> <span class="o">=</span> <span class="nx">iframe</span><span class="p">.</span><span class="nx">contentDocument</span> <span class="o">||</span> <span class="nx">iframe</span><span class="p">.</span><span class="nx">contentWindow</span><span class="p">.</span><span class="nb">document</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="s1">'[testView]iframeDoc.readyState : '</span><span class="p">,</span> <span class="nx">iframeDoc</span><span class="p">.</span><span class="nx">readyState</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span> <span class="nx">iframeDoc</span><span class="p">.</span><span class="nx">readyState</span> <span class="o">==</span> <span class="s1">'complete'</span> <span class="o">&&</span> <span class="nx">iframe</span><span class="p">.</span><span class="nx">contentWindow</span><span class="p">.</span><span class="nx">drawTestViewer</span> <span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"[testView] Load data in draw"</span><span class="p">);</span>
<span class="nx">AUI</span><span class="p">().</span><span class="nx">use</span><span class="p">(</span><span class="s1">'liferay-portlet-url'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span> <span class="p">{</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">currentData</span> <span class="o">=</span> <span class="nx">inputData</span><span class="p">.</span><span class="nx">clone</span><span class="p">();</span>
<span class="k">if</span><span class="p">(</span> <span class="o">!<</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">currentData</span><span class="p">.</span><span class="nx">repositoryType</span><span class="p">()</span> <span class="p">)</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">currentData</span><span class="p">.</span><span class="nx">repositoryType</span><span class="p">(</span><span class="s1">'<%=OSPRepositoryTypes.USER_JOBS.toString()%>'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">serveResourceUrl</span> <span class="o">=</span> <span class="nx">Liferay</span><span class="p">.</span><span class="nx">PortletURL</span><span class="p">.</span><span class="nx">createResourceURL</span><span class="p">();</span>
<span class="nx">serveResourceUrl</span><span class="p">.</span><span class="nx">setPortletId</span><span class="p">(</span><span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">);</span>
<span class="nx">serveResourceUrl</span><span class="p">.</span><span class="nx">setParameter</span><span class="p">(</span><span class="s1">'command'</span><span class="p">,</span> <span class="s1">'GET_FILE'</span><span class="p">);</span>
<span class="nx">serveResourceUrl</span><span class="p">.</span><span class="nx">setParameter</span><span class="p">(</span><span class="s1">'repositoryType'</span><span class="p">,</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">currentData</span><span class="p">.</span><span class="nx">repositoryType</span><span class="p">());</span>
<span class="nx">serveResourceUrl</span><span class="p">.</span><span class="nx">setParameter</span><span class="p">(</span><span class="s1">'pathType'</span><span class="p">,</span> <span class="nx">inputData</span><span class="p">.</span><span class="nx">type</span><span class="p">());</span>
<span class="nx">serveResourceUrl</span><span class="p">.</span><span class="nx">setParameter</span><span class="p">(</span><span class="s1">'parentPath'</span><span class="p">,</span> <span class="nx">inputData</span><span class="p">.</span><span class="nx">parent</span><span class="p">());</span>
<span class="nx">serveResourceUrl</span><span class="p">.</span><span class="nx">setParameter</span><span class="p">(</span><span class="s1">'fileName'</span><span class="p">,</span> <span class="nx">inputData</span><span class="p">.</span><span class="nx">name</span><span class="p">());</span>
<span class="nx">serveResourceUrl</span><span class="p">.</span><span class="nx">setParameter</span><span class="p">(</span><span class="s1">'relative'</span><span class="p">,</span> <span class="nx">inputData</span><span class="p">.</span><span class="nx">relative</span><span class="p">());</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="s1">'[testView]Draw Input Data : '</span><span class="p">,</span> <span class="nx">inputData</span><span class="p">);</span>
<span class="nx">iframe</span><span class="p">.</span><span class="nx">contentWindow</span><span class="p">.</span><span class="nx">drawTestViewer</span><span class="p">(</span><span class="nx">inputData</span><span class="p">,</span> <span class="nx">serveResourceUrl</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#<portlet:namespace/>title'</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">inputData</span><span class="p">.</span><span class="nx">name</span><span class="p">());</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="k">else</span><span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"[testView] test esle : load data in draw"</span><span class="p">);</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">drawView</span><span class="p">(</span> <span class="nx">inputData</span> <span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="mi">10</span>
<span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="getfirstfilenameospinputdata">getFirstFileName(OSPInputData)</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">getFirstFileName</span><span class="p">(</span> <span class="nx">inputData</span> <span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'[testView]get First File Name : '</span><span class="p">,</span> <span class="nx">inputData</span> <span class="p">);</span>
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">command</span><span class="p">:</span> <span class="s1">'GET_FIRST_FILE_NAME'</span><span class="p">,</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">pathType</span><span class="p">:</span> <span class="nx">inputData</span><span class="p">.</span><span class="nx">type_</span><span class="p">,</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">repositoryType</span><span class="p">:</span> <span class="nx">inputData</span><span class="p">.</span><span class="nx">repositoryType_</span><span class="p">,</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">parentPath</span><span class="p">:</span> <span class="nx">inputData</span><span class="p">.</span><span class="nx">parent_</span><span class="p">,</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">fileName</span><span class="p">:</span> <span class="nx">inputData</span><span class="p">.</span><span class="nx">name_</span>
<span class="p">};</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"[testView] laod get first file test : "</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
<span class="na">url</span><span class="p">:</span> <span class="s1">'<%= serveResourceURL.toString()%>'</span><span class="p">,</span>
<span class="na">type</span><span class="p">:</span> <span class="s1">'POST'</span><span class="p">,</span>
<span class="na">data</span> <span class="p">:</span> <span class="nx">data</span><span class="p">,</span>
<span class="na">dataType</span> <span class="p">:</span> <span class="s1">'json'</span><span class="p">,</span>
<span class="na">success</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"[testView] get result data "</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="nx">inputData</span><span class="p">.</span><span class="nx">name</span><span class="p">(</span> <span class="nx">data</span><span class="p">.</span><span class="nx">fileName</span> <span class="p">);</span>
<span class="nx">inputData</span><span class="p">.</span><span class="nx">type</span><span class="p">(</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FILE</span> <span class="p">);</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">drawView</span><span class="p">(</span> <span class="nx">inputData</span> <span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"[testView] Get First File Data : "</span><span class="p">,</span> <span class="nx">inputData</span><span class="p">);</span>
<span class="p">},</span>
<span class="na">error</span><span class="p">:</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span><span class="nx">e</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'[testView]AJAX ERROR1-->'</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'[testView]AJAX ERROR2-->'</span><span class="p">,</span> <span class="nx">e</span><span class="p">);</span>
<span class="p">},</span>
<span class="na">complete</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">jqXHR</span><span class="p">,</span> <span class="nx">textStatus</span> <span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'[testView]AJAX complete '</span><span class="p">,</span> <span class="nx">jqXHR</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="initializefileexplorer">initializeFileExplorer()</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initializeFileExplorer</span><span class="p">(){</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">$</span><span class="p">.</span><span class="nx">isEmptyObject</span><span class="p">(</span><span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">)</span> <span class="o">||</span><span class="p">(</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">.</span><span class="nx">type</span><span class="p">()</span> <span class="o">!==</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FILE</span> <span class="o">&&</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">.</span><span class="nx">type</span><span class="p">()</span> <span class="o">!==</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FOLDER</span> <span class="o">&&</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">.</span><span class="nx">type</span><span class="p">()</span> <span class="o">!==</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">EXT</span> <span class="p">))</span> <span class="k">return</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">eventData</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">portletId</span><span class="p">:</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">,</span>
<span class="na">targetPortlet</span><span class="p">:</span> <span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">fileExplorerId</span><span class="p">,</span>
<span class="na">data</span><span class="p">:</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Util</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">(</span><span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">)</span>
<span class="p">};</span>
<span class="nx">Liferay</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span> <span class="s1">'OSP_LOAD_DATA'</span><span class="p">,</span> <span class="nx">eventData</span> <span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="downloadcurrentfile">DownloadCurrentFile()</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">downloadCurrentFile</span><span class="p">(){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"[testView] Download current data"</span><span class="p">,</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">currentData</span><span class="p">);</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">$</span><span class="p">.</span><span class="nx">isEmptyObject</span><span class="p">(</span><span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">currentData</span><span class="p">)</span> <span class="o">||</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">currentData</span><span class="p">.</span><span class="nx">type</span><span class="p">()</span> <span class="o">!==</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FILE</span> <span class="p">)</span>
<span class="k">return</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">filePath</span> <span class="o">=</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">currentData</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">command</span><span class="p">:</span> <span class="s2">"DOWNLOAD_FILE"</span><span class="p">,</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">pathType</span><span class="p">:</span> <span class="nx">filePath</span><span class="p">.</span><span class="nx">type_</span><span class="p">,</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">repositoryType</span><span class="p">:</span> <span class="nx">filePath</span><span class="p">.</span><span class="nx">repositoryType_</span><span class="p">,</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">parentPath</span><span class="p">:</span> <span class="nx">filePath</span><span class="p">.</span><span class="nx">parent_</span><span class="p">,</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">fileName</span><span class="p">:</span> <span class="nx">filePath</span><span class="p">.</span><span class="nx">name_</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">base</span> <span class="o">=</span> <span class="s1">'<%=serveResourceURL.toString()%>'</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">sep</span> <span class="o">=</span> <span class="p">(</span><span class="nx">base</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'?'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">?</span> <span class="s1">'&'</span> <span class="p">:</span> <span class="s1">'?'</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">url</span> <span class="o">=</span> <span class="nx">base</span> <span class="o">+</span> <span class="nx">sep</span> <span class="o">+</span> <span class="nx">$</span><span class="p">.</span><span class="nx">param</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
<span class="nx">location</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">url</span><span class="p">;</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">loadJSMolFile</span><span class="p">(</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">currentData</span> <span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="최종-파일-구조">최종 파일 구조</h3>
<p>지금까지 기본 설정을 마친 후 최종적인 파일 구조는 다음 그림과 같습니다.
<img src="/assets/images/analyzerguide1/17.png" alt="imagetestYejin" title="프로젝트 최종구조" /><br /><br /></p>권예진<br>Yejin Kwonyejinkwon@kisti.re.krhttps://www.edison.re.kr공용함수 이벤트에 대한 응답이나 데이터를 처리하고 실제 가시화를 하기 위한 공용 함수들이 필요합니다. 예를 들어 워크벤치와 연동되어 시뮬레이션을 수행할 때, 시뮬레이션이 종료되고 결과를 확인하기 위해서는 워크벤치에서 데이터를 로드하라는 OSP_LOAD_DATA 이벤트를 분석기에 보내게 됩니다.이벤트 처리 함수2018-10-02T00:00:00+00:002018-10-02T00:00:00+00:00https://kwon6838.github.io//workbench/Analyzer-Development-Guide-7<h3 id="이벤트-처리">이벤트 처리</h3>
<p>개발하려는 분석기는 Liferay 에서 제공하는 이벤트 전송 및 수신 함수(Liferay.on(), Liferay.fire())를 사용하여 워크벤치와 연동하여 동작합니다. 자바 스크립트 단위로 동작을 하기 때문에 개발하려는 분석기 내에 필요한 이벤트를 처리하고 발생시키는 루틴을 넣어야 합니다.</p>
<p>분석기에서 사용되는 이벤트의 종류와 설명은 아래와 같습니다.</p>
<table>
<thead>
<tr>
<th style="text-align: left">이벤트명</th>
<th style="text-align: left">정의</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">OSP.Event.OSP_HANDSHAKE</td>
<td style="text-align: left">초기 워크벤치에 해당 모듈을 등록 하고 초기 설정값을 워크벤치로 부터 받을 때 쓰는 이벤트</td>
</tr>
<tr>
<td style="text-align: left">OSP.Event.OSP_Event_REGISTERED</td>
<td style="text-align: left">초기 OSP_HANDSHAKE에 대한 워크벤치의 결과 응답 이벤트</td>
</tr>
<tr>
<td style="text-align: left">OSP.Event.OSP_LOAD_DATA</td>
<td style="text-align: left">특정 위치와 파일에 대한 데이터 로드 이벤트</td>
</tr>
<tr>
<td style="text-align: left">OSP.Event.OSP_RESPONSE_DATA</td>
<td style="text-align: left">사용자가 파일 익스플로러에서 선택한 파일에 대한 응답 이벤트</td>
</tr>
<tr>
<td style="text-align: left">OSP.Event.OSP_REFRESH_OUTPUT_VIEW</td>
<td style="text-align: left">포틀릿 아이디 공유를 위한 이벤트</td>
</tr>
<tr>
<td style="text-align: left">OSP.Event.OSP_INITIALIZE</td>
<td style="text-align: left">워크벤치에서 보내는 초기화 값 설정을 위한 이벤트</td>
</tr>
</tbody>
</table>
<p class="notice--info"><strong>이벤트처리함수</strong> <br /> 일단 개발하려는 분석기가 동작하기 위해서는 위의 이벤트를 워크벤치로부터 받아서 처리하는 루틴이 필수적으로 필요합니다. 따라서 기본으로 해당 이벤트를 처리하는 코드를 작성하고 나머지 가시화 및 분석을 위한 코드를 추가하는 것이 좋습니다.</p>
<h3 id="ospeventosp_handshake">OSP.Event.OSP_HANDSHAKE</h3>
<p>처음 워크벤치가 실행되면서 각 포틀릿에게 OSP.Event.OSP_HANDSHAKE이벤트를 보내게 됩니다. 따라서 워크벤치와 연동되는 분석기를 개발하기 위해서는 OSP.Event.OSP_HANDSHAKE 이벤트를 받아서 다시 워크벤치에게 전달하는 루틴이 필요합니다.
아래 코드에서 볼 수 있듯이, OSP.Event.OSP_HANDSHAKE이벤트를 받아들이고 현재 동작중인 분석기를 워크벤치에 등록시키는 과정을 포함합니다.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Liferay</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_HANDSHAKE</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">myId</span> <span class="o">=</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">targetPortlet</span> <span class="o">!==</span> <span class="nx">myId</span> <span class="p">){</span>
<span class="k">return</span>
<span class="p">}</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">connector</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">portletId</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">mode</span> <span class="p">)</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">action</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">mode</span><span class="p">;</span>
<span class="k">else</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">action</span> <span class="o">=</span> <span class="s1">'VIEW'</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">events</span> <span class="o">=</span> <span class="p">[</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_EVENTS_REGISTERED</span><span class="p">,</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_LOAD_DATA</span>
<span class="p">];</span>
<span class="kd">var</span> <span class="nx">eventData</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">portletId</span><span class="p">:</span> <span class="nx">myId</span><span class="p">,</span>
<span class="na">targetPortlet</span><span class="p">:</span> <span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">connector</span><span class="p">,</span>
<span class="na">data</span><span class="p">:</span> <span class="nx">events</span>
<span class="p">};</span>
<span class="nx">Liferay</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_REGISTER_EVENTS</span><span class="p">,</span> <span class="nx">eventData</span> <span class="p">);</span>
<span class="p">}</span>
<span class="p">);</span>
</code></pre></div></div>
<h3 id="ospeventosp_event_registered">OSP.Event.OSP_Event_REGISTERED</h3>
<p>OSP_HANDSHAKE 이벤트의 결과에 대한 이벤트입니다. 간단하게 이벤트를 받아들여 체크하는 정도의 코드만 추가하면 됩니다.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Liferay</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_EVENTS_REGISTERED</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">myId</span> <span class="o">=</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">targetPortlet</span> <span class="o">===</span> <span class="nx">myId</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'[TestView]Regestered'</span><span class="o">+</span><span class="nx">e</span><span class="p">.</span><span class="nx">portletId</span><span class="o">+</span><span class="s1">' activated. '</span><span class="o">+</span><span class="k">new</span> <span class="nb">Date</span><span class="p">()</span><span class="o">+</span><span class="s1">']'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">);</span>
</code></pre></div></div>
<h3 id="ospeventosp_load_data">OSP.Event.OSP_LOAD_DATA</h3>
<p>데이터를 로드하기 위한 함수입니다. 워크벤치를 기반으로 하여 시뮬레이션을 수행하는데 있어, 시뮬레이션이 성공적으로 종료되었거나 이전에 실행한 성공한 시뮬레이션 잡의 결과 데이터를 가져오기 위한 이벤트 처리 부분 입니다.</p>
<p>워크벤치에서 데이터를 로드라하고 이벤트를 발생시키고, 해당 이벤트를 받아 분석기에서는 데이터를 로드하여 분석할 수 있도록 시각화를 하면 됩니다.</p>
<ul>
<li><code class="highlighter-rouge"><portlet:namespace/>initialize(e.data);</code>에서는 초기 데이터 셋팅 값을 받은 이벤트 데이터를 기반으로 설정합니다.</li>
<li><code class="highlighter-rouge"><portlet:namespace/>loadTestviewFile(<portlet:namespace/>initData.clone());</code>코드는 실제 데이터를 가져와 가시화를 하기 위한 코드입니다.</li>
<li><code class="highlighter-rouge"><portlet:namespace/>initializeFileExplorer();</code>코드는 현재 받은 이벤트 데이터를 기반으로 서버와 연결된 파일 익스프로러의 값을 재설정 하는 부분입니다.</li>
</ul>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Liferay</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_LOAD_DATA</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">myId</span> <span class="o">=</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">targetPortlet</span> <span class="o">!==</span> <span class="nx">myId</span> <span class="p">)</span>
<span class="k">return</span><span class="p">;</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initialize</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">loadTestviewFile</span><span class="p">(</span><span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">.</span><span class="nx">clone</span><span class="p">());</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initializeFileExplorer</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">);</span>
</code></pre></div></div>
<h3 id="ospeventosp_response_data">OSP.Event.OSP_RESPONSE_DATA</h3>
<p>사용자가 서버와 연동된 파일 익스플로러에서 선택한 파일에 대한 응답 이벤트 코드입니다. 사용자가 파일을 선택하면 해당 파일 데이터를 읽어오기 위한 이벤트 처리 부분입니다.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Liferay</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_RESPONSE_DATA</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span> <span class="nx">e</span> <span class="p">){</span>
<span class="kd">var</span> <span class="nx">myId</span> <span class="o">=</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">myId</span> <span class="o">!==</span> <span class="nx">e</span><span class="p">.</span><span class="nx">targetPortlet</span> <span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">inputData</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">InputData</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">data</span> <span class="p">);</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">inputData</span><span class="p">.</span><span class="nx">type</span><span class="p">()</span> <span class="o">!==</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FILE</span> <span class="p">){</span>
<span class="nx">alert</span><span class="p">(</span> <span class="s1">'File should be selected!'</span> <span class="p">);</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span><span class="k">else</span><span class="p">{</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">loadTestviewFile</span><span class="p">(</span> <span class="nx">inputData</span> <span class="p">);</span>
<span class="nx">$</span><span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">fileExplorerDialogSection</span><span class="p">.</span><span class="nx">dialog</span><span class="p">(</span><span class="s1">'close'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">);</span>
</code></pre></div></div>
<h3 id="ospeventosp_refresh_output_view">OSP.Event.OSP_REFRESH_OUTPUT_VIEW</h3>
<p>포틀릿의 아이디를 공유하기 위한 이벤트 처리 부분입니다.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Liferay</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_REFRESH_OUTPUT_VIEW</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">myId</span> <span class="o">=</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">myId</span> <span class="o">!==</span> <span class="nx">e</span><span class="p">.</span><span class="nx">targetPortlet</span> <span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">eventData</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">portletId</span><span class="p">:</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">,</span>
<span class="na">targetPortlet</span><span class="p">:</span> <span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">connector</span>
<span class="p">};</span>
<span class="nx">Liferay</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span><span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_REQUEST_OUTPUT_PATH</span><span class="p">,</span> <span class="nx">eventData</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">);</span>
</code></pre></div></div>
<h3 id="ospeventosp_initialize">OSP.Event.OSP_INITIALIZE</h3>
<p>처음 HANDSHAKE 이벤트를 처리하면서 내부저긍로 서버와 연동된 파일 익스플로러를 초기화 시키는 코드입니다.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Liferay</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_INITIALIZE</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">myId</span> <span class="o">=</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="nx">myId</span> <span class="o">!==</span> <span class="nx">e</span><span class="p">.</span><span class="nx">targetPortlet</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">$</span><span class="p">.</span><span class="nx">isEmptyObject</span><span class="p">(</span><span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">)</span> <span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initializeFileExplorer</span><span class="p">(</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">.</span><span class="nx">clone</span><span class="p">()</span> <span class="p">);</span>
<span class="p">}</span>
<span class="p">);</span>
</code></pre></div></div>권예진<br>Yejin Kwonyejinkwon@kisti.re.krhttps://www.edison.re.kr이벤트 처리 개발하려는 분석기는 Liferay 에서 제공하는 이벤트 전송 및 수신 함수(Liferay.on(), Liferay.fire())를 사용하여 워크벤치와 연동하여 동작합니다. 자바 스크립트 단위로 동작을 하기 때문에 개발하려는 분석기 내에 필요한 이벤트를 처리하고 발생시키는 루틴을 넣어야 합니다.파일 탐색기 설정2018-09-07T00:00:00+00:002018-09-07T00:00:00+00:00https://kwon6838.github.io//workbench/Analyzer-Development-Guide-6<h3 id="파일-메뉴-설정">파일 메뉴 설정</h3>
<p>기본적으로 분석기를 EDISON 워크벤치와 연동을 하면서 필요한 파일 메뉴는 3가지 입니다. 현재 대부분의 워크벤치와 연동된 파일 메뉴는 로컬 파일 불러오기, 서버 파일 불러오기, 현재 파일 다운로드하기 가 있습니다.
이러한 파일 메뉴와 더불어 실제 파일을 불러와 가시화하는 가시화 부분을 호출하는 <code class="highlighter-rouge">iframe</code>도 같이 포함하여 정의합니다. 이러한 파일 메뉴는 이전 포스트에서 설정되어 있는 <a href="../analyzerguide3">osp-analyzer.css</a>에서 정의되어 있는 스타일을 사용합니다.</p>
<p>다음은 파일 메뉴를 설정하기 위한 html 태그 코드입니다.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nx">div</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"container-fluid osp-analyzer"</span><span class="o">></span>
<span class="o"><</span><span class="nx">div</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"row-fluid header"</span><span class="o">></span>
<span class="o"><</span><span class="nx">div</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"col-sm-10"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"<portlet:namespace/>title"</span><span class="o">><</span><span class="sr">/div</span><span class="err">>
</span> <span class="o"><</span><span class="nx">div</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"col-sm-2"</span> <span class="o">></span>
<span class="o"><</span><span class="nx">div</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"dropdown"</span><span class="o">></span>
<span class="o"><</span><span class="nx">button</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"btn btn-primary dropdown-toggle"</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"button"</span> <span class="nx">data</span><span class="o">-</span><span class="nx">toggle</span><span class="o">=</span><span class="s2">"dropdown"</span><span class="o">></span>
<span class="nx">Menu</span><span class="o"><</span><span class="nx">span</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"caret"</span><span class="o">><</span><span class="sr">/span</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/button</span><span class="err">>
</span> <span class="c"><!--</span> <span class="nx">Link</span> <span class="nx">or</span> <span class="nx">button</span> <span class="nx">to</span> <span class="nx">toggle</span> <span class="nx">dropdown</span> <span class="o">--></span>
<span class="o"><</span><span class="nx">ul</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"dropdown-menu dropdown-menu-right"</span><span class="o">></span>
<span class="o"><</span><span class="nx">li</span> <span class="o">><</span><span class="nx">a</span> <span class="nx">href</span><span class="o">=</span><span class="s2">"javascript:$('#<portlet:namespace/>selectFile').click();"</span><span class="o">><</span><span class="nx">i</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"icon-folder-open"</span><span class="o">></span> <span class="nx">Open</span> <span class="nx">local</span><span class="p">...</span><span class="o"><</span><span class="sr">/i></</span><span class="nx">a</span><span class="o">><</span><span class="sr">/li</span><span class="err">>
</span> <span class="o"><</span><span class="nx">li</span><span class="o">><</span><span class="nx">a</span> <span class="nx">href</span><span class="o">=</span><span class="s2">"javascript:<portlet:namespace/>openFileExplorer();"</span><span class="o">><</span><span class="nx">i</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"icon-folder-open"</span><span class="o">></span> <span class="nx">Open</span> <span class="nx">server</span><span class="p">...</span><span class="o"><</span><span class="sr">/i></</span><span class="nx">a</span><span class="o">><</span><span class="sr">/li</span><span class="err">>
</span> <span class="o"><</span><span class="nx">li</span><span class="o">><</span><span class="nx">a</span> <span class="nx">href</span><span class="o">=</span><span class="s2">"javascript:<portlet:namespace/>downloadCurrentFile();"</span><span class="o">><</span><span class="nx">i</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"icon-download-alt"</span><span class="o">></span> <span class="nx">Download</span><span class="o"><</span><span class="sr">/i></</span><span class="nx">a</span><span class="o">><</span><span class="sr">/li</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/ul</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/div</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/div</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/div</span><span class="err">>
</span> <span class="o"><</span><span class="nx">div</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"row-fluid canvas"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"<portlet:namespace/>canvasFrame"</span><span class="o">></span>
<span class="o"><</span><span class="nx">iframe</span> <span class="kd">class</span> <span class="o">=</span><span class="s2">"col-sm-12 iframe-canvas"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"<portlet:namespace/>canvas"</span> <span class="nx">src</span><span class="o">=</span><span class="s2">"<%=request.getContextPath()%>/html/testanalyzer/loadAnalyzer.jsp"</span> <span class="nx">style</span><span class="o">=</span><span class="s2">"border:0"</span><span class="o">></span>
<span class="o"><</span><span class="sr">/iframe</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/div</span><span class="err">>
</span><span class="o"><</span><span class="sr">/div</span><span class="err">>
</span></code></pre></div></div>
<h3 id="파일-다이얼로그-추가">파일 다이얼로그 추가</h3>
<p>서버와 연동되는 파일 처리를 위한 서버 파일 리스트를 볼 수 있는 다이얼로그를 띄울 수 있는 태그를 추가합니다.</p>
<p>또한 서버의 파일 리스트를 볼 수 있는 서버 파일 탐색기를 호출하게 됩니다. 이 서버 사이드 파일 탐색기는 EDISON 플랫폼에 탑재되어 있으며, 분석기를 개발하려면 호출하기만 하면 됩니다. 호출하는 함수는 <code class="highlighter-rouge">OSPFileExplorerportlet</code>로서 자바스크립트로 정의되어 있습니다.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"<portlet:namespace/>hiddenSection"</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"osp-analyzer hidden"</span><span class="o">></span>
<span class="o"><</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"<portlet:namespace/>fileExplorer"</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"panel panel-primary ui-draggable"</span> <span class="nx">style</span><span class="o">=</span><span class="s2">"padding:0px;margin-bottom:0px;"</span><span class="o">></span>
<span class="c"><!--</span> <span class="nx">title</span> <span class="o">--></span>
<span class="o"><</span><span class="nx">div</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"panel-heading"</span><span class="o">></span>
<span class="o"><</span><span class="nx">button</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"button"</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"close"</span> <span class="nx">data</span><span class="o">-</span><span class="nx">dismiss</span><span class="o">=</span><span class="s2">"modal"</span> <span class="nx">aria</span><span class="o">-</span><span class="nx">hidden</span><span class="o">=</span><span class="s2">"true"</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'<portlet:namespace/>closeDialog'</span><span class="o">>&</span><span class="nx">times</span><span class="p">;</span><span class="o"><</span><span class="sr">/button</span><span class="err">>
</span> <span class="o"><</span><span class="nx">h4</span><span class="o">></span><span class="nx">Select</span> <span class="nx">a</span> <span class="nx">File</span><span class="o"><</span><span class="sr">/h4</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/div</span><span class="err">>
</span>
<span class="c"><!--</span> <span class="nx">content</span> <span class="o">--></span>
<span class="o"><</span><span class="nx">div</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"panel-body"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"<portlet:namespace/>file-explorer-content"</span> <span class="nx">style</span><span class="o">=</span><span class="s2">"height: 81%"</span><span class="o">><</span><span class="sr">/div</span><span class="err">>
</span>
<span class="c"><!--</span> <span class="nx">bottom</span> <span class="o">--></span>
<span class="o"><</span><span class="nx">div</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"panel-footer"</span><span class="o">></span>
<span class="o"><</span><span class="nx">div</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"ui-dialog-buttonset"</span><span class="o">></span>
<span class="o"><</span><span class="nx">input</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"btn btn-primary"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"<portlet:namespace/>file-explorer-ok"</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"button"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"OK"</span><span class="o">></span>
<span class="o"><</span><span class="nx">input</span> <span class="kd">class</span><span class="o">=</span><span class="s2">"btn"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"<portlet:namespace/>file-explorer-cancel"</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"button"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Cancel"</span><span class="o">></span>
<span class="o"><</span><span class="sr">/div</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/div</span><span class="err">>
</span>
<span class="o"><</span><span class="sr">/div</span><span class="err">>
</span> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"file"</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"<portlet:namespace/>selectFile"</span><span class="o">/></span>
<span class="o"><</span><span class="sr">/div</span><span class="err">>
</span></code></pre></div></div>
<h3 id="파일-메뉴-이벤트-처리">파일 메뉴 이벤트 처리</h3>
<ul>
<li>로컬 파일 처리 함수</li>
</ul>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">$</span><span class="p">(</span><span class="s1">'#<portlet:namespace/>selectFile'</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span>
<span class="s1">'change'</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">input</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'<portlet:namespace/>selectFile'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">reader</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FileReader</span><span class="p">();</span>
<span class="nx">reader</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#<portlet:namespace/>canvas'</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">prop</span><span class="p">(</span><span class="s1">'contentWindow'</span><span class="p">).</span><span class="nx">loadJSMolFile</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">result</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"[JSMOL] local file test : "</span><span class="p">,</span> <span class="nx">input</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"[JSMOL] local file test2 : "</span><span class="p">,</span> <span class="nx">input</span><span class="p">.</span><span class="nx">files</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">setTitle</span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">files</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">name</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">reader</span><span class="p">.</span><span class="nx">readAsDataURL</span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">files</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span>
<span class="p">}</span>
<span class="p">);</span>
</code></pre></div></div>
<ul>
<li>서버 파일 처리 함수
<code class="highlighter-rouge">initializeFileExplorer</code> 함수는 서버 파일 탐색기를 호출하기 위해 초기값을 설정하는 코드입니다.</li>
</ul>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initializeFileExplorer</span><span class="p">(){</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">$</span><span class="p">.</span><span class="nx">isEmptyObject</span><span class="p">(</span><span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">)</span> <span class="o">||</span><span class="p">(</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">.</span><span class="nx">type</span><span class="p">()</span> <span class="o">!==</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FILE</span> <span class="o">&&</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">.</span><span class="nx">type</span><span class="p">()</span> <span class="o">!==</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FOLDER</span> <span class="o">&&</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">.</span><span class="nx">type</span><span class="p">()</span> <span class="o">!==</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">EXT</span> <span class="p">))</span> <span class="k">return</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">eventData</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">portletId</span><span class="p">:</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">,</span>
<span class="na">targetPortlet</span><span class="p">:</span> <span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">fileExplorerId</span><span class="p">,</span>
<span class="na">data</span><span class="p">:</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Util</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">(</span><span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">)</span>
<span class="p">};</span>
<span class="nx">Liferay</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span> <span class="s1">'OSP_LOAD_DATA'</span><span class="p">,</span> <span class="nx">eventData</span> <span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<p><code class="highlighter-rouge">openFileExplorer</code>함수는 사용자가 서버 파일 오픈 메뉴를 선택하였을 때, 다이얼로그형태로 사용자에게 서버쪽 파일 리스트를 탐색한 내용을 업데이트 하여 보여주는 함수 부분입니다.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">openFileExplorer</span><span class="p">(){</span>
<span class="nx">AUI</span><span class="p">().</span><span class="nx">use</span><span class="p">(</span><span class="s1">'liferay-portlet-url'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">A</span><span class="p">){</span>
<span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">"#<portlet:namespace/>file-explorer-content"</span><span class="p">).</span><span class="nx">children</span><span class="p">().</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">){</span>
<span class="nx">$</span><span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">fileExplorerDialogSection</span><span class="p">.</span><span class="nx">dialog</span><span class="p">(</span><span class="s2">"open"</span><span class="p">);</span>
<span class="p">}</span><span class="k">else</span><span class="p">{</span>
<span class="kd">var</span> <span class="nx">inputData</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="o">!</span><span class="nx">$</span><span class="p">.</span><span class="nx">isEmptyObject</span><span class="p">(</span><span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">)</span> <span class="o">&&</span> <span class="p">(</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">.</span><span class="nx">type</span><span class="p">()</span> <span class="o">===</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FILE</span> <span class="o">||</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">.</span><span class="nx">type</span><span class="p">()</span> <span class="o">===</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FOLDER</span> <span class="o">||</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">.</span><span class="nx">type</span><span class="p">()</span> <span class="o">===</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">EXT</span> <span class="p">)){</span>
<span class="nx">inputData</span> <span class="o">=</span> <span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span><span class="p">{</span>
<span class="nx">inputData</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">InputData</span><span class="p">();</span>
<span class="nx">inputData</span><span class="p">.</span><span class="nx">repositoryType</span><span class="p">(</span> <span class="s1">'<%=OSPRepositoryTypes.USER_HOME.toString()%>'</span> <span class="p">);</span>
<span class="nx">inputData</span><span class="p">.</span><span class="nx">type</span><span class="p">(</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FOLDER</span> <span class="p">);</span>
<span class="nx">inputData</span><span class="p">.</span><span class="nx">parent</span><span class="p">(</span><span class="s1">''</span><span class="p">);</span>
<span class="nx">inputData</span><span class="p">.</span><span class="nx">name</span><span class="p">(</span><span class="s1">''</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">dialogURL</span> <span class="o">=</span> <span class="nx">Liferay</span><span class="p">.</span><span class="nx">PortletURL</span><span class="p">.</span><span class="nx">createRenderURL</span><span class="p">();</span>
<span class="nx">dialogURL</span><span class="p">.</span><span class="nx">setPortletId</span><span class="p">(</span><span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">fileExplorerId</span><span class="p">);</span>
<span class="nx">dialogURL</span><span class="p">.</span><span class="nx">setParameter</span><span class="p">(</span><span class="s1">'inputData'</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">inputData</span><span class="p">));</span>
<span class="nx">dialogURL</span><span class="p">.</span><span class="nx">setParameter</span><span class="p">(</span><span class="s1">'mode'</span><span class="p">,</span> <span class="s1">'VIEW'</span><span class="p">);</span>
<span class="nx">dialogURL</span><span class="p">.</span><span class="nx">setParameter</span><span class="p">(</span><span class="s1">'eventEnable'</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
<span class="nx">dialogURL</span><span class="p">.</span><span class="nx">setParameter</span><span class="p">(</span><span class="s1">'connector'</span><span class="p">,</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">);</span>
<span class="nx">dialogURL</span><span class="p">.</span><span class="nx">setWindowState</span><span class="p">(</span><span class="s1">'<%=LiferayWindowState.EXCLUSIVE%>'</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"#<portlet:namespace/>file-explorer-content"</span><span class="p">).</span><span class="nx">load</span><span class="p">(</span> <span class="nx">dialogURL</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span>
<span class="nx">$</span><span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">fileExplorerDialogSection</span><span class="p">.</span><span class="nx">dialog</span><span class="p">(</span><span class="s2">"open"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div></div>
<ul>
<li>현재 파일 다운로드
현재 선택되어 있는 파일을 다운로드 하는 함수입니다.</li>
</ul>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">downloadCurrentFile</span><span class="p">(){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"[testView] Download current data"</span><span class="p">,</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">currentData</span><span class="p">);</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">$</span><span class="p">.</span><span class="nx">isEmptyObject</span><span class="p">(</span><span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">currentData</span><span class="p">)</span> <span class="o">||</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">currentData</span><span class="p">.</span><span class="nx">type</span><span class="p">()</span> <span class="o">!==</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FILE</span> <span class="p">)</span>
<span class="k">return</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">filePath</span> <span class="o">=</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">currentData</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">command</span><span class="p">:</span> <span class="s2">"DOWNLOAD_FILE"</span><span class="p">,</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">pathType</span><span class="p">:</span> <span class="nx">filePath</span><span class="p">.</span><span class="nx">type_</span><span class="p">,</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">repositoryType</span><span class="p">:</span> <span class="nx">filePath</span><span class="p">.</span><span class="nx">repositoryType_</span><span class="p">,</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">parentPath</span><span class="p">:</span> <span class="nx">filePath</span><span class="p">.</span><span class="nx">parent_</span><span class="p">,</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">fileName</span><span class="p">:</span> <span class="nx">filePath</span><span class="p">.</span><span class="nx">name_</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">base</span> <span class="o">=</span> <span class="s1">'<%=serveResourceURL.toString()%>'</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">sep</span> <span class="o">=</span> <span class="p">(</span><span class="nx">base</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'?'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">?</span> <span class="s1">'&'</span> <span class="p">:</span> <span class="s1">'?'</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">url</span> <span class="o">=</span> <span class="nx">base</span> <span class="o">+</span> <span class="nx">sep</span> <span class="o">+</span> <span class="nx">$</span><span class="p">.</span><span class="nx">param</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
<span class="nx">location</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">url</span><span class="p">;</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">loadXXXXFile</span><span class="p">(</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">currentData</span> <span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>권예진<br>Yejin Kwonyejinkwon@kisti.re.krhttps://www.edison.re.kr파일 메뉴 설정 기본적으로 분석기를 EDISON 워크벤치와 연동을 하면서 필요한 파일 메뉴는 3가지 입니다. 현재 대부분의 워크벤치와 연동된 파일 메뉴는 로컬 파일 불러오기, 서버 파일 불러오기, 현재 파일 다운로드하기 가 있습니다. 이러한 파일 메뉴와 더불어 실제 파일을 불러와 가시화하는 가시화 부분을 호출하는 iframe도 같이 포함하여 정의합니다. 이러한 파일 메뉴는 이전 포스트에서 설정되어 있는 osp-analyzer.css에서 정의되어 있는 스타일을 사용합니다.초기값 설정2018-09-06T00:00:00+00:002018-09-06T00:00:00+00:00https://kwon6838.github.io//workbench/Analyzer-Development-Guide-5<p>EDISON 워크벤치와 연동을 하며 워크벤치에서 요구하는 이벤트를 처리하기 위해서는 기본적으로 셋팅이 완료되어야 하는 몇 가지 초기 값이 있습니다.</p>
<h3 id="데이터-전송-및-라이브러리-사용">데이터 전송 및 라이브러리 사용</h3>
<p>다음은 데이터 전송 및 기타 라이브러리들을 사용하기 위한 기본 코드 입니다.
<code class="highlighter-rouge">testview.jsp</code>파일 내부에 제일 위쪽 부분에 해당 라이브러리 호출 부분을 포함합니다.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><%</span><span class="p">@</span><span class="nd">page</span> <span class="k">import</span><span class="o">=</span><span class="s2">"com.kisti.osp.constants.OSPRepositoryTypes"</span><span class="o">%></span>
<span class="o"><%</span><span class="p">@</span><span class="nd">page</span> <span class="k">import</span><span class="o">=</span><span class="s2">"com.liferay.portal.kernel.util.GetterUtil"</span><span class="o">%></span>
<span class="o"><%</span><span class="p">@</span><span class="nd">page</span> <span class="k">import</span><span class="o">=</span><span class="s2">"com.liferay.portal.util.PortalUtil"</span><span class="o">%></span>
<span class="o"><%</span><span class="p">@</span><span class="nd">page</span> <span class="k">import</span><span class="o">=</span><span class="s2">"com.liferay.portal.kernel.portlet.LiferayWindowState"</span><span class="o">%></span>
<span class="o"><%</span><span class="p">@</span><span class="nd">page</span> <span class="k">import</span><span class="o">=</span><span class="s2">"javax.portlet.PortletPreferences"</span><span class="o">%></span>
<span class="o"><%</span><span class="p">@</span><span class="nd">include</span> <span class="nx">file</span><span class="o">=</span><span class="s2">"../init.jsp"</span><span class="o">%></span>
</code></pre></div></div>
<h3 id="라이프레이-url-추가">라이프레이 URL 추가</h3>
<p>라이프레이 데이터 전송 방식을 사용하기 위한 URL을 추가합니다.</p>
<p>데이터 전송을 위한 Liferay 포틀릿의 URL은 resourceURL입니다.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">resourceURL</span> <span class="kd">var</span><span class="o">=</span><span class="s2">"serveResourceURL"</span><span class="o">><</span><span class="sr">/portlet:resourceURL</span><span class="err">>
</span><span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">renderURL</span> <span class="kd">var</span><span class="o">=</span><span class="s2">"renderURL"</span><span class="o">></span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">param</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"jspPage"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"/html/testanalyzer/testview.jsp"</span><span class="o">/></span>
<span class="o"><</span><span class="sr">/portlet:renderURL</span><span class="err">>
</span></code></pre></div></div>
<h3 id="초기-데이터-셋팅을-위한-코드-추가">초기 데이터 셋팅을 위한 코드 추가</h3>
<p>워크벤치와 연동외어 동작하기 위해 필요한 기본값들의 초기 셋팅 값입니다.
이벤트 처리를 하는 워크벤치와 연동을 할 것인지 아니면 독립적으로 사용자에게 제공되어 동작할 것인지 호출하고 세팅하는 값이 포함되어 있습니다.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><%</span>
<span class="nx">PortletPreferences</span> <span class="nx">preferences</span> <span class="o">=</span> <span class="nx">portletDisplay</span><span class="p">.</span><span class="nx">getPortletSetup</span><span class="p">();</span>
<span class="nx">preferences</span><span class="p">.</span><span class="nx">setValue</span><span class="p">(</span><span class="s2">"portletSetupShowBorders"</span><span class="p">,</span> <span class="nb">String</span><span class="p">.</span><span class="nx">valueOf</span><span class="p">(</span><span class="nb">Boolean</span><span class="p">.</span><span class="nx">FALSE</span><span class="p">));</span>
<span class="nx">preferences</span><span class="p">.</span><span class="nx">store</span><span class="p">();</span>
<span class="nb">String</span> <span class="nx">inputData</span> <span class="o">=</span> <span class="nx">GetterUtil</span><span class="p">.</span><span class="nx">getString</span><span class="p">(</span><span class="nx">renderRequest</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s2">"inputData"</span><span class="p">),</span> <span class="s2">"{}"</span><span class="p">);</span>
<span class="nb">String</span> <span class="nx">connector</span> <span class="o">=</span> <span class="p">(</span><span class="nb">String</span><span class="p">)</span><span class="nx">renderRequest</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s2">"connector"</span><span class="p">);</span>
<span class="nb">String</span> <span class="nx">mode</span> <span class="o">=</span> <span class="nx">GetterUtil</span><span class="p">.</span><span class="nx">getString</span><span class="p">(</span><span class="nx">renderRequest</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s2">"mode"</span><span class="p">),</span> <span class="s2">"VIEW"</span><span class="p">);</span>
<span class="kr">boolean</span> <span class="nx">eventEnable</span> <span class="o">=</span> <span class="nx">GetterUtil</span><span class="p">.</span><span class="nx">getBoolean</span><span class="p">(</span><span class="nx">renderRequest</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s2">"eventEnable"</span><span class="p">),</span> <span class="kc">true</span><span class="p">);</span>
<span class="o">%></span>
</code></pre></div></div>
<h3 id="가시화-태그">가시화 태그</h3>
<p>워크벤치의 분석기를 개발 하는데 있어 이벤트를 처리하는 부분은 자바 스크립트로 이루어져 있으며, Liferay 포틀릿 기반으로 이벤트를 받아들입니다.</p>
<p>다음 예제 코드는 워크벤치가 실행되면서 분석기를 호출하고 이에 대한 응답을 하는 코드입니다.
Liferay 에서 제공하는 <code class="highlighter-rouge">Liferay.fire()</code>함수와 <code class="highlighter-rouge">Liferay.on()</code>기반으로 이벤트 프로세싱을 제공합니다.</p>
<ul>
<li>샘플 예제
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Liferay</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_HANDSHAKE</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">myId</span> <span class="o">=</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">targetPortlet</span> <span class="o">!==</span> <span class="nx">myId</span> <span class="p">){</span>
<span class="k">return</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'[NGLViewer]OSP_HANDSHAKE: ['</span><span class="o">+</span><span class="nx">e</span><span class="p">.</span><span class="nx">portletId</span><span class="o">+</span><span class="s1">', '</span><span class="o">+</span><span class="k">new</span> <span class="nb">Date</span><span class="p">()</span><span class="o">+</span><span class="s1">']'</span><span class="p">);</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">connector</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">portletId</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">mode</span> <span class="p">)</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">action</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">mode</span><span class="p">;</span>
<span class="k">else</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">action</span> <span class="o">=</span> <span class="s1">'VIEW'</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">events</span> <span class="o">=</span> <span class="p">[</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_EVENTS_REGISTERED</span><span class="p">,</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_LOAD_DATA</span>
<span class="p">];</span>
<span class="kd">var</span> <span class="nx">eventData</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">portletId</span><span class="p">:</span> <span class="nx">myId</span><span class="p">,</span>
<span class="na">targetPortlet</span><span class="p">:</span> <span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">connector</span><span class="p">,</span>
<span class="na">data</span><span class="p">:</span> <span class="nx">events</span>
<span class="p">};</span>
<span class="nx">Liferay</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_REGISTER_EVENTS</span><span class="p">,</span> <span class="nx">eventData</span> <span class="p">);</span>
<span class="p">}</span>
<span class="p">);</span>
</code></pre></div> </div>
</li>
<li><code class="highlighter-rouge">Liferay.fire()</code> : 이벤트를 발생시키는 Liferay 자바스크립트 라이브러리 함수입니다.</li>
<li><code class="highlighter-rouge">Liferay.on()</code> : 이벤트를 리스닝 하는 Liferay 자바스크립트 라이브러리 함수입니다.</li>
</ul>권예진<br>Yejin Kwonyejinkwon@kisti.re.krhttps://www.edison.re.krEDISON 워크벤치와 연동을 하며 워크벤치에서 요구하는 이벤트를 처리하기 위해서는 기본적으로 셋팅이 완료되어야 하는 몇 가지 초기 값이 있습니다.분석기 구조 설명2018-09-02T00:00:00+00:002018-09-02T00:00:00+00:00https://kwon6838.github.io//workbench/Analyzer-Development-Guide-4<p>EDISON 플랫폼에서 워크벤치와 연동되는 분석기는 모듈 단위로 개발 될 수 있으며, 각 모듈은 Liferay 포틀릿으로 구분됩다.
각 포틀릿에서 생성된 가시화 및 서비스 등은 EDISON 플랫폼에서 제공되는 서비스와 연동되어 개발될 수 있습니다.</p>
<h3 id="분석기와-edison-연동-시스템-구조">분석기와 EDISON 연동 시스템 구조</h3>
<p>EDSION 워크벤치 시뮬레이션 시스템과 연동되는 시스템 구조는 다음 그림과 같이 표현될 수 있습니다.</p>
<p><img src="/assets/images/analyzerguide1/analyzer architecture.png" alt="imagetestYejin" title="연동 구조" /><br /></p>
<p>분석기는 전체 이벤트를 처리하는 이벤트 처리부분과 내부적으로 데이터를 가시화하고 분석 할 수 있는 Analyzer 구현 부분으로 나눠질 수 있습니다.</p>
<p>EDISON 플랫폼에서 파생되는 이벤트를 받아들이고 적절한 시기에 사용자에게 데이터 분석을 위한 툴을 제공하는 부분을 포함하고 있습니다.</p>
<p>따라서 EDISON 워크벤치와 연동되는 분석기 모듈을 개발하기 위해서는 이벤트를 처리하는 부분과 실제 데이터 가시활르 위한 부분을 나눠서 개발을 해야 합니다.</p>
<h3 id="분석기-이벤트-처리-부분">분석기 이벤트 처리 부분</h3>
<p>워크벤치의 분석기를 개발 하는데 있어 이벤트를 처리하는 부분은 자바 스크립트로 이루어져 있으며, Liferay 포틀릿 기반으로 이벤트를 받아들입니다.</p>
<p>다음 예제 코드는 워크벤치가 실행되면서 분석기를 호출하고 이에 대한 응답을 하는 코드입니다.
Liferay 에서 제공하는 <code class="highlighter-rouge">Liferay.fire()</code>함수와 <code class="highlighter-rouge">Liferay.on()</code>기반으로 이벤트 프로세싱을 제공합니다.</p>
<ul>
<li>샘플 예제
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Liferay</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_HANDSHAKE</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">myId</span> <span class="o">=</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">targetPortlet</span> <span class="o">!==</span> <span class="nx">myId</span> <span class="p">){</span>
<span class="k">return</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'[NGLViewer]OSP_HANDSHAKE: ['</span><span class="o">+</span><span class="nx">e</span><span class="p">.</span><span class="nx">portletId</span><span class="o">+</span><span class="s1">', '</span><span class="o">+</span><span class="k">new</span> <span class="nb">Date</span><span class="p">()</span><span class="o">+</span><span class="s1">']'</span><span class="p">);</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">connector</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">portletId</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">mode</span> <span class="p">)</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">action</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">mode</span><span class="p">;</span>
<span class="k">else</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">action</span> <span class="o">=</span> <span class="s1">'VIEW'</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">events</span> <span class="o">=</span> <span class="p">[</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_EVENTS_REGISTERED</span><span class="p">,</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_LOAD_DATA</span>
<span class="p">];</span>
<span class="kd">var</span> <span class="nx">eventData</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">portletId</span><span class="p">:</span> <span class="nx">myId</span><span class="p">,</span>
<span class="na">targetPortlet</span><span class="p">:</span> <span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">connector</span><span class="p">,</span>
<span class="na">data</span><span class="p">:</span> <span class="nx">events</span>
<span class="p">};</span>
<span class="nx">Liferay</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_REGISTER_EVENTS</span><span class="p">,</span> <span class="nx">eventData</span> <span class="p">);</span>
<span class="p">}</span>
<span class="p">);</span>
</code></pre></div> </div>
</li>
<li><code class="highlighter-rouge">Liferay.fire()</code> : 이벤트를 발생시키는 Liferay 자바스크립트 라이브러리 함수입니다.</li>
<li><code class="highlighter-rouge">Liferay.on()</code> : 이벤트를 리스닝 하는 Liferay 자바스크립트 라이브러리 함수입니다.</li>
</ul>
<h3 id="데이터-처리-부분">데이터 처리 부분</h3>
<p>실제 서버에서 계산과학공학 시뮬레이션이 실행되고 결과 값을 분석하기 위해서는 시뮬레이션 결과를 호출하고 적절한 데이터를 받아 가시화 하는 데이터 처리 구현 부분입니다.
계산 결과 데이터를 수신하고 가시화 하기 위해서는 데이터 호출 및 응답에 대한 코드 구현이 필수적입니다.</p>
<p>이미 이전 단계에서 추가한 OSP 라이브러리를 기반으로 데이터를 호출하고 적절한 데이터를 받는 코드 부분이 구현 되어야 합니다.</p>
<p>이러한 데이터를 구현하기 위해서는 다양한 스크립트 함수들이 필요하며, 해당 함수들을 순차대로 정리하면 다음과 같습니다.</p>
<h3 id="데이터-처리를-위해-정의가-필요한-함수">데이터 처리를 위해 정의가 필요한 함수</h3>
<table>
<thead>
<tr>
<th style="text-align: left">함수명</th>
<th style="text-align: left">정의</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">loadXXXXFile(OSPInputData)</td>
<td style="text-align: left">실제 서버 사이드의 파일을 읽어오는 방법에 대한 정의<br />Output 포트의 path 타입에 따라 케이스를 나눠 처리 방법에 대한 정의가 되어 있음<br /> 폴더/확장자/파일</td>
</tr>
<tr>
<td style="text-align: left">getFirstFileName(OSPInputData)</td>
<td style="text-align: left">결과 포트의 path 타일이 폴더 또는 확장자인 경우, 해당 폴더 내 첫번째 파일을 읽어오는 역할이 정의</td>
</tr>
</tbody>
</table>
<p rules="groups" class="notice--info"><strong>데이터 처리 방법</strong> <br /> 서버에서 시뮬레이션 결과로 생성된 결과 데이터는 OSP 라이브러리를 이용하여 전송받을 수 있으며, 해당 데이터를 받은 다음 iframe 으로 연결된 실제 데이터 가시봐 부분에 데이터를 전공하는 방법으로 분석기가 동작하게 됩니다.</p>권예진<br>Yejin Kwonyejinkwon@kisti.re.krhttps://www.edison.re.krEDISON 플랫폼에서 워크벤치와 연동되는 분석기는 모듈 단위로 개발 될 수 있으며, 각 모듈은 Liferay 포틀릿으로 구분됩다. 각 포틀릿에서 생성된 가시화 및 서비스 등은 EDISON 플랫폼에서 제공되는 서비스와 연동되어 개발될 수 있습니다.REQUEST DATA EVENT2018-08-31T00:00:00+00:002018-08-31T00:00:00+00:00https://kwon6838.github.io//workbench/event/OSP-Event-3-REQUESTDATA<h3 id="osp-request-data-이벤트">OSP REQUEST DATA 이벤트</h3>
<p>사용자가 서버에 저장된 파일을 선택하거나 새로운 데이터를 로드하고자 할 때, 분석기나 편집기에서는 새로운 데이터를 요청해야 합니다. 따라서 분석기나 편집기에서는 새로운 데이터를 요청하는 이벤트를 발생시키고, 해당 이벤트를 받아 새로운 데이터를 받아오게 됩니다.</p>
<ul>
<li>샘플 예제
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Liferay</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_REQUEST_DATA</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">myId</span> <span class="o">=</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">targetPortlet</span> <span class="o">===</span> <span class="nx">myId</span> <span class="p">){</span>
<span class="kd">var</span> <span class="nx">iframe</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'<portlet:namespace/>TBox'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">eventData</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">portletId</span><span class="p">:</span> <span class="nx">myId</span><span class="p">,</span>
<span class="na">targetPortlet</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">portletId</span><span class="p">,</span>
<span class="na">data</span><span class="p">:</span> <span class="p">{</span>
<span class="na">type_</span><span class="p">:</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FILE_CONTENT</span><span class="p">,</span>
<span class="na">context_</span><span class="p">:</span> <span class="nx">iframe</span><span class="p">.</span><span class="nx">contentWindow</span><span class="p">.</span><span class="nx">getParameters</span><span class="p">(),</span>
<span class="na">params</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">params</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">Liferay</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span><span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_RESPONSE_DATA</span><span class="p">,</span> <span class="nx">eventData</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">);</span>
</code></pre></div> </div>
</li>
</ul>권예진<br>Yejin Kwonyejinkwon@kisti.re.krhttps://www.edison.re.krOSP REQUEST DATA 이벤트 사용자가 서버에 저장된 파일을 선택하거나 새로운 데이터를 로드하고자 할 때, 분석기나 편집기에서는 새로운 데이터를 요청해야 합니다. 따라서 분석기나 편집기에서는 새로운 데이터를 요청하는 이벤트를 발생시키고, 해당 이벤트를 받아 새로운 데이터를 받아오게 됩니다. 샘플 예제 Liferay.on( OSP.Event.OSP_REQUEST_DATA, function(e){ var myId = '<%=portletDisplay.getId()%>'; if( e.targetPortlet === myId ){ var iframe = document.getElementById('<portlet:namespace/>TBox'); var eventData = { portletId: myId, targetPortlet: e.portletId, data: { type_: OSP.Enumeration.PathType.FILE_CONTENT, context_: iframe.contentWindow.getParameters(), params: e.params } } Liferay.fire(OSP.Event.OSP_RESPONSE_DATA, eventData); } } );RESPONSE DATA EVENT2018-08-31T00:00:00+00:002018-08-31T00:00:00+00:00https://kwon6838.github.io//workbench/event/OSP-Event-4-RESPONSEDATA<h3 id="osp-response-data-이벤트">OSP RESPONSE DATA 이벤트</h3>
<ul>
<li>샘플 예제
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Liferay</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_RESPONSE_DATA</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span> <span class="nx">e</span> <span class="p">){</span>
<span class="kd">var</span> <span class="nx">myId</span> <span class="o">=</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">targetPortlet</span> <span class="o">!==</span> <span class="nx">myId</span> <span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"[ATOM EDITOR] OSP OSP_RESPONSE_DATA :"</span><span class="p">,</span> <span class="nx">e</span> <span class="p">);</span>
<span class="kd">var</span> <span class="nx">iframe</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'<portlet:namespace/>TBox'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">filePath</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">InputData</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">data</span> <span class="p">);</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">filePath</span><span class="p">.</span><span class="nx">type</span><span class="p">()</span> <span class="o">!==</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FILE</span> <span class="p">){</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'File Name is not available. Choose another one.'</span><span class="p">);</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span><span class="p">(</span> <span class="o">!<</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">saveAction</span> <span class="p">){</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">loadText</span><span class="p">(</span> <span class="nx">filePath</span><span class="p">,</span> <span class="kc">true</span> <span class="p">);</span>
<span class="nx">$</span><span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">fileExplorerDialogSection</span><span class="p">.</span><span class="nx">dialog</span><span class="p">(</span><span class="s1">'close'</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span><span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#<portlet:namespace/>uploadFileName'</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">filePath</span><span class="p">.</span><span class="nx">name</span><span class="p">());</span>
<span class="nx">filePath</span><span class="p">.</span><span class="nx">type</span><span class="p">(</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Enumeration</span><span class="p">.</span><span class="nx">PathType</span><span class="p">.</span><span class="nx">FILE_CONTENT</span> <span class="p">);</span>
<span class="nx">filePath</span><span class="p">.</span><span class="nx">context</span><span class="p">(</span> <span class="nx">iframe</span><span class="p">.</span><span class="nx">contentWindow</span><span class="p">.</span><span class="nx">getParameters</span><span class="p">()</span> <span class="p">);</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
<span class="na">url</span><span class="p">:</span> <span class="s1">'<%=serveResourceURL.toString()%>'</span><span class="p">,</span>
<span class="na">type</span><span class="p">:</span> <span class="s1">'POST'</span><span class="p">,</span>
<span class="na">dataType</span><span class="p">:</span> <span class="s1">'json'</span><span class="p">,</span>
<span class="na">data</span><span class="p">:{</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">command</span><span class="p">:</span> <span class="s2">"CHECK_DUPLICATED"</span><span class="p">,</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">repositoryType</span><span class="p">:</span> <span class="nx">filePath</span><span class="p">.</span><span class="nx">repositoryType</span><span class="p">(),</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">parentPath</span><span class="p">:</span> <span class="nx">filePath</span><span class="p">.</span><span class="nx">parent</span><span class="p">(),</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="na">fileName</span><span class="p">:</span> <span class="nx">filePath</span><span class="p">.</span><span class="nx">name</span><span class="p">()</span>
<span class="p">},</span>
<span class="na">success</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">duplicated</span> <span class="o">=</span> <span class="nx">result</span><span class="p">.</span><span class="nx">duplicated</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">duplicated</span> <span class="p">){</span>
<span class="kd">var</span> <span class="nx">confirmDialog</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#<portlet:namespace/>confirmDialog'</span><span class="p">);</span>
<span class="nx">confirmDialog</span><span class="p">.</span><span class="nx">dialog</span><span class="p">(</span>
<span class="p">{</span>
<span class="na">resizable</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="na">height</span><span class="p">:</span> <span class="s2">"auto"</span><span class="p">,</span>
<span class="na">width</span><span class="p">:</span> <span class="mi">400</span><span class="p">,</span>
<span class="na">modal</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">buttons</span><span class="p">:</span> <span class="p">{</span>
<span class="s1">'OK'</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span> <span class="k">this</span> <span class="p">).</span><span class="nx">dialog</span><span class="p">(</span> <span class="s1">'destroy'</span> <span class="p">);</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">saveContentAs</span> <span class="p">(</span> <span class="nx">filePath</span> <span class="p">);</span>
<span class="nx">$</span><span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">fileExplorerDialogSection</span><span class="p">.</span><span class="nx">dialog</span><span class="p">(</span><span class="s1">'close'</span><span class="p">);</span>
<span class="p">},</span>
<span class="na">Cancel</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span> <span class="k">this</span> <span class="p">).</span><span class="nx">dialog</span><span class="p">(</span> <span class="s1">'destroy'</span> <span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span><span class="p">{</span>
<span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">saveContentAs</span> <span class="p">(</span> <span class="nx">filePath</span> <span class="p">);</span>
<span class="nx">$</span><span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">fileExplorerDialogSection</span><span class="p">.</span><span class="nx">dialog</span><span class="p">(</span><span class="s1">'close'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="na">error</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">e</span><span class="p">,</span> <span class="nx">d</span> <span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">' [ATOM EDITOR] file save error'</span><span class="p">,</span> <span class="nx">e</span><span class="p">,</span> <span class="nx">d</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">);</span>
</code></pre></div> </div>
</li>
</ul>권예진<br>Yejin Kwonyejinkwon@kisti.re.krhttps://www.edison.re.krOSP RESPONSE DATA 이벤트LOAD DATA EVENT2018-08-31T00:00:00+00:002018-08-31T00:00:00+00:00https://kwon6838.github.io//workbench/event/OSP-Event-5-LOADDATA<h3 id="osp-load-data-이벤트">OSP LOAD DATA 이벤트</h3>
<p>편집기 또는 분석기에서 데이터를 로드할 때 사용되는 이벤트로, 서버에 저장되어 있는 파일을 로드하거나 시뮬레이션 결과 데이터를 로드할 때 쓰이는 이벤트입니다.</p>
<p>사용자가 서버쪽 파일을 선택하거나 시뮬레이션이 성공적으로 종료되는 상황에서 워크벤치에서 이벤트를 발생시키며, 이벤트 데이터 내 파일 경로에 따라 파일을 읽어 들이는 프로세스를 거쳐 사용자에게 보여줍니다.</p>
<ul>
<li>샘플 예제
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Liferay</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span>
<span class="s1">'OSP_LOAD_DATA'</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">myId</span> <span class="o">=</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"[ATOM EDITOR] OSP LOAD DATA :"</span><span class="p">,</span> <span class="nx">myId</span><span class="p">,</span> <span class="nx">e</span><span class="p">.</span><span class="nx">targetPortlet</span> <span class="p">);</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">targetPortlet</span> <span class="o">!==</span> <span class="nx">myId</span> <span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="o">!</span> <span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">.</span><span class="nx">repositoryType_</span><span class="p">){</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">.</span><span class="nx">repositoryType_</span> <span class="o">=</span> <span class="s1">'USER_HOME'</span><span class="p">;</span>
<span class="p">}</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">loadEPDEditor</span><span class="p">(</span> <span class="nx">OSP</span><span class="p">.</span><span class="nx">Util</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">(</span><span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initData</span><span class="p">)</span> <span class="p">);</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initializeFileExplorer</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">);</span>
</code></pre></div> </div>
</li>
</ul>권예진<br>Yejin Kwonyejinkwon@kisti.re.krhttps://www.edison.re.krOSP LOAD DATA 이벤트 편집기 또는 분석기에서 데이터를 로드할 때 사용되는 이벤트로, 서버에 저장되어 있는 파일을 로드하거나 시뮬레이션 결과 데이터를 로드할 때 쓰이는 이벤트입니다.INITIAIZE EVENT2018-08-31T00:00:00+00:002018-08-31T00:00:00+00:00https://kwon6838.github.io//workbench/event/OSP-Event-6-INITIALIZE<h3 id="osp-initiaize-이벤트">OSP INITIAIZE 이벤트</h3>
<p>워크벤치가 실행된 이후, 초기화 값을 셋팅하는 이벤트 입니다. 워크벤치가 실행되고 시뮬레이션 실행 환경이 구성되고 난 뒤, 각 편집기나 분석기에서는 필요한 값들의 초기화를 진행하는데 이 때 사용되는 이벤트입니다.</p>
<ul>
<li>샘플 예제
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Liferay</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span>
<span class="s1">'OSP_INITIALIZE'</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">myId</span> <span class="o">=</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">targetPortlet</span> <span class="o">!==</span> <span class="nx">myId</span> <span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="o"><</span><span class="nx">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">initializeFileExplorer</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">);</span>
</code></pre></div> </div>
</li>
</ul>권예진<br>Yejin Kwonyejinkwon@kisti.re.krhttps://www.edison.re.krOSP INITIAIZE 이벤트 워크벤치가 실행된 이후, 초기화 값을 셋팅하는 이벤트 입니다. 워크벤치가 실행되고 시뮬레이션 실행 환경이 구성되고 난 뒤, 각 편집기나 분석기에서는 필요한 값들의 초기화를 진행하는데 이 때 사용되는 이벤트입니다.REQUEST OUTPUT VIEW EVENT2018-08-31T00:00:00+00:002018-08-31T00:00:00+00:00https://kwon6838.github.io//workbench/event/OSP-Event-7-REFRESHOUTPUTVIEW<h3 id="osp-request-output-view-이벤트">OSP REQUEST OUTPUT VIEW 이벤트</h3>
<ul>
<li>샘플 예제
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Liferay</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span>
<span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_REFRESH_OUTPUT_VIEW</span><span class="p">,</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">myId</span> <span class="o">=</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span> <span class="nx">myId</span> <span class="o">!==</span> <span class="nx">e</span><span class="p">.</span><span class="nx">targetPortlet</span> <span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">eventData</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">portletId</span><span class="p">:</span> <span class="s1">'<%=portletDisplay.getId()%>'</span><span class="p">,</span>
<span class="na">targetPortlet</span><span class="p">:</span> <span class="o"><</span><span class="na">portlet</span><span class="p">:</span><span class="nx">namespace</span><span class="o">/></span><span class="nx">connector</span>
<span class="p">};</span>
<span class="nx">Liferay</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span><span class="nx">OSP</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">OSP_REQUEST_OUTPUT_PATH</span><span class="p">,</span> <span class="nx">eventData</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">);</span>
</code></pre></div> </div>
</li>
</ul>권예진<br>Yejin Kwonyejinkwon@kisti.re.krhttps://www.edison.re.krOSP REQUEST OUTPUT VIEW 이벤트