Hi,
Thank you for your invitation. It looks like an interesting project with simpler XSL and additional challenging CSS.
As I understand, you would like to use XSL transformations to transform a directory of model XML files into a directory of model HTML files. Together, the HTML files will display a frameset with a left pane and a right pane. The models form a tree that should be displayed in a left frame. Values from one model will be displayed in the right frame at a time.
In the left frame, the tree should be displayed as a collapsible treetable (outline + columns). Each parent node has a control to display or hide the child nodes in the outline. The nodes should be labeled with the tag of the corresponding model. Clicking a node tag should display the corresponding model page in the right frame. Additional columns should display the type and description.
The hierarchy will generally follow the [login to view URL] file, except that under a flowsheet node there will be two additional nodes: the streams folder and the units folder. The children of the flowsheet will be grouped so that streams are listed under the streams folder, and flowsheets and then units are listed under the units folder.
In the right frame, a model page should contain a table with tabs on top. The tabs will control which subset of values appear:
- integers,
- quantities, or
- strings.
Under the tabs, each table should have columns for
- tag,
- value,
- units (in the quantities tab only), and
- description.
The model page should also have link buttons to navigate to
- the parent model,
- previous sibling model, and
- next sibling model.
Clicking a link button should display the corresponding model page in the right frame.
The result HTML pages should
- use XHTML 1.0 Strict (validate on [login to view URL])
- be compatible with Chrome/Chromium 27 (Webkit), IE9, and Firefox/Iceweasel 10.
- use CSS files for style
- use no Javascript, only CSS and XHTML.
As I understand, pages should validate XHTML 1.0 Strict with the exceptions needed for XHTML 1.0 Frameset.
As I understand, implementing the treetable and tabbed-pane without JavaScript requires using clever CSS techniques.
TOC-frame tree-table CSS challenges:
- The CSS tree technique you referenced implements an outline without tree lines.
I propose to implement the tree lines as in your images.
- The CSS tree technique you referenced only implements an outline tree. In a treetable, a node is connected to a row, and all columns of a node row appear and disappear together with the node as the parent node is expanded or collapsed.
I propose to implement the treetable columns as in your images.
Detail-frame tabbed-pane CSS challenges:
3. The CSS tabs technique you suggested selects the tab that is the target the latest clicked hyperlink. Selecting a tab requires that the tab id appear in the URL fragment identifier. When the pane is first displayed, no tab will be selected. Clicking a tab may scroll the content at the id to the top of the view.
I propose to use an alternate CSS tree tab implementation, closer to the tree technique, that does not require a URL fragment identifier and permits a tab to be initially selected when the page loads.
4. Showing the correct tab body with CSS techniques relies on absolute positioning, so the tab-body container cannot resize to fit the detail tables, which vary in size. Therefore, it is difficult to position content directly below the unbounded height absolutely-positioned tables in the tab pane, using only CSS.
As I understand, nothing will appear below the tabbed-pane detail table in the right hand frame, so this limitation is acceptable.
I propose to provide a command-line Python script to demonstrate the XSL transformations on a directory of xml files, such as your sample.
Is this revised proposal satisfactory? If not, please let me know what changes or additions you need. Please ask if you have questions.
Regards,
Grammal