Design a tool for checking the control layout

Source: Internet
Author: User

I took a task a few days ago and wrote a test tool to check whether the controls on a form are correctly aligned. This requirement is really vague:
1) The first step is how to define "correctly alignment". I am afraid I have no clear rules.
2) Second, the Form Controls are arranged in a strange way. I'm afraid it will make people feel overwhelmed.
3) consider the productCodeThere are hundreds of forms in it. At that time, we need to debug all these forms. Each problem has to be determined whether it is a product design issue or a problem with your testing tool, or a rule exception ...... we are somewhat discouraged.

At first, I tried to enumerate all the visible controls on the form, and then for each of the two controls, I determined whether they should be aligned or how they should be aligned. Later, it was found that this was not very practical, mainly because it was difficult to find clear answers to "determine whether or not they should be aligned and how they should be aligned for each two controls.

For example, when three controls are arranged as follows, should 2 and 3 be aligned?
1) if they are all Textbox, we usually make them aligned.
2) But what if they are labels? Examples of indentation in 3 and 2 are everywhere.

For example, when the label is on the textbox, the left and right alignment seem to be understandable.

Fortunately, after communicating with Dev and PM in time, we found that they were doing similar work. Obviously, PM's suggestions in this regard are more practical, to find some clear definitions of "alignment", such:
Rule 1): "When a label is located on top of a Textbox, the left boundary alignment of the labels should be 3pixels, and the vertical direction should be 3pixels ".
Rule 2): "When a textbox and a button are in a row, their text baseline should be aligned"
......

And so on.

==========================================

With specific rules, everything becomes simple. Although there are many rules, it is clear that you only need to consider adjacent controls for checking alignment. So the first step is to traverse all the controls and then generate a query table for their joining relationship. In this way, you can easily find your neighbors when checking a control:

In this example, the left neighbor of ListBox is label5, the right neighbor is textbox1, label3 and textbox2, And the right neighbor of label5 is label1, listbox1, label4 and textbox3.

The next step is to traverse the space according to the rule, for example, when encountering a label, it is to judge whether it belongs to rule 1 (label1-4), if yes, then apply Rule 1.

Of course there is still a problem here, that is, the expansion of rules. The original idea was to abstract rules into some models that can be expressed in XML, and then write some general engines to read these rules. However, the time was too short to find a suitable solution, so I had to use a lot of IF... else. Fortunately, there are still not many rules.

==========================================

There are often many similar tasks, goals, or methods that are not very specific at work. In this case, it is the first step to clarify the requirements. Although it is a technical activity, all technologies ultimately serve the needs.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.