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)
gui-tool wikiDetailed documentation in
[ User manual | Specification schema]
Before you start it, please check the requirements below!
Install gui-tool with npm in console.
$ npm install gui-tool -g
Create a new gui-tool project. If you use the
nameoptional 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
$ gui-tool init [name]
--extjsversionoption you can decide which ExtJS version should be downloaded and used, default is 5.1.0:
$ gui-tool init -x 4in 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>
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
Now you can generate your first ExtJS application generated by gui-tool. Run the following command in project folder:
$ gui-tool generate -f
--forceflag is used for overwriting the existed files in
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>/testdirectory should contain new files:
test |- gui # new folder |- siesta |- index.html # new file
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.ymlspecification 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
Not only the development version of the application can be started, but the builded version too. With
--prodflags 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.
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
generatecommand also, we just need to open the test page to check them:
$ gui-tool test run
--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
- unix based commandline tool, e.g. on Windows a Git Bash
- node.js with npm (> v0.10.28)
- Sencha Cmd (> v18.104.22.168)