The Effectiveness of Web Components

Presented By:

Geoffrey Zimmerman

Computer Science Capstone

Fall 2004/Spring 2005

Mentor: Dr. C. David Shaffer

What are Software Components?

• The simplest component is a function (ex: add two numbers together)

• These have a well defined interface

• These simple functions can be grouped with similar functions to create a larger component (ex: a math component)

• Ideally able to be manipulated to fit a variety of uses

• Able to hold information

Visual Components

• Visual components contain the functional use previously described as well as a visual representation

• Microsoft® Windows® Calculator as an example– Text box– Button– Menu– Label– Form

• Icon

• Title

• Control Buttons

Web components

• Web components are used in web-based applications• A web-based program runs on a remote server and is

viewed via a web browser (ex: Microsoft® Internet Explorer®)

• Generally a form of visual components.• Buttons and text boxes shown on web pages are not web

components themselves. They are visual components drawn by the web browser. Instead the entire form generated may be rendered though a component

Why use components?

• Creates consistency within the application– Example: All buttons in Windows® look the same

• Allows for less software to be written, creating fewer mistakes– Example: The software to determine how a button is

drawn, allow for it to know if it is clicked, and to have it do something when clicked does not need to be re-created every time a button is needed.

How can components be reused?

• Nesting– Placed inside of other components– Windows® Calculator has all of its components nested inside of

the window

• Calling– Raise another component from within a component– Dialog box

Why is reusability an issue?

• Adds simplicity in development

• “Write it once”

• Allows the programmer to think in abstraction– When writing software, the programmer does not need

to worry about some of the technical details involved with the components (ex: making a button know if it has been clicked on)

What makes a component reusable?

• Able to be used in different contexts• Types of reusability

– Configure• Example: The Button

– Label– Size– Color– Action

– Extend• Subclass• Copy/paste

Obstacles to reusability in web applications

• Appearance– Generally want programs to duplicate the look of a

company’s web page.– Difficult for generic components to change their

appearance to match the look of each individual site.– Example: Shopping cart

Obstacles to reusability in web applications

• Visual design details– Components with buttons embedded

• The buttons may not be appropriate for all potential uses of the component

• Limits the contexts that the component can be used in

Obstacles to reusability in web applications

• Visual design– Example

• We have a component that stores names and e-mail addresses

• Want to use component in application that also stores phone number and address

• Can not just nest the component

• Ideal design

Obstacles to reusability in web applications

– Technical issues with HTML• If a component that generates a form is placed in another

form, a nested form is created• HTML does not support nested forms, so the generated web

page would contain invalid HTML.• Component from last example potentially has the same

problem

My Work

The Application

• Web-based payroll and scheduling program

• Program maintains a user list, time card data and work schedule. This information is used to generate various reports and calculate payroll information

• Constructed components from scratch making them reusable within this program.

• These components were not designed to be used outside of this application.

Issues

• One application was not enough to determine the reusability of Seaside’s components in general

• Focused on developing components that were reusable with in the context of this application

Resources Used

• Squeak (www.squeak.org)– Programming language, derived from Smalltalk 80

• Seaside (www.seaside.st)– Smalltalk-based component framework

• GOODS database (www.garret.ru/~knizhnik/goods.html)– Object-oriented database. Interfaces well with Squeak

Examples of Reuse

• Message board component– Motivation

• Wanted the ability to display messages to users

– Interface• Border (yes/no)• Messages (List)

– Places used• Login screen• Welcome Screen

Examples of Reuse:Message Board Component

Examples of ReuseMessage Board Component

Examples of Reuse

• Select User Dialog– Motivation

• User needs the ability to select a different user’s name

– Interface• Group by department (yes/no)• User list (List)

– Places used• Modify Users• Create User• View other timecard• Edit timecard• Set schedules

Examples of Reuse:Select User Dialog

Examples of Reuse

• Time Card viewer– Motivation

• Component views time card data

• Time card data needs to be viewed in different parts of the program

– Interface• Username to view punches

for (string)• Allow edits (yes/no)

• Places used– View user’s own time card– View other user’s time card– Edit time card

Examples of Reuse:Select User Dialog

Examples of Reuse:Select User Dialog

Examples of Reuse:Select User Dialog

Built-in Seaside Components Used

• WAComponent• WADateSelector• WAMiniCalendar• Combined to make date

selector boxes.• These are used several

times throughout the application

Conclusions

• Easy to build reusable components in Seaside

Observations

• Learning Curve– Learn the component– Build it from scratch

Future work

• Explore reuse of the components designed in this project in multiple applications

• Have users test application

• Place application in production

• Can we create larger components as reusable as the button?

Questions