kbmmw 與extjs 通過JSON Base64 顯示圖片
阿新 • • 發佈:2017-10-29
nbu this char tab pst llb exit 官方 nal
delphi 官網上開始也來越多的介紹delphi與extjs 結合的例子,今天我就把官方的例子翻版一下。
官方使用C++builder 和webbroker 實現。
我使用kbmmw 來實現一下。
老規矩,先要實現服務器端,這個服務器端也很簡單,就是把一個圖片文件轉換成base64,然後封裝成json 輸出到瀏覽器上。
直接代碼:
function Twebsrv.getimg: string; var mybase64:TBase64Encoding; myfs:Tfilestream; myss:Tstringstream; begin mybase64:=TBase64Encoding.Create(0); myfs:=Tfilestream.Create(‘D:\picture\1.jpg‘,fmOpenRead ); myss:=Tstringstream.Create; try mybase64.Encode(myfs,myss ); result:=‘[{"img":"data:image/jpeg;base64,‘+myss.DataString+‘"}]‘; finally mybase64.Free; myfs.Free; myss.Free;end; end;
再處理一下對應的http get 操作
function Twebsrv.Performget(ClientIdent:TkbmMWClientIdentity; const AURL:string; const Args:array of Variant):Variant; var mystringstream:Tstringstream; MimeType,s,scallback:string; Charset,tablename:string; qv:TkbmMWHTTPQueryValues; dataurl,mysql,swhere:string; I: Integer; begin qv:=TkbmMWHTTPQueryValues.Create; dataurl:=args[0]; qv.AsString:=Args[2]; if length(Args)<1 then kbmMWRaiseException(KBMMW_ERR_SERVICE_HTTP_URLMISSING,‘Missing URL.‘); try if args[0]=‘/version‘ then begin result:=‘kbmmw 5.03‘; exit; end; if args[0]=‘/getimg‘ then begin s:=getimg; scallback:=qv.ValueByName[‘callback‘]; if scallback<>‘‘ then result:=scallback+‘(‘+s+‘)‘ else Result:=s; exit; end; ...... result:=inherited Performget(ClientIdent,aurl,Args) ; finally qv.Free; end; end;
編譯運行,在瀏覽器裏面輸入http://localhost/getimg.
輸出正常,服務器端搞定,下面設計extjs.
加一個datastore.
設置對應的屬性。
在view 裏面建立對應的控件
並建立按鈕的點擊事件
Ext.define(‘MyApp.view.MyFormViewController‘, { extend: ‘Ext.app.ViewController‘, alias: ‘controller.myform‘, onButtonClick: function(button, e, eOpts) { var me = this; var store = Ext.getStore(‘MyJsonPStore‘); store.load({ callback: function (records) { var img = me.lookup(‘xalionimg‘); img.setSrc(records[0].get(‘img‘)); } }); } });
ok,發布這個應用。
在瀏覽器裏面輸入http://localhost/index.html
點擊按鈕,就可以顯示出來圖像了
ok, 搞定了。
剩下的就是學習extjs 的知識了。
kbmmw 與extjs 通過JSON Base64 顯示圖片