Appcan Development Framework

1, the comparison of UI2.0 and UI1.0In early 2012, we released the Appcan mobile application development platform, in which we built a CSS UI framework based on the Jqmobile solution. This framework can help developers follow a set of rules for fast development applications. The concept of combination is mainly used in this package. For example, a description of a button can be defined by combining multiple CSS classes, or you can learn more by video.
This can produce changeable effects through different combinations. In the actual commercial application development process, it has helped us to accelerate the development progress the function. But in the development process, we still encountered some problems, the Jqmobile CSS Framework on these issues, the performance is relatively weak:
1, 1 automatic fill width
The same edit box in the image above is combined with a refresh button. At different resolutions, if you want the refresh button to maintain a basic width, the edit box automatically fills the remaining areas, without using JS is difficult to do, if the use of a percentage of the width of the refresh button, then there will be a very large deviation between the low resolution and high resolution.
1, 2 class name is too long
In the Jqmobile scenario, each feature class has a long name to help the developer understand the code more intuitively. such as Ui-page Ui-mobile-viewport. This causes the Web page code size to become larger, reducing the resolution speed.
1, 3 types of function split low
In the Jqmobile scenario, many classes are defined with more code repetition, such as a pre-made variety of color schemes. At the same time, because of the low split, it is often necessary to repeatedly define the class to overwrite the attributes in other classes.
1, 4 control combination complex
In the Jqmobile scenario, the control has a large amount of implementation code, and a button requires multiple div span nesting to be implemented with multiple classes. This causes the development, the interface code quantity increases, does not have the control interface.

We synthesize the development experience of each project, organize and summarize the Appcan UI2.0 architecture, it inherits the advantages of UI1.0, and solves the problem of UI1.0 well, can make the development more simple. The UI2.0 frame is as follows: In the above illustration, we can see that the Appcan UI2.0 framework splits the basic attributes of the elements on the basis of the screen adaptation (resolution ADAPTER CLASS). Use the following procedure to set an element.
Positioning-to lay out elements, determine the actual location of the elements, and so on [LAYOUT CLASS]
Strokes-Sets the element's underlying properties, such as border rounded corners [base CLASS]
Tim-Sets the border, text, and background of an element [COLOR CLASS]
Illustrations-If a picture is needed in the element, introduce a picture class from the resource [RES class]

Based on the underlying elements, for the convenience of developers, we have redefined controls, including button, LIST, FOLD, INPUT, TAB, RADIO, CHECK, SWITCH. These controls can be considered a concrete example of the UI2.0 framework. The control, code size, and complexity are significantly reduced by UI2.0, as in the following example:

Keys for UI1.0 Framework implementation

<div class= "ui-btn ui-corner-all ui-shadow ui-btn-b" >
<span class= "Ui-btn-inner ui-corner-all" >
<span class= "Ui-btn-text" > OK </span>
</span>
</div>

Keys for UI2.0 Framework implementation

<div class= "btn btn-act ubb uc-t1 b-bla uinn c-blu2 c-m4" > OK </div>
As you can see from the above code, the same function and effect of the control can be reduced by two-thirds of the code, nesting reduced to one layer, the complexity of the code greatly reduced.
Then we'll explain how to use the UI2.0 framework in detail. 2. The design source of the UI2.0 frame- Elastic box model Elastic box model is a kind of layout mechanism CSS3.0 introduced. This mechanism differs greatly from the common flow layout. The simple understanding is that the flow layout determines the size of the parent container by content, and the elastic box model is an example of a simple flow layout that allocates space for child elements in the parent container of the specified size.
Effects: Code:

<div style= "display:inline;border:1px solid Blue" >
<div style= "Display:inline;background: #E00" >aaaa </div>
<div style= "Display:inline;background: #0E0" >bbbb </div>
</div> The above code is a simple example of streaming layout, the width of the div in line 1th is determined by the addition of the div widths of lines 2nd and 3rd. That is, if the div width of line 2nd or row 3rd changes, the width of line 1th will change as well. Let's tweak the code and use the elastic box model to lay it out.
Effects: Code:

<div style= "display:-webkit-box;width:200px;border:1px solid blue"
<div style= "-WEBKIT-BOX-FLEX:1; Background: #E00 ">aaaa </div>
<div style=" background: #0E0 ">bbbb </div>
</div> In the preceding code, the div that specifies line 1th uses box to lay out child elements. and specify this div to be 200px wide. Line 3rd of the div width from the content of the open, can be considered to be a specified width of the div, through the simulator can see a width of 32px. Line 2nd Specifies that the div is elastic and occupies 1 spaces, representing the width of the div as the total width 200px-32px=168px. If we change the 1th row's div width to 320px, then the 2nd row Div's width is 320px-32px=288px. This mechanism is a sharp weapon for the screen with various resolutions.
Let's tweak the code again.
Effects: Code:

<div style= "display:-webkit-box;width:200px;border:1px solid blue"
<div style= "-WEBKIT-BOX-FLEX:1; Background: #E00 ">aaaa </div>
<div style="-webkit-box-flex:2;background: #0EE ">bbbb </div>
<div style= "background: #0E0" >CCCC </div>
</div> We added a div that occupies 2 spaces. This time the two elastic div in the end how to allocate space. According to the rules, line 2nd should occupy 168px/3=56px, line 3rd occupies 112px, but in fact the width is not so, through the simulator you can see that the 34th row occupies 66px, the 35th line occupies 102px. This is because the engine adjusts automatically when there is content in the resilient Div. So how can you keep the ratio of 1:2 if you have content? Let's adjust the code again.
Effects: Code:

<div style= "display:-webkit-box;width:200px;border:1px solid Blue" >
<div style= "-webkit-box-flex:1;background: #E00;p osition:relative" >
<div style= "position:absolute;width:100%;height:100%;" >AAAA </div>
</div>
<div style= "-webkit-box-flex:2;background: #0EE;p osition:relative" >
<div style= "position:absolute;width:100%;height:100%;" >BBBB </div>
</div>
<div style= "background: #0E0" >CCCC </div>
</div> This amendment, we have the content "AAAA" through a use of absolute positioning Div to include, at this point through the simulator will find that two elastic div in accordance with the ratio of 1:2 automatically allocated space. The above we use the elastic box layout when the elements are horizontally sorted, then how to let the elements of the vertical arrangement. Let's go ahead and tweak the code.
Effects: Code:

<div style= "display:-webkit-box;height:200px;border:1px solid blue;-webkit-box-orient:vertical;" >
<div style= "-webkit-box-flex:1;background: #E00;p osition:relative" >
<div style= "position:absolute;width:100%;height:100%;" &GT;AAAA </div>
</div>
<div style= "-webkit-box-flex:2;background: #0EE;p osition:relative" >
<div style= "position:absolute;width:100%;height:100%;" &GT;BBBB </div>
</div>
<div style= "background: #0E0" &GT;CCCC </div>
</div> in the above code, we specify a height of 200px in the Div on line 1th and use-webkit-box-orient:vertical to control the child elements in a vertical arrangement.
The Elastic box model also provides several other powerful properties.
-webkit-box-direction:reverse;
By setting this property in the parent Div, you can have the child elements in reverse order. The following figure: Use the front child elements in the order of 1 2 3 to display, when this property is used in the parent Div, the automatic handle elements are ordered in reverse. This time, we didn't really rearrange the child elements in 3 2 1 order.
-webkit-box-align:center;
By setting this property in the parent element, when the child elements are arranged horizontally, the effect of upper boundary alignment, centerline alignment, and bottom boundary alignment between child elements can be achieved
If you are arranging vertically, you can align the left bounds of the child elements, the centerline alignment, and the right margin.
-webkit-box-pack:center;
By setting this property in the parent element, when the child elements are arranged horizontally, you can align the left bounds between the child elements, the centerline alignment, and the right border.
If you are arranging vertically, you can achieve the effect of the upper boundary alignment, centerline alignment, and bottom bounds alignment between child elements.
If the parent element contains only one child element, mixing-webkit-box-align and-webkit-box-pack enables the child element to be positioned on the left, center, and right 9 orientations.
The flexible box architecture can be compatible with the flow layout at the same time, that is, when all child elements do not set the number of elastic copies, the parent element can be automatically stretched by the quilt element. The following code
Effects: Code:

<div style= "display:-webkit-box;border:1px solid blue;-webkit-box-orient:vertical;" >
&LT;DIV&GT;AAAA </div>
&LT;DIV&GT;BBBB </div>
&LT;DIV&GT;CCCC </div>
</div>
None of the child elements in the above code uses Box-flex to define the elastohydrodynamic properties, nor does the container div set a height, at which point the container div's height is three child elements and varies with the height of the child elements.
In the Appcan UI2.0 architecture, we have CSS class encapsulation of the situation we encountered above
UB element with elastic box layout
Ub-rev of child elements in reverse order
Ub-con adds a container to the child elements to prevent content from causing the child element size to change.
Corresponding CSS code for position:absolute;width:100%;height:100%;
UB-AC, Ub-ae child elements are centered and aligned vertically
UB-PC, Ub-pe, UB-PJ child elements horizontally centered, footer aligned, and justified
Ub-ver child elements in vertical order
UB-F1 ub-f2 ub-f3 ub-f4 child elements occupied area
Through the above class, we can complete a variety of typesetting layout, greatly reduce the learning difficulty and the complexity of element typesetting, so that the code more concise.3.2UI2.0 Framework Development Guide 3.1 Cornerstone (UI resolution Fit)With every mobile app, UI adaptation is the most important task if you need to keep a consistent effect on many mobile terminals. The UI2.0 framework and the UI1.0 framework remain consistent in this part of the screen adaptation mechanism. The design principle is for the different resolution system, chooses the most close to the human intuitive feeling comfortable a font size as the reference quantity. For example, in the 320x480 resolution of the mobile phone, using a 16px size font as a reference quantity. On the terminal of 480x800 resolution, 24px size font is used as reference quantity. The size of all elements is defined by the relative ratio of the reference quantity. Inside the CSS corresponds to EM. Then in the 320x480 resolution 1EM=16PX, at the 480x800 resolution 1EM=24PX.
In this way, we can guarantee that the same code interface, at different resolutions can maintain the most close to the user's interactive effect.
In UI1.0, we reference ui-media.css in the HTML file to handle the current common resolution adaptation. However, due to the different mobile phone platforms, and a variety of new resolution of the advent of mobile phones, the adaptation of the work put forward higher requirements.
UI2.0, we in the middleware for different screen density (the number of points in the unit size), the default definition of fonts, developers no longer need to introduce UI-MEDIA.CSS files in the code, even if there is a new resolution mobile phone, will automatically fit. At present, the reference Andorid screen density is divided into low density, normal density, high-density, ultra-high density, respectively, defined font for 14px 16px 24px 32px.
3.2 Skeleton (element layout and positioning)On top of the chosen foundation, we need to build the skeleton for our target interface. The skeleton can be divided into trunk and offshoot from the construction.
Trunk
The trunk can be considered as the overall frame layout of the entire page as pictured above is interception and zaker (native development), positive benefit Wireless (HTML5 development), Zaker micro-blogging interface (native development) and HTML5 China (HTML5 development). Refer to the above interface we see most of the application of the page will follow the title + content + Bottom column layout. Appcan UI2.0 provides a simple layout schema template to fit this layout. Demo007 Sample Download
In the template code we can see the default presence of index.html and index_content.html two files. We explain the application development model recommended by Appcan UI2.0 through the analysis of these two files. index.html file is divided into three parts head, body, SCRIPT.
Head section:

<title></title>6
<meta charset= "Utf-8" >
<meta name= "viewport" content= "target-densitydpi=device-dpi, Width=device-width, initial-scale=1, user-scalable= No, minimum-scale=1.0, maximum-scale=1.0 "<
<link rel= "stylesheet" href= "Css/ui-base.css" >
<link rel= "stylesheet" href= "Css/ui-box.css" >
<link rel= "stylesheet" href= "Css/ui-color.css" >
<link rel= "stylesheet" href= "Css/ui-res.css" >
<script src= "Js/zy_control.js" >
</script<
<script src= "Js/zy_click.js" >
</script>
This section defines the CSS and JS files that are referenced by the Web page. The above code UI-BASE.CSS represents the basic class file, Ui-box.css is the Elastic box encapsulation class file, Ui-color is the color base class file. Zy_control.js are some of the default feature support classes that are required by default controls and Web pages. Zy_click.js is the Click event Impersonation class, which replaces the default onclick event (the phone's onclick response is slow and the application experience is poor).
Body part

<body class= "UM-VP c-wh" ontouchstart>
<div id= "Page_0" class= "Up UB Ub-ver" tabindex= "0" >
<!--header started-->
<div id= "header" class= "Uh c-org c-m1 T-WH" >
&LT;H1 class= "ut ulev0 ut-s tx-c" tabindex= "0" >AppCan</div>
<!--header End--> <!--content start-->
<div id= "Content" class= "ub-f1 tx-l t-bla ub-img6 res10" >
</div>
<!--content End--> <!--footer start-->
<div id= "Footer" class= "uf c-m2 c-bla T-WH" >
&LT;H1 class= "ut ulev-2 tx-c" tabindex= "0" > (c) Copyright 3g2win and others 2011.
<br>
All rights reserved. </div>
<!--footer End-->
</div>
</body>
The body section defines a page page_0, the height of the page is the screen height (up), the Elastic Box layout (UB), and its child elements are arranged vertically (ub-ver). This page contains header, content, and footer three areas.
The Header and Footer section is a div that is a fixed-height area (stretched through the content). The content is an elastic area that fills the Page_0 area except header and footer. If the header and footer height change, the content height will change. However, this layout when content area content will cause the entire content of the height of high, because most mobile terminals do not support div internal area scrolling, this time cause the entire page can be dragged, this is inconsistent with our requirements. We deal with this problem through the script region's code.
Script section:

<script>
Zy_init ();
Window.uexonload = function (type) {
if (!type) {
Zy_con ("Content", "index_content.html", 0, $$ ("header"). offsetheight);
}
Window.onorientationchange=window.onresize=function ()
{
Zy_resize ("Content", 0,$$ ("header"). offsetheight);
}
}
</script> the Zy_init function in the above code is used to implement automatic matching of fonts in the simulator. No action on the phone.
The Window.uexonload event is invoked after the Appcan middleware extension object has completed loading. In this function, we call the Zy_con function encapsulated in zy_control.js to create a floating view. This view is the same size as the content area, and the position remains the same as the content area. This view shows the content from the index_content.html page. In other words, the content area of our index.html page does not actually contain contents, it only plays a role in positioning, providing positioning support for floating view.
Window.onorientationchange=window.onresize This line of code specifies a callback function for the screen rotation events for iOS and Andorid platforms, which are called when the screen spins, and we call the encapsulated Zy_ The resize interface repositioned the floating window with the new high width position of the content area.
More conveniently, the developer can develop different content pages for the content area, and can use the Zy_con interface to change the content Area page contents to achieve different functions. For example, you can work with the navigation bar control below to achieve functional switching. Appcan UI2.0 Framework recommended this way to write pages, compared to the UI1.0 framework, the processing logic is simpler, more convenient, and in a window, not only allow a floating window, we can create a number of floating windows to complete different functions, easy to implement the split of the function, Reduce the logic problems that arise from implementing many functions in a single page. At the same time this way can easily achieve a fixed background image. In the above code, we see that we specify a background image for the content area, and we do not specify a background color in index_content.html, so that when the index_content.html page is displayed, the cover is displayed in the content area below. Because a floating window is a stand-alone window, its page scrolling does not affect the content area below. Of course, this layout we use iscroll such as JS package can also be very convenient to achieve, but on many Android phones, because of performance reasons for the experience relative to the original application or there will be a big gap.
Appcan UI2.0 Frame supports the dynamic effect of floating window, the developer can easily realize the dynamic effect, in index_content.html we have provided the example code by default. Then we look at the actual Content area page index_content.html. This page, like Index.html, is also divided into three parts head, body, SCRIPT. The head section is no different from the head part of the index.html. The body part developers can add lists, forms, maps and other functions to meet the requirements. Script part of the code let's take a look at:

<script>
Zy_init ();
Window.uexonload=function (Type)
{
if (!type) {
Uexwindow.setbounce ("1");
Uexwindow.showbounceview ("0", "#FFF", "0");
Uexwindow.showbounceview ("1", "#FFF", "0");
}
}
</script> in the above Code Zy_init () is used in the simulator state to achieve font adaptation, the phone does not function. The Uexonload event defines the callback function after the floating window Appcan extended load. When the load is successful, we call the Appcan dynamic interface to add a bouncing effect to the floating window and set the animated background color. You can use the example application to experience.
offshoot
After the page is finished, we need to lay out the elements in the page. The use of elastic boxes will make this layout work much less difficult. We set a goal, as shown below we can divide him into the following areas. Left fixed-width picture area
Picture Sub-zone
Right text area
Text Body Area
Article Property Area
We do the layout in index_content.html, the code is as follows
Effects: Code:

<div onmousedown= "Zy_touch (' Btn-act") "class=" Ubb UB B-gra t-bla lis ">
<div class= "lis-th ub-img im" >
<div class= "Ub-f1 ub Ub-ver" >
<div class= "Ulev1" >< title name >
<div class= "Ulev-1 umh4 T-gra" > Text description </div>
<div class= "UB ub-ac t-gra Ulev-2" >
<div class= "umh2 umw2 ub-img" style= "Background-image:url" (css/img/icon1.png); " >
<div class= "Ub-f1" > Favorites </div>
<div class= "umh2 umw2 ub-img" style= "Background-image:url" (css/img/icon2.png); " >
<div class= "Ub-f1" > Comments </div>
</div>
</div>
</div>
In the above code, we first define a container, by class= "Ubb UB B-gra T-bla lis", the bottom border of the container is gray (Ubb B-gra), the text color is black (T-BLA), the container is elastic box layout (UB), and the container is a list entry ( LIS) then we built a thumbnail element class= "lis-th ub-img im" in the container, specifying the thumbnail size (lis-th), which defines how thumbnails are displayed (ub-img) and thumbnail image resources (IM). Because the picture area is fixed wide, the text area is elastic, so we construct the container UB-F1 UB Ub-ver for the text area, the container width is elastic (ub-f1), the container also uses the Elastic box layout (UB), the element in the container adopts the portrait layout (ub-ver). We add a title, a text description, to the container separately. Favorites Comment Bar We think it's a container, and the word elements in this container are arranged horizontally. We added two small pictures and two paragraphs of "favorites" and "comments." We have finished the layout of this interface.
This example is just a simple example of a layout application that shows the simplicity of the Appcan UI2.0 when it comes to layout pages.3.3 Skin-landscaping of elementsAfter we have set the layout and position for an element, we then have to beautify the element. A pleasant appearance is an important factor in attracting users. The effect attribute of an element is differentiated into several classes in the Appcan UI2.0 framework, and the element UI is set up by combining these different class attributes.size Position Shape control
▶ Fillet Category: uc-{type}[type] [category]
UC-TL, Uc-tr, UC-BL, UC-BR, Uc-t, Uc-b, Uc-r, Uc-l, Uc-a, Uc-n, Uc-tl1, Uc-tr1, UC-BL1, UC-BR1, Uc-t1, UC-B1, UC-R1, uc- L1, Uc-a1, UC-A2, UC-A3
▶ Shadow Category: US [categories] and us-i [categories]
Us,us1,us-i
▶ Scale Category: ulev[category] (because the control of the element is mainly through the relative control of EM, Ulev can magnify the default ratio)
Ulev2,ulev1,ulev0,ulev-1,ulev-2
▶ Floating Category: Ufl and UFR
▶ Limit Category: Ulim
▶ Single-line Category: Uinl
▶ Margin Category: uinn[category]
Uinn,uinn1,uinn2,uinn3,uinn4
▶ min. High-wide Category: Um{w or h}[category]
Umh1,umh2,umh3,umh4,umh5,umh6,umw1,umw2,umw3
▶ Text Alignment Category: tx-{type}
Tx-l,tx-r,tx-c
▶ Text thumbnail Category: ut-s
▶ Border Category: ub{type}[category]
Ubt,ubb,ubr,ubl,uba,uba1,uba2
▶ Hidden Category: Uhide
▶ Interval Category: umar-{type}
Umar-b
Color Control
The UI2.0 frame divides the color of the elements into border, text, background, and background masking layers.
▶ Background cover Category: c-m{category}
C-m1,c-m2,c-m3,c-m4,c-m5,c-m6,c-m7
▶ Background Ground color category: c-{color}[category]
C-BLU,C-BLU1, C-BLU2, C-BLU3, C-BLU4,C-WH, C-bla,c-gra,c-gra1,c-gra2,c-gre,c-red,c-yel
▶ Text color Category: t-{color}[category]
T-bla,t-wh,t-gra,t-blu
▶ Border color Category: b-{color}[category]
B-bla,b-wh,b-gra,b-gra1,b-blu
Resource Control
UI2.0 Framework Some common picture resources are defined. such as search icons.
▶ Resource Category: res{category}
Res1,res2,res3,res4,res5,res6,res7,res8,res9,res10
The Appcan UI2.0 framework splits up the underlying attributes of an element, customizing the effect of the element through different combinations, and is also a rule that allows developers to extend their own special effects in the corresponding categories based on specific actual situations. Following this rule can improve code reuse and maintenance management efficiencies, and avoid UI adaptation and maintenance issues in team development as a result of a variety of custom category confusion definitions. With controls built with the UI2.0 framework, the amount of code will be greatly reduced. In the next section, we'll take a look at the implementation of the various controls that are commonly used in your application to make you understand UI2.0 's great advantage in UI implementations.4, the control in UI2.0 4.1 buttonThe picture above shows the effect of some buttons, and we look at how the IDE uses the underlying classes to define these buttons. We select index_content.html and add a button in its body area. In the Appcan IDE (UI2.0), we select the winning red button and go to the button making wizard. In the above interface, we can choose to create normal buttons, with icon buttons and special definition buttons such as the iOS effect button. In general, the button fills up the entire container, and you choose Inline to keep the buttons and other controls on the same line without exceeding the width of the container. If the button is in the title or footer, you can choose to live on the left or right. Advanced mode can configure the display of the button. In the above interface, we can configure the button's rounded corners, borders, border color, background color, and background cover to fade. These effects are not just for buttons, but for other controls as well. The effect defined here is just the effect we preset, and if developers need to define their own colors, simply add their own class definitions to the UI-COLOR.CSS and replace the default color classes in the code. Let's add a dark blue button.
Effects: Code:

<!--button begins
<div ontouchstart= "Zy_touch (' btn-act ')" class= "btn uba1 b-bla uinn5 c-blu c-m1 uc-a-T-WH" Determine </div>
<!--button ends;
First use btn to define the div as a button (we define an identity class for the different control types that define some of the properties that are common to such controls). Then use UINN5 to define an inner margin outside the text so that the height of the button is the inner margin + text height. Use the UC-A definition button four rounded corners are 0.6em. Then we use C-blu to specify the background color to be blue. A gradient overlay is added to the blue through the c-m1. Use T-WH to define the text as white.
Finally, we specify that all sides of the border are 2px wide by uba1 and that the border color is black by B-bla. This completes the effect of a button in the state of no click. Relative to the previous UI1.0 a normal button requires a div and two span of nesting to simplify 2/3 of the code, the level is also reduced to a layer. Now we add the click Effect to the button. According to Standard CSS3, only need to use pseudo class: Active to set a class to complete the mouse button to play the effect of the change, but unfortunately, in the Andorid platform, the effect of most mobile phone support are problematic. This attribute is supported for the iOS platform, but if you want to make this pseudo class valid, you must add Ontouchstart to the code to activate the Pseudo class. In order to solve this cross-platform problem, we provide the Zy_touch interface, through which it can complete the click effect Processing.
In this code, we add the ontouchstart= "Zy_touch (' btn-act ')", Zy_touch is an extension function encapsulated in zy_control.js, and Btn-act is our predefined universal control click on the SAG effect class. Through this function, we build a click to listen Class Zyclick (if you use Zy_touch also need to refer to zy_click.js), he will listen to touch screen events, to control the button to increase and remove the Click Effect, but also to determine whether the click Operation, if the success of the decision, Will directly call the parameters in the callback function to achieve the OnClick event effect, you can solve the mobile phone browser onclick insensitive problem. At the same time Zy_touch also supports the direct call to the onclick attribute in the HTML code to achieve the click Effect. We adjust the Code
code:

<!--button starts-->
<div ontouchstart= "Zy_touch (' btn-act ')" onclick= "alert (1)" class= "btn uba1 b-bla uinn5 c-blu c-m1-uc-a t-wh" > OK </div>
<!--button end--> The above code we can see that we registered the onclick function, Zy_touch will directly intercept the onclick event, instead of system calls onclick code, and will not call two times onclick. This kind of writing is more close to the normal application of the developer. In addition, because the current emulator does not support the Ontouchstart event, so the above code Ontouchstart will not be executed, the emulator can not see the click Effect, but the onclick function will be called.
If you want to see the effect on the emulator, you can replace Ontouchstart with onmousedown. Although the phone also supports the OnMouseDown event but his effect is different from the timing and touch events, we still have to replace Ontouchstart when we are running on the phone.
The above button is implemented using Div, and Div is a block by default. So it fills up the entire width. If you need to make the buttons and other controls appear in the peer, we need to add the Uinl class to the alignment.
Effects: Code:

<!--button starts-->
<div ontouchstart= "Zy_touch (' btn-act ')" onclick= "alert (1)" class= "btn uba1 b-bla uinn5 c-blu c-m1-uc-a t-wh uinl" > Ding </div>
<!--button End--> We can see that the width of the button is not the whole line, but the width of the text in the button, the width of the border, the width of the inner margin. It should be noted that UINL and UB have an effect conflict, in the elastic box model, child elements need to be in block mode (Display:block). Just introduced is a simplest button, OK we now add an icon for the button. In the IDE, select the Button Wizard, and in the button type, select the With icon button. Also configured for dark blue.
The effect is as follows: code:

<!--button begins
<div ontouchstart= zy_touch (' btn-act ') "class=" btn uba1 b-bla c-blu c-m1 uc-a UB T-WH UINN5 UB -ac "
<div class=" Ub-f1 ut-s "> OK </div>
<div class=" umh1 umw1 ub-img res1 c-bla uc-a "></ Div>
</div>
<!--button ends the
No icon button, we add text directly to the Div. This time because there are icons we think the button is divided into about two areas, the left text area automatically fit width, the right icon area width fixed. Text and icons are aligned in the centerline. First, we define the external effect of the button class= "btn uba1 b-bla c-blu c-m1 uc-a UB t-wh uinn5 Ub-ac", this is no different from the previous button, the only addition is UB and UB-AC respectively for the child elements using elastic box layout, Centerline alignment of child elements. We set the elastic width (ub-f1) for the text area and indicate that the automatic abbreviation does not wrap (ut-s) when the text exceeds the container width. Finally we have defined a picture, this picture high (UMH1) width (UMW1), uses the UB-IMG to control its scale, the RES1 represents the arrow picture, the C-bla represents the picture area default background color, the uc-a makes it has the rounded angle, because the picture width is small, with rounded angle makes it like a circle. This is a button with an icon defined with the elastic box layout. So how do you make icons on the left? The convenience of the elastic box model is well represented here. We add the Ub-rev class to the container, which sets the child elements in reverse order, and simply implements the icon on the left.

<!--button starts-->
<div ontouchstart= "Zy_touch (' btn-act ')" class= "btn uba1 b-bla c-blu c-m1 uc-a UB t-wh uinn5 Ub-ac" >
<div class= "Ub-f1 ut-s" > OK </div>
<div class= "umh1 umw1 ub-img res1 c-bla uc-a" ></div>
</div>
<!--button End-->
So how do I get the icons up and down? As simple as this, simply add ub-ver to the container and define the vertical ordering of the child elements in the container.

<!--button starts-->
<div ontouchstart= "Zy_touch (' btn-act ')" class= "btn uba1 b-bla c-blu c-m1 uc-a UB t-wh uinn5 Ub-ac" >
<div class= "Ub-f1 ut-s" > OK </div>
<div class= "umh1 umw1 ub-img res1 c-bla uc-a" ></div>
</div>
<!--button End-->
The above example can be seen in fact a button is a container plus some child elements for the elastic box layout, and then add some control and display effects for the container and child elements. Other controls are the same way, but they only show a slightly different effect on customization.
4.2 Container in UI2.0 we think that all controls are actually container blocks with child containers and child element combinations. Therefore, the container is one of our most basic components. In application development, you often need to combine several buttons, check boxes, or other controls into one group for display. In this case a container satisfying the effect will be essential. We'll explain how to use Appcan to build a container and arrange the elements in the way we want to open the Appcan IDE (UI2.0), we choose the red button to enter the Container Production wizard.