SCADA实例分析之一 --- 计算器页面之 SCADA实现

本文以用APL SCADA实现的 计算器页面 来介绍 APL SCADA原理和 scada脚本写法.  

这个页面可以用 APL平台提供的 浏览器使用.

该页面由我同事Vocational在接触APL后写出, 我加上了相关批注, 对此向Vocational表示感谢!

包含两个文件:  

　　　　　　　　1.  可视化设计描述文件:  calc.sca 

                      2.  脚本处理文件:           calc.scax

入口文件:

　　　　　　　　calc.sca

-----------------------------------------------------------------------------------------------------------------------------------------

1. calc.sca文件:

/*
 此sca页面是 我同事Vocational尝试用 APL平台写出来的  计算器应用.
 我在此 页面加上了批注, 特别地在批注中  加上了对APL和内核的原理解析.   
 在此对我同事 Vocational表示感谢.

 以下代码中相关注释部分: 以 "Paul:" 开始的地方是我的批注. 
paul
2012-09-02

Paul:
 
一. APL中 scada基础知识介绍:

 APL scada是 基于APL基础平台技术和apl脚本技术的基础上, 并参考HTML设计原理, 实现的组态应用平台.

    其中 *.sca文件为  scada页面的可视化设计描述部分.
   *.scax文件为 scada页面的 apl脚本部分.
 
 sca文件其实是 特殊的apl脚本文件, 里面增加了 scada库功能部分.
 
  1.  sca文件中 可视化设计部分.
  
     #begin design scada
     #end design scada  
   
   APL平台中的 可视化设计工具(aplSCADA_Tool.exe)将会识别 这个标记段, 并在可视化保存的时候, 替换上述段的内容.
   
   另外apl脚本中支持嵌入 特定的节点型描述语言, 在 sca文件中, 是用 <LDL> </LDL>段来描述 可视化积木信息的.
   关于LDL请参考 APL文档中 关于LDL语言的介绍.

  2. APL scada基础规范:
 
   A. APL scada窗体类似 浏览器窗体, 是一个 元素容器 + 脚本事件处理的 窗体.
   
    APL scada窗体 对应在 某个页面中的变量是  $$scadaWnd, 脚本中可以利用这个对象 处理窗体属性和方法.
    APL scada窗体 中放置一个 根积木(容器积木(brick_combination))占满APL scada窗体, 对应在页面中的变量是 $$I, 其他积木是 放在 $$I里面( 支持多层积木关系 )
    APL scada窗体 在 页面中放置了 $$main变量, 这个留给 exe开发者的接口, 让exe开发者可以在 exe框架中 提供扩展的脚本方法库.
     比如:  在APL scada脚本处理中, 如果希望 主程序框架处理一个命令, 可以调用 $$main->onCmd( $cmd ) ; 让exe开发者处理 onCmd动作.
    
   B. 积木的UI基础属性( 这个可以参考HTML中box模型 ), 包括了 外部空白(Margin) + 内部空白(Padding) + 边框(Border) + 背景(Background) )

  3. 可视化设计基础:
  
    在可视化设计过程中, UI工程师 放到页面的积木 会自动分配 脚本中变量名( $xxx ), 这样 软件工程师可以利用积木变量名操作积木.
   
  4. APL scada原理:
  
    A. APL scada窗体构建 脚本上下文( context ), 准备全局对象( $$main, $$scadaWnd ... )
    B. 转给 脚本引擎(aplScriptEngine.dll) 加载脚本( xxx.sca ).
    C. APL scada窗体 在脚本加载完成后, 检查上下文中的 $$I变量, 把$$I以及$$I包容的积木描述 转换成 积木对象, 并完成 积木对象到积木描述的聚合处理.
     
     以$$I为例,  <LDL>中描述的$$I实际是以 万能容器 实现的, 当脚本加载完成, APL scada窗体再把$$I转为APL scada窗体中的 积木对象,
    并完成对 对应的$$I万能容器对象的聚合.     
     因此, 请注意:  脚本中积木对象在 加载过程中 和 加载完成后, 是有区别的.
    
   D. 事件处理:
     
     积木的事件用 属性存储, 当触发事件时候, 再转给 脚本引擎解析脚本执行.
     
      如:   
        $brick_0.onClick = 'onZero();';  // 这个定义 $brick_0积木的 onClick事件处理:  调用onZero()方法. 
     
*/

 

#begin design scada
<LDL>

# Paul:
#  根积木定义
#    积木背景支持了:  颜色填充( 支持alpha, 支持渐变填充 )/图片(各种方式)/ 颜色填充+图片(因图片可以支持alpha)
% $$I
[type] brick_combination
[border.type] none
[bgn.type] common
[bgn.color] DarkBlue
[bgn.color2] White
[bgn.fillStyle] TopToBottom

# 这是根积木的 子积木描述, 注意: 可以调整子积木次序.
% $$I.sons
[] $brick_result
[] $brick_flag
[] $brick_0
[] $brick_1
[] $brick_2
[] $brick_3
[] $brick_4
[] $brick_5
[] $brick_6
[] $brick_7
[] $brick_8
[] $brick_9
[] $brick_mc
[] $brick_mr
[] $brick_ms
[] $brick_backspace
[] $brick_ce
[] $brick_clear
[] $brick_sign
[] $brick_dot
[] $brick_mod
[] $brick_fraction
[] $brick_calc
[] $brick_add
[] $brick_sub
[] $brick_mul
[] $brick_div
[] $brick_mplus
[] $brick_sqrt

#Paul:  这是 结果输出框, edit积木, 是CEdit包装.
% $brick_result
[type] brick_Edit
(x) 6
(y) 8
(width) 220
(height) 26
[border.color] Blue
[border.type] common
(text) 0.
(WS_VISIBLE) 1
(WS_EX_CLIENTEDGE) 1
(ES_RIGHT) 1
(ES_READONLY) 1
(ES_AUTOHSCROLL) 1
(font.name) 宋体
(font.size) 18
(font.weight) 400

#Paul:  brick_Static积木功能完全可以被 brick替代, 只为支持 CStatic测试
% $brick_flag
[type] brick_Static
(x) 8
(y) 42
(width) 30
(height) 26
[border.color] Blue
[border.type] common
[bgn.type] none
(font.name) 宋体
(font.size) 18
(font.weight) 400
(staticType) SS_CENTER

#Paul: brick_Button为 CButton包装
% $brick_backspace
[type] brick_Button
(x) 45
(y) 40
(width) 80
(height) 30
[border.color] Blue
[border.type] common
(text) BACKSPACE
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 12
(font.weight) 200

% $brick_ce
[type] brick_Button
(x) 128
(y) 40
(width) 60
(height) 30
[border.color] Blue
[border.type] common
(text) CE
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_clear
[type] brick_Button
(x) 192
(y) 40
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) C
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_mc
[type] brick_Button
(x) 6
(y) 74
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) MC
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_7
[type] brick_Button
(x) 45
(y) 74
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) 7
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_8
[type] brick_Button
(x) 82
(y) 74
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) 8
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_9
[type] brick_Button
(x) 119
(y) 74
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) 9
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

 

% $brick_div
[type] brick_Button
(x) 156
(y) 74
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) /
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_sqrt
[type] brick_Button
(x) 193
(y) 74
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) sqrt
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_mr
[type] brick_Button
(x) 6
(y) 106
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) MR
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_4
[type] brick_Button
(x) 45
(y) 106
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) 4
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_5
[type] brick_Button
(x) 82
(y) 106
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) 5
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_6
[type] brick_Button
(x) 119
(y) 106
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) 6
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_mul
[type] brick_Button
(x) 156
(y) 106
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) *
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_mod
[type] brick_Button
(x) 193
(y) 106
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) %
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_ms
[type] brick_Button
(x) 6
(y) 138
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) MS
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

 

% $brick_1
[type] brick_Button
(x) 45
(y) 138
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) 1
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_2
[type] brick_Button
(x) 82
(y) 138
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) 2
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_3
[type] brick_Button
(x) 119
(y) 138
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) 3
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_sub
[type] brick_Button
(x) 156
(y) 138
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) -
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

 

% $brick_fraction
[type] brick_Button
(x) 193
(y) 138
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) 1/x
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

 

% $brick_mplus
[type] brick_Button
(x) 6
(y) 170
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) M+
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_0
[type] brick_Button
(x) 45
(y) 170
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) 0
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

 

% $brick_sign
[type] brick_Button
(x) 82
(y) 170
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) +/-
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_dot
[type] brick_Button
(x) 119
(y) 170
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) .
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

% $brick_add
[type] brick_Button
(x) 156
(y) 170
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) +
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400

 

% $brick_calc
[type] brick_Button
(x) 193
(y) 170
(width) 35
(height) 30
[border.color] Blue
[border.type] common
(text) =
(WS_VISIBLE) 1
(font.name) 宋体
(font.size) 14
(font.weight) 400
</LDL>
#end design scada

//Paul:  加载 脚本处理部分
//  也可写为:  include "/calc.scax" ;
//    两者差异是 include( "/calc.scax" ) ; 调用会获得方法的返回值, 而上述写法不会取返回值.
include( "/calc.scax" ) ;

 

-----------------------------------------------------------------------------------------------------------------------------------------

2. calc.scax文件:

// Paul: 各个积木的事件定义.

#数字键功能
$brick_0.onClick = 'onZero();';
$brick_1.onClick = 'onInput("1");';
$brick_2.onClick = 'onInput("2");';
$brick_3.onClick = 'onInput("3");';
$brick_4.onClick = 'onInput("4");';
$brick_5.onClick = 'onInput("5");';
$brick_6.onClick = 'onInput("6");';
$brick_7.onClick = 'onInput("7");';
$brick_8.onClick = 'onInput("8");';
$brick_9.onClick = 'onInput("9");';
$brick_dot.onClick = 'onDot();';

#存储键功能
$brick_mc.onClick = 'onMC();';
$brick_mr.onClick = 'onMR();';
$brick_ms.onClick = 'onMS();';
$brick_mplus.onClick = 'onMPlus();';

#退位,退格
$brick_backspace.onClick = 'onBackSpace();';

#清除当前
$brick_ce.onClick = 'onClear();';

#清除所有
$brick_clear.onClick = 'onReset();';

#运算
$brick_sign.onClick = 'onSign();';
$brick_mod.onClick = 'onPercent();';
$brick_fraction.onClick = 'onFraction();';
$brick_add.onClick = 'onAdd();';
$brick_sub.onClick = 'onSub();';
$brick_mul.onClick = 'onMul();';
$brick_div.onClick = 'onDiv();';
$brick_sqrt.onClick = 'onSqrt();';

#计算最终结果
$brick_calc.onClick = 'onCalc();';

#全局变量
$isFirstInput = 1; #是否是第一次输入
$store = 0;
$op1 = 0;
$op = 0; #0=无操作,1=加,2=减,3=乘,4=除

// Paul:
//     脚本中方法定义:   function( ... )  { ... }
function TrimZero($str){#去掉结果最右边没用的0
 if(isString($str)){
  $text = trimRight($str,"0");
  if(getRight($text,1) == "."){
   $text = trimRight($text,".");
  }
  
  return $text;
 }
 return $str;
}

function onZero(){#输入0,需要检查多次输入的是否都是0,多次输入的都是0那么实际只显示一个0
/*
Paul:
 当方法中使用全局变量,  需要用 extern $xxx ; 申明.
*/
 
 extern $brick_result;
 extern $isFirstInput;
 
 $text = $brick_result->getText();
 $len = strlen($text);
 
 if($len == 1){
  if(getElement($text,0) != "0"){
   onInput("0");
  }else{
   $isFirstInput = 0;
  }
 }else{
  onInput("0");
 }
}

function onInput($char){#通用输入
 extern $brick_result;
 extern $isFirstInput;
 
 if($isFirstInput != 0){
  $isFirstInput = 0;
  $brick_result->setText($char);
 }else{
  $text = $brick_result->getText();
  $text += $char;
  $brick_result->setText($text);
 }
}

function onBackSpace(){#退格
 extern $brick_result;
 
 $text = $brick_result->getText();
 $len = strlen($text)-1;
 if($len > 0){
  $text = getLeft($text,$len);
  $brick_result->setText($text);
 }
}

function onClear(){#清除当前
 extern $isFirstInput;
 extern $brick_result;
 
 $isFirstInput = 1;
 $brick_result->setText("0.");
}

function onReset(){#全部清零
 extern $isFirstInput;
 extern $op1;
 extern $op;
 extern $brick_result;
 
 $isFirstInput = 1;
 $op1 = 0;
 $op = 0;
 $brick_result->setText("0.");
}

function onCalc(){#计算
 extern $op;
 extern $op1;
 extern $isFirstInput;
 extern $brick_result;
 
 $isFirstInput = 1;
 
 if($op == 0){#直接点击=按钮
  $op1 = toReal($brick_result->getText());
 }
 
 if($op == 1){#加法
  $op1 += toReal($brick_result->getText());
 }
 
 if($op == 2){#减法
  $op1 -= toReal($brick_result->getText());
 }
 
 if($op == 3){#乘法
  $op1 *= toReal($brick_result->getText());
 }
 
 if($op == 4){#除法
  $tmp = toReal($brick_result->getText());
  if($tmp != 0){
   $op1 = $op1 / $tmp;
  }else{
   messageBox(NULL,"被除数为零!");
  }
 }
 
 $brick_result->setText(TrimZero(toString($op1)));
 
 $op = 0;
}

function onAdd(){#加法处理
 onCalc();
 
 extern $op;
 $op = 1;
}

function onSub(){#减法处理
 onCalc();
 
 extern $op;
 $op = 2;
}

function onMul(){#乘法处理
 onCalc();
 
 extern $op;
 $op = 3;
}

function onDiv(){#除法处理
 onCalc();
 
 extern $op;
 $op = 4;
}

function onSqrt(){#求平方根
 extern $brick_result;
 
 $tmp = toReal($brick_result->getText());
 if($tmp > 0){
  $brick_result->setText(toString(sqrt($tmp)));
 }else{
  messageBox(NULL,"负数不能求平方根!");
 }
}

function onPercent(){#求百分数
 extern $brick_result;
 
 $tmp = toReal($brick_result->getText());
 $tmp = $tmp*100;
 $brick_result->setText(toString($tmp));
}

function onFraction(){ #求倒数
 extern $brick_result;
 
 $tmp = toReal($brick_result->getText());
 if($tmp != 0){
  $tmp = 1/$tmp;
  $brick_result->setText(toString($tmp));
 }
}

function onSign(){#求相反数
 extern $brick_result;
 
 $tmp = toReal($brick_result->getText());
 $tmp = 0-$tmp;
 $brick_result->setText(toString($tmp));
}

function showFlag($flag){#标志显示
 extern $brick_flag;
 $brick_flag->setText($flag);
}

function onMC(){#清除存储在存储器的数据
 extern $store;
 $store = 0;
 
 showFlag("");
}

function onMS(){#存储当前数据到存储器
 extern $store;
 extern $brick_result;
 
 $store = toReal($brick_result->getText());
 
 if($store != 0){
  showFlag("M");
 }
}

function onMR(){#显示存储在存储器的数据
 extern $store;
 extern $brick_result;
 
 $brick_result->setText(TrimZero(toString($store)));
}

function onMPlus(){#将当前的数据和存储器中的数据相加,结果放到存储器中
 extern $store;
 extern $brick_result;
 $store += toReal($brick_result->getText());
 
 if($store != 0){
  showFlag("M");
 }
}

function findchr($strSrc,$ch){#在字符串中查找字符
 $len = strlen($strSrc);
 
 while($len > 0){
  if(getElement($strSrc,$len) == $ch){
   return $len;
  }
  $len -= 1;
 }
 
 return -1;
}

function onDot(){#输入.的时候要检查之前是否含有小数点
 extern $brick_result;
 
 if(findchr($brick_result->getText(),".") <0){
  onInput(".");
 }
}

 ----------------------------------------------------------------------------------------------------------

可视化工具 + 运行 截图: