User Interface Design Slides

  • Upload
    yesswap

  • View
    222

  • Download
    0

Embed Size (px)

Citation preview

  • 7/31/2019 User Interface Design Slides

    1/55

  • 7/31/2019 User Interface Design Slides

    2/55

  • 7/31/2019 User Interface Design Slides

    3/55

  • 7/31/2019 User Interface Design Slides

    4/55

  • 7/31/2019 User Interface Design Slides

    5/55

  • 7/31/2019 User Interface Design Slides

    6/55

  • 7/31/2019 User Interface Design Slides

    7/55

  • 7/31/2019 User Interface Design Slides

    8/55

  • 7/31/2019 User Interface Design Slides

    9/55

  • 7/31/2019 User Interface Design Slides

    10/55

  • 7/31/2019 User Interface Design Slides

    11/55

  • 7/31/2019 User Interface Design Slides

    12/55

  • 7/31/2019 User Interface Design Slides

    13/55

  • 7/31/2019 User Interface Design Slides

    14/55

    Device Independent

    Network Independent

  • 7/31/2019 User Interface Design Slides

    15/55

  • 7/31/2019 User Interface Design Slides

    16/55

  • 7/31/2019 User Interface Design Slides

    17/55

  • 7/31/2019 User Interface Design Slides

    18/55

  • 7/31/2019 User Interface Design Slides

    19/55

  • 7/31/2019 User Interface Design Slides

    20/55

  • 7/31/2019 User Interface Design Slides

    21/55

  • 7/31/2019 User Interface Design Slides

    22/55

  • 7/31/2019 User Interface Design Slides

    23/55

    *****

  • 7/31/2019 User Interface Design Slides

    24/55

    UML DIAGRAMS IN DETAIL

  • 7/31/2019 User Interface Design Slides

    25/55

  • 7/31/2019 User Interface Design Slides

    26/55

    Detailed Description of Components

  • 7/31/2019 User Interface Design Slides

    27/55

    Identification ActiveX Control

    Type Library

    Purpose Gather the information of mouse position, capture the picture, draw a line

    FunctionIt will return the position of the each point in a line, so that we can

    calculate new coordinate.

    Subordinates N/A

    Dependencies

    ActiveX Control is very important component of our project. Without this,we can't really do much in our project. Timing must be correct, up-to-

    second in this project. This will interact with mouse, and button down/up

    events.

    InterfacesIt will produce lines on the picture, and return coordinates of points in the

    line.

    Resources N/A

    Processing N/A

    Data Pictures, GPS coordinates.

  • 7/31/2019 User Interface Design Slides

    28/55

    Identification IC Image ControlType License, and Library

    Purpose Provide the 'right' to capture, edit image.

    Function N/A

    Subordinates N/A

    DependenciesIt needs to feed the image from the camera. We will use this image in our

    VB6 GUI.

    Interfaces User will be able to capture the image from the camera.

    ResourcesWe are going to use embedded GPS device, and the camera that sponsor

    provided use with.

    Processing N/A

    Data IC Image Control license, Camera, Images.

  • 7/31/2019 User Interface Design Slides

    29/55

    Identification Camera

    Type Equipment

    PurposeTo feed the image in front of the vehicle, capture image, calculate the

    distance.

    Function N/A

    Subordinates N/A

    Dependencies

    Need power to turn on. It need to be installed at the top front of the

    vehicle. Need to install V-Stream software application to find camera

    device.

    Interfaces N/A

    Resources USB port

    Processing N/A

    Data N/A

  • 7/31/2019 User Interface Design Slides

    30/55

    Identification Customer/Party

    Type JSP web pagePurpose To save customer information of those that have shown interest in a trip,

    scheduled a trip, or go on on a trip.

    Function Add, edit, and delete customer information. Group customers into parties.

    Subordinates Data stored in the customer and party tables in the database

    Dependencies Every customer must belong to a party. Singleton parties are acceptableand will be the default.

    Interfaces web browser

    Resources Database on server

    Processing Connect to the database and retrieve, edit or remove entries.

    Data All Data will be stored in a table in the database. The database will be

    initially empty. Data will be added and viewed through the web-based

    application.

  • 7/31/2019 User Interface Design Slides

    31/55

    Identification Equipment

    Type JSP web page

    Purpose To define equipment (like boats) required for trips.

    Function Add, edit, delete trip equipment.

    Subordinates Data in the equipment tables.

    Dependencies none

    Interfaces web browser

    Resources Database on server

    Processing Connect to the database and retrieve, edit or remove entries.

    Data All Data will be stored in a table in the database. The database will beinitially empty. Data will be added and viewed through the web-based

    application.

  • 7/31/2019 User Interface Design Slides

    32/55

    Algorithm[ runGPSCoordinateCorrector ]

    Input: mapData;

    Output: correctedLongitude, correctedLatitude (both continuously updated);

    Initialize the vector/raster map data using the appropriate ActiveX controls.

    Layout map data over GPS coordinate grid (using an ActiveX control).

    Prompt user to confirm whether a sufficient number of GPS satellites havebeen located.

    Estimate the Region of Total Certainty (RTC) from the GPS error history.

    Make an educated guess of the vehicle's current location on the map.

    Loop forever

    Pseudo code for components

    -Call getCorrectedGPSCoordinate to determine the new GPS coordinate data.

    -Output the latest corrected longitude and latitude.

    -Sleep for one second.

  • 7/31/2019 User Interface Design Slides

    33/55

    Algorithm[ getCorrectedGPSCoordinate ]

    Input: (none);

    Output: correctedLongitude, correctedLatitude, methodOfCorrection;

    Read longitude, latitude, and heading from the GPS module (or from the

    simulation-test file).

    Read compassHeading from compass module.

    Read speed from the speedometer. If GPS is working properly, then call locateNearestRoad( ).

    Else, assume speed, heading, and the previous coordinate are correct; then,

    approximate the new coordinate using path integration.

    Return the corrected GPS coordinate, as well as the method used to correct

    the coordinate.

  • 7/31/2019 User Interface Design Slides

    34/55

  • 7/31/2019 User Interface Design Slides

    35/55

  • 7/31/2019 User Interface Design Slides

    36/55

    Phase 1: Verify that the webpage contains correct contentPhase 2: Verify that user has to log in to access pages which modify the database

    Phase 3: Verify that the user can easily maintain the information stored in the

    database

    Phase 4: Verify that 4-8 user can connect to the website at the same time

    Phase 5: Verify that the website can be accessed at any time

    Phase 6: Verify that access to database is available from the web server

    Phase 7: Verify that the website is compatible with listed browsers

    Testing process:

    Verification and Validation Plan

    Component Test Plans and Procedures

    Component Test Strategy Overview

    R i t t bilit

  • 7/31/2019 User Interface Design Slides

    37/55

    Requirements traceability:

    All webpages must meet the following requirements:

    Must contain appropriate content (SRS sections 3.2.1 through 3.2.6)

    Only people with the access key will be able to edit the database (SRS section 3.4)

    The Program should be easily maintainable (SRS section 3.4)

    4-8 can connect to the site at the same time (SRS section 3.3)

    Access to the website can be at anytime (SRS section 3.4)

    Access to database must be available from the web server (SRS section 2.5)

    Must be compatible with listed browsers (SRS section 2.5)

    Items or components tested:

    "Trip" page "Billing" page

    "Schedule" page

    "Employee/Guide" page

    "Customer/Party" page

    "Equipment" page

    "Login" page

  • 7/31/2019 User Interface Design Slides

    38/55

    Input All web pages in website

    Output

    The following list shows several browsers

    with which the website must be compatible:

    oMozilla 1.3.1 and up

    o

    Netscape Navigator 6.0 and upoInternet Explorer 5.0 and up

    EnvironmentThe test will take place on the Internet

    through each listed web browser

    Special proceduresEach webpage will be viewed by each web-

    browser in the above list.

    Precedence and dependenciesInternet connection and listed browsers

    available

    References N/A

    Test case for all components: Browser compatibility

    Accessibility

  • 7/31/2019 User Interface Design Slides

    39/55

    Input All web pages in the website

    Output

    Website is accessible at one time in the morning,

    one time in the afternoon, and one time in the

    evening

    EnvironmentThe compliance test will take place on the Internet

    through a web browser

    Special procedures N/A

    Precedence and dependencies N/A

    References N/A

    Accessibility

    Input All webpage on the website

    OutputAll web pages that use a database connection will

    be successful

    Environment The test will take place on the Internet through aweb browser

    Special procedures

    Each webpage will be viewed in a web-browser

    and its properties will be compared against the

    above checklist.

    Precedence and dependencies Web server is running and accessible.

    References N/A

    Database Availability

  • 7/31/2019 User Interface Design Slides

    40/55

  • 7/31/2019 User Interface Design Slides

    41/55

  • 7/31/2019 User Interface Design Slides

    42/55

  • 7/31/2019 User Interface Design Slides

    43/55

    Class Name Transition

  • 7/31/2019 User Interface Design Slides

    44/55

    Inherited class None

    Aggregated Classes None

    Associated Classes None

    Data Members int ID // unique id for the transition

    int fromStateId // the transition comes from state.getID()int toStateId // the transition goes to state.getID()

    COLORREF color

    CArray type // list of unique types (inputs) related to this transition

    CString label // name of the transition

    CString comment // comment about the transition

    Member Functions void setID(int id) // sets the ID attribute

    int getID() // returns the ID attributevoid setFromStateID(int id) // sets the fromStateId attribute

    int getFromStateID() // returns the fromStateId attribute

    void setToStateID(int id) // sets the toStateId attribute

    int getToStateID() // returns the toStateId attribute

    void setLabel(CString label) // sets the label attribute

    CString getLabel() // returns the label attribute

    void setColor(COLORREF color) // sets the color attribute

    void setComment(CString comment) // sets the comment attribute

    CString getComment() // returns the comment attribute

    void setTypes(CArray &) // sets the types of transition on the type array

    CArray getTypes() // returns the type attribute

    Data Structures int, CArray, COLORREF, CString

    Processing This class is the implementation of the transition object. It holds the basic

    attributes of the transitions. Every transition is created and modified using thisclass.

  • 7/31/2019 User Interface Design Slides

    45/55

    Class Name File

    Inherited class None

    Aggregated Classes None

    Associated Classes None

    Data Members None

    Member Functions void open() // open a file

    int parseAndLoad(CString content) // returns 1 if successful

    int save() // returns 1 if successful

    Data Structures

    NoneProcessing This class encapsulates the file associated with the canvas.

    Function int open()

  • 7/31/2019 User Interface Design Slides

    46/55

    Description Display the open GUI and create a buffer containing the opened file

    *see xml file format template in chapter 2...

    Class File

    Return type Int

    Input parameters None

    Files used None

    Caller The user clicks on file>open...

    Pseudo code // display GUI

    CString exten = State Transition Diagram (*.xml)|*.xml;

    CFileDialog Dlg(TRUE,exten);

    // when user selects the file do...

    if ( Dlg.DoModal() == IDOK)

    {// read file

    CString fileName = Dlg.GetPathName();

    CFile File(filename, CFile::ModeRead);

    File.SeekToBegin;

    int size = File.GetLength();

    char *buffer = new char[size];

    File.read((char*) &buffer, sizeof(char)*size);

    // put content of file in a CString for easier comparison

    CString content;

    for (int i = 0; i

    // if it is call parseAndLoad with content and then return 1

    // if not return 0

    }

  • 7/31/2019 User Interface Design Slides

    47/55

    Function int updateUser()

    Description update login.rsa and return 1 if it worked

    Class User

    Return type Int

    Input parameters type (user type), old password, new password

    Files used login.rsa

    Caller user presses on the change password button in the change password GUI

    Pseudo coderead user type

    read old password entered

    read new password enteredread second new password entered

    open, read in a buffer and decrypt login.rsa

    find user type in the buffer

    if old password corresponds to the user type and the 2 new passwords are the same:

    {

    update password for specified user

    encrypt the buffer

    save to file login.rsa

    return 1

    }

    else

    {

    give hint to user on what error s/he made

    return 0

    }

    Module Type Type (s) of module to which the test applies

  • 7/31/2019 User Interface Design Slides

    48/55

    Module Type Type (s) of module to which the test applies

    Purpose/Function Purpose of the test

    Test Procedure Actions taken by the performer of the test

    Expected Result Expected outcome of test procedure

    Module Type Code files, including HTML, Java Servlets, and JSPPurpose/Function

    To ensure the correctness of the code

    Test Procedure Inspect code and/or use validation tools to check correctness of codeExpected Result Valid codes

    Code Verification

    Module Type Links

    Purpose/Function To ensure links are correct

    Test Procedure Click each link to navigate through the system

    Expected Result Each link connects to the intended location

    Link Integrity

    System Connectivities

  • 7/31/2019 User Interface Design Slides

    49/55

    Module Type Connection with web and database serverPurpose/Function To ensure connection is set up with applicationTest Procedure

    Input values in the field and check whether the input is correctlysubmitted to database

    Retrieve customer, trip, and employee information from database, and

    check whether they are correctly receivedExpected Result Request and Retrieve action to database work properly

    System Connectivities

    Module Type Functionality of each pagePurpose/Function To ensure each page works properly as intendedTest Procedure Create bogus info and submit to database

    Retrieve information from database

    Schedule trips with given customer and trip informationExpected Result Each link connects to the intended location

    Function Verification

  • 7/31/2019 User Interface Design Slides

    50/55

    Test description Verify the jsp pages look the same in the following browsers:

    Mozilla 1.3.1 and up

    Netscape Navigator 6.0 and up Internet Explorer 5.0 and up

    Expected result All pages will appear and behave the same in all browsers.

    Actual result The pages performed as expected. We suspect with later versions and

    development of the layout, this goal may become harder to achieve.

    Test description Verify The database is available at any time so that system's database

    requests are answered.Expected result The database will always be available.

    Actual result Our development server has occasion outages because it uses one of

    our team member's home Internet connection that resets sporadically.

    When these resets occur, the connection cannot be restored without

    authentication.

    Browser Compatibility

    Database Availability

  • 7/31/2019 User Interface Design Slides

    51/55

  • 7/31/2019 User Interface Design Slides

    52/55

  • 7/31/2019 User Interface Design Slides

    53/55

  • 7/31/2019 User Interface Design Slides

    54/55

  • 7/31/2019 User Interface Design Slides

    55/55