Menu
▾
▴
User Guide
1. Startup
The WebExKit directory contains 2 command files, run.cmd and runvenv.cmd. As if you couldn't guess you use run.cmd if you didn't create a virtual environment and runvenv.cmd if you did. In File Explorer, just double-click on the appropriate command file to start the web server running. In your browser type 127.0.0.1:5000 in the URL and the HTML/CSS/JS playground is ready for use.
2. Basic Editing
When the experimentation kit starts it shows a properly formed HTML that produces nothing but it does have the placehoders for you to begin experimenting.
To make something appear simply put some HTML between the <body> </body> tags then press the "Show" button. Try entering <h1>FirstTry</h1> and pressing the button. You can press the "Show" button at any time to see how your creation is progressing.
All that's left to do is put some CSS between the <style> </style> tags and some JavaScript between the <script> </script> tags.
Here's a bit of nonsense that changes the colour of the heading whenever you click on anything on the page (except the heading).
3. Saving and Loading Files
If you want to save your experimenting for future reference you can enter a file name in the box above the editor and press the "Save" button. If you are working on a file you previously loaded the existing file will be overwritten if you don't change the name. If you enter the name of an existing file you will be asked if you want to overwrite it. Files are saved into the "instance" directory under WebExKit.
To load a file that was saved previously click the "Open" button and a file chooser box appears. The default sort order for the files shown is by date, most recent modifications first. You can change the sort order by clicking on the Name or Date heading. Click on a file name to highlight it then click "Load".
WebExKit ships with 2 files in the instance directory - a.html is the piece of nonsense referred to in the previous section and new.html is described next.
4. new.html
The file new.html is the default starting point for new work. When you first install the WebExKit it contains the code shown in the first figure above but you can change it to suit your own purposes. You would want to remove the jQuery code I've put in there, for instance, if you want to experiment with pure JavaScript.
The "New" button is simply a shortcut for opening the file chooser and loading new.html. When new.html is loaded the file name box shows "New File" rather than "new.html" to prevent you (me!) from accidentally overwriting new.html by forgetting to change the file name before clicking "Save".
5. Further reading
That's all there is to it but if you want to you can read my test script that exercises every bit of the app's functionality. It's only a short document but it shows everything that should happen and you can find it in the 'Code' tab under /tests. It's called ManualTestScript.md.
