<-- IE錯誤修正 --> 範例 [EZo 實例] 顯示台灣即時股票資訊 - 使用 EZo UIBuilder 開發 Web 應用 - RiS社群 | FileMaker 中小企業應用



快速發表主題
返回   RiS社群 | FileMaker 中小企業應用 > 交流平台 / 老少咸宜 (General forums) > 創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future)

創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) 激勵設計、程式人員想法加上IT各產管學界新知訊、創意,才更能產出符合人性真實需求的作品,別忘了每個人的想法都可能成為未來關鍵。
描述本文重點:動態事件模型,就是賦予控制前端元件互動的能力


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 2012-06-08
EZoUI 的頭像
初級會員
 
註冊日期: 2012-06-07
住址: 台灣/高雄
文章: 7
不錯 [EZo 實例] 顯示台灣即時股票資訊 - 使用 EZo UIBuilder 開發 Web 應用

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

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

Click the image to open in full size.

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

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

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

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

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

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縮寫,也就是控制前端畫面元件的意思
Click the image to open in full size.

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股票服務囉~

Click the image to open in full size.

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

__________________
EZo = 易組 : 在瀏覽器上容易組裝的開發平台
Write Once, Deploy Every Browser

EZo 官方網站: http://www.EZoUI.com/
UIBuilder 粉絲團:http://www.facebook.com/EZoUI
EZo UIBuilder 部落格: http://EZoUI.wordpress.com

此文章於 2012-06-08 02:27 PM 被 EZoUI 編輯. 原因: 加入簽名檔
回覆時引用此篇文章
回覆
相似的主題
主題 主題作者 討論區 回覆 最後發表
prototype.js源码解读(一) korpton jQuery 討論區 (jQuery 豐富資源) 7 2009-02-27 06:12 AM


主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +9。現在的時間是 02:06 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2017,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝正洋資訊顧問有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2