Blog | Phodal - A Growth Engineerhttp://www.phodal.com/blog/2015-12-20T09:14:29+00:00BlogDOM与UI测试的思考2015-12-20T09:14:29+00:002015-12-20T09:13:54.479955+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/think-about-ui-test/Web开发中,UI是很难测试的部分,即使看上去他们有100%的相似度,但是可能他们差了1px。开发过程中,我们很难保证我们的UI不被破坏。
尽管,有PhantomCSS这样的可以Diff UI变化的工具,但是毕竟还是太麻烦了。当我们UI发生变化的时候,我们都需要生成相应的截图。在开发初期,这样的功能反而会影响开发进度。在可预见的用途里,它似乎更适合用于网站维护。然而,维护就意味着功能已经成熟了。
我们可以Diff DOM的变化,但是似乎很难去Diff CSS的变化。
一份很旧很旧的文档——PHODAL与UI设计2014-12-01T14:37:58+00:002014-12-01T14:48:45.117429+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/a-old-blogpost-of-phodal-and-ui-design/偶然间看到一份很旧的文档,放在Google Drive上,应该是很早以前的Google Document(Saturday, October 10, 2009 at 20:58)。那个时候Google还是可以访问的——[Phodal与UI设计](https://docs.google.com/document/d/1mOolmgwyvuth9rPaaLdx7vp1x6tk2PG02H1fIh9lelA/edit?usp=sharing)
有点小激动,于是稍微排版了一下,送了上来。
这是我的第一篇博客吧。
##PHODAL与UI设计
作为一种UI设计语言,Phodal的出现是为了解决矛盾与冲突,一种专为快速开发而设计的语言,它解决了以下几个问题,倒不如说是PHODAL的优点:
1. 减少产品开发周期。
2. 增加DIY程度。
3. 市场推广与多样化。
MTK方案使用了相同的东西太多了,而且对于快捷菜单的通用化,使得人们一看就知道,它是MTK的方案。除了外壳的改变,它们并没有作出多大的改变,仅管有时支持JAVA,但未免在智能化、高端化上没有任何竞争力,而随着GOOGLE的Android的市场化,低价的智能手机充斥着世界的角落。
因此,有必要在平台上选择更多的东西,通用的平台、简单的UI方案。
###从简单的程序出发
对于PHODAL而言,一切是基于图形和坐标的,而在语法上也融入也更多的这些元素,至于"Hello,World"这种例子,在Phodal上与显得十分麻烦,除非一直使用默认的系统设置,也就是说省略其它因素,当然,也可以使用print"Hello,World"。只是,我们缺少更多语句来具体描述,导致当运行时,会在初始界面的左下端输出"Hello,World"。因此,在Phodal中初始坐标的位置是在屏幕的左下角(0,0),而Phodal的定位语句则是Locate(x,y,z),z在3D中自然是Z坐标的含义,但是在Phodal环境中也是一样的,而在Phodal中的2D环境也拥有另一种效果。
我们将Phodal基于多媒体设备及移动平台来开始Phodal之旅,对此,在这此设备中的电量、时钟、信号等基本、简单元素被列在简单的范围内。
[MAIN]
LOAD LINE.CLOCK //LINE以LINE为前缀的图形格式。
SET BACKGROUNP //设为背景
{
LOCATE(X,Y,Z) //定位
BITMAP(X,Y,Z) //设置大小
}END
LINE ANGEL.CLOCK //以ANGEL为前缀的可执行程序,源于DOPOS
似乎一切都通俗易懂,我们先对最后一行语句进行解释LINK angel.Clock。为什么是LINK呢?原因很简单,Phodal需要判断当前的程序是否存在,如果存在将会自动运行,而不存在则该命令无效。当然,如果可以确定该程序的存在,那么就应试是:
KERNEL angle.Clock
而且如果LINE.Clock是已确定的(可以符合当前运用),那么:
[MAIN]
LOAD line.Clock
SET BACKGROUNP(X,Y,Z)
KERNEL angle.Clock
如果这是一个系列的动画或贴图呢?当然,Phodal也有一个解决方案。首先,这些贴图的大小是合适的,那么
[MAIN]
LOAD line.clock(n) //从0开始到N所指N的图形载入。
或许要让这些贴图形成循环的动画。
SET BACKGROUP
{
LOAD line.clock(n)
TIME=M
}REPEAT(N)
如果不将edit.clock(Phodal语言存储的格式,同样是以EDIT为前缀)列入记录用户数据范围内,那么完整的EDIT.CLOCK就是:
[MAIN]
LOAD LINE.CLOCK
SET BACKGROUNP(X,Y,Z)
KERNEL ANGEL.CLOCK
PATH=CLOCK@MAIN@PHODAL@OS#C //等同于 C:\OS\Phodal\Main\Clock
多数文件(例如,LINE.clock)就保存在里面,而EDIT.CLOCK将会在MAIN文件夹下的MAIN文件夹保存一份,当然两份EDIT.CLOCK的修改是同时的。
小结:对于基本的事情也可以使用上述方法进行。
##更多的东西:2.5D方案
在游戏的设计过程中,是否选择使用3D设计是一个很值得讨论的问题。当然,仅管有时2D的游戏看起来很像3D,也就是3D渲染2D。记得我在学习游戏开发的时候,David Conger讲过另外一种技术———2.5D技术(伪3D)。一张2D的图片+一张2D的图片=2.5D的场景。
当然,在Phodal中也可以把一张2D图片放在3D场景中,即Phodal中的3D方案,仅管如此,但是使用3D引擎的难度往往比2D难度大。
这个设计的出现在很大程度上说,决定也Phodal的语句,因为这个魔法阵几乎包含也一切Phodal语句。首先,构建基本平台———魔法阵背景。
[MAIN]
LOAD line.picture(n)
SET BackGrounp:Central
{
Locate(x,y,z)
Bitmap(x,y,z)
}END
LOAD line.SFlowers(n)
SET BackGroup:RIGHT
{
Locate(x,y,z)
Bitmap(x,y,z)
}END
事实上,所有的Bitmap(x,y,z)是可以省略的,因为这是一种用比喻法来解决不同屏幕尺寸的一种方案。因此在多数情况下,我们可以使用:
SET BackGroup(x,y,z)
我们要说明一下,SET BackGroup的用法,而其实这是Phodal设计上的不负责任的表现一种表现,因为由Phodal的那几个语句是无法解决这个问题。原因是,不想解决。作为一种UI设计语言,没有必要使UI设计师学习更多的语法内容。引入越多的东西就意味着,更多的BUG及更多的问题,因此Phodal在设计时就在尽量减少语句。
计算机程序是由人来阅读的,计算机读的是什么?答案是:1和0。计算机可以毫无怨言地处理程序的复杂性,但这对于人来说却并非如此。难以理解的代码将会极大地降低大多数人的生产效率。而易于理解的代码则会提高生产效率。并且我们将在这样的代码中看到漂亮性。简洁性是有助于漂亮代码的因素之一
——Yukihiro Matsumoto(Ruby创建者)
因此在设计的时候Phodal就开始在注重灵活性。但是,这个问题怎么解决呢??
Phodal有时很懒,因为其它语言可以解决这个问题。我们可以在100行代码内解决RIGHT(右对齐),而在Phodal中还有这些环绕(SURROUND),居中(CENTRAL)
,LEFT(左对齐)及自动排列(Auto)。懒惰的那外一个原因是:这些部件不可以只用P
hodal解决。
不过,其实另一种解决方法可以是:
SET BackGrounp:Part.RIGHT //用Phodal定义RIGHT
{
LOAD line.SFlowers(n)
{
LOCATE(X,Y,Z)
Y=Y+5
Distance=3
}REPEAT(N)
}END
不过,其中大概会出现许多问题,当然了,用SET BackGrounp定义不是我们所提倡的,因为Phodal不是一种复杂的语言。我们并不想在Phodal中引入这些。
REPEAT(N)?????
啊哈,我们在前面犯了一个错误,就是那个魔法阵,难怪看起来很奇怪。
我们应该把EDIT.MAIN动一下手术
[MAIN]
SET BackGrounp(I,J,K):Central
{
LOAD line.picture(n)
Bitmap(x,y,z)
}REPEAT(n) //没错,这就是循环语句,精简。从1到N的循环
SET BackGroup(I,J,K):RIGHT
{
LOAD line.SFlowers(n)
}REPEAT(N)
看起来,似乎更加不错。作为一种简单的语言,Phodal的来源是:Phoenix Origin Design Assist Language。对,就是一种设计援助语言,仅管很奇怪,但是就是它的用途。
##更多的PART
??
Phodal不是不想增加麻烦吗?
接着,我们定位在Picture(3)上(圆环),程序将要漂在魔法阵上咯:
[MAIN]
LINK line.picture(3)
SET BackGrounp:Line.Picture(3) //下列的语句将定位在Line.Picture(3)这张图片上
{
SET BackGrounp:Central
{
LOAD INFO.SETTINGS:number_programer //读取系统信息文件INFO.SETTINGS(以INFO为前缀)中设置的程序数量
N=number_programer
{
LOAD INFO.SETTINGS:progrmaer_names(n) //读取系统信息文件第N个程序的名称
NAME=progrmaer_names(n)
LOAD line.(name) //读取指定的图形文件
SET TEXT(X,Y,Z):PRINT(name)
}REPEAT(N)
}END
}END
当然,这些东西迫使我们需要更多的东西。比如,当一个程序被选中时,我们应在中心位置改变它的图标。
SET BackGrounp:PART.Choice
{
.... //定义文件先省略
}
EVENT.Choice //同样可以用EVENT引用
{
Link line.(name)
SET BackGround //事实上,这句的主要目的就是更换中心的图标。而呢,就要使用到BITMAP
{
LOCATE(X,Y,Z)
BITMAP(X,Y,Z)
}EVENT.END
}END
EVENT.RUN
{
link line.(name)
SET BackGround:PART.TD //效果的定义及使用
{
{
LOCATE(X,Y,Z)
TIME=i:Y=Y+N //在I秒内图形向上移动N个距离
TIME=i:Y=Y-N
}REPEAT(N)
}END
}EVENT.END
确实不错,当程序运行时,使用跳动的效果。不过,这个想法可不是原创的。
如果说上述代码是在发挥触屏机器的优势的话(或许鼠标),那么,接下来的代码可是KEYBOARD地,当然除非你愿意另外加上一个工具条,用于实现这个效果。
EVENT.KEYBOARD
SET SWITCH
{
CASE(1) KEYBOARD.LEFT(N=N+1) //在EDIT.MAIN调整到其它程序
CASE(2) KEYBOARD.RIGHT(N=N-1)
CASE(3) KEYBOARD.DOWN
{
GOTO EDIT.HOME //转到EDIT.HOME也就是主目录,跳出EDIT.MAIN
NO=NO-1
}
CASE(4) KEYBOARD.UP
{
GOTO EDIT.HOME
NO=NO+1
}
注:在此节的介绍中,有许多内容出了错误,当然,我们将在稍后的版本中进行修改
##回到HOME
EDIT.HOME是主桌面上的文件,换句话说,初始化之类的也可以在此进行,Phodal语言来自于DOPOS,而在DOPOS中,一切是基于EDIT.文件,在DOPOS中使用即时代码生成技术,但是许多东西在非DOPOS平台改变也,比如,在DOPOS的EDIT.BOOT时,有这样一个片段
[boot]
load boot.drivers
kernel boot.system
kernel boot.media
kernel boot.support
我们不去讨论微内核结构的优越性,我们在讲Phodal,而这些元素在Phodal中省略了,或许说不能使用更为恰当,因为对于系统结构的不清晰。这也就是Phodal在减少语法的另一个原因。过多的语法会在平台上影响Phodal的可移植性。但是,edit.main在DOPOS中或者现在使用的都把EDIT.main作为事件或者系统的中心。
相对较为完事的EDIT.HOME
[MAIN]
LOAD JPG.BACKGROUNP
SET BCAKGROUNP:CENTRAL
LOAD EDIT.CLOCK
LOAD EDIT.POWER
LOAD EDIT.INFO
SET REPEAT
{
LOAD INFO.SYSTEM:ANGEL.(NAME)
LINK EDIT.(NAME)
}REPEAT(N)
LOAD EDIT.MAIN:LEVEL 7
........ //键盘事件
[HELP]
FONTS=
LOAD EDIT.(PROGRAM):text.help
LOCATE(X,Y,Z):PRINT TEXT.HELP
LEVEL=5 //优先级设置,7为最高,0为最低,没有则,服从调度
[tips]
SET BACKGROUNP:LINE.BLUE
LOAD EDIT.(PROGRAM):TIPS.HELP
PRINT TIPS
LOCATE (X,Y,Z)
LEVEL=4
[SETTINGS]
FONTS=
FONTS_SIDE=
COLOR=
PATH=
[INFO]
VERSION=0.1
结束语:Phodal运行说明:在系统的目录下产生一个MAIN文件夹,那么每当使用一种LINK edit.PROGRAM时,将在MAIN目录下创建相应的PROGRAM文件夹,而图标等资源将由对应的edit.program产生对应的PROGRAM,那么link.program位于PROGRAM目录下。
而要修改这些只需在[settings]下添加完路径。在Phodal中可以使用其它语言对其进行进一步优化。