Use HTML CSS JavaScript to build your own RIA tutorial 1th/2 page _java

Create a development environment before making it.
Open netbeans6.1, in the project workspace, right-click the new project, and select the Web application under the Web directory.

Project name Input Riademo 。

Select the server to run and Java EE Standard.

Choose tomcat5.0,j2ee1.4 here, this article describes the example, does not depend on the server, because the html&css&javascript itself is static, after the finish is an HTML file. In the strict sense of the Web program must have a server to run, NetBeans or the use of this management philosophy.
In this step, you can already click to complete the build project, and the next step is to select the frame, here, for simplicity and purity, without selecting any frames.
After the project is established, the Project workspace project structure is as follows:

Because it's static, so there's no need to focus. Web Anything outside the page directory.
For ease of management, it is also necessary to Web Page directory to create a new two directory, Inc And Images , quite simply, here no longer repeat.
The first example, when the page requests the Wait , the effect is as shown ：


This example freezes this page and displays a wait box before performing an operation on the current page, before leaving or returning the result of the operation. The function is to prompt the user, the page is loading. In particular, for certain High-volume data requests, the UI can mitigate the annoyance caused by long waits for customers.
To make a simple analysis, this example consists of 2 main points.
1 , static elements
2 , when the box appears and disappears
The UI in the effect is a loading box that is on a darkened background.
For static elements, regardless of what they appear to be, their nature is always html,css and JavaScript, of course, except for embedded controls, such as Flash, in fact, embedded controls are not within the scope of static elements such as HTML.
In this case, the box with the loading is actually just a div that contains a picture with scrolling effects and plain text, except that the div is beautified with CSS and then combined with the features of the Web page, using JavaScript to control the div display and disappear.
So, how to make this effect, in order to clearly explain the entire production process, temporarily regardless of JavaScript, first produced the Div.
In the Web page directory, right-click, new-->html


Choose Html , naming the file index
When the page is built, the material you need is a picture with scrolling effect. Loading.gif , copy the picture to Images Folder.
Next, create a new Css Files, in Inc Right click on folder, new --> Other , Select cascading Style sheets in other directories, as shown in the figure:

Name Style , click Finish, Build Css File, which is created by this step Css , a style is automatically generated Root , move the cursor to Root Within the scope of the style sheet, NetBeans will display a Css Style Builder window, along with an effect preview window, as shown in the following illustration:

The Builder window to the right of the editor provides a number of properties for the Gui Settings, and automatically generate the corresponding code, and the editor below is the style of the preview effect, for example, the author in the font panel, style selection Italic , thickness selection Bold , and then select the Underline, color selection #ff0099 ( A red one. ) , The color selector pops up when you select the color, and the preview looks like this:


The editor automatically generates the code, and the preview box also shows the effect after the application, which NetBeans It's a pretty good place to do it.
It should be explained that the tool generated by the code is simple, but certainly not their own handwriting to be flexible, good control.
Here, define the style of the waiting box we need
. Loading
{
border:2px solid #a3bad9;/*The style of the border of the applied style object*/
Color: #003366; /*The color of the content in the applied style object*/
padding:10px; /*The distance of the content in the applied style object from the style border ( Up, down, left, right ) */
margin:0; /*The distance between the applied style object and its surrounding elements ( Up, down, left, right ) */
z-index:2000; /*Of the applied style object in the Web page. Z Value of coordinates*/
width:205px; /*The width of the applied style object*/
Text-align:center; /*Center the content in the applied style object*/
Position:absolute; /*How the Applied style object is displayed in the page*/
Font-weight:bold; /*Style of the font in the applied style object*/
font-size:13px; /*The size of the font in the applied style object*/
}
The specific meaning of each attribute, if the reader is interested in looking for more information to do a deeper understanding, here do not elaborate.
Build good Css After that in the just established Index.html of the file section, add the following code to import the Css Style.

In Regional affiliation

page load ...

Save the file in the Index.html Right click on file, select Run file

Automatically pop-up browser, the display effect is as follows:

A box arose, and the attentive reader could find that the Ui And a slightly different from the first demo, if you've just defined the Loading Style by adding the following code:
Background:white URL (.. /images/block-bg.gif) Repeat-x; /* The background of the applied style object, and is set to repeat horizontally*/
Of course, we need to add a background map Block-bg.gif , after adding a background image, the effect is now as follows:

This Ui Production completed.
The next step is to make the page darker and not clickable.
The Web page darkened, the simplest way is to change the background color of the page to dark, but this is obviously meaningless, because after changing to a dark color, the elements on the page can still be clicked.
So how do you darken the background and not click it?
Again analysis of the principle of static Web pages, dimming is certainly by adjusting the color to achieve, and to achieve can not click, you can pass, replace the Click Object to achieve, that is, in the key-hit object, then generate an object, and this object is transparent, then when the user clicks, What he clicked was actually a transparent object blocking the underlying object, which gave the user the illusion of an invalid click, as shown in the following figure:


If the object B is transparent and close to the object A , if a third party tries to contact an object A , it's just an object. B , then everything against A The contact will be void.
What we're going to do here is to have this special effect. Div , in the final analysis is still a Css The production and application.
and dark transparent effect, you can pass Css Filter properties to get a new style again. Bgdiv
. bgdiv
{
Background: #ccc; /* Background color */
opacity:.3; /* Transparency */
Filter:alpha (opacity=30); /* Filter Transparent */
Position:absolute; /*How the Applied style object is displayed in the page*/
z-index:1000; /*Of the applied style object in the Web page. Z Value of coordinates*/
width:500px; /*The width of the applied style object*/
height:500px; /*The height of the applied style object*/
top:0px; /*The distance of the applied style object from the top of the page*/
left:0px; /*The distance of the applied style object from the left side of the page*/
}


In Body Area, and then join :
, Run the file, the effect is as follows:

To here, Ui The design is done, but we see the Div Size is 500*500 , and did not fill the whole page, and Wait box is not centered, and the beginning of the effect has come out, so obviously can not be used directly, really in use, we need a background full of the entire page, Wait The box needs to be centered, and we need to be able to control when and when the effect will appear.
So these jobs, they need to rely on Javascript To finish it.
Javascript Almost all of the static elements on the page can be controlled, and the effect is formally controlled by the background Div And Wait box to implement it.
In Javascript , the easiest way to get an element on a page is to give the target object's Id property to assign a value, and then pass the Javascript Of getElementById To obtain.
Here, first give Bgdiv Of Id property to assign a value, such as:

We first solve the first problem, that is, by Javascript To set the size of the layer to fill the entire page.
function SHOWBG ()
{
var Bgdiv=document.getelementbyid ("Bgdiv"); // Made Bgdiv Object
Bgdiv.style.width=document.body.clientwidth; // Set up Bgdiv The width of the object is the breadth of the visual area of the Web page
if (document.body.clientheight>document.body.scrollheight)// Set up Bgdiv The height of the object is the height of the visual area of the Web page
Bgdiv.style.height=document.body.clientheight;
Else
Bgdiv.style.height=document.body.scrollheight;
}
What needs to be explained here is that Clientwidh And ScrollWidth Is the width of the viewable area, and the difference is that if there is a scroll bar in the Web page, Scollwidth to Greater than ClientWidth Because Scollwidth Contains scroll bars to????????? To the part, while ClientWidth No, just the visible part.
In the function above Width , here took a ClientWidth , because according to the basic principles of web design, the design of the Web page contains a horizontal scroll bar is quite unfriendly, because the mouse can only scroll up and down, and can not scroll left to right, so here directly take ClientWidth , which means that the horizontal scroll bar will not appear throughout the project.
The height below is set to consider the compatibility of vertical scroll bars and no vertical scroll bars.
Through the above function can guarantee that the tune out of the Bgdiv Can fill the entire screen.

In Inc folder, create a new Javascript file, copy the function, and add the following code to the page to introduce the function

For ease of display, in Body tag in the Add Onload= "SHOWBG ();", After the page has finished loading, you can see the adjusted Bgdiv is already full of the entire page.
Adjustment Wait The display position of the box is similar, and the function is:
function showwait ()
{
SHOWBG (); // Show Bgdiv
var Loading=document.getelementbyid ("Loaddiv"); Get Loading Object
loading.style.top=document.body.clientheight/2+document.body.scrolltop-50;// Set up LoadingDistance from the top
loading.style.left=document.body.clientwidth/2-110;// Set up Loading Distance from the left side
}
call showwait in the OnLoad event to display the Wait box on a dark transparent background.

What needs to be emphasized here is the position property of the CSS property, which must be set to absolute, the above code will have effect, because the position of the above code is set according to the absolute position.


The effect is an open page on the display, if you want to control whether it is displayed, you need to use the CSS attribute display, when the block is displayed, when none is not displayed.

We are adding Display:none to the CSS properties above, but when the page is open, the effect is not displayed.

Then the bgdiv.style.display= "block" is added to the SHOWBG function;

Adding loading.style.display= "None" to the showwait function;

Join in the body area of the pageShow, run the page, you can only see the display link, click on the display link, will show the effect we need, as shown in figure:


The effect of this appearance will not disappear. The author in the ordinary study work, also found a phenomenon, click on a link on the page (that is, send a request to the server), when the server has not finished processing, no return page to the client, the page itself will not change, and the so-called slow speed is also so, click did not reflect, When the server processing is finished, the HTML is put back to the user, and the page begins to change. Then, if the ShowWait event is triggered when the link is clicked, the effect will appear until the server processing request ends and the page redirects and disappears.

For example, we change the display code toShow    We look back, in fact, there is nothing special about this example, but the html,css and JavaScript requirements are very high, only the three static elements more familiar to grasp. And here, the art also has a certain requirement, it is necessary to explain the wait of the scrolling pictures and background pictures is not the author, is used in the Ext frame picture, wait box CSS style is also referenced ext.
   What is worth saying is that netbeans6.1 's editor has a rich hint of javascript, not only for keyword support, but also for browser-compatible browsers and even for simple examples.

   This article takes a lot of space to explain an uncomplicated example of how to develop your own RIA through detailed thinking and development processes.

   can see that to make this type of RIA, although it still requires a certain art base and page design capabilities, but its basic production steps are no less than two steps:

  1. Use HTML and CSS to make your own UI.

  2. Carefully examine the behavior patterns of the page and write when Javascipt to control the UI.


   in the next article, I will introduce you to a more complex and comprehensive example, including pop-up dialog boxes, pop-up menus, special effects of the layer and drag the window and other effects.

current 1/2 page   1 2 Next read the full text