2012-04-10 53 views
1

我使用PhoneGap的開發移動Web應用程序,並可能在以後轉移到其他的平臺上,如Android等的PhoneGap的FileWriter

我希望能夠寫入本地文件的設備上。但是, ,無論我做什麼,都行不通。沒有適當的文件來支持這些問題。

如果有人可以幫忙,我將不勝感激。

這裏是我的html文件:

<!DOCTYPE html> 
<html> 
    <head> 
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />--> 
    <meta name="viewport" content="width=device-width,initial-scale=1"/> 
    <link rel="stylesheet" href="jquery/jquery.mobile-1.0.1.min.css"/> 
    <script src="jquery/jquery-1.6.4.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="styles.css"/> 
    <script src="jquery/jquery.mobile-1.0.1.min.js"></script> 
    <title>Hello World</title> 

    <!-- iPad/iPhone specific css below, add after your main css > 
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> 
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />-->   

    <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here --> 
    <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script> 
    <script type="text/javascript" charset="utf-8" src="NativeControls.js"></script> 
    <script type="text/javascript" charset="utf-8" src="js/main.js"></script> 
    </head> 
    <body onload="onBodyLoad()"> 
     <div data-role="page" id="mainpage"> 
      <div data-role="header"> 
       <h1>LOGIN</h1> 
      </div> 
      <div data-role="content"> 
      <img src="images/cslogosmall2.png" style="margin-top: -10px; margin-left: -5px;"/> 
      <form id="login" method="post"> 
       <p> 
       <ul data-role="listview" data-theme="g" id="contentlist"> 
        <b>Program:</b> 
        <input type="text" id="program"/> 
        <b>Username:</b> 
        <input type="text" id="username"/> 
        <b>Password:</b> 
        <input type="password" id="password"/> 
       </ul> 
       </p> 
       <br/> 
       <button type="submit" data-theme="a" id="submit" value="Submit"></button> 
       <a href="offline.html" onclick="test();">Offline</a> 
      </form> 
      </div> 
      <!--<div data-role="footer"> 
       <h1> Main Page Footer </h1> 
      </div>--> 
     </div> 
     <div data-role="page" id="contentpage"> 
      <div data-role="header"> 
       <h1> Content Page </h1> 

      </div> 
      <div data-role="content"> 
       <a href="#" data-role="button" onclick="history.go(-1);return false;" onClick=buttonDemo()> Back to Main Page </a> 
       <a href="#" data-role="button" id="beepbtn" onClick=beepbeep()> Beep!</a> 
      </div> 
      <div data-role="footer"> 
       <h1> Content Page Footer </h1> 
      </div> 
     </div>  
    </body> 
</html> 

這裏是我的JavaScript文件:

function validate() { 

    navigator.notification.alert("validate called"); 
    var program = document.getElementById('program'); 
    var username = document.getElementById('username'); 
    var password = document.getElementById('password'); 

    if (!program || program == "") { 
     navigator.notification.alert("Please enter a program"); 
     return false; 
    } 
    else if (!username || username == "") { 
     navigator.notification.alert("Please enter a username"); 
     return false; 
    } 
    else if (!password || password == "") { 
     navigator.notification.alert("Please enter a password"); 
     return false; 
    } 
    return true; 
} 

function beepbeep() { 
    //navigator.notification.alert("Beep function called"); 
    navigator.notification.beep(); 
} 


$(document).ready(function() { 

    $('#submit').click(function() { 
     var program = document.getElementById('program').value; 
     var username = document.getElementById('username').value; 
     var password = document.getElementById('password').value; 

     if (!program || program == "") { 
      alert("Please enter a program", null, "ClearSpider", "OK"); 
      return false; 
     } 
     else if (!username || username == "") { 
      alert("Please enter a username", null, "ClearSpider", "OK"); 
      return false; 
     } 
     else if (!password || password == "") { 
      alert("Please enter a password", null, "ClearSpider", "OK"); 
      return false; 
     } 
     return true; 
    }); 

    document.addEventListener("deviceready", onDeviceReady, false); 
    window.addEventListener("resize", orientationChange, false); 

}); 

function test() { 

    console.log("fail"); 
    var fs = FileWriter.write(LocalFileSystem.PERSISTENT, 0, gotFS, fail); 
    alert(LocalFileSystem.PERSISTENT); 
    alert("Test called"); 
} 

function onTabBarItem(id) 
{ 
    alert("hello"); 
    //jQT.goTo("#" + id, "slide"); 
    // if you need to modify the tabbar items that are shown, you should do 
    // so here. 
} 

function fail(error) { 
    console.log(error.code); 
} 

function gotFS(fileSystem) { 
    alert("at gotFS"); 
    fileSystem.root.getFile("readme.txt", {create: true}, gotFileEntry, fail); 
} 

function gotFileEntry(fileEntry) { 
    alert("at gotFileEntry"); 
    fileEntry.createWriter(gotFileWriter, fail); 
} 

function gotFileWriter(writer) { 
    alert("at gotFileWriter"); 
    writer.onwrite = function(evt) { 
     console.log("write success"); 
    }; 
    writer.write("some sample text"); 
    // contents of file now 'some sample text' 
    writer.truncate(11); 
    // contents of file now 'some sample' 
    writer.seek(4); 
    // contents of file still 'some sample' but file pointer is after the 'e' in 'some' 
    writer.write(" different text"); 
    // contents of file now 'some different text' 
} 


/* When this function is called, Cordova has been initialized and is ready to roll */ 
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch. 
see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html 
for more details -jm */ 
function onDeviceReady() { 
    // Initializating TabBar 

    //window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail); 
    navigator.notification.alert("hi kaan", null, "hey", "SWEET"); 
    Cordova.exec("NativeControls.createTabBar"); 
    //var options = "top"; 
    var options = "bottom"; 

    navigator.notification.alert(window.requestFileSystem); 

    window.onorientationchange = function() { 
     var orientation = window.orientation; 

     switch(orientation) { 
      case 0: 

       Cordova.exec("NativeControls.showTabBar", options); 
       Cordova.exec("NativeControls.showToolBar"); 


       /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events" */ 
       document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom)."; 
       break; 

      case 90: 

       Cordova.exec("NativeControls.showTabBar", options); 
       Cordova.exec("NativeControls.showToolBar"); 

       document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right)."; 
       break; 

      case -90: 

       Cordova.exec("NativeControls.showTabBar", options); 
       Cordova.exec("NativeControls.showToolBar"); 

       document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left)."; 
       break; 

      default: 

       Cordova.exec("NativeControls.showTabBar", options); 
       Cordova.exec("NativeControls.showToolBar"); 

       document.getElementById("currentOrientation").innerHTML="Now the orientation must be -180. default: case: "; 
       break;   
     }//end switch 
    }//end window.orientationchange 

    //var taboptions = {"onSelect":onTabBarItemSelect}; 
    var moreNum = 1; 

    Cordova.exec("NativeControls.showTabBar", options); 

    var onSelect = {"onSelect":onTabBarItem}; 
    //onSelect = "hahaha"; 

    Cordova.exec("NativeControls.createTabBarItem", "test", "test", "tabButton:Recents", onSelect); 
    Cordova.exec("NativeControls.createTabBarItem", "test2", "test2", "tabButton:Search", onSelect); 
    Cordova.exec("NaviteControls.createTabBarItem", "test3", null, "tabButton:More", onSelect); 

    Cordova.exec("NativeControls.showTabBarItems", "test", "test2", "test3"); 
    Cordova.exec("NativeControls.selectTabBarItem", "test"); 

    //Cordova.exec("NativeControls.tabBarItemSelected", "1"); 

    /*nativeControls = window.plugins.nativeControls; 
    navigator.notification.alert(nativeControls); 
    nativeControls.createTabBar(); 

    // Books tab 
    nativeControls.createTabBarItem(
    "books", 
    "Books", 
    "tabButton:Recents", 
    "", 
    {"onSelect": function() { 
     books(); 
    }} 
); 

    // Stats tab 
    nativeControls.createTabBarItem(
    "finished", 
    "Finished", 
    "tabButton:Recents", 
    "", 
    {"onSelect": function() { 
     finished(); 
    }} 
); 

    // About tab 
    nativeControls.createTabBarItem(
    "about", 
    "About", 
    "tabButton:Recents", 
    "", 
    {"onSelect": function() { 
     about(); 
    }} 
); 

    // Compile the TabBar 
    nativeControls.showTabBar(); 
    nativeControls.showTabBarItems("books", "finished", "about"); 
    nativeControls.selectTabBarItem("books");*/ 
} 


function orientationChange() { 
    var nativeControls = window.plugins.nativeControls; 
    nativeControls.resizeTabBar(); 
} 

function books() { 


} 

function about() { 

} 

function finished(){ 

} 

請注意,此行不起作用: navigator.notification.alert(window.requestFileSystem);不顯示警報。

+0

有可能的,因爲在它上面的Cordova.exec問題的警報不顯示。在添加插件之前,嘗試使用文件API http://docs.phonegap.com/en/1.5.0/phonegap_file_file.md.html#File獲取基本的文件系統應用程序。 – 2012-04-10 21:30:51

+0

謝謝保羅,但那沒有奏效。我將代碼更改爲:navigator.notification.alert(「hi kaan」,null,「hey」,「SWEET」); navigator.notification.alert(window.requestFileSystem); Cordova.exec(「NativeControls.createTabBar」); 仍然沒有運氣。 – c0d3Junk13 2012-04-11 13:13:47

+0

所以我也嘗試提醒導航器對象本身並沒有得到警報。但是當我警告navigator.toString()的工作。當我嘗試navigator.LocalFileSystem.toString(),也不起作用。我不確定LocalFileSystem對象在其他導航器對象初始化時沒有被初始化。有任何想法嗎? – c0d3Junk13 2012-04-11 13:30:37

回答

0

昨天當我成功地看到警報時,我正在使用1.4.1。當我切換到1.5.0時,警報輸出爲空。這是因爲在cordova-1.5.0中添加了require命名空間。

然而,即使在1.5.0中,API sample仍然爲我的作品:

function gotFS(fileSystem) { 
    navigator.notification.alert(window.requestFileSystem); 
    myFS = fileSystem; 
    console.log(fileSystem.name); 
    console.log(fileSystem.root.name); 
    $('#file-system-text').html("File System: <strong>" + fileSystem.name + "</strong> " + 
      "Root: <strong>" + fileSystem.root.name + "</strong>"); 
    fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, createGotFileEntry, writeFail); 
} 
function createFile() { // button onclick function 
    if (myFS) { 
     gotFS(myFS); 
    } else { 
     navigator.notification.alert(window.requestFileSystem); 
     window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, failFS); 

    } 
} 
+0

謝謝保羅!你也可以發佈你的文檔onload函數嗎?所以我可以看到一切都創建在哪裏,如 – c0d3Junk13 2012-04-11 21:30:17

+0

Btw,科爾多瓦1.6.0今天剛剛發佈。於是我轉而嘗試了一遍,再次測試一下。我想也許我設置了一些錯誤,因爲即使window.requestFileSystem類型函數不起作用。我會發布結果。 – c0d3Junk13 2012-04-11 21:31:20

+0

完整的應用程序位於http://code.google.com/a/eclipselabs.org/p/mobile-web-development-with-phonegap/source/browse/tags/r1.2/com.mds.apg/ resources/phonegap/Sample /文件API的實現位於http://code.google.com/a/eclipselabs.org/p/mobile-web-development-with-phonegap/source/browse/tags/r1.2/ com.mds.apg/resources/phonegap/Sample/apis/file.js – 2012-04-11 22:17:42