Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to realize the new visual UI feature of HTML5 mobile application development". In daily operation, I believe many people have doubts about how to realize the new visual UI feature of HTML5 mobile application development. The editor has consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt of "how to realize the new visual UI feature of HTML5 mobile application development". Next, please follow the editor to study!

precondition

Here, you will use the latest Web technology to develop Web applications. Most of the code here is just HTML,JavaScript and CSS-the core technology of all Web publishers. The most important tool required is the browser used for testing. Most of the code here will run on the latest desktop browsers, but there are some exceptions that we will explain in this article. Of course, you must also test it on a mobile browser, so you need the latest iPhone and Android SDK.

Realize the graphic effect through Canvas

For years, Web developers have been repeating the canvas. Now, why would anyone repeat a native drawing API in a browser? Then, it allows you to create some kind of graphical interface, otherwise you will need some kind of browser plug-in (the reason every Web developer complains about Canvas is that although it has been available for Firefox and Safari for many years now, the most popular desktop browsing and even earlier versions of Internet Explorer 9 do not support Canvas. As a result, Canvas has been the biggest technical joke for years. You may find that these amazing Canvas samples have multiple layers of the entire Internet, but you can't use Internet Explorer as most other Web applications just because it doesn't support it. Fortunately, for mobile Web developers, Canvas does not have such limitations. All Webkit-based browsers you target can implement Canvas and greatly optimize their performance.

Canvas API is a low-level drawing API that supports creating lines, curves, rectangles and circles and filling them with colors, gradients, etc. On Canvas, you can create text and perform a variety of geometric transformations. As you can imagine, the use of such API is unlimited. Let's look at an application that uses Canvas to create a graphical report. Figure 1 shows a screenshot of the application: a bar chart showing the annual results.

Figure 1. Canvas-based reporting application that runs on Android browsers

Screenshot of a Canvas-based reporting application running on an Android browser

Figure 1 does not show a still image in the browser. The report graph is generated in real time using this Canvas API. Listing 1 shows the HTML that created this report.

Listing 1. Report HTML

XML / HTML code copies content to text

< html >

< meta http-equiv = " Content-Type"内容= " text / html; charset = UTF-8" >

< meta name = " viewport" content ="宽度=设备宽度； 初始比例= 1 .0; 最大比例= 1 .0; 用户可缩放= 0 ;" />

< meta name = " apple-touch-fullscreen"内容= " YES" />

< title >

HTML 5 report

Function init () {

Var data = [{year: "2007", sales:49}

{year: "2008", sales:131}

{year: "2009", sales:294}

{year: "2010", sales:405}]]

Var report = {x: "year"

Y: "sales"

Value: data}

Chart (report,350300)

}

< canvas id = " graph" >

This listing shows the basic HTML structure. The body of this document has a single canvas tag. In the init function (called when the document body is loaded), the static data (report data) that you define is passed to the graphics function. The report is defined here as static data, but it's easy to think of it as dynamically downloading over the network using Ajax. The report function contains all the interesting code. Let's take a look at listing 2.

Listing 2. Graph function

The JavaScript code copies the content to

Function graph (report, maxWidth,maxHeight) {

Var data = report.values

Var canvas = document.getElementById ("graph")

Var axisBuffer = 20

Canvas.height = maxHeight + 100

Canvas.width = maxWidth

Var ctx = canvas.getContext ("2d")

Var width = 50

Var buffer = 20

Var I = 0

Var x = buffer + axisBuffer

Ctx.font = "bold 12px sans-serif"

Ctx.textAlign = "start"

For (I = 0; I H2 {

Color: yellow

Background:-webkit-gradient (linear, top left, bottom left)

From (blue) to (white)

}

Tr:nth-child (4N + 1) {Color: Navy;}

Tr:nth-child (4N + 2) {Color: green;}

Tr:nth-child (4N + 3) {Color: maroon;}

Tr:nth-child (4N + 4) {Color: purple;}

Enter [type = "text"] {

Background: rgba (150, 30, 30, 30 and 0.5)

}

< h2 >

The World of CSS3

< div >

What kind of CSS3 does your browser support?

< table id = " dtable" >

< div id = " formSection" >

What's your name?

< button id = " rtBtn" onclick = " rotate（）" >

Rotation

The code in listing 3 replaces all the UI above the title "Gettysburg Address". You will see the code for the lower half of this page later.

You should first check the page title. If you look at the body of the HTML page near the bottom of listing 3, you will see that the title is actually in a header tag-a new HTML element in HTML 5.

Now look at the style element (above the HTML body in listing 3). The style of this text uses the CSS setting with the selector header > H2. This rule sets the text color to yellow and its background to blue and white. Background applications have gradients. This is the first example you have seen of the CSS feature with a prefix of-webkit. You may make an error, pointing to a browser that makes this CSS dedicated to Webkit. However, in many cases, these situations are part of the CSS 3.0 standard, but they themselves are still changing slightly in this standard. In many cases, both Webkit browsers and Mozilla Firefox-based browsers have implemented these features. If your development also needs to target Mozilla browsers (Fennec, the mobile version of Firefox, which is rapidly becoming popular on Nokia smartphones in Europe), you can usually gradually change-webkit to-moz.

As shown in figure 2, when you display the contents of the table, the colors of the adjacent rows are different. This task is accomplished using the next CSS section, the tr:nth-child declaration. You can use the nth-child declaration on any repeating element. You pass a formula that uses a predicate to check whether it is a valid element rule. In this example, you declare that the lines with the form line number 4N + 1 (1, 5, 9, etc.) are navy blue, the lines with the form line number 4N + 2 (2, 6, 10, and so on) are green, and so on. In the past, you often needed to achieve similar visual effects on tables, lists, and other components, but usually through tedious JavaScript.

The final visual element is a red text branch with a label and text button rotation. The red of this text field is implemented using a type-specific input selector. In other words, this is a CSS rule that applies only to input elements of type text. Now, you might want to know what Rotate Button is for. Just look at the code in listing 4, which calls a function called rotate.

Listing 4. Use the JavaScript rotation function of CSS

The JavaScript code copies the content to

Function rotate () {

("formSection") .style ["- webkit-transform"] = "rotateZ (- 5deg)"

("formSection") .style ["- webkit-transition"] =

"- webkit-transform 2s easy input and output"

$("rtBtn") InnerHTML = "undo"

("rtBtn") .onclick = function () {

$("formSection") .style ["- webkit-transform"] = "

$("rtBtn") InnerHTML = "rotation"

$("rtBtn") SetAttribute ("onclick", "rotate ()")

}

}

This rotation function uses JavaScript to change the CSS applied to the div called formSection. Note: you are using an alias for document.getElementById () for $(). To rotate the div, set its-webkit-transform style to rotateZ (- 5deg) and rotate it 5 degrees counterclockwise. Then, set the-webkit-transform style to-webkit-transform 2s easy-in-out. This takes two seconds to spin, start slowly, accelerate, and then slow down again at the end. In figure 3, what's your name shown on the left? The initial position before parallel rotation; the visual effect of the rotated branch and its undo button are displayed on the right.

Figure 3. Rotate the HTML element

To rotate a screenshot of a HTML element on a mobile device

See Resources for a link to see how this effect actually works on HTML 5-compliant browsers such as Chrome,Safari 4 and Opera.

Now let's go to the bottom half of the page in figure 2. Here you see several interesting images, text effects, and layout examples. Listing 5 shows the code.

Listing 5. The bottom half of the code in figure 2

XML / HTML code copies content to text

< html >

H3 {

-webkit-text-fill-color: blue

-webkit-text-stroke-color: yellow

-webkit-text-stroke-width:1.5px

Background:-webkit-gradient (radial,430 50. 0430, 50. 200 from (red).

To (# 000))

-below webkit-box-reflect:5px-webkit-gradient (linear, top left, left

Bottom, from (transparent), color code (0.5, transparent) to (white)

}

H4 {

Color: rgba (0re0pcm255pr 0.75)

Background: rgba (255. 255. 255. 0. 0. 5)

}

.xyz {

Text shadow: # 6374AB 4px-4px 2px

Blank: nowrap

Width: 14em

Height: 2em

Overflows: hidin

Text overflow: ellipsis

Border: 1px solid line # bbb

Border-radius:9px

Background color: # fff

}

.abc {

Border: 1px solid line # 000

Border-radius:9px

-webkit-column-count:4

-webkit-column-rule:1px solid#a00

-webkit-column-gap:0.75em

}

< h3 >

Gettysburg address

< h4 >

Abraham Lincoln, Gettysburg, Pennsylvania. November 19, 1863

< div class = " xyz" >

The four-point system and seven years ago, our father proposed in this regard

The continent is a free gestation and is committed to

The idea that everyone is equal to creation.

< div class = " abc" >

Now we're in the middle of a civil war, testing whether

The nation, or any country that is so nostalgic and so dedicated

Endure. We met on the great battlefield of that war. We do.

To dedicate part of the field as a final rest.

The man who gave his life here, that country may

Life. It is entirely appropriate and appropriate for us to do so.

Let's look at the elements in this code one by one. First, a title was created for the Gettysburg address and styled in several ways.

Use the-webkit-text-fill-color,-webkit-text-stroke-color and-webkit-text-stroke-width styles to create a bluish-in-yellow effect.

Place a red and black background behind the text by setting the background style-webkit-gradient. Note that this is a radial arrangement, which causes you to see a linear gradient. Both work well on smartphones.

Apply a reflection to the title by setting the-webkit-box-reflect style. Set this style to reflect the title at 5 positions below the title, and the reverse reflection applies a gradient effect. The effect here makes the reflection seem to be fading out. If you look back at figure 2, you will see that the Android browser does not support this combination of applying a gradient to the reflection: it simply renders the reflection without any sort.

Move on to the next title and apply a very simple style to it: one color of the text and another color of the background. Both colors use the rgba function to specify a "red-green-blue" value, as well as an alpha luminance value. A value of 1.0 is completely opaque and a value of 0.0 is transparent.

The next section in listing 5 is the first paragraph of the passage here. There is a boundary around the text, and you use the new border-radius style to achieve four rounded corners. Now, you can see such rounded corners everywhere on the site, and they are usually implemented using images. This method is too old-fashioned compared to using CSS 3.0for naming. Apply a shadow to a text of this text by using the text-shadow style. Finally, the area of attention is limited by the height and width of the parent div, and the text is too large. Instead of intercepting text directly as seen in some older browsers, you can see the effect of an ellipsis (...) by setting the text-overflow style.

Finally, come to the last part of the text. It also has a boundary around it, but notice that it appears in four columns with column delimiters. Variable, set the-webkit-column-count style, and set the matching-webkit-column-rule style to get these delimiters. You can imagine how cumbersome formatted text like this would be without these new CSS 3.0 features! This can also be a useful feature when you create simple headers and footer, which are also new elements in HTML 5. Take a look at them and some other new tags dated by HTML 5.

New semantics

HTML 5 adds many new elements to the HTML tag. Some of these elements will cause the boot browser to provide some new rendering processing. Other elements will add additional features that can be made available later through JavaScript. However, other elements do not have anything to do with, and

It looks the same and has the same programming interface. However, they will add additional semantic meaning. These new semantics are aimed at non-visual users of the page (these new tags also provide developers with links to help them write more expressive CSS selectors. Figure 4 shows the importance of computer programs including users using assistive technologies such as screen readers) and search engine crawlers. A web page that uses some new semantic elements.

Figure 4. Some new HTML 5 elements on iPhone

New HTML 5 element title, navigation, article, section, and side screenshots on iPhone

The example in figure 4 has a header element, several nav elements, an article element, a section element, and a side element. These elements do not cause any special rendering. They just add semantic values, and you can use them to write the code for the picture shown in figure 4, as shown in listing 6.

Listing 6. New semantic elements in HTML 5

XML / HTML code copies content to text

< html >

< meta http-equiv = " Content-Type"内容= " text / html; charset = UTF-8" >

< meta name = " viewport" content ="宽度=设备宽度； 初始比例= 1 .0; 最大比例= 1 .0; 用户可缩放= 0 ;" />

< meta name = " apple-touch-fullscreen"内容= " YES" />

< title >

Get the latest markup

< hgroup align = "中心" >

< h2 >

The actual document has a title

< h3 >

Even if they don't say so.

< hgroup >

< nav style = " -webkit-column-count：3; -webkit-column-rule：1px solid＃a00;" >

CSS3

< BR />

Canvas

< BR />

Marking

< h2 >

There are many new markup elements in HTML5

Sunday, May 16th

Have you noticed that we only have two H1?

But this is cool!

< aside style = "空白：nowrap;溢出：隐藏;文本溢出：省略号;" >

If this page is really popular, I will put an advertisement here and make some

A lot of cash

Notice that you also applied some new CSS styles to create a rounded box around the header and several delimiters for the nav. You also used a text overflow style next to it. The key point here is that without extra work, you can create more overlapping tags, and then you can display the tags as you did with and. To see an example of a new HTML 5 element with more visual and programming effects, take a look at figure 5. (see the text version of figure 5.) )

Figure 5. Forms created with HTML 5 on iPhone

Screenshots of several forms created using HTML 5 form elements on iPhone

The screen in figure 5 uses many of the new form elements available in HTML 5. In many cases, these elements look like existing elements, but you can expect browsers to add a better visual representation of these richer form elements. To show the general effect, figure 6 shows the effect of the above form elements in the Opera desktop browser. (see the text version of figure 6. )

Figure 6. HTML 5 form elements for Opera

Screenshots of several forms created using HTML 5 form elements on Opera

Opera has always been a pioneer in implementing HTML 5 features, especially for new form elements. Now, take a look at the code that generated listings 4 and 5 to better understand why Opera is rendered in its way. Listing 7 shows this code.

Listing 7. HTML 5 form elements in code form

XML/HTML Code copies content to the clipboard

Settings

Username

Name

Email

Phone

Date of birth

< fieldset style = "边框：点距1px＃000；边框半径：6px" >

Preferred contact information

< ol >

E-mail

Telephone

Preferred external temperature

< BR />

< label for = " color" >

Favorite color

< BR />

Where did you learn about us?

< datalist id = " urls" >

< BR />

< button type = " button" onclick = " checkInputs（）" >

Save

The form elements in listing 7 show many of the new features of HTML 5. Note two new attributes: need and autofocus. During the process of requiring attributes for form validation (described in more detail below), the autofocus attribute allows you to select elements on the page to get focus. Also notice several elements that have placeholder text. This is a pattern that many Web sites have been using for years-placing a sample or explanatory text in a text tag-but developers always have to hack the code. Figure 4 shows how iPhone neatly implements this pattern.

Next, you'll see some new types that support input elements, such as email, phone, date, range, color, and url. Now, these types are always rendered as text fragments in iPhone and Android browsers, but that only shows what they might look like in the future using figure 5. Date input must gain focus before displaying its new UI (a plug-in calendar) on Opera. The same applies to the url input in figure 7, but not because it is a url input or because it is a list attribute. This attribute points to the datalist element, which contains the corresponding supported value. When you focus on the segment, you will see the possible values from datalist (several URL in this case). Figure 7 shows the date and data list features.

Figure 7. HTML 5 input with date and data list

Screenshot of HTML 5 input with date and data list

As Webkit continues to grow rapidly, it can be expected that many input types will allow for more useful visual representations. Opera will bring you a better future. Many of these inputs also provide validation, and HTML 5 has a complete new validation API. These features are not currently implemented on iPhone or Android-based devices, but are already implemented on their desktop peers, so they are expected to be implemented on mobile browsers soon. Listing 8 shows the use of these new validation API.

Listing 8. HTML 5 verifies the application of API

The JavaScript code copies the content to

Function checkInputs () {

Var input = document.getElementById ("input") .childNodes

Var len = inputs.length

Var I = 0

Var input = null

Var errors = []

Is (I = 0; I)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.