By
Jonathan Smith
Road Map
•Introduction
•Company Information
•Project Overview
•Java Web Design and Development
•Summary
•Relation to IUP
•Acknowledgments
Introduction


Who I am
Where I came from
Company Description




MobilVox is a software engineering
company
Founded in 1998
Two office locations
Multiple types of applications
Indiana Employees
Project Overview
Project
Intelligent Research
Information System
(IRIS)
MVPortal
User Administration
Service
Technologies
Roles
Tomcat (Web Server)
 Project Object Models (POM)
Visio
 MySQL
 Extensible Markup Language (XML)
 Java Server Pages (JSP)
 Tiles
 Cascading Style Sheets (CSS)
 Log4j
Database administrator
 Designer
 Programmer
 Document Writer
 Tester
 Researcher
 Server Administrator
Hyper Text Markup Language (HTML),
Extensible Markup Language (XML)
 Project Object Models (POM)
 Java Server Pages (JSP)
 Java Server Faces (JSF)
 Shale
 MySQL
Java
Maintainer
 Researcher
 Designer
 Programmer
 Database Administrator
 Tester
Java
 MySQL
 Java Server Pages (JSP)
 Tiles
 Check style
 Word
Document Writer
 Programmer
 Database Administrator
HTML


Stands for Hyper Text Markup Language
HTML is a standard programming language
used in web pages.
HTML Example Code
<div id="container">
<div id="pageheader">
<div align="left"><img src="images/logo.gif"/></div>
</div>
<div id="left-container">
<div class="portletbox">
<h3>Software Development Links</h3>
<ul>
<li><a href="http://mvprojects.mobilvox.com/wiki/index.php">Wiki</a></li>
<li><a href="http://scarab.mobilvox.com/scarab">Scarab - Mobilvox Issue
Tracker</a></li>
<li><a href="http://continuum.mobilvox.com:8080/continuum">Continuum Continuous Integration Server</a></li>
<li><a href="./inventory/mv-servers.xml">MobilVox Server Groups</a></li>
<li><a href="http://sharepoint:8080/">Microsoft Share Point Portal</a></li>
<li><a href="https://sv151:10000/">SV151 Webmin</a></li>
<li><a href="./proj-cvs/index.html">CVS Administration</a></li>
<li><a href="./docs/Maven2.pdf">Better Builds with Maven2 - Book</a></li>
<li>Java Code Conventions&nbsp;<a href="./java-codeconv/CodeConvTOC.doc.html">html</a>&nbsp;
<a href="java-code-conv/CodeConventions.pdf">pdf</a></li>
</ul>
</div>
HTML
Positives


Easy to create
Very common
Negatives
• Static
• Hard to style
• Hard to maintain/update
• Complicated structure
Java Server Pages (JSP)

Java Server Pages (JSP) is a Java
technology that allows software developers
to dynamically generate HTML, XML or
other types of documents in response to a
web client request.
JSP Example Code
<div id="left-container">
<jsp:include flush="true“
page="/jsp/portlets/leftcolumn/SoftwareDevelopmentLinks.jsp"/>
<jsp:include flush="true“ page="/jsp/portlets/leftcolumn/SoftwareReleases.jsp"/>
<jsp:include flush="true" page="/jsp/portlets/leftcolumn/HumanResources.jsp"/
>
</div>
<div id="right-container">
<jsp:include flush="true" page="/jsp/portlets/rightcolumn/Contracts.jsp"/>
<jsp:include flush="true" page="/jsp/portlets/rightcolumn/Contacts.jsp"/>
<jsp:include flush="true" page="/jsp/portlets/rightcolumn/MobilvoxProjects.jsp"/>
</div>
Java Server Pages
Positives



More component based.
Easier to style
Easier to maintain
Negatives
•Large tag libraries
Java Server Faces


JSF is a Model View Controller framework
designed to use JSP to display the
interfaces of Java Applications.
Designed to make user interface creation
simpler.
JSF Example Code
<h:dataTable value="#{mvportal.contacts}" var="contact"
rowClasses="odd,even" cellspacing="0">
<h:column>
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText id="displayName“
value="#{contact.displayName}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Email" />
</f:facet>
<h:outputLink value="mailto:#{contact.email}">
<h:outputText id="email" value="#{contact.email}" />
</h:outputLink>
</h:column>
</h:dataTable>
JSF Backing Bean
public class MVPortalBean extends AbstractViewController {
private Date timestamp = null;
private List<MVContactDisplay> contacts = new LinkedList<MVContactDisplay>();
private List<MVContactDisplay> resources = new LinkedList<MVContactDisplay>();
private static final Logger LOG = Logger.getLogger(MVPortalBean.class);
public Date getTimestamp() {
return this.timestamp;
}
public void setTimestamp(Date timestamp) {
this.timestamp = timestamp;
}
public List<MVContactDisplay> getContacts() {
return contacts;
}
public void setContacts(List<MVContactDisplay> contacts) {
this.contacts = contacts;
}
public List<MVContactDisplay> getResources() {
return resources;
}
public void setResources(List<MVContactDisplay> resources) {
this.resources = resources;
}
}
JSF
Positives




Easy to build GUI
interfaces for Java
Applications.
Can create custom
components for your
interfaces.
Saves state information in
the session for population
of forms.
Event driven framework
Negatives
• Depends on JSP to create the
GUIs.
Shale


Model View Control framework from the
Apache Software Foundation that is
based off of their Struts project.
Uses JSF,AJAX and other web
technologies to create a layered approach
to web application design.
Shale Layers





View Controller
Dialog Manager
Application Manager
Validation
Remoting
View Controller

Convenient mechanism to associate a "backing"
Java class with each Java Server Faces view in
an application, with predefined event handlers
for events significant to an application
developer.
Dialog Manager


Mechanism to define a "conversation" with a
user that requires multiple HTTP requests to
implement, modeled as a state diagram.
Controls the flow of navigation.
View Controller
public class MVPortalBean extends AbstractViewController {
private Date timestamp = null;
private List<MVContactDisplay> contacts = new LinkedList<MVContactDisplay>();
private List<MVContactDisplay> resources = new LinkedList<MVContactDisplay>();
private static final Logger LOG = Logger.getLogger(MVPortalBean.class);
public Date getTimestamp() {
return this.timestamp;
}
public void setTimestamp(Date timestamp) {
this.timestamp = timestamp;
}
public List<MVContactDisplay> getContacts() {
return contacts;
}
public void setContacts(List<MVContactDisplay> contacts) {
this.contacts = contacts;
}
public List<MVContactDisplay> getResources() {
return resources;
}
public void setResources(List<MVContactDisplay> resources) {
this.resources = resources;
}
}
Shale Dialog Manager
<dialog name="ManageContacts" start="ContactManager">
<view viewId="/jsp/manager/manageContacts.jsp"
name="ContactManager">
<transition outcome="addContact" target="Add Contact" />
<transition outcome="addResource" target="Add Resource" />
<transition outcome="exit" target="Cancel" />
</view>
<subdialog name="Add Contact" dialogName="Create Contact">
<transition outcome="next" target="End" />
<transition outcome="success" target="End" />
</subdialog>
<subdialog name="Add Resource" dialogName="Create Resource">
<transition outcome="next" target="End" />
<transition outcome="success" target="End" />
</subdialog>
<end name="End" viewId="/manager.jsp" />
</dialog>
Example Shale Web Page
<h:form>
<h:panelGrid styleClass="formGrid" columns="2"
columnClasses="addFormOutputLabel,addFormInputText">
<h:outputText id="blank" value=" "></h:outputText>
<h:outputText id="blank2" value=" "></h:outputText>
<h:outputLabel value="First Name: " for="First_Name" />
<h:inputText id="First_Name" value="#{dialog.data.firstName}“ required="true"/>
<h:message for="blank" />
<h:message styleClass="addFormMessage" for="First_Name" />
<h:outputLabel value=" Last Name: " for="Last_Name" />
<h:inputText id="Last_Name" value="#{dialog.data.lastName}“ required="true"/>
<h:message for="blank" />
<h:message styleClass="addFormMessage" for="Last_Name" />
<h:outputLabel value=" Office: " for="Office" />
<h:inputText id="Office" value="#{dialog.data.office}“ required="true" />
<h:message for="blank" />
<h:message styleClass="addFormMessage" for="Office" />
<h:outputLabel value=" Extension: " for="Extension" />
<h:inputText id="Extension" value="#{dialog.data.extension}“ required="true"/>
<h:message for="blank" />
<h:message styleClass="addFormMessage" for="Extension" />
<h:outputLabel value=" Email: " for="Email" />
<h:inputText id="Email" value="#{dialog.data.email}" required="true" />
<h:message for="blank" />
<h:message styleClass="addFormMessage" for="Email" />
</h:panelGrid>
</h:form>
Shale
Positives




Good separation of the object
from the application and the GUI
Based off of one of the most
popular web frame works
Works well with other
technologies such as AJAX, Clay,
and Spring.
Faster than static HTML
Negatives




Almost no
documentation on
how to use Shale.
Not beginner
orientated.
Still under
development.
First time it is loaded
on the server it is
slow.
Summary




HTML
JSP
JSF
Shale
Relation to IUP
Courses that were helpful
 Cosc 341 Database
 COSC 319 Software Design
 COSC 110,210,310 Java programing
courses.
Courses that are not offered
 Course on design patterns
Acknowledgements




Dr. Shubra
Todd Orange
MobiVox Employee’s
Computer Science Department