台灣最大程式設計社群網站
線上人數
938
 
會員總數:245151
討論主題:189055
歡迎您免費加入會員
討論區列表 >> AJAX / JSON / jQuery >> [EZo 實例] 顯示台灣即時股票資訊 - 使用 EZo UIBuilder 開發 Web 應用
[]  
[我要回覆]
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
[EZo 實例] 顯示台灣即時股票資訊 - 使用 EZo UIBuilder 開發 Web 應用
價值 : 0 QP  點閱數:2575 回應數:0

樓主

EZo UIBuilder
門外漢
0 10
99 4
發送站內信

EZo UIBuilder提供了完全免費的雲端開發環境,可以直接使用瀏覽器打造簡易的Web應用,以下將一步步說明如何完成這簡單的Web應用

Step 1.登入開發環境
登入免費版本的雲端開發環境請參考下方影片連結
http://www.youtube.com/watch?v=cWpv5IwXRNA


Step 2.畫面及操作方式
完成範例,輸入股票代號後,按下[新增]就可以放入清單,按下 [刷新] 就可以顯示清單中最新的股票資訊,連結範例如下
http://ezo.icsc.com.tw/tryit/User/demo/StockWatcher.gul


Step 3.一步步打造Web應用
1.在個人免費版本的開發環境中,按下新增 gul 檔案,輸入檔名後,就可以看到產生一個新檔。gul檔案就是用xml語法描述Web畫面的文字檔案,簡單的說,一個gul檔案就是一個Web畫面。


2.點選 [開啟] 按鈕,或直接點選 StockWatcher.gul檔名,瀏覽器就會開啟新分頁,我們就可以直接透過線上編輯器,撰寫XML語法完成Web畫面



3.完成表單元件撰寫,表單的xml語法如下,寫完表單後,按下 [儲存] 圖示或按快速鍵[sup] ctrl+s[/sup],就會立即產生Web畫面。

xml語法可以參考 線上互動說明 http://ezo.icsc.com.tw/tryit/_gk_onLineHelp.gul#gulcheatsheet
各種畫面元件的能耐 可以參考 互動範例 http://ezo.icsc.com.tw/tryit/_gk_showcase.gul#form_loginForm2

4.完成清單元件撰寫,清單的xml語法如下,寫完後,按下 [儲存] 圖示,此範例的畫面就算完成了


5.接下來,我們透過 GUL動態事件模型,將輸入的股票代號,在點選 [新增] 按鈕時,放入清單元件中,所謂的GUL動態事件模型,就是賦予控制前端元件互動的能力,重點只有一行
<field type=’btn’ label=’新增’ onclick=’com:form:grid.add,com:“”:i‘ />
按下[新增]按鈕,會觸發onclick事件,依序完成兩件事
(1) 將表單元件資料,添加到清單元件中 com : form : grid.add
(2) 將空字串放入股票代號的輸入欄位 com: “” : ‘I’
GUL動態事件模型有四種控制方式,com指令是component縮寫,也就是控制前端畫面元件的意思


6.取得股票資訊,我們使用JQuery抓取資料,並透過 gk API將資料放到清單元件中,完整GUL程式如下

[code]
<page>
<form width='400' heading='輸入股票代號' id='form'>
<formRow widthRate='70%,15%,15%'>
<field type='txt' name='num' label='股票代號' id='i' maxLength='4' />
<field type='btn' label='新增' onclick='com:form:grid.add,com:"":i' />
<field type='btn' label='刷新' onclick='js:update' />
</formRow>
</form>
<grid id='grid' heading='股票清單' width='400' borders='true'>
<field type='label' name='num' label='代號' />
<field type='label' name='name' label='名稱' />
<field type='label' name='price' label='價格' />
<field type='label' name='change' label='漲 / 跌' />
<field type='label' name='time' label='更新時間' />
</grid>
<js id='update'><![CDATA[
var list = gk.get('grid');
$.each(list,function(idx,value){
$.getJSON('/tryit/stockInfo.jsp?id='+ value.num,
    function(data) {
     var p = "<div style='color:green'>",e = "<div style='color:red'>";
     var s = parseFloat(data[1])<0 ? p:e;
     list[idx].name = data[36];
     list[idx].price = s+data[8];
     list[idx].change = s+data[1];
     list[idx].time = data[2];
     gk.set('grid',list);
    });
});
]]></js>
</page>
[/code]
台灣股票資訊還可以由以下網址取得
http://finance.google.com/finance/info?client=ig&q=TPE:2002
http://loop.hostev.net/stock/search.php?q=2002

7.完成! 希望能藉由這例子體會雲端開發的樂趣,各位也可以試試將股票清單保存起來,或者改為自動刷新,就可以打造自己專屬的VIP股票服務囉~



更多內容,請參考官網資訊:http://EZo.icsc.com.tw/
歡迎加入EZo UIBuilder 的 粉絲團:http://www.facebook.com/EZoUI

搜尋相關Tags的文章: [ widget ] , [ jquery ] , [ ezo ] , [ xml ] , [ event ] ,
本篇文章發表於2012-02-16 02:35
== 簽名檔 ==
EZo = 易組: 在瀏覽器上容易組裝 RIA 的開發平台

EZo UIBuilder V1.5 全功能開放試用中!

EZo 官網: http://www.EZoUI.com/
EZo 粉絲團: http://www.facebook.com/EZoUI
EZo 部落格: http://EZoUI.wordpress.com
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
目前尚無任何回覆
   

回覆
如要回應,請先登入.