最新的最明顯

2011年9月9日 星期五

GWT示範網站-步驟三:開始建立使用者介面

約分為幾個步驟:
1. 從GWT的widgets小物件與panels面板裏面選出UI介面需要的元素,當然這就需要平常經驗以及閱讀文件的能力,Google提供的文件內容如下
 
最後決定使用底下widgets
  1. a table 存放 stock data→FlexTable可以提供使用者動態增刪表格內容
  2. 兩個新增與刪除按鈕→Button
  3. 一個輸入框→TextBox
  4. 時間同步顯示→Label
  5. 或者自行開發widgets→ Creating Custom Widgets.
需要的panels有隱形的Root panel以及 horizontal panel和 vertical panel
 Root panel為程式元件的動態容器,隱形但卻是必要的,位於任何GWT介面的上層,可以放在body或者任何地方,一個body也可以放置多個Root panel,每一個都有自己的GWT widgets與目的。horizontal panel的目的為放置一個輸入框與按鈕,可以增加股票資訊。至於vertical panel就是要擺進所有的widgets顯示畫面 。

2.在頁面裡嵌入這些程式,因為我們要在網頁上執行,這個範例的html在StockWatcher/war/StockWatcher.html,改變底下幾行

h1股票觀測站


刪除table裡的資料

3.接著就要到GWT JAVA主程式 src/.../../client/StochWatcher.java,
一.放進所有需要的panels與widgets,在
public class StockWatcher裡面,先把private static final兩項刪除加上底下數行
  private VerticalPanel mainPanel = new VerticalPanel();
  private FlexTable stocksFlexTable = new FlexTable();
  private HorizontalPanel addPanel = new HorizontalPanel();
  private TextBox newSymbolTextBox = new TextBox();
  private Button addStockButton = new Button("Add");
  private Label lastUpdatedLabel = new Label(); 
再把onModuleLoad()裡的東西都刪除,這時eclipse會顯示許多紅燈,因為以上的型態都
沒有確定their types are undefined,利用eclipse的功能,對紅燈項目按左鍵,
選擇import EntryPoint(com.google.gwt.core.client.EntryPoint) ...等等,一個個
同樣步驟,紅燈就會熄了。
二.建立股票資訊表格:先設定欄位名稱為代號、價格、變化率、移除等,加在
onModuleLoad()底下
  // Create table for stock data.
    stocksFlexTable.setText(0, 0, "代號");
    stocksFlexTable.setText(0, 1, "價格");
    stocksFlexTable.setText(0, 2, "變化率");
    stocksFlexTable.setText(0, 3, "移除");
三.我們還需要兩個panels來展示widgets,Add Stock panel一個平行的panel包含textbox
和addbotten 。the Main panel則來放置表格,Add Stock panel, and the timestamp,加在
onModuleLoad()裡面
  // Assemble Add Stock panel.
    addPanel.add(newSymbolTextBox);
    addPanel.add(addStockButton);

    // Assemble Main panel.
    mainPanel.add(stocksFlexTable);
    mainPanel.add(addPanel);
    mainPanel.add(lastUpdatedLabel);
 四.把main panel與Root panel做起關聯,因為要把所有widgets與 panels放進html page裡面
,一定要透過Root panel
// Associate the Main panel with the HTML host page.
    RootPanel.get("stockList").add(mainPanel); 
也要import com.google.gwt.user.client.ui.RootPanel;,利用eclipse按左鍵 
五.最後把游標提醒加在input box,以提醒使用者開始輸入資料。
// Move cursor focus to the input box.
    newSymbolTextBox.setFocus(true); 
最後再run as application來測試。 
 
 

2011年9月8日 星期四

GWT示範網站-步驟二,程式流程設計

程式流程設計有兩大主題:函式的檢查與測試以及使用者介面元件
依照Google示範程式的目標,我們想達成
  1. 使用者可以增加或刪除股票
  2. 使用者欄位以及功能按鈕
  3. 更新股價以及漲跌幅度
  4. 時間標記
使用者介面元件需要表格存放資訊,新增與刪除按鈕,一個輸入股票資訊欄位,一個時間標記等。以及代表html畫面的元素,例如logo等
所以GWT的html編輯在 HTML host page裏面,其餘的java元件在GWT提供的設計元素裡。
資料參考http://code.google.com/webtoolkit/doc/latest/tutorial/design.html

Eclipse+GWT建立一個示範專案-步驟一

按照google的示範步驟,http://code.google.com/webtoolkit/doc/latest/tutorial/gettingstarted.html,將會建立一個AJAX application-股票看板。
步驟分為:
  1. 建立一個GWT專案
  2. 程式的設計
  3. 使用者介面設計
  4. 滑鼠等互動式介面設計
  5. 增加程式可用度及彈性
  6. 程式除錯
  7. 畫面CSS與HTML等
  8. 最後的編譯
1. 建立一個GWT專案:在工具列上有一個寫著g+的小圖,點選→New web application project,專案名稱"StockWatcher",package "com.google.gwt.sample.stockwatcher"→確定finish,裏面已經包含專案所需的資料結構及檔案,適當修改就成了專案了。資料結構請參閱http://code.google.com/webtoolkit/doc/latest/tutorial/create.html。
接著可以試著run了,先點選StochWatcher→src→com.google.gwt.sample.stockwatcher.client→StockWatcher.java,
接著就可以run as web application,
最後複製底下結果的http://的內容,約為http://127.0.0.1:8888/StockWatcher.html?gwt.codesvr=127.0.0.1:9997,貼到瀏覽器執行,基本上就得到一個網頁畫面了,如圖,如果瀏覽器不支援,依照上面install步驟安裝後就可以執行了。

2011年9月7日 星期三

Google自訂搜尋,設定與安裝


利用Google自訂搜尋,約分為三種:簡單版、自訂版、複雜程式版
簡單版:Google web elements,http://www.google.com/webelements/#!/custom-search
找到Search(2)→;Custom search→;選擇Themes可自選花樣→;再拷貝程式碼貼到網站位置就成功了。












自訂版:功能強多了,但是設定也複雜。google custom search(CSE)
右上角,create新增或者manage管理調整你的CSE。可以做到:
  1. 自訂搜尋網站們或網域
  2. 搜尋結果顯示方式
  3. 搜尋外框外觀調整
  4. . . . . . .
  • 新增→填上搜尋主題名字,說明與語言(中文吧!)→接著的重點是填上要搜尋的目標,每行一個目標,包含單獨網頁、完全網站(www.xxx.com.tw/*)、完全網域(*.xxx.com.tw/*)→選擇standard edition(含廣告)
  • 接著自訂外觀,有六種,每一種再自訂(customize)
  • 最後同樣複製原始碼,插入到網站適合的位置,就會顯示出來
  • 進一步調整,按下change the basics,左欄就有許多自訂項目,例如切到look and feel項目,就會增加一個choose a layout,其中就可以設定搜尋結果的顯示方式,例如選最後一個google-hosted,再選New window,這樣原來的頁面就還留著,其他請自行測試
  • 左欄多個選項改天再測試分享



2011年9月6日 星期二

Webdav在Ubuntu的安裝與使用

Ubuntu+Apache2+WebDav提供網頁式協同環境,讓使用者直接在apache Server上傳下載與編輯檔案,不用透過Ftp等服務。
步驟:
第一步:apache2環境
$ sudo aptitude install apache2
$ sudo a2enmod dav_fs
$ sudo a2enmod dav
$ sudo service apache2 restart
第二步:
建立Virtual Host,路徑為/var/www/web1/web,設定檔/etc/apache2/site2-available/default
$ sudo mkdir -p /var/www/web1/web
$ sudo chown www-data /var/www/web1/web
$ sudo mv /etc/apache2/sites-available/default  /etc/apache2/sites-available/defaultbackup
$ sudo vi  /etc/apache2/sites-available/default
改成如下
NameVirtualHost *
<VirtualHost *>
        ServerAdmin webmaster@localhost

        DocumentRoot /var/www/web1/web/
        <Directory /var/www/web1/web/>
                Options Indexes MultiViews
                AllowOverride None
                Order allow,deny
                allow from all
        </Directory>
</VirtualHost>
$ sudo /etc/init.d/apache2 reload
第三步:建立password檔在 /var/www/web1/passwd.dav,使用者例如test
$ sudo htpasswd -c  /var/www/web1/passwd.dav test -->依序打上password
$ sudo chown root:www-data  /var/www/web1/passwd.dav
$ sudo chmod 640 /var/www/web1/passwd.dav
再到 /etc/apache2/site-available/default,加上底下數行
Alias /webdav /var/www/web1/web<br />        <Location /webdav><br />           DAV On<br />           AuthType Basic<br />           AuthName "webdav"<br />           AuthUserFile /var/www/web1/passwd.dav<br />           Require valid-user<br />       </Location><br />
$ service apache2 restart
最後測試:可以本機或遠端,測試機器端記得$ sudo apt-get install cadaver
本機:$ cadaver http://localhost/webdav
遠端:$ cadaver http://server/webdav
Username: test
Password:

完成ok!

遠端連線方式:
Linux->位置->連接到伺服器
Win XP->網路上的芳鄰->新增一個網路位置



2011年8月29日 星期一

網頁中嵌入「Google·地圖」,靜態式

Google Static Maps API 不再需要 Maps API 金鑰!不需要 JavaScript。我們只需建立網址,再將網址放入 <img> 標記中就大功告成了。
Google Static Maps 服務現在支援「自訂標記圖示!
Google Static Maps API 的網址格式如下:

http://maps.google.com/maps/api/staticmap?parameters
位置參數:
  • center(必要)讓地圖鎖定正確位置LatLng(22.662063,120.293001),可以改用代表「地址」 的字串進行指定,例如,「City Hall, New York, NY」地址應該轉換成「City+Hall,New+York,NY」。sensor=false OR true
  • zoom(必要)zoom=0~~~21,center=40.714728,-73.998672&zoom=12&size=400x400&sensor=false
地圖參數:
  • size(必要)最高可達 640 x 640 像素
  • format,接受GIFJPEG 以及 PNG
  • maptype,接受roadmap,satellite,terrain,hibrid,&maptype=roadmap&sensor=true_or_false
  • mobile,&maptype=roadmap&mobile=true&sensor=true_or_false
  • language
功能參數:許多參數 (例如 markerspath 參數) 都可接受多個位置。在這種情況下,請以直立線 (|) 字元分隔位置。回報參數:
  • sensor(必要)true or false




2011年2月23日 星期三

無照上網賣蚊香 最少罰2萬

【人間福報台北訊】收到親友從國外帶回的Hello Kitty電池蚊香,自己未用而上網出售,小心觸法。環保署昨天重申,民眾若未持有環境用藥證照,卻將電蚊香、殺蟲錠、防蟲劑等上網拍賣,最高可處三十萬元罰鍰。

環保署去年查獲八件網路違法販賣環境用藥案件,販售的藥品包括Hello Kitty電池蚊香、日本殺蟑錠、風扇電蚊香等,其中有人是首次被逮、有人是把家庭用不到的藥品「出清拍賣」,但都被處兩萬到六萬元不等的罰款。
欲網路販賣網拍者請一定注意。
詳細請看人間福報2011/2/23資料http://www.merit-times.com.tw/NewsPage.aspx?unid=218475

2011年2月17日 星期四

登入Gmail

登入Gmail信箱的步驟,首先在瀏覽器網址列打上「www.google.com.tw」,
連線後就會看到約如右圖的畫面如圖一,接著請點選Gmail字眼就可以到Gmail登入畫面了。
接著打上登入帳號與密碼如下圖二,如果信箱為ylcdl9900@gmail.com,
則帳號就是ylcdl9900,密碼要自己記得,如果在公用電腦登入,使用
完畢一定要登出才安全。

當登入後最重要的就是畫面左欄功能列,只要利用收件匣,草稿,通訊錄,已加星號,寄件備份等分類
就可以提高效率。左圖。


最後,當你撰寫郵件時,請記得收件人要完整,例如『mannix@ershuo.com』,如果有多人時,請用英文逗點隔開。還有主旨一定要清楚簡單,可以提高對方閱讀信件的興趣喔!












2011年1月26日 星期三

使用大同WiMax-方便與痛苦處

考慮了好久,一直想增加網路速率,以前用ADSL 2M/512,後來申請威寶3.5G後把ADSL停止,結果有點給他慢速的,幸好威寶電信線上服務很認真對於問題也都迅速處理,除了3.5G慢速外其實沒什麼好挑剔的。可是現在許多網路服務需要高速率,所以一直想要再增加新的上網服務,考慮了光纖網路與大同WiMax,當然比價之下就選擇『大同大同國貨好!』。大同裝機速度也是Max的,所以半天就有人員完工上線了,廢話少說,馬上測試,4或5M/1M的速度果然不同凡響,給他免空下載、PPS影音等都很正常。

接著到了申請的網樂通,接上後,開機變很久,變成網不樂通,我懷疑是連線被重置了,沒關係再試試看bitTorrent,哇賽!我以為會是3.5G的倍速快,結果是完全接不通,被擋掉了,果然連線被重置了。好了看看TVUPlayer吧,咿???很慢拉,好像沒有想像中的MAX。
我想要的服務都無法正常,只有PPS正常,可是PPS用威寶3.5G就滿穩的了,幹嗎還要大同WiMax?就是要頻寬嘛!而且要不受服務限制,
只好趕快打服務電話伸訴,不錯2小時後有工程師回報要處理,感恩!接下來看效果如何了!

2011年1月21日 星期五

2011年1月20日 星期四

今天介紹學員使用blogger

今天介紹學員使用blogger,遇到了還要輸入驗證碼的問題,可能Google的免費服務是越來越多設定了,希望大家加油!不要受到限制

2011年1月14日 星期五

Ubuntu Dhcp server 設定

其實Linux Dhcp server的設定以及FORWARD轉址的設定是彈指間的事,只是用久了Ubuntu美麗的桌面卻忘了以前的單純。
設定/etc/network/interfaces 加上對內與對外的連線啟用
設定/etc/sysctl.conf,啟用net.ipv4.ip_forward=1 ,再#sudo sysctl -p
#sudo apt-get install dhcp3-server
#sudo vi /etc/dpcp3/dpchd.conf加上
# Sample /etc/dhcpd.conf
# (add your comments here) 
default-lease-time 600;
max-lease-time 7200;
option subnet-mask 255.255.255.0;
option broadcast-address 192.168.1.255;
option routers 192.168.1.254;
option domain-name-servers 192.168.1.1, 192.168.1.2;
option domain-name "mydomain.example";

subnet 192.168.1.0 netmask 255.255.255.0 {
range 192.168.1.10 192.168.1.100;
range 192.168.1.150 192.168.1.200;
} 
還有/etc/default/dpcp3-server裡也要加上正確的介面卡
#sudo /etc/init.d/dhcp3-server start