iT邦幫忙

2

Apache Royale - Hello World

在上一章的Royale環境安裝之後呢~ 不免俗地當然就是來寫個Hello World啦!!

(如果還沒下載安裝SDK&編輯環境,請參考我上一篇文章:https://ithelp.ithome.com.tw/articles/10211458)

開啟編輯軟體Moonshine之後呢,你可以看到首頁的內容如下:

https://ithelp.ithome.com.tw/upload/images/20190404/20116520D7ZtbfXTb8.jpg

在左側你可以看到Moonshine所能提供編輯的各樣專案型態,在這裡我們點選『Royale Browser Project』

點選之後,隨即進入Project的基礎設定頁面。(如下圖所示)
https://ithelp.ithome.com.tw/upload/images/20190404/20116520zm2isVutYw.jpg

Project name - 為自己的Project命名
Parent Directory - Project放置的檔案路徑,這部分可以依據你的開發習慣開立資料夾/命名並且指定。

接下來這個動作非常重要!! 就是指定SDK的版本~
點取旁邊的Change (如下圖紅框所示)
https://ithelp.ithome.com.tw/upload/images/20190404/20116520GM4cMfbRmo.jpg

接著將會跳出一個話框讓我們選擇要載入甚麼樣的SDK版本,這裡我們就選擇Apache Royale 0.9.4, 選擇完後按下右下角的 select 按鈕。

你將會看見版本已經指定好了!! 這個時候按下右下角的 Create 按鈕就完成專案的基礎設置了。
https://ithelp.ithome.com.tw/upload/images/20190404/20116520vK2xY3Fyoi.jpg

進入到專案之後,一開始系統所提供的就是最基本的Hello World啦!! 你會看到的程式碼大概就是以下的樣子:

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:js="library://ns.apache.org/royale/basic"
				xmlns:local="*"
				pageTitle="HelloWorld">			   
	<fx:Declarations>
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			
		]]>
	</fx:Script>
	
	<js:valuesImpl>
		<js:SimpleCSSValuesImpl />
	</js:valuesImpl>
	
	<js:initialView>
		<js:View width="100%" height="100%">
			<js:Container width="100%" height="100%" >
				<js:Label id="lbl" text="Hello World" width="200" />
			</js:Container>	
		</js:View>
	</js:initialView>	
 </js:Application>

其實...說穿了就只是把一個Label放在各樣的容器裡,然後顯示出來~

接著~ 我們來執行Project。
Project -> Build & Run as JavaScript

點取下去後,系統就會開始進入Debug,然後跳出成果的網頁。
https://ithelp.ithome.com.tw/upload/images/20190404/20116520xl2PvUT34m.jpg

恭喜大家順利進入Royale的世界!! 在未來的章節裡將會逐一介紹我手邊測試的內容,期待能夠幫助大家快樂上手Royale。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言