[Sciter系列] MFC下的Sciter–2.Sciter中的事件,tiscript，CSS部分自觉学习，重点说明Tiscript部分的常见语法和事件用法。

本系列文章的目的就是一步步构建出一个功能可用，接口基本完善的基于MFC框架的SciterFrame程序，以此作为以后程序的基础。其中，文章中按照如下逻辑编排（解决如下问题）：

1、使用什么环境

2、完成什么功能

3、如何完成

1、工程环境： 文本编辑器 + Sciter-SDK

建议：由于这里要编写HTML界面，建议找一个你喜欢的编辑工具，如notepad2、Notepad++等。

2、本文完成的功能：编写具有tiscript的HTML页面，并通过Sciter.exe相关功能调试页面。

3、具体步骤如下：

首先，需要说明的是：HTML和CSS部分需要读者自行掌握，不需要太深，但一般的编写要能够在工具的帮助下完成。强烈推荐读者朋友可以先大概地学习一下Javascript的相关语法和事件部分内容，这对于编写tiscript非常有用。

到这里，作为作者，我必须向大家道歉，本人也还没有对JS脚本很熟悉，正在学习中，所以很多地方都是推测和摸索，望读者朋友见谅。

下面正式开始第一部分，基础HTML页面：

和标准的HTML页面不同，我们在做Sciter的HTML时，很多不必要的地方都可以省略，对于一个UI的HTM而言，<html><head><body>三层标签构成的文本文件就可以直接拿来使用，不用明确地添加如<meta><link>等其他的东西。当需要使用Tiscript时，类似于js，在<head>中加入<script>标签，既可以在标签内部书写代码，也可以通过路径将代码文件引入进来。

下面的是一个含有CSS、TS脚本的简单HTML模板：（ANSI编码）

<html>

<head>

    <title>Hello World</title>

    <style>

        .test{

            background-color: black;

            color: white;

        }

    </style>

    <script type="text/tiscript">

        $(.test).onClick = function() {

            stdout.println("H1被点击");

            return true;

        }

    </script>

</head>

<body bgcolor="#00AAAA" >

    <h1 .test>Hello World!</h1>

</body>

</html>

不要小看这个模板，这个模板已经拥有CSS、使用了Tiscript脚本、添加了调试输出功能，下面我们继续来看如何调试HTM页面中的tiscript代码。

PS：拥有Tiscript脚本的html页面是不能直接用浏览器查看效果的，需要使用官方给出的相关工具。

第二部分，查看UI，调试tiscript脚本。

找到之前下载的SDK，在bin目录下有这样几个文件：

sciter.exe      HTML制作的UI查看调试工具。

Sciter64.exe    同sciter.exe，64位版的。

sciter32/64.dll    32和64位版本的公用DLL

inspector32/64.dll     这个很重要，专门用来调试

打开sciter.exe，将编写好的html拖到Sciter窗口中，你将会看到如下界面：

点击如图的红框，如果你的Sciter.exe目录下存在inspector32/64.dll程序就会调用他，界面如下：

第三部分，关于 Tiscript 语法的简单说明和应用：

Tiscript中大部分事件都和JS一样，由于官方没给出明确的说明是否完全支持其中的事件，但是针对我个人测试而言，点击、加载等一些我知道的基本的事件还是可以相应的。

对象.onclick 对应的是鼠标的单击事件，它对应的响应函数我们使用的是匿名函数，即Function() {…},这些都和JS一样。

和JS中GetElementsByID方法一样，我们在TS中寻找一个元素的对象一般可以使用简写形式：

$(xxx) ，其中，xxxx可以是任何的class或者ID，如  $(.test) 表示的就是class=”test”的对象，$(#tool) 指的是ID=”tool”的对象。

$(.test).onClick = function() { ….} 这个函数的作用就是说当class=”test”的对象被点击时，就执行函数体function()的括弧里面的内容。

stdout.println("H1被点击");  是告诉调试工具输出括弧里面的东西，一般TS脚本出问题都可以使用这个函数输出看看，非常好用。

有人会疑问，stdout.println()是从哪里来的，我没有编写这个函数，也不知道它是干嘛的。

如图：

这里详细介绍了那些是全局的函数和类，我们可以在程序的任何地方主动调用他们来完成相关的功能，虽然在下面的介绍中没有stdout的所有方法，但是文档至少告诉我们了printf以及println这些都是可用的，甚至读者可自己尝试那些标准的输入输出函数，一般而言他应该都是可以使用的。

说到这里，这篇文章应该结尾了，但是相信每个学习这一块的童鞋都会感到特别吃力，如果对JS一点都不懂，那简直就是雾里看花，根本没着落，所以，为了对得起看这个文章的童鞋们，继续了以下内容。

文章中之前所有的内容都很简单，只要知道了有那么一个东西，基本上就会用了，难得是官方的帮助文档过于晦涩，难懂，常常很多问题根本无从找起，下面介绍一些帮助文档的使用方法。

1、如何打开？帮助文档在哪里？

答：SDK目录下Doc下面的都是帮助文档文件，将Sciter.exe打开，找到那个问号的图标（第五个），点击，打开的就是帮助文档（Sciter Help）。

2、我是新手，如何根据帮助文档学习？

答：不好意思，官方并没有提供完善的学习流程，建议先看看简单的Demo学习如何在程序中调用HTM页面，如何获取页面的消息，然后在学习书写TS脚本的页面。

3、我有一些脚本相关的问题，我给如何在帮助文档里查找？（这个很重要）

答：我只能根据经验，提供一部分问题的查找方法，毕竟官方文档内容也不是很全。

首先，打开帮助文档，在左侧列表栏，如图，

帮助内容分为3大块，Sciter DOM classes、Sciter Script、Sciter Script Classes，第一个是介绍DOM元素相关属性样式以及通用的方法的，第二、三部分主要是针对Sciter脚本的，第二部分介绍语法，第三部分讲数据类型，无论是否学过JS脚本，都建议仔细看看这两部分的内容。

如果你是在TS编写脚本的语法上有问题，只能在2、3两部分找相关内容。如果你对于修改Dom元素的属性、类型有问题，那就好好看看第一部分的内容，我很确信地告诉你这里一定有答案。

最后，给出一个更高级一点的HelloWorld程序HTM代码，仿照它就可以完成一般性的修改工作：

 

<html>

<head>

    <title>Hello World</title>

    <style>

        .test{

            background-color: black;

            color: white;

        }

    </style>

    <script type="text/tiscript">

        $(.test).onClick = function() {

            stdout.println("H1被点击");

            changeh2();

            return true;

        }

        function changeh2( ) {

            $(#test1).style["color"]="red";

            $(#test1).html="超链接<a href='#'>我是超链接</a>";

            return true;

        }

    </script>

</head>

<body bgcolor="#00AAAA" >

    <h1 .test>Hello World!</h1>

    <h2 #test1>你好啊</h2>

</body>

</html>

-------

源代码：SCiter.exe + 自己编写的HTM,无需打包

博客：

CSDN：http://blog.csdn.net/bbdxf

cnBlogs: http://www.cnblogs.com/bbdxf

[Sciter系列] MFC下的Sciter–2.Sciter中的事件,tiscript,语法的更多相关文章

  1. [Sciter系列] MFC下的Sciter–5.Sciter中GUI线程研究

    [Sciter系列] MFC下的Sciter–5.Sciter中GUI线程研究,目前MFC存在问题,win32没问题. 本系列文章的目的就是一步步构建出一个功能可用,接口基本完善的基于MFC框架的Sc ...

  2. [Sciter系列] MFC下的Sciter–4.HTML与图片资源内置

    [Sciter系列] MFC下的Sciter–4.HTML与图片资源内置,防止代码泄露. 本系列文章的目的就是一步步构建出一个功能可用,接口基本完善的基于MFC框架的SciterFrame程序,以此作 ...

  3. [Sciter系列] MFC下的Sciter–3.Sciter脚本与底层交互

    [Sciter系列] MFC下的Sciter–3.Sciter脚本与底层交互,脚本调用底层自定义的方法函数. 本系列文章的目的就是一步步构建出一个功能可用,接口基本完善的基于MFC框架的SciterF ...

  4. [Sciter系列] MFC下的Sciter–1.创建工程框架

    Sciter SDK中提供的Win32下例程很多,唯独使用很多(对我个人而言)的MFC框架下Sciter程序的构建讲的很少,虽然MFC有这样那样的诟病,但是不可否认的是编写一般的小项目,这仍然是大多数 ...

  5. [Sciter系列] MFC下的Sciter–1.创建工程框架

      Sciter SDK中提供的Win32下例程很多,唯独使用很多(对我个人而言)的MFC框架下Sciter程序的构建讲的很少,虽然MFC有这样那样的诟病,但是不可否认的是编写一般的小项目,这仍然是大 ...

  6. Linux Kernel系列三：Kernel编译和链接中的linker script语法详解

    先要讲讲这个问题是怎么来的.(咱们在分析一个技术的时候,先要考虑它是想解决什么问题,或者学习新知识的时候,要清楚这个知识的目的是什么). 我在编译内核的时候,发现arch/arm/kernel目录下有 ...

  7. MFC下OpenGL入门(可以用）

    MFC下OpenGL入门 源文件 1, 建一工程文件,我这里命名为first,现在first工程里面我们没有添加任何东西,所有的东西都是MFC自动帮我们创建的. 2, 添加链接库.这一步很关键.打开菜 ...

  8. MFC下debug改成release版本出现问题及解决办法

    自己在debug下成功运行了自己写的测试自己写第三方库的程序,这里有用到opencv库,所以同时用到了自己的库和opencv的库,需求因为要进行速度的测试,是想要把debug改成release版本,这 ...

  9. MFC下调用控制台和控制台下MFC库的支持

    1.MFC下调用控制台 在CWinApp的InitInstance中对话框的DoModal之前加入 AllocConsole(); // 开辟控制台 SetConsoleTitle(_T(" ...

随机推荐

  1. HDU 3974 Assign the task 暴力/线段树

    题目链接: 题目 Assign the task Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/O ...

  2. 初尝backbone

    backbone的基础知识在此将不再进行介绍.自己后续应该会整理出来,不过今天先把这几天学的成果用一个demo进行展示. 后续可运行demo将会在sinaapp上分享,不过近期在整理sinaapp上d ...

  3. Unity3D 与 objective-c 之间数据交互。iOS SDK接口封装Unity3D接口

    原地址:http://www.cnblogs.com/qingjoin/p/3638915.html Unity 3D 简单工程的创建.与Xcode 导出到iOS 平台请看这 Unity3D 学习 创 ...

  4. Web前端业界氛围极好的群——鬼懿IT

    鬼群简介 鬼懿IT主群号:,鬼懿IT-成长群:181368696 , 创建于2005年12月 ,聚集的业内人事包括:阿当,大漠,辣妈,崔凯,Rei,周裕波,司徒正美,丸子,鬼森林,寒冬,franky, ...

  5. 能量项链//区间DP

    P1056 能量项链 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 NOIP2006 提高组 第一道 描述     在Mars星球上,每个Mars人都随身佩 ...

  6. cogs 自己出的题目 题解报告

    第一题很简单嘛,就是裸的动态树分治嘛 对于每一层的重心维护子树路径的信息和子树到上一层重心的点的信息 空间复杂度O(nlogn) 对于每一层我们按dis排序,之后记录军队数量的前缀和 查询的时候我们只 ...

  7. lintcode 中等题：Submatrix sum is 0 和为零的子矩阵

    和为零的子矩阵 给定一个整数矩阵,请找出一个子矩阵,使得其数字之和等于0.输出答案时,请返回左上数字和右下数字的坐标. 样例 给定矩阵 [ [1 ,5 ,7], [3 ,7 ,-8], [4 ,-8 ...

  8. OPenGL中三维图形的矩阵变换

    对于二维的图形开发,拿简单的图片显示来说,我们主要的目的:就是在一块显示buffer中,不停的把每个像素进行着色,然后就可以绘制出来了．为了速度,很多其他的加速方法,但原理基本上就是这样了． 很直观, ...

  9. ios开发图片点击放大

    图片点击放大,再次点击返回原视图.完美封装,一个类一句代码即可调用.IOS完美实现 创建了一个专门用于放大图片的类,以下为.h文件 #import <Foundation/Foundation. ...

  10. 获取其他进程中ListBox和ComboBox的内容

    (*// 标题:获取其他进程中ListBox和ComboBox的内容 说明:Window2000+Delphi6调试通过 设计:Zswang 支持:wjhu111@21cn.com 日期:2004-0 ...