Permalink
Browse files

Controlled vocabulary support for free text fields and drop down fiel…

…ds when using flat files
  • Loading branch information...
bbpennel committed Nov 1, 2012
1 parent 29851fc commit 4f186400134ef4479b1db4248dae0f60abe99141
Showing with 147 additions and 3 deletions.
  1. +70 −3 forms/src/main/webapp/WEB-INF/jsp/form.jsp
  2. +77 −0 forms/src/main/webapp/css/cdr_forms.css
@@ -19,19 +19,51 @@
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="crosswalk.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="true"%>
+<%@ page import="java.util.*"%>
+<%@ page import="crosswalk.impl.*"%>
+<%@ page import="java.net.URL"%>
+<%@ page import="java.io.*"%>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/static/css/reset.css" />
+<link type="text/css" href="/static/css/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/static/css/cdrui_styles.css" />
<link rel="stylesheet" type="text/css" href="css/cdr_forms.css" />
-<link type="text/css" href="/cdradmin/css/jquery/ui/jquery-ui.css" rel="stylesheet" />
-
<script type="text/javascript" src="/cdradmin/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/cdradmin/js/jquery/ui/jquery-ui.min.js"></script>
+<%
+Map<Integer,List<String>> vocabURLMap = new HashMap<Integer,List<String>>();
+for (Object element: ((FormImpl)request.getAttribute("form")).getElements()) {
+ if (element instanceof MetadataBlockImpl) {
+ MetadataBlockImpl mdBlock = (MetadataBlockImpl)element;
+ for (Object fieldObj: mdBlock.getPorts()) {
+ if (fieldObj instanceof TextInputFieldImpl) {
+ TextInputFieldImpl textField = (TextInputFieldImpl)fieldObj;
+ if (textField.getVocabularyURL() != null) {
+ if (!vocabURLMap.containsKey(textField.getVocabularyURL().hashCode())) {
+ List<String> vocabList = new ArrayList<String>();
+ URL vocabURL = new URL(textField.getVocabularyURL());
+ BufferedReader br = new BufferedReader(new InputStreamReader(vocabURL.openStream()));
+ String vocabEntry;
+ while ((vocabEntry = br.readLine()) != null) {
+ vocabList.add(vocabEntry);
+ }
+ br.close();
+ vocabURLMap.put(textField.getVocabularyURL().hashCode(), vocabList);
+ }
+ }
+ }
+ }
+ }
+}
+pageContext.setAttribute("vocabURLMap", vocabURLMap);
+//out.println(vocabURLMap.toString());
+%>
+
<script type="text/javascript">
$(document).ready( function() {
$(".datepicker").datepicker({
@@ -46,9 +78,27 @@
}, yearRange : '-300:+02' }).val($.datepicker.formatDate('yy-mm', new Date()));
// $(".datepicker").datepicker('option', 'constrainInput', true);
// $(".datepicker").datepicker('option', 'maxDate', '+0m +0w');
+
+ <%
+ for (Map.Entry<Integer,List<String>> vocabEntry: vocabURLMap.entrySet()) {
+ out.print("$(\".cv_" + vocabEntry.getKey() + "\").autocomplete({source: [");
+ boolean first = true;
+ for (String vocabValue: vocabEntry.getValue()) {
+ if (first){
+ first = false;
+ } else {
+ out.print(",");
+ }
+ out.print("\"" + vocabValue + "\"");
+ }
+ out.println("]});");
+ }
+ %>
});
</script>
+
+
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="/static/css/cdrui_styles_ie8.css" />
<![endif]-->
@@ -105,7 +155,24 @@
<% if(status.getValue() instanceof DateInputField) { %>
<form:input cssClass="datepicker" path="elements[${elementRow.index}].ports[${portRow.index}].enteredValue" title="${port.usage}" />
<% } else if(status.getValue() instanceof TextInputField) { %>
- <form:input path="elements[${elementRow.index}].ports[${portRow.index}].enteredValue" title="${port.usage}" maxlength="${port.maxSize}" size="${port.preferredSize}" />
+ <c:choose>
+ <c:when test="${port.vocabularyURL != null}">
+ <c:choose>
+ <c:when test="${port.allowFreeText}">
+ <form:input path="elements[${elementRow.index}].ports[${portRow.index}].enteredValue" title="${port.usage}" maxlength="${port.maxSize}" size="${port.preferredSize}" cssClass="cv_${port.vocabularyURL.hashCode()}"/>
+ </c:when>
+ <c:otherwise>
+ <form:select path="elements[${elementRow.index}].ports[${portRow.index}].enteredValue" title="${port.usage}">
+ <form:options items="${vocabURLMap[port.vocabularyURL.hashCode()]}"/>
+ </form:select>
+ </c:otherwise>
+ </c:choose>
+ </c:when>
+ <c:otherwise>
+ <form:input path="elements[${elementRow.index}].ports[${portRow.index}].enteredValue" title="${port.usage}" maxlength="${port.maxSize}" size="${port.preferredSize}" />
+ </c:otherwise>
+ </c:choose>
+
<% } else { %>
<form:input path="elements[${elementRow.index}].ports[${portRow.index}].enteredValue" title="${port.usage}" />
<% } %>
@@ -39,4 +39,81 @@
.ui-datepicker-calendar {
display: none;
+}
+
+/* Autocomplete
+----------------------------------*/
+.ui-autocomplete {
+ position: absolute;
+ cursor: default;
+ background-color: white;
+ border: 2px solid #CECECE;
+ font-size: 12px;
+ padding: 0;
+ z-index: 99999;
+ max-height: 300px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #fff;
+ width: 300px;
+}
+
+
+
+/* workarounds */
+* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
+
+
+/* Menu
+----------------------------------*/
+.ui-menu {
+ list-style:none;
+ padding: 2px;
+ margin: 0;
+ display:block;
+}
+.ui-menu .ui-menu {
+ margin-top: -3px;
+}
+.ui-menu .ui-menu-item {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+.ui-menu .ui-menu-item a {
+ text-decoration:none;
+ display:block;
+ line-height:1.5;
+ zoom:1;
+}
+.ui-menu .ui-menu-item a.ui-state-hover,
+.ui-menu .ui-menu-item a.ui-state-active {
+ margin: -1px;
+}
+
+.ui-autocomplete ul {
+ list-style: none outside none;
+ margin: 15px 0 -4px;
+ padding: 4px;
+}
+.ui-autocomplete li {
+ color: #000000;
+ display: block;
+ overflow: hidden;
+ padding: 5px 0;
+ text-align: left;
+ text-decoration: none;
+ text-indent: 0;
+}
+.ui-autocomplete li a {
+ padding: 0.2em 0.4em;
+ padding-left: 1.7em;
+ text-indent: -1.5em;
+ font-weight: normal;
+}
+
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover{
+ font-weight: normal;
+ background-color: #E2F6FF;
+ color: #566;
}

0 comments on commit 4f18640

Please sign in to comment.