SMARTCLIENT入门教程之五——首页入口文件

最新推荐文章于 2022-10-10 21:39:43 发布

梦尊

最新推荐文章于 2022-10-10 21:39:43 发布

阅读量2.7k

点赞数 1

分类专栏： SmartClient 文章标签： javascript smartclient web前端开发 web前端

本文链接：https://blog.csdn.net/dream_art/article/details/18400325

版权

SmartClient 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

SMARTCLIENT入门教程之五

通常的Web应用是由一堆HTML静态文件及一堆类似ASP或者PHP之类的动态文件所组成，当然还有许多Javascript脚本以及CSS文件等等，但是SmartCliet应用则只需要一个首页文件，default.htm或者index.html，我们将通过 SmartClient 构建一个单页面的 Web 应用。

——首页入口文件

一、典型的首页文件

任何一个Web网站或者Web应用，通常都需要一个首页入口文件，这个文件一般是default.htm（IIS）或者是index.html（Apache）。当然，对于一些采用动态技术编写的网页，首页文件则通常是default.asp或者index.php这样的文件。SmartCliet开发的应用也不例外，同样需要一个首页文件来作为应用的入口。这个首页文件和原来你所惯用的首页文件是一样的，也就是说，原来是default.asp，现在还是default.asp，原来是index.html，现在依然是index.html。

对于一个全新的Web应用项目，我们比较推崇的开发方式是前后端分离的技术，所以，我们通常不使用后端语言来生成首页，而是直接用一个静态的HTML文件来作为整个应用的入口。事实上，整个项目，也只需要这么一个HTML文件即可，其它的更多代码则是通过Javascript脚本语言来实现，一般情况下，我们会将这些脚本保存在单独的.js文件中。

下面是一个典型的首页文件，包含了最基本的HTML语句，整个首页的主要作用就是调用SmartClient的类库，从而能够让我们在自己的Javascript脚本中调用这些类库，生成我们期望的客户端UI及相应的业务逻辑。

<!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="/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>

</body>
</html>

二、首页的主要内容

这是一个非常简单的HTML文件，相信多数对HTML语法有基本了解的人都可以看明白它的含义。首先与一般的网站不同，除了指定网页的字符编码为UTF-8格式，其它相关的设置几乎完全没有，甚至连页面的标题也没有。因为我们现在假设在开发一个企业级的应用，除非是需要在互联网上公开，否则这些设置都是不必要的。至于像网页的标题，在后面我可以通过代码来改变，这里先保持为空。

在这个页面的BODY部分，载入了八个Javascript脚本文件，从文件名我们大概可以看出，这些都是SmartCliet运行所必须的类库。需要注意的是最后两个脚本文件，第一个是简体中文的语言包，第二个是皮肤文件。SmartClient内置了十几种不同风格的皮肤，我们只需要改一句代码，就可以切换整个应用的界面风格，这对于美工和前端开发者来说，都是一个好消息。

至于如何更改系统的语言，怎么样变换用户界面的皮肤风格，将在教程稍后面的部分为大家介绍，这里先略过。这个首页如果用浏览器来访问，将是一个空白的页面，因为实际上它什么也没有，只是载入了一堆脚本文件。但是如果我们在浏览器中载入这个首页，并且打开调试工具，如果没有报任何错误，则表示我们的前期准备工作都是正确的。

注意，如果你使用IIS作为Web服务器，那么在调试工具中，有可能会报错，提示找不到 “frameworkMessages_zh_CN.properties”，这是由于IIS并不把 .properties 结尾的文件当作合法的静态文件，我们只需要把这个文件改名为“frameworkMessages_zh_CN.properties.js”就可以了，当然首页引用这一个文件时，也要改成“frameworkMessages_zh_CN.properties.js”。实际上这个文件，就是一个普通的 Javascript 脚本。

三、更好的用户体验

由于SmartClient的类库包括许多内容，代码量非常巨大，尽管大多数主流的浏览器都能在极短的时间内加载这些类库，但像IE6这种已经过时的，却依旧拥有大量使用者的浏览器，在调用这些Javascript代码时需要花费较长的时间，为了使用户体验更好，通常我们要加入一个Loading的画面，让用户知道程序正在运行，而不是已经死机了。

首先我们要准备一个AJAX Loading的GIF动画文件，比如像这种

其它不同风格的动画文件也可以很容易得从网上获得，然后把这个GIF动画文件上传到Web服务器的相应文件夹下面，比如 /images/loading.gif，然后我们将原来的首页改一下，如下面的代码所示：

<!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">

isc.Label.create({

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

</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>

</body>
</html>

可以看到，和前一个首页代码有点不同，当载入到第二个Javascript脚本文件之后，我们添加了一个Javascript脚本，其中包括一段Javascript语句，虽然你可能看不太明白这几句脚本的语法，但从字面上来看，我们还是可以大概猜出它的作用，那就是创建了一个包含Loading图片的标签，我们可以试着访问这个页面，看一下是不是我们想要的效果。

这一次我们将浏览器换成了Firefox，然后打开了Firebug的调试功能，再访问首页，可以看到有一个Loading字样的标签在页面的中间，左边还有一个动画文件，并且不论我们怎么缩放浏览器的窗口，这个标签始终保持在窗口的正中间。

当然这个标签并不会因为所有类库载入的完成而消失，因为我们没有在任何地方写入让它消失的代码，所以它会一直在那里。不用着急，在后面的教程中，我们会处理这一问题。另外也不用担心添加这个标签的代码看上去有点奇怪，在后面的教程中，会详细讲解这些代码的含义以及编写规则。

细心的读者可能会问，为什么要用英文的“Loading...”字样，可不可以改成中文的“数据载入中...”之类的提示话语呢？当然，这是完全可以的，但前提是我们在保存这个首页文件时，需要将文件的编码格式改成UTF-8格式，否则将会出现乱码。你可以试着将代码中的 Loading... 改成你想要的提示文字，再刷新一下浏览器，就能看到中文的提示。

梦尊

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
SMARTCLIENT入门教程之五——首页入口文件

SMARTCLIENT入门教程之五通常的Web应用是由一堆HTML静态文件及一堆类似ASP或者PHP之类的动态文件所组成，当然还有许多Javascript脚本以及CSS文件等等，但是SmartCliet应用则只需要一个首页文件，default.htm或者index.html，我们将通过 SmartClient 构建一个单页面的 Web 应用。——首页入口文件一、典型的首
复制链接

扫一扫