UISpecBook-Propsoal.md

UISpecBook Proposal - RFC

UISpecBook is a development tool to browse and preview your GUI component library written by QML. Unlike qmlscene, it is embedded in your source tree. So it is able to support image provider and mock components.

RFC

1. The design?
2. The naming of project and components?

Features

• Organise and show your component library in a different kind of layout.
  1. Gallery Layout - Find all the components and show them in a grid
  2. Storyboard Layout - Show different workflow of your application (e.g User Registration, delete an item, ...)
  3. BDD Layout - Similar to Storyboard Layout, but it is able to validate user story.
• Interactive Preview
  1. Show component and able to take mouse and keyboard input
  2. Show all the available states of a component and change to preview the transition effect.
  3. Capture screenshot
  4. Auto-reload
• Testing
  1. Snapshot Testing + BDD
• Live Editor

Installation

In your source code, create a uispec folder

/uispec

/uispec/main.cpp

TBD

/uispec/uispecbook.qml

import UISpecBook 1.0

SpecBook {
  name: ""
  
  Gallery {
     files: Shell.find(Qt.resolvedUrl("../../app"), "*.qml")
  }
  
  Typography {
       files: Shell.find(Qt.resolvedUrl("../../app"), "*Text.qml")
  }
  
  Storyboard {
    name: ""
    
    Component {
       MyItem {
         state: "Initial"
       }      
    }


    Component {
       MyItem {
         state: "Pressed"
       }      
    }
  }

}

TBD

Reference

Gallery View (from SparkQML project)