鲍勃の部屋
  • Blog
  • Work
  • About
  • Contact

和鲍勃一起来学Bootstrap - 第2课

6/20/2014

0 Comments

 
这课来学习 bootstrap 的Hello world

步骤一:去官网 下载 bootstrap 的编译版本 bootstrap-3.03-dist.zip 并解压

在 $YOUR_PATH/dis/css/下就是编译好的 bootstraps.css , bootstrap-theme.css
 $YOUR_PATH/dis/js/ 下是预编译好的 bootstrap.js

可以合来直接使用啦

下面就用一个模板来开始我们的hello world之旅 
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, Bootstrap!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
  </body>
</html>

Read More
0 Comments

和鲍勃一起来学Bootstrap第1课

6/19/2014

0 Comments

 
Picture
简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单。



在开始继续学习之前,先搞明白为什么学习bootstrap ,或者说

Bootstrap深受广大屌丝喜爱的原因到底是什么呢?

1.节省时间

利用Bootstrap,你将有更多的时间用来挣钱。Bootstrap库中包含很多现成的代码片段,这些代码可为你的网站增加更多活力。Web开发者不必再花费时间、费力地编码,只需找到合适的代码,插入到合适位置即可。此外,CSS利用LESS编写,很多样式和设计都已设计完成。


Read More
0 Comments

和鲍勃一起来学Node.js--第13课

6/19/2014

0 Comments

 
书接上回。

我们已经实现了上传图片,那么能不能直接在浏览器中显示我们上传的图片呢?

答案是:能!

在requestHandler.js 里的 upload() 函数中增加一个图像就行了
response.write('<img src="/show_upload" />');
如你所想,接下来要增加一个新的路由,使得show_upload读取最新上传的图片内容,并返回
function show_upload(response, request){
    console.log("show_upload: "+pic_full_name);
    fs.readFile(pic_full_name, "binary", function(error, file){
        if(error){
            response:writeHead(500, {"Content-Type":"text/plain"});
            response.write(error+"\n");
            response.end();
        }else{
            response.writeHead(200, {"Content-Type":"image/png"});
            response.write(file, "binary");
            response.end();
        }
    });
}

exports.a = a;
exports.b = b;
exports.upload = upload;
exports.show_upload = show_upload;

Read More
0 Comments

和鲍勃一起来学Node.js--第12课

6/19/2014

0 Comments

 
本课学习如果上传文件,并把图在浏览器中显示出来。

这个用例在90年代完全可以满足用于IPO的商业模型了,今天我们通过它可以学习两件事情:

1. 如何安装外部node.js模块
2. 如何将它们应用到我们的应用中。

这里,我们要用到的模块是 Felix Geisendorfer开发的 node-formidable模块,它对解析上传的文件数据做了很好的抽象。

如何安装模块呢? node.js有自己的包管理器叫NPM.  

看过之前 PhoneGap 之  HelloWorld  的朋友应该会不陌生。

通过下一条命令完成 formidable 的安装
npm install formidable

终端输出如下:

npm http GET https://registry.npmjs.org/formidable
npm http 200 https://registry.npmjs.org/formidable
npm http GET https://registry.npmjs.org/formidable/-/formidable-1.0.15.tgz
npm http 200 https://registry.npmjs.org/formidable/-/formidable-1.0.15.tgz
formidable@1.0.15 node_modules\formidable

说明模块已经安装成功了

查看执行npm install 的目录,会发现多了一个 node_modules/formidable 文件夹

Read More
0 Comments

和鲍勃一起来学Node.js--第11课

6/17/2014

0 Comments

 
本课教你如何处理post请求

通过前面10节课的学习,你已经是新手中的专家了, 你会想到采用异步回调来实现非阻塞地处理post请求的数据。

这里采用非阻塞的处理方式是明智的,因为一般post请求都比较“重”, 用户可能会输入大量的内容。

为了使整个过程非阻塞,node.js 会将post数据拆分成很多小的数据块,然后通过触发特定的事件,将这些小数据块传递给回调函数。 这里的特定事件有data事件(表示新的小数据块到了) 还有 end事件(表示 所有的数据都已经接收完毕)

我们需要告诉node.js当这些事件触发的时候,回调哪些函数。

怎么告诉呢,通过在request对象上注册监听器(listener)来实现。 如下所示
request.addListener("data", function(chunk){
        //called when a new chunk of data was received
});

request.addlistener("end", function(){
        // called when all chunks of data have been received
});

Read More
0 Comments

和鲍勃一起来学Node.js--第10课

6/17/2014

0 Comments

 
本课教你如何肥预先写好的html内容展示到浏览器中

之前所有课程中,浏览器中看到的内容都是程序生成的, 能不能直接读取写好的文件内容展示出来呢

答案是使用fs模块。

首先, 创建一个文件 html/form.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>

<body>
<form action="/upload" method="post">
<textarea name="text" rows="20" cols="60"></textarea>
<input value="Submit Text" />
</form>
</body>
</html>

Read More
0 Comments

PhoneGap (Cordova) 在Eclipse中运行

6/16/2014

0 Comments

 
上一篇 我们实现在用命令行运行想 PhoneGap   的 HelloWorld

phonegap run android

这次我们改用Eclipse运行. 

首先先看一下,上次用phonegap run android, 在my-app下生成的文件目录

文件夹详解:

www              : 文件夹  开发的 HTML5 ; CSS ; JS 文件都拷贝到这下面

plugins          : 文件夹  存放的是phonegap插件  以后 文件,摄像头等插件都下载到这里,在下篇文章中介绍用法 

merges          : 我也没用过  以后知道了再补上

platforms      : 文件夹 存放的是编译好后的android文件   ,(如果这个文件夹为空,需要你在命令行编译一次才能生成. 如上面 phonegap run android)

.cordova        : 存放的是配置文件 

将platforms文件夹导入 eclipse 就可以使用

Read More
0 Comments

和鲍勃一起来学Node.js--第09课

6/15/2014

0 Comments

 
好,我们马上开始介绍,如何以正确的方式,把耗时又不阻塞的内容让浏览器作出响应

到现在为止,我们的代码已经可以通过各个模块之间传递返回值

requestHandler->routes->server

最后在server中通过 response.write 回写到浏览器中

现在我们改一下,不再传递字符串的返回值,而是直接传递response对象, 把response对象,从server->routes->requesthanler传下去。

首先是server.js, 把response, 向下传递给routes, 同时删除所有的response返回,交给下面的requestHanler处理。
function start(get, config){
var http = require("http");
var url = require("url");


var server = http.createServer(function(request, response){
var pathname = url.parse(request.url).pathname;
get(pathname, config, response);

});
server.listen(8888);
}

exports.start = start;


Read More
0 Comments

和鲍勃一起来学Node.js--第8课

6/15/2014

0 Comments

 
阻塞?非阻塞?

到目前为止,我们的路由模块工作一切正常,但实际上在处理阻塞讲求时就会出现问题。

我们自底向上的稍微修改一下各个模块

第一个是 requesthandler.js, 在路由b的时候增加一个 睡眠 5秒
function a(){
console.log("welcome to visit a :) ");
return "This is A!"
}
function b(){
sleep(5000);
return "Hello B";

}
function sleep(t){
var now = new Date();
var d = now.getTime();
var e = d + t;

while(new Date().getTime() < e);
}

exports.a = a;
exports.b = b;

Read More
0 Comments

PhoneGap 之Hello world篇

6/14/2014

0 Comments

 
Picture
一。 安装 PhoneGap

http://phonegap.com/install/

官方教程说,首先需要安装 node.js ,幸好bob早就有了

然后在命令行里运行

C:\> npm install -g phonegap

遇到问题:

npm http GET https://registry.npmjs.org/shelljs/0.1.4
npm ERR! not found: git
npm ERR!
npm ERR! Failed using git.
npm ERR! This is most likely not a problem with npm itself.
npm ERR! Please check if you have git installed and in your PATH.



到说,找不到git命令 。 其实bob 早已经安装了git bash .

于是打开git bash 运行npm install -g phonegap, 经过一小长段时间(超极本运行了10分钟约, 当然了主要是网速……) , 终于完成 (中间好像有报一个git clone cordova的返回错误,没有理会它)


npm http GET https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.25-1.tgz
npm http 200 https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz
npm http 200 https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz
npm http 200 https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.25-1.tgz
C:\Users\hp\AppData\Roaming\npm\phonegap -> C:\Users\hp\AppData\Roaming\npm\node_modules\phonegap\bin\phonegap.js
phonegap@3.5.0-0.20.4 C:\Users\hp\AppData\Roaming\npm\node_modules\phonegap
├── pluralize@0.0.4
├── colors@0.6.0-1
├── semver@1.1.0
├── qrcode-terminal@0.9.4
├── shelljs@0.1.4
├── optimist@0.6.0 (wordwrap@0.0.2, minimist@0.0.10)
├── prompt@0.2.11 (revalidator@0.1.8, pkginfo@0.3.0, read@1.0.5, winston@0.6.2, utile@0.2.1)
├── phonegap-build@0.8.4 (qrcode-terminal@0.8.0, shelljs@0.0.9, optimist@0.3.7, phonegap-build-api@0.3.3)
├── cordova@3.5.0-0.2.4 (q@0.9.7, underscore@1.4.4, cordova-lib@0.21.3)
├── cordova-lib@0.21.4-dev (osenv@0.0.3, properties-parser@0.2.3, bplist-parser@0.0.5, mime@1.2.11, q@0.9.7, semver@2
.0.11, underscore@1.4.4, dep-graph@1.1.0, plist-with-patches@0.5.1, rc@0.3.0, tar@0.1.19, xcode@0.6.6, elementtree@0.1.5
, npmconf@0.1.16, glob@3.2.11, npm@1.3.4, request@2.22.0)
└── connect-phonegap@0.11.0 (home-dir@0.1.2, connect-inject@0.3.2, shelljs@0.2.6, request-progress@0.3.1, node-static
@0.7.0, useragent@2.0.8, tar@0.1.19, gaze@0.4.3, request@2.33.0, connect@2.12.0)

2.  使用安装好的phonegap命令
$ phonegap create my-app 
$ cd my-app 
$ phonegap run android

在执行第三行命令的时候出错
hp@HP-PC /d/Work/web
$ phonegap run android
[Error: project directory could not be found]
   [error] project directory could not be found

查阅了 相关文章 ,需要 下载 ant 

下载完成,解压到任意目录, 我这里为  D:\Work\apache-ant-1.9.4

设置环境变量:
  • ANT_HOME: D:\Work\apache-ant-1.9.4
  • Path: %ANT_HOME%\bin

重新打开 git bash 命令窗口执行,报新的错误提示:
hp@HP-PC /d/work/web/bob-app
$ phonegap run android
[phonegap] detecting Android SDK environment...
[phonegap] using the local environment
[phonegap] adding the Android platform...

C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\node_modules\q\q.js:126
                    throw e;
                          ^
Error: An error occurred while listing Android targets
    at C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\lib\check_reqs.js:87:29
    at _rejected (C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\node_modules\q\q.js:808:24)
    at C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\node_modules\q\q.js:834:30
    at Promise.when (C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\node_modules\q\q.js:1079:31)
    at Promise.promise.promiseDispatch (C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\node_modules\q\q.js:752:41)
    at C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\node_modules\q\q.js:574:44
    at flush (C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\node_modules\q\q.js:108:17)
    at process._tickCallback (node.js:415:13)
{ [Error: C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\create.bat: Command failed with exit code 8] code: 8 }
   [error] C:\Users\hp\.cordova\lib\android\cordova\3.5.0\bin\create.bat: Command failed with exit code 8
经过 stackoverflow  的指点, 原来需要以下两个路径添加到PATH中

D:\Work\adt-bundle-windows-x86_64-20131030\sdk\platforms; 
D:\Work\adt-bundle-windows-x86_64-20131030\sdk\tools; 
(在此应该顺便添加 D:\Work\adt-bundle-windows-x86_64-20131030\sdk\platform-tools的, 要不然下面还会遇到说adb命令找不到的错误)

然后,重启git bash 命令窗口, 进入到 D:/work/web/my-app/下 再运行 phonegap run android, 
几乎就要成功了,可是最后又出现一个错误
Invalid number of parameters
The system cannot find the path specified.

Project successfully created.
cp: no such file or directory: d:\Work\web\bob-app\icon.png

cp: no such file or directory: d:\Work\web\bob-app\icon.png

cp: no such file or directory: d:\Work\web\bob-app\res\icon\ios\icon-72.png

cp: no such file or directory: d:\Work\web\bob-app\icon.png

[phonegap] compiling Android...
cp: no such file or directory: d:\Work\web\bob-app\icon.png

cp: no such file or directory: d:\Work\web\bob-app\icon.png

cp: no such file or directory: d:\Work\web\bob-app\res\icon\ios\icon-72.png

cp: no such file or directory: d:\Work\web\bob-app\icon.png

Unable to locate tools.jar. Expected to find it in C:\Program Files\Java\jre6\lib\tools.jar
Buildfile: d:\Work\web\bob-app\platforms\android\build.xml

-set-mode-check:

-set-debug-files:

-check-env:
 [checkenv] Android SDK Tools Revision 22.3.0
 [checkenv] Installed at d:\Work\adt-bundle-windows-x86_64-20131030\sdk

-setup:
     [echo] Project Name: HelloWorld
  [gettype] Project Type: Application

-set-debug-mode:

-debug-obfuscation-check:

-pre-build:

-build-setup:
[getbuildtools] Using latest Build Tools: 19.0.0
     [echo] Resolving Build Target for HelloWorld...
[gettarget] Project Target:   Android 4.4
[gettarget] API level:        19
     [echo] ----------
     [echo] Creating output directories if needed...
    [mkdir] Created dir: d:\Work\web\bob-app\platforms\android\ant-build
    [mkdir] Created dir: d:\Work\web\bob-app\platforms\android\ant-build\res
    [mkdir] Created dir: d:\Work\web\bob-app\platforms\android\ant-build\rsObj
    [mkdir] Created dir: d:\Work\web\bob-app\platforms\android\ant-build\rsLibs
    [mkdir] Created dir: d:\Work\web\bob-app\platforms\android\ant-gen
    [mkdir] Created dir: d:\Work\web\bob-app\platforms\android\ant-build\classes
    [mkdir] Created dir: d:\Work\web\bob-app\platforms\android\ant-build\dexedLibs
     [echo] ----------
     [echo] Resolving Dependencies for HelloWorld...
[dependency] Library dependencies:
[dependency]
[dependency] ------------------
[dependency] Ordered libraries:
[dependency]
[dependency] ------------------
     [echo] ----------
     [echo] Building Libraries with 'debug'...

nodeps:

-set-mode-check:

-set-debug-files:

-check-env:
 [checkenv] Android SDK Tools Revision 22.3.0
 [checkenv] Installed at d:\Work\adt-bundle-windows-x86_64-20131030\sdk

-setup:
     [echo] Project Name: CordovaLib
  [gettype] Project Type: Android Library

-set-debug-mode:

-debug-obfuscation-check:

-pre-build:

-build-setup:
[getbuildtools] Using latest Build Tools: 19.0.0
     [echo] Resolving Build Target for CordovaLib...
[gettarget] Project Target:   Android 4.4
[gettarget] API level:        19
     [echo] ----------
     [echo] Creating output directories if needed...
    [mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\res
    [mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\libs
    [mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\ant-build
    [mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\ant-build\res
    [mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\ant-build\rsObj
    [mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\ant-build\rsLibs
    [mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\ant-gen
    [mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\ant-build\classes
    [mkdir] Created dir: D:\Work\web\bob-app\platforms\android\CordovaLib\ant-build\dexedLibs
     [echo] ----------
     [echo] Resolving Dependencies for CordovaLib...
[dependency] Library dependencies:
[dependency] No Libraries
[dependency]
[dependency] ------------------

-code-gen:
[mergemanifest] Merging AndroidManifest files into one.
[mergemanifest] Manifest merger disabled. Using project manifest only.
     [echo] Handling aidl files...
     [aidl] No AIDL files to compile.
     [echo] ----------
     [echo] Handling RenderScript files...
     [echo] ----------
     [echo] Handling Resources...
     [aapt] Generating resource IDs...
     [echo] ----------
     [echo] Handling BuildConfig class...
[buildconfig] Generating BuildConfig class.

-pre-compile:

-compile:
    [javac] Compiling 89 source files to D:\Work\web\bob-app\platforms\android\CordovaLib\ant-build\classes

BUILD FAILED
d:\Work\adt-bundle-windows-x86_64-20131030\sdk\tools\ant\build.xml:601: The following error occurred while executing thi
s line:
d:\Work\adt-bundle-windows-x86_64-20131030\sdk\tools\ant\build.xml:720: The following error occurred while executing thi
s line:
d:\Work\adt-bundle-windows-x86_64-20131030\sdk\tools\ant\build.xml:734: Error running javac.exe compiler

Total time: 6 seconds
Error code 1 for command: cmd with args: /s,/c,ant,debug,-f,d:\Work\web\bob-app\platforms\android\build.xml,-Dout.dir=an
t-build,-Dgen.absolute.dir=ant-gen
{ [Error: d:\Work\web\bob-app\platforms\android\cordova\build.bat: Command failed with exit code 2] code: 2 }
   [error] d:\Work\web\bob-app\platforms\android\cordova\build.bat: Command failed with exit code 2

主要有两个问题

一。  Unable to locate tools.jar. Expected to find it in C:\Program Files\Java\jre6\lib\tools.jar


我找了一个,我电脑上的 tools.jar 的实际路径为  C:\Program Files\Java\jdk1.6.0_43\lib

这是因为,没有定义 JAVA_HOME , 它就按默认的地方去找了,没找到。(stackoverflow)

于是添加 JAVA_HOME变量 指定值为: C:\Program Files\Java\jdk1.6.0_43\

二, 没有找到icon ,这个暂时先不考虑它

重启 git bash , 再运行 phonegap run android

-package:
[apkbuilder] Found Deleted Target File
[apkbuilder] Creating HelloWorld-debug-unaligned.apk and signing it with a debug key...

-post-package:

-do-debug:
 [zipalign] Running zip align on final apk...
     [echo] Debug Package: d:\Work\web\bob-app\platforms\android\ant-build\HelloWorld-debug.apk
[propertyfile] Updating property file: d:\Work\web\bob-app\platforms\android\ant-build\build.prop
[propertyfile] Updating property file: d:\Work\web\bob-app\platforms\android\ant-build\build.prop
[propertyfile] Updating property file: d:\Work\web\bob-app\platforms\android\ant-build\build.prop
[propertyfile] Updating property file: d:\Work\web\bob-app\platforms\android\ant-build\build.prop

-post-build:
     [move] Moving 1 file to d:\Work\web\bob-app\platforms\android\ant-build
     [move] Moving 1 file to d:\Work\web\bob-app\platforms\android\CordovaLib\ant-build

debug:

BUILD SUCCESSFUL
Total time: 4 seconds

d:\Work\web\bob-app\platforms\android\cordova\node_modules\q\q.js:126
                    throw e;
                          ^
Error executing "adb devices": 'adb' is not recognized as an internal or external command,
operable program or batch file.


hp@HP-PC /d/work/web/bob-app
 看到了 BUILD SUCCESSFUL  真不容易。 等等,好像还有一个错 adb 不认识。 

再把 D:\Work\adt-bundle-windows-x86_64-20131030\sdk\platform-tools 添加到 PATH中

重启 git bash, 再运行 phonegap run android

[propertyfile] Updating property file: d:\Work\web\bob-app\platforms\android\ant-build\build.prop
[propertyfile] Updating property file: d:\Work\web\bob-app\platforms\android\ant-build\build.prop
[propertyfile] Updating property file: d:\Work\web\bob-app\platforms\android\ant-build\build.prop

-post-build:
     [move] Moving 1 file to d:\Work\web\bob-app\platforms\android\ant-build
     [move] Moving 1 file to d:\Work\web\bob-app\platforms\android\CordovaLib\ant-build

debug:

BUILD SUCCESSFUL
Total time: 10 seconds
WARNING : No started emulators found, starting an emulator.

d:\Work\web\bob-app\platforms\android\cordova\node_modules\q\q.js:126
                    throw e;
                          ^
ERROR : No emulator images (avds) found, if you would like to create an
 avd follow the instructions provided here:
 http://developer.android.com/tools/devices/index.html
 Or run 'android create avd --name <name> --target <targetID>'
 in on the command line.
苍天呐,大地呐。 生命不息,错误不止啊。

不过仔细一看,是说No emulator ,需要 avd. 

要什么avd 啊,直接手机连上电脑!

再次运行 phonegap run android

终于在三儿子(Galaxy Nexus)上看到到亲切的 小盒子机器人了,

收工!

PS:
以上都是在鲍勃的机器环境上一步一步的完成。如果您的机器和本文相差甚远,您可能需要参考以下内容:

http://teusink.blogspot.jp/2013/07/guide-phonegap-3-android-windows.html

PhoneGap Cordova 环境搭建



0 Comments
<<Previous
Forward>>

    Author

    鲍勃 (上海)
    互联网码农

    小A

    Archives

    July 2014
    June 2014
    May 2014

    Categories

    All
    AngularJS
    App
    Bootstrap
    Cocos2dx-c++
    Css
    CSS3
    Design Pattern
    Express
    Funny
    Game
    Html5
    Jasmine
    Javascript
    Lua
    Music
    Node.js
    Pattern
    Phonegap
    Php
    Python
    Tdd
    Tips

    RSS Feed

Powered by Create your own unique website with customizable templates.