Delphi XE5實作仿Facebook Slide Menu

螢幕快照 2013-10-01 上午9.30.24

既然Delphi XE5可以開發Android、iOS的程式,那可不可以設計像Facebook一樣的選單呢(如上圖)?答案是可以的!

接下來就手把手教大家操作。

1首先開一個空的Mobile Project,在上面放一個ListBox元件,將Aligh設定為alClient

螢幕快照 2013-10-01 上午8.55.27

2接下來回到ListBox元件按右鍵進入 Item Editor,建立如下圖的選單

螢幕快照 2013-10-01 上午8.59.12

3.接下來再放上一個Panel,一樣把Aligh設定成alClient,接著在上面放一個ToolBar

螢幕快照 2013-10-01 上午9.01.41

螢幕快照 2013-10-01 上午9.02.01

4.在ToolBar上放一個SpeedButton,設定StyleLookup為detailstoolbuttonbordered

螢幕快照 2013-10-01 上午9.02.45

螢幕快照 2013-10-01 上午9.03.18

5.回到Panel元件,設定Position的X ,下拉選擇 Create New TFloatAnimation

螢幕快照 2013-10-01 上午9.49.49

6.接著在SpeedButton 的 OnClick事件

[pascal]
var
FloatAnimationX: single;
begin
FloatAnimationX:=Self.ClientWidth – 60;

if (panel1.Position.X=FloatAnimationX) then begin
FloatAnimation1.StartValue:= FloatAnimationX;
FloatAnimation1.StopValue:= 0;
end
else begin
FloatAnimation1.StartValue:= 0;
FloatAnimation1.StopValue:= FloatAnimationX;
end;

<del datetime="2013-10-01T09:44:53+00:00">AnimateDrawer</del>FloatAnimation1.Start;
end;
[/pascal]

結果就會變成如下圖了!

螢幕快照 2013-10-01 上午9.27.52
如果你要在Panel加上陰影的話,只要在Panel加上即可
螢幕快照 2013-10-01 上午9.28.40

螢幕快照 2013-10-01 上午9.29.30

螢幕快照 2013-10-01 上午9.30.24

 

GitHub原始碼 https://github.com/superlevin/delphixe5facebookslidemenu

中國大陸淘寶首頁彩蛋

螢幕快照 2013-09-30 下午7.45.04

 

因為是攻城獅的關係,看到網站第一個動作就是 右鍵 →顯示網頁原始碼 。不過在淘寶的中國大陸站中,看到很特別的程式碼,將其中一段的JavaScript排版成正妹的圖片。

 

除此之外,在中國大陸站首頁右側尋找入口輸入”土豪女”,會出現彩蛋,大家不妨來試看看。

螢幕快照 2013-09-30 下午7.51.25

 

螢幕快照 2013-09-30 下午7.51.37

 

螢幕快照 2013-09-30 下午7.52.22

11個Responsive Design CSS 框架

Skeleton

http://www.getskeleton.com/

Responsive Grid System

http://www.responsivegridsystem.com/

Foundation

http://foundation.zurb.com

Bootstrap

http://getbootstrap.com

Golden Grid System

http://goldengridsystem.com/

Gumby

http://gumbyframework.com/

Wirefy

http://getwirefy.com/

FRAMELESS

http://framelessgrid.com/

1140px CSS Grid Retired

http://andytaylor.me/2013/04/09/1140px-css-grid-retired/

Less Framework

http://lessframework.com/

320 and Up

http://stuffandnonsense.co.uk/projects/320andup/

Delphi XE5 正式發表-支援Android、iOS、Mac、Win的開發利器

其實壽山我自從Delphi 7之後,就很少follow Delphi的相關訊息。主要是後面的產品不是這麼的令人驚艷!

不過在FireMonkey這個框架出現後,就開始注意到Delphi這個開發工具的雄心壯志~毅然拋棄了多年且相當成熟的VCL,改投注在跨平台、跨裝置的FireMonkey上,就知道這開發工具準備大展身手了!

Click to see full-sized image

果然從XE2開始,FireMonkey就不斷進化~除了有64位元的程式外,也可以開發在Mac OS、iOS上面跑的程式…

到了XE4時,iOS開發已經相當純熟,也有不少軟體公司開始使用XE4開發app且成功上架~昨天XE5正式release 後,也看到Embarcadero依照著預定的roadmap,將delphi支援Android開發給呈現出來。

專案直接支援android、iOS Platforms

螢幕快照 2013-09-13 上午11.08.45

 

iOS、Android User Permissions直接以勾選方式

螢幕快照 2013-09-13 上午11.11.30

設計介面的外觀還可以讓您選是那個機器(或是螢幕大小)

螢幕快照 2013-09-13 上午11.08.58

雖然昨天台中場在李維大師的解說下,可以看得出仍有一些小小的bug在,不過整體而言可以看得出Delphi XE5已經很成功的開發出mobile的solution。

接下來有空的時間,也得好好摸索它,也希望有機會介紹給大家 :)

免費網頁分析及速度評分-PageSpeed Insights

Google Developers提供線上版的PageSpeed Insights工具,可以針對網頁內容分析以及網站整體速度做評分,並給予網站最佳化的建議細節,服務也會針對行動版以及桌面版做測試唷。

Google Speed Insight

 

網址:https://developers.google.com/speed/pagespeed/insights/

螢幕快照 2013-09-01 上午11.19.00

[Delphi] DBGrid顯示不同字型、顏色

dbgrid選擇顏色字型的方式
1.在DBGrid的Columns Editor中,將要出現按鈕的欄位的ButtonStyle設為cbsEllipsis
2.接著到OnEditButtonClick中增加程式判斷
if dbgrid1.SelectedField = xxxx(欄位名稱) then begin
end;
3.顯示的方式則是在OnDrawColumnCell中增加程式
IF COLUMN.FieldName = ‘xxxx(欄位名稱)’ THEN BEGIN
DBGrid1.canvas.brush.Color := STRINGTOCOLOR(‘clGreen’);
END;
// 記得要加上
DbGrid1.DefaultDrawColumnCell(Rect, DataCol, Column, []);

[Delphi] 餐廳、飲料、簡餐等餐飲業POS系統畫面實踐

posscreen

在餐廳、飲料、簡餐等餐飲業的pos系統,常常可以如上圖的畫面。在Delphi如何實踐呢?提出幾個重點:

1.取得.ClientWidth、ClientHeight

2.如果是Scrollbox這類會出現捲軸的元件,記得再透過GetSystemMetrics(SM_CXVSCROLL)、GetSystemMetrics(SM_CYHSCROLL)取得捲軸的寬度、高度,扣除掉才能取得正確可佈置的寬、高

3.透過Ceil記算頁數

4.Create元件時記得設定Parent

5.清空元件利用

while xxx.ControlCount > 0 do begin
xxx.Controls[0].Free;
end;

 

Apple Developer Center System Status

 

自從7/18 蘋果無預警關閉開發者網站後,隨後發佈網站被DDOS攻擊後,似乎是相當嚴重。

可以從 System Status網頁(https://developer.apple.com/support/system-status)看到服務狀態,目前祇有iTunes Connect及Bug Reporter是Online,其他都是OffLine。不知道什麼時候才會維修好!

systemstatus

淺淡POS歷史

POS系統已邁向第五代了!至於前四代是什麼呢?也稍微瞭解一下,

第一代:電子收銀系統(Electronic Cash Register;ECR),錢箱加上按鈕,做簡單的運算、開立發票。
第二代:電子收銀系統(ECR) 同一代機功能,增加了網路RS232功能,可做簡單分析及統計報表
第三代:端點銷售系統(POS),開始採用 PC架構,不過是分離式主機與螢幕、週邊
第四代:端點銷售系統(Touch POS) 類似第三代,不過整合成一體,並針對防震、防水及耐用等功能有更大的要求。
第五代:無人櫃檯(Kiosk) 無線、無人櫃檯、無人商店