CSSStylingWithTemplating

Revision as of 13:12, 27 March 2013 by Jstola (Talk | contribs)
(diff) ← Older revision | Current revision (diff) | Newer revision → (diff)

This document describes the current implementation of CSS Styling in projects that are using templating frameworks (TF). Its focus is to describe when DOM Tree view resp. merged Navigator view is used and when CSS Styles view shows 'Run file' button and when it shows the style information of the selected element.

We distinguish three basic cases: no TF, client side TF (for example, AngularJS) and server side TF (for example, PHP or JSP).

Contents

No Templating Framework

Support for projects that are not using templating framework is implemented in NetBeans 7.3 already and remains the same in the latest development builds:

  • DOM Tree is not shown
  • Navigator is used to navigate among elements
  • If the focused file is inspected in the browser then
    • Navigator shows the merged view
    • CSS Styles shows the style information for the selected element
  • If the focused file is not inspected in the browser then
    • Navigator shows the source view
    • CSS Styles shows the 'Run file' button

The case of no TF is a special case of the client-side TF, i.e., no TF is a client-side TF with no fragments/templates.

Client-side Templating Framework

If the "main" inspected file is focused in the editor then

  • DOM Tree is not shown
  • Navigator shows the merged view
  • CSS Styles shows the style information for the selected element

If a fragment/template (used by the main file) is focused in the editor then

  • DOM Tree is shown (and hides/covers Navigator that shows just source view)
  • CSS Styles shows the style information for the selected element

Notes: the fragments/templates are recognized by monitoring what resources the inspected page requested. Originally we considered a merged view for this situation but this doesn't seem to be feasible. In general, it is not possible to recognize the template in the DOM and even with some knowledge of the TF in use there are serious problems (like what to do when the template appears several times etc.) Anyway, we should use DOM Tree until we have anything better.

If another file is focused in the editor then

  • DOM Tree is not shown
  • CSS Styles shows the 'Run file' button

Server-side Templating Framework

Inspected URL maps to PHP or JSP file

If PHP or JSP file from the inspected project is focused in the editor then

  • DOM Tree is shown
  • CSS Styles shows the style information for the selected element

Note: The dependencies among PHP or JSP files are hard/impossible to track. That's why we resign on determination of such dependencies and the rule above corresponds to the situation where each PHP/JSP file in the inspected project depends on each other.

If another file is focused in the editor then

  • DOM Tree is not shown
  • CSS Styles shows the 'Run file' button

Inspected URL maps to HTML file

The logic described in client-side TF section is used.

Mapping of inspected URL to source file failed

  • DOM Tree is shown
  • CSS Styles shows the style information for the selected element
Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo