hello.hellospring 아래에 controler라는 패키지를 만든 후 HelloController라는 class를 만들어줍니다.
코드는 아래와 같습니다. localhost:8080/hello 로 접속 시 hello 함수를 실행하게 만들고, hello함수는 return "hello" 구문으로 hello를 리턴하는데, 이는 resources/templates에서 hello.html을 찾아서 반환해주는 역할을 합니다. 이때 속성으로 키가 "data"이고 값이 "hello!!"인 데이터를 함께 넘겨주게 됩니다.
package hello.hellospring.controler;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HelloController {
@GetMapping("hello")
public String hello(Model model){
model.addAttribute("data","hello!!");
return "hello"; // 뷰 리졸버가 templates에서 hello로 시작하는 파일(hello.html)을 찾아서 리턴
}
}
2. hello.html
Controller에 의해 리턴되는 hello.html 페이지를 아래와 같이 작성합니다. 이때 th는 thymeleaf 템플릿 엔진의 약자인데, thymeleaf 문법을 쓸 수 있게 해 줍니다. p태그 내부에서 해당 문법을 쓰고 있습니다. ${data}라고 표현된 부분은 Controller가 넘겨준 {키: "data", 값: "hello!!"} 를 의미하므로 결국 "hello!!"로 치환되게 됩니다.
인텔리제이에서 씬 빌더를 사용? 찾는 방법에 대해 적어놓습니다. 오랜만에 하려니 저도 어디있는지 까먹어서 많이 헷갈리네요...
처음 인텔리제이에서 javafx 프로젝트를 하나 생성하면 sample.fxml이라는 파일이 생성됩니다. fxml은 xml을 이용해 GUI를 쉽게 구현할 수 있게 해주는 언어인데요. 텍스트 탭과 scene builder 탭을 둘 다 볼 수 있습니다. 문제는 탭이 화면 아래쪽에 있는 것인데요....(아래 그림 참조)
이것때문에 괜히 파일명 우클릭해서 한참 찾았네요. 찾느라 고생 없으시길...
참고로, 처음 실행할 때 에러메시지와 함께 scene builder 다운로드가 아직 안됐다는 에러가 뜨는데... 해당 경고 따라 다운받아주시면 알아서 설치되고, 곧바로 보여집니다.
scene builder가 보이는건 알겠고.... 헬로월드 한번 만들어보겠습니다.
간단히 Container-pane 하나 바탕에 마련해두고, Controls-Button 드래그-드랍으로 얹어 놓은 후에, 텍스트만 Hello로 바꿨습니다. 잘 뜨겠죠?
네, 잘 뜹니다. ㅋㅋㅋ.
조금 더 진행해보겠습니다. Hello Button 위쪽에 TextField를 갖다 놓습니다. 아직까지 ID 는 모두 지정하지 않은 상태입니다.
그리고 이번엔 scenebuilder 화면으로 와서 할 작업이 있습니다. (참고로 저는 Intellij 내부 scene builder에서 아래 메뉴가 안보여서 별도로 설치한 Scene Builder를 통해서 열어 작업했습니다. sample.fxml 우클릭 후 open in scenebuilder)
1. 아래 화면 왼쪽의 Controller탭에서 Controller class를 방금 반들어준 sample.Controller가 되도록 선택해줍니다.
2. Button을 클릭한 상태로 우측 Code탭을 보시면 Identity 부분에서 ID를 골라줍니다. ID는 소스에서 작성한 변수명이 되겠습니다. txtMsg와 btnAlert 두가지가 보일텐데, 버튼에는 btnAlert, 텍스트필드에는 txtMsg를 각각 선택해줍니다.
3. Button의 On Action필드에는 코드에서 작성한 clickHandler를 선택해줍니다.
오늘은 IIS에서 PHP를 연동하는 방법에 대해 알아보겠습니다. Django, Flask와 마찬가지로 FastCGI방식을 이용해야 합니다.
1. CGI 설치
"제어판->프로그램->프로그램 및 기능->Windows 기능 켜기/끄기" 에서 아래의 그림에 따른 경로를 찾아들어가 CGI를 체크해줍니다. 그러면 알아서 관련 프로그램이 설치가 됩니다.
2. php download
php.net 사이트에서 PHP를 다운로드합니다. 이때 FastCGI연결이 가능하도록 Non Thread Safe 버전을 다운받아야 합니다. 자신의 window 타입에 맞는 버전(x64 or x86) 을 선택하여 다운받아 줍니다.
그런다음 적당한 위치에 압축을 풀어줘야 하는데, 저는 "C:\php7"이라는 폴더를 만들어서 거기에 넣어두었습니다.
C:\php7폴더에 압축을 푼 모습. php-cgi.exe파일이 FastCGI에서 이용할 파일이다.
그리고 해당 폴더를 환경변수에 추가해 줍니다.
3. index.php파일 생성
PHP사이트에서 사용할 index.php파일을 하나 만들겠습니다.
<?php
phpinfo();
?>
4. IIS 사이트 생성
다음으로 IIS관리자를 실행시키고 사이트를 하나 추가 생성합니다. 이름은 php_ex라고 지어주고, 실제 경로에는 index.php가 있는 폴더까지의 경로를 넣어줍니다. 그리고 포트는 임의로 설정하면 되는데 88번 포트를 할당했습니다.
(우선 로컬에서 테스트 목적이므로, port 개방은 이번에는 다루지 않겠습니다. 외부에서 접속이 가능하도록 port를 허용(개방)할 경우에는 링크 포스트를 참조하시기 바랍니다.)
5. IIS 처리기 매핑
다음으로 php 처리기 매핑이 필요합니다. 방금 생성한 "php_ex"사이트를 클릭하고 "처리기 매핑"을 클릭하여 들어오면 우측으 "모듈매핑 추가" 메뉴가 보입니다. 해당 메뉴를 클릭하여 아래와 같이 설정한 후 확인을 눌러줍니다.
6. 확인
아래와 같이 잘 나온다면, 제대로 작동한다고 볼 수 있습니다.
7. 예외
위 기본 설치방식처럼만 하면 되어야 할텐데....그게 생각보다 쉽지가 않습니다. 가장 많이 접하는게 VCRUNTIME140.dll 관련 오류인데...
또는
요런 메시지...'vcruntime140.dll' 14.0 is not compatible....하는 에러 메시지입니다. php7이 Visual Studio 2015(혹은 그 이후버전)에서 컴파일 되어 "Visual Studio 2015용 Visual C++ 재배포 가능 패키지" 를 설치하면 된다고 합니다. 여기링크 사이트에서 vc_redist.x64.exe 버전을 다운받을 수 있습니다.
그런데도 계속 저런 오류가 발생한다면, vcruntime140.dll을 직접 다운받아 설치하는 방법으로 해결할 수 있습니다. 여기링크 사이트에서 본인 os버전에 맞는 dll파일을 직접 다운받아서(또는 구글 검색) "C:\Windows\SysWOW64" 폴더에 저장(덮어쓰기) 합니다.
시스템 트레이 제작을 위해서는 시스템 트레이를 위한 라이브러리를 설치해야 하는데, 아주 이지한 Golang Library가 존재합니다. getlantern/systray라는 라이브러리입니다. 아래 명령으로 설치해줍니다.
go get github.com/getlantern/systray
3. main.go , 시스템 트레이 실행파일
시스템 트레이 프로그램을 아래와 같이 작성합니다. 라이브러리를 임포트 하고, main함수에서 onReady와 onExit함수를 불러옵니다. onReady를 불러와서 기본적인 세팅을 하고, 고루틴으로 clock() 실행, quit메뉴 선택시 종료하는 함수를 실행합니다. 종료시 실행해야 할 일은 없으므로 onExit는 비워둡니다.
package main
import (
"fmt"
"io/ioutil"
"github.com/getlantern/systray" // window tray 관련 라이브러리
)
// Preaprare Program for execution ///
func main() {
systray.Run(onReady, onExit)
}
func onReady() {
systray.SetIcon(getIcon("assets/clock.ico")) // Icon 불러오기
systray.SetTitle("I'm alive!")
systray.SetTooltip("Look at me, I'm a tooltip!") // 마우스 오버 시 툴팁 표시
mQuit := systray.AddMenuItem("Quit", "Quitsthis app") // 종료 메뉴 추가
go func() {
for {
select {
case <-mQuit.ClickedCh:
systray.Quit()
return
}
}
}()
go func() {
clock()
}()
}
func onExit() {
// Cleaning stuff here.
}
func getIcon(s string) []byte {
b, err := ioutil.ReadFile(s)
if err != nil {
fmt.Print(err)
}
return b
}
4. clock.go 프로그램 작성
지난 post에서 작성한 main.go를 수정하여 작성하도록 하겠습니다. 자세한 변경은 아래 코드를 보시고, 중요 변경사항에 대해서만 말씀드리자면...
clock함수 작성: 기존에 main으로 되어있는 부분을 clock으로 수정합니다.
작업표시줄에서 제거: window생성 부분에서(line30~35) sciter.SW_TOOL 을 추가합니다. 이 부분은 시스템 트레이로 실행되는 프로그램이 작업표시줄에도 표시되는 것을 막아줍니다.
앱 위치 수정: 저는 시계가 화면 우상단에 위치시키겠습니다. 이를 위해 화면 사이즈를 시스템으로부터 얻어와야 하는데, 이것이 win.GetSystemMetrics(win.SM_CXSCREEN), win.GetSystemMetrics(win.SM_CySCREEN)입니다. 이를 잘 활용하여 앱의 크기와 위치를 재설정해줍니다.
package main
import (
"fmt"
"github.com/lxn/win"
sciter "github.com/sciter-sdk/go-sciter"
"github.com/sciter-sdk/go-sciter/window"
)
// Specifying havily used
// Singltons to make them
// package wide available
var root *sciter.Element
var rootSelectorErr error
var w *window.Window
var windowErr error
// Preapare Scitre For Execution ///
func init() {
// initlzigin window for downloaer
// app with appropriate properties
cw := 200 //clock width
ch := int(win.GetSystemMetrics(win.SM_CYSCREEN)) // clock height
x_pos := int(win.GetSystemMetrics(win.SM_CXSCREEN)) - cw
y_pos := 10
rect := sciter.NewRect(y_pos, x_pos, cw, ch)
w, windowErr = window.New(sciter.SW_TITLEBAR|
sciter.SW_CONTROLS|
sciter.SW_MAIN|
sciter.SW_TOOL| //tool모드로, 작업표시줄에 아이콘 표시 안함.
sciter.SW_GLASSY,
rect)
if windowErr != nil {
fmt.Println("Can not create new window")
return
}
// Loading main html file for app
htloadErr := w.LoadFile("./clock.html")
if htloadErr != nil {
fmt.Println("Can not load html in the screen", htloadErr.Error())
return
}
// Initializng Selector at global level as we are going to need
// it mostly and as it is
root, rootSelectorErr = w.GetRootElement()
if rootSelectorErr != nil {
fmt.Println("Can not select root element")
return
}
// Set title of the appliaction window
w.SetTitle("Simple")
}
// Preaprare Program for execution ///
func clock() {
w.Show()
w.Run()
}
5. clock.html 프로그램 작성
화면을 구성하는 clock.html파일을 아래와 같이 작성해줍니다. 지난 포스트의 main.html로부터 변경된 사항은
html태그에 window-resizable="true" 속성을 추가하여 크기조절이 가능하도록 했습니다.(....만 transparent 속성때문에 프레임이 선택되지 않습니다. transparent 이 외에 extended/solid 등 다른 옵션의 경우 가능하니 확인해보시기 바랍니다. sciter.com/html-window/
view.windowTopmost=true 속성을 스크립트 부분에 추가하여 시계가 항상 위에 표시되도록 합니다.
CSS에서 fixed클래스를 선언해서 해당 앱이 항상 다른 앱보다 뒤에서 표시되도록(바탕화면 바로 다음에..) 하려고 하였으나, 위 속성때문에 제대로 작동하진 않습니다.
색상과 선의 두께 등도 기호에 맞게 조정합니다.
<html window-frame="transparent" window-resizable="true">
<head>
<title>Sciter2 clock</title>
<style>
html{
background:transparent;
}
div.clock {
prototype:Clock;
width:*;
height:*;
/*border:1px solid black;*/
}
h3{
color: white;
}
.fixed { position:fixed; left:0; top:0; right:0; bottom:0; z-index:-1; }
</style>
<script type="text/tiscript">
!function(){
$(span#os).text = System.OS;
}();
view.windowTopmost = true; //항상 위에 존재
class Clock: Behavior
{
function attached() {
this.paintContent = this.drawclock; // attaching draw handler to paintContent layer
this.timer(300,::this.refresh());
}
function drawclock(gfx)
{
var (x,y,w,h) = this.box(#rectw);
var scale = w < h? w / 300.0: h / 300.0;
var now = new Date();
gfx.save();
gfx.translate(w/2.0,h/9.0);
gfx.scale(scale,scale);
gfx.rotate(-Math.PI/2);
gfx.lineColor(color(0x32,0xA2,0xCF));
gfx.lineWidth(3);
gfx.lineCap = Graphics.CAP_ROUND;
// Hour marks
gfx.save();
gfx.lineColor(color(0x32,0x5F,0xCF));
for (var i in 12) {
gfx.rotate(Math.PI/6);
gfx.line(100,0,120,0);
}
gfx.restore();
// Minute marks
gfx.save();
gfx.lineWidth(5);
for (var i in 60) {
if ( i % 5 != 0)
gfx.line(117,0,120,0);
gfx.rotate(Math.PI/30);
}
gfx.restore();
var sec = now.second;
var min = now.minute;
var hr = now.hour;
hr = hr >= 12 ? hr-12 : hr;
// write Hours
gfx.save();
gfx.lineColor(color(0x32,0x5F,0xCF));
gfx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
gfx.lineWidth(14);
gfx.line(-20,0,70,0);
gfx.restore();
// write Minutes
gfx.save();
gfx.lineColor(color(0x32,0x5F,0xCF));
gfx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
gfx.lineWidth(10);
gfx.line(-28,0,100,0);
gfx.restore();
// Write seconds
gfx.save();
gfx.rotate(sec * Math.PI/30);
gfx.lineColor(color(0xD4,0x32,0));
gfx.fillColor(color(0xD4,0x32,0));
gfx.lineWidth(6);
gfx.line(-30,0,83,0);
gfx.ellipse(0,0,10);
gfx.noFill();
gfx.ellipse(95,0,10);
gfx.restore();
// outline
gfx.lineWidth(8);
gfx.lineColor(color(0x32,0xA2,0xCF));
gfx.ellipse(0,0,142);
gfx.restore();
}
}
</script>
</head>
<body>
<div.fixed>
<h3>Sciter clock using immediate mode drawing on <span #os></span></h3>
<div class="clock" >
</div>
</div>
</body>
</html>
라이브러리 설치에 빠진 것이 없고, 위와 같이 구성하고 실행하면 작성한 프로그램이 항상 위에 작동하고, 시스템 트레이에서 실행되고, 작업표시줄에는 나타나지 않는 것을 보실 수 있을겁니다.
go-sciter를 이용하여 아날로그 시계를 구현해보도록 하겠습니다. go-sciter를 이용한 프로그램은 데이터처리를 위한 .go 파일과 뷰 제어를 위한 .html파일로 구성이 되어있는데요, 오늘은 아날로그 시계 만들기는 html에서 시계의 움직임까지 표현해주고, .go파일에서는 그냥 html을 로딩하는 역할만 하게됩니다.
우선 결과물은 아래와 같이 나옵니다.
그럼, 소스는...
1. main.go (기본적인 html 로딩 포맷으로 기존과 동일)
package main
import (
"fmt"
sciter "github.com/sciter-sdk/go-sciter"
"github.com/sciter-sdk/go-sciter/window"
)
// Specifying havily used
// Singltons to make them
// package wide available
var root *sciter.Element
var rootSelectorErr error
var w *window.Window
var windowErr error
// Preapare Scitre For Execution ///
func init() {
// initlzigin window for downloaer
// app with appropriate properties
rect := sciter.NewRect(0, 100, 200, 350)
w, windowErr = window.New(sciter.SW_TITLEBAR|
sciter.SW_CONTROLS|
sciter.SW_MAIN|
sciter.SW_GLASSY,
rect)
if windowErr != nil {
fmt.Println("Can not create new window")
return
}
// Loading main html file for app
htloadErr := w.LoadFile("./main.html")
if htloadErr != nil {
fmt.Println("Can not load html in the screen", htloadErr.Error())
return
}
// Initializng Selector at global level as we are going to need
// it mostly and as it is
root, rootSelectorErr = w.GetRootElement()
if rootSelectorErr != nil {
fmt.Println("Can not select root element")
return
}
// Set title of the appliaction window
w.SetTitle("Simple")
}
// Preaprare Program for execution ///
func main() {
w.Show()
w.Run()
}
2.main.html
<html>
<head>
<title>Sciter2 clock</title>
<style>
div.clock {
prototype:Clock;
width:*;
height:*;
/*border:1px solid black;*/
}
</style>
<script type="text/tiscript">
!function(){
$(span#os).text = System.OS;
}();
class Clock: Behavior
{
function attached() {
this.paintContent = this.drawclock; // attaching draw handler to paintContent layer
this.timer(300,::this.refresh());
}
function drawclock(gfx)
{
var (x,y,w,h) = this.box(#rectw);
var scale = w < h? w / 300.0: h / 300.0;
var now = new Date();
gfx.save();
gfx.translate(w/2.0,h/2.0);
gfx.scale(scale,scale);
gfx.rotate(-Math.PI/2);
gfx.lineColor(color(0,0,0));
gfx.lineWidth(8);
gfx.lineCap = Graphics.CAP_ROUND;
// Hour marks
gfx.save();
gfx.lineColor(color(0x32,0x5F,0xA2));
for (var i in 12) {
gfx.rotate(Math.PI/6);
gfx.line(100,0,120,0);
}
gfx.restore();
// Minute marks
gfx.save();
gfx.lineWidth(5);
for (var i in 60) {
if ( i % 5 != 0)
gfx.line(117,0,120,0);
gfx.rotate(Math.PI/30);
}
gfx.restore();
var sec = now.second;
var min = now.minute;
var hr = now.hour;
hr = hr >= 12 ? hr-12 : hr;
// write Hours
gfx.save();
gfx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
gfx.lineWidth(14);
gfx.line(-20,0,70,0);
gfx.restore();
// write Minutes
gfx.save();
gfx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
gfx.lineWidth(10);
gfx.line(-28,0,100,0);
gfx.restore();
// Write seconds
gfx.save();
gfx.rotate(sec * Math.PI/30);
gfx.lineColor(color(0xD4,0,0));
gfx.fillColor(color(0xD4,0,0));
gfx.lineWidth(6);
gfx.line(-30,0,83,0);
gfx.ellipse(0,0,10);
gfx.noFill();
gfx.ellipse(95,0,10);
gfx.restore();
// outline
gfx.lineWidth(14);
gfx.lineColor(color(0x32,0x5F,0xA2));
gfx.ellipse(0,0,142);
gfx.restore();
}
}
</script>
</head>
<body>
<h2>Sciter clock using immediate mode drawing on <span #os></span></h2>
<div class="clock" ></div>
</body>
</html>
이전 포스팅에서 말씀드렸다시피 TIScript라는 걸 사용해서 시계를 구현하는데요, 자바스크립트랑 비슷한 것 같긴한데 잘 모르겠는게 좀 있네요. 사실 자바스크립트도 잘 알지는 못하니... 좀 더 알아봐야겠습니다.
