LDSTechForumProjects

Community UI Development

Community Development Best Practices edit

Documents the practices for UI Development for each technology that is in use.

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>
	<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.

This page was last modified on 17 November 2009, at 13:21.

Note: Content found in this wiki may not always reflect official Church information. See Terms of Use.