月度归档:2012年04月

WebKit for Android分析: AutoFill

Android 4.0 Browser增加了表单自动填充功能,比较了一下UC、QQ、Opera、海豚浏览器等,都没有提供此项功能。问了很多人,也没人用过,所以就上网收集了相关资料。

先看看维基百科关于autofill词条的解释吧:

Autofill is a function in some computer applications or programs, typically those containing forms, which fills in a field automatically.

Most of the time, such as in Internet Explorer and Google Toolbar, the entries depend on the form field’s name, so as to not enter street names in a last name field or vice-versa. For this use, RFC 3106 proposed names for such form fields, but in the HTML 5 specification this RFC is no longer referenced, thus leaving the selection of names up to each browser’s implementation.

Chrome浏览器对于自动填充的说明:

您是否厌倦了反复填写信息相同的网络表单?您可以使用自动填充功能,只需点击一下便可完成表单填写。

如果需要详细了解自动填充的来龙去脉,可以阅读RFC 3106。简单说,自动填充就是为了提升用户体验整出来的东西,有了它,你就不用每次注册帐号时无聊的填写姓名、地址、城市等资料了。chrome浏览器做的更绝,信用卡卡号都可以自动填充。

Android浏览器的自动填充条目有:Full name、Company name、Address、Zip code、Country、Phone、Email等。Browser中有一个AutoFillProfileDatabase类来处理其存放,具体说就是保存在autofill.db数据库中。而WebKit的WebSettings.AutoFillProfile类就是用来表示这些字段信息的。整个处理逻辑也不复杂。

一切看起来很美妙,但要真正用起来还有许多障碍需要克服:

1、因为涉及到隐私,需要在浏览器的设置中开启Form Auto-fill选项;

2、用户需要比较勤快,事先要将上面的个人信息录入;

3、需要网站的支持,这些信息如何和表单上的字段对应,这就是RFC 3106所定义的,表单控件的命名需要遵守规范。RFC 3106给出了一个例子:

<HTML>
<HEAD>
<title> eCom Fields Example </title>
</HEAD>
<BODY>
 <FORM action="http://ecom.example.com" method="POST">
Please enter card information:
<p>Your name on the card   <INPUT type="text" name="Ecom_Payment_Card_Name" SIZE=40>

<br>The card number
  <INPUT type="text" name="Ecom_Payment_Card_Number" SIZE=19>
<br>Expiration date (MM YY)
  <INPUT type="text" name="Ecom_Payment_Card_ExpDate_Month" SIZE=2>
  <INPUT type="text" name="Ecom_Payment_Card_ExpDate_Year" SIZE=4>
  <INPUT type="hidden" name="Ecom_Payment_Card_Protocol">
  <INPUT type="hidden" name="Ecom_SchemaVersion"
         value="http://www.ecml.org/version/1.1">
<br>
<INPUT type="submit" value="submit"> <INPUT type="reset">
</FORM>
</BODY>
</HTML>

非常遗憾的是,国内的网站,包括京东、亚马逊中国、当当、淘宝等均不支持。

4、用户敢用么?某些网站可能会试图捕获隐藏字段或难以发现的字段中的信息,因此,请勿在您不信任的网站上使用自动填充功能。

5、某些网站会阻止浏览器保存您输入的内容,因此,无法在这些网站上填写表单。

总结:

1、自动填充功能基本上是无用的,至少在国内的环境下。

WebKit for Android分析:表单控件

所谓表单控件,指的是html中的radio, checkbox, text, button, select等。在进行WebKit移植时,需要解决两件事:渲染和事件处理。下面就分析WebKit for Android渲染和事件处理。

一、表单控件的绘制

表单控件的渲染并不难,不外乎就是绘图和贴图。但在WebKit中,为了达到和平台一致的视感(look & feel), 定义了一个RenderTheme,包含了paintButton, paintCheckbox, paintTextField等方法,具体实现则由各平台的移植层实现。Android平台的RenderTheme类实现为RenderThemeAndroid,具体的控件绘制类位于Source/WebKit/android/下,类关系图如下:

html_control_rendering

类图中并没有TextField和TextArea的绘制类,这是因为文本框只需使用线条绘制边框及绘制文字即可,Webkit有默认的实现,Android移植中没有重新实现。

RenderSkinNinePatch类是一个实用类,用于处理图片拉伸问题。RenderSkinCombo的实现实际上是贴一个背景图片,让人感觉是一个ComboBox/ListBox,但是ComboBox/ListBox的宽高不是固定的,这样在贴图时避免不了需要对图片进行拉伸。RenderSkinNinePatch则是将图片划分为9个部分,避免拉伸带来失真。

二、表单控件的事件处理

表单控件还需要响应用户的事件,比如点击button, 选择radio button,输入文本等等。对于radio button/checkbox而言,处理比较简单,只需更新一下状态数据和图片,而ComboBox/TextField/TextArea的处理要复杂一些,因为涉及到输入。在android webkit实现中,ComboBox和文本框是调用系统控件实现的。

- 待续

打造称手的开发工具-Eclipse篇

古人云,工欲善其事,必先利其器,孙悟空为了找到称手的兵器,苦苦寻觅,终于寻得定海神针一枚,打造出如意金箍棒,但有多少程序员能够静心专研手头的工具呢?从事软件开发多年,接触了各种各样的软件开发工具,远的不说,代码编辑工具就接触过不少,Turbo C/Visual Studio/C++ Builder/Source Insight/UltraEdit/Vim等,但都没有精通,更别说按照自己的喜好增加一些脚本/插件。转入Android开发后,又开始接触Eclipse,发现Eclipse真是个好东西。但要让自己运用的得心应手,还需要专研一些设置。本文就是记录一下我在开发过程中的一些Eclipse设置。

1. 过滤某些文件/文件夹

阅读android源码(C++)及chromium源码时,选择新建工程的选项: Makefile Project with Existing Code。众所周知,android和chromium的源码超级大,Eclipse打开这些大工程,在Refresh Workspace和Indexer时非常慢,而且极占CPU。通常情况下,我们可能只对其中的部分文件感兴趣,有必要进行一下过滤。Eclipse提供了Include Filter和Exclude Filter,顾名思义,Include Filter就是只包含满足条件的文件/文件夹,Exclude Filter则是排除满足条件的文件/文件夹。可以定义多个Filter。方法如下:

Project Explorer中,选定某个目录,点击右键,选择Properties,找到Resource Filters,点击Add…:

Eclipse_Filter

可以选择按Name/Project Relative Path/Location/Last Modified/File Length等等进行匹配,我一般使用Project Relative Path进行匹配,也可以使用*.svn这样的通配符过滤掉svn目录。


2. 导入google c++编程风格

chromium C++代码采用的是google c++ code style。google c++编码规范被李开复称为最好的C++编程规范,有趣的可以到这里看看,条目非常多。

Eclipse也非常强大,可以支持不同的code style,而且这些style可以自定义,还可以导入/导出(需要注意的是,Eclipse的code style主要针对代码缩进/空格/括号位置,并不涉及变量命名等等)。google也提供了针对Eclipse的xml配置文件,我们只需导入到Eclipse即可,省去繁琐的配置。下面就说说导入方法。

  • 从http://google-styleguide.googlecode.com/svn/trunk/下载eclipse-cpp-google-style.xml
  • 打开Eclipse,选择Window | Preferences 菜单。
  • 在弹出对话框左边中选择C/C++ | Code Style。然后点击后侧的Import…按钮
  • 选择所下载的eclipse-cpp-google-style.xml文件,可以看到Select a profile下面的下拉框中多了Google C++选项。
  • 点击Apply按钮

3. 常用快捷键

CTRL+TAB 头文件和c/c++文件之间切换
CTRL+SHIFT+R 对话框中输入文件名(有联想功能),快速打开文件
CTRL+SHIFT+R 对话框中输入文件名(有联想功能),快速打开文件
CTRL+o 输入方法(函数)名,可快速定位到方法(函数)
CTRL+l 输入行号,快速定位到指定行
CTRL+h 打开文件搜索对话框

4. 保存文件时去掉行尾的空格

在gerrit中review代码时,如果行尾包含空格,就会显示出刺眼的红色。同样,使用git diff命令查看对文件的修改,如果行尾包含空格,也会显示刺眼的红色。在Eclipse中可以通过如下设置,自动去掉行尾的空格:

点击菜单Window -> Preferences -> C/C++ -> Editor -> Save Actions

然后勾选 Remove trailing whitespace