GitHub 로그인
KO

비주얼 에디터로 그래픽 앱 만들기

JumPHP 그래픽 앱은 창이 폼으로 이루어진 PHP 프로그램입니다: 버튼, 텍스트 필드, 목록, 드롭다운 목록, 체크박스, 슬라이더, 이미지, 동영상. HTML도 CSS도 없습니다: 엔진이 직접 그리며, 같은 앱이 PC, Mac, Linux, 브라우저와 휴대폰(Android 및 iOS)에서 실행됩니다.

프로젝트 만들기

JumPHP IDE에서: New Project, 그다음 Graphic app(데스크톱 앱) 또는 Mobile app(세로 방향 휴대폰 앱). 명령줄에서는 bin/jumphp gui:new contacts "Contacts"(휴대폰용은 --mobile 추가).

예제 앱에는 창 하나 forms/MainForm.form.yaml과 그 코드 src/Form/MainForm.php가 있습니다.

창 그리기

비주얼 에디터: 팔레트, 창과 인스펙터
비주얼 에디터

forms/MainForm.form.yaml을 열면 Design 모드로 표시됩니다(Code와 Split 버튼은 파일을 보여 줍니다).

  • 팔레트(왼쪽)에서 위젯을 창으로 끌어다 놓거나, 클릭해서 선택한 것 뒤에 추가하세요.
  • 위젯은 끌어서 이동합니다. Del은 삭제, Ctrl+D는 복제, Ctrl+Z는 실행 취소입니다.
  • 인스펙터(오른쪽)는 선택한 위젯을 설정합니다: 텍스트, 스타일, 크기(auto, fill 또는 숫자), 남는 공간의 몫(Grow), 정렬.

화면에 맞춰 바뀌는 레이아웃

  • Row(행)는 위젯을 나란히, Column은 위아래로 배치합니다.
  • Spacer는 남는 공간을 차지합니다: 버튼 앞에 두면 버튼을 행 끝으로 밀어냅니다.
  • Grid는 위젯을 12열로 배치합니다. 인스펙터의 **Columns (of 12)**는 화면 크기별로 각 위젯의 너비를 정합니다: xs(휴대폰), sm(태블릿), md와 lg(큰 화면). 예를 들어 xs에서 12, md에서 6이면 휴대폰에서는 한 줄에 패널 하나, PC에서는 두 개가 나란히 놓입니다.
  • Hidden on은 일부 화면 크기에서 위젯을 숨깁니다.
같은 창을 iPhone에서 본 모습
같은 창을 iPhone에서 본 모습

도구 모음의 PC, Laptop, Tablet, iPhone, Android 버튼은 각 크기의 창을 보여 줍니다. PC 모드에서는 창 가장자리를 끌어 레이아웃이 바뀌는 것을 볼 수 있습니다.

이벤트 연결하기

위젯을 더블 클릭하세요: IDE가 그 메서드를 코드에 작성하고(예: public function onAddClick(Button $sender): void) 바로 채울 수 있게 엽니다:

public function onAddClick(Button $sender): void
{
    $this->people->addItem($this->name->text);
    $this->name->text = '';
}

다른 이벤트(바뀌는 텍스트, 목록에서 선택한 줄 등)는 인스펙터의 Events 섹션에 있습니다. Id가 있는 위젯은 자동 완성과 함께 $this->그Id로 접근할 수 있습니다.

이미지와 동영상

이미지는 assets/images/에 넣으세요: Image 위젯의 Picture 필드(버튼은 Image 필드)가 이를 제안합니다. 동영상은 bin/jumphp video contacts film.mp4가 소리와 함께 이미지로 나누고, Video 위젯이 재생합니다.

실행과 내보내기

에디터의 Run 버튼이 앱을 시작합니다. 그다음은 게임과 같습니다: bin/jumphp build(브라우저 버전), bin/jumphp export:standalone(Windows 또는 Linux 실행 파일), bin/jumphp android와 bin/jumphp apple(휴대폰 앱).