Design and implementation of Java-based interface layout DSL

Interface design should be a creative, fun-filled job, but it's often considered tedious and tedious. The reason is that there is a great semantic gap between the description concept used in the field of interface layout and the specific implementation language. and the General Interface development tool provides the WYSIWYG and the interface layout manager, and other solutions can not solve this problem well.

In this article, we'll give you a better solution, we are not going to try to demote the design concepts and styles in the minds of the interface designers to the low-level concepts that are understood by the implementing language that they are using, or to provide a set of layout styles that have been completed, identified but difficult to expand and change, for use by interface designers. What we offer is a language specifically designed to describe the design style of a high-level interface. In this language, interface designers can directly and explicitly describe the layout design patterns in their minds, through which interface designers can easily and flexibly develop the layout styles they need. In addition, the design ideas given in this paper also have a good reference for other fields.

Creative, or boring?

Interface design is a very creative, even artistic work, a concise, easy-to-use, beautiful interface in the user's convenience, but also to the interface designers bring great sense of achievement. However, in reality, this does not seem to be the case, many people think that the interface is a very cumbersome, mechanical, boring work, and do everything possible to evade the interface related work. What is this for?

The reason is simple, because the interface actually involves two tasks, one is the interface of some design ideas, including the layout of the interface and user interaction style, this work is full of challenges and fun. However, these design ideas are ultimately to implement the implementation, this is the second task. At this point, the clear, complete design concepts in your mind begin to become trivial, and you have to deal with low-level coordinates. To make the worst of it, when you finally get a good interface, but find that some of the elements of the layout need some adjustment, this you should think is a very simple change is caused by a large number of repeated low-level coordinate position changes, you will certainly think that the interface is how mechanical and boring ah!

In fact, the root cause of this understanding is that there is a big gap between the creative interface design and the language that implements these creative concepts. In this way, in concrete implementations, you have to demote these clear, complete layout styles into trivial, meaningless low-level coordinate values, so that the implementation of language can be understood. Not only is this work tedious, but the eventual implementation is also very fragile-a very simple change in the layout style can result in dramatic changes in the implementation dimension. For example: we can say that a group of elements at the same time reduced by 10%, the interface of the friends must know what this change means.

To deal with this fault, nearly all of the development tools involved in interface production now provide the same solution: visual interface design tools and layout managers. But neither of these approaches fundamentally solves the problem.

Visual interface design tools do avoid a lot of cumbersome interface element placement work, but for the professional interface design, the interface designed by drag and drop to improve the accuracy and standardization, in addition to the more important point, that is the presence of the designer in the mind of the layout style is still not clearly described, Instead, they are degraded into fragmented components that are placed together, although the components themselves are visible. The existence of this semantic fault also makes the interface designed by visual interface design tools very fragile.

The layout manager tries to solve this problem by providing some common layout styles. However, this approach is very rigid, which means that you can only use existing layout managers, and if they do not meet your requirements, you can not customize them yourself. In addition, these layout managers are only suitable for some simple situations. For some complex layout styles, their ability to describe is very inadequate. Those who have struggled with gridbaglayout must have a deep understanding of this.

In this article, we'll give you a better solution, we are not going to try to demote the design concepts and styles in the minds of the interface designers to the low-level concepts that are understood by the implementing language that they are using, or to provide a set of layout styles that have been completed, identified but difficult to expand and change, for use by interface designers. What we offer is a language specifically designed to describe the design style of a high-level interface. In this language, interface designers can directly and explicitly describe the layout design styles in their minds, through which the interface designer can easily and flexibly develop the layout styles that they need. That is to say, the abstract layout style that exists only in the mind of the designer of the interface is now becoming descriptive and programmable.

Introduction to Interface Layout language

Before learning the design of the interface layout language, it is helpful to understand the use of the language first. Our interface layout language is very simple, simple to only one atom: Component. Component is a basic layout element that allows Component to be translated and scaled to match a given layout space Rectangle. For example, for button this Component, it has the appearance of the traditional button, but the actual space in the layout is decided by the Rectangle for its designation. In addition, Component must have a physical Container to eventually be displayed on the interface. That is, as long as a Rectangle and a Container are given, a Component can be displayed in the layout position specified on the interface.

For example, when we use the layout language to display a button with a width of 200,height 60 on a JFrame coordinate position (0,0), we can describe this (for brevity, the Layout namespace prefix is omitted from the following code instance):

button (). Title ("Button1"). at (0,0,200,60). (This.getcontentpane ());

The results of its execution are shown in the following illustration:

Figure 1. Component sample