The making of WebCoder 2009 – part 4
October 25, 2008
In a user comment to a previous episode, sijandi requested a screenshot of the new HTML outlining tree. First of all, it's not completely finished, but I have made some changes in this area, that I wish to tell you a little bit about. In WebCoder 2007, we had a Tool window for both the CSS and the PHP tree, and with the addition of a HTML tree, this would require yet another Tool window, and since I'm also hoping to add a JavaScript tree, things would start to get just a tad bit crowded. I therefore decided to look into combining these trees, and so far, I think the result has turned out pretty well.
As you can see from the image, the new "Document" Tool window consists of toolbar with a dropdown list of the possible outlining trees, a "Filter" textbox for quickly searching the active tree, and then the actual tree. The button on the top toolbar, next to the dropdown list, controls whether the Document Tool window should be context sensitive or not. When it is, WebCoder will automatically show the proper tree, depending on which kind of code you're editing. For instance, as soon as you go from HTML code to a <style> block, the HTML tree will be replaced with the CSS tree and so on. You can manually change between the trees from the dropdown list, of course. As I said, the combining of the outlining trees seems to be working out fairly well, and it will help make the interface less bloated.
Now back to the HTML tree. As you can see, it has a popup menu attached, which will give you access to some extra functionality. Navigate to will move the cursor to the start of the tag in the editor and focus it. Edit tag will activate the HTML Inspector, allowing you to quickly edit the tag with the mouse. Select tag and Select content will select either the entire tag, from start to end tag (if any), or just the stuff within the tag (child tags, text etc.). The Edit #content is pretty interesting as well. Once you click it, the CSS Inspector will be brought up, and you can edit the clicked selector, no matter where it's currently located (inline style block or external CSS file). If the tag has one or several classes attached to it, through the class attribute, you will of course get access to editing those from this menu as well.
I think that's all for now. Questions and comments are very welcome, as usual :)
Again a nice feature.
But.
After all these nice features, i hope you also gonna make the OOP area better.
And.
I think you could make this to one of the most popular programs for php devoloping, if you implement a php framework to work in the core of the program.
I mean… If you have a SDK, with a full integrated framework(cakephp, symfony, you name it…), then ASP.NET has gotten a very big rival.
i am pretty sure this is a very big task, so it’s only a proposal.
Jacob – it’s a plesure to read your blog! Looking forward to the next post!
yet another nice feature!
But.
I really hope you will do something with the OOP in the new webcoder.
And.
I think if you want to make webcoder to one of the most popular phpeditors, then you have to implement a php framework to the program. You need to build a hole php framework(Cakephp, symfony, you name it…) up in the core of the program.
I mean if you got a nice SDK with a framework, then you got a product that could be a rival to ASP.NET SDK!
– Jacob – I really like to read your blog. I looking forward to the next post!
Thank you for the screenshot, Kasper.
The combining of the outlining trees looks indeed very promising – great job!
I’m really thrilled about this whole thing :-)
Thank you, Sijandi :)
Morten, your suggestion should probably be targeted at phpCoder instead, which already comes with better OOP support. Now, I’m not going to pick a PHP framework and then concentrate on that – my editors are independent :). However, nothing prevents you from making phpCoder parse the directory where you keep your favorite PHP framework, to offer extended IntelliSense support :)
Well, then build an application called TSW PHP-Frameworks – That was just fun!
[…] you’ll have quick access to the same features as found in the HTML Outlining tree, described in post #4: You can navigate to the tag, select it, select the content of it, and then you have quick access […]