[android]抽籤程式V0.0.7版本原始程式碼

Google play程式: https://play.google.com/store/apps/details?id=com.yslifes.sample.ballot

這裡先簡單的交待程式碼開發的環境及source

程式是由Apache Cordova建立的,如何安裝可以參考Commaond line install的方式,Apahce Cordova其實就是phonegap,phonegap一開始是adobe創建的,不過後來捐給了apache基金會。

此專案有安裝之plugin

org.apache.cordova.devicemotion.AccelListener   用來監控搖動行動裝置的(Android手機或平版)

org.apache.cordova.splashscreen.SplashScreen 一開始的載入畫面SplashScreen

org.apache.cordova.inappbrowser.InAppBrowser 用來另開連接到系統預設的browser的,不過目前沒有使用

com.phonegap.plugins.barcodescanner.BarcodeScanner 條碼QRCode掃描,使用zxing framework

使用的javascript framework

JQueryJQuery Mobilehtmll10njquery.tmp

其中htmll10n是為了多國語系的支援

Screenshot_2014-10-07-13-10-41




Screenshot_2014-10-07-13-10-07

Screenshot_2014-10-07-13-11-00

原始碼如下:

index.html部份

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <script type="text/javascript" src="js/l10n.js"></script>
  <link rel="localizations" href="values/strings.json" type="application/l10n+json"/>
  <link href="js/jquery.mobile-1.4.4.min.css" rel="stylesheet" type="text/css" />
 
  <!-- Export CSS  -->
  <style>
    div.ui-field-contain{
      font-size:140%;
    }
    div.ui-field-contain input{
      font-size:140%;
    }
    body
    {
      font-family: 'Open Sans', sans-serif;
    }
  </style>
  <script src="js/jquery-1.9.1.min.js"></script>
  <script>
    $(document).on("mobileinit", function () {
      $.mobile.autoInitializePage = false;
      $.mobile.hashListeningEnabled = false;
      
    });

    function mobileInitPage() {
      $.mobile.hashListeningEnabled = true;
      $.mobile.initializePage();
	  
    };
	
  </script>
  <script src="js/jquery.mobile-1.4.4.min.js"></script>
  <!-- Uncomment the following to include cordova in your android project -->
  <!--<script src="//jqmdesigner.appspot.com/platforms/android/cordova.js"></script>-->
  <script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
  <script type="text/x-jquery-tmpl" id="myTempl">
    <tr><th>${time}</th><td>${seq}</td><td> ${val} </td></tr>
  </script>
    <script type="text/x-jquery-tmpl" id="NameListTempl">
    <tr><th>${seq}</th><td>${name}</td></tr>
  </script>
  <script type="text/javascript" src="cordova.js"></script>

  <script type="text/javascript" src="js/index.js"></script>

  <script type="text/javascript">
  $(document).ready(function() {        

		window.location.hash = 'home';
		$.mobile.initializePage();
		app.initialize();
		handleExternalURLs();
     
		
	});
            
  </script>

  <title>yslifes Ballot</title>
</head>

<body>
  <!-- Page: home  -->
  <div id="home" data-role="page">
  <div data-role="header" data-position="fixed">

  <a href="#NameList" data-transition="slidedown" class="ui-btn ui-btn-left  ui-shadow  ui-icon-arrow-d ui-btn-icon-left" data-l10n-id="str_list">清單</a>
    <h3 data-l10n-id="str_Setting">設定</h3>
    <a class="ui-btn ui-btn-right ui-icon-arrow-r ui-btn-icon-right ui-shadow" href="#RandPage" data-transition="slide" ><span data-l10n-id="str_start">開始</span></a>
  </div>
  <div role="main" class="ui-content">
    <div class="ui-field-contain">
      <label for="max_val" data-l10n-id="str_maxValue">最大值:</label>
      <input type="number" name="max_val" id="max_val" pattern="[0-9.]*" placeholder="{str_maxValue}" value="10" data-clear-btn="false" data-mini="true" data-clear-btn-text="清除" data-prevent-focus-zoom="false">
    </div>
    <div class="ui-field-contain">
      <label for="min_val" data-l10n-id="str_minValue">最小值:</label>
      <input type="number" name="min_val" id="min_val" pattern="[0-9.]*" placeholder="{str_minValue}" value="1" data-clear-btn="false" data-mini="true" data-clear-btn-text="清除" data-prevent-focus-zoom="false" >
    </div>
    <div class="ui-field-contain">
      <label for="get_val"  data-l10n-id="str_getNum">一次取得數:</label>
      <input type="number" name="get_val" id="get_val" pattern="[0-9.]*" placeholder="{str_getNum}" value="1" data-clear-btn="false" data-mini="true" data-clear-btn-text="清除" data-prevent-focus-zoom="false">
    </div>
    <div class="ui-grid-a" style="height:95px">
      <div class="ui-block-a" style="height:100%">
        <div class="ui-field-contain">
          <label for="append_val" data-l10n-id="str_loop">連續取得</label>
          <input type="checkbox" data-role="flipswitch" id="append_val" data-mini="true" name="append_val">
        </div>
      </div>
      <div class="ui-block-b" style="height:100%">
        <div class="ui-field-contain">
          <label for="loop_same" data-l10n-id="str_append">是否可重覆</label>
          <input type="checkbox" data-role="flipswitch" id="loop_same" data-mini="true" name="loop_same"  checked>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="RandPage" data-role="page" is="page">
  <div data-role="header" data-position="fixed">
    <h3 data-l10n-id="str_result" >結果</h3>
    <a class="ui-btn ui-btn-left ui-btn-icon-left ui-icon-arrow-l" href="#home" data-transition="slide" data-direction="reverse" data-l10n-id="str_reverse">上層</a>
  </div>
  <div role="main" class="ui-content" is="content">
    <table data-role="table" data-mode="Reflow" class="ui-responsive ui-shadow gk-decorate table-stripe table-stroke" id="gk-923egj1" is="jqm-table">
      <thead>
        <tr>
          <th data-priority="1" style="width:30%" data-l10n-id="str_idx" >取號次</th>
          <th data-priority="1" style="width:30%" data-l10n-id="str_seq" >序號</th>
          <th data-l10n-id="str_result" >結果</th>
        </tr>
      </thead>
      <tbody>
        
      </tbody>
    </table>
  </div>
  <div data-position="fixed" data-role="footer">
    <div data-role="navbar">
      <ul>
        <li id="clr_value_bt">
          <button type="button" data-icon="delete" data-l10n-id="str_reault_clear" >清除結果</button>
        </li>
        <li id="get_value_bt">
          <button type="button" data-icon="info" data-l10n-id="str_get" >取號</button>
        </li>
      </ul>
    </div>
  </div>
</div>
    
    <div id="NameList" data-role="page" is="page">
  <div data-role="header" data-position="fixed">
    <h3 data-l10n-id="str_Inventory_list" >清單列表</h3>
    <a class="ui-btn ui-btn-left ui-btn-icon-left ui-icon-arrow-l" href="#home" data-transition="slide" data-direction="reverse" data-l10n-id="str_reverse">上層</a>
  </div>
  <div role="main" class="ui-content" is="content">
      <ul><li data-l10n-id="str_qrcode_url">http://ppt.cc/CK~z 建立QRCode</li>
      <li data-l10n-id="str_row_of_data">一列為一筆資料</li></ul>
    <table data-role="table" data-mode="Reflow" class="ui-responsive ui-shadow gk-decorate table-stroke table-stripe" id="gk-107ouJq" is="jqm-table">
      <thead>
        <tr>
          <th data-priority="1" data-l10n-id="str_item_idx">項次</th>
          <th data-priority="1" data-l10n-id="str_item_name">名稱</th>
        </tr>
      </thead>
      <tbody>
        
      </tbody>
    </table>
  </div>
  <div data-position="fixed" data-role="footer">
    <div data-role="navbar">
      <ul>
        <li id="qrcode">
          <button type="button" data-icon="camera" data-l10n-id="str_scan_qrcode">掃描條碼</button>
        </li>
          <li id="clrName_value_bt">
          <button type="button" data-icon="delete" data-l10n-id="str_clear_list">清除清單</button>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>

</html>

 

index.js

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */



var language = document.cookie.match(/language=((\w{2,3})(-\w+)?)/);
if(language) language = language[1];
html10n.bind('indexed', function() {
  html10n.localize([language, navigator.language, navigator.userLanguage, 'en'])
  //html10n.localize('en');
})
html10n.bind('localized', function() {
  document.documentElement.lang = html10n.getLanguage()
  document.documentElement.dir = html10n.getDirection()
  // Then I display the index page using handlebars to render a template.
});


var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        
    	navigator.splashscreen.hide();
    	
    }
};


//http開頭的url另開bo
function handleExternalURLs() {
	
	$("a.openbrowser").on("click",function(e){
		//console.log($(this).prop('href'));
		 var url = $(this).prop('href');
         navigator.app.loadUrl(url, { openExternal: true });
         e.preventDefault();
	});
	/*
    // Handle click events for all external URLs
    if (device.platform.toUpperCase() === 'ANDROID') {
        $(document).on('click', 'a[href^="http"]', function (e) {
            var url = $(this).attr('href');
            navigator.app.loadUrl(url, { openExternal: true });
            e.preventDefault();
        });
    }
    else if (device.platform.toUpperCase() === 'IOS') {
        $(document).on('click', 'a[href^="http"]', function (e) {
            var url = $(this).attr('href');
            window.open(url, '_system');
            e.preventDefault();
        });
    }
    else {
        // Leave standard behaviour
    }*/
}

function getRandomInt(max,min ) {
	//console.log(min);
	//console.log(max);
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
  var time = 0;

  function clearRandData() {
    time = 0;
    $("#gk-923egj1 tbody").empty();
  }
  function onShake() {
	  console.log("shake it");
	  $("#get_value_bt").click();
  };
  $(document).on("pageshow", "#home", function () {
	  if(typeof(shake)!="undefined")
		  shake.stopWatch();
  });
  $(document).on("pageshow", "#RandPage", function () {
    clearRandData();
    
    if(typeof(shake)!="undefined")
    	shake.startWatch(onShake);
   
    
  });
var NameList = new Array();
    //清單列表第一次init
$(document).one("pageshow","#NameList",function(){
    $("#qrcode").on("click",function(){
		   	cordova.plugins.barcodeScanner.scan(
			      function (result) {
			    	 // console.log("QRCode Result Data:");
			    	 // console.log(result);
                      
				      if(result.cancelled!=true)
				      {
				    	  
				    	  //if(result.text.indexOf("\n")>-1){
                              $("#gk-107ouJq tbody").empty();
					    	  NameList = result.text.split("\n");
                              var val_arr = new Array(NameList.length);
					    	  for(var i =0;i<NameList.length;i++)
                              {
                                  var o = new Object();
                                  o.seq = i+1;
                                  o.name = NameList[i];
                                  val_arr[i] = o;
                              }
                               $("#NameListTempl").tmpl(val_arr).prependTo($("#gk-107ouJq tbody"));
                                $("#max_val").val(NameList.length);
                                $("#min_val").val(1);
                          alert(_('clear_first_msg'));
				    	  //}else
				    		  //alert("條碼內容錯誤!");
				      }
			      },function(error){
			    	  
			      });
	 });
    
    $("#clrName_value_bt").on("click", function (e) {
      $("#gk-107ouJq tbody").empty();
        NameList.length = 0;
    });
});


  $(document).one("pageshow", "#RandPage", function () {
   
	
	  
    $("#clr_value_bt").on("click", function (e) {
      clearRandData();
    });
    $("#get_value_bt").on("click", function (e) {
      if ($("#append_val").prop("checked")) {
        clearRandData();
      }
		
      var max_val = NameList.length==0?parseInt($("#max_val").val(), 10):NameList.length;

      var min_val = NameList.length==0?parseInt($("#min_val").val(), 10):1;

      var get_val = parseInt($("#get_val").val(), 10);
		var loop_same =  $("#loop_same").prop("checked");
		
		var tmp;
		if(min_val>max_val)
		{
			tmp = max_val;
			max_val = min_val;
			min_val = tmp;
		}
		if(!loop_same && (max_val-min_val)<get_val)
		{
			alert(_("less_number_msg"));
			return;
		}
		
		
      time++;
      var val_arr = new Array(get_val);
		var exist_text = "";
      for (var i = 0; i < get_val; i++) {

        //console.log(val);
		  var val = getRandomInt(max_val, min_val);
		  if(loop_same || (!loop_same && exist_text.indexOf(val+",")==-1))
		  {
			  var obj = new Object();
			  obj.val = NameList.length==0?val:(val+","+NameList[val-1]);
			  if(i==0)
				obj.time = time;
			  else
				obj.time = "";
			  obj.seq = i + 1;
			  val_arr[i] = obj;
			  exist_text = val+",";
		  }
		  else//重新取號
			i--;
      }
		//console.log(val_arr);
      $("#myTempl").tmpl(val_arr).prependTo($("#gk-923egj1 tbody"));
    });

  });

 

strings.json

 

{
"en": {
  "clear_first_msg": "Unless you clear the list, otherwise the result will take a number so dominated the list!",
  "less_number_msg": "To obtain the number of not greater than the number of desirable!",
    "str_list":"List",
    "str_start":"Go",
"str_maxValue":"value of max:",
"str_minValue":"value of min:",
"str_getNum":"Get the number of:",
"str_loop":"Continue loop",
"str_append":"Repeat?",
"str_result":"Result",
"str_reverse":"Return",
"str_idx":"Index",
"str_seq":"Seq",

"str_reault_clear":"Result Clear",
"str_get":"Get It!",
"str_Inventory_list":"Inventory list",

"str_qrcode_url":"http://goo.gl/BqfwZU Create QRCode",
"str_row_of_data":"one data at one row",
"str_item_idx":"Item",
"str_item_name":"Name",
"str_scan_qrcode":"Qrcode Scan",
"str_clear_list":"Clear List",
    "str_Setting":"Setting"
},
"zh-TW": {
  "clear_first_msg": "除非您清除清單,否則取號結果會依此清單為主!",
  "less_number_msg": "要取得數目不可大於可取數目",
    "str_list":"清單",
    "str_start":"開始",
"str_maxValue":"最大值:",
"str_minValue":"最小值:",
"str_getNum":"一次取得數:",
"str_loop":"連續取得",
"str_append":"是否可重覆",
"str_result":"結果",
"str_reverse":"上層",
"str_idx":"取號次",
"str_seq":"序號",

"str_reault_clear":"清除結果",
"str_get":"取號",
"str_Inventory_list":"清單列表",

"str_qrcode_url":"http://ppt.cc/CK~z 建立QRCode",
"str_row_of_data":"一列為一筆資料",
"str_item_idx":"項次",
"str_item_name":"名稱",
"str_scan_qrcode":"掃描條碼",
"str_clear_list":"清除清單",
    "str_Setting":"設定"
},
"zh-CN": {
  "clear_first_msg": "除非您清除清單,否則取號結果會依此清單為主!",
  "less_number_msg": "要取得數目不可大於可取數目",
    "str_list":"清單",
    "str_start":"開始",
"str_maxValue":"最大值:",
"str_minValue":"最小值:",
"str_getNum":"一次取得數:",
"str_loop":"連續取得",
"str_append":"是否可重覆",
"str_result":"結果",
"str_reverse":"上層",
"str_idx":"取號次",
"str_seq":"序號",

"str_reault_clear":"清除結果",
"str_get":"取號",
"str_Inventory_list":"清單列表",

"str_qrcode_url":"http://ppt.cc/CK~z 建立QRCode",
"str_row_of_data":"一列為一筆資料",
"str_item_idx":"項次",
"str_item_name":"名稱",
"str_scan_qrcode":"掃描條碼",
"str_clear_list":"清除清單",
    "str_Setting":"設定"
},
"zh-HK": {
  "clear_first_msg": "除非您清除清單,否則取號結果會依此清單為主!",
  "less_number_msg": "要取得數目不可大於可取數目",
    "str_list":"清單",
    "str_start":"開始",
"str_maxValue":"最大值:",
"str_minValue":"最小值:",
"str_getNum":"一次取得數:",
"str_loop":"連續取得",
"str_append":"是否可重覆",
"str_result":"結果",
"str_reverse":"上層",
"str_idx":"取號次",
"str_seq":"序號",

"str_reault_clear":"清除結果",
"str_get":"取號",
"str_Inventory_list":"清單列表",

"str_qrcode_url":"http://ppt.cc/CK~z 建立QRCode",
"str_row_of_data":"一列為一筆資料",
"str_item_idx":"項次",
"str_item_name":"名稱",
"str_scan_qrcode":"掃描條碼",
"str_clear_list":"清除清單",
    "str_Setting":"設定"
}
}

原始專案再於下一篇附上

發表迴響