2015年1月10日 星期六

Phonegap Helloworld for Android

Ref: http://www.moke.tw/wordpress/computer/advanced/438
        http://inspire.twgg.org/programming/html-css/item/389-html5-started-teaching.html
Ref1: Phonegap, Ref2: HTML5
1. Prepare HTML5 File (index.html,  the name of file has to be lower case letters)
<!DOCTYPE html>
<html>
      <head>
              <meta charset="UTF-8">
              <title>Example document</title>
       </head>
     <body>
              <header>
                    <h1><a href="#">Welcome to my page</a></h1>
               </header>
           <nav>
                       <ul>
                                <li><a href="#">Home</a></li>
                             <li><a href="#">About</a></li>
                            <li><a href="#">Contact</a></li>
                  </ul>
               </nav>
              <section>
                   <article>
                           <header>
                                    <h3><a href="#">Article 1</a></h3>
                                </header>
                           <section>
                                   <p>Lorem ipsum...</p>
                         </section>
                  </article>
                  <article>
                           <header>
                                    <h3><a href="#">Article 2</a></h3>
                                </header>
                           <section>
                                   <p>Lorem ipsum...</p>
                         </section>
                  </article>
          </section>
          <aside>
                     <h1><a href="#">Aside content</a></h1>
                    Lorem ipsum dolor sit amet..
              </aside>
            <footer>
                    <address>
                           Contact us at:<br />
                                <a href="http://itc.hwu.edu.tw/">itc.hwu.edu.tw</a>
                   </address>
          </footer>
   </body>
</html>
2. Prepare Config.xml
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
xmlns:gap   = "http://phonegap.com/ns/1.0"
id    = "tw.moke.testing"
versionCode = "10"
version     = "0.2.0" >

<name>HelloWorld</name>

<description>
專案描述
</description>

<author href="http://itc.hwu.edu.tw" email="092012@mail.hwu.edu.tw">
csjou
</author>

<!-- current version of PhoneGap -->
<preference name="phonegap-version" value="3.5.0" />
<!-- 設定畫面固定為水平(landscape)、垂直(portrait) -->
<preference name="orientation" value="landscape" />
<!-- 加入其它plugin設定 -->
</widget>
3. Zip both of them into a file say Helloworld.zip
4. Upload into Phonegap Builder
5. Select App platform.
6. Scan QR code (Download apk and install)


沒有留言:

張貼留言