Let's get down to the idea before we go into the formal development process, and some of the necessary development specifications need to be identified beforehand to avoid rework later and waste the developer's valuable time. -Pre-development specifications First, directory structure
Open the root directory of the Web server, now that we have three folders and a first page file, Where the images folder placed a loading.gif animated picture, JS folder placed two JavaScript script files, and isomorphic folder is the smartclient of the runtime files, as shown in the following figure:
If your Web service is created by Apache, then the home page is usually index.html, which is significantly different from IIS. Because Windows systems do not distinguish between case names, and Linux systems strictly distinguish the case of file names, to avoid unnecessary problems, we can make a convention where all filenames are in lowercase letters.
In addition, we can create a number of folders in advance to distinguish between various files, such as CSS folders in the CSS file, or for. NET platform, you can put some of the compiled class library DLL files in the Bin folder. You can also create a new static folder, where you can put some data files that you want to use in the future when it comes to data binding.
You can also according to their own needs to develop a directory structure of the storage rules, the general principle is as clear as possible, at a glance, lest in the project after big chaos. second, JavaScript files
In the previous chapter, we loaded two JS files in the homepage, one named Loading.js another named Default.js, the former is a loading screen, the latter is the entrance to our entire project. With the development work, the code more and more, put in a JS file is not realistic, so we can put different program modules into different JS files.
For example, in the desktop.js to put the client UI desktop control code, in the user.js into the operator's identity authentication and control code, in the remote.js into a number of Ajax operating code, and so on, the specific naming rules can be based on their own habits and team development standards to decide.
Of course, in a large project, the amount of code is extremely large, may need to be more refined distinction, the advantage of this is conducive to teamwork and the code of the neat, and later debugging, testing and maintenance convenience. So in the end, our homepage file may look like this:
<!doctype html> Note that we put the entry file of the program at the end, because all program code must be defined before the project is started, or an exception will be generated. So, no matter how many module files There are, the final entry file must be put into the final load. At this point, our home page file should be more complete, after all the content of the whole project and this home file is not very related, and the whole project only need such an HTML file, this and the traditional Web page development has a big difference. third, JavaScript closuresLet's go back to the beginning of the program run, open the Loading.js file, and review the code for this file:
Window.isomorphicdir = "/isomorphic/"; Isc. Label.create ({ ID: "Labelloading", Padding:10, width: "100%", Height: "100%", align: "center", valign: " Center ", Wrap:false, Icon:"/images/loading.gif ", contents:" Loading ... " };Although we haven't officially started talking about smartclient syntax, even literally, we can basically see that these lines of code create a label and can also display loading animated pictures. As a standard JavaScript script file, the browser can execute the code as it is tapped anywhere in the file.
But then there is the problem, JavaScript scripts are not like other programming languages, have namespaces, or the concept of a class, and it is not a strongly typed language, it is easy to have a naming conflict. For example, if we add a line to the code, as shown in the following code:
Window.isomorphicdir = "/isomorphic/"; var ISC = ""; Isc. Label.create ({ ID: "Labelloading", Padding:10, width: "100%", Height: "100%", align: "center", valign: " Center ", Wrap:false, Icon:"/images/loading.gif ", contents:" Loading ... " };This time the code is executed, and a fatal error occurs. The reason is that before we call the tag creation code, we define a string variable named ISC, which conflicts with the SmartClient's built-in object name, so that subsequent code will not execute correctly. This feature of JavaScript makes the development of JavaScript code a job full of traps.
To prevent problems caused by the name of the variable, we need to use the closure characteristics of JavaScript. Closures, as JavaScript-specific concepts, are difficult to understand for developers accustomed to other languages. Here we have to simply understand the closure as a closed space, the code can execute normally, and not be affected by the outside of the closure code.
Finally, we change the loading.js to the following:
Later, all of our code will run in such closures, although closures do not solve all the problems, but at the very least prevent various name collisions between different blocks of code. If you are unfamiliar with JavaScript closures, you can refer to the relevant information first. Of course, closures are not necessary, and you can still write JavaScript code in the way you're accustomed to. the problem of Chinese fonts(function () {Window.isomorphicdir = "/isomorphic/"; Isc. Label.create ({ ID: "Labelloading", Padding:10, width: "100%", Height: "100%", align: "center", valign: "Center", Wrap:false, Icon: "/images/loading.gif", contents: "Loading ..." };})();
SmartClient provides a lot of skin themes, but also provide Simplified Chinese language pack, but the actual operation, you will find the Chinese font display effect is very unsatisfactory, the font size is too small to see clearly. The problem is that the CSS file definition in the subject package is due to the English font, the font size is the standard, the general font size is 11 pixels. For Chinese, it takes at least 12 pixels to display clearly.
The solution to this problem is also very simple, find the corresponding topic package in the folder, you will find a file named Skin_styles.css, the skin_styles.css copy, and named Skin_ Styles.css.bak, then we use a text editor to play a skin_styles.css file, you can see a lot of font definitions, are English fonts, 11 pixel size, such as the following part of the code:
}/* Default Text */
. normal {
Font-family:arial,verdana,sans-serif; font-size:11px;
Color:black;
}. defaultborder {
border:1px solid #A7ABB4;
All appear "FONT-SIZE:11PX;" Replaced by "FONT-SIZE:12PX;" It's OK. For Windows7 and above versions of the operating system, because the Microsoft Elegant black font can provide a better display effect, we can "font-family:" Replace "font-family: Microsoft Ya-Black, XXFarEastFont-Arial," and then save in UTF-8 encoded format, This way the CSS file becomes the following:
}/* Default Text */
. normal {
font-family: Microsoft Ya-hei, XXFarEastFont-Arial, Arial,verdana,sans-serif; font-size:12px;
Color:black;
}. defaultborder {
border:1px solid #A7ABB4;
The more insurance approach is to use the font name in English to avoid problems caused by forgetting to save the UTF-8 format for Microsoft's elegant black font, its English name "Microsoft
Yahei ", and the English name of the song is" SimSun ", the final CSS file should be like the following code, no longer have the appearance of the text:
}/* Default Text */
. normal {
Font-family:microsoft Yahei,simsun,arial,verdana,sans-serif; font-size:12px;
Color:black;
}. defaultborder {
border:1px solid #A7ABB4;
}To this end, we have used smartclient to develop a project preparatory work has been completed, and finally can officially start into the development phase.
Reprint Source: http://m.blog.csdn.net/article/details?id=39933287
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
