WEB APPLICATION MODEL FOR VISUAL SOFTWARE CIRCUIT BOARD

1
WEB APPLICATION MODEL FOR VISUAL SOFTWARE CIRCUIT
BOARD  PROTOTYPE OF E-COMMERCE APPLICATION FOR
VSCB
American University of Armenia

• College of Engineering 
• Computer and Information Science Department

Date 22 September 2003
2
The project is aimed

• To facilitate an intuitive way of designing
  interactive web applications via visually drawing
  flow of screens using VSCB
• To demonstrate flexibility of Visual Component
  Based Development with VSCB
• To prove the efficiency of the VSCB approach for
  design and development of the interactive
  applications
• To develop a prototype e-commerce web application
  using VSCB.
• To enhance the VSCB development platform with
  appropriate parts and tools.

3
Acronyms

• VSCB Visual Software Circuit Board
• URL Unified Resource Locator
• MVC Model View Controller
• XML - Extensible Markup Language
• GUI Graphical User Interface

4
Visual Software Circuit Board Background

• Integrated environment for visual engineering of
  software projects
• Uses component-based and hierarchical approaches
  to assemble software systems
• Based on concepts of Parts, Devices and Wires.
• Allows visual simulation and analyses of software
  systems
• http//www.opensourcearmenia.com/Projects/VCB/

5
Part, Device and Connector are VSCB main elements

• Part is a software component, which consumes,
  produces or transforms data
• Device is configuration of Parts and/or other
  Devices, which shows topological layout where
  Parts and Devices are connected to each other via
  links
• Wire - enable anonymous collaboration among parts

6
VSCB supports intuitive design
Presenting simple web application as sequence of
pages

• High level view
• Clear Architecture
• Clear responsibilities

7
VSCB web model support flow design

• Parts on the VSCB highest abstract diagram are
  screens
• Screens are devices because they are composed
  from other parts.
• Screens contains Model, View and Controller Parts
• VSCB diagram controls the flow
• It allows usage of best practices in UI
  development

Page1
Page 2
In this approach we need two interdependent
components SessionStart and SessionStep
8
VSCB makes easy to control the state and flow
page1
page1
page1
page1
page1
page3
page3
start
start
page2
page2
page2

• At every moment user is at the certain state and
  VSCB move him/her from one state to another
  depending on his/her input and other conditions
  (say time or user privileges etc.).
• VSCB diagram will always get request in one place
  and will decide the next page using VSCB links
  and not URLs.

9
VSCB allows intuitive design by drawing a flow of
screens

• VSCB allows make use of this approach by
  representing flow of screens as parts and
  connections
• On high level diagram it shows screens as VSCB
  parts

10
VSCB provides intuitive MVC pattern view

• Allows visualization of the pattern
• Facilitate natural way of thinking
• Improves product architecture

11
VSCB hides the complexities of flow control
VSCB users dont see Servlet in VSCB configuration
12
VSCB allows bottom up and top down design

• Allows top down and bottom up approaches
• Allows hierarchical composition
• Hides complexities of implementation
• Provides user friendly diagrams on multiple
  levels of abstraction.

13
VSCB increase reusability of components

• Most of solutions require only reuse of existing
  parts
• Applications can be developed visually using
  drag-and-drop of parts from existed libraries
• If there is enough parts applications can be
  created visually without coding

View device expanded
14
VSCB increase flexibility of application
engineering

• Standard Controller device
• Extended adding standard Filter parts from
  Library
• Configured using connectors (links) setting
  parts properties

• Easy re-configurable
• Easy extensible
• Increase productivity
• Assembly line approach
• Reduce the required level of expertise
• Increase speed of development

Expanded controller device
In the controller device we configure logic of
dispatching sequence of pages using Controller
part and standard Filter/s parts
15
VSCB contains tools for simulation and testing

• Runtime application management
• pins can be fired at runtime
• events processing can be halted /or resumed
  halfway
• allows step-by-step execution

e-shop configuration
16
VSCB allows runtime event tracking
e-shop configuration

• Track runtime information of all loaded parts and
  devices
• Nested parts events also are tracked

Track events when user enters URL in the browser
17
E-shop development proves efficiency of VSCB
Nothing changed from users point of view
18
VSCB provides runtime configuration management
e-shop configuration

• links on the diagram control the real flow of
  screens, not the html presentation
• properties can be changed runtime

19
Result of not linked outpin in browser
User cant access resource directly by URL
20
VSCB makes debugging easy
e-shop configuration
Result of not linked outpin in VSCB Test View

• easy way of problem revealing
• simple recovering mechanism

21
Result in browser after recovering link with
products device
Changes at server-side are transparent for user
22
Flexibility Extensibility
Imagine that if we have some login web page which
does authentication and we put this login page
between default and products pages we would
automatically guarantee secure access to the
products page. This flexibility of changing
flow of web pages, adding new ones or removing
old ones is one of the basic benefits of VSCB.
23
Future enhancement

• Concurrent user access mode
• For asynchronous access the notion of
  multi-layered chipsets design approach will be
  used

24
Conclusion

• Screens on top-level diagram are implementation
  independent
• Flexibility of changing flow of web pages, adding
  new ones, removing old ones and re-wiring
  (re-connecting) the exited ones
• Links of configuration diagram control the real
  flow of screens, not the html presentation
• Connections can be reconfigured without affecting
  the pages themselves
• Separation of content, presentation and control
• Improving productivity via part reuse
• Making the application logic visible

25
References

• Visual Software Circuit Board (VSCB) -
• http//www.opensourcearmenia.com/Projects/VCB/
• http//sourceforge.net/projects/vcb
• Dr. Hovhannes Avoyan
• Dr. Jack Harich

Student Artavazd Mehrabyan Supervisor Dr.
Hovhannes Avoyan