1. 首当其冲的是速度方面有了很大的提升，现在启动速度明显快了。看来是想尽快摘掉Beta这顶帽子啊。
2. 重新设计了默认的界面主题， 现在这个主题非常类似soda theme的风格，已经完全不必再安装soda theme扩展了.
   
3. Auto complete自动补齐功能。自动补齐会使用字典和snippets作为补齐的列表源，速度非常快，不会对你的输入有明显的干扰。对我这样英语不好的同志很有帮助啊，呵呵。这里还有一个小改进，是把Tab键用作自动补齐，而保留Enter键继续作为Enter，而不进行补齐；开启这个功能的选项是auto_complete_commit_on_tab。
   
4. 通过Ctrl+Shift+T来打开最近关闭的文件，这个行为跟多标签浏览器里打开最近关闭的标签设计一样。又一个扩展Open Recent Files牺牲了。

我升级后，没有发现与现有扩展的明显冲突。喜欢尝鲜的朋友赶快去升级啊。

使用Sublime Package Control安装CTags扩展很容易。按快捷键”Ctrl+Shift+P”，然后选择安装package，再选择CTags就可以了。

在Linux和Mac上，CTags扩展可以自动生成tags文件，你只需要按下快捷方式”Ctrl+t,Ctrl+b”即可。
其实他就是在当前目录执行了一下”ctags -R -f .tags”命令。
在Windows平台上，我不知道有没有ctags命令，如果没有CTags扩展是没办法起作用的。不过只要能用其他工具生成tags文件，注意tags文件要放在项目的当前目录，并且文件名要是”.tags”.

CTags基本上与Vim下的CTaga一致，当光标停在某个函数上时，按下快捷键”Ctrl＋Alt＋]”，就可以打开函数所在的文件，并跳转到相应位置。
如果要返回之前的位置只需要按下”Ctrl＋Alt＋[“即可。

由于使用Sublime Package Control安装扩展太方便了，我经常会安装很多。这其实是个不好的习惯，大部分扩展安装以后可能很少用到。
而且可能是Sublime Text 2还比较新的缘故吧，有些扩展之间还会冲突。
比如EncodingHelper跟CTags扩展就有冲突。EncodingHelper会造成CTags只能打开函数所在的文件, 却跳转不到精确的位置。

另外Mac上缺省的CTags似乎并不是那个Exuberant CTags，不知道是什么版本，参数都不一样！所以在Mac上还要先更改CTags，安装步骤如下。

curl -O http://prdownloads.sourceforge.net/ctags/ctags-5.8.tar.gz
tar xzvf ctags-5.8.tar.gz
cd ctags-5.8
./configure
make
sudo make install

开发的过程中遇到了些浏览器兼容问题, 也涉及到一下iPad这样的平板平板设备上的浏览器与桌面浏览器在用户行为设计上的不同的问题. 下面罗列一下:

0. position:fixed
最著名的应该是iOS5之前的版本不支持css的 position:fixed 了吧.

1. 脱离浏览器的视频播放和全屏问题
在手机上, 如iPhone, 浏览器对video标签的处理, 基本上是直接使用系统的媒体播放器播放. 这时由于已经脱离了浏览器, 所以没有办法在播放视频的同时在屏幕上叠加任何显示元素. iPad好一点, 能在页面内直接播放视频, 但是一但用户选择了全屏播放, 则进入iPhone一样的状态. 只有桌面上的Chrome对这个支持的最好, 全屏状态下依然能够叠加浏览器里元素; Firefox逊色些, 全屏并没有全屏显示, 而是把视频充满了当前浏览器窗口.

2. 音量控制问题
在iOS设备上, 浏览器没有办法通过Javascript来操作音量控制, 不管是调节音量大小, 还是静音都不行. 读取当前音量也永远只会得到1. 这又是Apple故意的吧.

3. 剪贴板问题
在iOS设备上, 不能通过Javascript访问系统剪贴板. 用户只能在文字上单击, 调出系统的拷贝粘贴按钮. 要是不想让用户拷贝粘贴倒是有办法, 使用这个CSS.

    -webkit-user-select: none;

4. 文本框文字选取问题
在iOS设备上, 不能通过Javascript访问textarea元素的select()来选中该元素的文字, 得到的只不过是把光标移到到了文字的最后位置.

5. 文本框滚动条问题
在iOS设备上, textarea元素没有滚动条, 你看不出到了, textarea什么位置了. 滚动只能通过双指滑动来实现, 这应该算是多点触摸设备的特性吧.

6. 边框问题
默认情况下, iOS在你单击元素时, 会显示一个难看的边框. 像是在使用Firebug做调试一样, 我想最终用户可不行看到这个. 这个可以通过CSS修正.

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

7. touch events的支持问题
jQuery本身不支持touch events, 所以同jQuery绑定如touchmove这样的事件事, 收不到事件. 因为jQuery复制touchmove的event对象是有些属性读不到, 认为这个事件不合法直接跳掉了. 直接使用DOM元素的addEventListener()方法没问题.

参考文档:

• List of known “Safari on iPad” differences over “Desktop Safari”
• UNSOLVED HTML5 VIDEO ISSUES ON IOS
• Preparing Your Web Content for iPad

实际中使用中, 经常会碰到Javascript变量有时候能成功删除, 有时候却不掉成功删除的情况.
这篇Understanding delete牛文详细解释了, 为什么会这样, 什么样的变量能成功delete, 什么样的不能成功delete.

简而言之, 就是通过”声明“方式创建的变量不能成功删除, 通过”赋值“方式创建的变量能成功删除; 一但一个变量创建后, 它能不能被删除的属性将不会改变. 一个特例是通过eval()函数执行动态代码创建出来的变量,都是可以删除的.
如下面这段代码在Firefox/Chrome/Nodejs里的运行结果如下:

(function(global){
    var aaa = "aaa";
    bbb = "bbb";
    global.ccc = "ccc";
    eval("var ddd='ddd';");
    console.log(delete aaa);
    console.log(delete bbb);
    console.log(delete ccc);
    console.log(delete ddd);
}(this));

Firebug的console里直接定义的变量(不包括在函数里定义的变量), 似乎是因为以eval()的方式在运行代码. 所以通过在Firebug的console里输入代码创建出来的变量,是可以删除的. Chrome等webkit系的浏览器的开发工具没有这个问题. 这一点在调试代码时可能会引起奇怪的现象.

//在console里粘贴运行下面的代码
var aaa = "aaa";
console.log(delete aaa);
//在Chrome的开发工具里返回是false, 在Firebug的console里返回是true.

在对Javascript对象的属性进行赋值时, 原则是这样的:
1. 如果该对象本身有这个属性, 则对该属性赋值
2. 如果该对象本身没有这个属性, 则在该对象上新建一个该属性, 并进行赋值. (这时不会通过__proto__属性, 找该对象的prototype, 检查prototype上有没有该属性, 然后在prototype的属性上赋值.)

举个简单的例子:

var Car = function(){
  this.color = "red";
}
var Jeep = function(){};
Jeep.prototype = new Car();

var myCar= new Jeep();
console.log(myCar.color);
console.log(myCar);
//这时myCar对象本身上并没有color属性,
//访问myCar.color得到的结果是"red",
//因为这时prototype chain起作用了.

myCar.color = "green";
console.log(myCar.color);
console.log(myCar);
//这时myCar对象上新建了一个color属性, 值是"green".
//但是它并没有覆盖掉myCar的__proto__上的color的属性.
//这时候如果读取myCar.color, 按prototype chain的搜索顺序,
//首先找到的是myCar对象自身上的属性color, 值是"green".

看console里打出了的对象应该比较清楚.

用对象的数组写法可能更容易理解些.

var Car = function() {
  this["color"] = "red";
}
var Jeep = function() {};
Jeep.prototype = new Car();

var myCar= new Jeep();
console.log(myCar); 

myCar["color"] = "green";
console.log(myCar);

首先js里面没有类这回子事情, 虽然class是js的保留字, 但是到现在也没派上任何用场. 在js里面, 几乎所有的东西都是对象, 函数也是对象, 所以函数可以赋值给别的变量. 另外js对象也可以用数组的方式访问, 也就是说访问obj1.something, 也可以写成obj1['something'].

在js里虽然没有类, 但是有一个在类编程里常用的的概念, Constructor构造器, 或者叫构造函数. 语法上Constructor跟普通的js函数没有区别, 但是Constructor前面加上new关键字就可以产生新的对象.

那么”new Constructor()”这样调用时到底做了什么事情呢?
1. js运行环境首先创建一个空对象
2. 把this变量指向这个对象
3. 把__proto__指向这个构造器的prototype属性
4. 通过this把属性和方法加在这个对象上
5. 最后会把this指向的对象return出来(当然你也可以显示的return别的对象,这是情况跟我讨论的有点不一样)

这里有2个概念比较重要, 第一是Constructor的prototype属性, 它是Constructor的一个保持共享属性和方法的对象. 二通过该Constructor生成的对象的__proto__属性, 它指向了那个prototype对象. 对象的Constructor可以通过该对象的constructor属性获得.

我们定义一个简单的Constructor Demo(), 然后通过他生成一个aDemo对象, 在Chrome的console里把aDemo打出来看到的结果是这样的,这是我们能很清楚的看出这种关系.

function DemoA(){
  this.title = "this is a demo constructor";
  this.f1 = function(){}
}
var aDemo = new DemoA();
console.log(aDemo);

换一种写法,

function DemoB(){
  this.title = "this is a demo constructor";
}
DemoB.prototype.f2 = function () {};
var bDemo = new DemoB();
console.log(bDemo);

其实跟前面没多大区别, 不过这一次f2()不在创建出来的对象上, 而是在对象的__proto__指向的构造器DemoB上. 这样的好处是当使用DemoB创建很多对象时, 比较节省内存.

js的prototype搜索链 prototype Chain
js的运行环境是这样使用构造器的prototype的. 当我们对第一个对象调用其方法时, js运行环境首先看, 这个对象本身有没有这个方法, 如果有就直接调用. 如果没找到, 就查找这个对象的__proto__属性指向的对象(就是前面说的该对象的构造器的prototype属性), 如果有该方法就调用, 没有继续查找__proto__属性指向对象的__proto__属性指向的对象, 以此类推. 直到最后, 找到js所有的对象都会指向默认指向的Object(算是js的根对象吧). 所以如果我们给Object上增加个方法, 所以的js对象都能使用.

由于js有对对象函数的prototype chain搜索的特性, 我们可以利用这点来模拟类似其他语言里类(class)的效果. 如:

function DemoA(){
  this.title = "this is a demo constructor";
  this.f1 = function(){}
}

function DemoB(){
  this.title = "this is b demo constructor";
  this.f2 = function(){}
}
DemoB.prototype = new DemoA();

var bDemo = new DemoB();
console.log(bDemo);

这时我们通过bDemo对象, 不但能调用bDemo上的DemoB的f2()方法, 也能__proto__同对对prototype的搜索, 在bDemo上直接调用DemoA的f1()方法.

由于这种写法在语法上太啰嗦, 不容易理解, 我可以定义一个这样的函数.

function inherit(Child, Parent) {
  Child.prototype = new Parent();
}

这样我们前面的例子可以写成这样, 效果是一样的:

function DemoA(){
  this.title = "this is a demo constructor";
  this.f1 = function(){}
}

function DemoB(){
  this.title = "this is b demo constructor";
  this.f2 = function(){}
}

inherit(DemoB, DemoA);

var bDemo = new DemoB();
console.log(bDemo);

下面罗列一下Sublime跟我用过的其他编辑器的简单对比.

e-Texteditor

Apple上的textmate流行以后,轻型开发工具成了web开发人员的潮流. Windows上也出现了一些类似的工具,e-Texteditor就之一.我使用了e一段时间以后,还是回到了Eclipse/PhpStorm. 直到用上Sublime才感觉不想打开那笨重的IDE环境了. Sublime无疑也属于轻型开发工具这一类, 而且到Sublime text 2(还没发布,现在是beta 2139)以后, 甚至有超越textmate的意思, 最近textmate 2的开发步伐也明显加快了,看来是有一定的压力.

速度方面, e使用一段时间以后,开启和编辑速度都会明显下降. Sublime好很多, 至今没有发现性能上的明显变化.
扩展, e的扩展基本上是一些兼容textmate的Snippets. Sublime的扩展明显开放得多, 使用Pyhton编写, 能做的功能也多很多.
试用期, e有30天的试用版,但是到期之后,只需要到注册表里删除e相关键值就可以再用30天. Sublime大度些,可以无限期使用下去,但是不确定Sublime Text 2正式版发布以后是不是还是这样的.
操作系统, e支持Windows,Sublime则在Windows/Linux/Mac上都能使用.

VIM

VIM绝对是个神器, 几乎无所不能, 可惜学习门槛比较高. 另一个比较差的地方是, 没有一个好的文件管理扩展, 特别是缺乏一个美观的GUI外壳. 别跟我提GVIM,我感觉那就是一坨xxx.
好在Sublime也有个VIM扩展, 基本的VIM功能也支持, 这无疑对VIM用户很有吸引力.
Sublime的查找替换很强大,不但能在当前文件查找,做增量查找,支持正则表达式,在指定的文件夹内的所有文件里查找; 而且最重要的是速度非常快.
Sublime还有一cTags扩展, 这样就可以与cTags生产的文件一起使用, 在代码里快速跳转了.
扩展方便, Sublime使用python作为扩展的开发语言,并自带一个python的console. 开发调试在一起优势也很明显. 现在已经有很多很不错的扩展,如zen coding, coffeescript. Sublime通过Package control来安装和卸载扩展,明显比vim管理扩展方面方便很多.
Sublime的缺点是收费软件, 如果能开源或者免费, 说不定能创造一个类似VIM一样规模的社区.

Ultraedit

Ultraedit是我以前使用了很久的一个编辑器,速度那是没说的.特别是列模式,更是在人前炫耀的资本. Ultraedit还有一个16进制编辑的功能, 这些编辑器里似乎没有比它做的好. 可惜他只是一个notepad的替代品, 对程序员来时没有特别的吸引力.
Sublime同样支持列编辑(Shift+右键拖拽), 而起还支持一种多位置同时编辑的功能, 使用Ctrl+左键单击选择多个位置,然后就可以在这个多个位置同时输入文字了.

如果你和我一样是个程序员,去尝试一下Sublime text 2吧,我想你也会和我一样喜欢上它的.

Stackoverflow上有比较详细的讨论: using memcache vs memcached with php 和memcache vs memcached

这里还有一个很清晰表格,对比了这两个扩展的具体特性.
主要区别是php memcached扩展比较新,几乎支持memcached的所有特性(如Delayed Get, Append/Prepend等). 但是它依赖libmemcached才能运行(在debian里面包名是libMemcached5).
所以如果你不使用如Delayed Get这样的特性,又不想多依赖libmemcached库, 完全可以使用memcache扩展. 反之请选择memcached扩展.

不过debian和ubuntu上直接用apt-get install php5-memcached安装的php memcached扩展,libmemcached库有些问题. 很多人报告不能正常使用. memcache扩展由于不依赖libmemcached库,没这个问题.
我的debian 6上也有这个毛病. 必须手工编译libmemcached才行, 命令如下.

apt-get remove php5-memcached

wget http://launchpad.net/libmemcached/1.0/0.50/+download/libmemcached-0.50.tar.gz
tar -zxvf libmemcached-0.50.tar.gz
cd libmemcached-0.50
./configure
make
make test
make install
cd ..

wget http://pecl.php.net/get/memcached-1.0.2.tgz
tar -xzvf memcached-1.0.2.tgz
cd memcached-1.0.2
phpize
./configure
make
make install

然后在/etc/php5/apache2/conf.d/memcached.ini里开启php memcached扩展.
重启apache, 应该就ok了.

你可以用这段php片段测试一下

$m = new Memcached();
var_dump($m);
echo $m->addServer('localhost', 11211);

echo $m->set('int', 99);
echo $m->set('string', 'a simple string');
echo $m->set('array', array(11, 12));
/* expire 'object' key in 5 minutes */
echo $m->set('object', new stdclass, time() + 300);

var_dump($m->get('int'));
var_dump($m->get('string'));
var_dump($m->get('array'));
var_dump($m->get('object'));

Log.io由两部分组成, harvester和server.
harvester负责监视具体的日志文件,当文件有变化是通知server. harvester可以有多个运行实例, 在不同的机器上收集日志.
server则负责处理与使用浏览器监视日志的用户的交互. server只有一个运行实例.

Log.io的安装步骤如下.

#重新以全局模式安装socket.io connect underscore等模块
su -
npm uninstall  socket.io connect underscore
npm install -g  socket.io connect underscore

#下载log.io,并配置
git clone git://github.com/NarrativeScience/Log.io.git log.io
sudo git clone https://github.com/remy/Socket.io-node-client.git /usr/local/lib/node/socket.io.client/
sudo git submodule update --init --recursive
cd log.io/
cd bin/
./configure

#安装server
./install/server

#安装harvester
./install/harvester

#配置要监视的日志 /etc/log.io/harvester.conf
#我添加了apache和log.io自己的日志文件

#开启harvester收集日志
/etc/init.d/log.io-harvester start

好了,现在可以访问http://”log.io server所在地址”:8998 来看看效果了.

左侧列表按照harvester分组列出来所有监视的日志文件. 右侧上边是当前选中实时监视的日志,支持通过正则表达式搜索. 右侧下面可以显示某个日志文件的历史内容.

看不到图的请看这里, flickr上新上传的图片怎么都看不到呢?!

TermKit就是这两天网络上讨论很多的一个工具.从TermKit作者的blog看,这是运行在Mac,以node.js写服务端,以js+webkit来写客户端,实现的一个图像化的Terminal终端工具.

作者只做了Mac上的开发.我搜索了一个,看到已经有人做了Linux+Chrome的移植.下载下来是了一下,运行不出结果,就在github上comment了一下,没想到作者马上就修正了.

下面是我安装的步骤:

git clone https://github.com/Floby/TermKit.git
cd TermKit/
npm install
node Node/nodekit.js

先你就可以了到Chrome里去访问TermKit了。
可以根据输入动态补齐：

这是ls输出的目录结果：

文件也会动态补齐：

可以直接通过cat查看图形文件：

现在好像还有点问题,就是现实出来的目录没有图标.不知道是不是那些显示依赖Mac的什么环境的原因.

不过感觉这样的工具,很难做到Linux Terminal那么通用.但是做一般的显示目录,运行一些命令,显示图像结果这样的任务还是很方便的.

在网上Google了一下，发现碰到这个问题的人还真不少。
比如这里和这里,都用一堆人说这事。Gantry theme的用户也说这事。

开始我以为是apache或者php什么地方的配置有问题。但是写了个简单的php脚本，跑了一下发现没这个问题，创建出来的文件的权限很正常。

直到看到这篇文章，才发现这是个老问题，从2006就有人不停的在抱怨了。

起因就是在joomla的模板组件的controller文件administrator/components/com_templates/controller.php里有这么几行代码：

// Try to make the template file unwriteable
if (!$ftp['enabled'] && !JPath::setPermissions($file, '0555')) {
	JError::raiseNotice('SOME_ERROR_CODE', JText::_('Could not make the template file unwritable'));
}

我也没看明白，没什么不使用ftp就要把文件权限改成555？自己改成不可写，然后再告诉用户”那个文件不可写”，还不说问什么。

当然像我这样不求甚解的人很多，这几行代码就被广泛的粘贴复制了。比如本文开头提到的Gantry theme。

更加好笑的是，joomla的team在不断发布新版本。在最近发布的joomla 1.6.1里，似乎处于安全性考虑，之前设置文件权限为755的地方都改成了644。而这几行代码也顺理成章的从555变种成了444。

//administrator/components/com_templates/models/source.php
// Try to make the template file unwriteable.
if (!$ftp['enabled'] && JPath::isOwner($filePath) && !JPath::setPermissions($filePath, '0444')) {
	$this->setError(JText::_('COM_TEMPLATES_ERROR_SOURCE_FILE_NOT_UNWRITABLE'));
	return false;
} else if (!$return) {
	$this->setError(JText::sprintf('COM_TEMPLATES_ERROR_FAILED_TO_SAVE_FILENAME', $fileName));
	return false;
	}

现在这个问题的解决办法，就是把555换成755，或者444改成644。至于什么时候joomla官方能给出个正解，就不知道了。

mobl上关于twitter trends的这个例子，还是蛮好玩的。通过调用twitter的API，得到当下twitter上流行的话题。然后再根据每个话题，显示出最近这个话题的tweets。

2.mobl上的twitter trends例子

照猫画虎，来试试做一个新浪微博的类似应用。查了一下微博的API，遗憾的发现关于话题的API还都处于beta状态。而且要用户登录以后才能调用，不像twitter在不登录的情况下就能调用trends类的API。
新浪微博只有Search类的API有不登录调用的API，我们就拿search模拟一下吧。

http://api.t.sina.com.cn/search.json?source=xxx&rpp=100&q=sugarcrm

3.使用mobl的服务调用json

mobl提供了一个服务service接口，可以通过URL调用json服务。
修改后的新浪search的服务代码如下：

service Twitter {
  resource trends() : JSON {
    uri = "http://me.leonzhang.com/mobl/weibotrends/trendsjson.php"
    encoding = "jsonp"
    mapper = trendsMapper
  }

  resource search(query : String) : JSON {
    //主要要把xxx改成你自己的api key
    uri = "http://api.t.sina.com.cn/search.json?source=xxx&rpp=200&q=" + query
    encoding = "jsonp"
    mapper = tweetsMapper
  }
}

4.构造mobl界面

还后通过上面的trends服务，构造话题首页：

  header(_("Twitter trends"))
  var trends = async(Twitter.trends())
  whenLoaded(trends) {
    group {
      list(topic in trends) {
        item(onclick={ search(topic.name); }) {
		  label(topic.name)
		}
      }
    }
  }

在通过search服务，构造微博结果显示页。

screen search(query : String) {
  header(query) {
    backButton()
  }
  var results = async(Twitter.search(query))
  whenLoaded(results) {
    list(tweet in results) {
      block(tweetStyle) {
        image(tweet.profile_image_url,
              style=tweetIconStyle)
        <b>label(tweet.from_user) ": "</b>
        label(tweet.text)
      }
    }
  }
}

基本上就搞定了，打包上传到PhoneGap，一个微博应用就新鲜出炉了。
通过浏览器，可以在这里试用一下。在Andriod上跑的界面大概是这个样子。

全部代码如下：

application weibotrends

import mobl
import mobl::ui::generic
import mobl::ui::stylemixin

// STYLES
style tweetStyle {
  padding: 10px;
  margin: 5px;
  min-height: 50px;
  background-color: white;
  border: 1px solid #444;
  borderRadiusMixin(10px);
}

style tweetIconStyle {
  float: left;
  margin: 0 10px 0 0;
}

// TYPES
type Trend {
  name : String
  url  : String
}

type Tweet {
  profile_image_url : String
  created_at        : String
  from_user         : String
  text              : String
}

// LOGIC
function trendsMapper(json : JSON) : [Trend] {
  return json.trends;
}

function tweetsMapper(json : JSON) : [Tweet] {
  return json.results;
}

// SERVICE
service Twitter {
  resource trends() : JSON {
    uri = "http://me.leonzhang.com/mobl/weibotrends/trendsjson.php"
    encoding = "jsonp"
    mapper = trendsMapper
  }

  resource search(query : String) : JSON {
  	//注意要换成自己的新浪微博API key
    uri = "http://api.t.sina.com.cn/search.json?source=xxx&rpp=200&q=" + query
    encoding = "jsonp"
    mapper = tweetsMapper
  }
}

// UI
screen root() {
  script {
  	  fetchLanguageBundle("zh.json");
  	}

  header(_("Twitter trends"))
  var trends = async(Twitter.trends())
  whenLoaded(trends) {
    group {
      list(topic in trends) {
        item(onclick={ search(topic.name); }) {
		  label(topic.name)
		}
      }
    }
  }
}

screen search(query : String) {
  header(query) {
    backButton()
  }
  var results = async(Twitter.search(query))
  whenLoaded(results) {
    list(tweet in results) {
      block(tweetStyle) {
        image(tweet.profile_image_url,
              style=tweetIconStyle)
        <b>label(tweet.from_user) ": "</b>
        label(tweet.text)
      }
    }
  }
}

更新：
@很潮的猪头哥贡献了一张在iphone上访问的效果图片。

PhoneGap同样也是多平台手机开发工具，它能把你的web应用打包成各各手机平台的本地应用。
打包iPhone应用需要Mac系统，还需要Apple的开发执照。我都没有，只能望洋兴叹了。
打包Android应用没有这些先决条件，咱们就试试这个吧。

2.准备mobl应用

还是拿小小计算器程序为例，mobl项目编译出来的结果在项目下的www目录里。
我们进入这个目录，把TipCalculator.html改名成index.html。
然后把整个www目录通过压缩工具打包成zip格式。
准备工作就完成了。

3.使用phonegap的在线发布工具phonegap build

到PhoneGap的在线发布工具phonegap build网站，点击“New App”新建一个应用，输入应用名称。
选择“upload an archive or index.html file”，上传我们前面做的那个zip压缩包。

等一会程序就打包好了。

4.下载apk在我的华为C8600上试试

下载打包好的apk文件，通过豌豆荚安装到Android平台的华为C8600上。
运行一下还挺像那么回事的。虽然速度慢了点，但是你也知道，C8600的速度本来就不咋地。

至此我们能通过mobl构建一个真正的Android手机应用了。
现在是功能还很简单，但是慢慢来嘛，mobl的功能也在不断增加中。

接着上次我的的”小小计算器”程序。为了修改它的界面风格，我们首先派生一个mobl的模块。
新建一个叫ui.mobl的文件，在里面输入下面两行代码。第一句的意思是新建的模块名叫ui，第二句的意思是ui模块导入所有mobl::ui::generic的内容（开始我还以为mixin是中文迷信的拼音呢！搞了半天是mix in。唉英文差害死人）。

module ui
mixin mobl::ui::generic

回到tipcalculator.mobl文件，现在可以把里面引用mobl::ui::generic的那句改成引用ui了。

//import mobl::ui::generic
import ui

2.使用从mobl::ui::generic导入的变量

OK，准备功能完毕。现在在ui.mobl里就可以使用或者重写mobl::ui::generic里定义的变量了。
比如mobl::ui::generic里的样式变量（样式变量都是以$开头的）$baseColor，它代表了当前界面的基础色。另外里面还定义了$baseColor,$baseColorGreen，$baseColorRed, $baseColorRedish等颜色。
为了修改当前界面的基础色，只要输入下面一句，界面基础色就变成红的了。

style $baseColor = $baseColoRed

当然我们也可以使用mobl::ui::generic里的rgb函数，比如这样整个界面就变成灰的了。这里有关于具体模块内功能的描述，但是似乎文档还不太全面。

style $baseColor = rgb(100, 100, 100)

3.使用自定义css样式表

我们也可以定义新的样式变量，语法是css的扩展，据说是借鉴了scss的很多特性。
下面定义了两个新的样式变量，相信用过css的应该都能看懂。
但是有一点我没明白，为什么这些变量不再以$开头了呢？而且我换成$还编译不通过。

style mixin myButtonStyleMixin($fromColor, $toColor) {
  border: 1px solid #000;
  padding: 10px;
  line-height: 3em;
  margin: 5px;
  borderRadiusMixin(5px);
  backgroundGradientMixin($fromColor, $toColor);
}

style myButtonStyle {
  myButtonStyleMixin(#ddd, #bbb);
}

style myButtonPushedStyle {
  myButtonStyleMixin(#aaa, #999);
}

现在再打开tipcalculator.mobl文件,把里面的按钮使用我们新定义的样式变量。代码如下，效果见后面的图。

		button(_("Click me"), style=myButtonStyle,
                   pushedStyle=myButtonPushedStyle, onclick={
		  alert(_("You clicked me!"));
		})

运行效果可以看这里.

首先看看mobl的语言文件是什么？

很多php程序都有自己格式的语言文件，一般就是普通的php文件，比如SugarCRM就是以php数组存放语言文件。Linux里的应用程序通常使用gettext来实现国际化。StatusNet就是采取这种方式。
mobl是主要使用web前台技术，内容一般通过javascript动态产生，国际化也是通过javascript调用json格式的文件来实现的。
这是一个简单的不能再简单的mobl的json语言文件：

{
	"Tip calculator":"小小计算器",
	"Click me":"点我",
	"You clicked me!":"被你点了"
}

再看看怎么使用这个语言文件

以小小计算器程序为例，打开TipCalculator.mobl文件。
首先在开头引用“import mobl”，i18n用到的方式在这个包里。
然后通过“fetchLanguageBundle(“zh.json”);”把json语言文件导入。
最后把原来使用字符串的地方，应“_()”函数包起来就得了。（“_()”好像Drupal呀。）
修改后的TipCalculator.mobl文件如下：

application TipCalculator

import mobl
import mobl::ui::generic

screen root() {
	script {
  	  fetchLanguageBundle("zh.json");
  	}

	var amount     =  20
  	var percentage =  10

  	header(_("Tip calculator"))
  	group {
	    item { numField(amount, label="amount") }
	    item { numField(percentage, label="percentage") }
	    item { "$" label(amount * (1 + percentage/100)) }
	}
	group{
		button(_("Click me"), onclick={
		  alert(_("You clicked me!"));
		})
	}
}

完成后的程序，可以在这里测试。

好了虽然能支持中文了，但是还是希望早日用上支持中文的mobl IDE。

mobl 是一个套手机应用开发工具（有自己界面描述语言+编译工具，提供基于Eclilpse的IDE）。完全基于标准web技术(Html+Css+javascript)，可以快速开发手机应用程序，跨平台，支持包括 iOS、Android 和其他支持 HTML5 技术的手机。

优势

• 适合各种支持html5和javascript手机平台
• 开发就是基于web技术,对平台相关的知识需求很少,入手快

劣势

• 不能完全访问移动设备的很多本地特性
• 没有native的app好用,好看

helloworld

从这里下载mobl的开发工具以后。通过Eclipse自动生成一个”mobl project”项目，保存一个简单的应用程序就完成了。生成的代码如下：

application hellomobl

import mobl::ui::generic

screen root() {
	header("Hello world")
}

界面效果是这样的，实际使用效果可以用手机或者支持html5的浏览器直接访问这个页面。

小小计算器

这是一个简单的计算器应用。输入是一个数字和一个百分数，输出是这两个数字乘出来的结果。所有的代码如下：

application TipCalculator

import ui

screen root() {
	var amount     =  20  //定义两个变量
  	var percentage =  10

  	header("Tip calculator") //标题
  	group {
	    item { numField(amount, label="amount") } //把变量amount与数字输入控件绑定
	    item { numField(percentage, label="percentage") } //把变量percentage与数字输入控件绑定
	    item { "$" label(amount * (1 + percentage/100)) } //根据这两个变量，计算，通过标签控件输出
	}
}

界面效果是这样的，实际使用效果可以用手机或者支持html5的浏览器直接访问这个页面。

碰到的问题

• 现在做出来的就是个web应用,如何包装成本地应用,如何发布到app store?
• 中文支持有些问题,在IDE中输入中文会导致编译不通过.但是只是在IDE环境中,直接编辑.mobl文件,通过命令行编译器编译没有问题.

后记

总体来看，使用mobl开发简单的应用速度非常快，语法很简洁。其他的还不太清楚，日后再看。
我不懂移动开发，但是发现mobl还是挺好玩的。欢迎熟悉移动开发的朋友多指正。

如果要把元素旋转度,CSS3的语法是:

transform:rotate(-3deg);

却要写这么多:

   -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
   -moz-transform:rotate(-3deg); /*为Firefox*/
   -ms-transform:rotate(-3deg); /*为IE*/
   -o-transform:rotate(-3deg); /*为Opera*/
   transform:rotate(-3deg); /*为nothing*/

真是够丑的,谁有好办法?

以上内容摘自

1. config.php
2. .htaccess
3. file\*
4. avatar\*
5. background\*