개요

이번에는, 중편 로 작성한 하기의 화면의 소스의 해설을 실시한다.

BootStrap 스타일 사용

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"></link>

Bootstrap의 스타일 시트를 사용하여 약간의 외형을 향상시킵니다.
HTML중의 class 지정은 모두 Bootstrap로 정의되고 있는 스타일 시트를 지정.

입력 값을 서버 스크립트로 보내고 서버 측 스크립트의 설정 값으로 수신

<input type="text" class="form-control" name="searchWord" placeholder="検索ワード" value="${searchWord}"></input>

요청 매개 변수에 키 이름 = "searchWord"로 입력 값을 서버로 보냅니다.

value="${searchWord}"

의 ${searchWorld}는 서버에서 설정한 값을 받기 위한 플레이스 폴더이다.
이것이 없으면 검색 버튼을 눌러 화면을 다시 그리면 검색 키워드가 사라집니다.
서버측 Processing Script에서

var searchWord = searchWord;

좌변의 변수는 서버측의 변수이다. 이것을 클라이언트에서 받는 것이 HTML의 ${searchWord}이다.
우변은 클라이언트로부터 송신된 리퀘스트 파라미터로부터 키가 searchWord의 값을 취득하고 있다.

REST Message 호출

var r = new sn_ws.RESTMessageV2('x_58872_needit.iTunesSearch', 'Default GET');

이 코드는 Rest Message의 HTTP Method 설정 화면의 「Preview Script Usage」의 링크를 클릭하는 것으로 표시되는 코드를 카피한 것이다.
r은 REST Message를 전송하기 위한 객체의 인스턴스이다.
이것에 요구 파라미터를 설정해, execute()에 의해 Rest API를 실행한다.

r.setStringParameterNoEscape('term', searchWord);

Rest Message의 term 매개 변수에 searchWord를 설정했습니다.

REST API 반환 값의 JSON 구문 분석

 var parser = new global.JSON();
 var parsed = parser.decode(responseBody);

parsed에 JSON 메시지 변환된 객체가 저장된다.

검색 결과 표시

검색 결과의 표시 부분은 아래와 같다.

<j:forEach items="${parsed.results}" var="jvar_item" indexVar="i">
                <g:evaluate jelly="true" object="true">
                    var trackName = jelly.jvar_item.trackName;
                    var jacketUrl = jelly.jvar_item.artworkUrl60;
                    var idx = jelly.i + 1 + '';
                </g:evaluate>
                 <tr>
                     <td>${idx}</td>
                     <td><img src="${jacketUrl}" /></td>
                     <td>${trackName}</td>
                 </tr>
             </j:forEach>

iTunes Search API 반환 값 JSON 메시지의 결과는 검색 결과가 배열로 저장됩니다. 배열의 하나 하나의 값은 연관 배열이다.
trackName이나 artworkUrl60은 연상 배열의 키이다.

<j:forEach items="${parsed.results}" var="jvar_item" indexVar="i">

는 jelly의 문법으로, ${parsed.result}로 받은 배열로부터 값을 순서대로 꺼내 처리하는 루프분이 된다. 검색된 값은 jvar_item에 저장됩니다.
indexVar은 필수는 아니지만 루프 내에서 행 번호를 출력하는 데 사용됩니다.

var trackName = jelly.jvar_item.trackName;

jvar_item에 검색 결과 1행분이 연상 배열로 저장되어 있기 때문에, 키명으로 값을 꺼내고 있다.

var idx = jelly.i + 1 + '';

인덱스로서 사용하고 있는 i는, 0으로부터 시작되기 때문에, 행 번호로 하기 위해서 1 더하고 나서, 캐릭터 라인에 변환을 위해, ''를 더하고 있다.
문자열로 변환하지 않고 그대로 출력하면 행 번호에 "1.0"이 출력됩니다.

마지막으로

시작해 아직 1주일 정도이므로, 불필요한 둘레를 하고 있거나, 잘못된 해설을 하고 있는 일도 생각할 수 있다.
눈치채는 점이 있으면, 지적을 부탁하고 싶다.
앞으로는 이번 iTunes 검색 화면을 Ajax에서 실시하거나 ServiceNow의 기타 화면 디자인의 분위기를 맞추어 가는 방법을 조사해 투고해 나갈 예정이다.
또한 페이지 네이션을 자체 구현하는 것보다 검색 결과를 임시 트랜잭션 테이블에 등록하고 검색 결과를 ServiceNow의 Form으로 표시하여 페이지 네이션을 ServiceNow의 Form 기능에 맡기는 방법도 조사해 나갈 예정입니다. 있습니다.