bgjs初学者入门（二）Helloworld!

　　在本节中，你将了解一下bgjs的文件夹结构，并制作一个Helloworld的工程。

　　一。下载bgjs库

　　下载地址：http://www.bgscript.com/bgdemo(现在的最新版本是2.0.8)

　　当然，你也可以svn到最新的版本:http://bgjs.googlecode.com/svn/trunk/cicy

　　可以看到，在svn中已经更名为cicy。

　　由于Rock正在对bgjs重构，在cicy中可能对bgjs做相当程度的修改。以下教程全部基于bgjs2.0.8版本！不过据说，新版本cicy在使用上变化不大，使用上的区别主要是名称空间的有些变化，以及功能更强！

　　二。文件夹结构

　　下面简单介绍下bgjs下各个文件夹的用途：

　　1.default文件夹　　放置各个主题的资源文件。

　　2.more文件夹　　放置一些扩展。

　　3.sample文件夹　　放置一些demo示例。

　　4.ui文件夹　　　　放置各个widget的源代码。

　　当然，在bgjs下还有两个重要的文件：bglib-all.js和bglib-all-debug.js。bglib-all.js是打包所有的widget并进行了压缩（可以看到，大小仅仅177k）。当你做开发的时候，一般引用此文件就可以了。而bglib-all-debug.js是bglib-all的未压缩版本。当你想研究bgjs的时候，打开它就可以了。

　　三。Helloworld

　　下面，我们来开始制作一个简单的helloworld。当然，对于RIA程序来说，Helloworld也是比较nice的（想想js里面alert简陋的画面吧^_^）

　　1.在bgjs文件夹下新建一个test文件夹，建立一个helloworld.html文件，并输入以下内容：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Helloworld!</title>
</head>
<body>
</body>
</html>

　　是的，就是通常的最普通的html文件。

　　2.下面需要引用bgjs的库文件。

　　在head区加入以下代码：

<script type="text/javascript" src="../bglib-all.js"></script>

　　请确定你新建的文件在bgjs/test文件夹下。这不是必需的，但是如果不是这样，src路径可能需要做相应更改。

　　引用之后，你就可以在页面中随心所欲地创建各种美观的小部件了！

　　但是，这还是不够的，因为你还需要告诉bgjs，部件还需要有什么样的外观（主题）。因此，我们还需要有第三步。

　　3.引用主题样式。

　　bgjs已经提供了几套默认的美观的样式（放在default文件夹中）。我们只需要引用几个css文件，就可以了。

　　在head区加入以下代码：

  <link rel="stylesheet" href="../default/global.css" type="text/css"/>
  <link rel="stylesheet" href="../default/ru_share.css" type="text/css"/>

请确定你新建的文件在bgjs/test文件夹下。这不是必需的，但是如果不是这样，href路径可能需要做相应更改。

　　解释：顾名思义，global.css是全局公用的css文件。因此，无论你是什么主题，这条语句都是必须要的。下面这一条，我们选择引用了ru_share.css。那么，等下我们就可以看到，制作出来的网页的主色调是绿色！

　　4.head区最后的代码应该是这样：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Helloworld!</title>
    <script type="text/javascript" src="../bglib-all.js"></script>
    <link rel="stylesheet" href="../default/global.css" type="text/css"/>
    <link rel="stylesheet" href="../default/ru_share.css" type="text/css"/>
</head>

　　5.通过以上的修改，我们已经可以调用bgjs强大的功能了。下面我们开始命令bgjs做点事情：简单地弹出个对话框,窗口内容：Helloworld!

　　bgjs总是把javascript代码放在Event.ready()函数中。（想想其他js框架吧，都是类似的）

　　在</body>的后面输入以下代码：

<script>
        Event.ready(function(){
        /*
             我们的代码总是写在这里。
        */
        });
</script>

下面，我们在里面简单地写上以下代码，就ok了：

CUtil.alert('Hello,World!');

　　CUtil里面有bgjs提供我们的很多工具，其中alert()可以简单的跳出一个提示对话框。里面的参数就是对话框里显示的内容。

　　5.最后完整的代码：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Helloworld!</title>
    <script type="text/javascript" src="../bglib-all.js"></script>
    <link rel="stylesheet" href="../default/global.css" type="text/css"/>
    <link rel="stylesheet" href="../default/ru_share.css" type="text/css"/>
</head>
<body>
</body>
</html>
<script>
        Event.ready(function(){
        CUtil.alert('Hello,World!');
        });
</script>

　　6.保存文件并打开它，你将看到本节开始所示图片的网页出现了！enjoy it!

　　7.本节的小结和一些补充

　　a.我们简单地了解了一下bgjs的文件夹结构。

　　b.在实际制作中，总是需要引用bg-all.js和global.css，而ru_share.css是可选的。（实际上，对于global.css，你也可以引用global_min.css来代替，这是个压缩版本；而ru_share.css，你也可以用default文件夹下其他的*_share.css来代替。例如，你把ru_share.css换成lan_share.css试试？）

　　c.我们实际的工作代码，总是放在Event.ready()事件中。

　　d.CUtil.alert()可以跳出一个提示对话框。这个可比js的alert()好看多了。

posted on 2010-01-10 14:56 flowthink 阅读(927) 评论(0) 收藏举报

刷新页面返回顶部

flowthink的博客

导航

公告

bgjs初学者入门（二）Helloworld!