In the previous part of this project text based elements were addressed, including paragraphs, headings and spans. For this iteration I wanted to focus more on layout and structure of a page so I implemented sections, divs and made start on CSS. I prioritised implementing padding, margins and borders, as well as background and foreground colour to aide in debugging. Implementing CSS took the most time, partly because of my choice to use a third party library - more on this later.
Padding, Margins and Borders
Padding, borders and margins are essential to any web page. Providing space around elements for readability and clarity, as well as separating one piece of content from another.
Implementing the above wasn’t too difficult thanks to swings Border Layout. The border layout allows a developer to configure a fixed amount of space for the “borders” around a flexible centre area. The width or height of the borders remain flexible, so they scale with the dimensions of the centre component. How each border behaves depends on the position in the layout. For example the northern border will have a fixed height, and width will stretch, whereas the eastern border will have a fixed width and height will stretch. This is exactly the kind of functionality we want when implementing padding and margins.
Every view with in the browser will have a reference to a margins and padding component, initially the values for each dimension of padding/margin will be set to zero. The components are configured so that the content of the margin component will be set to the padding component and the content of the padding component will be set to the content of the element. This creates a sort of nested border layout arrangement. Which looks like the following.
I’ve enabled debug colours in the first image (second is normal) - margins are represented by magenta and padding green - for the above screenshot, as typically margins wouldn’t be coloured and padding would inherit the background colour of the element it’s surrounding. Borders are also featured in the above screenshot, they utilise swings Border class and are applied to the component encapsulating the padding component for each element. Eventually all of the styles of border will be implemented, currently the following are supported: solid, dashed, dotted, inset and outset.
Implementing CSS
Originally I had planning on using a third party library to implement the parsing and DOM assignment aspects of CSS, but I chose to not go through with it. I didn’t like the libraries usage of generics to represent types of CSS properties, not to mention that some of the properties were manifesting in some strange unexpected ways. So I decided to write my own CSS parser and associated framework - which is in the spirit of this project anyway - using a dynamic polymorphic approach instead of generics. Extending the system to support more types of properties is much simpler this way thanks to reflection.
Id selectors were implemented in this iteration, mainly because they’re relatively simple to tackle and provide a quick means to test everything else CSS related - mainly parsing - is working correctly.
For the next part of the project I’m planning on covering more CSS and implementing forms.