input 태그에 선택한 항목이 label로 출력되게 해주는 choices.js 소개

web/javaScript|2018. 6. 17. 21:06

현재 공부하려고 개인적으로 만들고 있는 프로젝트 위들포스에서 사용자를 검색하고 input 박스위에 레이블처럼 보여주는 기능이 필요했다.

 

아무리 찾아보아도 좋은 라이브러리가 없었는데 choices.js의 이미지를 보니 좀 좋아보여서 적용해 보았다.

우선 내 프로젝트에 적용된 하면은 이렇다.

 

[홈페이지 및 github]

https://joshuajohnson.co.uk/Choices/

https://github.com/jshjohnson/Choices

홈페이지에는 예제가 여러개 나열되어 있고, 필요에 따라 소스보기를 통해 참고할 수 있다. github에는 document가 있어서 사용할 수 있는 속성들이 나열되어 있다.

 

[사용방법]

간단한 사용방법은 github에서 소스를 받거나 npm install choices.js를 통해 소스를  내려받을 수 있다.

필수로 필요한 파일은 assets/script/dist/choices.js와 icon, image, base.css, choices.css가 필요하다.

 

페이지에서 <script>와 <link>를 통해서 로드를 하거나 웹팩에서 import를 사용하여 가져올 수 있다. 그리고 html페이지에 input 태그를 하나 생성하고 다음과 같이 적용하면 된다.

<!-- html -->
<div id="messageTargetSearch">
  <div id="messageTargetLabel">
    <label for="messageTargetInput"><spring:message code="message.title.user"/></label>
 </div>
 <input id="messageTargetInput" class="form-control" type="text" placeholder="Search..">
</div>


<!-- javascript -->
const messageTargetInput = document.getElementById('messageTargetInput');
const choices = new Choices(messageTargetInput, {
  delimiter: ',',
  editItems: true,
  maxItemCount: 1,
  removeItemButton: true,
  addItemText: function(value) {
    return 'Please Enter to add user <b>"' + String(value) + '"</b>';
  },
});


delimiter, editItems등 기타 옵션들은 github 페이지에 가면 자세히 나열되어 있다.

그리고 이벤트를 등록하려면 여러가지 이벤트들이 제공이 되는데 addItem과 removeItem에 대한 소스만 잠깐보자. 이게 적용이 되기전 그러니까 추가 또는 삭제가 되기전에 이벤트를 잡아주면 좋은데 그렇지 못해서 나는 따로 validate검사를 하고 validate가 적합하지 않으면 다시 추가 또는 제거해주는 코드를 별도로 넣었다. 좋은 방법이 있으면 추천 바랍니다~

messageTargetInput.addEventListener('addItem', (event) => {
  // do something creative here...
  console.log(event.detail.id);
  console.log(event.detail.value);
  console.log(event.detail.label);
  console.log(event.detail.groupValue);
  //choices.removeItemsByValue(event.detail.value);
}, false);

messageTargetInput.addEventListener('removeItem', (event) => {

  if (!confirm(Common.getMessage('message.message.close'))) {
    choices.setValue([
      {value: event.detail.value, label: event.detail.label}
    ]);
  }

  // do something creative here...
  console.log(event.detail.id);
  console.log(event.detail.value);
  console.log(event.detail.label);
  console.log(event.detail.groupValue);

}, false);

아쉬운건 아이콘을 svg파일을 사용하는데 webpack에서 svg loader를 적용하여도 정상적으로 로드가 되지 않아서 좀 애를 먹었다. 

다른사람들도 검색해보니 동일한 문제를 겪은 사람이 있는데 해결은 안되었다. 아래 URL 참고

https://github.com/jshjohnson/Choices/issues/223

 

보시는분들중 이런 라이브러리들이 좋은게 있으면 추천 부탁드립니다.

댓글()

rcp toolbar에서 label등 각종 contribution item 생성방법

RCP/SWT & JFACE|2016. 12. 24. 00:07

    ToolBarManager manager = new ToolBarManager(SWT.FLAT | SWT.HORIZONTAL);
    
LabelContributionItem labelItem = new LabelContributionItem("myLabelId");  //Label ContibutionItem 생성
    manager.add(labelItem);
    
TextContributionItem textItem = new TextContributionItem("myTextId");
    manager.add(textItem);
    
ToolBar toolbar = manager.createControl(parent);
    
return toolbar;

 

출처: <http://stackoverflow.com/questions/28900682/what-is-the-proper-way-to-add-custom-controls-to-the-eclipse-toolbar-using-work>

댓글()

Viwer의 종류와 프로바이더 종류 및 설명

RCP/RCP|2016. 12. 23. 23:50

Viewer


- ContentViewer, StructuredViewer이 존재한다.

1. ContentViewer 

- 다양한 인터페이스를 활용해서 도메인 객체 형태를 유지하면서 데이터를 다룬다. 이들 인터페이스는 JFace 관례에 따라 이름 앞에 I가 붙는다.

- StructuredViewer는 ContentViewer에게 제공하는 데이터를 구조화 한다. 구조화하는 것은 넒은 범위를 의미하지만 필터링이나 정렬 같은 일반적인 작업을 실행하는 메소드들이 이계층에서 구현된다.



프로바이더(Provider)

- 애플리케이션에 고유한 작업을 수행하여 위젯에서 사용가능한 데이터 부분을 만들어 낸다. 

- 리스트에서 도메인 객체를 나태내기위해 화면에 보여야 할 텍스트를 반환하는 일 등을 한다.

1. LabelProvider

- 요소를 보여주기 위한 텍스트나 이미지를 제공한다.

2. ContentViewer

- 레이블 프로바이더의 역할에도 관여를 하지만 실제적으로 요소를 보이게끔 해준다.

댓글()