Editing User interface markup language

{{More citations needed|date=January 2024}}{{Short description|Language that describes user interfaces}}
{{Use dmy dates|date=October 2024}}
A '''user interface markup language''' is a [[markup language]] that renders and describes [[graphical user interface]]s and controls. Many of these markup languages are dialects of [[XML]] and are dependent upon a pre-existing [[scripting language]] engine, usually a [[JavaScript]] engine, for rendering of controls and extra scriptability.

The concept of the user interface markup languages is primarily based upon the desire to prevent the "[[reinventing the wheel|re-invention of the wheel]]" in the design, development and function of a user interface; such re-invention comes in the form of coding a script for the entire user interface. The typical user interface markup language solidifies [[reusability|often re-used]] program or script code in the form of markup, making it easier to focus upon design of a user interface in an understandable dialect as opposed to focus on function.

User interface markup languages, like most markup and programming languages, rely upon sub-application [[Run-time system|runtime]]s to interpret and render the markup code as program code that can be processed and put out in the desired form. In XML-based user interface markup languages, the markup is usually interpreted and represented as a tree of nodes that may be manipulated at runtime by the application's code or dynamically loaded user [[script (computer programming)|script]].

==User interface markup languages==
{{Cleanup-list|date=August 2015|1=section|2=this section}}

=== HTML ===
[[HTML]] which stands for '''H'''yper'''T'''ext '''M'''arkup '''L'''anguage is a markup language used for building web pages to be displayed in a [[web browser]].<ref>{{Cite web |date=29 August 2023 |title=HTML basics - Learn web development {{!}} MDN |url=https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics |access-date=23 January 2024 |website=developer.mozilla.org |language=en-US |archive-date=23 January 2024 |archive-url=https://web.archive.org/web/20240123223100/https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics |url-status=live }}</ref> It is often combined with [[CSS]] (for styling) and [[JavaScript]] (for interactivity). Most websites in the world are built using HTML as it is the standard language supported by web browsers.<ref>{{Cite web |title="HTML" {{!}} Can I use... Support tables for HTML5, CSS3, etc |url=https://caniuse.com/?search=HTML |access-date=23 January 2024 |website=caniuse.com |archive-date=23 January 2024 |archive-url=https://web.archive.org/web/20240123223100/https://caniuse.com/?search=HTML |url-status=live }}</ref>

===XFD===
XFD, which stands for '''X'''ML '''F'''orm '''D'''efinition is the user interface markup language behind [[STARLIMS]] product ([https://web.archive.org/web/19981111184244/http://starlims.com/]), developed by Abbott Informatics. STARLIMS product has an entire ecosystem of runtime and design time tools to run and create visual forms using XFD language. STARLIMS v10 is powered by an XFD runtime developed using Microsoft .NET Framework and hosted in Internet Explorer browser. STARLIMS v11 introduces an additional XFD engine based on a server-side transformation engine that transforms the XFD into HTML5 compatible data designed to run on any HTML5 compliant browser. XFD is programmable in JavaScript based language.

===QML===
[[QML]] is a cross-platform markup language for creating hardware-accelerated OpenGL-powered user interfaces for devices ranging from mobile to desktop. QML interfaces are manipulated using the JavaScript language. QML is part of the [[Qt_(software)|Qt software framework]].

===MXML===
[[MXML]] is the XML-based user interface markup language introduced by Macromedia in March 2004. It is now part of the [[open-source]] (http://opensource.adobe.com) [[Adobe Flex]] SDK version 4. MXML files compile into Flash [[SWF]] via the Flex SDK, and are rendered either on the web browser, via [[Adobe Flash]] plug-in, or as stand-alone cross-platform applications, via the open-source [[Adobe AIR]] SDK.

===UIML===
OASIS [[UIML]] is an XML-based standard user interface markup languages.{{citation needed|date=April 2016}} It is an [[open standard]] where implementation is not restricted to a single vendor.

===XUL===
The primary interface language of [[Mozilla Foundation]] products is [[XUL]]. XUL documents are rendered by the [[Gecko (layout engine)|Gecko]] engine, which also renders [[XHTML]] and [[Scalable Vector Graphics|SVG]] documents. It cooperates with many existing standards and technologies, including [[Cascading Style Sheets|CSS]], [[JavaScript]], [[Document Type Definition|DTD]] and [[Resource Description Framework|RDF]].

===UsiXML===
[[UsiXML]] (which stands for '''Us'''er '''I'''nterface E'''x'''tensible '''M'''arkup '''L'''anguage) is an XML-compliant markup language that describes the UI for multiple contexts of use such as Character User Interfaces (CUIs), graphical user interfaces (GUIs), Auditory User Interfaces, and Multimodal User Interfaces.

In other words, interactive applications with different types of interaction techniques, modalities of use, and computing platforms can be described in a way that preserves the design independently from peculiar characteristics of physical computing platform.

===WTKX===
WTKX is an XML-based markup language used for building [[Apache Pivot]] applications. Though it is most commonly used for defining the structure of an application's user interface, it can be used to declaratively construct any type of Java object hierarchy.

===XAL===
eXtensible Application Language is the Markup language of Nexaweb's Enterprise Web 2.0 Suite.  Developers can use this language to define applications that will run as a [[Java (programming language)|Java]] Client or an [[Ajax (programming)|Ajax]] Client.

===SVG===
[[Scalable Vector Graphics]] is a markup language for graphics proposed by the W3C<ref>{{Cite web |title=Scalable Vector Graphics (SVG) 2 |url=https://www.w3.org/TR/SVG2/ |website=w3.org |access-date=23 January 2024 |archive-date=27 January 2017 |archive-url=https://web.archive.org/web/20170127080912/http://www.w3.org/TR/SVG2/ |url-status=live }}</ref> that can support rich graphics for web and mobile applications. While SVG is not a user interface language, it includes support for vector/raster graphics, animation, interaction with the [[Document Object Model|DOM]] and CSS, embedded media, events and scriptability.  When these features are used in combination, rich user interfaces are possible.

SVG can also be superimposed upon another XML-compatible user interface markup language, such as [[XUL]] and [[XForms]], as the graphics-rich portion of a user interface.

===TUIX===
[[TUIX]] is an XML based markup language for defining user interfaces in [[Tribiq]] CMS. Developers can define both the appearance of the interfaces and their interactions. The TUIX files from different Plugins are merged before rendering facilitating easy modification of existing interfaces and addition of new functionality.

===XAML===
[[Extensible Application Markup Language|XAML]] is a markup system that underlies user interface components of Microsoft's [[.NET Framework]] 3.0 and above. Its scope is more ambitious than that of most user interface markup languages, since program logic and styles are also embedded in the [[Extensible Application Markup Language|XAML]] document. Functionally, it can be seen as a combination of XUL, SVG, CSS, and JavaScript into a single XML schema.

Some people are critical of this design, as many standards (such as those already listed) exist for doing these things. However, it is expected to be developed with a visual tool where developers do not even need to understand the underlying markups.

===I3ML===
[[I3ML]] is a proprietary thin client Application Delivery mechanism developed by [http://www.cokinetic.com CoKinetic Systems Corp] {{Webarchive|url=https://web.archive.org/web/20210123202732/http://www.cokinetic.com/ |date=23 January 2021 }}, with client support provided by a browser plugin that will render windows-like applications over an HTTP infrastructure with minimal bandwidth needs.

===OpenLaszlo (LZX)===
[[OpenLaszlo]] is a runtime environment that comprises a runtime environment and an interface definition language (Laszlo XML - LZX). LZX is a declarative user interface language which defines the widgets, application layout and scripting elements (using JavaScript) to create your application. LZX is runtime agnostic with the currently supported runtime being within Macromedia/Adobe Flash. An experimental runtime called Laszlo "Legals" that will allow  OpenLaszlo (LZX) applications run in multiple runtime environments, such as DHTML/AJAX.

===HMVCUL===
[[Hierarchical Model View Controller User Interface Language|'''H'''ierarchical '''M'''odel '''V'''iew '''C'''ontroller '''U'''ser '''I'''nterface '''L'''anguage]] ('''HMVCUL''') is an XML markup user interface language which supports the creation and chaining of atomic MVC triad components used in constructing HMVC GUI applications. The associated runtime provides methods which enable configuration of properties, data binding and events of each of the MVC triad elements (widget, controller, model).  The runtime accomplishes this by mapping XML elements defined in an HMVCUL file to objects inside the framework, attributes to properties or to events. Chaining is accomplished by following the tree structure described inside the HMVCUL file.

===WasabiXML===
'''WasabiXML''' is an XML markup language that is used to define the graphical interface in [[Wasabi (software)|Wasabi]] powered applications. It is most commonly used with [[Winamp]] for making Winamp [[skin (computing)|skins]]. WasabiXML had been developed by [[Nullsoft]] for Winamp, but it is also usable with other applications with the Wasabi [[Software development kit|SDK]].

The root element in WasabiXML is <code><WasabiXML></code> (for Winamp skins, it is also <code><WinampAbstractionLayer></code>). The <code><skininfo></code> element shows the information for a skin. The graphical interface is held by the <code><container></code> element and the basic viewable GUI element is <code><layout></code>. Following is an example for a simple [[GUI]] with a button element:

<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<WinampAbstractionLayer version="1.2">
  <skininfo>
    <version>1</version>
    <name>mySkin</name>
    <comment>Ooo Lala</comment>
    <author>Some Person</author>
    <email>info@example.org</email>
    <homepage>http://www.example.org</homepage>
  </skininfo>
  <include file="xml/color-sys.xml"/> <!-- Include a file -->
  <container id="normal">
    <layout id="normal" desktopalpha="true">
      <button
        x="0" y="0"
        id="button.normal"
        image="mybutton.image"
        hoverimage="mybutton.himage"
        downimage="mybutton.dimage"
      />
    </layout>
  </container>
</WinampAbstractionLayer>
</syntaxhighlight>

WasabiXML supports many GUI elements including:

*<code><button></code>
*<code><text></code>
*<code><vis></code>
*<code><eqvis></code>
*<code><layer></code>
*<code><animatedlayer></code>
*<code><groupdef></code> used in conjunction with <code><group></code>

<code><groupdef></code> allows the developer to define a group of GUI objects which can be re-used anywhere in the skin. Wasabi also supports XUI's which are nothing but <code><groups></code> powered by a [[MAKI]] script allowing developers to create GUI components (widgets) of their own adding to modularity.

WasabiXML has an XML namespace 'Wasabi::' which defines common GUI's without having the need to declare their image paths.

=== MARIA ===
[[MARIA XML | MARIA]] is a universal, [[declarative language| declarative]], multiple  [[abstraction level]], [[XML]]-based language for [[User_Interface_Modeling | modelling]] interactive applications in [[ ubiquitous computing | ubiquitous]] environments.

=== FXML ===
[[FXML]] is a [[XML]]-based language for defining the user interface of [[JavaFX]] applications.

===Other===
Other markup languages incorporated into existing frameworks are:
*[[VTML]] for [[Macromedia HomeSite]]

Apple's Interface Builder .xib format

Some of these are compiled into binary forms.

In [[avionics]], the [[ARINC 661]] standard prescribes a binary format to define user interfaces in [[glass cockpit]]s.

Borland VCL forms (.dfm and .lfm) are text files describing the windows of [[Delphi (programming language)|Delphi]] and [[Lazarus (IDE)|Lazarus]] applications. They are compiled into the final executable in binary format, and use [[RTTI]] to function.

==See also==
*[[User Interface Modeling]]
*[[Layout manager|Layout engine]]
*[[Widget toolkit]]
*[[List of user interface markup languages]]
*[[Comparison of user interface markup languages]]
*[[Interface description language]]

== References ==
{{Reflist}}{{Markup languages}}

{{DEFAULTSORT:User Interface Markup Language}}
[[Category:Markup languages]]
[[Category:Widget engines]]
[[Category:User interface markup languages| ]]