프로덕션에 앞서 개발 환경을 설정합니다.
netbeans6.1을 열고 프로젝트 작업공간에서 새 프로젝트를 마우스 오른쪽 버튼으로 클릭한 후 웹 디렉터리에서 웹 애플리케이션을 선택합니다.
이 예제는 현재 페이지에서 작업을 수행하고, 페이지를 고정하고, 작업 결과를 떠나거나 반환하기 전에 대기 상자를 표시하는 것입니다. 이 기능은 사용자에게 페이지가 로드 중이라는 메시지를 표시하는 것입니다. 특히 특정 대용량 데이터 요청의 경우 이 UI를 사용하면 오랜 대기로 인한 고객의 불편함을 완화할 수 있습니다.
간략한 분석을 통해 이 예는 두 가지 주요 사항으로 구성되어 있음을 알 수 있습니다.
1. 정적 요소
2. 상자는 언제 나타나고 언제 사라지나요? 이 효과의 UI는 어두운 배경의 로딩 상자입니다.
정적 요소의 경우, 플래시와 같은 포함된 컨트롤을 제외하면 그 본질은 항상 HTML, CSS 및 JavaScript입니다. 실제로 포함된 컨트롤은 더 이상 HTML과 같은 정적 요소의 범위 내에 있지 않습니다.
이 예에서 로딩이 있는 상자는 실제로 스크롤 효과가 있는 그림과 일반 텍스트가 포함된 div입니다. 그러나 div는 CSS로 아름답게 처리된 다음 웹 페이지의 특성과 결합되어 JavaScript를 사용하여 제어합니다. div가 표시되고 사라집니다.
그럼, 어떻게 하면 이런 효과를 만들 수 있을까요? 당분간은 자바스크립트와 상관없이 전체 제작 과정을 명확하게 설명하기 위해 먼저 div를 생성해 보겠습니다.
웹 페이지 디렉토리에서 마우스 오른쪽 버튼을 클릭하고 New -->html을 클릭합니다.
html을 선택하고 파일 인덱스 이름을 지정합니다.
페이지가 생성된 후 필요한 유일한 자료는 스크롤 효과가 있는 loading.gif 이미지입니다.
다음으로, 새 CSS 파일을 생성하고 inc 폴더를 마우스 오른쪽 버튼으로 클릭한 후 새로 만들기 --> 기타를 선택하고 그림과 같이 다른 디렉터리에서 Cascading Style Sheets를 선택합니다.
스타일 이름을 지정하고 마침을 클릭하여 CSS 파일을 생성합니다. 이 단계를 통해 새로 생성된 CSS는 자동으로 스타일 루트를 생성합니다. Netbeans는 CSS에 대한 스타일 생성기 창을 표시합니다. 아래와 같이 효과 미리보기 창입니다.
편집기 오른쪽에 있는 생성기 창은 다양한 속성에 대한 GUI 설정을 제공하고 해당 코드를 자동으로 생성합니다. 편집기 아래에는 스타일 미리보기가 있습니다. 예를 들어, 글꼴 패널에서 작성자는 스타일과 두께에 대해 기울임꼴을 선택합니다. .볼드체를 선택한 후 밑줄을 선택하고 색상은 #ff0099(빨간색 종류)를 선택합니다. 색상을 선택하면 해당 색상을 선택하면 다음과 같은 미리보기 효과가 나타납니다.
편집기는 자동으로 코드를 생성하며, Netbeans가 이 작업을 수행한 후의 효과도 미리보기 상자에 표시됩니다.
도구로 생성된 코드는 간단하지만 확실히 손글씨만큼 유연하고 제어하기 쉽지는 않습니다.
여기에서 필요한 대기 상자의 스타일을 정의하십시오.
.로딩
{
border:2px solid #a3bad9;/* 적용된 스타일 객체의 테두리 스타일*/
color:#003366; /* 적용된 스타일 객체의 콘텐츠 색상*/
padding:10px; /* 적용된 스타일 객체의 내용과 스타일 테두리(위, 아래, 왼쪽, 오른쪽) 사이의 거리 */
margin:0; /* 적용된 스타일 객체와 주변 요소(위, 아래, 왼쪽, 오른쪽) 사이의 거리 */
z-index:2000; /* 웹페이지에 적용된 스타일 객체의 z 좌표 값*/
width:205px; /* 적용된 스타일 객체의 너비*/
text-align:center; /* 적용된 스타일 객체의 내용을 가운데에 맞춥니다*/
position:absolute; /* 페이지에 적용된 스타일 객체의 위치가 표시됩니다 */
font-weight:bold; /* 적용된 스타일 객체의 글꼴 스타일*/
Font-size: 13px; /* 적용된 스타일 객체의 글꼴 크기*/
}
독자들이 각 속성의 구체적인 의미에 관심이 있다면 더 깊은 이해를 위해 정보를 찾아볼 수 있습니다. 여기서는 자세히 설명하지 않겠습니다.
CSS를 생성한 후 방금 생성한 index.html 파일에 다음 코드를 추가하여 CSS 스타일을 가져옵니다.
지역에 가입
객체 B가 투명하고 객체 A 옆에 있는 경우 제3자가 객체 A에 접촉을 시도하고 객체 B만 만나면 A에 대한 모든 접촉이 무효화됩니다.
분석의 이 시점에서 우리가 해야 할 일은 이 특수 효과를 사용하여 div를 만드는 것입니다. 최종 분석에서는 여전히 CSS 제작 및 응용 프로그램입니다.
CSS의 필터 속성을 통해 어두운 투명 효과를 얻을 수 있으며 새로운 스타일 bgdiv를 재정의할 수 있습니다.
.bgdiv
{
배경:#ccc; /* 배경색*/
불투명도:.3; /* 투명도*/
filter: alpha(opacity=30) /* 필터 투명*/
position:absolute; /* 페이지에 적용된 스타일 객체의 위치가 표시됩니다 */
z-index:1000; /* 웹페이지에 적용된 스타일 객체의 z 좌표 값*/
width:500px; /* 적용된 스타일 객체의 너비*/
height:500px; /*적용된 스타일 객체의 높이*/
top: 0px; /* 적용된 스타일 개체와 페이지 상단 사이의 거리*/
left: 0px; /* 적용된 스타일 개체와 페이지 왼쪽 끝 사이의 거리*/
}
본문 영역에 다음을 추가합니다.
, 파일을 실행하면 효과는 다음과 같습니다.
이쯤 되면 UI 디자인은 완성됐는데 우리가 보는 div의 크기는 500*500으로 전체 페이지를 채우지 못하고, 대기 상자도 중앙에 위치하지 않아 이미 처음부터 효과가 보입니다. 물론 직접 사용할 수는 없지만 실제로 사용할 때는 전체 페이지를 채울 배경이 필요하고, 대기 상자가 중앙에 표시되어야 하며, 효과가 나타나는 시기와 사라지는 시기를 제어할 수 있어야 합니다.
그런 다음 이러한 작업을 JavaScript로 완료해야 합니다.
JavaScript는 페이지의 거의 모든 정적 요소를 제어할 수 있으며, 위의 효과는 공식적으로 배경 div 및 대기 상자를 제어하여 달성됩니다.
JavaScript에서 페이지의 요소를 가져오는 가장 간단한 방법은 대상 개체의 ID 속성에 값을 할당한 다음 JavaScript의 getElementbyId를 통해 해당 값을 가져오는 것입니다.
여기에서는 먼저 bgdiv의 ID 속성에 다음과 같은 값을 할당합니다.
먼저 첫 번째 문제인 자바스크립트를 통해 페이지 전체를 채우도록 레이어의 크기를 설정하는 문제를 해결해 보겠습니다.
함수 showbg()
{
var bgdiv=document.getElementById("bgdiv"); // bgdiv 객체 가져오기
bgdiv.style.width=document.body.clientWidth; //bgdiv 객체의 너비를 웹 페이지의 표시 영역 너비로 설정합니다.
if (document.body.clientHeight>document.body.scrollHeight) //bgdiv 객체의 높이를 웹 페이지의 가시 영역 높이로 설정
bgdiv.style.height=document.body.clientHeight;
또 다른
bgdiv.style.height=document.body.scrollHeight;
}
여기서 설명해야 할 것은 clientWidh와 scrollWidth가 모두 시각적 영역의 너비를 나타낸다는 점입니다. 차이점은 웹 페이지에 스크롤 막대가 있는 경우 scollWidth에는 ??에 대한 스크롤 막대가 포함되어 있기 때문에 scollWidth가 clientWidth보다 크다는 것입니다. ???????? 부분, clientWidth는 그렇지 않지만 보이는 부분만 있습니다.
위 함수에서는 너비로 clientWidth를 사용합니다. 웹 디자인의 기본 원칙에 따르면 가로 스크롤 막대가 포함된 웹 페이지를 디자인하는 것은 상당히 비우호적입니다. 마우스는 위아래로만 스크롤할 수 있고 왼쪽으로는 스크롤할 수 없기 때문입니다. 여기에서 clientWidth를 직접 사용한다는 것은 전체 프로젝트에 가로 스크롤 막대가 나타나지 않는다는 것을 의미합니다.
아래 높이 설정은 수직 스크롤 막대 유무에 따른 호환성을 고려합니다.
위 함수를 사용하면 호출된 bgdiv가 전체 화면을 채울 수 있는지 확인할 수 있습니다.
inc 폴더에 새로운 javascript 파일을 생성하고, 위 함수를 복사한 뒤, 해당 함수를 소개하는 페이지에 다음 코드를 추가합니다.
표시를 용이하게 하기 위해 body 태그에 onload="showbg();"를 추가하면 페이지가 로드된 후 조정된 bgdiv가 전체 페이지를 채운 것을 볼 수 있습니다.
대기 상자의 표시 위치를 조정하는 원리는 유사합니다.
함수 showwait()
{
showbg(); //bgdiv 표시
var loading=document.getElementById("loaddiv");//로딩 객체 가져오기
loading.style.top=document.body.clientHeight/2+document.body.scrollTop-50;//상단으로부터의 로딩 거리 설정
loading.style.left=document.body.clientWidth/2-110;//로드와 왼쪽 끝 사이의 거리 설정
}
어둡고 투명한 배경에 대기 상자를 표시하려면 onload 이벤트에서 showwait를 호출하세요.
여기서 강조할 점은 CSS 속성의 position 속성인데, 위 코드의 위치는 절대 위치에 따라 설정되기 때문에 위 코드가 유효하려면 이 속성을 절대값으로 설정해야 합니다.
위의 효과는 페이지가 열리자마자 표시됩니다. 표시 여부를 제어하려면 CSS 속성 표시를 사용해야 합니다. 값이 block이면 표시되고, 값이 없으면 표시됩니다. 표시되지 않습니다.
위의 CSS 속성에 display: none을 추가하면 페이지가 열릴 때 효과가 표시되지 않습니다.
그런 다음 showbg 함수에 bgdiv.style.display="block"을 추가합니다.
showwait 함수에 loading.style.display="none"을 추가하세요.
페이지의 본문 영역에 디스플레이를 추가하고 페이지를 실행합니다. 디스플레이 링크를 클릭하면 그림과 같이 필요한 효과가 표시됩니다.
나타나는 효과는 사라지지 않습니다. 저자는 일상적인 학습 작업에서 페이지의 링크를 클릭할 때(즉, 서버에 요청을 보내는 경우) 서버가 처리를 완료하지 않고 페이지를 클라이언트에 반환하지 않는 현상도 발견했습니다. 페이지 자체는 변경되지 않으며 소위 느린 네트워크 속도도 마찬가지입니다. 클릭해도 서버가 처리를 완료하면 사용자에게 html을 반환하고 페이지가 변경되기 시작합니다. 그런 다음 링크를 클릭할 때 showwait 이벤트가 트리거되면 서버가 요청 처리를 완료하고 페이지가 리디렉션되어 사라질 때까지 효과가 나타납니다.
예를 들어 표시된 코드를 표시하도록 변경한 후 페이지를 실행한 후 표시를 클릭하면 대기 상자가 나타나는 것을 볼 수 있으며 페이지가 사라지면 Sun의 홈페이지가 나타납니다.
사실 이 예제에는 특별한 것이 없습니다. 단지 HTML, CSS, javascript에 대한 요구 사항이 매우 높다는 것뿐입니다. 이 세 가지 정적 요소에 익숙해야 잘 이해할 수 있습니다. 그리고 여기에는 아티스트에 대한 특정 요구 사항도 있습니다. 대기의 스크롤 그림과 배경 그림은 작성자가 만든 것이 아니며 대기 상자의 CSS 스타일도 기반으로 합니다. 내선
Netbeans 6.1의 편집기에는 키워드 지원뿐만 아니라 호환되는 브라우저에 대한 프롬프트도 표시하고 몇 가지 간단한 예제도 제공하는 등 JavaScript에 대한 풍부한 프롬프트 지원이 포함되어 있다는 점을 언급할 가치가 있습니다.
이 글의 목적은 독자들에게 상세한 사고와 개발 프로세스를 통해 자신만의 RIA를 개발하는 방법에 대한 심층적인 분석을 제공하는 것입니다.
이러한 유형의 RIA를 만들려면 여전히 특정 아트 기초와 페이지 디자인 기능이 필요하지만 기본 제작 단계는 다음 두 단계에 불과하다는 것을 알 수 있습니다.
1. HTML과 CSS를 사용해 나만의 UI를 만들어보세요.
2. 페이지의 동작 모드를 주의 깊게 연구하고 UI를 제어하는 자바스크립트를 작성합니다.
다음 기사에서 저자는 팝업 대화 상자, 팝업 메뉴, 특수 효과 레이어 및 창 드래그를 포함하여 보다 복잡하고 포괄적인 예를 소개할 것입니다.