Community UI Development
| Community Development Best Practices edit | |
Documents the practices for UI Development for each technology that is in use.
Contents
Definition
| This article is in a draft stage. |
UI stands for User Interface and involves the development of the screens that the user sees and the methods used to display and save data from these user screens.
Technologies
JavaScript/jQuery
JavaScript is a scripting language used to enable programmatic access to objects within other applications. It is primarily used in the form of client-side JavaScript for the development of dynamic websites. While jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.
RESTful Web Services
REST application have become quite common place and most languages now have documentation on how to create a REST app. Apache's CXF provides the ability to respond to RESTful requests. For an official definition of REST click here or go to the official CXF website.
JSF
Java Server Faces (JSF) is an open source web application framework intended to simplify the development of user interfaces. JSF is used on the server side when generating the HTML for the client view to populate dynamic sections of the file.
Application
Detailed documentation of what technologies are used and how they are used within a technology stack.
Java Web Technology Stack
The Java Web application framework uses :
- RESTful Web Services
- JSF - Java Server Faces
- JavaScript/jQuery
An example of a project that uses the Java Web Technology Stack is Local Unit Calendar (LUC). The source code of LUC will be referenced in the next few sections. The base project is accessible through the SVN repository at https://dev.lds.org/svn/calendar . Anyone with an LDS Account will be able to view the source code by browsing to the base project. If you need access to check out the project then special access will need to be granted to you.
RESTful Web Services
- Add the dependencies to the application dependencies in the pom.xml.
<dependency>
<groupId>org.lds.stack.integrations</groupId>
<artifactId>stack-cxf</artifactId>
</dependency>
<dependency>
<groupId>opensaml</groupId>
<artifactId>opensaml</artifactId>
<version>1.1</version>
</dependency>
<dependency>
<groupId>org.apache.cxf</groupId>
<artifactId>cxf-rt-frontend-jaxrs</artifactId>
<version>2.1.3</version>
<exclusions>
<exclusion>
<groupId>org.apache.geronimo.specs</groupId>
<artifactId>geronimo-jaxws_2.1_spec</artifactId>
</exclusion>
<exclusion>
<groupId>org.apache.geronimo.specs</groupId>
<artifactId>geronimo-javamail_1.4_spec</artifactId>
</exclusion>
<exclusion>
<groupId>org.apache.geronimo.specs</groupId>
<artifactId>geronimo-activation_1.1_spec</artifactId>
</exclusion>
<exclusion>
<groupId>org.apache.geronimo.specs</groupId>
<artifactId>geronimo-annotation_1.0_spec</artifactId>
</exclusion>
<exclusion>
<groupId>stax</groupId>
<artifactId>stax-api</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>spring-beans</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>spring-dao</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>spring-remoting</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>spring-support</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
</exclusion>
<exclusion>
<groupId>velocity</groupId>
<artifactId>velocity</artifactId>
</exclusion>
<exclusion>
<groupId>com.sun.xml.bind</groupId>
<artifactId>jaxb-xjc</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>javax.ws.rs</groupId>
<artifactId>jsr311-api</artifactId>
<version>0.8</version>
</dependency>
- Add the Spring configuration for all of the service files in the serviceBeanContext.xml.
<jaxrs:server id="calendar" address="/lucrs">
<jaxrs:serviceBeans>
<ref bean="calendarWS" />
<ref bean="calendarEventWS" />
<ref bean="memberWS" />
</jaxrs:serviceBeans>
<jaxrs:providers>
<ref bean="calendarJsonReader" />
<ref bean="calendarEventJsonReader" />
<ref bean="calendarArrayJsonProvider" />
<ref bean="memberArrayJsonProvider" />
<ref bean="minimalDetailArrayJsonProvider" />
</jaxrs:providers>
</jaxrs:server>
- Add the annotations to the Service class to allow it be discovered by the RESTful requests. Full Source CalendarWS.java.
@Path("/cal/")
@ProduceMime("*/*")
public class CalendarWS {
@Autowired
private CalendarService calendarService;
@Autowired
private MemberDetail memberDetail;
@GET
@Path("/ward/")
public Calendar[] getWardCalendars() {
Long unitNo = memberDetail.getUnitNo();
List<Calendar> wardCals = calendarService.findViewableCalendars(
unitNo, memberDetail.getMrn());
ValidatedMember vm = null;
List <Approver> approvers = null;
for(Calendar cal :wardCals){
vm = getMemberValidated(cal.getOwnerId());
cal.setOwner(vm);
vm = getMemberValidated(cal.getCreatorId());
cal.setCreator(vm);
approvers = getApprovers(cal.getId());
cal.setApprovers(approvers);
} return minimalizedArray(wardCals, true);
}
The method of connecting to these services is described in the #JavaScript/jQuerysection below.
JSF - Java Server Faces
JSF use is very limited in the Local Unit Calendar project, but it is still used.
- In HTML an expression is used to set the locale on the document for internationalization purposes.
- Also an expression is used to set the request.contextPath of the application so the path of the css file will be accurate for the deployed environment.
<f:view locale="#{localeManager.locale}" contentType="text/html" encoding="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>#{pageItem != null ? ldsc:concat(pageItem,' -') : ''} #{messages['page.title']} - #{messages['application.title']}</title>
<link rel="stylesheet" href="#{request.contextPath}/styles/template-1.0.1.css" type="text/css" media="screen, projection" />
<!-- This is a comment -->
<ui:insert name="head">
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="scripts/jquery.corners.js"></script>
<ui:insert name="head-add" />
</ui:insert>
</head>
JavaScript/jQuery
$.getJSON("#{request.contextPath}/services/lucrs/mem/" + bucket.label + "/", null, function(data) {
bucket.data = data;
ac.queue.back(bucket);
| To Do: Document Source Code examples |
Other application framework
If or when other application frameworks are used, they should be documented here.