CODEWITHSUNDEEP
javascriptlayout-manager
Totty.js
Totty.js

Reputation: 15831

Where to find information about how Layout Managers work (Layout Managers internals)?

Put in an answer or link to some page with information about how Layout Managers work (Layout Managers internals)?

in general matter. For laying 2d (normal) components in a browser. I want to build a layout manager for an application framework in javascript

Upvotes: 2

Views: 291

Answers (1)

That Realty Programmer Guy
That Realty Programmer Guy

Reputation: 1599

Assuming I have a grasp of your question, the quintessential tasks a layout manager performs are namely:

  • Keep track of position information for each layout component. In a browser can go as far as meaning you can map the relationship of css positioning top, left, absolute, relative, etc.. including the affects of margins, padding, borders, etc..

  • This may be viewed as the same point, but keeping track of layers (usually z-index in your case) is also important.

  • Tracking shape information, usually height and width of a box
  • Track which components have 'active elements' such as scripts, animations, forms or embeds
  • Track which components must be attached to others with certain requirements and which are self-contained and widget-like
  • Often the capability of dynamically updating styling properties and even content within a given layout component
  • Providing functionality to reposition, align, resize and otherwise adjust tracked properties of one layout component based on the properties of one or more other layout components

If you are capable of handling this, you are on to a good start. Being able to take it a step further by designing layout formats that may be rearranged based on a template or schema can also be very useful.

Update: As far as which size takes precedence, I'm unsure what you are looking for. If you are already using JavaScript it can be good practice to keep width between min- and max- width dynamically along side the css to keep cross-browser. Reading the node structure and handling it is somewhat a matter of preference and very much a matter of design. In my own experience it is nice to abstract the child-most 'layer' of nodes, well particularly all the content holding nodes into one part of code and the parent-most nodes in another. These are not strictly the top and bottom nodes however as some content does have sub-nodes, <b> tags for instance. After that I fill in another abstraction for containers and finally account for all nodes using the relationship of these three layers.

If you arrange the 'main' elements using relative lengths such as em, ex, etc.. or percentages and follow up using absolute positioning on children either in a <div style="position: relative"> wrapper or using margins to add or subtract from the relative lengths,.. you are able to produce closely matching displays across different browsers and different end-user screen resolutions.

Also, take a look at basic HTML/CSS design best practices for reference and try to simply implement them and you'll be off to a good start.

Upvotes: 3

Related Questions