참고값 Select Box 만들기 - TheOpenCloudEngine/metaworks GitHub Wiki
일반 SelectBox 는 메타웍스로 이미 만들어진 Select 태그를 기반으로 한 간단한 컴포넌트를 사용함으로서 사용 가능하다:
SelectBox selectBox;
selectBox.getOptionNames().add("opt1");
selectBox.getOptionNames().add("opt2");
selectBox.getOptionNames().add("opt3");
selectBox.getOptionValues().add("val1");
selectBox.getOptionValues().add("val2");
selectBox.getOptionValues().add("val3");
selectBox.getSelected();
SelectBox.loadOptions 메서드는 option 값이 없을 때 Callback 되며 값을 동적으로 얻어오고자 할때 구현한.
public class RoleSelectorFace extends SelectBox implements Face<Role>{
@Override
public void setValueToFace(Role value) {
if(value != null) {
if(getOptionNames() == null || getOptionNames().size() == 0){
ArrayList<String> options = new ArrayList<String>();
options.add(value.getName());
setOptionNames(options);
setOptionValues(options);
}
setSelectedValue(value.getName());
}
}
@Override
public Role createValueFromFace() {
String roleName = getSelectedText();
return Role.forName(roleName);
}
@ServiceMethod(inContextMenu = true) // loadOptions 메서드는 option 값이 없을 때 동적으로 얻어온다.
public void loadOptions(@Payload("selected") String selected, @AutowiredFromClient Canvas canvas){
if(canvas != null){
List<Role> roleList = MappingTree.parseRoles(canvas);
if(roleList !=null) {
ArrayList<String> options = new ArrayList<String>();
for (Role role : roleList) {
options.add(role.getName());
}
setOptionNames(options);
setOptionValues(options);
}
}
setMetaworksContext(new MetaworksContext());
getMetaworksContext().setWhen(MetaworksContext.WHEN_EDIT);
setValueToFace(Role.forName(selected));
}
}
SelectBox html element 에 click event를 걸어서 option 값이 1개 이하이면 loadOptions 메서드를 서버로 호출 시도한다. 만약 메서드가 구현되어있지 않으면 무시된다.
var org_metaworks_component_SelectBox = function(objectId, className) {
this.objectId = objectId;
this.className = className;
...
$(selectBoxId).bind('click', function(e){
var element = $(e.target);
var optionSize = element[0].length;
if(optionSize < 2){
var objectId = element[0].id.split("_")[1];
var obj = mw3.objects[objectId];
if(obj.loadOptions)
obj.loadOptions();
}
});
};