ui specification of website
DESCRIPTION
UI specification of website. FormalSpecGroup Phạm Le Sum. Content. Framework reviewing Syntax of UI specification Example A matching solution Some issues. Framework reviewing. Content. Framework reviewing Syntax of UI specification Example A matching solution Some issues. - PowerPoint PPT PresentationTRANSCRIPT
UI specification of website
FormalSpecGroupPhạm Le Sum
Content Framework reviewing Syntax of UI specification Example A matching solution Some issues.
Framework reviewing
Content Framework reviewing Syntax of UI specification Example A matching solution Some issues.
Syntax: Specification structure
<pagename>id = …<spec>...
<body>…
Syntax: Parts of specification
Page’s features specificationKeyword: “spec”Function: define the characteristics of the UI.It is converted to appropriate input form of
“Planing System”
Syntax: Parts of specification (cont)
Page’s body definitionKeyword: “body”Function: define the detail item of the UI.It is converted to UI template.
Syntax: Keywords
spec: specific the “spec” part of specification name: The name of page id: Unique identifier of a page. Id contents two
parts: <idname>#<idnumber>Example: login#1, login#2. There’re two login pages that have some differences.
template: the applied page template.
Syntax: Keywords (cont)
type: the type of page. page dialog
function: main function of the page input : page to get data from user output : page the show data to user mix : page with both “input” and “output”
Syntax: Keywords (cont) inputdata: the list of data to get from user. It’s
used in case the value of “function” is “input”/”mix”.
outputdata: the list of data to show to user. It’s used in case the value of “function” is “output”/”mix”.
link: the links to other pages (button/hyperlink/menu…)
&, |
Content Framework reviewing Syntax of UI specification Example A matching solution Some issues.
Example: Specification of the website
Main page Master page:id = master#1Spec:name = master pagetype = pagelink = home|products|contact|register|loginBody:…
Home page:id = home#1Spec:type = pagename = homeTemplate = master#1function = ouputoutputdata = text#introductionBody:…
Example: Specification of the website
Login page
login page:id = login#1Spec:type = pagetemplate = master#1name = loginfunction = inputinputdata = username&passwordlink = loginsuccess| loginfailBody:
Example: Specification of the website
Register user page
Register page:id = registeruser#1Spec:type = pagetemplate = master#1name = registeruserfunction = inputinputdata = username & password & repassword & emaillink = registersuccess|registerfailBody:…
Example: Specification of the website
Products page
List products page:id = products #1Spec:type = pagetemplate = master#1name = productsfunction = outputoutputdata = list<product>link = productBody:
Example: Specification of the website
Products page
product detail:id = detail #1Spec:type = pagetemplate = master#1name = productfunction = outputoutputdata = product detailBody:
Content Framework reviewing Syntax of UI specification Example A matching solution Some issues.
Matching solution With the “link” attribute, We can build a
“tree” from page specification. System base on the specification and this tree
to find a good result Base on specification (spec) to find the consistent
page. Base on the “tree” to suggest the more detail
design
Matching solution (cont) Example:
User define the specification of home page Base on the specification, system finds out an item
in library that match with it Base on the “link” of this page, system will
suggest a structure of pages as below
Content Framework reviewing Syntax of UI specification Example A matching solution Some issues.
Some issues This specification is not appropriate with AI
Plaining the require pre/post conditions Find a way to calculate the similarity of this
UI specification
Thank youfor
watching