Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Controlled vocabulary support for free text fields and drop down fiel…
Browse files Browse the repository at this point in the history 
…ds when using flat files
  • Loading branch information
@bbpennel
bbpennel committed Nov 1, 2012
1 parent 29851fc commit 4f18640
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 3 deletions.
73 changes: 70 additions & 3 deletions forms/src/main/webapp/WEB-INF/jsp/form.jsp
View file
Expand Up @@ -19,19 +19,51 @@
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ 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="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> <!doctype html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/static/css/reset.css" /> <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="/static/css/cdrui_styles.css" />
<link rel="stylesheet" type="text/css" href="css/cdr_forms.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/jquery.min.js"></script>
<script type="text/javascript" src="/cdradmin/js/jquery/ui/jquery-ui.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"> <script type="text/javascript">
$(document).ready( function() { $(document).ready( function() {
$(".datepicker").datepicker({ $(".datepicker").datepicker({
Expand All @@ -46,9 +78,27 @@
}, yearRange : '-300:+02' }).val($.datepicker.formatDate('yy-mm', new Date())); }, yearRange : '-300:+02' }).val($.datepicker.formatDate('yy-mm', new Date()));
// $(".datepicker").datepicker('option', 'constrainInput', true); // $(".datepicker").datepicker('option', 'constrainInput', true);
// $(".datepicker").datepicker('option', 'maxDate', '+0m +0w'); // $(".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> </script>




<!--[if IE 8]> <!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="/static/css/cdrui_styles_ie8.css" /> <link rel="stylesheet" type="text/css" href="/static/css/cdrui_styles_ie8.css" />
<![endif]--> <![endif]-->
Expand Down Expand Up @@ -105,7 +155,24 @@
<% if(status.getValue() instanceof DateInputField) { %> <% if(status.getValue() instanceof DateInputField) { %>
<form:input cssClass="datepicker" path="elements[${elementRow.index}].ports[${portRow.index}].enteredValue" title="${port.usage}" /> <form:input cssClass="datepicker" path="elements[${elementRow.index}].ports[${portRow.index}].enteredValue" title="${port.usage}" />
<% } else if(status.getValue() instanceof TextInputField) { %> <% } 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 { %> <% } else { %>
<form:input path="elements[${elementRow.index}].ports[${portRow.index}].enteredValue" title="${port.usage}" /> <form:input path="elements[${elementRow.index}].ports[${portRow.index}].enteredValue" title="${port.usage}" />
<% } %> <% } %>
Expand Down
77 changes: 77 additions & 0 deletions forms/src/main/webapp/css/cdr_forms.css
View file
Expand Up @@ -39,4 +39,81 @@


.ui-datepicker-calendar { .ui-datepicker-calendar {
display: none; 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.