1 / 22

Comprehensive UI Specification Framework: Syntax, Structure, and Matching Solutions

This document outlines a comprehensive framework for UI specification, focusing on the syntax, structure, and critical components required to define user interfaces. It includes detailed examples of various web pages, such as login, registration, and product listing, with an emphasis on their unique identifiers, templates, and functionality. Additionally, it addresses potential issues in AI planning, offering matching solutions and a tree structure based on page specifications to enhance design consistency. This guide serves as a vital resource for developers and designers in creating coherent UI specifications.

porter
Télécharger la présentation

Comprehensive UI Specification Framework: Syntax, Structure, and Matching Solutions

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. UI specification of website FormalSpecGroup Phạm Le Sum

  2. Content Framework reviewing Syntax of UI specification Example A matching solution Some issues.

  3. Framework reviewing

  4. Content Framework reviewing Syntax of UI specification Example A matching solution Some issues.

  5. Syntax: Specification structure <pagename> id = … <spec> ... <body> …

  6. Syntax: Parts of specification • Page’s features specification • Keyword: “spec” • Function: define the characteristics of the UI. • It is converted to appropriate input form of “Planing System”

  7. Syntax: Parts of specification (cont) • Page’s body definition • Keyword: “body” • Function: define the detail item of the UI. • It is converted to UI template.

  8. 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.

  9. 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”

  10. 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…) &, |

  11. Content Framework reviewing Syntax of UI specification Example A matching solution Some issues.

  12. Example: Specification of the website Master page: id = master#1 Spec: name = master pagetype = pagelink = home|products|contact|register|login Body:… Home page: id = home#1 Spec:type = pagename = homeTemplate = master#1function = ouputoutputdata = text#introduction Body:… Main page

  13. Example: Specification of the website login page: id = login#1 Spec:type = pagetemplate = master#1name = loginfunction = inputinputdata = username&passwordlink = loginsuccess| loginfail Body: Login page

  14. Example: Specification of the website Register page: id = registeruser#1 Spec:type = pagetemplate = master#1name = registeruserfunction = inputinputdata = username & password & repassword & emaillink = registersuccess|registerfail Body:… Register user page

  15. Example: Specification of the website List products page: id = products #1 Spec:type = pagetemplate = master#1name = productsfunction = output outputdata = list<product>link = product Body: Products page

  16. Example: Specification of the website product detail: id = detail #1 Spec:type = pagetemplate = master#1name = productfunction = outputoutputdata = product detail Body: Products page

  17. Content Framework reviewing Syntax of UI specification Example A matching solution Some issues.

  18. 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

  19. 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

  20. Content Framework reviewing Syntax of UI specification Example A matching solution Some issues.

  21. Some issues This specification is not appropriate with AI Plainingthe require pre/post conditions Find a way to calculate the similarity of this UI specification

  22. Thank you for watching

More Related