RiS社群 | FileMaker  跨平台企業應用

RiS社群 | FileMaker 跨平台企業應用 (http://forum.j2eemx.com/)
-   創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) (http://forum.j2eemx.com/forum22/)
-   -   提供系統或程式範例 [EZo 實例] 顯示台灣即時股票資訊 - 使用 EZo UIBuilder 開發 Web 應用 (http://forum.j2eemx.com/forum22/thread10304.html)

EZoUI 2012-06-08 09:35 AM

[EZo 實例] 顯示台灣即時股票資訊 - 使用 EZo UIBuilder 開發 Web 應用
 
EZo UIBuilder提供了完全免費的雲端開發環境,可以直接使用瀏覽器打造簡易的Web應用,以下將一步步說明如何完成這簡單的Web應用

Step 1.登入開發環境
登入免費版本的雲端開發環境請參考下方影片連結

http://EZoUI.files.wordpress.com/2012/02/1.png

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

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

2.點選 [開啟] 按鈕,或直接點選 StockWatcher.gul檔名,瀏覽器就會開啟新分頁,我們就可以直接透過線上編輯器,撰寫XML語法完成Web畫面
http://EZoUI.files.wordpress.com/2012/02/4.png
http://EZoUI.files.wordpress.com/2012/02/5.png

3.完成表單元件撰寫,表單的xml語法如下,寫完表單後,按下 [儲存] 圖示或按快速鍵[sup] ctrl+s[/sup],就會立即產生Web畫面。
http://EZoUI.files.wordpress.com/2012/02/6.png
xml語法可以參考 線上互動說明 http://www.EZoUI.com/tryit/_gk_onLin...#gulcheatsheet
各種畫面元件的能耐 可以參考 互動範例 http://www.EZoUI.com/tryit/_gk_showc...orm_loginForm2

4.完成清單元件撰寫,清單的xml語法如下,寫完後,按下 [儲存] 圖示,此範例的畫面就算完成了
http://EZoUI.files.wordpress.com/2012/02/7.png

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縮寫,也就是控制前端畫面元件的意思
http://EZoUI.files.wordpress.com/2012/02/8.png

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

程式碼:

<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>

台灣股票資訊還可以由以下網址取得
http://finance.google.com/finance/in...=ig&q=TPE:2002
http://loop.hostev.net/stock/search.php?q=2002

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

http://EZoUI.files.wordpress.com/2012/02/2.png

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


所有時間均為 +8。現在的時間是 08:47 AM

Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2019,Jelsoft Enterprises Ltd.
RiS 社群 ( 感謝明易資訊有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger


Content Relevant URLs by vBSEO 3.6.0 PL2