How To: Drag-and-Drop Formatting

April 26, 2016

Download: Sample Files

When using the AH Formatter GUI, you can drag a file or a combination of files onto the WYSIWYG window and have them formatted automatically.

This tutorial uses AH Formatter GUI plus Windows Explorer as shown in the following figure:

Applications used in tutorial.

 

Single files

The simplest and most straightforward way to do drag-and-drop formatting is by dragging single files onto AH Formatter GUI.

 

XML

 

Plain file

XML files without a xml-stylesheet processing instruction are formatted by applying the default CSS stylesheet.

sample.xml contains a single <text> element:

&lt;text&gt;こんにちは世界/hello world.&lt;/text&gt;
  1. Drag sample.xml onto AH Formatter GUI.
  2. AH Formatter formats the XML file using CSS, as you can see from the log window message:
    Result of dropping 'sample.xml' zoomed to fit page.
    Since no CSS stylesheet was provided, AH Formatter uses its default stylesheet.
  3. When you zoom in, you can see the text:
    Result from dropping 'sample.xml'.
    The default stylesheet doesn't cover <text> elements, however, so the text is presented unstyled.

 

XSLT producing FO

XML files with a xml-stylesheet processing instruction are formatted by applying the stylesheet referred to in the processing instruction.

fo.xml similarly contains a single <text> element, but it also has a xml-stylesheet processing instruction referring to fo.xsl:

<?xml-stylesheet href="fo.xsl" ?>

<text>こんにちは世界/hello world.</text>

fo.xsl produces a minimal FO document that formats <text> and <p> elements as bold:

<xsl:stylesheet version="1.0"

    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

    xmlns:fo="http://www.w3.org/1999/XSL/Format">

<xsl:template match="/">
<fo:root xml:lang="ja">
<fo:layout-master-set>
<fo:simple-page-master master-name="PageMaster">
<fo:region-body/>
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="PageMaster">
<fo:flow flow-name="xsl-region-body">
<xsl:apply-templates/>
</fo:flow>
</fo:page-sequence>
</fo:root>
</xsl:template>

<xsl:template match="text | p">
<fo:block font-weight="bold">
<xsl:apply-templates/>
</fo:block>
</xsl:template>

</xsl:stylesheet>

  1. Drag fo.xml onto AH Formatter GUI.
  2. AH Formatter transforms the XML file using the XSLT file and formats the result:
    Result from dropping 'fo.xml'.

 

XSLT producing HTML

html.xml similarly contains a single <text> element, but it has a xml-stylesheet processing instruction referring to html.xsl:

<?xml-stylesheet href="html.xsl" ?>

<text>こんにちは世界/hello world.</text>

html.xsl produces a minimal HTML document that represents <text> and <p> elements as <p> with underlined text:

<xsl:stylesheet version="1.0"

    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

    xmlns:fo="http://www.w3.org/1999/XSL/Format">

<xsl:output method="html"/>

<xsl:template match="text | p">
<p style="text-decoration: underline">
<xsl:apply-templates/>
</p>
</xsl:template>

</xsl:stylesheet>

  1. Drag html.xml onto AH Formatter GUI.
  2. AH Formatter transforms the XML file using the XSLT file and formats the result:
    Result from dropping 'html.xml'.

 

CSS

background-color.xml similarly contains a singe <text> element, but it also has a xml-stylesheet processing instruction referring to background-color.css:

<?xml-stylesheet href="background-color.css" ?>

<text>こんにちは世界/hello world.</text>

background-color.css has a rule for <text> and <p> elements that sets the background-color property:

text, p {

    display: block;

    background-color: #f0fff0;

}
  1. Drag background-color.xml onto AH Formatter GUI.
  2. AH Formatter formats the XML file using the CSS stylesheet:
    Result from dropping 'background-color.xml'.

 

HTML

 

Plain file

HTML files without either a xml-stylesheet processing instruction or a <link> that refers to a stylesheet are formatted by applying the default CSS stylesheet.

sample.html contains a singe <p> element:

&lt;p&gt;こんにちは世界/hello world.&lt;/p&gt;
  1. Drag sample.html onto AH Formatter GUI.
  2. AH Formatter formats the HTML using its default stylesheet:
    Result from dropping 'sample.html'.
    The default CSS stylesheet does handle the <p> in sample.html, so its text is slightly lower compared with the formatted sample.xml because of the padding specified in the stylesheet.

 

XSLT producing FO

HTML files with a xml-stylesheet processing instruction are formatted by applying the stylesheet referred to in the processing instruction.

fo.html is similar to fo.xml but it contains a single <p> element instead of a <text> element:

<?xml-stylesheet href="fo.xsl" ?>

<p>こんにちは世界/hello world.</p>

fo.xsl is as you saw above.

  1. Drag fo.html onto AH Formatter GUI.
  2. AH Formatter formats the XML file using the CSS stylesheet:
    Result from dropping 'fo.html'.

 

XSLT producing HTML

html.html is a minimal HTML document that also has a xml-stylesheet processing instruction referring to html.xsl:

<?xml-stylesheet href="html.xsl" ?>

<html>

 <body>

   <p>こんにちは世界/hello world.</p>

 </body>

</html>

html.xsl is as you saw above.

  1. Drag html.html onto AH Formatter GUI.
  2. AH Formatter transforms the HTML file using the XSLT file and formats the result:
    Result from dropping 'html.html'.

 

xml-stylesheet to CSS

border.html is a minimal HTML document that also has a xml-stylesheet processing instruction referring to border.css:

<?xml-stylesheet href="border.css" ?>

<html>

 <body>

   <p>こんにちは世界/hello world.</p>

 </body>

</html>

border.css has a rule for <text> and <p> elements that sets the border property:

text, p {

    border: thin solid green;

}
  1. Drag border.html onto AH Formatter GUI.
  2. AH Formatter formats the HTML file using the CSS stylesheet:
    Result from dropping 'border.html'.

 

<link> to CSS

color.html is a minimal HTML document that has a <link> element referring to color.css:

<html>

 <head>

  <link rel="stylesheet" href="color.css"/>

 </head>

 <body>

   <p>こんにちは世界/hello world.</p>

 </body>

</html>

color.css has a rule for <text> and <p> elements that sets the color property:

text, p {

    color: green;

}
  1. Drag color.html onto AH Formatter GUI.
  2. AH Formatter formats the HTML file using the CSS stylesheet referred to in the <link> element:
    Result from dropping 'color.html'.

 

FO

FO files are formatted directly:

  1. Drag sample.fo onto AH Formatter GUI.
  2. AH Formatter recognizes it as a FO file and formats it directly:
    Result from dropping 'sample.fo'.

 

Graphics

AH Formatter renders graphics in Sample Files

When using the AH Formatter GUI, you can drag a file or a combination of files onto the WYSIWYG window and have them formatted automatically.

This tutorial uses AH Formatter GUI plus Windows Explorer as shown in the following figure:

Applications used in tutorial.

 

Single files

The simplest and most straightforward way to do drag-and-drop formatting is by dragging single files onto AH Formatter GUI.

 

XML

 

Plain file

XML files without a xml-stylesheet processing instruction are formatted by applying the default CSS stylesheet.

sample.xml contains a single <text> element:

&lt;text&gt;こんにちは世界/hello world.&lt;/text&gt;
  1. Drag sample.xml onto AH Formatter GUI.
  2. AH Formatter formats the XML file using CSS, as you can see from the log window message:
    Result of dropping 'sample.xml' zoomed to fit page.
    Since no CSS stylesheet was provided, AH Formatter uses its default stylesheet.
  3. When you zoom in, you can see the text:
    Result from dropping 'sample.xml'.
    The default stylesheet doesn't cover <text> elements, however, so the text is presented unstyled.

 

XSLT producing FO

XML files with a xml-stylesheet processing instruction are formatted by applying the stylesheet referred to in the processing instruction.

fo.xml similarly contains a single <text> element, but it also has a xml-stylesheet processing instruction referring to fo.xsl:

<?xml-stylesheet href="fo.xsl" ?>

<text>こんにちは世界/hello world.</text>

fo.xsl produces a minimal FO document that formats <text> and <p> elements as bold:

<xsl:stylesheet version="1.0"

    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

    xmlns:fo="http://www.w3.org/1999/XSL/Format">

<xsl:template match="/">
<fo:root xml:lang="ja">
<fo:layout-master-set>
<fo:simple-page-master master-name="PageMaster">
<fo:region-body/>
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="PageMaster">
<fo:flow flow-name="xsl-region-body">
<xsl:apply-templates/>
</fo:flow>
</fo:page-sequence>
</fo:root>
</xsl:template>

<xsl:template match="text | p">
<fo:block font-weight="bold">
<xsl:apply-templates/>
</fo:block>
</xsl:template>

</xsl:stylesheet>

  1. Drag fo.xml onto AH Formatter GUI.
  2. AH Formatter transforms the XML file using the XSLT file and formats the result:
    Result from dropping 'fo.xml'.

 

XSLT producing HTML

html.xml similarly contains a single <text> element, but it has a xml-stylesheet processing instruction referring to html.xsl:

<?xml-stylesheet href="html.xsl" ?>

<text>こんにちは世界/hello world.</text>

html.xsl produces a minimal HTML document that represents <text> and <p> elements as <p> with underlined text:

<xsl:stylesheet version="1.0"

    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

    xmlns:fo="http://www.w3.org/1999/XSL/Format">

<xsl:output method="html"/>

<xsl:template match="text | p">
<p style="text-decoration: underline">
<xsl:apply-templates/>
</p>
</xsl:template>

</xsl:stylesheet>

  1. Drag html.xml onto AH Formatter GUI.
  2. AH Formatter transforms the XML file using the XSLT file and formats the result:
    Result from dropping 'html.xml'.

 

CSS

background-color.xml similarly contains a singe <text> element, but it also has a xml-stylesheet processing instruction referring to background-color.css:

<?xml-stylesheet href="background-color.css" ?>

<text>こんにちは世界/hello world.</text>

background-color.css has a rule for <text> and <p> elements that sets the background-color property:

text, p {

    display: block;

    background-color: #f0fff0;

}
  1. Drag background-color.xml onto AH Formatter GUI.
  2. AH Formatter formats the XML file using the CSS stylesheet:
    Result from dropping 'background-color.xml'.

 

HTML

 

Plain file

HTML files without either a xml-stylesheet processing instruction or a <link> that refers to a stylesheet are formatted by applying the default CSS stylesheet.

sample.html contains a singe <p> element:

&lt;p&gt;こんにちは世界/hello world.&lt;/p&gt;
  1. Drag sample.html onto AH Formatter GUI.
  2. AH Formatter formats the HTML using its default stylesheet:
    Result from dropping 'sample.html'.
    The default CSS stylesheet does handle the <p> in sample.html, so its text is slightly lower compared with the formatted sample.xml because of the padding specified in the stylesheet.

 

XSLT producing FO

HTML files with a xml-stylesheet processing instruction are formatted by applying the stylesheet referred to in the processing instruction.

fo.html is similar to fo.xml but it contains a single <p> element instead of a <text> element:

<?xml-stylesheet href="fo.xsl" ?>

<p>こんにちは世界/hello world.</p>

fo.xsl is as you saw above.

  1. Drag fo.html onto AH Formatter GUI.
  2. AH Formatter formats the XML file using the CSS stylesheet:
    Result from dropping 'fo.html'.

 

XSLT producing HTML

html.html is a minimal HTML document that also has a xml-stylesheet processing instruction referring to html.xsl:

<?xml-stylesheet href="html.xsl" ?>

<html>

 <body>

   <p>こんにちは世界/hello world.</p>

 </body>

</html>

html.xsl is as you saw above.

  1. Drag html.html onto AH Formatter GUI.
  2. AH Formatter transforms the HTML file using the XSLT file and formats the result:
    Result from dropping 'html.html'.

 

xml-stylesheet to CSS

border.html is a minimal HTML document that also has a xml-stylesheet processing instruction referring to border.css:

<?xml-stylesheet href="border.css" ?>

<html>

 <body>

   <p>こんにちは世界/hello world.</p>

 </body>

</html>

border.css has a rule for <text> and <p> elements that sets the border property:

text, p {

    border: thin solid green;

}
  1. Drag border.html onto AH Formatter GUI.
  2. AH Formatter formats the HTML file using the CSS stylesheet:
    Result from dropping 'border.html'.

 

<link> to CSS

color.html is a minimal HTML document that has a <link> element referring to color.css:

<html>

 <head>

  <link rel="stylesheet" href="color.css"/>

 </head>

 <body>

   <p>こんにちは世界/hello world.</p>

 </body>

</html>

color.css has a rule for <text> and <p> elements that sets the color property:

text, p {

    color: green;

}
  1. Drag color.html onto AH Formatter GUI.
  2. AH Formatter formats the HTML file using the CSS stylesheet referred to in the <link> element:
    Result from dropping 'color.html'.

 

FO

FO files are formatted directly:

  1. Drag sample.fo onto AH Formatter GUI.
  2. AH Formatter recognizes it as a FO file and formats it directly:
    Result from dropping 'sample.fo'.

 

Graphics

AH Formatter renders graphics in supported formats directly in the WYSIWYG window.

  1. Drag ahlogo.svg onto AH Formatter GUI.
  2. AH Formatter renders the SVG image:
    Result from dropping 'ahlogo.svg'.

 

Shortcut (.lnk) files

AH Formatter follows Windows shortcuts and opens the file to which the shortcut refers.

  1. Drag color.html - Shortcut onto AH Formatter GUI.
  2. AH Formatter formats color.html, since that is the file to which the shortcut refers:
    Result from dropping 'color.html'.

 

URL (.URL) files

AH Formatter resolves Windows URL files and opens the resource to which the URL refers.

  1. Open border.html in your web browser.
  2. Drag the URL address from the address bar of your web browser onto your desktop to create a new URL file that will work on your system.
  3. Drag the URL file onto AH Formatter GUI.
  4. AH Formatter resolves the URL and formats border.html, since that is the file to which the URL refers:
    Result from dropping 'border.html'.

 

URL text

AH Formatter resolves URLs that are dropped as text into the WYSIWYG window.

  1. Open color.html in your web browser.
  2. Drag the URL address from the address bar of the browser onto AH Formatter GUI.
  3. AH Formatter resolves the URL and formats color.html:
    Result from dropping 'color.html'.

 

Multiple files

 

XML and XSLT together

AH Formatter transforms the XML file using the XSLT file when both are dragged onto AH Formatter GUI.

 

XSLT producing FO

  1. Select both sample.xml and fo.xsl in Windows Explorer:
    Two files selected in Windows Explorer.
  2. Drag both onto AH Formatter GUI
  3. AH Formatter transforms the XML file using the XSLT file and formats the result:
    Result from dropping 'sample.xml' and 'fo.xsl'.
    The AH Formatter title bar shows the names of both files.

 

XSLT producing HTML

  1. Drag both sample.xml and html.xsl onto AH Formatter GUI.
  2. AH Formatter transforms the XML file using the XSLT file and formats the result:
    Result from dropping 'sample.xml' and 'html.xsl'.

 

XML and CSS together

AH Formatter formats the XML file using the CSS stylesheet when both are dragged onto AH Formatter GUI.

  1. Drag both sample.xml and border.css onto AH Formatter GUI.
  2. AH Formatter formats the XML file using the CSS stylesheet:
    Result from dropping 'sample.xml' and 'border.css'.

 

HTML and XSLT together

AH Formatter transforms the HTML file using the XSLT file when both are dragged onto AH Formatter GUI.

 

XSLT producing FO

  1. Drag both sample.html and fo.xsl onto AH Formatter GUI.
  2. AH Formatter transforms the XML file using the XSLT file and formats the result:
    Result from dropping 'sample.xml' and 'fo.xsl'.
    The AH Formatter title bar shows the names of both files.

 

XSLT producing HTML

  1. Drag both sample.html and html.xsl onto AH Formatter GUI.
  2. AH Formatter transforms the XML file using the XSLT file and formats the result:
    Result from dropping 'sample.html' and 'html.xsl'.

 

HTML and CSS together

AH Formatter formats the HTML file using the CSS stylesheet when both are dragged onto AH Formatter GUI.

  1. Drag both sample.html and border.css onto AH Formatter GUI
  2. AH Formatter formats the HTML file using the CSS stylesheet:
    Result from dropping 'sample.html' and 'border.css'.
  3. Drag both color.html and border.css onto AH Formatter GUI
  4. AH Formatter formats the HTML file using both the CSS stylesheet referred to from the HTML file and the CSS stylesheet dropped onto AH Formatter GUI:
    Result from dropping 'color.html' and 'border.css'.

 

Sequences of files

You can use AH Formatter GUI to apply different stylesheets to the one source file or use it to apply one stylesheet to multiple source files.

 

Source file then stylesheet

  1. Drag sample.xml onto AH Formatter GUI.
  2. As before, AH Formatter formats the XML using its default CSS stylesheet:
    Result from dropping 'sample.xml'.
  3. Drag fo.xsl onto AH Formatter GUI.
  4. AH Formatter transforms the XML file using the XSLT file and formats the result:
    Result from dropping 'sample.xml' and 'fo.xsl'.
  5. Drag color.css onto AH Formatter GUI.
  6. AH Formatter formats the XML file using the CSS stylesheet:
    Result from dropping 'sample.xml' and 'color.css'.
  7. Drag border.css onto AH Formatter GUI
  8. AH Formatter formats the XML file using the new CSS stylesheet:
    Result from dropping 'sample.xml' and 'border.css'.

The same can be done with a HTML file and different stylesheets.

 

Stylesheet then source file

  1. Restart AH Formatter GUI to avoid applying the next stylesheet to the same source file.
    AH Formatter GUI with splash screen.
  2. Drag border.css onto AH Formatter GUI.
  3. AH Formatter does not show any change.
  4. Drag sample.xml onto AH Formatter GUI.
  5. AH Formatter formats the XML file using the previously loaded CSS stylesheet:
    Result from dropping 'sample.xml' and 'border.css'.

Unlike a source file followed by successive stylesheets, when the first file is a stylesheet file, dragging another source file onto AH Formatter GUI does not apply the same stylesheet to the new source file.

 

Summary

The drag-and-drop feature of AH Formatter GUI makes it easy to quickly preview XML, HTML, and graphic files that you have on your computer or, even, that you can access with your web browser.

" class="external" rel="noopener" target="_blank">supported formats directly in the WYSIWYG window.

 

  1. Drag ahlogo.svg onto AH Formatter GUI.
  2. AH Formatter renders the SVG image:
    Result from dropping 'ahlogo.svg'.

 

Shortcut (.lnk) files

AH Formatter follows Windows shortcuts and opens the file to which the shortcut refers.

  1. Drag color.html - Shortcut onto AH Formatter GUI.
  2. AH Formatter formats color.html, since that is the file to which the shortcut refers:
    Result from dropping 'color.html'.

 

URL (.URL) files

AH Formatter resolves Windows URL files and opens the resource to which the URL refers.

  1. Open border.html in your web browser.
  2. Drag the URL address from the address bar of your web browser onto your desktop to create a new URL file that will work on your system.
  3. Drag the URL file onto AH Formatter GUI.
  4. AH Formatter resolves the URL and formats border.html, since that is the file to which the URL refers:
    Result from dropping 'border.html'.

 

URL text

AH Formatter resolves URLs that are dropped as text into the WYSIWYG window.

  1. Open color.html in your web browser.
  2. Drag the URL address from the address bar of the browser onto AH Formatter GUI.
  3. AH Formatter resolves the URL and formats color.html:
    Result from dropping 'color.html'.

 

Multiple files

 

XML and XSLT together

AH Formatter transforms the XML file using the XSLT file when both are dragged onto AH Formatter GUI.

 

XSLT producing FO

  1. Select both sample.xml and fo.xsl in Windows Explorer:
    Two files selected in Windows Explorer.
  2. Drag both onto AH Formatter GUI
  3. AH Formatter transforms the XML file using the XSLT file and formats the result:
    Result from dropping 'sample.xml' and 'fo.xsl'.
    The AH Formatter title bar shows the names of both files.

 

XSLT producing HTML

  1. Drag both sample.xml and html.xsl onto AH Formatter GUI.
  2. AH Formatter transforms the XML file using the XSLT file and formats the result:
    Result from dropping 'sample.xml' and 'html.xsl'.

 

XML and CSS together

AH Formatter formats the XML file using the CSS stylesheet when both are dragged onto AH Formatter GUI.

  1. Drag both sample.xml and border.css onto AH Formatter GUI.
  2. AH Formatter formats the XML file using the CSS stylesheet:
    Result from dropping 'sample.xml' and 'border.css'.

 

HTML and XSLT together

AH Formatter transforms the HTML file using the XSLT file when both are dragged onto AH Formatter GUI.

 

XSLT producing FO

  1. Drag both sample.html and fo.xsl onto AH Formatter GUI.
  2. AH Formatter transforms the XML file using the XSLT file and formats the result:
    Result from dropping 'sample.xml' and 'fo.xsl'.
    The AH Formatter title bar shows the names of both files.

 

XSLT producing HTML

  1. Drag both sample.html and html.xsl onto AH Formatter GUI.
  2. AH Formatter transforms the XML file using the XSLT file and formats the result:
    Result from dropping 'sample.html' and 'html.xsl'.

 

HTML and CSS together

AH Formatter formats the HTML file using the CSS stylesheet when both are dragged onto AH Formatter GUI.

  1. Drag both sample.html and border.css onto AH Formatter GUI
  2. AH Formatter formats the HTML file using the CSS stylesheet:
    Result from dropping 'sample.html' and 'border.css'.
  3. Drag both color.html and border.css onto AH Formatter GUI
  4. AH Formatter formats the HTML file using both the CSS stylesheet referred to from the HTML file and the CSS stylesheet dropped onto AH Formatter GUI:
    Result from dropping 'color.html' and 'border.css'.

 

Sequences of files

You can use AH Formatter GUI to apply different stylesheets to the one source file or use it to apply one stylesheet to multiple source files.

 

Source file then stylesheet

  1. Drag sample.xml onto AH Formatter GUI.
  2. As before, AH Formatter formats the XML using its default CSS stylesheet:
    Result from dropping 'sample.xml'.
  3. Drag fo.xsl onto AH Formatter GUI.
  4. AH Formatter transforms the XML file using the XSLT file and formats the result:
    Result from dropping 'sample.xml' and 'fo.xsl'.
  5. Drag color.css onto AH Formatter GUI.
  6. AH Formatter formats the XML file using the CSS stylesheet:
    Result from dropping 'sample.xml' and 'color.css'.
  7. Drag border.css onto AH Formatter GUI
  8. AH Formatter formats the XML file using the new CSS stylesheet:
    Result from dropping 'sample.xml' and 'border.css'.

The same can be done with a HTML file and different stylesheets.

 

Stylesheet then source file

  1. Restart AH Formatter GUI to avoid applying the next stylesheet to the same source file.
    AH Formatter GUI with splash screen.
  2. Drag border.css onto AH Formatter GUI.
  3. AH Formatter does not show any change.
  4. Drag sample.xml onto AH Formatter GUI.
  5. AH Formatter formats the XML file using the previously loaded CSS stylesheet:
    Result from dropping 'sample.xml' and 'border.css'.

Unlike a source file followed by successive stylesheets, when the first file is a stylesheet file, dragging another source file onto AH Formatter GUI does not apply the same stylesheet to the new source file.

 

Summary

The drag-and-drop feature of AH Formatter GUI makes it easy to quickly preview XML, HTML, and graphic files that you have on your computer or, even, that you can access with your web browser.
Formatter
Formatter Add-ons
OSDC
Technical

Awards

 cs-award-2021-publisher-top-50-smallcs-award-2021-publisher-top-50-small

 

Proud Member

cidm-logo Member_PDFA_logo_200x147Tekom-member-logo

Contact

240 N. James Street, Suite 208
Newport, Delaware 19804 USA

Privacy Policy | © 2024 Antenna House, Inc.