GUI-TOOL

Create ExtJS prototype applications easier and faster.

[ Interactive prototype | Prepared Siesta tests | Screenshots (Full HD, UHD 4K) ]

Do you need a skeleton application or a prototype written in ExtJS? Just create it with easily understandable specification.

Supported ExtJS versions:

• 4.x (built in 4.2.1)
• 5.x (built in 5.1.0)

[ User manual | Specification schema]

Getting Started

Before you start it, please check the requirements below!

1. Install gui-tool with npm in console.

   $ npm install gui-tool -g

2. Create a new gui-tool project. If you use the name optional variable, the root directory will be also created with the given name. Otherwise you need to create a directory and run the command inside. The tool will download the ExtJS framework (4.2.1 gpl or 5.1.0 gpl) into the <project_name>/webui directory.

   $ gui-tool init [name]

   With -x or --extjsversion option you can decide which ExtJS version should be downloaded and used, default is 5.1.0: $ gui-tool init -x 4 in this case gui-tool will use 4.2.1 version of ExtJS. If you would like to use own ExtJS SDK or Siesta version, you can give the folder path of them with optional flags: --siesta <siesta_path> --extjs <extjs_path>

3. If everything is created successfully, you need to see the following hierarchy.

    <project_name>
    |- specification
       |- gui.yml # example specification file
    |- test
       |- siesta # downloaded and extracted Siesta
    |- webui
       |- app
       |- ... # generated Sencha project for ExtJS application

4. Now you can generate your first ExtJS application generated by gui-tool. Run the following command in project folder:

   $ gui-tool generate -f

   The -f or --force flag is used for overwriting the existed files in webui/app

   If you didn't get any error after generation, you can check the hierarchy looks like the command written in the console. For example the <project_name>/test directory should contain new files:

    test
    |- gui # new folder
    |- siesta
    |- index.html # new file

5. Finally you can open the generated ExtJS application just run the following command:

   $ gui-tool run -w

   The -w or --watch option is just a help for you. In this case you will see in the console watching... and when you change the example gui.yml specification file the application will be regenerated and refreshed in the opened browser automatically.

   If you wouldn't like to open the application in browser in one step, you can use -q or --quiet option.

   Not only the development version of the application can be started, but the builded version too. With -p or --prod flags the tool will start the production server as well. In this case the development and the production version of the application will be opened in two different tabs.

6. Every application should be tested, therefore gui-tool prepares the environment to test the newly generated ExtJS application with Siesta. The skeleton for the ExtJS components' test is generated with the generate command also, we just need to open the test page to check them:

   $ gui-tool test run

   With option -r or --run, the tests can be run in console mode and afterthat a report file will be generated with test results. Bryntum Siesta Standard required!

   If we need some screenshots about the prototype application, how is it look like in browsers, then we can create screenshots in Chrome, Firefox, Internet Explorer:

   $ gui-tool test screen

   The screenshots will be created in 1024x768, 1366x768, 1920x1080 (Full HD), 2880x1800 (MacBook Retina), 3840x2160 (UHD 4K), and placed in <project_name>/screenshots folder

Requirements

• unix based commandline tool, e.g. on Windows a Git Bash
• node.js with npm (> v0.10.28)
• Sencha Cmd (> v5.1.0.26)

License

MIT