2021/07/24

用CSS畫出IE限定的BorderColorLight、BorderColorDark等效果


最近在翻一些古早實作書籍,看到幾個別開生面的 HTML 屬性:BorderColorLight, BorderColorDark,使用 Chrome、FireFox 等支援 HTML5 的瀏覧器來開時會是這樣:


當時只覺得為什麼都是黑白線條,現在該是回來解謎的時候!😉

圖片中的上半部使用到 BorderColorLight, BorderColorDark 屬性,經查才知道是 IE 限定,之後在 IE 裡開啟效果如下:


效果還蠻好看的,原來表格也可以上色彩。

IE 真的好,用 CSS 才驚覺這 BorderColorLight 和 BorderColorDark 是神馬黑技術!

拆解 BorderColorLight 和 BorderColorDark

圖片來源:linuxtopia

Linuxtopia 的圖片真的太到位,連光源都送你了,Light 是指被太陽照到的地方,圖片以淺藍色表示;Dark 則是太陽照不到的地方,圖片以深藍色表示。

理解意思後,就要找 CSS 有沒有可以解的解方。

答案是有的,只是和 IE 相比在 CSS 上並不容易呈現,必須以上下左右獨立設置,回頭看看 IE,簡單明瞭!

原 IE 程式碼:

<table border="2" cellspacing="2" cellpadding="2" 
  width="99%" bordercolordark="#99cc66" bordercolorlight="#ffcccc">
  <caption>Eden IE Table Test</caption>
  <tr>
    <td>IE Column 1</td>
    <td>IE Column 2</td>
    <td>IE Column 3</td>
  </tr>
</table>

改 CSS 程式碼:

在修改前還要說明下,cellspacing 和 cellpadding 這兩個 HTML 屬性又是 IE 限定,這下又多了一道關卡:

圖片來源:維基百科

簡單的說就是填上一堆空白或留白,好在 CSS 這裡相對容易理解,就是多了一道標籤手工活。

<style>
.cssIETable
{
  border-top: 2px solid #ffcccc;
  border-left: 2px solid #ffcccc;
  border-right: 2px solid #99cc66;
  border-bottom: 2px solid #99cc66;
  border-collapse: separate; /*cellspacing */
  border-spacing: 2px;
}
.cssIETable TD {      
   padding: 2;  /*cellpadding*/
} 
</style>
<body>
<table class="cssIETable" border="2"
  width="99%">
  <caption>Eden CSS Table Test</caption>
  <tr>
    <td>CSS Column 1</td>
    <td>CSS Column 2</td>
    <td>CSS Column 3</td>
  </tr>
</table>
</body>


嗯,那復古風味感終於又回來了!😎


See also

2021/07/21

Delphi CE 社群版版權到期延展方法


在【How to extend CE licence?】社群討論中顯示,當 CE 社群版的版權到期時,可以再到 Delphi 社群版下載頁面:https://www.embarcadero.com/products/delphi/starter/free-download/,使用同帳號再註冊一次,EMBT 系統會自動發送新的一組授權序號到你的信箱。

要注意的是這組序號只能註冊當下最新版的社群版中,若版號不一樣則無法使用,此時則必須重新安裝最新版本的社群版。

和你分享 ❤

2021/07/15

FastReport 報表檔 FR3 在 D7 升級 XE 前必須要了解的資訊

我家產品自從 D7 升級成 XE 後,在開發時,報表從零到有還蠻輕鬆的,FR (FastReport) 的報表產生器所產出的 fr3 報表定義檔會自動存為 UTF8 格式。上線後,才發現之前存在 D7 裡的 fr3 在 XE 中在中文的地方會出現亂碼。

D7 所設計的 fr3



XE 讀取 D7 設計的 fr3



沒有什麼比轉一半更令人揪心

在遇到問題時,如果這問題有一致性,就像文字轉碼一樣,全是亂碼的還容易處理:找到編碼,轉換,收工。

但現在的情況是 FR 轉出的 fr3 檔,有部分正常,有部分亂碼,這關最難解!

災難中的小確幸,確定是編碼問題

D7 只支援 Ansi,所以轉出來的 fr3 無庸至疑的是 Ansi,從圖片可知是採繁體中文大 5 碼  (Big5) 代碼頁 (CodePage=950)。

既然知道是 Ansi,現在就可以來猜亂碼的地方是什麼編碼。




我還是直接公佈答案好了:


沒錯,就是 Ansi 的 UTF8 代碼頁 (CodePage=65001)!


難解之處就在二選一

從上圖可以知道當切換代碼頁時,原本能顯示中文的地方會變成亂碼,反之亦然。哼哼,FastReport 真有你的,硬是不出升級工具。官方沒準備,只好自己硬上。

fr3 是 XML 格式,但


Delphi 的 XML Mapper 是很實用的 XML 解析工具,但無奈 fr3 是一個特規,它無法順利解析 fr3 的內容。

 

先說結論

經過在漫長的奮鬥之路後,總算是做出一個像樣的結果:


該顯示中文的地方能順利顯示中文,格式也採 UTF8,尤其是 XE 開始支援 Unicode 後,Ansi 文字處理變得相對麻煩,【System.AnsiStrings 單元】會是過這關的最佳利器!


和你分享 ❤

See also


2021/06/18

JSON 和 SQL Server 日期轉換上的時區地雷

前端開發了一段時間,終於也讓我遇到日期時區關卡。(笑)

以下的時區為【+08:00】。

JSON 在日期轉換上嚴守 ISO8601 日期規則,並且一律按世界協調時間 (UTC+0) 傳送,導致伺服器接收到的日期都會是少一天的情形。

伺服器接收 ISO8601 日期

原本伺服器接收到 JSON 後,僅做文字擷取後直接送 SQL Server 資料庫,意外就這樣發生了。

SQL Server 面對 ISO8601 文字格式也僅僅只做「所見即所得」的日期轉換,不會做時區處理。

加上時區文字後:


SQL Server 無法識別時區區塊,導致轉換失敗。這裡值得一提的是在「完成時間」的地方,是完整的 ISO8601 日期格式,看來 SQL Server 已知用火,確實有支援 ISO8601 日期。

既然如此,那就用新日期格式 DateTime2 來試試:


以上可以得知:

  • SQL Server 不會對 ISO8601 日期進行時區轉換,僅做日期格式轉換。
  • DateTime 格式不支援 ISO8601 時區區塊
  • DateTime2 完整支援 ISO8601 日期格式。

資料庫不足的地方只能使用後端程式進行轉換,以 Delphi 為例:

ISO8601 日期文字沒有時區內容時,則 UTC 日期時區偏移 0,本機時區 +08:00。


ISO8601 日期文字有時區內容時,則 UTC 日期時區偏移 -08:00,本機時區時區偏移 0。


 

結論

如果是新專案,日期格式一律存放 UTC+0 日期,後端不需處理,而前端 JavaScript 會自動轉換對應時區,算是對前後端都很友善的選項。

前端是採用沒有自動轉換時區的開發工具,就辛苦一點手動處理。(攤手)

萬一是承接舊專案,或在已有資料庫的情形建構前端網站,那資料庫日期十之八九都可能會是以該時區日期存放,此時就會建議後端傳送或接收都要進行本機時區轉換。


不知不覺就掃掉全球化的地雷,哈!

See also

2021/05/25

EasyUI Form 讀取 API 的知識點

 

EasyUI Form 事件流程
EasyUI Form 事件流程

從原生到三方元件

HTML 原生的 Form 使用上很容易,原本也要採用這樣的設計,但為了界面一致性,採用 EasyUI Textbox 等元件配置,但 EasyUI 元件實際在渲染時會和我們預期配置不同,這也造成上傳時有些要注意的地方。例如設計的 input class="easyui-passwordbox" 就會被拆成兩個 Html 標籤處理:

2021/05/14

HTML Banner 設計:CSS 漸層 vs. Canvas 繪製



在網頁復刻應用程式時,第一關面對的就是 UI 重建,而最先遇到的,常常就是那個佔據網頁最顯眼位置的傢伙——介面橫幅 (Banner)。在重建的過程中,難免會把以前的開發套路帶進來,就像我一樣,結果就是浪費了一堆寶貴的時間。

 

Banner 結構解析:化繁為簡

要重建橫幅,就像組模型一樣,要先把它解構成一個個小零件,再重新組裝起來。以這個 Banner 來說,內容如下:

  • 漸層方塊
  • 主標題
  • 子標題

就這三個元件,搞得自己是灰頭土臉...

2021/05/03

How to embedded DBX DLL for Deployment in project, take Devart Driver as an example.


Table of Contents


English Version

Studying Devart dbExpress driver, readme file for SQL Server :

Users of dbExpress driver for SQL Server with Source Code can embed the driver into the application directly. For information on how to do this refer to Borland documentation.

This sentence mainly explains that Devart company can use certain mechanisms to make the existence of DBX Dll unnecessary when deploying the project, for example: dbexpsda40.dll and so on.

No need to deploy the advantages of DBX DLL

Some DBX Drivers need to install the DB Client, but Devart provides a [Direct Connection] mode, in which the database access components can be directly connected to the DB via TCP without the DB Client. In addition to omitting the conversion of DB Client, there is no need for additional deployment of DBX DLL settings, which can effectively eliminate potential system configuration problems and save time for publishing system configuration.

Disadvantages of not needing to deploy DBX DLL


Although there is no need to deploy DLL, based on the principle of equivalent exchange, the capacity of the DLL will be filled into the EXE we want to deployment, which will cause the execution file to become larger - it grows about 487 Kb.

Prerequisites for use


You need to purchase [version with source code] first, and exchange for knowledge achievements with a small price, I think it is worth it!

How to

After the purchase of the [Include source code version] condition is established, and you only need to add the [DbxSdaDriverLoader] unit to the project, supplemented by the following code, to achieve the goal of [No DBX DLL required]:

uses
  Data.DB, Data.SqlExpr, DBXDevartSQLServer, DbxSdaDriverLoader;

...

procedure TForm1.Button1Click(Sender: TObject);
begin
  SQLConnection1.DriverName := 'DevartSQLServerDirectBuiltin';
  SQLConnection1.LibraryName := 'dbexpsda41.dll';
  SQLConnection1.VendorLib := '';  
  SQLConnection1.GetDriverFunc := 'getSQLDriverSQLServerDirect';
  SQLConnection1.Params.Values['OS Authentication'] := 'False';
  SQLConnection1.Params.Values['HostName'] := 'Host';  
  SQLConnection1.Params.Values['User_Name'] := 'sa';
  SQLConnection1.Params.Values['Password'] := '';
  SQLConnection1.Params.Values['Database'] := 'Database';
  SQLConnection1.LoginPrompt := False;
  SQLConnection1.Connected := True;
end;


Summary

Developers using DBX don’t actually need to rush to replace components. Sometimes spend some cost, can bring more value.

The above information is shared with you!

================================================================

中文版

在研究 Devart dbExpress driver for SQL Server 的 Readme 檔案時,我發現了一句古代文字:

Users of dbExpress driver for SQL Server with Source Code can embed the driver into the application directly. For information on how to do this refer to Borland documentation.
這句話主要在說明 Devart 它可以利用某些機制,使佈署專案時可以不需要 DBX Dll 的存在,例如:dbexpsda40.dll 等。

不需佈署 DBX DLL 的優點

有些 DBX Driver 需要安裝 DB Client,但 Devart 提供【直接連接】模式,在此模式下可以讓資料庫存取元件在不用 DB Client 的場合下透過 TCP 直接連接 DB。除了少掉 DB Client 的轉換外,更不需要額外佈署 DBX DLL 的設定,可以有效排除潛在的系統設定問題和節省發佈系統的設定時間。

不需佈署 DBX DLL 的缺點


雖說不用佈署 DLL,但基於等價交換原則,DLL 的容量會填充到我們欲發佈的 EXE 上面,進而造成執行檔變大的情形 -- 大約成長 487 Kb 左右。

使用前提

方便部署的前提為【購買含原始碼版本】,用少許代價換取知識成果,我認為值得!

如何設計

在使用前提【購買含原始碼版本】條件成立下,之後只需在專案中加入【DbxSdaDriverLoader】單元,並輔以底下程式碼,便能達成【不需 DBX DLL】的目標:


uses
  Data.DB, Data.SqlExpr, DBXDevartSQLServer, DbxSdaDriverLoader;

...

procedure TForm1.Button1Click(Sender: TObject);
begin
  SQLConnection1.DriverName := 'DevartSQLServerDirectBuiltin';
  SQLConnection1.LibraryName := 'dbexpsda41.dll';
  SQLConnection1.VendorLib := '';  
  SQLConnection1.GetDriverFunc := 'getSQLDriverSQLServerDirect';
  SQLConnection1.Params.Values['OS Authentication'] := 'False';
  SQLConnection1.Params.Values['HostName'] := 'Host';  
  SQLConnection1.Params.Values['User_Name'] := 'sa';
  SQLConnection1.Params.Values['Password'] := '';
  SQLConnection1.Params.Values['Database'] := 'Database';
  SQLConnection1.LoginPrompt := False;
  SQLConnection1.Connected := True;
end;


總結

使用 DBX 的開發者其實不需要急著更換元件,有時使用更好的 Driver 也能夠達到【花得更少,用得更好】的目標,用少許的金錢所帶來的經濟效益遠超乎想像。


以上資訊和你分享!


See also