Sample Architecture Document v0

Project Name : NAPS Step 2 Version : 0.
03
Created Date : 14-Jan-10 Created By : Tawatchai S. Update Date : 25-Jan-10 Updated By : Tawatchai S.
Technical Review Document

Project Name: NAPS Step 2
Version: 0.03
Project Name : NAPS Step 2 Version : 0.03
Document Name : Technical Review Document Module 0 Process 0
DATE AUTHOR VERSION DESCRIPTION NOTES

24-Jan-10 Tawatchai S. 0.03 Initial Version on UI Specification only
Document Name : Technical Review Document Module 0 Process 0
Table of Content
Section #
1 Web User Interface Specification

1.1 Layout Web Application Screen Design
1. Header Section
2. Footer Section
3. Body Section
1.2 Web Application Message
1.3 Basic Web page interaction
2 Software Common Architecture
2.1 Application send email Architecture
2.2 File Upload & Download architecture
3 Application Deployment Model
3.1 Hardware Architenture Summary
3.2 System Software Summary
3.3 Application Architecture
Document Name : Technical Review Document Module Process
Web User Interface Specification
Purpose
This section provides a template for the content of a user interface specification. Its based format has been developed from previous step of NAPS projects which is NAPS Step 1.2.
The purpose of a user interface specification is to document the design and to aid the communication with ASH/IT & developers. It is not appropriate for communicating the design to users.
The document covers the design of a web browser interaction and its associated dialogs. It describes the overall design, but not the detailed appearance and behavior (look and feel) of individual elements.
In most cases the user interface specification is based on a functional requirements specification that describes the business needs and requirements for the web application.
Overview
NAPS Step2 compose with 10 sub-modules which are the following:

1 Import Process
2 Direct Shipment \
3 Child Part Y
4 E-Quotation
5 Claim from Dealer to APC
6 Claim from APC to Supplier
7 Self Billing (AS/400 Only)
8 Supplier Datalink ETD
9 Supplier Datalink Back Order ETD
10 Supplier Datalink FTA
For above 9 sub-modules except SefBilling, they all will be applied with this Web UI Specification. And the browser menu and address bar will also hide automatically after logon success.
ASH Specification for Web UI Design
1 Must be work with Microsoft Web Browser (Internet Explorer) version 6.
2 Screen resolution used will be at 1024 x 768 pixels
3 Based template will be use existing from ASH
Basic Structure of User Interface
The Web User Interface Standard will be compose of 3 major sections which are:
1 Header Section
2 Footer Section
3 Body Section
Sample Architecture Document_v0.3 Page 4 of 23


Layout Web Application Screen Design
This below picture show about 3 section of Web Application screen layout.
Header
Body
Footer

1. Header Section
Header is an area on the upper most on the screen and it will be display on top of every application page. The header section wilbe display the following component:
1.2 Company Name

1.1 Company Logo 1.3 User Information
& Division
1.5 Program Name 1.6 Logout Button

1.4 Menu Control &
Program ID
2. Footer Section
Footer is an area on the bottom of the page and it will be display on every page. The purpose of footer is to let user recognize the end of each page.

3. Body Section
Body is an area for specific screen, In most cases the user interface specification is based on a functional requirements specification that describes the business needs and requirements for the web application.
3.2 Program Navigator
3.3 Date & Time of

last page loaded
3.1 Side Menu
3.4 List Summary

& 3.5 List action icon
Control

Body Section (Cont'd)
3.1 Side Menu

This component allows user to execute program via menu items. And the side menu can be hide from menu control on the header section.
Click Menu Control to Hide Side Menu
Menu item t access to program

3.2 Program Navigator

This component shows information of current level of program executed. And some program that has more than 2 levels, it will allows user to click on items to navigate between level of program.
Display current program level
3.3 Date and Time of last page loaded

This component shows date and time of Application Server for last page loaded

3.4 List Summary & Page Control

This component shows information about data in list, such as number of total records found, Total number of pages and current number of page.
And also allow user to navigate the paging by goto desire page and paging using the appropriate button.
3.4.1 Total record of results search list
3.4.2 Display current page number and total page

&
Goto specific page by entry page number in input area and press GO button
3.4.3 Navigation button use to navigate data in list (First, Previous, Next and Last)

3.5 List Action items

This component alows user to interact with data table list. The number of action(s) or icon(s) will depend on user requirements which will be interact with result set from data table list.
3.5.1 List Action items
3.5.2 Data Table List
Below are some major action for data table list:

3.5.1.1 Add (Create Record)
3.5.1.2 Delete 3.5 Action items for the data table list
This component shows the all possible items to interact with data table list.
3.5.1.3 Refresh
Icon refresh use for refresh or to get up-to-date data from the current page in data table list.
3.5.1.4 Print Preview

Icon print preview use for preview data table list in format of report in dialog and also allow to print out and export to required formatted such as PDF,CSV, TXT ,etc.

Web Application Message
There are 2 types of application message will be use in NAPS Steps 2.

1 Message generate from Application Server (Sever Side)
2 Message generate from Client (Client Side)
Message generate from Application Server

This message type will be generate from application server (Server Side). It's usually related to business rules and logic on the server side.
It will be create into html tag and display additiona row(s) on the top of body section below program navigator. And it will be disappear after user take next further action.
There are 3 category of messages.
1 Error Message 2 Warning Message
3 Information Message

Web Application Message (cont'd)
Message generate from Client Side

This message type will be generate from browser itself (client Side) by Javascript. It's usually related to screen entry component such as date time validation, confirmation to proceed an action, etc.
The message will display in dialog box over the current using browser.
Dialog Box Message

Basic Web page interaction
The basic of web page interaction will be shown as the following steps:
1 Logon

Basic Web page interaction (Cont'd)
2 Dashboard as default home page


User able to click Menu control
to hide menu itself
3 Start and application program by select from menu item
User click to execution program by

select on menu item

4 Search criteria screen Browse Key fields by press magnifier icon
User click magnifier icon to browse User click to choose appropriate record to
key fields for search screen return value the to originate key field
Date picker component let user to

input more correct and valid date
format

5 Display data table list from search criteria and special action on Data Table List such as Column sort order, Detail record view, etc.
Button clear use for clear result set in

data table list and clear screen to
state before doing any search. (No
User able to data table displayed)
click data table
column header
to specify sort
order on column
that shown User able to click action
arrow sign. icon to proceed step for
each individual record
shown in data table list.
Click on
hyperlink to view
detail of
individual record
in data table
list.

6 Create new record by press icon (Add)
Add record will be

execute in modal style.
User has to decide
whether to save, to
cancel or close. Before
go back into search
operation screen.

7 Edit single record by press (Edit)
Update single record will

also be execute in
modal style. User has to
decide whether to save,
to cancel or close.
Before go back into
search operation screen.

8 Delete Record operation by press (Delete), It always show the dialog message to confirm to procedd operation.
On the critical operation,

there will be question
message dialog to
confirm action to proceed,
such as the delete
operation, etc.

9 Print preview by pressing (Preview), It always show new windows (modeless) to let user to printout to printer and export to appropriate format.
Button for Print out to

printer, export to specific
format such as CSV,
For Report page PDF or TXT,etc.
navigation control and
able to zoom.

10 Logout by pressing There will be dialog appear to let user confirm exit from the application.
Dialog message to
confirm user to logout
form application

Sample Architecture Document v0

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Sample Architecture Document v0

Hochgeladen von

Copyright:

Verfügbare Formate

Project Name : NAPS Step 2 Version : 0.

Technical Review Document

Document Name : Technical Review Document Module 0 Process 0

DATE AUTHOR VERSION DESCRIPTION NOTES

Document Name : Technical Review Document Module 0 Process 0

1 Web User Interface Specification

Document Name : Technical Review Document Module Process

Web User Interface Specification

NAPS Step2 compose with 10 sub-modules which are the following:

Basic Structure of User Interface