E-contact report

Web Technology and

Practice

SME Network is a company that manages the profiles of small and medium sized enterprises (SMEs). It aims to facilitate the formation of virtual enterprises that consist of complementary business partners to meet the emerging customer demands. This report shows the design and implementation of a Web application that allows the SME’s to add their profiles into the system, and to find business partners by searching through the profiles based on their core competence.

Carrie Hall 7179881 - 1 -

TABLE OF CONTENTS

Design ........................................................................................................................................................................................................... - 2 - Use Case Diagram ................................................................................................................................................................................ - 2 - Class Diagram ....................................................................................................................................................................................... - 2 - Package Diagram ................................................................................................................................................................................. - 3 - Sequence Diagram ............................................................................................................................................................................... - 4 -

Implementation ......................................................................................................................................................................................... - 4 - Why use GWT and Eclipse? ......................................................................................................................................................... - 4 - Client and Server Implementation ........................................................................................................................................... - 5 - User Interface .................................................................................................................................................................................. - 5 - Use of XML ........................................................................................................................................................................................ - 5 -

Works Cited ................................................................................................................................................................................................ - 6 - Appendix A .................................................................................................................................................................................................. - 7 -

Installation Instructions ............................................................................................................................................................... - 7 - Appendix B ................................................................................................................................................................................................ - 13 - Appendix C ................................................................................................................................................................................................ - 21 -

EContact.gwt.xml ............................................................................................................................................................................... - 21 - Contact.css ........................................................................................................................................................................................... - 21 - EContact.html...................................................................................................................................................................................... - 22 - ContactServiceImpl.java .................................................................................................................................................................. - 23 - ContactService.java ........................................................................................................................................................................... - 29 - ContactServiceAsync.java ............................................................................................................................................................... - 29 - EContact.java ....................................................................................................................................................................................... - 30 - CardSet.java ......................................................................................................................................................................................... - 46 - Card.java ............................................................................................................................................................................................... - 50 - cards.xml .............................................................................................................................................................................................. - 53 - Cuckoo Design_Greater manchester.xml ................................................................................................................................... - 54 - Cards.xsd .............................................................................................................................................................................................. - 55 -

Appendix D................................................................................................................................................................................................ - 56 -


DESIGN

In the design section the functional and non-functional requirements of the system will be established. UML diagrams will be used to give a better understanding of how the system will be built.

US E CA S E DI A GR A M

Use case diagrams “define the interaction between actors and the system”, and “encapsulate a set of scenarios”1

(Sommerville, 2007). This diagram highlights the main requirements of the system which aid in the design. It will also be used to verify that the final system fulfils all requirements.

CL AS S DI A GR A M

Class diagrams are widely used in software development and “describe the types of objects in the system and the various kinds of static relationships that exist among them” (Fowler, 2004). The following class diagram shows that the system has 6 classes. Relationships have been drawn on the diagram where necessary to represent the multiplicity of that object. These multiplicities are: A Card must can belong to 0 or more CardSets and a CardSet can have 0 or more Cards. A CardSet can only belong in one EContact object however, and an EContact object must have at least one CardSet.

Key:

Class Name

Attributes

Methods

1 Scenario: a sequence of steps describing an interaction between a user and a system (Fowler, 2004)


The class diagram shows that a Card object stores information about an individual Card, which are all stored in the CardSet. The main class is the EContact class which contains all of the graphical widgets. When the program is loaded up the client makes a request to the server asynchronously using the interface classes ContactService and ContactServiceAsync, which allow the user to utilize the methods of the ContactServiceImpl class. When loaded, this class runs the getCards() method which in turn reads in an XML file containing all of the business cards and turning them into Card objects by using the appropriate methods. Validation is undertaken to ensure that all of the correct details are entered for every card and only then will they be displayed to the client. This is done by storing the number of errors. To save an XML file, the client sends a request to the server with the Card that they want to save and the server processes the file and stores it.

PA CK A G E DI A GR A M

This package diagram shows the client and server implementations and the position of the classes within each package. It clearly shows a separation of concerns between the client and server.

0..*


SE QU EN CE DI A GR A M

This sequence diagram shows three main paths through the system. One is when the system is run; two is the user inputting a new card, three is the user making a search. The diagram also shows how the classes interact with each other during run-time and at which point messages are passed.

IMPLEMENTATION

This system was developed in Eclipse v3.4 using the Google Web Toolkit (GWT) and Cypal Studio. Cypal Studio is used to implement GWT features in Eclipse, such as adding new GWT modules.

Why use GWT and Eclipse? Developers can spend 90% of their time working around browser quirks (Google). Therefore the GWT provides a useful solution whereby a programmer can write the code for a web application using the Java programming language and the GWT compiles it into optimized JavaScript and XTHML code which works across all browsers. Using the GWT with Eclipse allows the ability to “debug and step through Java code line by line” (Google) which makes the testing phase more intuitive. Users of the GWT have remarked that the compiled code makes the browser run faster (generally due to the files being much smaller) than traditional applications and websites made using JavaScript (Lombardi Blueprint, 2007). Google explain this capability in the following quote:

“Unlike JavaScript minifiers 2

2 Minification: The process of removing all unnecessary characters from source code, without changing its functionality in computer programming languages and especially JavaScript (Wikipedia).

that work only at a textual level, the GWT compiler performs comprehensive static analysis and optimizations across your entire GWT

codebase, often producing JavaScript that loads and executes faster than equivalent handwritten JavaScript.”


Although there are many additional plugins available for Eclipse and the GWT, it was not necessary to implement any for this project. The aim of the project was to create a highly intuitive, lightweight application for a user to add and search business cards. After extensively searching, it was the authors decision that this would best be completed using the standard GWT widgets3

Client and Server Implementation

available.

As shown in the UML diagrams, there is asynchronous connections to the server made by client on several occasions. One such occasion is on the initial load of the system. The CardSet of Cards needs to be read in from an XML file as previously mentioned, and this is done server side to reduce the load on the client machine. In addition, writing the XML files is done server-side. This is to overcome possible security risks of writing files to a client machine. Furthermore, if the system were used by many client machines it would then be possible to re-use the files by enabling multiple clients to download the same file.

This system interacts with a server across the network by making a remote procedure call (RPC). GWT RPC enables the client and server to easily pass Java objects back and forth over HTTP. RPCs enables user interface logic to be ran on the client which results in “greatly improved performance, reduced bandwidth, reduced web server load, and a pleasantly fluid user experience” (Google).

To invoke a service needs additional classes which have been implemented in EContact. Some of these classes are generated automatically. The diagram in Figure 1, taken from the Google website, shows the structure of an RPC call.

User Interface To make the system user-friendly, a clean simple approach was taken. Screenshots are available in Appendix B. As the project used a Google engine it was deemed appropriate to style the application similar to that found in many of Google’s websites. Neilson proposed a list of heuristics (Heim, 2008) which should be adhered to when designing an effective user interface (listed in Appendix D). It can be argued that adhering to Google’s style in this project has achieved the “Consistency and standards”, “Recognition rather than recall” and “Aesthetic and minimalist design” heuristics.

An interesting feature used in the EContact project is the GWT SuggestBox widget. Given a list of items, this provides an enhanced drop down search for the user when they type in the search box for a particular competence. For example, if the user types ‘Java’, any Card object with ‘Java’ included in the core competence will be displayed. This will also include such items as ‘Java Programming’ and ‘C++ and Java’ (i.e. those which include the required phrase). This is also used in the counties list when the user adds a business card.

In addition, extra functionality has been added to allow the user to ‘narrow’ their selection, e.g find companies in a certain location or of a certain size which have the required competence. This adds to the rich user experience and would be a useful feature should this application become public.

Use of XML XML is used in this project to store a list of all of the business cards so that they can be used in other systems. The design of the XML was intended to be easy to read which is why a lot of the information is found in XML elements rather than attributes. However, attributes were used to describe all of the additional information for a business contact (Email and Telephone number) to decrease the length of the file but not overly complicate the file for a user. An additional feature of the system was implemented, which was the ability to download individual XML files for a particular contact. These files could be utilized in services such as online address books or applications on a mobile device. Sample XML files are provided in Appendix C.

3 Widget: An element of a window-based user interface, or WIMP, such as a button, scrollbar or text editing area (Astronomical Information Processing System).

Figure 1


WORKS CITED

ACM. (2005, January/February). A Tale of Two Tutorials: A Cognitive Approach to Interactive System Design and Interaction Design Meets Agility. Interactions Magazine , pp. 49-51.

Astronomical Information Processing System. (n.d.). Glossary. Retrieved May 8, 2009, from Astronomical Information Processing System: http://www.astron.nl/aips++/docs/glossary/w.html

Bambury, I. (2007). GWT Widgets. Retrieved May 8, 2009, from Roughian Examples: http://examples.roughian.com/index.htm

Fowler, M. (2004). UML Distilled. Addison-Wesley.

Google. (n.d.). Google Web Toolkit. Retrieved May 8, 2009, from Google Code: http://code.google.com/webtoolkit/

Hanson, R. (2006, June 1). Trivial GWT Example. Retrieved May 8, 2009, from Robert Hanson's (mostly) tech log.: http://roberthanson.blogspot.com/2006/06/trivial-gwt-example.html

Heim, S. (2008). The Resonant Interface. Boston: Pearson Education.

Lombardi Blueprint. (2007, October 16). Google Web Toolkit Blog. Retrieved May 8, 2009, from Lombardi Blueprint: http://googlewebtoolkit.blogspot.com/2007/10/lombardi-blueprint-built-with-gwt.html

Sommerville, I. (2007). Software Engineering. Essex: Pearson Education Limited.

Stevens, R. (2008). Task Analysis. CS2341 Lecture Notes . Manchester: University Of Manchester.

Sun Microsystems. (2004, January 8). Class DocumentBuilderFactory. Retrieved April 01, 2009, from http://java.sun.com/j2se/1.5.0/docs/api/javax/xml/parsers/DocumentBuilderFactory.html

Terry, H. (2001, April 30). Glossary of Terms. Retrieved April 1, 2009, from PC AI Online: http://www.pcai.com/web/glossary/pcai_j_l_glossary.html

UK Counties List. (n.d.). Retrieved May 08, 2009, from Acorndomains Forum: http://www.acorndomains.co.uk/general-board/32622-uk-counties-list.html

Wikipedia. (n.d.). List of UK Counties. Retrieved May 08, 2009, from Wikipedia: http://en.wikipedia.org/wiki/United_Kingdom

Wikipedia. (n.d.). Minify. Retrieved May 8, 2009, from Wikipedia: http://en.wikipedia.org/wiki/Minify


APPENDIX A

This program requires Eclipse4

A GWT plugin for Eclipse is available which can install the GWT directly

(minimum requirement is Europa version 3.3) and GWT with Cypal Studio to run. 5 , but the recommended way is to

download the GWT and extract it to a folder on the hard disk. There is no installation file to run GWT, all that is needed is to download the Cypal Studio plugin6

Installation Instructions

and unzip it into your eclipse “plugins” folder.

On the CD you will find the files to install GWT and Cypal Studio, as well as the EContact project.

Unzip the Cypal Studio plugin direct into your eclipse “plugins” folder (there are 3 files).

Once Eclipse has been set up the project needs to be imported. Run Eclipse and choose a workspace for the project to go in.

4 Available at http://www.eclipse.org/downloads/ 5 Installation instructions are available at http://code.google.com/eclipse/docs/install-eclipse-3.4.html 6 Available at http://code.google.com/p/cypal-studio/downloads/list


Select Window->Preferences->Cypal Studio and set the field GWT home to the directory where the GWT was installed.


To import the project into Eclipse, right click on the project explorer pane and choose Import -> Import -> Existing Project into Workspace

Carrie Hall 7179881 - 10 -

Select the “archive file” check box and press browse. Select the EContact.zip file from the CD provided (it is recommended to first copy the file from the CD to your hard drive) and press Select.

Carrie Hall 7179881 - 11 -

Once the file has finished importing, the run configuration needs to be set up. First, choose Run -> Run Configurations. Choose GWT Hosted Mode Application and select the EContact project and the com.contact.EContact module.

Carrie Hall 7179881 - 12 -

To run the program, select the com.contact.EContact option from the Run menu. To maximise the user experience, maximise the browser window.

Carrie Hall 7179881 - 13 -

APPENDIX B

Once the system has been set up as shown in Appendix A, the user will be shown the following screen.

If the user wished to search for a core competence, they would type that competence into the search box. If the ‘Go’ button was pressed with no information, then the system would display the following screen to the user informing them that they need to enter a search, or it gives them the option to view all cards.

Carrie Hall 7179881 - 14 -

Once the user starts typing into the text box, suggestions will be made for them which they can choose.

After pressing the ‘Go’ button the results are displayed to the user. These results are ordered so that all competences that exactly match are shown first, and all those that partially match are shown after. In the following example there is one exact match and one partial match. The crucial information only is shown to the user at this stage, which is the name of the company and the location and size.

Carrie Hall 7179881 - 15 -

They are given the option to narrow their selection. In the example below the search has been narrowed by location. Thus, the system now only shows the Cards which match the criteria which is Java competences in Merseyside. The size of the company is either small or medium. This is done by checking the value that the user gave when asked the amount of people in their company. This was done so that in the future extra options (such as large or multi-national) could be used. The definition of how many people make a small company could change but very little of the code would need to be changed. This is a fundamental principle in Software Engineering.

Carrie Hall 7179881 - 16 -

The name of the company is a link to view more of the information stored about that company. Further work could be done to this page to include the Google Maps API showing the company location and image uploads which would allow the company to upload their logo. In addition, a summary of the company could also be given.

Carrie Hall 7179881 - 17 -

The other main area of the system is the Add A Profile section. Once the user clicks on the navigation link, they will be shown the following screen. As previously mentioned, it is important that all data is validated before going into the XML document, thus greatly reducing the risk that there will be problem loading the information again.

The following form checks that all fields are not null, and that the number of staff and the telephone number are only numbers. Examples are shown of the validation.

Carrie Hall 7179881 - 18 -

Carrie Hall 7179881 - 19 -

After all of the data has been correctly entered, the user will be displayed a success message and the Card will be available to view.

Carrie Hall 7179881 - 20 -

If the user tried to enter the same business card as one that has already entered they will be shown a message as shown below. A Card is deemed to be already existing if the combination of company name, town and county have already been entered. In the example below the user has tried to enter Hislop Flowers after it has been successfully added.

The final area of the system is the Help section which is shown below.

Carrie Hall 7179881 - 21 -

APPENDIX C

Print-out of source code (the code you wrote, not the ones fully generated by the system)

ECON T A CT.GW T.X ML

This XML file is used to enable Eclipse to use GWT libraries. It also tells the browser which Java file to load. <?xml version="1.0" encoding="UTF-8" standalone="no" ?> <module> <inherits name="com.google.gwt.user.User" /> <inherits name="com.google.gwt.user.theme.standard.Standard" /> <entry-point class="com.contact.client.EContact" /> <servlet path="/EContact" class="com.contact.server.ContactServiceImpl" />

</module>

CON T A CT.CS S

This is the stylesheet for the XHTML used in the browser.

body {font-family:"Georgia"; font-size:11px;} h3 {font-size:1.5em;} h5 {color:#1155b4;font-size:1.1em;padding:0;margin:0;

text-decoration:underline;} h4 {padding:0;margin:0;font-size:16px;color:#ccc;} h2 {padding:10px 0 5px 0;margin:0;font-size:15px;} h1 {padding:0;margin:0;font-size:42px;} #search {float:right;height:80px;

text-align:right;border-bottom:1px solid #ccc;} gwt-PushButton {margin:0 0 0 0 !important;height:40px;width:40px;

padding:7px !important;} span.search {font-size:14px;} ul {display:inline;} li {display:inline;text-decoration:none;bullet-type:none;} .html-face {margin:0 !important;padding:8px;} .livesearch {font-style:bold;color:#0048FF;} .location {color:#488000;font-size:smaller;} .narrow {width:750px;background-color:#c7d8a9 !important;

border-top:1px solid #a4b388; border-bottom:1px solid #a4b388;height:5px; margin:5px 0 5px 0;}

.links {text-decoration:none; text-decoration:underline;color:#455d18;}

.search {float:center;height:40px;padding:7px !important;}

.largefield {font-size:1.5em; color:#4a4a4a !important;width:300px; border: 1px solid #ccc;}

.incorrectField {font-size:15px;height:35px;padding:8px !important; width:300px;border: 1px solid #ff0000;}

.textField {font-size:15px;height:35px;padding:8px !important; width:300px;border: 1px solid #ccc;}

.gwt-SuggestBox {font-size:15px;height:35px;padding:8px !important; width:300px;border: 1px solid #ccc;}

.gwt-TextBox {font-size:15px;height:35px;padding:8px !important; width:300px;border: 1px solid #ccc;}

p.error {margin:2px 0 0 5px;color:#ff0000;} #container {width:800px;text-align:left;} #header {text-align:center;padding:20px 0px 10px 0px;} gwt-HTML {margin-left: 20px !important;} #search {vertical-align:middle;padding-top:20px;

text-align:center;} #search div {vertical-align:middle;}

Carrie Hall 7179881 - 22 -

#navigation {text-align:center;height:30px;} #navigation p {margin: 0px 10px 8px 10px;display:inline;} #main {float:left;padding:20px 0 20px 20px;width:800px;

min-height:300px;} #header, #footer, #search, #navigation {width:800px;} #footer {float:left;background-color:#ccc;text-align:center;

font-size:12px;color:#0c0c0c;margin-bottom:10px;} #footer p {margin:15px 0 15px 0;} .searchText {display:inline;margin: 0 10px 0 0;padding: 0 0 12px 0;} .inline {display:inline; padding:0 0 0 10px;} .normalCursor {cursor: default;} .handCursor {cursor: pointer;} .mouseHover {color:#2e371d;} .narrowedItem {color:#b4571f;} .removeitem {color:#864117;text-decoration:line-through;} .searchButton {background:#85c441 !important;border:0 !important;

padding-top:3px !important;font-weight:bold !important; color:fff !important;vertical-align:top;}

.searchButtonHover {background:#7bb43d !important;}

.gwt-Tree

.gwt-TreeItem-selected {background: none !important;color:#ff0000; text-style:underline;}

ECON T A CT.HT ML

This is the HTML document which the GWT code is written to. The navigation links are written to the navigation div, the search items to the search div and the content to the main div. The main div gets written to by multiple methods e.g. when the Home link is pressed it outputs some information and when the Add A Profile button is link it displays the form. It would have been possible to have different ‘div’ containers for each but this approach minimises the amount of HTML written at any one time thus increasing the speed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="contact.css"> <title>E-Contact</title> <script type="text/javascript" language="javascript" src="com.contact.EContact.nocache.js"></script> </head> <body> <div align="center"> <div id="container"> <div id='header'> <img src="logo.gif" alt="logo"> </div> <div id='navigation'> </div> <div id='search'> </div> <div id='main'> </div> <div id='footer'> <p>Created by Carrie Hall © 2009</p> </div> <iframe src="javascript:''" id="__gwt_historyFrame" style="position: absolute; width: 0; height: 0; border: 0"></iframe> </div> </div> </body> </html>

Carrie Hall 7179881 - 23 -

CON T A CTSER VI CEIM PL.J AV A

This is the main server side file which reads and writes the XML document package com.contact.server; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import java.io.PrintStream; import java.util.Iterator; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.parsers.ParserConfigurationException; import org.w3c.dom.DOMException; import org.w3c.dom.Document; import org.w3c.dom.NamedNodeMap; import org.w3c.dom.Node; import org.w3c.dom.NodeList; import org.xml.sax.SAXException; import com.contact.client.Card; import com.contact.client.CardSet; import com.contact.client.ContactService; import com.google.gwt.user.server.rpc.RemoteServiceServlet; public class ContactServiceImpl extends RemoteServiceServlet implements ContactService { private static final long serialVersionUID = 1420573242265861311L; Document dom; // structure of document CardSet cardSet; // the cardset to create from the XML document int errors; //stores the number of errors //to store each card value before it is made into a card String Name = ""; String Address = ""; String Town = ""; String County = ""; String Size = ""; int SizeInt; String Competence = ""; String Contact = ""; String ContactTel = ""; String ContactEmail = ""; public CardSet getCards() { cardSet = new CardSet(); //make new card set errors = 0; dom = parseXMLFile("cards.xml"); // makes DocumentBuilderFactory analyseElements(dom, ""); // recursive method if (errors > 0) //errors found { //make new card set cardSet = new CardSet(); } return cardSet; } /** * Private method to create a DocumentBuilderFactory * * @param xmlfile

Carrie Hall 7179881 - 24 -

* @return Document (stored as variable 'dom * @throws Exception

'

*/ private Document parseXMLFile(String xmlfile) { DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance(); try { DocumentBuilder db = dbf.newDocumentBuilder(); dom = db.parse(xmlfile); return dom; } catch (ParserConfigurationException pce) { errors++; } catch (SAXException se) { errors++; } catch (IOException ioe) { errors++; } return null; } /** * recursive method which creates CardSet object * * @param node at which element is on * @param indent */ void analyseElements(Node node, String indent) { String name = node.getNodeName(); // gets name NodeList children = node.getChildNodes(); // gets children //go through all nodes switch (node.getNodeType()) { case Node.DOCUMENT_NODE: analyse(children, indent + " "); break; case Node.ELEMENT_NODE: if (name.equals("Cards")) // Cards node { analyse(children, indent + " "); //keep searching through children } else if (name.equals("Card")) // Card node { analyse(children, indent + " ");//keep searching through children } else if (name.equals("Name")) // Name node { if (children.item(0) != null) // must have a text node { try { // get name details Name = children.item(0).getNodeValue().trim(); } catch (DOMException e) { errors++; } analyse(children, indent + " "); } else // incorrect {

xml

errors++; } } else if (name.equals("Address")) // address node { if (children.item(0) != null) // must have a text node

Carrie Hall 7179881 - 25 -

{ try { // get address details Address = children.item(0).getNodeValue().trim(); } catch (DOMException e) { errors++; } analyse(children, indent + " "); } else // incorrect {

xml

errors++; } } else if (name.equals("Town")) // town node { if (children.item(0) != null) // must have a text node { try { // get town details Town = children.item(0).getNodeValue().trim(); } catch (DOMException e) { errors++; } analyse(children, indent + " "); } else // incorrect {

xml

errors++; } } else if (name.equals("County")) // county node { if (children.item(0) != null) // must have a text node { try { // get county details County = children.item(0).getNodeValue().trim(); } catch (DOMException e) { errors++; } analyse(children, indent + " "); } else // incorrect {

xml

errors++; } } else if (name.equals("Size")) // size node { if (children.item(0) != null) // must have a text node { try { // get size details Size = children.item(0).getNodeValue().trim(); SizeInt = Integer.parseInt(Size); } catch (DOMException e) { errors++; } catch (NumberFormatException n) { errors++; } analyse(children, indent + " "); } else // incorrect {

xml

errors++;

Carrie Hall 7179881 - 26 -

} } else if (name.equals("Competence")) // competence node { if (children.item(0) != null) // must have a text node { try { // get competence details Competence = children.item(0).getNodeValue().trim(); } catch (DOMException e) { errors++; } analyse(children, indent + " "); } else // incorrect {

xml

errors++; } } else if (name.equals("Contact")) // contact node { if (children.item(0) != null) // must have a text node { try { // get contact details Contact = children.item(0).getNodeValue().trim(); NamedNodeMap attributes = node.getAttributes(); // gets // attributes // checks if it is missing attribute 'tel if (attributes.getNamedItem("tel") != null) {

'

try { // gets value of name attribute ContactTel = attributes.getNamedItem("tel") .getNodeValue().toString(); } catch (DOMException e) // no value for tel

{

attribute

errors++; } } else // no attribute for {

tel

errors++; } if (attributes.getNamedItem("email") != null) { try { // gets value of email attribute ContactEmail = attributes.getNamedItem("email") .getNodeValue().toString(); } catch (DOMException e) // no value for email attribute { errors++; } } else // no attribute for name { errors++; } } catch (DOMException e) {

Carrie Hall 7179881 - 27 -

errors++; } catch (NumberFormatException n) { errors++; } if (errors == 0) { cardSet.addCard(new Card(Name, Address, Town, County, Integer.parseInt(Size), Competence, ContactEmail, Contact, ContactTel)); } analyse(children, indent + " "); } else // incorrect {

xml

errors++; } } else // incorrect {

xml

errors++; } break; default: break; } } /* Recursive method to read the XML file */ public void analyse(NodeList children, String indent) { for (int i = 0; i < children.getLength(); i++) { analyseElements(children.item(i), indent); } } public void saveCards(CardSet cardSet) { // open the file to write PrintStream os = null; try { os = new PrintStream(new FileOutputStream(new File("cards.xml"))); } catch (FileNotFoundException e) { e.printStackTrace(); } // header information os.println("<?xml version=\"1.0\"?>"); // 'Cards' is the root element os.println("<Cards " + "xmlns=\"http://www.w3schools.com\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" " + "xsi:schemaLocation=\"http://www.w3schools.com cards.xsd\">"); // print the Iterator<?> i = cardSet.getCards().iterator();

cardset

while (i.hasNext()) { Card temp = (Card) i.next(); os.print(temp.toXML()); } // end root element os.println("</Cards>"); os.flush(); os.close(); } public void saveCard(Card cardIn) { // open the file to write PrintStream os = null;

Carrie Hall 7179881 - 28 -

String filename = cardIn.getcompanyName() + "_" + cardIn.getcounty() + ".xml"; try { os = new PrintStream(new FileOutputStream(new File(filename))); } catch (FileNotFoundException e) { e.printStackTrace(); } // header information os.println("<?xml version=\"1.0\"?>"); // print the quiz os.println("<Cards " + "xmlns=\"http://www.w3schools.com\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:schemaLocation=\"http://www.w3schools.com cards.xsd\">"); os.print(cardIn.toXML()); os.println("</Cards>"); // end root element os.flush(); os.close(); } }

Carrie Hall 7179881 - 29 -

CON T A CTSER VI CE.J A VA package com.contact.client; import com.google.gwt.user.client.rpc.RemoteService; public interface ContactService extends RemoteService { public void saveCards(CardSet cardSet); public void saveCard(Card card); public CardSet getCards(); }

CON T A CTSER VI CEASY N C.J AV A package com.contact.client; import com.google.gwt.user.client.rpc.AsyncCallback; public interface ContactServiceAsync { public void saveCards(CardSet cardSet, AsyncCallback<?> callback); public void saveCard(Card card, AsyncCallback<?> callback); public void getCards(AsyncCallback<CardSet> callback);

}

Carrie Hall 7179881 - 30 -

ECON T A CT.J AV A

This is the main class which shows all of the widgets displayed to the user. package com.contact.client; import java.util.ArrayList; import java.util.Iterator; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.core.client.GWT; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.event.dom.client.MouseOutEvent; import com.google.gwt.event.dom.client.MouseOutHandler; import com.google.gwt.event.dom.client.MouseOverEvent; import com.google.gwt.event.dom.client.MouseOverHandler; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.rpc.AsyncCallback; import com.google.gwt.user.client.rpc.ServiceDefTarget; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.Grid; import com.google.gwt.user.client.ui.HTML; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.MultiWordSuggestOracle; import com.google.gwt.user.client.ui.DisclosurePanel; import com.google.gwt.user.client.ui.FlowPanel; import com.google.gwt.user.client.ui.SuggestBox; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.RootPanel; public class EContact implements EntryPoint { //to store a card Card c = null; //Search box SuggestBox searchBox; //Items for the Add Business form TextBox companyName = new TextBox(); TextBox address = new TextBox(); TextBox town = new TextBox(); SuggestBox county; TextBox numberOfStaff = new TextBox(); SuggestBox coreCompetence; TextBox contactName = new TextBox(); TextBox contactTel = new TextBox(); TextBox contactEmail = new TextBox(); Label companyNameLabel = new Label("Company Name"); Label addressLabel = new Label("Address"); Label townLabel = new Label("Town"); Label countyLabel = new Label("County"); Label numberOfStaffLabel = new Label("Number Of Staff"); Label coreCompetenceLabel = new Label("Core Competence"); Label contactNameLabel = new Label("Contact Name"); Label contactTelLabel = new Label("Contact Telephone"); Label contactEmailLabel = new Label("Contact Email"); Button addButton; //Indicates the problem that occured String addError = "";

when adding card, e.g missing value

//Changes to true if card is added. Used to display success message boolean addSuccess = false; //Indicates the problem that occured String searchError = "";

when adding card, e.g missing value

//String that the user searched for

Carrie Hall 7179881 - 31 -

String searchString; //Set to true if errors are found in Add a Card boolean errors = false; /*Variables for the Search*/ boolean narrowByLocation = false; //set to TRUE if user has narrowed by Location boolean narrowBySize = false; //set to TRUE if user has narrowed by Business Size String narrowByLocationRes = ""; String narrowBySizeRes = ""; //stores the list of cards CardSet cardSet; //stores a list of cards matching criteria, ie

ArrayList<Card> cardsMatchingCriteria;

when searched for an item or narrowed search

//to store the content of the main area HTML contents = new HTML(""); //to store connection to server AsyncCallback<CardSet> callback; ContactServiceAsync svc; //to store connection to server AsyncCallback<Card> callbackCard; /* * Main method ran when program loads * @see com.google.gwt.core.client.EntryPoint#onModuleLoad() */ public void onModuleLoad() { //makes new cardSet cardSet = new CardSet(); // define the service to call svc = (ContactServiceAsync) GWT.create(ContactService.class); ServiceDefTarget endpoint = (ServiceDefTarget) svc; endpoint.setServiceEntryPoint("/EContact"); // define a handler for what to do when the // service returns a result callback = new AsyncCallback<CardSet>() { public void onSuccess (CardSet result) { //errors may have been found when reading XML if (result.equals(null)) { //make new cardSet = new CardSet();

cardset

} else //no errors { cardSet = (CardSet) result; //save result } showHome(); //show the content addLinks(); //show the navigation showSearch(); //show the search } public void onFailure (Throwable ex) { Window.alert(ex.toString());

Carrie Hall 7179881 - 32 -

} }; // execute the service svc.getCards(callback); } /* * shows the index page */ private void showHome() { RootPanel.get("main").clear(); //wipes the main content //ensures that the success message will not show when the user next clicks on add a card addSuccess=false; //add index content contents = new HTML("<p>SME Network manages the profiles of small and medium size enterprises (SMEs).</p>" +"<p>We aim to facilitate the formation of virtual enterprises that consist of complementary business partners to meet the emerging customer demands.</p>" +"<p>E-Contact is a system that allows you to find business partners by searching through the profiles on our website.</p><br/><br/><br/><br/><br/><br/>"); RootPanel.get("main").add(contents); } /* * Shows the add profile page */ private void add() { RootPanel.get("main").clear(); //wipes the main content if (addError.length()==0) //no errors { if (addSuccess) //no errors and add successful { //show message HTML successMessage = new HTML("<p class='error'>* Successfully added business card</p>"); RootPanel.get("main").add(successMessage); //will not show message again addSuccess = false; //jumps the window to the top so message can be seen clearly Window.scrollTo(0, 0); //sets text boxes to blank companyName.setText(""); address.setText(""); town.setText(""); numberOfStaff.setText(""); contactName.setText(""); contactTel.setText(""); contactEmail.setText(""); coreCompetence = new SuggestBox(createCompetences()); county = new SuggestBox(createCounties()); addError=""; } else //no errors but add not successful, implies that user has never added a profile { //sets error to blank addError=""; //styles the boxes to default companyName.setStylePrimaryName("textField"); address.setStylePrimaryName("textField"); town.setStylePrimaryName("textField"); numberOfStaff.setStylePrimaryName("textField"); contactName.setStylePrimaryName("textField"); contactTel.setStylePrimaryName("textField"); contactEmail.setStylePrimaryName("textField"); coreCompetence = new SuggestBox(createCompetences());

Carrie Hall 7179881 - 33 -

county = new SuggestBox(createCounties()); } } else if (addError.length()>0) //errors found { //show error and jump to top HTML addErrorHTML = new HTML(addError); Window.scrollTo(0, 0); RootPanel.get("main").add(addErrorHTML); addError=""; } //show add button with click events addButton = new Button("Add"); addButton.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { //disable button until verification is complete so that user does not press more than once addButton.setEnabled(false); errors = false; //gets entered values String companyNameTemp = companyName.getText(); String addressTemp = address.getText(); String townTemp = town.getText(); String countyTemp = county.getText(); String numberOfStaffTemp = numberOfStaff.getText(); String coreCompetenceTemp = coreCompetence.getText(); String contactNameTemp = contactName.getText(); String contactTelTemp = contactTel.getText(); String contactEmailTemp = contactEmail.getText(); //checks for null values. sets errors to true if found and adds message to a string which //will be outputted

if (companyNameTemp.trim()=="")

to user. Sets the style so that boxes are highlighted if incorrect

{ errors = true; addError+="<p class='error'>* Please enter a company name</p>"; companyName.setStylePrimaryName("incorrectField"); } else { companyName.setStylePrimaryName("textField"); } if (addressTemp.trim()=="") { errors = true; addError+="<p class='error'>* Please enter an address</p>"; address.setStylePrimaryName("incorrectField"); } else { address.setStylePrimaryName("textField"); } if (townTemp.trim()=="") { errors = true; addError+="<p class='error'>* Please enter an town</p>"; town.setStylePrimaryName("incorrectField"); } else { town.setStylePrimaryName("textField"); } if (countyTemp.trim()=="") { errors = true;

Carrie Hall 7179881 - 34 -

addError+="<p class='error'>* Please enter an county</p>"; county.setStylePrimaryName("incorrectField"); } else { county.setStylePrimaryName("textField"); } if (numberOfStaffTemp.trim()=="") { errors = true; addError+="<p class='error'>* Please enter a number of staff</p>"; numberOfStaff.setStylePrimaryName("incorrectField"); } else { numberOfStaff.setStylePrimaryName("textField"); } if (numberOfStaffTemp.trim()!="") { boolean passes = true; try //checks for only a number entered { Integer.parseInt(numberOfStaffTemp); } catch (NumberFormatException e) { passes = false; errors = true; addError+="<p class='error'>* Please enter a number for the staff field</p>"; numberOfStaff.setStyleName("incorrectField"); } if (passes) { numberOfStaff.setStyleName("textField"); } } if (coreCompetenceTemp.trim()=="") { errors = true; addError+="<p class='error'>* Please enter a core competence</p>"; coreCompetence.setStylePrimaryName("incorrectField"); } else { coreCompetence.setStylePrimaryName("textField"); } if (contactNameTemp.trim()=="") { errors = true; addError+="<p class='error'>* Please enter a contact name</p>"; contactName.setStyleName("incorrectField"); } else { contactName.setStyleName("textField"); } if (contactTelTemp.trim()=="") { errors = true; addError+="<p class='error'>* Please enter a contact telephone</p>"; contactTel.setStyleName("incorrectField"); } else {

Carrie Hall 7179881 - 35 -

contactTel.setStyleName("textField"); } if (contactTelTemp.trim()!="") { boolean passes = true; try { //checks for long number entered. Integer will not be large enough for a phone number Long.parseLong(contactTelTemp); } catch (NumberFormatException e) { passes = false; errors = true; addError+="<p class='error'>* Please enter a number for the phone number</p>"; contactTel.setStyleName("incorrectField"); } if (passes) { contactTel.setStyleName("textField"); } } if (contactEmailTemp.trim()=="") { errors = true; addError+="<p class='error'>* Please enter a contact email</p>"; contactEmail.setStyleName("incorrectField"); } else { contactEmail.setStyleName("textField"); } //no errors if (!errors) { //removes error string addError = ""; addButton.setEnabled(true); //enables button //makes new card Card tempCard = new Card(companyNameTemp,addressTemp,townTemp,countyTemp,Integer.parseInt(numberOfStaffTemp),coreCompetenceTemp,contactEmailTemp,contactNameTemp,contactTelTemp); //tries to add card boolean added = cardSet.addCard(tempCard); if (added) //success { //write new xml svc.saveCards(cardSet, callback);

file with that card included

//clears the search and enters it again to refresh list of companies RootPanel.get("search").clear(); showSearch(); addSuccess = true; } else //card exists { addError+="<p class='error'>* A card for this company in this location already exists</p>"; } add(); //recursive, calls this method again to redisplay (and display errors if needed) } else if (errors) { //enables button and reloads method

Carrie Hall 7179881 - 36 -

addButton.setEnabled(true); add(); } } }); //makes new grid to put text fields in. similar to html Grid grid = new Grid(12, 2);

table layout

grid.getCellFormatter().setWidth(0, 0, "150px"); grid.setWidget(0, 0, companyNameLabel); grid.setWidget(0, 1, companyName); grid.setWidget(1, 0, addressLabel); grid.setWidget(1, 1, address); grid.setWidget(2, 0, townLabel); grid.setWidget(2, 1, town); grid.setWidget(3, 0, countyLabel); grid.setWidget(3, 1, county); grid.setWidget(4, 0, numberOfStaffLabel); grid.setWidget(4, 1, numberOfStaff); grid.setWidget(5, 0, coreCompetenceLabel); grid.setWidget(5, 1, coreCompetence); grid.setWidget(7, 0, contactNameLabel); grid.setWidget(7, 1, contactName); grid.setWidget(8, 0, contactTelLabel); grid.setWidget(8, 1, contactTel); grid.setWidget(9, 0, contactEmailLabel); grid.setWidget(9, 1, contactEmail); grid.setWidget(11, 1, addButton); //adds to main panel RootPanel.get("main").add(grid); } /* * Shows help */ private void help() { addSuccess=false; RootPanel.get("main").clear(); contents = new HTML("<p>To search, simply enter the competence that you wish to look for in the search box</p>" + "<p>If you wish to narrow your search, click on one of the locations or a size that you want to only search by</p>" + "<img src='narrowed1.png' alt='narrow'/>" + "<p>To remove the narrowing simply click on the orange link which shows you what you have narrowed by</p>" + "<img src='narrowed.png' alt='narrow'/>" + "<p>Adding a business card is easy, just click on the link, fill in all the details and press ADD</p>"); RootPanel.get("main").add(contents); } /* * Shows Navigation */ private void addLinks() { //NAVIGATION final HTML link1 = new HTML("<p>Home</p>"); link1.addStyleName("inline"); link1.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { showHome(); } }); link1.addMouseOverHandler(new MouseOverHandler() {

Carrie Hall 7179881 - 37 -

public void onMouseOver(MouseOverEvent event) { link1.setStyleName("inline handCursor mouseHover"); } }); link1.addMouseOutHandler(new MouseOutHandler() { public void onMouseOut(MouseOutEvent event) { link1.setStyleName("inline normalCursor"); } }); final HTML link2 = new HTML("<p>Add A Profile</p>"); link2.addStyleName("inline"); link2.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { add(); } }); link2.addMouseOverHandler(new MouseOverHandler() { public void onMouseOver(MouseOverEvent event) { link2.setStyleName("inline handCursor mouseHover"); } }); link2.addMouseOutHandler(new MouseOutHandler() { public void onMouseOut(MouseOutEvent event) { link2.setStyleName("inline normalCursor"); } }); final HTML link3 = new HTML("<p>Help</p>"); link3.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { help(); } }); link3.addMouseOverHandler(new MouseOverHandler() { public void onMouseOver(MouseOverEvent event) { link3.setStyleName("inline handCursor mouseHover"); } }); link3.addMouseOutHandler(new MouseOutHandler() { public void onMouseOut(MouseOutEvent event) { link3.setStyleName("inline normalCursor"); } }); link3.addStyleName("inline"); //add links RootPanel.get("navigation").add(link1); RootPanel.get("navigation").add(link2); RootPanel.get("navigation").add(link3); } /* * Shows search box */ private void showSearch() { //label for search Label livesearch = new Label("Search"); livesearch.addStyleName("searchText"); //search box searchBox = new SuggestBox(createCompetences()); //search button

Carrie Hall 7179881 - 38 -

final Button button = new Button("Go"); button.setSize("40", "40"); button.addStyleName("inline searchButton"); button.addMouseOverHandler(new MouseOverHandler(){ public void onMouseOver(MouseOverEvent event) { button.addStyleName("searchButtonHover"); } }); button.addMouseOutHandler(new MouseOutHandler(){ public void onMouseOut(MouseOutEvent event) { button.setStyleName("gwt-Button inline searchButton"); } }); //if button clicked button.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { //disable button button.setEnabled(false); //removes narrow functions if they were on narrowByLocation = false; narrowBySize = false; narrowByLocationRes = ""; narrowBySizeRes = ""; //trims white space searchString = searchBox.getText().trim(); //check for null if (searchString=="") { button.setEnabled(true); searchError="<p>Please enter a search term</p>"; searchResults(); //shows results } else { searchError=""; //no error //get cards matching search cardsMatchingCriteria = cardSet.getCardsByCompetence(searchString); button.setEnabled(true); //enable button searchResults(); //get results } } }); searchBox.setStylePrimaryName("inline largefield search"); RootPanel.get("search").add(livesearch); RootPanel.get("search").add(searchBox); RootPanel.get("search").add(button); } /* * Shows results */ private void searchResults() { RootPanel.get("main").clear(); //clears main content //errors found if (searchError.length()>0) { Window.scrollTo(0, 0); //jump to top //show error RootPanel.get("main").add(new HTML(searchError)); //show link to view all cards final HTML clickHere = new HTML("Click here to view all business cards"); clickHere.addStyleName("links");

Carrie Hall 7179881 - 39 -

clickHere.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { searchError=""; searchString = "all"; cardsMatchingCriteria = cardSet.getCards(); searchResults(); } }); clickHere.addMouseOverHandler(new MouseOverHandler() { public void onMouseOver(MouseOverEvent event) { clickHere.setStyleName("links handCursor mouseHover"); } }); clickHere.addMouseOutHandler(new MouseOutHandler() { public void onMouseOut(MouseOutEvent event) { clickHere.setStyleName("links normalCursor"); } }); RootPanel.get("main").add(clickHere); } if (searchError.length()==0) //no errors { String resultsMsg = ""; //shows what user searched for String youSearchedForMsg = "<span>You searched for <strong>" + searchString + ".</strong></span>" ; if (cardsMatchingCriteria.size()==0) { resultsMsg = "<br/><span><strong>0</strong> results found.</span>"; } else if (cardsMatchingCriteria.size()==1) { resultsMsg = "<br/><span><strong>" + cardsMatchingCriteria.size() + "</strong> result found.</span>"; } else if (cardsMatchingCriteria.size()>1) { resultsMsg = "<br/><span><strong>" + cardsMatchingCriteria.size() + "</strong> results found.</span>"; } RootPanel.get("main").add(new HTML(youSearchedForMsg)); //shows narrowing capabilities showNarrowing(); RootPanel.get("main").add(new HTML(resultsMsg)); RootPanel.get("main").add(new HTML("<br />")); //loops through matching cards to display Iterator<Card> i = cardsMatchingCriteria.iterator(); while (i.hasNext()) { final Card tempCard = i.next(); //shows title final HTML title = new HTML("<h5>"+tempCard.getcompanyName()+"<h5>"); //shows competence and size final HTML about = new HTML("<span>" + tempCard.getcoreCompetence() + ", " + tempCard.getSize().toLowerCase() +" company</span>"); //shows location final HTML location = new HTML("<span class='location'>" + tempCard.getcounty() + "</span><br /><br />"); title.addClickHandler(new ClickHandler()

Carrie Hall 7179881 - 40 -

{ public void onClick(ClickEvent event) { showResult(tempCard); } }); title.addMouseOverHandler(new MouseOverHandler() { public void onMouseOver(MouseOverEvent event) { title.setStyleName("handCursor mouseHover"); } }); title.addMouseOutHandler(new MouseOutHandler() { public void onMouseOut(MouseOutEvent event) { title.setStyleName("normalCursor"); } }); RootPanel.get("main").add(title); RootPanel.get("main").add(about); RootPanel.get("main").add(location); } } } /* * Shows a single page with details of the chosen card */ private void showResult(Card tempCard) { c = tempCard; RootPanel.get("main").clear(); //shows link back to results. final Label back = new Label("< Back to results"); back.addStyleName("links"); back.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { searchResults(); } }); back.addMouseOverHandler(new MouseOverHandler() { public void onMouseOver(MouseOverEvent event) { back.setStyleName("links handCursor mouseHover"); } }); back.addMouseOutHandler(new MouseOutHandler() { public void onMouseOut(MouseOutEvent event) { back.setStyleName("links normalCursor"); } }); //information to display HTML title = new HTML("<h3>"+ tempCard.getcompanyName() + "</h3>"); HTML addLabel = new HTML("<h2>Address Details:</h2>"); HTML address = new HTML(tempCard.getaddress() + "<br />"+ tempCard.gettown()+ "<br />"+ tempCard.getcounty() + "</p>"); HTML contLabel = new HTML("<h2>Contact Details:</h2>"); HTML contact = new HTML(tempCard.getcontactName() + "<br />"); HTML contacttel = new HTML("Tel: " + tempCard.getcontactTel()+ "<br />"); HTML contactemail = new HTML("Email: " + tempCard.getcontactEmail() + "<br /><br /><br /><br />"); //button to download final Button xmlDownloadLink = new Button("Download to XML");

file

xmlDownloadLink.addMouseOverHandler(new MouseOverHandler() { public void onMouseOver(MouseOverEvent event) {

Carrie Hall 7179881 - 41 -

xmlDownloadLink.setStyleName("gwt-Button handCursor mouseHover"); } }); xmlDownloadLink.addMouseOutHandler(new MouseOutHandler() { public void onMouseOut(MouseOutEvent event) { xmlDownloadLink.setStyleName("gwt-Button normalCursor"); } }); xmlDownloadLink.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { svc.saveCard(c, callback); } }); RootPanel.get("main").add(back); RootPanel.get("main").add(title); RootPanel.get("main").add(addLabel); RootPanel.get("main").add(address); RootPanel.get("main").add(contLabel); RootPanel.get("main").add(contact); RootPanel.get("main").add(contacttel); RootPanel.get("main").add(contactemail); RootPanel.get("main").add(xmlDownloadLink); } /*Shows links to narrow files */ private void showNarrowing() { //panel to hold option. It is a disclosure panel meaning that the user can show it or hide it. //open by default final DisclosurePanel DiscPanel = new DisclosurePanel("Narrow options"); //slide transition is animated DiscPanel.setAnimationEnabled(true); DiscPanel.setOpen(true); FlowPanel panel = new FlowPanel(); panel.setStyleName("narrow"); //has already been narrowed by location so needs to show what it's narrowed by if (narrowByLocation) { panel.add(new HTML("<span>Narrow by location:</span><ul>")); final HTML clickHere = new HTML("<li>" + narrowByLocationRes + "</li>"); clickHere.addStyleName("narrowedItem"); clickHere.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { narrowByLocation=false; narrowByLocationRes = ""; if (!narrowBySize) { if (searchString.equals("all")) { cardsMatchingCriteria = cardSet.getCards(); } else { cardsMatchingCriteria = cardSet.getCardsByCompetence(searchString); } } else

Carrie Hall 7179881 - 42 -

{ if (searchString.equals("all")) { cardsMatchingCriteria = cardSet.getCards(); } else { cardsMatchingCriteria = cardSet.getCardsByCompetence(searchString); } cardsMatchingCriteria = cardSet.narrowBySizes(cardsMatchingCriteria, narrowBySizeRes); } searchResults(); } }); clickHere.addMouseOverHandler(new MouseOverHandler() { public void onMouseOver(MouseOverEvent event) { clickHere.setStyleName("removeitem handCursor"); } }); clickHere.addMouseOutHandler(new MouseOutHandler() { public void onMouseOut(MouseOutEvent event) { clickHere.setStyleName("narrowedItem normalCursor"); } }); panel.add(clickHere); panel.add(new HTML("</ul>")); } //not narrowed so needs to show all locations if (!narrowByLocation){ panel.add(new HTML("<span>Narrow by location:</span><ul>")); //gets all locations when passed a card set Iterator<?> i = cardSet.getCardLocations(cardsMatchingCriteria).iterator(); while (i.hasNext()) { final String temp = i.next().toString(); final HTML clickHere = new HTML("<li>" + temp + "</li>"); clickHere.addStyleName("inline links"); clickHere.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { narrowByLocation=true; narrowByLocationRes = temp; cardsMatchingCriteria = cardSet.narrowByLocation(cardsMatchingCriteria, temp); searchResults(); } }); clickHere.addMouseOverHandler(new MouseOverHandler() { public void onMouseOver(MouseOverEvent event) { clickHere.setStyleName("inline links handCursor mouseHover"); } }); clickHere.addMouseOutHandler(new MouseOutHandler() { public void onMouseOut(MouseOutEvent event) { clickHere.setStyleName("inline links normalCursor"); } });

Carrie Hall 7179881 - 43 -

panel.add(clickHere); } panel.add(new HTML("</ul>")); } //already narrowed by size if (narrowBySize){ panel.add(new HTML("<br/><span>Narrow by size:</span><ul>")); final HTML clickHere = new HTML("<li>" + narrowBySizeRes + "</li>"); clickHere.addStyleName("narrowedItem"); clickHere.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { narrowBySize=false; narrowBySizeRes = ""; if (!narrowByLocation) { if (searchString.equals("all")) { cardsMatchingCriteria = cardSet.getCards(); } else { cardsMatchingCriteria = cardSet.getCardsByCompetence(searchString); } } else { if (searchString.equals("all")) { cardsMatchingCriteria = cardSet.getCards(); } else { cardsMatchingCriteria = cardSet.getCardsByCompetence(searchString); } cardsMatchingCriteria = cardSet.narrowByLocation(cardsMatchingCriteria, narrowByLocationRes); } searchResults(); } }); clickHere.addMouseOverHandler(new MouseOverHandler() { public void onMouseOver(MouseOverEvent event) { clickHere.setStyleName("removeitem handCursor"); } }); clickHere.addMouseOutHandler(new MouseOutHandler() { public void onMouseOut(MouseOutEvent event) { clickHere.setStyleName("narrowedItem normalCursor"); } }); panel.add(clickHere); panel.add(new HTML("</ul>")); } //not narrowed by sizes if (!narrowBySize) { panel.add(new HTML("<br/><span>Narrow by size:</span><ul>")); Iterator<?> i = cardSet.getSizes(cardsMatchingCriteria).iterator(); while (i.hasNext()) { final String temp = i.next().toString();

Carrie Hall 7179881 - 44 -

final HTML clickHere = new HTML("<li>" + temp + "</li>"); clickHere.addStyleName("inline links"); clickHere.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { narrowBySize=true; narrowBySizeRes = temp; cardsMatchingCriteria = cardSet.narrowBySizes(cardsMatchingCriteria, temp); searchResults(); } }); clickHere.addMouseOverHandler(new MouseOverHandler() { public void onMouseOver(MouseOverEvent event) { clickHere.setStyleName("inline links handCursor mouseHover"); } }); clickHere.addMouseOutHandler(new MouseOutHandler(){ public void onMouseOut(MouseOutEvent event) { clickHere.setStyleName("inline links normalCursor"); } }); panel.add(clickHere); } panel.add(new HTML("</ul>")); } DiscPanel.add(panel); //if there are results then show the narrowing if (cardsMatchingCriteria.size()>0) { RootPanel.get("main").add(DiscPanel); } } /* gets all competences to go in a suggestbox */

public MultiWordSuggestOracle createCompetences(){ MultiWordSuggestOracle oracle = new MultiWordSuggestOracle(); for (int i=0; i<cardSet.getCards().size(); i++) { oracle.add(cardSet.getCard(i).getcoreCompetence()); } return oracle; } /* Gets a list of counties in England. */ public MultiWordSuggestOracle createCounties(){ MultiWordSuggestOracle oracle = new MultiWordSuggestOracle(); oracle.add("Bath and North East Somerset"); oracle.add("Bedfordshire"); oracle.add("Berkshire"); oracle.add("Blackburn with Darwen"); oracle.add("Blackpool"); oracle.add("Bournemouth"); oracle.add("Brighton & Hove"); oracle.add("Bristol"); oracle.add("Buckinghamshire"); oracle.add("Cambridgeshire"); oracle.add("Cheshire"); oracle.add("Cornwall"); oracle.add("Cumbria"); oracle.add("Darlington"); oracle.add("Derby"); oracle.add("Derbyshire"); oracle.add("Devon"); oracle.add("Dorset");

Carrie Hall 7179881 - 45 -

oracle.add("Durham"); oracle.add("East Riding of Yorkshire"); oracle.add("East Sussex"); oracle.add("Essex"); oracle.add("Gloucestershire"); oracle.add("Greater London"); oracle.add("Greater Manchester"); oracle.add("Halton"); oracle.add("Hampshire"); oracle.add("Hartlepool"); oracle.add("Herefordshire"); oracle.add("Hertfordshire"); oracle.add("Hull"); oracle.add("Isle of Wight"); oracle.add("Kent"); oracle.add("Lancashire"); oracle.add("Leicester"); oracle.add("Leicestershire"); oracle.add("Lincolnshire"); oracle.add("Luton"); oracle.add("Medway"); oracle.add("Merseyside"); oracle.add("Middlesbrough"); oracle.add("Milton Keynes"); oracle.add("Norfolk"); oracle.add("North East Lincolnshire"); oracle.add("North Lincolnshire"); oracle.add("North Somerset"); oracle.add("North Yorkshire"); oracle.add("Northamptonshire"); oracle.add("Northumberland"); oracle.add("Nottingham"); oracle.add("Nottinghamshire"); oracle.add("Oxfordshire"); oracle.add("Peterborough"); oracle.add("Plymouth"); oracle.add("Poole"); oracle.add("Portsmouth"); oracle.add("Redcar and Cleveland"); oracle.add("Rutland"); oracle.add("Shropshire"); oracle.add("Somerset"); oracle.add("South Gloucestershire"); oracle.add("South Yorkshire"); oracle.add("Southampton"); oracle.add("Southend-on-Sea"); oracle.add("Staffordshire"); oracle.add("Stockton-on-Tees"); oracle.add("Stoke-on-Trent"); oracle.add("Suffolk"); oracle.add("Surrey"); oracle.add("Swindon"); oracle.add("Telford and Wrekin"); oracle.add("Thurrock"); oracle.add("Torbay"); oracle.add("Tyne and Wear"); oracle.add("Warrington"); oracle.add("Warwickshire"); oracle.add("West Midlands"); oracle.add("West Sussex"); oracle.add("West Yorkshire"); oracle.add("Wiltshire"); oracle.add("Worcestershire"); oracle.add("York"); return oracle; }

}

Carrie Hall 7179881 - 46 -

CAR DSET. JA VA

This is the Java class which stores the list of cards that is used in the system. package com.contact.client; import java.io.Serializable; import java.util.ArrayList; import java.util.Iterator; import com.google.gwt.user.client.rpc.IsSerializable; public class CardSet implements IsSerializable, Serializable{ /** * Used for generating XML on the server */ private static final long serialVersionUID = -8037531018349633375L; //to store Cards public ArrayList<Card> cardSet; /* * Constructor */ public CardSet() { cardSet = new ArrayList<Card>(); } /* * Adds a card to the CardSet * @Param Card to input * @return boolean result */ public boolean addCard(Card c) { //if card is not already in if (!this.hasCard(c)) { return cardSet.add(c); } else { return false; } } /* * Removes a card from the CardSet * @Param Card to remove * @return boolean result */ public boolean removeCard(Card c) { if (this.hasCard(c)) { return cardSet.remove(c); } else { return false; } } /* * Checks if a card is in the list already by checking if a Card exists with the same * name, town, and county * @Param Card to input * @return boolean result */

Carrie Hall 7179881 - 47 -

public boolean hasCard(Card c) { Iterator<Card> i = cardSet.iterator(); while (i.hasNext()) { Card temp = i.next(); if (c.getcompanyName().toLowerCase().equals(temp.getcompanyName().toLowerCase())) { if (c.getcounty().toLowerCase().equals(temp.getcounty().toLowerCase())) { if (c.gettown().toLowerCase().equals(temp.gettown().toLowerCase())) { return true; } } } } return false; } /* * Returns the CardSet */ public ArrayList<Card> getCards() { return cardSet; } /* * Returns a list of cards that match, or nearly match, competence */ public ArrayList<Card> getCardsByCompetence(String compIn) { //temp ArrayList<Card> list = new ArrayList<Card>();

list to store Cards

//iterates through all cards Iterator<Card> i = cardSet.iterator(); while (i.hasNext()) { Card temp = i.next(); //if competence matches exactly if (temp.getcoreCompetence().toLowerCase().equals(compIn.toLowerCase())) { list.add(temp); } } //second iteration finds all nearly matching cards Iterator<Card> j = cardSet.iterator(); while (j.hasNext()) { Card temp = j.next(); //if competence nearly matches (it starts with or ends with competence) if (!temp.getcoreCompetence().toLowerCase().equals(compIn.toLowerCase())) { if (temp.getcoreCompetence().toLowerCase().endsWith(compIn.toLowerCase()) || temp.getcoreCompetence().toLowerCase().startsWith(compIn.toLowerCase())) { list.add(temp); } } }

Carrie Hall 7179881 - 48 -

//returns list return list; } /* Gets String array of all of the Card locations * @param: the ArrayList of Cards to search * @return a String ArrayList */ public ArrayList<String> getCardLocations(ArrayList<Card> cards) { ArrayList<String> list = new ArrayList<String>(); //loops though cards Iterator<Card> i = cards.iterator(); while (i.hasNext()) { Card temp = i.next(); //if county is not in there already if (!list.contains(temp.getcounty())) { //add county list.add(temp.getcounty()); } } return list; } /* Gets String array of all of the Card locations * @param: the ArrayList of Cards to search * @return a String ArrayList */ public ArrayList<String> getSizes(ArrayList<Card> cards) { ArrayList<String> list = new ArrayList<String>(); //loops though cards Iterator<Card> i = cards.iterator(); while (i.hasNext()) { Card temp = i.next(); //if size is not in there already if (!list.contains(temp.getSize())) { //add size list.add(temp.getSize()); } } return list; } /*Sends in an arrayList of cards and a String representing the required size to * find matches of those cards with that size * @param: the ArrayList of Cards to search * @return an ArrayList of Cards matching selection */ public ArrayList<Card> narrowBySizes(ArrayList<Card> cardsIn, String sizeIn) { ArrayList<Card> list = new ArrayList<Card>(); Iterator<Card> i = cardsIn.iterator(); while (i.hasNext()) { Card temp = i.next(); //if current card is the required size if (temp.getSize().equals(sizeIn)) { //if list doesnt if (!list.contains(temp))

already contain the card

{ //add card list.add(temp); }

Carrie Hall 7179881 - 49 -

} } return list; } /* Sends in an arrayList of cards and a String representing the required location to find matches of those cards with that location * @param: the ArrayList of Cards to search * @return an ArrayList of Cards matching selection */ public ArrayList<Card> narrowByLocation(ArrayList<Card> cardsIn, String locIn) { ArrayList<Card> list = new ArrayList<Card>(); Iterator<Card> i = cardsIn.iterator(); while (i.hasNext()) { Card temp = i.next(); //location matches if (temp.getcounty().equals(locIn)) { //card is not in list if (!list.contains(temp)) { //add card to list list.add(temp); } } } return list; } //gets card at specific location public Card getCard(int i){ return cardSet.get(i); } }

Carrie Hall 7179881 - 50 -

CAR D.J AV A

This is the Java class which generates Card objects which are stored in a CardSet.

package com.contact.client; import java.io.Serializable; import com.google.gwt.user.client.rpc.IsSerializable; public class Card implements IsSerializable, Serializable { /** * To implement the ability to save XML files on the server */ private static final long serialVersionUID = 4489832796671731651L; //variables public String companyName; public String address; public String town; public String county; public int numberOfStaff; public String coreCompetence; public String contactName; public String contactTel; public String contactEmail; /* * Constructor. Instantiates a Card object */ public Card(String companyNameIn, String addressIn, String townIn,String countyIn, int numberOfStaffIn, String coreCompetenceIn, String contactEmailIn, String contactNameIn, String contactTelIn) { companyName = companyNameIn; address = addressIn; town = townIn; county = countyIn; numberOfStaff = numberOfStaffIn; coreCompetence = coreCompetenceIn; contactName = contactNameIn; contactTel = contactTelIn; contactEmail = contactEmailIn; } /* * Capitalises first letter of a string * Param * Return: Formatted string

: String to convert

*/ public String capitaliseFirstLetter(String str) { String firstLetter = str.substring(0,1); // Get first letter String remainder = str.substring(1); // Get remainder of word. return firstLetter.toUpperCase() + remainder.toLowerCase(); } /* * Set methods */ public void setcompanyName(String companyNameIn) { companyName = companyNameIn; } public void setaddress(String addressIn) { address = addressIn; }

Carrie Hall 7179881 - 51 -

public void settown(String townIn) { town = townIn; } public void setcounty(String countyIn) { county = countyIn; } public void setnumberOfStaff(int numberOfStaffIn) { numberOfStaff = numberOfStaffIn; } public void setcoreCompetence(String coreCompetenceIn) { coreCompetence = coreCompetenceIn; } public void setcontactName(String contactNameIn) { contactName = contactNameIn; } public void setcontactTel(String contactTelIn) { contactTel = contactTelIn; } public void setcontactEmail(String contactEmailIn) { contactEmail = contactEmailIn; } /* * Get methods */ public String getcompanyName() { return companyName; } public String getaddress(){ return address; } public String gettown() { return capitaliseFirstLetter(town); } public String getcounty() { return county; } public int getnumberOfStaff() { return numberOfStaff; } /* * Returns a string saying the size of company based on number of employees */ public String getSize() { if (numberOfStaff<100) { return "Small"; } else { return "Medium"; } } public String getcoreCompetence(){ return capitaliseFirstLetter(coreCompetence); } public String getcontactName() { return contactName;

Carrie Hall 7179881 - 52 -

} public String getcontactEmail() { return contactEmail; } public String getcontactTel() { return contactTel; } /* * The method which returns a String of XML information */ public String toXML() { String xml = ""; xml += "\t<Card>\n"; xml += "\t\t<Name>" + companyName + "</Name>\n"; xml += "\t\t<Address>" + address + "</Address>\n"; xml += "\t\t<Town>" + town + "</Town>\n"; xml += "\t\t<County>" + county + "</County>\n"; xml += "\t\t<Size>" + numberOfStaff + "</Size>\n"; xml += "\t\t<Competence>" + coreCompetence + "</Competence>\n"; xml += "\t\t<Contact tel='" + contactTel + "' email='" + contactEmail + "'>\n"; xml += "\t\t\t" + contactName + "\n"; xml += "\t\t</Contact>\n"; xml += "\t</Card>\n"; return xml; } }

Carrie Hall 7179881 - 53 -

CA R D S.X M L

This is the XML file which stores the overall list of cards. The root element is “Cards” and it has an unlimited number of “Card” elements within it. Each “Card” element contains the following elements: Name, Address, Town, County, Size, Competence and Contact. In addition the Contact element contains a “telephone” and “email” attribute.

Note: this is a portion of the XML file, the original file contains more “Card” elements.

<?xml version="1.0"?> <Cards xmlns="http://www.w3schools.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3schools.com cards.xsd"> <Card> <Name>10'O'Clock Shop</Name> <Address>34 Poulton Road</Address> <Town>Wallasey</Town> <County>Merseyside</County> <Size>34</Size> <Competence>News</Competence> <Contact tel='07730269491' email='[email protected]'> Ted Hall </Contact> </Card> <Card> <Name>Team Netsol</Name> <Address>2-4 Little Peter Street</Address> <Town>Manchester</Town> <County>Greater Manchester</County> <Size>20</Size> <Competence>Java</Competence> <Contact tel='07821458963' email='[email protected]'> Mike Smith </Contact> </Card> <Card> <Name>Cuckoo Design</Name> <Address>247 Chapel Street</Address> <Town>Salford</Town> <County>Greater Manchester</County> <Size>25</Size> <Competence>Design</Competence> <Contact tel='07821869381' email='[email protected]'> Dominique Briggs </Contact> </Card> <Card> <Name>Optimus Media</Name> <Address>175 Cross Street</Address> <Town>Sale</Town> <County>Greater Manchester</County> <Size>3</Size> <Competence>Web Design</Competence> <Contact tel='07821458745' email='[email protected]'> Peter Furnival </Contact> </Card> </Cards>

Carrie Hall 7179881 - 54 -

CU CK OO DES I GN_GR EA T ER MA N CHES T ER.X M L

This is the a sample XML file for an individual card. Similarly to the overall list of cards, the root element is “Cards”. This is to keep the file consistant and so that it still validates against the same DTD. This allows both of these files to be re-used in other programs but without having to code anything differently.

The “Card” element contains the following elements: Name, Address, Town, County, Size, Competence and Contact. In addition the Contact element contains a “telephone” and “email” attribute.

The file name is the business name and the county it is located in. This is to ensure that if two businesses have the same name it will be easily identifiable. <?xml version="1.0"?> <Cards xmlns="http://www.w3schools.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3schools.com cards.xsd"> <Card> <Name>Cuckoo Design</Name> <Address>247 Chapel Street</Address> <Town>Salford</Town> <County>Greater Manchester</County> <Size>25</Size> <Competence>Design</Competence> <Contact tel='07821869381' email='[email protected]'> Dominique Briggs </Contact> </Card> </Cards>

Carrie Hall 7179881 - 55 -

CARDS.XSD This is the schema file for the XML files that are created by the system. <?xml version="1.0" encoding="UTF-8" ?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.w3schools.com" xmlns="http://www.w3schools.com"> <xs:element name="Address"> <xs:complexType mixed="true" /> </xs:element> <xs:element name="Card"> <xs:complexType> <xs:sequence> <xs:element ref="Name" /> <xs:element ref="Address" /> <xs:element ref="Town" /> <xs:element ref="County" /> <xs:element ref="Size" /> <xs:element ref="Competence" /> <xs:element ref="Contact" /> </xs:sequence> </xs:complexType> </xs:element> <xs:element name="Cards"> <xs:complexType> <xs:sequence> <xs:element ref="Card" maxOccurs="unbounded" /> </xs:sequence> </xs:complexType> </xs:element> <xs:element name="Competence"> <xs:complexType mixed="true" /> </xs:element> <xs:element name="Contact"> <xs:complexType mixed="true"> <xs:attribute name="tel" type="xs:NMTOKEN" use="required" /> <xs:attribute name="email" type="xs:string" use="required" /> </xs:complexType> </xs:element> <xs:element name="County"> <xs:complexType mixed="true" /> </xs:element> <xs:element name="Name"> <xs:complexType mixed="true" /> </xs:element> <xs:element name="Size"> <xs:complexType mixed="true" /> </xs:element> <xs:element name="Town"> <xs:complexType mixed="true" /> </xs:element> </xs:schema>

Carrie Hall 7179881 - 56 -

APPENDIX D

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Match between system and the real world

The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

User control and freedom

Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Recognition rather than recall

Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Flexibility and efficiency of use

Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.