Use html css javascript to create your own RIA graphic tutorial page 1/2

Enter RIADemo as the project name.

Select the server to run and the Java ee standard.

Choose tomcat5.0, j2ee1.4 here. This article introduces examples and does not depend on the server, because html&css&javascript itself is static, and it will be an html file after completion. In the strict sense, a web program must be run by a server, and Netbeans still adopts this management concept.
At this step, you can click Finish to build the project. The next step is to select a framework. Here, for simplicity and purity, no framework is selected.
After the project is established, the project structure of the project workspace is as follows:

Because it is static, you don't need to pay attention to anything outside the Web page directory.
In order to facilitate management, two new directories need to be created under the Web page directory, inc and images. It is quite simple and will not be described in detail here.
The first example, wait when the page is requested, the effect is as follows:

This example is to perform an operation on the current page, freeze the page and display a wait box before leaving or returning the operation results. The function is to prompt the user that the page is loading. Especially for certain large-volume data requests, this UI can alleviate customers' annoyance caused by long waits.
A brief analysis shows that this example consists of 2 main points.
1. Static elements
2. When does the box appear and when does it disappear? The UI in this effect is a loading box on a darkened background.
For static elements, no matter how they appear, their essence is always HTML, CSS and JavaScript, except of course embedded controls, such as flash. In fact, embedded controls are no longer within the scope of static elements such as HTML.
In this example, the box with loading is actually just a div containing a picture with a scrolling effect and ordinary text. However, the div is beautified with CSS, and then combined with the characteristics of the web page, JavaScript is used to control the display of the div. and disappear.
So, how to create such an effect? ​​In order to clearly explain the entire production process, regardless of JavaScript for the time being, create the div first.
In the web page directory, right-click, New -->html

Select html and name the file index
After the page is created, the only material needed is the loading.gif image with scrolling effect. Copy the image to the images folder.
Next, create a new CSS file, right-click on the inc folder, choose New --> Other, and select Cascading Style Sheets in other directories, as shown in the figure:

Name style, click Finish, and generate the CSS file. The newly created CSS through this step automatically generates a style root. Move the cursor to the range of the root style sheet. Netbeans will display a style generator window for CSS, and also There is an effect preview window, as shown below:

The generator window on the right side of the editor provides GUI settings for many attributes and automatically generates the corresponding code. Below the editor is a preview of the style. For example, in the font panel, the author selects italic for the style and thickness. Select bold, then select underline, and select #ff0099 (a type of red) for color. When selecting a color, a color selector will pop up. Select the corresponding color, and the preview effect will be as follows:

The editor automatically generates the code, and the preview box also shows the effect after application. Netbeans does this very well.
It should be noted that although the code generated by the tool is simple, it is certainly not as flexible and easy to control as handwriting.
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 between the content in the applied style object and the style border (top, bottom, left, right) */
margin:0; /* The distance between the applied style object and its surrounding elements (top, bottom, left, right) */
z-index:2000; /* The value of the z coordinate of the applied style object in the web page*/
width:205px; /* Width of the applied style object*/
text-align:center; /* Center the content in the applied style object*/
position:absolute; /* The position of the applied style object in the page is displayed */
font-weight: bold; /* The style of the font in the applied style object*/
font-size: 13px; /* The size of the font in the applied style object*/
}
If readers are interested in the specific meaning of each attribute, they can look for information for a deeper understanding. I will not go into details here.
After creating the CSS, add the following code to the index.html file you just created to import the CSS style.

Join in area

Save the file, right-click on the index.html file and select Run File

The browser will pop up automatically, and the display effect is as follows:

A box appears. Careful readers can find that the UI is slightly different from the one demonstrated at the beginning. If you add the following code to the loading style just defined:
background:white url(../images/block-bg.gif) repeat-x; /* The background of the applied style object and set to repeat horizontally*/
Of course, you also need to add the background image block-bg.gif. After adding the background image, the effect is as follows:

At this point, the UI is completed.
Next, make how to make the web page dark and unclickable.
The simplest way to darken a web page is to change the background color of the web page to a dark color, but this is obviously meaningless, because after changing it to a dark color, the elements on the page can still be clicked.
So how to darken the background and make it impossible to click?
Analyzing the principle of static web pages again, darkening must be achieved by adjusting the color. To achieve non-clickability, it can be achieved by replacing the clicked object, that is, on the object to be clicked, an object is generated, and this object is Transparent, then when the user clicks, what he clicks is actually a transparent object blocking the underlying object, which gives the user the illusion that the click is invalid, as shown below:

If object B is transparent and next to object A, if a third party tries to contact object A and only encounters object B, then all contacts against A will be invalid.
At this point in the analysis, what we have to do is create a div with this special effect. In the final analysis, it is still a CSS production and application.
The dark transparency effect can be obtained through the filter attribute of CSS and redefine a new style bgdiv
.bgdiv
{
background:#ccc; /* background color*/
opacity:.3; /* transparency*/
filter: alpha(opacity=30); /* filter transparent*/
position:absolute; /* The position of the applied style object in the page is displayed */
z-index:1000; /* The value of the z coordinate of the applied style object in the web page*/
width:500px; /* Width of the applied style object*/
height:500px; /*Height of the applied style object*/
top: 0px; /* The distance between the applied style object and the top of the page*/
left: 0px; /* The distance between the applied style object and the left end of the page*/
}

In the body area, add:
, run the file, the effect is as follows:

At this point, the UI design is completed, but the size of the div we see is 500*500, which does not fill the entire page, and the wait box is not centered, and the effect is already visible from the beginning. This obviously cannot be done directly. When actually using it, we need the background to fill the entire page, the wait box needs to be displayed in the center, and we need to be able to control when the effect appears and when it disappears.
Then these tasks need to be completed by JavaScript.
JavaScript can control almost all static elements on the page, and the above effects are officially achieved by controlling the background div and wait box.
In JavaScript, the simplest way to get an element on the page is to assign a value to the ID attribute of the target object, and then obtain it through JavaScript's getElementbyId.
Here, first assign a value to the ID attribute of bgdiv, such as:

Let's solve the first problem first, which is to set the size of the layer to fill the entire page through javascript.
function showbg()
{
var bgdiv=document.getElementById("bgdiv"); // Get the bgdiv object
bgdiv.style.width=document.body.clientWidth; //Set the width of the bgdiv object to the width of the visible area of ​​the web page
if (document.body.clientHeight>document.body.scrollHeight) //Set the height of the bgdiv object to the height of the visible 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 both represent the width of the visual area. The difference is that if there are scroll bars in the web page, then scollWidth is greater than clientWidth, because scollWidth includes the scroll bar to ????????? part, while clientWidth does not, just the visible part.
In the above function, clientWidth is used as width, because according to the basic principles of web design, it is quite unfriendly to design a web page that contains a horizontal scroll bar, because the mouse can only scroll up and down, but not left to right, so here Taking clientWidth directly means ensuring that no horizontal scroll bar will appear in the entire project.
The height setting below takes into account the compatibility with and without vertical scroll bars.
The above function can ensure that the called bgdiv can fill the entire screen.

In the inc folder, create a new javascript file, copy the above function into it, and add the following code to the page to introduce the function

In order to facilitate display, add onload="showbg();" in the body tag. After the page is loaded, you can see that the adjusted bgdiv has filled the entire page.
The principle of adjusting the display position of the wait box is similar. The function is:
function showwait()
{
showbg(); // show bgdiv
var loading=document.getElementById("loaddiv");//Get the loading object
loading.style.top=document.body.clientHeight/2+document.body.scrollTop-50;//Set the loading distance from the top
loading.style.left=document.body.clientWidth/2-110;//Set the distance between loading and the left end
}
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 attribute of the CSS attribute. This attribute must be set to absolute for the above code to be effective, because the position of the above code is set according to the absolute position.

The above effect is displayed as soon as the page is opened. If you want to control whether it is displayed, you need to use the CSS attribute display. When the value is block, it will be displayed, and when it is none, it will not be displayed.

We have added display: none to the above CSS attributes; then the effect will not be displayed when the page is opened.

Then add bgdiv.style.display="block" in the showbg function;

Add loading.style.display="none" to the showwait function;

Add display to the body area of ​​the page and run the page. Only the display link can be seen. After clicking the display link, the effect we need will be displayed, as shown in the figure:

The effects that appear will not disappear. In my daily study work, the author also discovered a phenomenon. When clicking a link on the page (that is, sending a request to the server), when the server has not finished processing and has not returned the page to the client, the page itself will not be there. Changes, and the so-called slow network speed is also like this. Clicking does not reflect it. When the server completes processing, it returns the html to the user and the page starts to change. Then, if the showwait event is triggered when the link is clicked, the effect will appear until the server finishes processing the request and the page is redirected and disappears.

For example, if we change the displayed code to display and then run the page, and then click display, we can see that the wait box appears, and when the page disappears, Sun's homepage appears.
Let's look back. In fact, there is nothing special about this example. It is just that the requirements for HTML, CSS and javascript are very high. Only if you are familiar with these three static elements can you grasp it well. And here, there are also certain requirements for artists. It should be noted that the scrolling pictures and background pictures of wait are not made by the author. They are pictures of the ext frame. The CSS style of the wait box is also based on ext.
It is worth mentioning that the editor of Netbeans 6.1 has rich prompt support for JavaScript, not only keyword support, but also prompts for compatible browsers, and even provides some simple examples.

This article spends a lot of space explaining an uncomplicated example. The purpose is to give readers an in-depth analysis of how to develop their own RIA through detailed thinking and development processes.

It can be seen that to make this type of RIA, although you still need a certain art foundation and page design capabilities, the basic production steps are nothing more than the following two steps:

1. Make your own UI using HTML and CSS.

2. Carefully study the behavior mode of the page and write javascript to control the UI.

In the next article, the author will introduce you to a more complex and comprehensive example, including pop-up dialog boxes, pop-up menus, special effects layers, and dragging windows.