zoukankan      html  css  js  c++  java
  • [Sciter系列] MFC下的Sciter–2.Sciter中的事件,tiscript,语法

    [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窗口中,你将会看到如下界面:

    aa

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

    aa

    第三部分,关于 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()是从哪里来的,我没有编写这个函数,也不知道它是干嘛的。

    如图:

    bb

    cc

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

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

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

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

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

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

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

    3、我有一些脚本相关的问题,我给如何在帮助文档里查找?(这个很重要)

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

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

    cccc

    帮助内容分为3大块,Sciter DOM classesSciter ScriptSciter 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

    CSDN博客:http://blog.csdn.net/bbdxf
    CNBlogs: http://www.cnblogs.com/bbdxf
    本博客内容为本人原创,如有转载请保留出处!尊重他人就是尊重自己!

  • 相关阅读:
    最详细最权威的Android 编码规范
    一款实用的工具手机软件
    一个简单的四则运算程序(优化)
    随笔
    一个简单的四则运算程序
    随手记(四)
    随手记(三)
    随手记(二)
    随手记(一)
    大学生生活中的三大痛点
  • 原文地址:https://www.cnblogs.com/bbdxf/p/3406790.html
Copyright © 2011-2022 走看看