SMARTCLIENT入门教程之六

最新推荐文章于 2020-11-20 11:27:07 发布

筱光

最新推荐文章于 2020-11-20 11:27:07 发布

阅读量1.7k

点赞数

分类专栏： SmartClient 文章标签： web服务器 javascript Web应用 Web前端

SmartClient 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

SMARTCLIENT入门教程之六

像所有的编程语言教程一样，通常都是以一个“Hello World!”小程序为起点的，那么现在我们就来编写一个最简单的“Hello World!”程序。

——Hello World

一、更整洁的首页文件

首先，为了以后方便叙述，也为了能够更清楚的展示代码，我们把上一章提供的首页文件重新整理了一下，将脚本代码都放到.js文件内。

在Web服务器的根目录，新建一个“js”文件夹，然后我们将会把以后所有的Javascript代码都保存在这个文件夹下面。

创建两个js文件，一个名为loading.js，放入上一章中所述的Loading标签的代码。另一个名为default.js，作为我们整个项目的入口代码，如下面的代码所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>

<script type="text/javascript" src="/isomorphic/system/modules/ISC_Core.js"></script>
<script type="text/javascript" src="/isomorphic/system/modules/ISC_Foundation.js"></script>

<script type="text/javascript" src="/js/loading.js"></script>

<script type="text/javascript" src="/isomorphic/system/modules/ISC_Containers.js"></script>
<script type="text/javascript" src="/isomorphic/system/modules/ISC_Grids.js"></script>
<script type="text/javascript" src="/isomorphic/system/modules/ISC_Forms.js"></script>
<script type="text/javascript" src="/isomorphic/system/modules/ISC_DataBinding.js"></script>
<script type="text/javascript" src="/isomorphic/locales/frameworkMessages_zh_CN.properties"></script>
<script type="text/javascript" src="/isomorphic/skins/Enterprise/load_skin.js"></script>

<script type="text/javascript" src="/js/default.js"></script>

</body>
</html>

其中，loading.js 代码如下：

(function(){

    isc.Label.create({

        ID: "imgLoading",
        padding: 10,
        width: "100%",
        height: "100%",
        align: "center",
        valign: "center",
        wrap: false,
        icon: "/images/loading.gif",
        contents: "Loading..."

    });

})();

default.js 代码如下：

(function(){

    imgLoading.destroy();
    isc.say("Hello World!");

})();

可以看到，在default.js中只有两句代码，第一句的意思是将刚才创建的Loading标签销毁，第二句的意思是弹出一个对话框，对话框的内容是“Hello World!”。

这两句代码的语法为什么是这样的我们先不追究，让我们先访问一下Web页面，看看运行效果：

很幸运的，我们的代码一次就运行成功，首先那个Loading标签不再停留在屏幕上了，当SmartClient的类库加载完毕，它就被我们的代码所销毁。

然后屏幕上出现了一个对话框，正是我们所期望看到的“Hello World!”，用鼠标拖动这个对话框，发现它和普通的Windows对话框没有什么太大的差别，你甚至还可以关闭这个对话框。

聪明的你一定发现了，只要我们配置好了SmartClient的运行环境，那么只需要一句代码，就可以创建一个非常美观的对话框，这个对话框可以拖动，可以关闭，上面还有图标和按钮。如果用Javascript来写这么一个对话框，是需要很大的代码量的，感谢上帝，SmartClient已经帮我们做好了，只需要调用即可。

二、更多的主题

或许你并不是很喜欢这个灰白色的窗口界面，没关系，SmartClient 自带了十几种不同风格的主题，可以满足多数情况下的客户需求。

当然如果有专门的美工预算，也可以自定义一些更好看的主题。下面，我们就来尝试一下换一个系统自带的主题效果。

还记得我们将 SmartClient 运行所必须的文件都复制到了 Web 服务器的根目录下面了吗？

打开isomorphic文件夹，进入下面的skins子文件夹，可以看到有十几个不同的文件夹，每一个文件夹就是一个独立的皮肤主题，如下图所示：

当我们需要更换主题的时候，只需要将首页文件中的相关代码改一下就可以了，比如我们换成“Graphite”主题：

<script type="text/javascript" src="/isomorphic/skins/Graphite/load_skin.js"></script>

保存后刷新一下浏览器，效果如下：

更多的皮肤主题效果只要试一下就可以看到，这里就不一一列举了。

三、多国语言支持

为了能够满足不同国家和地区的用户，SmartClient将所有客户端UI中出现的文字进行了分离，这样我们只需要改一句代码，就可以更换系统默认的语言种类。

比如我们的首页有定义语言为简体中文，如果把它删除，那么SmartClient将恢复成默认的英文界面，让我们试着删除首页中的这一句代码：

<script type="text/javascript" src="/isomorphic/locales/frameworkMessages_zh_CN.properties"></script>

保存后刷新一下浏览器，效果如下：

可以看到，像对话框的标题，按钮的文字都由中文变成了英文，让我们再换一种语言试试。

打开Web服务器下的isomorphic文件夹，进入下面的locales子文件夹，发现SmartClient提供了32个不同的语言包：

要更换语言包，只需要更换首页文件中的相应代码即可，比如我们试着换成繁体中文的版本，只需要修改下面的代码：

<script type="text/javascript" src="/isomorphic/locales/frameworkMessages_zh_CN.properties"></script>

改成：

<script type="text/javascript" src="/isomorphic/locales/frameworkMessages_zh_TW.properties"></script>

其它语言也是一样的道理，这也是为什么一开始在首页文件中经指定编码方式为UTF-8的原因，因为SmartClient为了支持国多语言，所以必须以UTF-8格式来处理数据。

还有一个很重要的问题，那就是语言包的文件扩展名为“.properties”，当我们试图以一个Javascritp文件来加载它时，有些Web服务器会拒绝这种请求，比如IIS6。

通常Web服务器只接受扩展名为html，css，js，jpg等等常见的文件类型的静态访问请求，如果遇到这种情况，只需要将扩展名改为 .js 即可。

比如还是以简体中文语言包为例，我们先将 /isomorphic/locales/frameworkMessages_zh_CN.properties 这个文件加一个扩展名，改成 frameworkMessages_zh_CN.properties.js，然后将调用代码改成下面的代码即可：

<script type="text/javascript" src="/isomorphic/locales/frameworkMessages_zh_CN.properties.js"></script>

转载出处：http://m.blog.csdn.net/article/details?id=18598711

筱光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SMARTCLIENT入门教程之六

SMARTCLIENT入门教程之六像所有的编程语言教程一样，通常都是以一个“Hello World!”小程序为起点的，那么现在我们就来编写一个最简单的“Hello World!”程序。——Hello World一、更整洁的首页文件首先，为了以后方便叙述，也为了能够更清楚的展示代码，我们把上一章提供的首页文件重新整理了一下，将脚本代码都放到.js文件内。在Web服务器的根目录，新建一个“js”文
复制链接

扫一扫