Onionmixer: 페이지 링크 숫자 수정

2012-12-26T16:30:41Z

페이지 링크 숫자 수정

← Older revision		Revision as of 16:30, 26 December 2012
Line 3:		Line 3:
	{\| style="border: none; width:100%;"		{\| style="border: none; width:100%;"
	\|- style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;"		\|- style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;"
	\| colspan="2" \| \| 목차 \| ~~레슨4~~ \| ~~레슨6~~ \|<hr style="color:black;background-color:black;height:4px;">		\| colspan="2" \| \| 목차 \| 레슨11 \| 레슨13 \|<hr style="color:black;background-color:black;height:4px;">
	\|-		\|-
	\| style="text-align:right;width:60px;float:left;" \| {{HeadImageOpenbook}}		\| style="text-align:right;width:60px;float:left;" \| {{HeadImageOpenbook}}
Line 101:		Line 101:
	* 캔버스를 다른 OS 형식으로 표시해 봄		* 캔버스를 다른 OS 형식으로 표시해 봄
	\|- style="text-align:center;font-weight:bold; font-style: normal;font-size:120%;"		\|- style="text-align:center;font-weight:bold; font-style: normal;font-size:120%;"
	\| colspan="2" \|<hr style="color:black;background-color:black;height:4px;"> \| 목차 \| ~~레슨4~~ \| ~~레슨6~~ \|		\| colspan="2" \|<hr style="color:black;background-color:black;height:4px;"> \| 목차 \| 레슨11 \| 레슨13 \|
	\|}		\|}

Onionmixer: VisualWorksTutorial2 Page13 추가

2012-12-26T16:29:08Z

VisualWorksTutorial2 Page13 추가

New page

{{CincomTop|{{CincomSmalltalkHeadBanner|웹로그의 통계2 레슨12|마무리}}}}

{| style="border: none; width:100%;"
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;"
| colspan="2" | | 목차 | 레슨4 | 레슨6 |<hr style="color:black;background-color:black;height:4px;">
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageOpenbook}}
| 어플리케이션은 이미 기능면에 있어서는 완성되었습니다. 좀 더 세련된 캔버스를 만들어봅시다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| {{CincomSmalltalkGreenBigFont|이 레슨에서는 기존 위젯을 포함하는 그룹 박스 위젯(혹은 프레임)을 배치합니다. 이것을 실행하고나서 다음으로는, GUI 기반의 복수의 OS상에서 표시되는 것을 확인합니다.}}
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageSteps}}
| 1. {{HighlightBold|System Browser}} 윈도우가 열려있는 경우엔 닫아주십시오. {{HighlightBold|GUI 페인터}} 툴이 열려있는 경우엔 그곳으로 돌아가주십시오. 만일 닫혀있는 경우, {{HighlightBold|WebLogGUI}}를 열어주십시오.(레슨 6의 스텝 12-15 참조)

2. 캔버스 사이즈를 크게해주십시오. {{HighlightBold|statusUI}}와 {{HighlightBold|프로그레스 바}}를 포함하도록 {{HighlightBold|그룹박스}}(팔레트 상단 마지막 버튼)를 배치해주십시오. 캔버스는 아래 그림처럼 됩니다.

[[image:cincom_tutorial2_fig2121.png|none|479px|thumb|cincom_tutorial2_fig2121.png]]

3. {{HighlightBold|Status}} 라벨을 삭제합니다. 라벨을 선택해서 "삭제"키를 누릅니다.

4. 그룹 박스를 선택해서 {{HighlightBold|문자열 속성}}에 {{HighlightBold|Status}}를 입력하고 {{HighlightBold|적용}}을 클릭해주십시오.

5. 그룹 박스가 선택된 상태에서 시프트 키를 누른채로 {{HighlightBold|statusUI}}와 {{HighlightBold|프로그레스 바}} 위젯을 선택해주십시오. 캔버스는 아래 그림과 같이 될것입니다.

[[image:cincom_tutorial2_fig2122.png|none|479px|thumb|그림 12-2. 그룹 박스와 다른 두 가지 위젯이 선택되었음]]

6. {{HighlightBold|GUI페인터}} 툴 윈도우에서 {{HighlightBold|배열>>그룹화}} 메뉴를 선택해주십시오.

[[image:cincom_tutorial2_fig2123.png|none|516px|thumb|그림 12-3. 세 가지 위젯을 그룹화]]

{{CincomSmalltalkBlueFont|Status그룹박스를 선택할 경우, 위젯은 탭 안에 들어갑니다.}}

7. 이러한 조작을 다른 위젯에 2회 반복합니다. {{HighlightBold|Status}}그룹 위에 있는 위젯을 {{HighlightBold|Input Criteria}}라는 라벨 이름으로 그룹화 합니다. 캔버스 우측에 있는 위젯을 {{HighlightBold|Output of Results}}라는 이름의 라벨명으로 그룹화 합니다. 캔버스는 아래 그림처럼 됩니다.

{{CincomSmalltalkBlueFont|{{HighlightBold|Results}} 라벨을 삭제하고, {{HighlightBold|Start}} 버튼을 {{HighlightBold|Start Analysis}}라는 라벨명으로 변경해주십시오. 각 그룹박스가 수평이 되도록 나열해주십시오.}}

[[image:cincom_tutorial_guidesign.png|none|479px|thumb|그림 12-4. 그룹박스 설정]]

8. {{HighlightBold|GUI페인터}} 윈도우에서 {{HighlightBold|외관}}을 선택해주십시오.

[[image:cincom_tutorial2_fig2125.png|none|515px|thumb|그림 12-5. GUI 표시방법을 선택가능]]

{{CincomSmalltalkBlueFont|현재 캔버스는 WindowsXP에서 표시되고 있습니다. VisualWorks에서는 GUI가 다른 플렛폼에서 어떤식으로 표시되는지 확인하는 옵션이 있습니다. 여러모로 선택해 보십시오.}}

[[image:cincom_tutorial2_fig2126.png|none|479px|thumb|그림 12-6. Motif 시스템에서 표시된 GUI]]

[[image:cincom_tutorial2_fig2127.png|none|478px|thumb|그림 12-7. Mac OS X(Aqua) 시스템에서 표시된 GUI]]

9. {{HighlightBold|GUI페인터}} 툴로 돌아가주십시오. {{HighlightBold|메인 윈도우}}(위젯 일람의 첫 엔티티)를 선택해주십시오. {{HighlightBold|배치/사이즈}}를 클릭해서 아래와 같이 설정해주십시오.
* {{HighlightBold|어드벤스}} 라디오 버튼을 클릭해주십시오.
* {{HighlightBold|배치}} 아래 있는 첫 번째 라디오 버튼({{HighlightBold|시스템 표준}})을 클릭해주십시오.
* {{HighlightBold|사이즈}} 아래 있는 두 번째 라디오 버튼({{HighlightBold|지정 사이즈}})를 클릭하고 {{HighlightBold|지정}} 버튼을 클릭해주십시오.

10. {{HighlightBold|GUI페인터}} 툴에서 {{HighlightBold|인스톨}} 버튼을 클릭해주십시오.

11. 여기서는 값을 격납하기 위한 위젯을 추가하지 않았습니다. 그룹박스는 외관을 조절했을 뿐입니다. {{HighlightBold|GUI페인터}} 툴의 {{HighlightBold|윈도우 열기}} 버튼을 클릭해주십시오. 어플리케이션을 테스트합니다. 전부 작동하는지 확인해주십시오.

12. {{HighlightBold|System Browser}} 윈도우로 돌아가주십시오. 카테고리 Pane(맨 좌측)에서 {{HighlightBold|WebLogStats}} 패키지까지 스크롤해주십시오.

13. 패키지 Pane에서 {{HighlightBold|WebLogStats}}를 클릭(선택)해주십시오. {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|Save to File}}을 선택해주십시오.

14. {{HighlightBold|weblogstats_2_stage9.st}}를 입력해주십시오.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| <font style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;">정리</font>

GUI 어플리케이션의 외관도 완성하였습니다. 논리적으로 배치한 위젯을 그룹화하는 것으로 인해, 직감적으로 파악할 수 있는 GUI가 되었습니다. 다음엔, 다른 시스템에 이 어플리케이션을 배포하기 위한 방법을 생각해봅시다. 그 방법중 하나로써 Web이 있습니다. Web어플리케이션용으로 이 어플리케이션을 설계하진 않았습니다만, Web으로서 기능하는 것이 가능합니다. 다음 레슨에서는 World Wide Web 어플리케이션으로 만들어주는 {{HighlightBold|VisualWave(WebToolkit)}}에 대한 간단한 설명을 하겠습니다. 우선, 문제는 배포에 적합한 방법으로 어플리케이션을 저장하는 것입니다.

{{HighlightBold|아래와 같은 내용을 학습하였습니다}}
* 각 위젯을 그룹박스로 같이 그룹화
* 캔버스를 다른 OS 형식으로 표시해 봄
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:120%;"
| colspan="2" |<hr style="color:black;background-color:black;height:4px;"> | 목차 | 레슨4 | 레슨6 |
|}

VisualWorksTutorial2:Page13 - Revision history

Onionmixer: 페이지 링크 숫자 수정

Onionmixer: VisualWorksTutorial2 Page13 추가