5.3 实战：用Cordova制作一个简单的应用
前面几节介绍了使用Cordova获取设备信息的方法，可是仅仅通过一个简单的例子显然是无法直接应用到真实开发中的。因此本节就来做一个复习，利用已经学过的知识来实现一个查看设备信息的简单应用。
本次的任务非常明确，就是要实现一个简单的页面，在屏幕偏下方的位置有一个按键，当用户按下它时将会在屏幕的上半部分显示出设备的信息，同时要保证应用的流畅性和美观。
5.3.1 界面设计及实现
由于这款应用功能非常单一，而且只有一个页面，因此页面中的样式利用自定义的CSS来实现，既不会太麻烦也能够保证应用运行的高效性。为了保证良好的交互性，应用要对用户的操作做出简单的反馈，如点击按钮时按钮会变色、显示设备信息前会有一段动画作为缓冲等。
范例5-2是该项目使用的基本界面。
【范例5-2】应用界面的基本实现。
01 <! DOCTYPE html>
02 <html>
03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04 <head>
05 <script src="cordova.js" type="text/javascript" charset="utf-8"></script>
06 <script type="text/javascript" charset="utf-8">
07 </script>
08 <style>
09 /*CSS中利用*表示所有样式，将页面内的全部边距清零*/
10 *
11 {
12 margin:0;
13 padding:0;
14 }
15 /*使用CSS3的渐变效果设置背景颜色*/
16 body
17 {
18 height:600px;
19 background:-webkit-linear-gradient(yellow, orange, red, green, blue, purple);
20 }
21 /*重写h2标签的字体颜色*/
22 h2{ color:#fff; margin:5px; }
23 /*利用绝对定位为按钮提供可靠的位置*/
24 .button_rec
25 {
26 width:100%;
27 height:80px;
28 bottom:50px;
29 position:absolute;
30 }
31 /*设置按钮的大小和位置*/
32 .button_main
33 {
34 width:100%;
35 height:80px;
36 position:relative;
37 }
38 /*按钮的样式*/
39 .button
40 {
41 width:70%;
42 height:80px; margin-left:15%;
43 background:-webkit-radial-gradient(white, yellow);
44 border:9px solid #F00;
45 border-radius:25px;
46 -webkit-border-radius:25px;
47 font-weight:900;
48 font-size:32px;
49 line-height:80px;
50 text-align:center;
51 }
52 /*使按钮在被点击时改变为红色，使应用具有更强的交互性*/
53 .button:active
54 {
55 background:#f00;
56 }
57 </style>
58 </head>
59 <body>
60 <h2>点击屏幕下方的按钮，系统将会自动获取设备信息。</h2>
61 <div class="button_rec">
62 <div class="button_main">
63 <div class="button">
64 获取设备信息
65 </div>
66 </div>
67 <div>
68 </body>
69 </html>
编译之后，运行结果如图5-3所示。虽然看上去比较有山寨感，也许很难与美观这个词联系到一起，但是它已经具备了一个完整的应用界面所需要的各种要素。
图5-3 实现后的应用界面
上述代码最先实现的是背景，由于本例非常简单，因此可以直接为body加入background属性。不过在这之前先要做一点小小的准备来清除浏览器默认的一些设置，如范例第10~14行所示。这是由于浏览器默认会带有一些样式（如元素的外边距），这就导致了页面的四周可能会有一段的空白，因此要坚决取消。
在body标签中有一个height属性要特别注意，由于在WebKit内核的浏览器中使用渐变背景色与理论百分比设置的长款无法完美地兼容，因此就只能设置一个大概的高度。虽然说设备的屏幕高度是无法预期的，但是可以设置一个比屏幕高度要大一些的高度，这样就能够保证不影响屏幕的效果（在本例中紫色的部分就由于超出了屏幕范围而没有显示，并不影响整体效果）。
提示
实际开发中也可以根据经常出现的分辨率来分别编写几组CSS，然后通过获取设备屏幕的尺寸来选择使用哪一组。
范例第39~51行是按钮的CSS样式，它首先使用了CSS 3中的圆角属性，然后又为圆角加入了一个边框，保证按钮的颜色能够与周围的背景色有一个明显的区分。
为了增强用户点击按钮的交互性，在范例的第53行又为按钮加入了一个伪类，使按钮在被用户点击后改变颜色，这样用户能够清楚地感觉到应用做出了回应。图5-4为按钮被点击时的样子。
图5-4 当按钮被点击时变为红色
提示
在实际开发时还可以为按钮加入一些图片或阴影效果。
5.3.2 为应用加入功能
以上已经实现了利用HTML 5与CSS 3来完成应用的界面，本小节将为该界面加入获取设备信息的功能。许多读者一定会认为本小节是在画蛇添足，因为他们会认为只要把范例5-2中的代码复制到界面中就可以了，实际上却并不是这样，这是为什么呢？请看范例5-3中的代码。
【范例5-3】为应用加入功能。
01 <! DOCTYPE html>
02 <html>
03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04 <head>
05 <script src="cordova.js" type="text/javascript" charset="utf-8"></script>
06 <script type="text/javascript" charset="utf-8">
07 </script>
08 <script type="text/javascript" charset="utf-8">
09 //定义一个标志位，若值为0表示设备未完成加载
10 var isready=0;
11 //设置触发器函数onDeviceReady()
12 document.addEventListener("deviceready", onDeviceReady, false);
13 // Cordova加载完毕，现在可以安全地调用Cordova方法
14 function onDeviceReady() {
15 // 现在可以安全使用Cordova API
16 //标志位表明设备已经准备好了
17 isready=1;
18 }
19 function get_info()
20 {
21 if(isready==1)
22 {
23 //获取页面中id为deviceProperties的元素
24 var element = document.getElementById('deviceProperties');
25 //将获取的设备信息写入到页面元素中
26 element.innerHTML = ’设备名称：' + device.name + '<br />' +
27 'Cordova版本：' + device.cordova + '<br />' +
28 ’操作系统：' + device.platform + '<br />' +
29 ’设备编号：' + device.uuid + '<br />' +
30 ’操作系统版本：' + device.version + '<br />';
31 }
32 }
33 </script>
34 <style>
35 /*CSS中利用*表示所有样式，将页面内的全部边距清零*/
36 *
37 {
38 margin:0;
39 padding:0;
40 }
41 /*使用CSS3的渐变效果设置背景颜色*/
42 body
43 {
44 height:600px;
45 background:-webkit-linear-gradient(yellow, orange, red, green, blue, purple);
46 }
47 /*重写h2标签的字体颜色*/
48 h2{ color:#fff; margin:5px; }
49 /*利用绝对定位为按钮提供可靠的位置*/
50 .button_rec
51 {
52 width:100%;
53 height:80px;
54 bottom:50px;
55 position:absolute;
56 }
57 /*设置按钮的大小和位置*/
58 .button_main
59 {
60 width:100%;
61 height:80px;
62 position:relative;
63 }
64 /*按钮的样式*/
65 .button
66 {
67 width:70%;
68 height:80px; margin-left:15%;
69 background:-webkit-radial-gradient(white, yellow);
70 border:9px solid #F00;
71 border-radius:25px;
72 -webkit-border-radius:25px;
73 font-weight:900;
74 font-size:32px;
75 line-height:80px;
76 text-align:center;
77 }
78 /*使按钮在被点击时改变为红色，使应用具有更强的交互性*/
79 .button:active
80 {
81 background:#f00;
82 }
83 </style>
84 </head>
85 <body>
86 <h2 id="deviceProperties">点击屏幕下方的按钮，系统将会自动获取设备信息。</h2>
87 <div class="button_rec">
88 <div class="button_main">
89 <div class="button" onclick="get_info(); ">
90 获取设备信息
91 </div>
92 </div>
93 <div>
94 </body>
95 </html>
编译并运行之后，按下按钮获取设备信息后的结果如图5-5所示。
图5-5 应用运行后的效果
观察范例的第89行，此处为按钮加入了一个onclick事件，当它被点击时会运行第19行处的get_info()函数。由于这样并不能知道系统是否已经加载好了设备，因此必须在页面刚刚被载入时加入一个标志变量（如第10行）。
在代码第14行，由于设备已经完成了加载，因此可以在函数中为标志变量赋值，如第17行所示。这样，如果设备没有完成加载，点击按钮就是无效的了。
在实际开发中，也许还要考虑到用户在设备加载完成前就点击了按钮长时间等待后不耐烦的情况，这时就可以再加入一个新的函数，利用一个计时器函数不断地读取标志变量的值，同时在屏幕上方输出“请用户等待”的信息。当读取到isready变量值为1时，再执行将设备信息显示出来的操作。
提示
在实际开发尤其是商业级别的开发中，常常需要考虑到一些非常极端的情况。
至此，一个简单的设备信息查看APP就算是完成了，读者如果有兴趣也可以在接下来的学习中继续完善，为它加入更多的特效或功能。