MSc Project Presentation Narrator: Christopher Harper 16 th July - - PowerPoint PPT Presentation

A Google Web Toolkit Based Graphical User Interface for CORBA Middle Layer Business Logic Applications

MSc Project Presentation

Narrator: Christopher Harper

16th July 2010

Supervisor: Dr Marc Eberhard Department of Electronic Engineering School of Engineering and Applied Science Aston University

Section 1: Project Objective Section 2: Solution Requirements Section 3: Solution Design Section 4: Solution Overview Section 5: Author’s Contribution Section 6: Questions

Supervisor: Dr Marc Eberhard Department of Electronic Engineering School of Engineering and Applied Science Aston University

Presentation Synopsis

Section 1.0

Project Objective

Supervisor: Dr Marc Eberhard Department of Electronic Engineering School of Engineering and Applied Science Aston University

Section 1.1 Project Objective Module EE4006 – Electronic Engineering, Aston University. Defined Project Objective: “To extend the current web-based game server user interface to create a learning, development and collaboration environment to support and improve the delivery of the Distributed Systems module” Why Learning?

Improve accessibility to subject material

Why Development?

Simplify software development – No local tools required

Why Collaboration?

Progress reporting and interaction with tutor

MOBILISE THE STUDENT – OVERCOME BARRIERS TO LEARNING Q: “What was the defined project objective?”

Section 1.2 Project Objectives Module EE4006 – Electronic Engineering, Aston University.

Project

• bjectives:

Define Functionality Implement using a rapid development framework: The Google Web Toolkit Application

• f accepted UI

design methodologies: Information Architecture

Objective Success =

Product = A Self-Contained, Web-based Learning Environment Outcome = Improved Mobility, Productivity and Collaboration Q: “How will we achieve the project objective?”

Section 2.0

Solution Requirements

Supervisor: Dr Marc Eberhard Department of Electronic Engineering School of Engineering and Applied Science Aston University

Section 2.1 Solution Requirements Module EE4006 – Electronic Engineering, Aston University.

An integrated environment, accessible on demand using a web browser

Q: “What was the required application functionality?”

• Game Server Interaction Interface
• Preserve and improve the current interface.
• Application Development Interface
• Provide the user with the development tools they require to undertake

their assignment coursework.

• Student Reporting Interface
• The facility to create, store and retrieve a formatted report from the server.
• Lecture Material Interface
• The facility to access the module material without the need to navigate away

from the integrated web environment.

• Bug Tracking Interface
• A facility where the user may view current known issues with the integrated

environment and report new ones or unexpected behaviour.

Section 2.2 Solution Requirements Module EE4006 – Electronic Engineering, Aston University. User Interface Implementation User Interface Design User Interface Features Simple Menu Driven Navigation Elements Positioned Where Users Expect to See Them Related Functions Grouped Together Must Operate in all Popular Web Browsers Window Must Be Manually Re-sizeable whilst not Distorting Element Layout Responsive Performance Despite UI Complexity Q: “What was the required user interface functionality?”

Section 3.0

Solution Design

Supervisor: Dr Marc Eberhard Department of Electronic Engineering School of Engineering and Applied Science Aston University

Section 3.1 Final Solution - Created using the Google Web Toolkit Module EE4006 – Electronic Engineering, Aston University. A: “Navigation menu & toolbar driven operation.”

• Game Server Interaction Interface

“Server Pane”

• Application Development Interface

“Development Pane”

• Student Reporting Interface

“Progress Reporting Pane”

• Lecture Material Interface

“Lecture Material Pane”

• Bug Tracking Interface

“Known Issues Pane" Navigation Menu “Navigation Pane” Navigation System Functionality Q: “What is the basis of the application?”

Section 3.2 Final Solution – Created using the Google Web Toolkit Module EE4006 – Electronic Engineering, Aston University. A : “Two horizontal panes within a container.” Horizontal Panel - “Hub Panel” (Dynamic Sizing) Vertical Panel “Navigation Pane” Sizing: Static Composite Widget Loaded on Demand “Server Pane” “Development Pane” “Progress Reporting Pane” “Lecture Material Pane” “Known Issues Pane” Sizing: Dynamic Q: “What is the application laid out using the GWT?”

Section 3.3 Final Solution – Created using the Google Web Toolkit Module EE4006 – Electronic Engineering, Aston University. Q: “How does the solution operate?”

Is the Selection Currently Loaded? Unload Current Widget from Right-hand Panel Load New Selected Widget into Right-hand Panel Navigation Menu Selection End of Process No Yes Section-Specific Functionality and Processes

A : “Loading/Unloading self-contained section widgets.”

Section 3.4 Final Solution – Created using the Google Web Toolkit Module EE4006 – Electronic Engineering, Aston University. Q: “How is the client application constructed?”

Entry Point

EntryPointImpl.java

Hub Panel

EntryPointImpl.java

(Composite Widget)

Server Pane

ServerPane.java

(Composite Widget)

Lecture Material Pane

LectureMaterialPane.java

(Composite Widget)

Development Pane

DevelopmentPane.java

(Composite Widget)

Reporting Pane

ReportingPane.java

(Composite Widget)

Known Issues Pane

KnownIssuesPane.java

(Composite Widget)

{Sequence of Instantiation within Single Browser Session}

1 1 1 1 1 1 1 1 User Requests Application in Browser

A: “Objects that hold state.”

String – Octet Conv

StringUtils.java

(Utility Class)

1 1 1 1 Rich Text Impl

RichTextToolbar.java

(Utility Class)

Section 3.5 Final Solution – Created using the Google Web Toolkit Module EE4006 – Electronic Engineering, Aston University. Q: “How does the Client and Server Communicate?” A: “Bridging servlets and RPC.”

Development Service

ApplicationService.java

Servlet Container (Web Server)

Emailer Service

EmailSender.java

Session Service

AuthenticationService.java

Updates Service

CorbaAssignement.java

Client Application

Development Pane Server Pane Reporting Pane Lecture Material Pane (IFRAME) Known Issues Pane

CORBA Middle Layer to Game Server RPC (HTTP)

Section 4.0

Solution Review

Supervisor: Dr Marc Eberhard Department of Electronic Engineering School of Engineering and Applied Science Aston University

Section 4.1: Navigation and Server Pane Module EE4006 – Electronic Engineering, Aston University.

Section 4.2: Development Pane Module EE4006 – Electronic Engineering, Aston University.

Section 4.3: Progress Reporting Pane Module EE4006 – Electronic Engineering, Aston University.

Section 4.4: Lecture Material Pane Module EE4006 – Electronic Engineering, Aston University.

Section 4.4: Known Issues Pane Module EE4006 – Electronic Engineering, Aston University.

Section 5.0

Achieved Objectives & Further Work

Supervisor: Dr Marc Eberhard Department of Electronic Engineering School of Engineering and Applied Science Aston University

Section 5.1 Achieved Objectives Module EE4006 – Electronic Engineering, Aston University. Author’s contributions the project.

• The game server has been successfully extended by the author.

Outcome

• The author has implemented the required application functionality.
• The author failed to deliver the code on time.
• The author has implemented the required UI functionality.
• The author has implemented the required RPC/CORBA servlets.
• The code requires migrating to a new version.
• There are still outstanding bugs.
• The layout is intuitive, easy to use and responsive.

Section 5.2 Further Work Module EE4006 – Electronic Engineering, Aston University. What next?

• Migrate the code to version 2.* of the Google Web Toolkit.

Compulsory

• Resolve the outstanding issues and modify CSS in reporting pane.
• Implement syntax highlighting for development pane.
• Regression test the application.
• Implement line numbers within the development text area.

Finally, release to live and enhance the application.

Section 6.0

Questions, Discussion & Handouts

Supervisor: Dr Marc Eberhard Department of Electronic Engineering School of Engineering and Applied Science Aston University