Roll Your Own Swing-based XML Editor (Part I)

Editor’s note: This is the first of a three-part series about how to build your own XML editor.

f you’ve been looking for a cross-platform, open-source XML editor, you’ve likely come up short. In the following series of three articles, I will walk you through the development of a simple, no frills, XML editor, utilizing several of the most common Java 2 Swing components. This series will be beneficial to anyone wanting to write their own XML editor, or just to those of you looking to learn or brush up on Swing.

In this first article, we will briefly discuss XML and why a tree structure is appropriate to display XML, and then we will take a look at the JAXP API and how to set up your environment with the necessary XML classes. Then we will learn about the JTree Swing component that displays a graphical tree (a common component in many XML editors). Finally, we will build a reusable class that extends the JTree component that is capable of parsing an XML document and displaying its data in a JTree.

In the second article, we will create the framework for our XML editor. In order to do so, we will cover a variety of Swing components (including JSplitPanes, JScrollPanes, JButtons, and JTextAreas).

In the third and final article, we will add the finishing touches to our editor by building a JMenu component and adding it to the editor. Additionally, we will construct JFileChooser components to access the underlying file system to allow XML documents to be saved and new documents to be opened.



How can I create a visual representation of an XML document?



Create a custom class that extends JTree, capable of parsing an XML file into a DOM object and constructing a JTree from that object.

Handling XML Data
(Editor’s note: If you already know how to work with XML data and you have downloaded the latest version of the xerces.jar from the Apache Group, then you may move on to the next page.)

One of the most common misunderstandings about the eXtensible Markup Language (XML) is that it is a new way of displaying data in a Web browser, akin to HTML or Cascading Style Sheets (CSS). The truth is that XML is a data-representation language, not a data-presentation language. It allows you to describe your data in a meaningful way. XML enables you to declare that “these three words constitute a heading,” “this is the byline,” and “this section constitutes the article body.” XML allows you to declare what a particular piece of data is, rather than how that data should appear in a Web page.

Consider the following XML sample:

Roll Your Own Swing-based XML Editor (Part 1 of 3)<subtitle> Part 1 – Displaying XML with a JTree</subtitle> Kyle Gabhart

This is the article body

Notice that these elements are different from standard HTML, but they look similar to HTML. This is because both HTML and XML have the same origin, SGML. The difference is that HTML has a predefined tag set, and XML’s grammar is flexible, allowing you to surround data with a meaningful tag (like ). Also notice, the way in which every element descends from the root element (

) and that some elements are nested even further ( is nested within ). This organization is useful for three reasons: The data is more meaningful, the data is more maintainable, and the data can be easily represented as a tree structure. This is why we will be using a JTree object to graphically display the XML data. For a more thorough introduction to XML, consult “<A href="http://www.xml.com/pub/a/98/10/guide0.html">A Technical Introduction to XML</A>.” <P>The Java API for XML Processing (JAXP) enables applications to parse and transform XML documents using a pure Java API that is independent of a particular XML processor implementation. It functions similar to the JDBC API, in that the developer is abstracted from the details of the underlying vendor specific component (an XML parser in the case of JAXP). The Apache Group’s Xerces parser provides the most up-to-date support for the JAXP API. In order to run the code developed later in this article, you will need to download the 1.3.1 Xerces binaries for your system (2.0 is still in alpha stage) from <A href="http://xml.apache.org/dist/xerces-j/">this link.</A> Once you have downloaded the archive, extract the xerces.jar file and place it somewhere in your classpath. You can also download the xerces.jar via a link at the end of this article. <P>Next, we’ll learn how to use the JTree Swing component.</P><P class=Body><B>Working with the JTree Component</B><BR>In nature, a tree has a common trunk from which branches extend. From those branches more branches extend. Every branch is related to every other branch in some way because they all have a common source, the trunk. This hierarchical relationship is not unique to trees; human genealogies follow much the same pattern. From a common set of parents, extend one or more children, each of those children potentially have one or more children, and the pattern continues ad infinitum. <P>In terms of data storage, a tree is a way of storing data that is organized in a manner similar to a genealogical tree. Each branch of the tree is called a node. The common parent node to all child nodes is called the root node. Every node that has child nodes is called a parent node (even if it, in turn, is a child of another node). A JTree component is simply a visual representation of a tree data structure. <P><A href="javascript:showSupportItem('figure1')">Figure 1</A> shows a screen shot of a JTree component. <P>Almost every XML editor includes a visual tree structure like this one that allows you to edit and navigate through the elements contained in the XML document. We will construct one of these in the next section, but first we need to learn a little more about the JTree component. <P>A node stores data at a particular position in the tree. In addition to containing data, it knows about its parent node and any child nodes for which it is a parent. The javax.swing.tree package defines a handful of interfaces that provide a common way of building and manipulating a tree structure. <P><UL><LI>TreeNode?declares methods used to access information about a tree node <LI>MutableTreeNode?declares methods used on a mutable tree (one that can add and remove child nodes) <LI>TreeModel?declares methods used to create and manage the data model associated with a tree.</LI></UL><P>Next, we’ll create a class that extends JTree and provides methods that allow an XML document to be parsed and displayed as visual nodes in a JTree component. <P><B>Creating the XTree Component</B><BR>The XTree class consists of one constructor and three methods. Our simple implementation of the XTree component merely builds an Xtree; it does not provide for any manipulation of tree nodes after the tree has initially been built. As such, every method within the XTree class is called from the constructor. <P>Here’s a look at XTree API: <P><B>Field Summary</B><BR><UL><LI>private DefaultMutableTreeNode treeNode?This member stores the TreeNode object used to create the model for the JTree. The DefaultMutableTreeNode class is defined in the javax.swing.tree package and provides a default implementation of the MutableTreeNode interface. <LI>private DocumentBuilderFactory dbf <LI>private DocumentBuilder db <LI>private Document doc?These three members are a part of the JAXP API and are used to parse the XML text into a DOM object (of type Document).</LI></UL><P><B>Constructor Summary</B><BR><UL><LI>public XTree( String text )?This single constructor builds an XTree object using the XML text passed in through the constructor. After initializing some of the basic display properties that relate to the JTree superclass and the DOM parsing objects, the constructor builds a TreeModel object to create the actual visual tree. To do this, a root node is created by passing the DOM object into the createTreeNode() method which returns an object of type DefaultMutableTreeNode. This object is then used to create the tree’s TreeModel via the setModel() method inherited from the JTree class.</LI></UL><P><B>Method Summary</B><BR><UL><LI>private DefaultMutableTreeNode createTreeNode( Node root )?This method takes a DOM Node and recurses through the children until each one is added to a DefaultMutableTreeNode. This is a recursive method, calling itself for each child node found beneath the root node. The JTree then uses the DefaultMutableTreeNode object as a tree model. <LI>private String getNodeType( Node node ) ?This method is used by createTreeNode() to associate a string of text with a particular type of node. <LI>private Node parseXml()?This method performs the actual parsing of the XML text string. It returns an object of type Node that can then be passed into the createTreeNode() method.</LI></UL><P>There you have it: a class that extends JTree, adding XML text parsing capabilities. In the next two articles we will build additional components and extend upon this component to create a simple, platform-independent XML editor. <P>Below, you will find links to two java source files, a sample XML file, and the xerces.jar with the JAXP classes and Xerces parser. To experiment with the XTree class, follow the following steps: <UL><LI><a href="/assets/sourcecode/12723.zip">download the four files</a>; <LI>make sure the xerces.jar file is in your classpath; <LI>compile the two java source files; <LI>run the XTreeTester class and pass the sample XML file as an argument like this: java XTreeTester sample.xml <P>XTree.java?The XTree component class.<BR>XTreeTester.java?This file contains a main() method and is used to test the XTree class by parsing an XML file.<BR>Sample.xml?A sample XML file to pass into the XTreeTester class.<BR>xerces.jar?This jar file contains the Xerces parser and the JAXP classes required by the XTree class. It must be in your classpath for the application to successfully compile and execute.</P></LI></UL></p> </div> </div> <div class="elementor-element elementor-element-4f9883d elementor-widget elementor-widget-post-navigation" data-id="4f9883d" data-element_type="widget" data-widget_type="post-navigation.default"> <div class="elementor-widget-container"> <div class="elementor-post-navigation"> <div class="elementor-post-navigation__prev elementor-post-navigation__link"> <a href="https://www.devx.com/tip-bank/18602/" rel="prev"><span class="elementor-post-navigation__link__prev"><span class="post-navigation__prev--label">Previous</span></span></a> </div> <div class="elementor-post-navigation__next elementor-post-navigation__link"> <a href="https://www.devx.com/tip-bank/19099/" rel="next"><span class="elementor-post-navigation__link__next"><span class="post-navigation__next--label">Next</span></span></a> </div> </div> </div> </div> <section class="elementor-section elementor-inner-section elementor-element elementor-element-277ab1 elementor-section-full_width elementor-section-content-middle elementor-section-height-default elementor-section-height-default" data-id="277ab1" data-element_type="section"> <div class="elementor-container elementor-column-gap-no"> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-584e67da" data-id="584e67da" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-2bf5b4bc elementor-widget elementor-widget-heading" data-id="2bf5b4bc" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <span class="elementor-heading-title elementor-size-default">Share the Post:</span> </div> </div> </div> </div> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-2288ce90" data-id="2288ce90" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-496b8f65 elementor-share-buttons--view-icon elementor-share-buttons--skin-minimal elementor-share-buttons--color-custom elementor-share-buttons--shape-square elementor-grid-0 elementor-widget elementor-widget-share-buttons" data-id="496b8f65" data-element_type="widget" data-widget_type="share-buttons.default"> <div class="elementor-widget-container"> <link rel="stylesheet" href="https://www.devx.com/wp-content/plugins/elementor-pro/assets/css/widget-share-buttons.min.css"> <div class="elementor-grid"> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_facebook"> <span class="elementor-share-btn__icon"> <i class="fab fa-facebook" aria-hidden="true"></i> <span class="elementor-screen-only">Share on facebook</span> </span> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_twitter"> <span class="elementor-share-btn__icon"> <i class="fab fa-twitter" aria-hidden="true"></i> <span class="elementor-screen-only">Share on twitter</span> </span> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_linkedin"> <span class="elementor-share-btn__icon"> <i class="fab fa-linkedin" aria-hidden="true"></i> <span class="elementor-screen-only">Share on linkedin</span> </span> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-8905b95" data-id="8905b95" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-46d69df elementor-widget elementor-widget-html" data-id="46d69df" data-element_type="widget" data-widget_type="html.default"> <div class="elementor-widget-container"> <iframe id="JotFormIFrame-230167013128041" title="Daily Technology News Straight to Your Inbox" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/230167013128041" frameborder="0" style=" min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-230167013128041"); if (ifr) { var src = ifr.src; var iframeParams = []; if (window.location.href && window.location.href.indexOf("?") > -1) { iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&')); } if (src && src.indexOf("?") > -1) { iframeParams = iframeParams.concat(src.substr(src.indexOf("?") + 1).split("&")); src = src.substr(0, src.indexOf("?")) } iframeParams.push("isIframeEmbed=1"); ifr.src = src + "?" + iframeParams.join('&'); } window.handleIFrameMessage = function(e) { if (typeof e.data === 'object') { return; } var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) { return; } switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; if (!isNaN(args[1]) && parseInt(iframe.style.minHeight) > parseInt(args[1])) { iframe.style.minHeight = args[1] + "px"; } break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; case "loadScript": if( !window.isPermitted(e.origin, ['jotform.com', 'jotform.pro']) ) { break; } var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); break; case "exitFullscreen": if (window.document.exitFullscreen) window.document.exitFullscreen(); else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen(); else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen(); else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen(); else if (window.document.msExitFullscreen) window.document.msExitFullscreen(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; window.isPermitted = function(originUrl, whitelisted_domains) { var url = document.createElement('a'); url.href = originUrl; var hostname = url.hostname; var result = false; if( typeof hostname !== 'undefined' ) { whitelisted_domains.forEach(function(element) { if( hostname.slice((-1 * element.length - 1)) === '.'.concat(element) || hostname === element ) { result = true; } }); return result; } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script> </div> </div> <div class="elementor-element elementor-element-87227ec elementor-hidden-tablet elementor-hidden-mobile elementor-toc--minimized-on-tablet elementor-widget elementor-widget-table-of-contents" data-id="87227ec" data-element_type="widget" data-settings="{"headings_by_tags":["h2"],"exclude_headings_by_selector":[],"marker_view":"bullets","icon":{"value":"fas fa-circle","library":"fa-solid"},"minimize_box":"yes","minimized_on":"tablet","hierarchical_view":"yes","min_height":{"unit":"px","size":"","sizes":[]},"min_height_tablet":{"unit":"px","size":"","sizes":[]},"min_height_mobile":{"unit":"px","size":"","sizes":[]}}" data-widget_type="table-of-contents.default"> <div class="elementor-widget-container"> <style>/*! elementor-pro - v3.6.2 - 14-02-2022 */ .elementor-widget-table-of-contents .elementor-toc__header-title{color:var(--header-color)}.elementor-widget-table-of-contents.elementor-toc--collapsed .elementor-toc__toggle-button--collapse,.elementor-widget-table-of-contents:not(.elementor-toc--collapsed) .elementor-toc__toggle-button--expand{display:none}.elementor-widget-table-of-contents .elementor-widget-container{min-height:var(--box-min-height);border:var(--box-border-width,1px) solid var(--box-border-color,#a4afb7);border-radius:var(--box-border-radius,3px);background-color:var(--box-background-color);-webkit-transition:min-height .4s;-o-transition:min-height .4s;transition:min-height .4s;overflow:hidden}.elementor-toc__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:var(--box-padding,20px);background-color:var(--header-background-color);border-bottom:var(--separator-width,1px) solid var(--box-border-color,#a4afb7)}.elementor-toc__header-title{font-size:18px;margin:0;color:var(--header-color)}.elementor-toc__toggle-button{cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.elementor-toc__toggle-button i{color:var(--toggle-button-color)}.elementor-toc__toggle-button svg{height:1em;width:1em;fill:var(--toggle-button-color)}.elementor-toc__spinner-container{text-align:center}.elementor-toc__spinner{font-size:2em}.elementor-toc__spinner.e-font-icon-svg{height:1em;width:1em}.elementor-toc__body{padding:var(--box-padding,20px);max-height:var(--toc-body-max-height);overflow-y:auto}.elementor-toc__body::-webkit-scrollbar{width:7px}.elementor-toc__body::-webkit-scrollbar-thumb{background-color:#c2cbd2;border-radius:10px}.elementor-toc__list-wrapper{list-style:none;padding:0}.elementor-toc__list-item{margin-bottom:.5em}.elementor-toc__list-item.elementor-item-active{font-weight:700}.elementor-toc__list-item .elementor-toc__list-wrapper{margin-top:.5em;margin-left:var(--nested-list-indent,1em)}.elementor-toc__list-item-text:hover{color:var(--item-text-hover-color);-webkit-text-decoration:var(--item-text-hover-decoration);text-decoration:var(--item-text-hover-decoration)}.elementor-toc__list-item-text.elementor-item-active{color:var(--item-text-active-color);-webkit-text-decoration:var(--item-text-active-decoration);text-decoration:var(--item-text-active-decoration)}.elementor-toc__list-item-text-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.elementor-toc__list-item-text-wrapper:before,.elementor-toc__list-item-text-wrapper i{margin-right:8px;color:var(--marker-color)}.elementor-toc__list-item-text-wrapper svg{margin-right:8px;fill:var(--marker-color);height:var(--marker-size,.5em);width:var(--marker-size,.5em)}.elementor-toc__list-item-text-wrapper i{font-size:var(--marker-size,.5em)}.elementor-toc__list-item-text-wrapper:before{font-size:var(--marker-size,1em)}.elementor-toc--content-ellipsis .elementor-toc__list-item-text{white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis}.elementor-toc__list-items--collapsible>.elementor-toc__list-wrapper>.elementor-toc__list-item>.elementor-toc__list-wrapper{display:none}.elementor-toc__heading-anchor{position:absolute}.elementor-toc__body .elementor-toc__list-item-text{color:var(--item-text-color);-webkit-text-decoration:var(--item-text-decoration);text-decoration:var(--item-text-decoration)}.elementor-toc__body .elementor-toc__list-item-text:hover{color:var(--item-text-hover-color);-webkit-text-decoration:var(--item-text-hover-decoration);text-decoration:var(--item-text-hover-decoration)}.elementor-toc__body .elementor-toc__list-item-text.elementor-item-active{color:var(--item-text-active-color);-webkit-text-decoration:var(--item-text-active-decoration);text-decoration:var(--item-text-active-decoration)}ol.elementor-toc__list-wrapper{counter-reset:item}ol.elementor-toc__list-wrapper .elementor-toc__list-item{counter-increment:item}ol.elementor-toc__list-wrapper .elementor-toc__list-item-text-wrapper:before{content:counters(item,".") ". "}@media only screen and (max-width:-1px){.elementor-toc--minimized-on-tablet_extra .elementor-toc__body{display:none}}@media only screen and (max-width:1024px){.elementor-toc--minimized-on-tablet .elementor-toc__body{display:none}}@media only screen and (max-width:-1px){.elementor-toc--minimized-on-mobile_extra .elementor-toc__body{display:none}}@media only screen and (max-width:767px){.elementor-toc--minimized-on-mobile .elementor-toc__body{display:none}}</style> <div class="elementor-toc__header"> <h4 class="elementor-toc__header-title"> Overview </h4> <div class="elementor-toc__toggle-button elementor-toc__toggle-button--expand"><i class="fas fa-chevron-down"></i></div> <div class="elementor-toc__toggle-button elementor-toc__toggle-button--collapse"><i class="fas fa-chevron-up"></i></div> </div> <div class="elementor-toc__body"> <div class="elementor-toc__spinner-container"> <i class="elementor-toc__spinner eicon-animation-spin eicon-loading" aria-hidden="true"></i> </div> </div> </div> </div> </div> </div> </div> </section> <section class="elementor-section elementor-top-section elementor-element elementor-element-7ef94119 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="7ef94119" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-59974df2" data-id="59974df2" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-ab68ddb elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="ab68ddb" data-element_type="widget" data-widget_type="divider.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.5.5 - 03-02-2022 */ .elementor-widget-divider{--divider-border-style:none;--divider-border-width:1px;--divider-color:#2c2c2c;--divider-icon-size:20px;--divider-element-spacing:10px;--divider-pattern-height:24px;--divider-pattern-size:20px;--divider-pattern-url:none;--divider-pattern-repeat:repeat-x}.elementor-widget-divider .elementor-divider{display:-webkit-box;display:-ms-flexbox;display:flex}.elementor-widget-divider .elementor-divider__text{font-size:15px;line-height:1;max-width:95%}.elementor-widget-divider .elementor-divider__element{margin:0 var(--divider-element-spacing);-ms-flex-negative:0;flex-shrink:0}.elementor-widget-divider .elementor-icon{font-size:var(--divider-icon-size)}.elementor-widget-divider .elementor-divider-separator{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;direction:ltr}.elementor-widget-divider--view-line_icon .elementor-divider-separator,.elementor-widget-divider--view-line_text .elementor-divider-separator{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.elementor-widget-divider--view-line_icon .elementor-divider-separator:after,.elementor-widget-divider--view-line_icon .elementor-divider-separator:before,.elementor-widget-divider--view-line_text .elementor-divider-separator:after,.elementor-widget-divider--view-line_text .elementor-divider-separator:before{display:block;content:"";border-bottom:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-top:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--element-align-left .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:100;flex-shrink:100}.elementor-widget-divider--element-align-left .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-left .elementor-divider__element{margin-left:0}.elementor-widget-divider--element-align-right .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:100;flex-shrink:100}.elementor-widget-divider--element-align-right .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-right .elementor-divider__element{margin-right:0}.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator{border-top:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--separator-type-pattern{--divider-border-style:none}.elementor-widget-divider--separator-type-pattern.elementor-widget-divider--view-line .elementor-divider-separator,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:after,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:before,.elementor-widget-divider--separator-type-pattern:not([class*=elementor-widget-divider--view]) .elementor-divider-separator{width:100%;min-height:var(--divider-pattern-height);-webkit-mask-size:var(--divider-pattern-size) 100%;mask-size:var(--divider-pattern-size) 100%;-webkit-mask-repeat:var(--divider-pattern-repeat);mask-repeat:var(--divider-pattern-repeat);background-color:var(--divider-color);-webkit-mask-image:var(--divider-pattern-url);mask-image:var(--divider-pattern-url)}.elementor-widget-divider--no-spacing{--divider-pattern-size:auto}.elementor-widget-divider--bg-round{--divider-pattern-repeat:round}.rtl .elementor-widget-divider .elementor-divider__text{direction:rtl}</style> <div class="elementor-divider"> <span class="elementor-divider-separator"> </span> </div> </div> </div> <div class="elementor-element elementor-element-2298c708 elementor-widget elementor-widget-heading" data-id="2298c708" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <p class="elementor-heading-title elementor-size-default">The Latest </p> </div> </div> <div class="elementor-element elementor-element-39bd7056 elementor-grid-1 elementor-posts--thumbnail-right elementor-grid-tablet-2 elementor-grid-mobile-1 elementor-widget elementor-widget-posts" data-id="39bd7056" data-element_type="widget" data-settings="{"classic_columns":"1","classic_row_gap":{"unit":"px","size":0,"sizes":[]},"classic_columns_tablet":"2","classic_columns_mobile":"1","classic_row_gap_tablet":{"unit":"px","size":"","sizes":[]},"classic_row_gap_mobile":{"unit":"px","size":"","sizes":[]}}" data-widget_type="posts.classic"> <div class="elementor-widget-container"> <link rel="stylesheet" href="https://www.devx.com/wp-content/plugins/elementor-pro/assets/css/widget-posts.min.css"> <div class="elementor-posts-container elementor-posts elementor-posts--skin-classic elementor-grid"> <article class="elementor-post elementor-grid-item post-24823 post type-post status-publish format-standard has-post-thumbnail hentry category-saas tag-b2b tag-marketing tag-marketing-agencies tag-saas"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/saas/top-5-b2b-saas-marketing-agencies-for-2023/" > <div class="elementor-post__thumbnail"><img width="300" height="200" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="attachment-full size-full ewww_webp" alt="" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/2022/02/thumbnail.jpg" data-src-webp="https://www.devx.com/wp-content/uploads/2022/02/thumbnail.jpg.webp" data-eio="j" /><noscript><img width="300" height="200" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="attachment-full size-full ewww_webp" alt="" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/2022/02/thumbnail.jpg" data-src-webp="https://www.devx.com/wp-content/uploads/2022/02/thumbnail.jpg.webp" data-eio="j" /><noscript><img width="300" height="200" src="https://www.devx.com/wp-content/uploads/2022/02/thumbnail.jpg" class="attachment-full size-full" alt="" loading="lazy" /></noscript></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/saas/top-5-b2b-saas-marketing-agencies-for-2023/" > Top 5 B2B SaaS Marketing Agencies for 2023 </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> February 8, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>In recent years, the software-as-a-service (SaaS) sector has experienced exponential growth as more and more companies choose cloud-based solutions. Any SaaS company hoping to stay ahead of the curve in this quickly changing industry needs to invest in effective marketing. So selecting the best marketing agency can mean the difference</p> </div> </div> </article> <article class="elementor-post elementor-grid-item post-24712 post type-post status-publish format-standard has-post-thumbnail hentry category-editorials-and-opinions category-technology tag-tech-leadership tag-technology tag-technology-leaders"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/editorials-and-opinions/why-the-world-needs-more-technology-leadership/" > <div class="elementor-post__thumbnail"><img width="1920" height="1282" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="attachment-full size-full ewww_webp" alt="technology leadership" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/technology-leadership.jpg" data-src-webp="https://www.devx.com/wp-content/uploads/technology-leadership.jpg.webp" data-eio="j" /><noscript><img width="1920" height="1282" src="https://www.devx.com/wp-content/uploads/technology-leadership.jpg" class="attachment-full size-full" alt="technology leadership" loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/editorials-and-opinions/why-the-world-needs-more-technology-leadership/" > Why the World Needs More Technology Leadership </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> February 7, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>As a fact, technology has touched every single aspect of our lives. And there are some technology giants in today’s world which have been frequently opined to have a strong influence on recent overall technological influence. Moreover, those tech giants have popular technology leaders leading the companies toward achieving greatness.</p> </div> </div> </article> <article class="elementor-post elementor-grid-item post-24791 post type-post status-publish format-standard has-post-thumbnail hentry category-other-web-development tag-5g tag-ai tag-augmented-reality tag-ios-app-development tag-machine-learning"> <a class="elementor-post__thumbnail__link" href="https://www.devx.com/other-web-development/ios-app-development-trends-to-watch/" > <div class="elementor-post__thumbnail"><img width="1920" height="1440" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="attachment-full size-full ewww_webp" alt="iOS app development" loading="lazy" data-src-img="https://www.devx.com/wp-content/uploads/iOS-app-development.jpg" data-src-webp="https://www.devx.com/wp-content/uploads/iOS-app-development.jpg.webp" data-eio="j" /><noscript><img width="1920" height="1440" src="https://www.devx.com/wp-content/uploads/iOS-app-development.jpg" class="attachment-full size-full" alt="iOS app development" loading="lazy" /></noscript></div> </a> <div class="elementor-post__text"> <h3 class="elementor-post__title"> <a href="https://www.devx.com/other-web-development/ios-app-development-trends-to-watch/" > The Future of iOS App Development: Trends to Watch </a> </h3> <div class="elementor-post__meta-data"> <span class="elementor-post-date"> February 6, 2023 </span> </div> <div class="elementor-post__excerpt"> <p>When it launched in 2008, the Apple App Store only had 500 apps available. By the first quarter of 2022, the store had about 2.18 million iOS-exclusive apps. Average monthly app releases for the platform reached 34,000 in the first half of 2022, indicating rapid growth in iOS app development.</p> </div> </div> </article> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-e055498" data-id="e055498" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> </div> </section> </div> <footer data-elementor-type="footer" data-elementor-id="23300" class="elementor elementor-23300 elementor-location-footer" data-elementor-settings="[]"> <section class="elementor-section elementor-top-section elementor-element elementor-element-c97199d elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="c97199d" data-element_type="section" data-settings="{"background_background":"classic"}"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-291c4e4" data-id="291c4e4" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> <div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-92d2c65" data-id="92d2c65" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-269b367 elementor-nav-menu__align-center elementor-nav-menu--dropdown-tablet elementor-nav-menu__text-align-aside elementor-nav-menu--toggle elementor-nav-menu--burger elementor-widget elementor-widget-nav-menu" data-id="269b367" data-element_type="widget" data-settings="{"layout":"horizontal","submenu_icon":{"value":"<i class=\"fas fa-caret-down\"><\/i>","library":"fa-solid"},"toggle":"burger"}" data-widget_type="nav-menu.default"> <div class="elementor-widget-container"> <nav migration_allowed="1" migrated="0" role="navigation" class="elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-horizontal e--pointer-underline e--animation-fade"> <ul id="menu-1-269b367" class="elementor-nav-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-23808"><a href="https://www.devx.com/" class="elementor-item">Home</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23809"><a href="https://www.devx.com/advertise/" class="elementor-item">Advertise</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23816"><a href="https://www.devx.com/about/" class="elementor-item">About</a></li> </ul> </nav> <div class="elementor-menu-toggle" role="button" tabindex="0" aria-label="Menu Toggle" aria-expanded="false"> <i aria-hidden="true" role="presentation" class="elementor-menu-toggle__icon--open eicon-menu-bar"></i><i aria-hidden="true" role="presentation" class="elementor-menu-toggle__icon--close eicon-close"></i> <span class="elementor-screen-only">Menu</span> </div> <nav class="elementor-nav-menu--dropdown elementor-nav-menu__container" role="navigation" aria-hidden="true"> <ul id="menu-2-269b367" class="elementor-nav-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-23808"><a href="https://www.devx.com/" class="elementor-item" tabindex="-1">Home</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23809"><a href="https://www.devx.com/advertise/" class="elementor-item" tabindex="-1">Advertise</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23816"><a href="https://www.devx.com/about/" class="elementor-item" tabindex="-1">About</a></li> </ul> </nav> </div> </div> </div> </div> <div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-280ec0d" data-id="280ec0d" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-5d5f4dc5 elementor-shape-rounded elementor-grid-0 e-grid-align-center elementor-widget elementor-widget-social-icons" data-id="5d5f4dc5" data-element_type="widget" data-widget_type="social-icons.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.5.5 - 03-02-2022 */ .elementor-widget-social-icons.elementor-grid-0 .elementor-widget-container,.elementor-widget-social-icons.elementor-grid-mobile-0 .elementor-widget-container,.elementor-widget-social-icons.elementor-grid-tablet-0 .elementor-widget-container{line-height:1;font-size:0}.elementor-widget-social-icons:not(.elementor-grid-0):not(.elementor-grid-tablet-0):not(.elementor-grid-mobile-0) .elementor-grid{display:inline-grid}.elementor-widget-social-icons .elementor-grid{grid-column-gap:var(--grid-column-gap,5px);grid-row-gap:var(--grid-row-gap,5px);grid-template-columns:var(--grid-template-columns);-webkit-box-pack:var(--justify-content,center);-ms-flex-pack:var(--justify-content,center);justify-content:var(--justify-content,center);justify-items:var(--justify-content,center)}.elementor-icon.elementor-social-icon{font-size:var(--icon-size,25px);line-height:var(--icon-size,25px);width:calc(var(--icon-size, 25px) + (2 * var(--icon-padding, .5em)));height:calc(var(--icon-size, 25px) + (2 * var(--icon-padding, .5em)))}.elementor-social-icon{--e-social-icon-icon-color:#fff;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;background-color:#818a91;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;cursor:pointer}.elementor-social-icon i{color:var(--e-social-icon-icon-color)}.elementor-social-icon svg{fill:var(--e-social-icon-icon-color)}.elementor-social-icon:last-child{margin:0}.elementor-social-icon:hover{opacity:.9;color:#fff}.elementor-social-icon-android{background-color:#a4c639}.elementor-social-icon-apple{background-color:#999}.elementor-social-icon-behance{background-color:#1769ff}.elementor-social-icon-bitbucket{background-color:#205081}.elementor-social-icon-codepen{background-color:#000}.elementor-social-icon-delicious{background-color:#39f}.elementor-social-icon-deviantart{background-color:#05cc47}.elementor-social-icon-digg{background-color:#005be2}.elementor-social-icon-dribbble{background-color:#ea4c89}.elementor-social-icon-elementor{background-color:#d30c5c}.elementor-social-icon-envelope{background-color:#ea4335}.elementor-social-icon-facebook,.elementor-social-icon-facebook-f{background-color:#3b5998}.elementor-social-icon-flickr{background-color:#0063dc}.elementor-social-icon-foursquare{background-color:#2d5be3}.elementor-social-icon-free-code-camp,.elementor-social-icon-freecodecamp{background-color:#006400}.elementor-social-icon-github{background-color:#333}.elementor-social-icon-gitlab{background-color:#e24329}.elementor-social-icon-globe{background-color:#818a91}.elementor-social-icon-google-plus,.elementor-social-icon-google-plus-g{background-color:#dd4b39}.elementor-social-icon-houzz{background-color:#7ac142}.elementor-social-icon-instagram{background-color:#262626}.elementor-social-icon-jsfiddle{background-color:#487aa2}.elementor-social-icon-link{background-color:#818a91}.elementor-social-icon-linkedin,.elementor-social-icon-linkedin-in{background-color:#0077b5}.elementor-social-icon-medium{background-color:#00ab6b}.elementor-social-icon-meetup{background-color:#ec1c40}.elementor-social-icon-mixcloud{background-color:#273a4b}.elementor-social-icon-odnoklassniki{background-color:#f4731c}.elementor-social-icon-pinterest{background-color:#bd081c}.elementor-social-icon-product-hunt{background-color:#da552f}.elementor-social-icon-reddit{background-color:#ff4500}.elementor-social-icon-rss{background-color:#f26522}.elementor-social-icon-shopping-cart{background-color:#4caf50}.elementor-social-icon-skype{background-color:#00aff0}.elementor-social-icon-slideshare{background-color:#0077b5}.elementor-social-icon-snapchat{background-color:#fffc00}.elementor-social-icon-soundcloud{background-color:#f80}.elementor-social-icon-spotify{background-color:#2ebd59}.elementor-social-icon-stack-overflow{background-color:#fe7a15}.elementor-social-icon-steam{background-color:#00adee}.elementor-social-icon-stumbleupon{background-color:#eb4924}.elementor-social-icon-telegram{background-color:#2ca5e0}.elementor-social-icon-thumb-tack{background-color:#1aa1d8}.elementor-social-icon-tripadvisor{background-color:#589442}.elementor-social-icon-tumblr{background-color:#35465c}.elementor-social-icon-twitch{background-color:#6441a5}.elementor-social-icon-twitter{background-color:#1da1f2}.elementor-social-icon-viber{background-color:#665cac}.elementor-social-icon-vimeo{background-color:#1ab7ea}.elementor-social-icon-vk{background-color:#45668e}.elementor-social-icon-weibo{background-color:#dd2430}.elementor-social-icon-weixin{background-color:#31a918}.elementor-social-icon-whatsapp{background-color:#25d366}.elementor-social-icon-wordpress{background-color:#21759b}.elementor-social-icon-xing{background-color:#026466}.elementor-social-icon-yelp{background-color:#af0606}.elementor-social-icon-youtube{background-color:#cd201f}.elementor-social-icon-500px{background-color:#0099e5}.elementor-shape-rounded .elementor-icon.elementor-social-icon{-webkit-border-radius:10%;border-radius:10%}.elementor-shape-circle .elementor-icon.elementor-social-icon{-webkit-border-radius:50%;border-radius:50%}</style> <div class="elementor-social-icons-wrapper elementor-grid"> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-linkedin elementor-repeater-item-5c0ce3c" href="https://www.linkedin.com/company/devx" target="_blank"> <span class="elementor-screen-only">Linkedin</span> <i class="fab fa-linkedin"></i> </a> </span> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-twitter elementor-repeater-item-828f132" href="https://twitter.com/DevX_Com" target="_blank"> <span class="elementor-screen-only">Twitter</span> <i class="fab fa-twitter"></i> </a> </span> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-47707c2" data-id="47707c2" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> </div> </section> <footer class="elementor-section elementor-top-section elementor-element elementor-element-1588a538 elementor-section-height-min-height elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-items-middle" data-id="1588a538" data-element_type="section" data-settings="{"background_background":"classic"}"> <div class="elementor-container elementor-column-gap-no"> <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-9d2a788" data-id="9d2a788" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-2e0ce949" data-id="2e0ce949" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-4a914653 elementor-widget elementor-widget-heading" data-id="4a914653" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <p class="elementor-heading-title elementor-size-default">©2023 Copyright DevX - All Rights Reserved. Registration or use of this site constitutes acceptance of our Terms of Service and Privacy Policy.</p> </div> </div> <div class="elementor-element elementor-element-d2cf216 elementor-widget elementor-widget-text-editor" data-id="d2cf216" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.5.5 - 03-02-2022 */ .elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#818a91;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#818a91;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}</style> <p><strong><a href="https://www.devx.com/sitemap/">Sitemap</a></strong></p> </div> </div> </div> </div> <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-5aef7f0" data-id="5aef7f0" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> </div> </footer> <section class="elementor-section elementor-top-section elementor-element elementor-element-64311df elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="64311df" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1e7467d" data-id="1e7467d" data-element_type="column"> <div class="elementor-widget-wrap"> </div> </div> </div> </section> </footer> <link rel='stylesheet' id='elementor-icons-fa-regular-css' href='https://www.devx.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/regular.min.css?ver=5.15.3' type='text/css' media='all' /> <script type='text/javascript' src='https://www.devx.com/wp-content/themes/devxnew/assets/js/hello-frontend.min.js?ver=1.0.0' id='hello-theme-frontend-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js?ver=1.0.1' id='smartmenus-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-includes/js/imagesloaded.min.js?ver=4.1.4' id='imagesloaded-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.6.2' id='elementor-pro-webpack-runtime-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.5.5' id='elementor-webpack-runtime-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.5.5' id='elementor-frontend-modules-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-includes/js/dist/vendor/regenerator-runtime.min.js?ver=0.13.9' id='regenerator-runtime-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0' id='wp-polyfill-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-includes/js/dist/hooks.min.js?ver=4169d3cf8e8d95a3d6d5' id='wp-hooks-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-includes/js/dist/i18n.min.js?ver=9e794f35a71bb98672ae' id='wp-i18n-js'></script> <script type='text/javascript' id='wp-i18n-js-after'> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); </script> <script type='text/javascript' id='elementor-pro-frontend-js-before'> var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/www.devx.com\/wp-admin\/admin-ajax.php","nonce":"ed341e4e52","urls":{"assets":"https:\/\/www.devx.com\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/www.devx.com\/wp-json\/"},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"}},"facebook_sdk":{"lang":"en_US","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/www.devx.com\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}}; </script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.6.2' id='elementor-pro-frontend-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js?ver=4.0.2' id='elementor-waypoints-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.2' id='jquery-ui-core-js'></script> <script type='text/javascript' id='elementor-frontend-js-before'> var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Extra","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Extra","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}}},"version":"3.5.5","is_static":false,"experimentalFeatures":{"e_dom_optimization":true,"e_optimized_assets_loading":true,"e_optimized_css_loading":true,"a11y_improvements":true,"e_import_export":true,"additional_custom_breakpoints":true,"e_hidden_wordpress_widgets":true,"theme_builder_v2":true,"hello-theme-header-footer":true,"landing-pages":true,"elements-color-picker":true,"favorite-widgets":true,"admin-top-bar":true,"page-transitions":true,"form-submissions":true,"e_scroll_snap":true},"urls":{"assets":"https:\/\/www.devx.com\/wp-content\/plugins\/elementor\/assets\/"},"settings":{"page":[],"editorPreferences":[]},"kit":{"body_background_background":"classic","active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description","hello_header_logo_type":"logo","hello_header_menu_layout":"horizontal","hello_footer_logo_type":"logo"},"post":{"id":10987,"title":"Roll%20Your%20Own%20Swing-based%20XML%20Editor%20%28Part%20I%29%20-%20DevX","excerpt":"","featuredImage":"https:\/\/www.devx.com\/wp-content\/uploads\/2022\/02\/thumbnail.jpg"}}; </script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.5.5' id='elementor-frontend-js'></script> <script type='text/javascript' src='https://www.devx.com/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=3.6.2' id='pro-elements-handlers-js'></script> </body> </html> <!-- Dynamic page generated in 0.764 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2023-02-08 21:20:26 --> <!-- Compression = gzip -->