2014-08-30

ExtJS 5 專案開發時不使用 bootstrap.js 的方式

Sencha 建議使用 Sencha CMD 來建立 ExtJS 5 的專案, 以及進行發佈.
但在較大的專案, 許多現有的工具都比 Sencha CMD 要來得好用, 但目前以 Sencha CMD 建立的專案, 似乎只能用 Sencha CMD 發佈.

為了讓專案有良好的 MVC 架構, 在此依然使用 CMD 建立, 但會考慮以 GruntJS 做發佈。

1. 首先在解壓縮的 ext-5.0.1 目錄使用 CMD 建立專案:
sencha generate app ext501 ../ext501

2. 修改 app.js (設定套件名稱對應的路徑, 載入 Application, 設定引入的類別)
 Ext.Loader.setPath({
  'Ext': 'ext/src',
  'ext501': 'app'
 });
 Ext.syncRequire('Ext.app.Application');
 Ext.application({
  name: 'ext501',
  extend: 'ext501.Application',
  requires: [
   "Ext.layout.container.Border",
   "Ext.tab.Panel",
   "ext501.view.main.MainController",
   "ext501.view.main.MainModel"
  ],
  autoCreateViewport: 'ext501.view.main.Main'
 });

3. 修改 ext501.view.main.MainController 的 requires, 不能用 shortcut
    requires: [
        'Ext.window.MessageBox'
    ],

4. 建立 index_app.html
 <html>
 <head>
  <title>ext501</title>
  <link href="ext/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css" rel="stylesheet" type="text/css"></link>
  <script src="ext/ext-all.js" type="text/javascript"></script>
  <script src="ext/packages/ext-theme-classic/build/ext-theme-classic.js" type="text/javascript"></script>
  <script src="app.js" type="text/javascript"></script>
 </head>
 <body></body>
 </html>

5. 啟動 web server 拜訪 index_app.html 查看 default project 的運作。

張貼者： 於 沒有留言:
標籤：

2014-08-08

IE8 和 Bootstrap 3

參考 IE8 issue with Twitter Bootstrap 3

shiv 讓 IE8 支援 HTML 5 標籤
respond.js 讓 IE8 支援 media query

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->
另外, 最好的方式還是用 Modernizr 來判斷哪些功能沒支援, 不要直接判斷是否為 IE8.
張貼者： 於 沒有留言:
標籤： ,

2014-05-19

JavaScript 載入資源時的 Sync 和 Async 作法

1. 同步執行 JavaScript (Sync)
在現有的 <script> 之後加入另一個 <script> 標籤 (嚴格講起來, 不算真的 sync) 
var s = document.createElement("script");
s.type = 'text/javascript';
s.src = "js-url.js";
document.write(s.outerHTML);


2. 非同步執行 JavaScript (Async)
在 <head> 裡加入 <script> 標籤 
var s = document.createElement("script");
s.type = 'text/javascript';
s.src = "js-url.js";
document.getElementsByTagName("head")[0].appendChild(s);


3. 使用 XMLHttpRequest 同步取得 JSON (Sync)
var jsonFile = 'test.json';
var req = new XMLHttpRequest();
req.open("GET", jsonFile, false); // "false": synchronous
req.send();
console.log(req.responseText);


4. 使用 jQuery 同步取得 JSON (Sync)
$.ajax({
    url: appInfoUrl,
    async: false,  // synchronous
    datatype: "json",
    success: function(res){
        if(typeof(res)==='string') {
            res = $.parseJSON( res );
        }
    }
});


5. 使用 XMLHttpRequest 在載入文字檔資源前, 先判斷檔案是否存在
var jsonFile = 'test.json';
var req = new XMLHttpRequest();
req.open("GET", jsonFile, false); // "false": synchronous
req.send();
if(req.status === 404){
 console.log('檔案不存在');
} else {
 
}


張貼者： 於 沒有留言:
標籤：

2014-04-10

Grunt.js 入門講義

●● Grunt 入門　　　◎ 林新德 編 ( shinder.lin@gmail.com ) 2014.4 

● Grunt ( http://gruntjs.com/ )
名稱來自於 grunt work (單調的工作)，它的功能是使用設定來執行常做的動作，例如最小化 JavaScript 和 CSS 檔等。


● Grunt 在 0.3 版時提供常用的功能，設定檔使用 grunt.js。到 0.4 版時做了些調整，使用外掛的架構，設定檔為 Gruntfile.js。


● 本講義以 Windows 7 為作業系統為例，各軟體的安裝皆在 Windows 7 底下安裝，請注意使用的軟體版本，例如 NodeJS 有 32-bit 和 64-bit 之分。
◎ Windows Command Prompt 使用 PowerShell
◎ 範例專案 shinder_maze.zip 和 shinder_circle_menu.zip  (** blog 不提供專案包 zip 檔 )

● Web server，使用 Python3 內建的簡易 web server ( 非必要 )
在 Command prompt，到專案目錄使用下式啟動 server
> python -m http.server [埠號]
使用「Ctrl + C」停止 server

● 在安裝 Grunt 之前需先安裝 Git 和 NodeJS

◎ 1. NodeJS ( http://nodejs.org/ )
– 直接從官網按「 INSTALL 」，下載 msi 檔並安裝。

◎ 2. Git
– 安裝 Git for Windows ( http://git-scm.com/download/win )
– 安裝過程中請勾選「Run Git from the Windows Command Prompt」

閱讀更多 »
張貼者： 於 沒有留言:
標籤： , ,

2013-12-27

Snap.svg 載入 svg 檔時的兩三事

使用 Snap.load() 時, 載入的檔案內容會變成 Fragment 物件。而 Fragment 物件只有兩個方法: select() 和 selectAll()。

在載入之後, 即刻使用 select() 可以取得一個 Element 物件; 而使用 selectAll() 是將樹狀結構攤平, 取得符合條件的 Elements, 結果是 type 為 set 的物件 (也可以視為 Array 操作)。

當 Fragment 物件被加到 (append) DOM 裡面時, select() 和 selectAll() 就會失效。文件上敘述的很少, 只寫到 Fragment.select 同 Element.select, Fragment.selectAll 同 Element.selectAll。一開始使用應該很容易踩到這個雷吧。

--- ---

Snap.select() 和 Snap.selectAll() 從整個 Paper 物件去取得 Element(s)。

--- ---

另外, 載入的 svg 檔通常最外層就是一個 <svg> 標籤, 我們可以將這個 Fragment 物件直接放到一個 g element 裡, 操作 g element 就可以改變整個載入的圖形。svg 標籤可以是多層的結構。
Snap.load("some.svg", function(fragment) {
    var wrapper = paper.g();
    wrapper.append(fragment).drag().transform('t200,100s1.2');
});

--- ---

最外層的 <svg> 標籤稱為 Paper 物件。Paper 物件的行為和 Element 類似, 但目前建立 Element 物件只能使用 Paper 物件 (例如: Paper.g(), Paper.rect() 等)。

--- ---

Element 物件的屬性:
    node 指向 DOM element object (用  setAttribute() 可以設定 id 屬性)
    paper 指向 Paper 物件
    type 為標籤名稱 (字串)
    id

--- ---

有時搭配 jQuery 使用很方便。


張貼者： 於 沒有留言:
標籤：

2013-12-26

字型轉換為 SVG

想在網頁上放幾個中文字, 但並非固定的字, 就找找看有沒有字型轉換為 SVG 格式的工具。結果找到 Apache Batik SVG Toolkit, Java 寫的工具包, 這工具包大概有五、六年沒更新了, 試用了一下, 用 command line:

java -jar batik-ttf2svg.jar ./BHei01e.ttf -l 24503 -h 24503 -id mysvg -o mysvg.svg

再用 Inkscape 打開 svg 檔, 並沒有看到我要的結果; 接著用 sublime 查看, 原來是放在 defs 標籤裡。格式長這樣子:

<glyph unicode="!" glyph-name="null" d="M207 805L214 229H298L312 805H207ZM200 116V-7H323V116H200Z" />

於是異想天開地想用 PHP 的 shell_exec() 呼叫 Java 程式拿到某幾個字元的 SVG 格式。事與願違, 要 3 個字的資料 PHP 跑了 1 秒多, 要 6 個字的資料跑了近 3 秒, 這樣看起來是行不通的。原因應該是, 取得一個字的資料 Java 就開檔、關檔一次, 耗時間是難免的。

閱讀更多 »
張貼者： 於 沒有留言:
標籤： ,

2013-12-23

Snap.svg Objects rotating animation problems

Snap.svg 旋轉動畫的問題

用 Snap.svg 做 element.animate() 旋轉動畫時, 若圖案的中心對準原點 (如 上篇), 則以中心點當旋轉中心, 動畫會是正常的。但若偏移中心點做旋轉, 會伴隨縮放的發生, 明明就沒有要做縮放啊 ? 問題應該是 animate() 用 Matrix 的 a, b, c, d, e, f 去做值的改變, 而造成的, 跑出來的動畫就是很白痴...

閱讀更多 »
張貼者： 於 沒有留言:
標籤： ,

2013-12-20

Snap.svg 測試感想

看到 Snap.svg 官網的範例, 感覺可以做很多東西, 於是動手用 Snap 做了 Merry Xmas 測試網頁。完成這個小例子之後, 有以下幾點感想:
  1. Snap.svg 目前是 0.4.2 版, 版號雖然看起來不大, 但由於 Snap 作者之前 Raphael 專案累積的經驗, Snap 的功能其實已算完備。但在文件上還有許多改善空間。Snap 和 Raphael 的一些 functions 設計的方式雷同, 所以有時我是看 Raphael 的文件, 才知道 Snap 某個 function 的用法。
閱讀更多 »
張貼者： 於 沒有留言:
標籤： ,

2013-12-18

最近遇到 Silex 之 Built-in Service Providers 的問題

Silex 是 PHP 的一種微框架。使用 Silex 而沒有選用 Slim 的原因是 Silex 的肥版內置了常用的功能, 而且 Silex 是 Symfony2 相關的專案。

目前裡面的 Twig 和 Doctrine DBAL 是用得還滿開心的, 但 Session 和 Swiftmailer 就用不太習慣, 或遇到狀況。

寄 mail 的功能, 個人長時間習慣使用 PHPMailer。Swiftmailer 寄未認證信時, 常收不到; PHPMailer 至少會在垃圾郵件中找到。

Session 的問題是 Silex 使用 SessionServiceProvider, 並非 PHP 原先內建的 $_SESSION功能。在混用 Securimage 做 captcha 功能時, 由於 Securimage 使用的是內建的 $_SESSION, 而造成 SessionServiceProvider 無法啟用。
RuntimeException: Failed to start the session: already started by PHP ($_SESSION is set).
後來的解決方式是乾脆 把 SessionServiceProvider 給關了, 直接使用 $_SESSION。



張貼者： 於 沒有留言:
標籤： ,

2013-12-14

使用 Inkscape 做 SVG 檔案的最佳化 (最小化)

參考這篇 Optimizing Inkscape SVG size for the Web

「檔案」 > 「另存新檔」 > 「存檔類型」選「最佳化的 SVG」 (倒數幾個選項)」 > 按「儲存」, 再依據需求於面板上勾選去除或包含的項目, 按「確定」後完成。

在參考的 blog 裡發現了一個會動的 SVG clock2, 感到相當驚奇, 偷看一下原始碼, 原來是放了 <script> 標籤 XD。



張貼者： 於 2 則留言:
標籤： ,
訂閱： 文章 (Atom)

FB 留言