Introduction to Layout class components

The deviceone platform contains 2 basic layout components, do_ALayout and a do_Linearlayout . The so-called layout component is the IDE design interface, you can drag and drop other components into this layout component as part of this layout component.

Note: Do_scrollview is also a layout, you can drag the other components inside, but it is more special, it has only one child node. We don't discuss it for the time being.

Do_alayout components

This is the most basic of the most commonly used layout components, here ALayout is AbsoluteLayout the abbreviation, which represents the absolute layout. Absolute layout is very simple to use, the layout of all components inside it is absolute coordinate values, but this coordinate value is relative alayout, not relative to the entire screen.
For example, the x, Y coordinates of the button are 100, which is relative to the upper-left corner of the alayout of the button.

The API for this component can be referenced here. We highlight several important features:

1. do_alayout can set the background picture, this function is more common, is to set the Bgimage property.

2. do_alayout Support touch , touchDown , touchUp event, here's a trick to add a do_imageview on do_alayout , if you add a click event on Imageview, The user finger must point in the picture to activate, but if the event is added to the ImageView alayout, then the clickable area is very large, the user experience will be much better.
   For example, the above touch event is added to the Iamgeview, the finger will be very difficult. Sample code Download reference here
   

3. Properties isStretch and layoutAlign , these two attributes are important, involving a way to screen fit, to solve the distortion problem caused by different screen width to height ratio of the phone. Refer here for more detailed instructions

4. addMethods, bothdo_alayout and do_linearlayout have this method, and the principle is the same. addThis method is also very important, and this method can be dynamically added UI in the app run. The application scenario is that some UI can be reused, such as the header of all pages in an app is similar, can be add added dynamically, and then update the data. The bigger advantage is that you can write the logic code in the UI corresponding to this UI in the add JS file. You can reduce the coupling of your code.
   Refer to this example for the main code such as:

varNF = SM ("Do_notification");varpage = SM ("Do_page");varLayout = UI ("Alayout_1");//Add the Header.ui root node (which is a alayout with ID root) to the 0,0 location of the current Index.ui//and re-name it a new unique ID "header_id", which does not duplicate the ID of the UI component that is already in Index.uivarAddedheader = Layout.add ("header_id", "Source://view/header.ui", 0, 0);//Gets the root node object of the Header.ui (which is an ID of root alayout), but we cannot//var header = UI ("root"), to get this object, because the scope of this ID is in Header.ui, not in Index.ui.js//There are 2 kinds of correct wording, the first is:varHeader1 = UI ("header_id");//the second is:varHeader2 =UI (Addedheader);//To determine if the two objects are the same, you can use the GetAddress methodNf.toast (header1.getaddress () = =header2.getaddress ());//Further, we can also get the child nodes below the Header.ui root node, such as StatusBar is the ID of the top component of Header.uivarStatusBar = UI (Addedheader + ". StatusBar"); Statusbar.bgcolor= "FF0000FF";//We do not recommend the direct acquisition of Header.ui sub-objects in Index.ui, which does not conform to the principle of reduced coupling//Index.ui cannot directly invoke functions in Header.ui because they are in different JS runtime environments//to achieve the exchange of data between the two, there are two ways//First: Bind by data, setmapping in Header.ui.js, and assign a value to the header by BinddatavarHashdata = mm ("Do_hashdata"); Header1.binddata (Hashdata); Hashdata.adddata ({"Title_value": "I am Home",    "Menu_bg_value": "FF0000FF"}) Header1.refreshdata ();//Second: Through the message mechanism, both the subscription and the trigger message are in the Page object, because Header.ui and Index.ui are under the same pagePage.On ("Click_menu",function(data) {Nf.alert (data);})

Do_linearlayout components

The linearlayout component is called linear layout, meaning that the components inside are arranged in a linear way, and can be arranged up or down. The x, y of all the sub-view inside is meaningless because they are stitched together one after the other.
The API for this component can be referenced here.
We highlight a few important features:

1. LinearLayout rarely sets a fixed height and width, its greatest advantage is the ability to dynamically vary the width and height of the content, the adaptive size, forcing the view to expand to show its full content, that is WRAP_CONTENT . The Do platform has a number of components that support this approach, referencing the documentation.
   Specifically, setting the width or height of the linearlayout to 1 indicates adaptive. Then the true height and width of the linearlayout display is superimposed by all the sub-view inside it.

2. The padding and margin properties, in fact, margin is a common property that all UIs have, but it only works in LinearLayout , so let's mention it here.
   Padding is the inner margin of the linearlayout , margin is a sub-view of the LinearLayout and the distance of the neighboring components, such as:
   

3. The Add method, thelinearlayout principle is exactly the same as the do_alayout , except that the parameter x, Y is changed to an ID value that adds to the back or bottom of an existing component.
   Refer to this example
   

Introduction to Layout class components