TI IPNC Web网页之进阶修改

GoDB内嵌HTML

原始的页面里面已经有一个内嵌HTML的例子了，那就是维护支持页面。下图是稍微修改后的页面...请自行脑补。

这里使用的是上一节所说的gdo containter的方法。

打开maintenance.frm文件，该文件包括了一个gdo控件，名字叫做gdoMaintenance，查看该frm文件的Source

<GDO UID="1"
Name="gdoMaintenance"
X="334"
Y="70"
W="800"
H="442"
ProgId="Shell.Explorer.2"
Left="0"
Top="0"
Width="800"
Height="442"
Visible="-1"
StatusBar="-1"
StatusText="-1"
ToolBar="1"
MenuBar="-1"
FullScreen="0"
Offline="0"
Silent="0"
RegisterAsBrowser="0"
RegisterAsDropTarget="-1"
TheaterMode="0"
AddressBar="-1"
Resizable="-1"
Scrollable="0"
/>

这里最主要的是ProgId="Shell.Explorer.2"一项，这里代表该gdo加载一个Shell Explorer，也就是内嵌IE。所以我们添加的话可以复制以上代码到其它的frm文件上，然后修改部分参数，比如说名字，位置，宽高等，然后就可以直接拿来用了。

图形添加的话:

然后我们再来看看maintenance.bas文件。

Sub Form_Load
	dims temp_ver$
	call displayControls(LabelName$,XPos,YPos,Wdh,height)

	#gdomaintenance.h = #gdomaintenance.h*~factorY 	-20
	#gdomaintenance.w = #imgmainbg.w - 30
	#lblnote.h = 47 * ~factorY 

	assignSelectedImage("imgmenu[3]")
	setfocus("imgmenu[3]")
	showSubMenu(0,0)
	#cmdback.hidden = 1
	temp_ver$ = dwnldFile$(".ver_info");
	split(version_info$,temp_ver$,"\n")

	'*** Code modified by karthi on 6-Dec-10 as per the CR dated on 3-Dec-10
	if bkupfirmware = 1 then
		#gdomaintenance.navigate$(~camAddPath$+"\MaintK_en.htm?bkup=1")				'CR-02
	else
		#gdomaintenance.navigate$(~camAddPath$+"\MaintK_en.htm?kver="+version_info$(1)+"&fsver="+version_info$(2))
	endif
		setfocus("lblnote")
End Sub

#gdomaintenance.navigate$(~camAddPath$+"\MaintK_en.htm?kver="+version_info$(1)+"&fsver="+version_info$(2))

MainK.htm文件在相应目录下可发现。

仔细观察maintenance.bas文件，我们可以发现，其中的按钮处理还是由gBasic来搞定，其实我们可以完全脱离gBasic来处理表单。

我们在这一节提到如何添加关键字，你会发现非常麻烦，如果我们使用内嵌HTML来实现那些表单将大大减少工作量。

这样能减少网页这一端的工作量，而boa和system_server那一端还是按照原来那样去做。

我们可以使用cgic库做一个表单和处理表单的程序，交叉编译，然后同样使用navigate方式来指向这个cgi程序所在的url。比如说192.168.1.160/xx.cgi。

CGIC功能简介

CGIC是一个支持CGI开发的开放源码的标准C库，可以免费使用，只需要在开发的站点和程序文档中有个公开声明即可，表明程序使用了CGIC库，用户也可以购买商业授权而无需公开声明。

CGIC能够提供以下功能：

1. 分析数据，并自动校正一些有缺陷的浏览器发来的数据；
2. 接收以GET和POST两种方式发送的数据；
3. 能接受上传文件；
4. 能够设置和接收cookies；
5. 用一致的方式处理From元素里的回车；
6. 提供字符串，整数，浮点数，单选或多选功能来接收数据；
7. 提供数字字段的边界检查；
8. 能够将CGI环境变量转化成C中的非空字符串；
9. 提供CGI程序的调试手段，能够回放CGI程序执行时的CGI状态；

CGIC是一个功能比较强大的支持CGI开发的标准C库，并支持Linux, Unix 和Windows等多操作系统。

这是官网:cgic，里面有相关api的说明。

获取最新源代码的方式;

git clone https://github.com/boutell/cgic

拖下来之后进入cgic文件夹有如下文件:

capture.c  cgic.h     cgictest.c   Makefile    support.txt
cgic.c     cgic.html  license.txt  readme.txt

上面的代码拖下来之后自带了测试的例子：cgictest.cgi和capture。

编译:

make

移植CGIC

1. 修改makefile

SUBDIRS=addclass showclass gLogon update_firmware
CFLAGS=-g -Wall
CC=${BUILD_TOOL_PREFIX}gcc
AR=${BUILD_TOOL_PREFIX}ar
RANLIB=${BUILD_TOOL_PREFIX}ranlib

DEBUGSUBDIRS = $(addsuffix .debug, $(SUBDIRS))
CLEANSUBDIRS = $(addsuffix .clean, $(SUBDIRS))
INSTALLSUBDIRS = $(addsuffix .install, $(SUBDIRS))

.PHONY: $(SUBDIRS) $(DEBUGSUBDIRS)  $(INSTALLSUBDIRS) \
	$(CLEANSUBDIRS)

all: libcgic.a cgictest.cgi capture $(SUBDIRS)

$(SUBDIRS):libcgic.a
	@echo
	@echo Making all in subdirectory $@...
	@$(MAKE) -C $@

$(DEBUGSUBDIRS):
	@echo
	@echo Executing make debug in subdirectory $(basename $@)...
	@cd $(basename $@) ; $(MAKE) debug

主要是添加了BUILD_TOOL_PREFIX这个编译器后缀...还有相应的子文件夹，各个子文件夹将会使用cgic.h和链接libcgic.a库文件..

使用CGIC的思路

从cgic.c的代码可以看出，它定义了main函数，而在cgictest.c中定义了一个cgiMain函数。也就是说，对于使用CGIC编写的 CGI程序，都是从cgic.c中的代码进入，在库函数完成了一系列必要的操作（比如解析参数、获取系统环境变量）之后，它才会调用你的代码（从你定义的 cgiMain进入）

另外一点就是，cgi程序输出HTML页面的方式都是使用printf把页面一行一行地打印出来，比如cgictest.c中的这一段代码。

fprintf(cgiOut, "<textarea NAME=\"address\" ROWS=4 COLS=40>\n");

其实我们还是可以直接使用printf，但是我们还是推荐使用这种做法，因为在调试的时候会用到fprintf来重定向输出，CGI 调试起来比较麻烦，CGIC提供了一个函数可以将环境变量输入到文件，方便调试:

#define SAVED_ENVIRONMENT "/tmp/cgicsave.env"
cgiWriteEnvironment(SAVED_ENVIRONMENT);

调试的另外一种做法就是fprintf写到stderr中，这样在/var/log/boa/error_log会记录这些打印...

CGIC之GET和POST

获取Get请求字符串.

Get请求就是我们在浏览器地址栏输入URL时发送请求的方式，或者我们在HTML中定义一个表单（form）时，把action属性设为“Get”时的工作方式；

在进入我们自己编写的cgi代码之前，CGIC库已经事先把这个字符串取到了，我们可以在程序中直接获得，要做的仅仅是在你编写的cgiMain方法前面加入以下声明：

extern char *cgiQueryString;

我们在浏览器执行执行url时多加入?xxxx这样就能查看GET的字符了...

当form执行post操作时，我们的程序通过下面的函数来得到form中各个变量的值，这个函数的第一个参数:是form的名字,第二个和第三个存储变量值的buf相关.

cgiFormString("name", name, 241);

cgiFormStringNoNewlines     //用来去掉换行符（如果用户是在一个TextArea里输入字符的话）；
cgiFormStringSpaceNeeded     //用于测试输入值的长度，可以以此为依据，然后按需精确分配缓冲区。

cgic之表单处理

1. 按钮处理

下面代码检测html表单中按钮按下动作,该函数的唯一参数name对应html该按钮的name值

//函数原型
//cgiFormResultType cgiFormSubmitClicked( char *name)
if ( cgiFormSubmitClicked("rfs") == cgiFormSuccess ) /*跟新内核*/
{
  //...

}

//从指定域中获取整数值，比如说下拉菜单...
cgiFormResultType cgiFormInteger( char *name, int *result, int defaultV) ;

system_server进程之外进程获取SysInfo结构体的方法

网页上所有设置都保存到一个SysInfo的结构体上，而这个结构体有保存到syscfg.cfg文件上，现在我们需要设计另外几个进程，我们应该怎样和其它进程通信呢？

  //头文件必须至少包括这三个
#include <sys_env_type.h>
#include <file_msg_drv.h>
#include <File_Msg_Def.h>
  //....
  //这是初始化必须先执行,另外关键的是FILE_SC_MSG另外定义，一个进程定义一个。
  if (InitFileMsgDrv(FILE_MSG_KEY, FILE_SC_MSG) < 0) {
	  exit(1);
  }
//通过共享存储获取这个结构体...
SysInfo *pSysInfo = GetSysInfo();
if ( pSysInfo == NULL )
{
	exit(1);
}
//写配置到syscfg文件..在file_msg_drv.h中定义..
ret = fSet_channel_id(3);
if ( ret != 0 )
{
	exit(1);
}

编译链接时必须将三个头文件所在路径告诉编译器;必须将Aprro interface的静态库链接进去;具体做法是:

IPNC_INTERFACE_DIR:=/home/tracyone/work/dm8127/Source/ipnc_rdk/ipnc_app/interface/
APP_LIB_DIR:=${IPNC_INTERFACE_DIR}/lib/
APP_INC_DIR:=${IPNC_INTERFACE_DIR}/inc/
INCULDES:=-I${APP_INC_DIR}
LIBS := $(APP_LIB_DIR)/msg_util.a $(APP_LIB_DIR)/Appro_interface.a \
	   $(APP_LIB_DIR)/file_msg_drv.a $(APP_LIB_DIR)/sysctrl.a \
	   $(APP_LIB_DIR)/sys_msg_drv.a

总结

这样我们就可以脱离恶心的gBasic语言，使用html和c语言来处理表单了，这样有更多的灵活性。

GoDB图片相关的修改

总共两种，

其中Internal Jpegs必须是jpeg编码的图片文件。而GoDB Images则可以为其它格式的图片，然后GoDB自动将其转化为bitmap格式，后缀自动变成.bin，这也就是为啥你在leftMenu.frm中看到的图片的SRC属性都是.bin而实际上在GoDB Images则是.png格式的。

!settings_Off.bin

如果是Internal Jpegs我们则直接!display.jpg

查看Image控件的SRC属性

This attribute lets you specify the filename of the image.

To specify local images use a ! at the beginning of the file Name.

GoDB Converts images to to GoDB Bitmap format doing the build process.

When an image is dragged dropped onto a form in the IDE the SRC

Extension automatically gets changed to .bin.

You need to enable compression (in IDE) for large images to conserve space.

External images should be in the images folder in the current working

directory.

Platforms that support PNG/JPG Image (WIN 32) rendering in the native OS can render external PNG and JPG images. Png usually requires gImgDLL.DLL or a linux so.

背景颜色修改

请修改global.css文件。

里面的关于颜色的表达非常奇怪。可以在gStudi中的帮助搜索css。

COLORNAME=#24bit COLOR in Hex (Similar to the HTML Color).
TXTFLD_SEL_COL=#8080FF

字体相关

修改字体请看gStudio的帮助中lesson9。

控件修改成中文字体之后，你会发现有些控件变化了，比如checkbox和radio的形状变小了，其实这些控件在原有工程也是通过图片来显示的，当你修改这些控件的字体之后，他们找不到对应的图片所以只显示末默认的图标（非常难看）

具体请查看gStudio中的Styles帮助。

在Custom Icons in GoDB一小节中:

Color Icons can also be added into the BDB and should be named CIC[FONT][ASCII CharCode].bin

所以你会发现在Images文件夹下有不少CIC开头的文件，只不过原始的字体是西文字体，改成中文之后就识别不出来了，所以你要修改这些png文件的名字..