2014年9月4日 星期四

Code Charge Studio 操作程序要注意

Code Charge Studio 是一個蠻複雜的系統，他是一個程式產生器，所以，必需將很多使用者設定的需求以資料的形式建立檔案記錄下來，這樣產生器程式才可以產生出使用者設計的程式。

而這個過程，由於 Code Charge Studio的系統裡面，有很多視窗，Web程式也牽涉到很多東西，php、mySql、HTML、CSS、js等等。Code Charge更厲害，同一個系統，你可以決定要產生PHP, ASP, JSP, Perl, ColdFusion, ASP.NET.等原始語言！開發團隊很厲害，要同時熟悉這麼多語言！所以，其內容複雜程度可想而知。

在實際操作Code Charge的過程中，筆者發現其正確的操作程序，有實是很重要的。否則，就會產生錯誤而找不到原因！

例如：筆者製作一個頁面，引入另一個引入頁，後來因為被引入頁做了修改，複製成另一個新的頁檔，而原頁筆者直接去修改該頁的 Property裡面的值而已，結果，後來不斷的產生問題，而不知道哪裡出問題。想起來會不會是引入頁面的問題，所以，就將該引入頁刪除，然後重新從上面的功能頁插入，這樣就好了！

我在想，應該是 Code Charge 紀錄一些資料在 property裡面，也記錄在 .CCP或XML格式的資料檔裡面，而從功能列執行的動作，會同時去更新 Property 及 XML 檔案，而如果直接去修改Property，而XML資料檔沒有改，還是記錄舊的，因此，就產生錯誤。

因為對於Code Charge 的內部作業環境還不是很熟悉，有些東西可以直接改，有些東西一定要從 他提供的功能列來產生改變，筆者覺得其操作的一致性，以及操作的"防呆"措施還不是很理想，所以，才會讓使用者有機會在不熟悉的情形下改了不應該改的東西，而發生錯誤！

這部分 Code Charge 還有很大的改進空間的。

但是，就效率產生原始程式的應用來說，Code Charge還是一個強大節省大量時間的系統。但就是要遵守他的規則就是了。如果違反，會發生不知道的錯誤而不自知！
此時，光要抓出錯誤，就又浪費了一大堆時間！



於 沒有留言:
標籤：

Code Charge 裡的 Login builder 如何套 Bootstrap

這兩日試著研究 BootStrap ，並要用 Code Charge 來套用。

首先，制作應用Bootstrap 的 Master Page，將它放在一個Design下，Bootstrap 需要的所有 CSS、js 等都放在適當的目錄下。讓程式可以抓得到。

Code Charge 有一個 LOGIN Page的自動 Builder，修改個 Form Template，拿Code Charge內建的 /Template/Authentication 裡面的 Vertical 來改。像這樣：新檔名為：bs_vertical

<form id="formId" role="form" method="post" name="{HTMLFormName}" action="{Action}">
<fieldset><legend>{Title}</legend>
<div class="panel panel-default">
<ul class="list-group">
        <!-- BEGIN Error -->
  <li class="list-group-item">{Error}</li>
        <!-- END Error -->
</ul>
</div>
          <!-- BEGIN ControlContent -->
<div class="form-group">
{ControlTitle}
{ControlTemplate}
</div>
          <!-- END ControlContent -->
<div class="checkbox">
<label><input type="checkbox"> {rememberMe}</label>
</div>
          <!-- BEGIN Footer -->
<button type="submit" class="btn btn-default">{Buttons}</button>
          <!-- END Footer -->
</fieldset>
</form>

由於Bootstrap 的 Submit 用 <botton>來做，而CodeCharge內建的用 <input>來做，所以，在套用時，需再將 HTML 中移除<input>，因為我們用自己的<botton>！

產生出來以後，還要修改一下產生的 HTML 內容，主要是 Login name以及 password這兩個 <input>裡面要多加 class="form-control"，而 maxlength="100" size="20" 刪除這樣就差不多完成了！

我找到在 Code Charge 裡面產生 Login Page Builder 的程式，可以要去改他，還真麻煩，算了。隨便亂動 Code Charge 所付的程式，萬一怎樣，還真麻煩，還是不要亂動原本的程式較妙。

那就只好產生出來以後，再手動略加修改一下囉。



於 沒有留言:
標籤： ,

2014年9月2日 星期二

html 裡 class="abc def" 有兩個以上的classname

例如：<span class="left important">

這是允許將這兩個CSS classes合併起來應用到該HTML元素。

這可能是很多人知道的基本概念吧！初學者或許不知道，記錄筆記在這裡。

於 沒有留言:
標籤：

CSS 的選擇器 Selector

從 w3school copy過來的資料，翻譯註解一下：
http://www.w3schools.com/cssref/css_selectors.asp

SelectorExampleExample descriptionCSS
.class.intro選擇所有帶有 class="intro" 的元素 (可以多個)1
#id#firstname選擇特定 id="firstname" 的元素 (應該只有特定的一個)1
**選擇所有的元素2
elementp選擇所有 <p> 元素1
element,elementdiv, p選擇所有 <div> 和所有 <p> 元素1
element elementdiv p選擇所有存在 <div> 元素裡面的 <p> 元素1
element>elementdiv > p選擇所有父親是 <div> 元素的 <p> 元素

這跟上一個有何不同？ div p 是所有 div裡面的 p，不管多少層以下； div > p 則是div的底下一層。<!DOCTYPE html>

<style>
#ttt > p {    background-color: yellow;}
</style>
<div id = ttt>
  <h2>My name is Donald</h2>
  <p>I live in Duckburg.這一段有選上</p>
  <div><p>這一段沒有被選上</p></div>
</div>
<p>My best friend is Mickey.這一段沒有選上</p>		2
element+elementdiv + pSelects all <p> elements that are placed immediately after <div> elements
所有立即接在 <div> 後面的 <p>。
理論上應該只有一個會立即接在後面啊？！上面怎麼說 all 呢？

<style>
div + p {background-color: yellow;}
</style>

<div>
  <h2>My name is Donald</h2>
  <p>I live in Duckburg.這沒有</p>
</div>

<p>My best friend is Mickey.這個有選上</p>

<p>I will not be styled.這個沒有</p>		2
element1~element2p ~ ulSelects every <ul> element that are preceded by a <p> element
選擇所有 <p>後面的每一個 <ul>，

<html>
<head>
<style>
p ~ ul {
    background: #ff0000;
}
</style>
</head>
<body>

<div>A div element.</div>
<ul>
  <li>Coffee這段沒有</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<p>The first paragraph.</p>
<ul>
  <li>Coffee這段以後都有</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<h2>Another list</h2>
<ul>
  <li>Coffee這有</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>		3
[attribute][target]Selects all elements with a target attribute2
[attribute=value][target=_blank]Selects all elements with target="_blank"2
[attribute~=value][title~=flower]Selects all elements with a title attribute containing the word "flower"2
[attribute|=value][lang|=en]Selects all elements with a lang attribute value starting with "en"2
[attribute^=value]a[href^="https"]Selects every <a> element whose href attribute value begins with "https"3
[attribute$=value]a[href$=".pdf"]Selects every <a> element whose href attribute value ends with ".pdf"3
[attribute*=value]a[href*="w3schools"]Selects every <a> element whose href attribute value contains the substring "w3schools"3
:activea:activeSelects the active link1
::afterp::afterInsert content after every <p> element2
::beforep::beforeInsert content before the content of every <p> element2
:checkedinput:checkedSelects every checked <input> element3
:disabledinput:disabledSelects every disabled <input> element3
:emptyp:emptySelects every <p> element that has no children (including text nodes)3
:enabledinput:enabledSelects every enabled <input> element3
:first-childp:first-childSelects every <p> element that is the first child of its parent2
::first-letterp::first-letterSelects the first letter of every <p> element1
::first-linep::first-lineSelects the first line of every <p> element1
:first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent3
:focusinput:focusSelects the input element which has focus2
:hovera:hoverSelects links on mouse over1
:in-rangeinput:in-rangeSelects input elements with a value within a specified range3
:invalidinput:invalidSelects all input elemets with an invalid value3
:lang(language)p:lang(it)Selects every <p> element with a lang attribute equal to "it" (Italian)2
:last-childp:last-childSelects every <p> element that is the last child of its parent3
:last-of-typep:last-of-typeSelects every <p> element that is the last <p> element of its parent3
:linka:linkSelects all unvisited links1
:not(selector):not(p)Selects every element that is not a <p> element3
:nth-child(n)p:nth-child(2)Selects every <p> element that is the second child of its parent3
:nth-last-child(n)p:nth-last-child(2)Selects every <p> element that is the second child of its parent, counting from the last child3
:nth-last-of-type(n)p:nth-last-of-type(2)Selects every <p> element that is the second <p> element of its parent, counting from the last child3
:nth-of-type(n)p:nth-of-type(2)Selects every <p> element that is the second <p> element of its parent3
:only-of-typep:only-of-typeSelects every <p> element that is the only <p> element of its parent3
:only-childp:only-childSelects every <p> element that is the only child of its parent3
:optionalinput:optionalSelects input elements with no "required" attribute3
:out-of-rangeinput:out-of-rangeSelects input elements with a value outside a specified range3
:read-onlyinput:read-onlySelects input elements with the "readonly" attribute specified3
:read-writeinput:read-writeSelects input elements with the "readonly" attribute NOT specified3
:requiredinput:requiredSelects input elements with the "required" attribute specified3
:root:rootSelects the document's root element3
::selection::selectionSelects the portion of an element that is selected by a user
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)3
:validinput:validSelects all input elements with a valid value3
:visiteda:visitedSelects all visited links1
於 沒有留言:
標籤：

Code Charge 的 Form Templates (表單模板)

Form Templates 表單模板是Code Charge 設計來給  Builder 用的。
Code Charge 自己內訂一組模版，放在安裝目錄下的 /Templates 裡面。
可以根據自己的想法，修改之。
可以改的有：

  1. Authentication (i.e. Login form), 
  2. Editable Grid (i.e. Grid and Search forms), 
  3. Grid and Record (i.e. Grid, Record and Search forms), 
  4. Gallery (Gallery form), 
  5. Grid (i.e. Grid and Search forms), 
  6. Record, and Search. 

  • 大致來說，一個 From Template 也是一個 Code Charge Page，有 .ccp 及 .html。這兩個一組，如果要copy放到另一個目錄，一定要一起copy過去。
  • html 檔案裡面只能有三種東西：
    • template block (<!-- BEGIN Error -->  xxxxx  <!-- END Error -->)
    • template variable ({ControlTitle}之類的)
    • html 
  • 絕對不能在裡面加上 Code Charge 的 Component，會亂掉。

HELP裡面的 Example  很清楚的範例，值得參考照著實作一次就大致知道了。




於 沒有留言:

Code Charge 的 Builder 當掉

一個開發中的專案，當然碰到一大堆問題，慢慢的克服，今天下午，突然要跑 Builder 時掛了！

試過各種的 Builder ，都當！ Grid、Record 、Report、Editable Grid、Grid/Record等，都當！

是我的 Code Charge出問題嗎？

開另一個專案，跑 Builder，可以！那就表示 Code Charge沒有問題，是專案的設定有問題。

試了很多方法，因為之前有經驗，就是一個page remove designs時，會錯亂掉！所以我也懷疑Code Charge 的 .ccp 、.ccs 會不會可能也會錯亂？！如果 .ccs 或 .ccp錯亂了，可能導致AP跑起來當掉的。但是，正確的 .ccs/.ccp是怎樣？我還不是很清楚，也不知如何判斷，打開 .ccs/.ccp也看不出哪裡有問題？！

最後，想要會不會是 DBConnection 設定的問題，所以，又把 Connection 重新設定一次，重心存檔，在一次執行產生專案碼。再重試一次 Builder 就好了！

摸索了半天，Code Charge 還真煩人啊！

我想 Code Charge 還是還有很多小問題，如果不是很懂他的規則，總是會誤觸地雷，然後，就 GG ......了！

建議，經常性的備份，萬一掛掉時，還有回到之前狀態的機會。
於 沒有留言:
標籤：

code charge 的資料庫中文亂碼

今天建立一個新的專案，因為想說只有中文而已，因此，在專案設定上，server/script 上 Charset 設定為 utf8，Locales & Encodings 裡面的 File Encoding: Unicode(UTF-8)、Default HTML Encoding : Unicode(UTF-8)、Site Locales： Chinese (Default)，點進去看內容，Output Encoding  也是 Unicode(UTF-8)。想說這樣該設的都設了，Connection 部分找不到有設定 encoding 的地方，所以就把帳號密碼設設就以為好了。

結果，使用 builder 一建立一個 AP 出來一看，我的媽唉！中文全成了 "???????"！

關於資料庫中文 "??????"的問題，php+mySQL其實早有經驗了，只是好奇，為什麼之前一樣用 Code Charge 都沒有問題的，為什麼此時會有問題？！

因為，我的資料庫是原本就建立好的，而且之前用別的程式做抓資料都沒有問題，我也特別檢查一下我的資料庫，該是"utf"原本就都設了，沒有改變。那麼問題應該還是在 Code Charge 上面了。

弄了半天，只好試試在該程式頁的起始之後，寫了一小段 "SET NAMES 'UTF8'"，用程式強制mySQL用UTF8編碼，結果就正常了！

可是，Code Charge的問題ˋ出在哪裡呢？

請出全文搜索工具，尋找"UTF8"，其他正常的專案可以顯示中文，新的專案顯示不了中文，肯定是有不一樣的地方。果然，找到 Common.php 中有不一樣的地方。新專案的 $CCConnectionSettings = array() 設定沒有 Encoding "UTF8" ，成功顯示中文的有。

那是哪裡的設定出問題呢？

後來試了試，原來是在 Locales & Encodings 裡。只要新增一個English語系，也設成UTF8 ，原本的Chinese也給他設設(本來就有的)，這樣以後， common.php裡面，就自動產生了 Encoding "UTF8" 程式了！

這應該是 Code Charge 的 bug吧！理論上，Locales & Encoding 已經設了 Chinese UTF8 了，他還是把它當成一般的無 UTF8 的編碼，必需有新增一個 UTF8 的 Locales ，Code Charge才建立 UTF8的編碼起來。


於 沒有留言:
標籤：

2014年8月29日 星期五

CCS 動態產生 Data Source 資料來源

動態產生

一、動態產生 ListBox 的"List Of Values"
ListBox 裡面的值是成對的，透過 BeforeShow 可以將成對的值，以array()，送進去。

function Tasks_BeforeShow(& $sender) {
global $Tasks;
 
$Tasks->Status->Values = array(array("1", "High"),array("2", "Normal"), array("3", "Low"));

}





二、






























於





沒有留言:
  


















標籤：

























CCS 使用筆記
















修改物件屬性，要重新產生程式碼

CCS 修改物件的屬性以後，直接存檔，然後產生頁面程式，結果發現，沒改！跑出來的結果根本就是舊的屬性資料，不是新的。

幾經研究發現，原來，正確的程序，如果是修改物件的屬性，應該是讓CCS重新產生程式碼，然後再存檔，產生程式碼。



操作方法是：






    

  1. 切換到 "Code" 格；
    2. 

  2. 確認是在 xxxxx.php 而不是 xxxxx_Event.php，按 Ctrl+A，選擇全部，然後 Delete 掉，再切換到 "Html" 格，再切換回 "Code"格，強迫CCS重新依據新的屬性記錄(記錄在.ccp檔案裡)重新產生程式碼。
    3. 

  3. 存檔。產生頁面程式碼。完成。
    4. 






CCS 把所有頁面裡面的物件，都儲存在 .ccp檔案中，.ccp其實是一個 xml 檔案，用文字編輯器就可以打開來看，你一看就會懂的。那就是這些物件的所有屬性資料的記錄檔案。



CCS 就是根據這個物件的屬性資料檔案來產生相對的程式碼。











於





沒有留言:
  


















標籤：

























CCS 程式中如何取得翻譯文字？










主要關鍵在於

global $CCSLocales;



然後，就可以這樣用：



$CCSLocales->GetText("CCS_Today");





function Label1_BeforeShow(& $sender) {

global $CCSLocales;

  $Component->SetValue($CCSLocales->GetText("CCS_Today"));

}
















於





沒有留言:
  


















標籤：

















          

        

          

        

2014年8月26日 星期二


          

        









CCS 如何引用物件(referencing objects)？












在CCS中如何引用一個物件？



引用物件(Referencing Objects)

由CCS產生的應用程式的物件，可以有很多種引用的方法。

要引用一個物件，你應該要知道這個物件存在網頁程式中的階層位置。舉例來說：你必須弄清楚，這個物件是直接位於頁上的，還是頁裡的表單裡的物件。頁-page是一個物件、表單-Form也是一個物件。





PHP





在PHP裡面，你可以直接使用 $Component 來指引到發出該事件的元件， $Container 則是指引到存放該 $Component 的物件，也就是說 $Component 的上一層級物件。

使用 $Component 及 $Container 這個方法建議使用在可以重複使用的程式碼上，因為它並沒有直接使用名稱指引，所以，可以被重複利用。

另一個方法，就是直接使用廣域變數名稱來指引要該物件，例如：使用 $MyGrid 來指引到 "MyGrid" 這個grid 物件。








各種指引到物件的例子
語  法



頁面裡面的表單物件Form object placed on a page
頁面事件

Page Events		
$Component->form->visible = false;



表單事件

Form Events		
$Component->Visible = false;



表單裡面的控制項物件

Control object placed within a form		
頁面事件

Page Events		
$Component->form->control->SetValue($Component->form->PageNumber);



表單事件

Form Events		
$Component->control->SetValue($Component->PageNumber);



控制項物件事件

Control Events		
$Component->SetValue($Container->PageNumber);



頁面物件裡面的控制項物件

Control object placed on a page		
頁面事件

Page Events		
$Component->control->SetValue("ABC");



控制項事件

Control Events		
$Component->SetValue("ABC");



在"包含頁面"(included page)物件裡面的控制項物件

Control object placed on an included page		
主頁面事件

Main Page Events		
$Component->page->control->Visible = 
false;



包含頁面事件

Includable Page  Events		
$Component->control->Visible = false;



控制項物件事件

Control Events		
$Component->Visible = false;



在"包含頁面"裡面的表單物件

Form object placed on an included page		
主頁面事件

Main Page Events		
$Component->page->form->Visible = 
false;



包含頁事件

Includable Page  Events		
$Component->form->Visible = false;



表單事件

Form Events		
$Component->Visible = false;



存在包含頁裡面的表單裡的控制項物件

Control object placed in a form within an  included page 		
主頁面事件

Main Page Events		
$Component->page->form->control->Visible 
= false;



包含頁事件

Includable Page  Events		
$Component->form->control->Visible = 
false;



表單事件

Form Events		
$Component->control->Visible = false;



控制項事件

Control Events		
$Component->Visible = false;












使用廣域變數名稱的例子
語法



頁面裡的表單物件

Form object placed on a page		
$form->Visible = false;



表單裡的控制項物件

Control object placed within a form		
$form->control->SetValue("123");



頁面裡的控制項物件

Control object placed on a page		
$control->SetValue("ABC");



包含頁裡的控制項物件

Control object placed on an included page		
$page->control->Visible = false;



包含頁裡的表單物件

Form object placed on an included page		
$page->form->Visible = false;



包含頁裡的表單裡的控制項物件

Control object placed in a form within an  included page 		
$page->form->control->Visible = 
false;









Perl






Examples of working with objects
Syntax



Form object placed on a page
$<form>->{Visible} = 0;



Control object placed within a form
$<form>->{<control>}->SetValue("123");



Control object placed on a page
$<control>->SetValue("ABC");



Control object placed on an included page
$<page>->{<control>}->{Visible} = 0;



Form object placed on an included page
$<page>->{<form>}->{Visible} = 0;



Control object placed in a form within an included page 
$<page>->{<form>}->{<control>}->{Visible} 
= 0;



Assigning an object to a variable
$<variable> = $<object>;









Java






Examples of working with objects
Syntax



Form object placed on a page
Page Events
e.getPage().getComponent("<form>").setVisible(false);



Form Events
e.getComponent().setVisible(false);



Control object placed within a form
Page Events
e.getPage().getComponent("<form>").getControl("<control>").setValue("123");



Form Events
e.getComponent().getControl("<control>").setValue("123");



Control Events
e.getControl().setValue("123");



Control object placed on a page
Page Events
e.getPage().getControl("<control>").setValue("ABC");



Control Events
e.getControl().setValue("ABC");



Assigning an object to a variable
<variable> = <object>;



Note: The syntax for accessing objects in an included page from events 
within the same included page is the same as specified above. The syntax for 
accessing objects in an included page from events within the including page is 
not supported. The syntax for accessing objects in the including page from 
events within the included page is also not supported. 





C#






Examples of working with objects
Syntax



Form object placed on a page
Grid and Editable Grid Events
<form>Repeater.Visible = false;



Record Events
<form>Holder.Visible = false;



Directory and Path Events
<form>.Visible = false;



Control object placed within a Record form 
<form><control>.Visible = false;



Control object placed within a Grid, Editable Grid, Directory and 
Path form
Control's Before Show Event
<form><control>.Visible = false;



Form's Before Show and Before Show Row Event
Object reference should be retrieved from the FormControls 
collection.

See the ItemDataBound Event MSDN example.



Control object placed on a page
<control>.Visible = false;



Assigning an object to a variable
<variable> = <object>;



Note: The syntax for accessing objects in an included page from events 
within the same included page is the same as specified above. The syntax for 
accessing objects in an included page from events within the including page is 
not supported. The syntax for accessing objects in the including page from 
events within the included page is also not supported.





VB.Net






Examples of working with objects
Syntax



Form object placed on a page
Grid and Editable Grid Events
<form>Repeater.Visible = False



Record Events
<form>Holder.Visible = False



Directory and Path Events
<form>.Visible = False



Control object placed within a Record form 
<form><control>.Visible = False



Control object placed within a Grid, Editable Grid, Directory and 
Path form
Control's Before Show Event
<form><control>.Visible = False



Form's Before Show and Before Show Row Event
Object reference should be retrieved from the FormControls 
collection.

See the ItemDataBound Event MSDN example.



Control object placed on a page
<control>.Visible = False



Assigning an object to a variable
<variable> = <object>



Note: The syntax for accessing objects in an included page from events 
within the same included page is the same as specified above. The syntax for 
accessing objects in an included page from events within the including page is 
not supported. The syntax for accessing objects in the including page from 
events within the included page is also not supported.





ColdFusion






Examples of working with objects
Syntax



Form variable placed on a page or within a form
<CFSET blnReadAllowed<form>=false>



Control variable placed within a form or a page
<CFSET fld<control> = "abc">



Note: The syntax for accessing objects in an included page from events 
within the same included page is the same as specified above. 








如果引用的物件是在於一個Panel裡面，似乎有問題了。
如果一個物件存在於一個Panel裡面，文件上寫說 Panel 是透通的，也就是說引用物件的階層上， Panel是透明的，可以不管，可是，實際上卻發現不行！
在相同的 Panel 裡面，可以很輕易的引用到其他物件，但在 Panel 外面，或其他的 Panel 就會引用不到物件！

例如：

members record
-obj1
-obj2
-panel1
--obj3
--obj4
-panel2
--obj5
--obj6

在panel1裡面的 obj3 可以使用 members->obj4->getvalue() 引用到物件
可是 obj3 裡面使用 members->obj1->getvalue() 卻引用不到

在 obj1 可以使用 
members->obj2->getvalue(), 
members->obj5->getvalue()
都可以引用到！

換句話說：在panel外面的物件，panel 就是透明的，可以引用到panel裡面的物件
而在panel裡面的物件，panel就不是透明的了，可以引用同層的物件，無法引用到panel外面的物件！

此時，只好變通一下了
在 panel 外面而裡面要用到的，重複一個hidden 的物件到裡面去！
只好這樣了！






















於





沒有留言:
  


















標籤：

























CCS 的版面設計












CCS 的版面設計作法

CCS 的版面規劃與設計，主要的概念是 "Design"，一個 Design 包含一組 master page、master template、CSS、html、js、圖檔等。



這一組 design 都存放在一個 Folder 裡面。 Folder 名稱就是 Design 的名稱。






Master Page：是主要的版面頁面設計，它是一個 .ccp的檔案，裡面一樣有 html /css/js等設計頁面的語法陳述。而其中最重要的依個概念就是 panel 及 placeholder。

Panel ：是一個面板， CCS 有幾種不同的 Panel，主要都是用來定義一個區塊面板用的。

Placeholder ：位置指定器，指定要放在哪裡用的。用來定義該段內容(內容的資料panel)要放到頁面的什麼地方。



Master Template：master page主要是定義整個頁面，而master template則是定義一個區段。這個區段可以被幾個不同的資料頁所共用，就可以用 master template來定義。以便於重複使用。 master template裡面跟 master page 類似的有html、CSS、js 、panel 、placeholder等內容。







使用"主版面控制頁"(Master Pages)

在Code Charge Studio中有這個 "Master pages"的設計，我將之翻譯為"主版面控制頁"，也就是整個網站的網頁版面，要有個一致性的設計，包括CSS、字體、位置、圖案等等設計，都可以設計在這個"主版面控制頁"中。



設計者只要將版面設計及格式等設計在這一頁中，然後將網站其他網頁套用這個版面頁，而不用個別網頁個別很辛苦的分別設計。



當使用者要一個內容頁時，這一頁就會將資料合併套用這個 master page以產生頁面輸出。



CCS內建了 Artisteer 的設計。可以運用。這設計放置在"designs"目錄裡面，可以參考。



Master pages：主版頁、還有

master templates：主模板



這兩個都使用面板 (panels) 來組織內容，對應內容到面板上。



Any panel that is mapped to a 
placeholder is a 'content' panel.

Content Panel ：內容面板

When you apply a design, the content of your 
page is moved to a content panel, which is mapped to a placeholder on the master 
page.

當套用一個Design時，所有網頁的內容都被搬移到 Content Panel，這是主版頁裡面的 placerholder



With Artisteer you can create elaborate designs that work seamlessly with 
your CodeCharge Studio application, however it is not strictly necessary to have 
Artisteer to use these features.



The rest of this section describes how you can 
create your own templates without Artisteer and apply them to your projects. 



This is a description of creating and using templates, not a full explanation of 
creating a design, since 'design' refers to the collection of template pages, 
stylesheets, images, and other files that define your project design. To create 
template pages and stylesheets you will need to know HTML and CSS. 

Normally the way you apply a master page, is the same as applying a design to 
a page.



You select the page, then in either Design, or HTML mode, right click 
the mouse and select the "Apply Design to this page" option. This will apply the 
current default design. If you follow the conventions described in this section, 
you can create a master page that will appear alongside the built-in Artisteer 
designs, which you can select from to set the default page. 





Note, after you apply a design, you can also use the context menu to remove 
the design.

套用 design 以後，可以移除他



This will undo the creation of all the panel structures created on 
your page for the design.



Be careful though, when you remove a design since all 
of your content is moved back to the page and your content panels are removed.

Remember that when you apply a design, CodeCharge Studio creates a content panel 
for every placeholder in your master page, but the content of your page is moved 
to just the panel called 'content'.

Your placeholders normally define the layout 
of your page (e.g. 'block' placement). If you want certain content (e.g. 
'search' form) to appear in a particular location, you need to move the content 
to the right content panel.

For example, suppose your page has a Search form but 
you want the form to appear in the Block1 position (some arbritrary position).

 When you apply a design to your page, CodeCharge Studio will create a panel 
called 'Content' and move the Search form to this panel.

It will also create a 
Block1 panel (if you master page has a placeholder called 'Block1'), but 
initially the panel has no content.

To make the Search form appear in the Block1 
location, you will need to cut&paste the Search form into the Block1 panel. 


You can apply a design manually, without using this menu, by assigning 
properties to your page and panels, but you have to thoroughly understand how to 
create a panel structure that corresponds to your master page, and how to assign 
the properties correctly as described in the following sections. 



How Master Pages Work

A master page is a regular CodeCharge Studio page you have created with a 
predefined layout that can include CSS, static text, HTML controls, HTML 
elements, etc.



The page becomes the layout and formatting for the content of 
your page.

A master page is a key part of any design, but not the only element.

 You can find examples of master pages in the built-in Artisteer designs.

Instead 
of designing the styling applied to each web page of your project, the styling 
can be defined in one template page, then applied to one or more other pages, 
called content pages.

This way, you can concentrate more on the forms and 
controls of your web pages, and also the application logic behind your web site 
without having to consider the layout and formatting. 



A page with an 
assigned 'Master Page' property is a content page.

You use a content page to 
define the web pages of your CodeCharge Studio application.

They contain forms, 
controls and other components that define your application.

There is no 
particular order that your design and content pages have to be developed.

You 
can create a CodeCharge Studio project, then apply a design to your pages, or 
you can apply a design to new pages you create and then add your content (e.g. 
forms) later, or you can do a combination of both.

Normally, you start by 
creating the master page first, then adding placeholders for the content you 
want to map to the page. 



Note, there are no restrictions in the 
CodeCharge Studio IDE on how you can use master pages and content pages.

They 
behave like any other CodeCharge Studio pages you have worked with, but the 
convention, and the logic, is that you use a master page as an HTML template for 
the design of your project, and you use content pages to contain the controls, 
forms and other content that is mapped to your design.



Although the IDE does not 
enforce this, you should not, for example, add forms, controls, or components to 
template pages.

Your master page should contain only HTML and CSS to layout and 
style your content, and placeholders for the content to want to include in the 
page.

Similarly, you should not use a content page as a template. Although the 
IDE does not enforce this, it is not likely to work. 



Placeholder：

The master page 
must have at least one placeholder.

A placeholder is a component you add to a 
page which is then later mapped to and replaced by content at run time. When you 
apply a design to your content page, CodeCharge Studio automatically creates a 
panel on your content page for every placeholder in your master page. Also, it 
always creates a content panel called 'content' and one called 'head'. 




Master templates：主模板

主模板類是主版頁，它應用在網頁的一區塊。而不是整個網頁。

主模板一樣要包含 placeholders

Your design can also include master templates. Master templates are 
similar to master pages except they are intended to be used to format sections 
of a page, rather than the overall page.

Master templates also include 
placeholders.

When your content page is requested, first the content is mapped 
to any master templates, then the container panels for the templates are merged 
with your master page. 

當網頁被呼叫時，是優先將內容套用所有的主模板，然後才合併到主版頁。



Most of how CodeCharge Studio works with designs is based on the Artisteer 
framework. It is not necessary to have Artisteer to use master pages and master 
templates, but there are certain conventions that you should be aware of that 
CodeCharge Studio follows. This will make it easier for you to understand and 
implement your own designs. 


    

  • Every design is in a separate folder under the 'designs' folder in your 
project. Your design can be anywhere, but if you do not follow this convention, 
your design will not appear in the menus and dialogs of the CodeCharge Studio 
IDE. 

    • 

  • Every master page in a design is called 'MasterPage'. Your master page can 
be called anything, but if you do not follow this convention, your design will 
not appear in the menus and dialogs of the IDE. 

    • 

  • Every master page must have at least one placeholder. You add placeholders 
to your templates using the Forms tab and PlaceHolder icon on the ribbon bar. 

    • 

  • Whenever you create or change a template (e.g. MasterPage), always save 
your page before using. 
    每一次建立或改變 模板，例如：母模板，記得一定要儲存網頁。
    • 

  • Every master page is assumed to have two placeholders called 'content', 'and 
'head'. Any time you apply your design to a content page, CodeCharge Studio 
creates a panel structure that includes a panel for each one of these 
placeholders. This occurs even if your master page does not have these 
placeholders. 

    每一個主版頁，一定要有兩個 位置指定器："content", "head"

    These placeholders have special meaning when you apply a 
design to a content page. Even if your master page does not have a placeholder 
called 'content', CodeCharge Studio will create a content panel called 'content' 
and move everything between the <body> tags on your content page into this 
panel. The content panel is mapped to the 'content' placeholder, so if your 
master page does not have this placeholder, your page will not appear correctly. 
Therefore, you should always include a placeholder called 'content' on your 
master page. Similarly, CodeCharge Studio always creates a content panel called 
'head' that is mapped to the 'head' placeholder on your master page. When you 
apply a design to a page, all of the code between the <head> tags on your 
content page is moved to this panel. 
    • 

  • Content placeholders can be called anything so long as they match the right 
panel's 'placeholder' property. When applying a design, CodeCharge Studio 
creates a content panel for every placeholder in the master page, but the 
content is only moved automatically to the 'content' panel (the one called 
'content'). If you decide that you don't need some of the panels created, you 
can remove them from your page. For instance, if you apply one of the 'built-in' 
Artisteer designs, you may not need all of the content panels that are created. 
But, make sure that each content panel left on your content page is mapped to 
one placeholder in the master page otherwise your published web page will not 
appear correctly at run time. 
    • 



    

  • You can dynamically select a design at runtime, but ONLY if 
all of your designs have the same consistent mapping between your content pages 
and the placeholders in the templates and master page. If you do not assign a 
design at run time, the design applied is the 'default' design you selected in 
the IDE (using Designs icon on the ribbon bar). 

    • 

  • You should be aware that the IDE does not distinguish between content pages, 
master pages, master templates, form templates, etc., from other types of pages, 
but there are certain conventions you should follow such as, you should not try 
to include forms and controls in template pages.
    • 




A Simple Example

This is a simple "Hello World!" example to show how the master page and 
content page work: 


    

  • Create a folder called 'designs/mysite' in your project folders. In this 
folder, create a new page called 'masterpage'. 

    • 

  • On the master page, use the PlaceHolder button under the Forms tag on the 
ribbon bar to add a placeholder called 'content', and one called 'head', then 
save your page. It is IMPORTANT to save your master pages 
whenever you make a change otherwise your master page may not be applied 
correctly. Whenever you get an error, make sure you have saved your master page. 
After you are done, the HTML for your master page should look something like 
this: 
    • 





<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>masterpage</title>
{head}
</head>
<body>
{content}
</body>






    

  • In the Project Explorer, add a new page to your web project, then add some 
static text to the page: "Hello world!". Select the page and the Data tab under 
the page properties. Select the 'Master Page' property, then find and select the 
master page you just created above. 

    • 

  • Refresh the Project Explorer and you will notice that a new panel has been 
created in your page called 'content' and the content of your page ("Hello 
world!") has been moved to the new panel. For this example, the master page has 
a placeholder called 'content'. But, if you did not have a placeholder called 
'content', CodeCharge Studio would have created a panel called 'content' anyway. 
Note though, this wouldn't have worked because without a content placeholder 
called 'content', the content would never be mapped to the master page and your 
web page would not be rendered correctly. 

    Select the 'content' panel and 
look at the properties pane. You will notice that the 'placeholder' property has 
been updated to 'content'. This placeholder refers to the 'content' placeholder 
in your master page. This property is what CodeCharge Studio uses to map content 
panels to the placeholders on your master page. You can change the placeholder 
name and 'placeholder' property but they must match so your web page is rendered 
correctly. 

    The HTML for your content page should look something like 
this: 
    • 



<!-- BEGIN Panel content -->
<p>Hello World!</p>
<!-- END Panel content -->
<!-- BEGIN Panel head -->
<meta name="GENERATOR" content="CodeCharge Studio 5.0.0.12000">
<!-- END Panel head -->



When this page is requested, after it is published to the server, 
CodeCharge Studio will replace the placeholders in the master page with the 
content from these panels and render the HTML to create a new page. 



This 
example is very trivial because the master page doesn't include any styling, but 
we could define the layout and formatting around the placeholder called 
'content' in the master page and have it apply to any content mapped to it in 
our web page. For example, we could change the font for the 'content' 
placeholder like this:


<font color="blue" size="12">{content}</font> {title}{head} 



Creating a New Master Page

You create a master page as you would any other CodeCharge Studio page (Home 
| Pages | Blank page). As mentioned before, you need to add PlaceHolders (Forms 
| Components | PlaceHolders) to map your content panels to your template, but 
otherwise, the template should only be used to style the page (i.e. not contain 
forms, or controls, etc.). Also, you should follow these conventions when you 
create the page. 


    

  • Name your page 'masterpage' and place it in a different folder from the rest 
of your pages. Naming your page 'masterpage' is important if you want to include 
your master page in the gallery of built-in designs, or other designs you have 
created with Artisteer. 

    • 

  • On your master page, always include a placeholder called 'content', and 
'head'. Applying the master page moves the existing HTML from your content page 
to these new panels as follows: 

    

      

    • Moves all the HTML between the <head> tags to a panel called 'head'. 

      • 

    • Moves all the HTML between the <body> tags to a panel called 'content' 

      • 

    

    
Again, if your master page does not include these placeholders, they will be 
created automatically when you apply the design, however unless you map the 
'placeholder' property to the correct placeholders on the master page, this will 
not work. 
    


    • 

  • 
Do not modify or delete the placeholder tags directly in your master pages 
(e.g. {content}, {head}). You can modify the HTML around the tags, but do not 
rename the tags, delete the tags or add tags of your own directly. If you create 
your template, say with another editor, it is sometimes useful to write the tags 
directly in HTML. This is useful for identifying where your placeholders should 
be in the template, but later you will need to replace this code by inserting 
the placeholders in the IDE using the ribbon bar (Forms | Components | 
PlaceHolder). This is because PlaceHolder components are represented by tags in 
the HTML but their definition is kept in the CodeCharge Studio page. The IDE 
cannot create the components from just the tags in the HTML. 
    


    • 

  • 
Your design stylesheet should appear at the top of the master page and you 
should remove any other stylesheets (e.g. any CodeCharge Studio 'Style' 
stylesheets). 
    


    • 

  • 
Do not modify the template markers in your content page (e.g. <!-- BEGIN 
Panel content -->). These denote where your content exists for each panel and 
should not be changed. 
    


    • 

  • 
Make sure that your master page is published with your project. This should 
occur automatically, but depending on your project settings, not all resources 
(e.g. images, stylesheets) might be published to the server with your 
project.
    


    • 

  • 
Optionally, add other placeholders for other parts of your web page, such as 
a menu, sidebar, frameset, etc. 
    


    • 

  • 
Optionally, add master templates for applying different layouts and 
formatting to different sections of your master page. See Using Master Templates for 
more details. 
    


    • 

  • Always make sure to save your master page when you make any changes. 

    • 




Applying and Removing a Master Page

There are two ways to apply (or remove) a master page from your content page. 
The simplest way is to change the 'master page' property. Select the content 
page, then the Data tab in the Properties pane. Find the 'master page' property 
and enter (or browse to) the master page you want to apply. 

If you have created your master page following the conventions described 
above, you can also set your master page as the default design using the Designs 
icon on the ribbon bar. Then, you can also apply your master page to a page by 
right-clicking on the page content (Design or HTML mode) and select 'apply 
design to this page' from the context menu. The master page used is based on the 
default design, which you assign with the Designs icon.

You remove a master page from your content page by either deleting and 
setting the property to blank, or right click on the page in Design or HTML mode 
and select 'remove design from this page'. Removing the master page has the 
reverse effect of applying the master page. That is, the panels, such as 'head', 
'content', etc. are removed from the page and the content in each panel is moved 
back to the content page.



One other thing takes place when you apply a 
design to a page. Normally when you create a CodeCharge Studio page, the initial 
HTML generated is based on a template (which you can change in your project 
settings) that contains the basic amount of code to render a web page. It 
contains a <body> section, a <head> section and other declarations. 
When you add content (e.g. a grid form), CodeCharge Studio generates other HTML 
in conjunction with the components it adds to the page. When you apply a design 
to a page, the HTML changes. Now instead of the standard HTML declarations, 
there are template blocks that mark off where the content panels exist on the 
page. 




<!-- BEGIN Panel content -->
<p>Hello World!</p>
<!-- END Panel content -->
<!-- BEGIN Panel head -->
<meta name="GENERATOR" content="CodeCharge Studio 5.0.0.0">
<!-- END Panel head -->



If you have any special code that was part of your HTML template, you may 
need to add or move this code to your master page. 



Master Page Property & CCS_PathToMasterPage

When you apply a design from the ribbon bar, CodeCharge Studio automatically 
updates the 'master page' property on your content page, using the internal 
variable 'CCS_PathToMasterPage' variable. This variable is the path to the 
selected default design folder. When you use this variable, you can use dynamic 
design selection with your published web site, when you have more than one 
master page (design) in your project. If you do not use the 
'CCS_PathToMasterPage' property, you cannot use dynamic selection (e.g. if you 
set the 'master page' property directly on the page instead of applying the 
design from the gallery). 



See Using Artisteer Designs for more 
details about using this variable and dynamic design selection. Note though, 
like the built-in designs, the 'design' name you specify in dynamic selection is 
the name of the folder where your master page resides. If the master page cannot 
be found on the server (i.e. the design was not published with your project), 
CodeCharge Studio will apply the default design instead.





How Content is Mapped to your Templates

This section describes how the content on your content page is mapped to the 
master page in your design. 

A content page contains the components, such as forms and controls that you 
want merged with the master page. It doesn't matter what order you create the 
content. You could start off by simply creating a CodeCharge Studio page, add 
whatever forms you want included in the page, then apply your design. Or, you 
could create a blank page, apply a design, then add your content as you would 
any CodeCharge Studio page. Or, you could do a combination of both. 

As described previously, your master page contains a set of placeholders. 
When you apply a design to a page, CodeCharge Studio creates a panel for each 
placeholder on your master page. It also creates a couple other placeholders 
(see description above) for 'content', and 'head' even if your master page does 
not include these placeholders. The 'placeholder' property for each of these 
panels specifies which placeholder in the master page, the panel is mapped to. 


A panel with a 'placeholder' property is called a content panel because 
everything within the panel (as you can see in the folder tree, or HTML), is 
used to replace a placeholder in the template (i.e. master page). 

When your content page is requested, each of the content panels are mapped to 
the master page and replace the placeholder tags within the HTML code. This is 
done according to the panel's 'placeholder' property. If a panel on the page 
does not have a defined 'placeholder' property, or if a placeholder for that 
property does not exist on the master page, the panel is not merged with the 
master page. Similarly, any content (e.g. grid form) that exists on the page but 
outside a content panel that is mapped to the master page, does not get rendered 
on your page; it is, as if, it does not exist. 



It is important to 
remember that the mapping between the panels on your content page is based on 
the 'placeholder' property, not their name. For example, even if my master page 
has a placeholder called 'content', and my content page has a panel called 
'content', my 'content' panel must have a 'placeholder' property named 
'content', otherwise it will not be merged with the master page correctly. 




When you already have content on a page (e.g. a grid form), but no 
design, when you apply a master page, all the content on your existing page is 
moved to a panel called 'content'. Even if your master page is missing this 
placeholder, when you apply a design to a page, this 'content' panel is created 
automatically. Typically, you won't want all of your content mapped to one 
placeholder. Typically, you want to have several different placeholders which 
are laid out and formatted differently. Once everything is moved to the 
'content' panel, you need to cut and paste the content (e.g. forms) to other 
panels. And, as mentioned before, you need to make sure that your content panels 
are mapped to the master page correctly using the 'placeholder' property. 




If you have content that you may want to reuse on your web pages, you 
may find it useful to move the content to an 'include' page, then add a 
reference to the include page on the panels mapped to your placeholders. For 
example, if you have a Search form which you want to reuse on different pages, 
put the Search form in an 'include' page, then add a reference to the 'include' 
page on the content panel mapped to the section of your master page where you 
want the Search form to appear (e.g. sidebar block). 

Your placeholders in the master page define different sections where content 
is inserted from your content page. Typically the styling on your page (CSS 
stylesheet) applies to the page and the individual sections but not the content 
that may appear in each section. For example, you might define a block of your 
page to contain a sidebar containing content related to, but not the main 
content of the page. The sidebar might contain other content elements such as 
search forms, links, calendars, etc. To maintain a consistent appearance of 
items in the sidebar you might want to define a particular styling to individual 
segments within the sidebar. You can define this thru another template called a 
master template, which describes the appearance of the content that appears 
within a particular section. Master templates are described in the next section. 
To use a master template with a master page, select the content panel on your 
content page (e.g. select a form in HTML mode) and apply the master template 
property, or move the content on your content page to an 'include' page, add a 
reference to the 'include' page in a content panel on your content page, then 
apply the master template to the content panel. 



Using Master Templates 主模板

A Master template can be used to develop a consistent appearance within 
fragments of a page.

主模板主要用來發展一個網頁的區塊的一致性。僅針對區塊。

For each section of your master page, you can develop a 
separate styling for the content.

每一個網頁的一個特定的區塊的一致性。

A master template is a CodeCharge Studio page 
that contains HTML and a set of placeholders representing sections of content 
that are mapped from your content page. 

主模板就是包含著 HTML 跟一組 "位置放置器" placeholders



A content panel is a panel with content, such as forms and controls that you 
want mapped to a master page or master template.

content panel：一個含有內容的 panel，例如：forms/controls

A template panel is a panel 
that is mapped to a master template and contains the content panels that are 
mapped to the master template thru the placeholders. 



template panel：對應到 主模板 的panel，包含有 content panel



The template panel is used just like a container panel. It contains other 
panels that are mapped to placeholders in the master template. The 'master 
template' property identifies which master template to use. Like a master page, 
each of the content panels within a template panel are mapped to the master 
template using the 'placeholder' property. Which template they apply to (master 
page or master template) depends on whether or not the panels are contained in 
the page, or the template panel (i.e. a structure of panels). 

A master template and a master page are very similar. However, a content page 
is mapped to a master page template using the 'master page' property. The 
content panels within a content page are mapped to the master page template 
using the 'placeholder' property. A panel with an a 'master template' property 
is a template panel. Template panels also contain content panels which are 
mapped to the placeholders in the master template with the 'placeholder' 
property. Even though every panel has both a 'placeholder' property and a 
'master template' property, do not assign both properties at the same time. 
Also, all of the content panels within a template panel should map to the same 
master template. That is, if one of your content panels within a template panel 
refers to a placeholder that is not in the master template, it will not be 
rendered on your page at run time. 

A master template can be used to style any portion of a CodeCharge Studio 
page. It does not have to be used in conjunction with a master page. 

Most of the built-in Artisteer designs include one or more master templates 
with each design. When you apply one of the designs to a page, CodeCharge Studio 
creates a content panel on your page for every placeholder on the master page 
(i.e. title, content, head, body, menu, etc.). You should notice that every one 
of these panels is mapped to the master page with the 'placeholder' property. 
But, in addition to the master page, the designs also usually include several 
master templates you can use to style each of the content panels. For example, 
if your page has a menu, the design normally includes a MenuTemplate that can be 
used to style the content panel for your menu. 







If you look at the solution examples, particularly the 'blog' and 
'store' solutions, there are two ways that the menu content is created: as a 
menu component ('blog'), or a list of links ('store'). In both cases, the menu 
is actually part of an include page that is part of a content panel that is 
mapped to a placeholder in the master page. The include page contains a template 
panel that is mapped to a master template in the design. The template panel 
contains another panel that contains the actual menu and is mapped to a 
placeholder in the master template. 

The built-in designs created with Artisteer include template pages intended 
to format sections within the master page of the design. To know which ones you 
want to use depends on the orientation of each section and the styling (design 
stylesheets), and the template HTML code. 



Creating a New Master Template

Like a master page, a master template is a CodeCharge Studio page with 
placeholders for content you want to replace. Typically, you design your master 
template to style parts of your master page (but you can apply it to any page). 
You create a blank master template in the same way as any other CodeCharge 
Studio page, but like master pages, these pages are not intended to contain 
forms, controls, etc. 

Note, when you create a new template, your page may look like the following 
since CodeCharge Studio does not distinguish between template pages and content 
pages, or other types of pages. In this example, a stylesheet ("Basic") has been 
assigned because there is a default style in the project and CodeCharge Studio 
automatically applied the Style when the page was created. If you look at the 
HTML for the templates in one of the built-in Artisteer designs, you will notice 
that you do not need any of this code. To eliminate the code and prevent 
CodeCharge Studio from regenerating it later, select the page you created and 
set the 'includable' option to 'yes', then delete all the HTML in the page. That 
is, make master templates 'includable' pages. 




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="GENERATOR" content="CodeCharge Studio 5.0.0.12000">
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>NewPage1</title>
<link rel="stylesheet" type="text/css" href="Styles/Basic/Style_doctype.css">
</head>
<body>
</body>
</html>



You can name your template anything you want but generally you should put 
your templates in the same folder as the master page. This is important if you 
use dynamic assignment since CodeCharge Studio uses an internal variable called 
'CCS_PathToMasterPage' to locate both the master page and the master template. 


Your master template does not have to include any placeholders, but obviously 
without them you will not be able to merge any content panels into the rendered 
page 



This example has two placeholders called 'Title' and 'Content'. The 
<div> classes are supposed to work in conjunction with the CSS rules in 
the designs stylesheet to format and orient the content in the section. 


<div class="art-Block">
  <div class="art-Block-tl"></div>
  <div class="art-Block-tr"></div>
  <div class="art-Block-bl"></div>
  <div class="art-Block-br"></div>
  <div class="art-Block-tc"></div>
  <div class="art-Block-bc"></div>
  <div class="art-Block-cl"></div>
  <div class="art-Block-cr"></div>
  <div class="art-Block-cc"></div>
  <div class="art-Block-body">
    <div class="art-BlockHeader">
  <div class="l"></div>
  <div class="r"></div>
  <div class="art-header-tag-icon">
   <div class="t">{Title}</div>
  </div>
 </div>
 <div class="art-BlockContent">
  <div class="art-BlockContent-body">
   <div class="art-BlockContent">{Content}</div>
  </div>
    </div>
  </div>
</div>



Applying a Master Template



套用主模板





You apply a master template to portions of an existing page. The page, may or 
may not be mapped to a master page (i.e. have a design applied to the page). 


如何套用主模板 master template 到一個網頁？注意：這個網頁不一定要套用到母版頁master page去！

Again, content panels are mapped to either a master page or a master template 
using the 'placeholder' property.



content panel 透過 位置指定器 placeholder 套用到網頁的位置



The following example is from the 'Blogs' 
example solution.

This uses one of the built-in Artisteer designs.

The Main page 
is mapped to the master page in the design.

The page contains several content 
panels (e.g. 'title', 'head', 'content', etc.) which are all mapped to different 
placeholders in the master page.

Some content panels contain just content (e.g. 
'Block1Container'), while others contain template panels that contain other 
content panels (e.g. 'Content').

Each template panel (e.g. 'Panel_Post') is 
mapped to a specific template in the design (e.g. 'PostTemplate').

The content 
panels in each template panel are mapped to placeholders in the template (e.g. 
'Panel_Post_title' is mapped to the 'title' placeholder in the 'PostTemplate' 
master template). 





You can create this entire structure manually by creating each panel 
separately and assigning the properties, but CodeCharge Studio provides several 
ways to make this easier, though you may often find that you still need to 
manually change the structures.

There are couple ways to apply a master template to the content on your page.

有幾個方法套用：

 First, you can add a template panel to your page, then add some content panels 
to the template, and content (e.g. form) to each content panel.

第一：增加一個 template panel 到網頁，然後增加一些 content panel 到那個模板，增加一些內容到每一個 content panel裡面

Second, you can 
select some content on your page, then apply a master template to the content 
(e.g. forms) you select. 

第二：選擇一些網頁上的內容，然後套用 主模板  到你選擇的這些內容。



To add a template panel to your page:



Select the Forms tab on the ribbon bar. Select the page where you want to 
create a template panel, and click on theTemplate Panel button on the ribbon 
bar. In Design mode or HTML mode, you can also place the cursor anywhere on the 
page. 



  



The options you see for master templates are based on the default master 
page (design) selected, not necessarily the design applied to your page (if 
there is one). See Using Artisteer Designs for more information about setting the 
default design. If your project has no default design, the drop down list will 
be blank. You will need to browse and select the template page. When you want to 
apply a master template that you have created, typically you will need to browse 
and select the template. Otherwise, if you are working with a master page you 
created, make your master page the default design and the list of master 
templates you have created will appear in this drop down list. Do not use a 
master page as the template. 



When you select a master template, CodeCharge Studio will add a template 
panel to your page and update the 'master template' property for the panel 
automatically, then create content panels within the template panel 
corresponding to the placeholders in the master template, and update the 
'placeholder' property for each panel. For example, if your master template has 
two placeholders called 'title' and 'content', CodeCharge Studio will create an 
inner content panel for each one. You are responsible for defining or moving any 
content within each of the content panels.

To select some content first (e.g. form), and then move it to a template 
panel:



Select some content that you want to apply the template to and select the 
Template Panel button from the ribbon bar. In Design or HTML mode, select the 
content you want to add. 



In Design mode, the current selection has a 
series of move and reshape icons ("boxes") around the outline of the 
selection.



  

You can also select your content in HTML mode. HTML mode should be used 
instead of Design Mode since it is often difficult to select the content 
properly, and when this occurs, the generated HTML code for the page may not be 
correct. 



 

When you have selected content that you want to add, select the Template 
Panel button on the ribbon bar and you should see the following form:



 

The options you see for master templates are based on the default master page 
(design) selected, not necessarily the design applied to your page (if there is 
one). If your project does not have a default selection, the drop down list of 
templates will be blank. You will need to browse and select the template page. 
Once the template page is selected, for 'Select PlaceHolder' you should see a 
list of placeholders for the selected template. Select the placeholder within 
the template where you want the content you selected to be moved.

Note, the 'Select PlaceHolder' drop down list only appears when you have 
selected some content in your page. If you haven't selected the content 
correctly, this field will not appear in the dialog.



You can also change 
or specify the master template and the mapped placeholders in the panel 
properties. Select the panel you want to use as the template panel, and then 
define the master template that applies to this panel. For each panel in the 
template panel that is mapped to the master template placeholder, select the 
panel, then define the placeholder name that the panel is mapped to in the 
master template. 

When you set the 'master template' property directly, normally it will be a 
relative path to where the master template is located in your application 
folders on the server. If you use the dialogs described above to create the 
template panel, the property will use the 'CCS_PathToMasterPage' internal 
variable. When you use this variable, you can use dynamic design selection at 
run time (as described below). 

Unlike a master page, you can not undo applying a master template to a panel. 
That is, with a master page, if you remove the design, CodeCharge Studio moves 
the content in the various panels back to the page and then removes the content 
panels that were mapped to the master page. This happens automatically when you 
remove the design. A master template does not work this way. You have to move 
the content yourself, and remove any template panels you have created if you 
want to undo the application of the template. 



Master Template Property & CCS_PathToMasterPage

When you apply a master template using the Template Panel icon on the ribbon 
bar, CodeCharge Studio automatically creates a template panel, then content 
panels for each placeholder in the master template. It also automatically 
updates the 'master template' property for the template panel, and the 
'placeholder' property for each of the content panels. You could do this 
manually, but when CodeCharge Studio defines the master template property, it 
automatically adds the 'CCS_PathToMasterPage' property.



The 'CCS_PathToMasterPage' variable is the run time folder location for 
your master page. If you put your templates in the same location, you can 
dynamically change templates at run time. For example, most of the 'built-in' 
Artisteer designs include master templates you can use to style different parts 
of the page. The designs share the same names for the master templates and the 
templates are located in the same location within the design folder. This allows 
some applications to dynamically assign a design at run time. 



Example: Converting an Application Created with an Earlier Version of 
CodeCharge Studio



This example is based on an application originally created with the 
'Forums' solution template in version 4.3. If you want to follow along, you 
should create a new project based on this solution. Make sure the project target 
is 'C# - InMotion Framework'. 

In this example, we will convert the application to 5.0, then apply one of 
the built-in Artisteer designs to the project. This example demonstrates how to 
apply a design and use the master templates to style different sections of the 
web page. 




    

  1. Open the application and convert it to 5.0. 

    2. 

  2. Open the Header page and edit the HTML to change the header to just a list 
of links, so we delete the graphics (since this will be part of the design), and 
eliminate all the formatting. The result should look something like this: 

    


    

    

    3. 

  3. Delete the Footer page since this is part of the design we will add. Also, 
delete the 'include' reference to the footer on the 'default' page. 

    4. 

  4. Create an 'include' page called 'Search' and then cut and paste the search 
form on the 'default' page to this new 'include' page. 'Cut&paste' the form 
as a 'record', not as text. Change the field caption from 'Topic or Message' to 
'Message', and change the style of the form 'Sand Beach' to 'No Style'. The new 
search form should look something like this: 

    

    

    5. 

  5. Add the 'farm song' design to the project and make sure it is the default 
design. Refresh the Project Explorer so the design appears in the folder 
tree.
    

    
 
    

    6. 

  6. Select the 'default' page and change the Style for the Page from 'Sand 
Beach' to 'No Style', and then apply the 'farm song' design to the page using 
the 'Apply design to this page' option in the context menu as described before. 
You will notice that this is not entirely what we want. The formatting is not 
correct. The header does not appear as a menu, and there is no search form. 

    

    

    7. 

  7. Cut and paste the 'include' page 'header' from the 'Content' panel to the 
'Menu' panel. 
The design we are using includes a placeholder on the master page called 
'Menu', and a master template called 'MenuTemplate'. The 'header' contains a 
list of hyperlinks we want to create a menu from. To do this, we want to apply 
the 'MenuTemplate' to the 'header'.

    Select the Forms tab on the ribbon 
bar, then navigate to the include page 'Header', and mark&select the 
hyperlinks in the page. Select the Template Panel icon on the ribbon bar, select 
the MenuTemplate, and then MenuItems for the placeholder. This will create a 
template panel with two subpanels; one for the menu title and one for the menu 
items. This will also move the hyperlinks to the menu items panel. 
    


    
 
    

    8. 

  8. 
We are not quite done with this. You may notice in the preview window that 
the links appear vertically instead of horizontally across the page. If you look 
at the menu template, the menu is described as an unordered list, but we haven't 
defined the links as line items so it is unlikely the menu will be formatted 
correctly. We need to change the links to line items and preview the window 
again. 
    


    
 
    

    9. 

  9. In the master page, there is a placeholder called 'sidebar1'. We want to put 
the Search form in this sidebar and then use the Block Template in the design to 
format this block.

    Select the 'Sidebar1' panel in the default page and 
add a reference to the include page, 'Search'.

    Find and navigate to the 
include page, 'Search'. Like you did with the hyperlinks above, mark&select 
the search form, then select Template Panel from the ribbon bar. For the master 
template, select the Block Template, and for the placeholder, select 'Content'. 
This will create a template panel and two subpanels; one for the title, and one 
for the content (i.e. the 'search' form). 

    So far, the default page 
should look something like this: 

    
  
    

    10. 

  10. The "Headline" and "Slogan text" can be changed in the master 
page.

    To change the title, 'Forum Messages' so it appears above the table 
instead of inside the table, change this code: 

    

    
with this code:
    

     <table class="Header" border="0" cellspacing="0" cellpadding="0">
   <tr>
     <td class="HeaderLeft"><img alt="" src="{CCS_PathToMasterPage}Images/Spacer.gif"></td> 
     <td class="th"><strong>Forum Messages</strong></td> 
     <td class="HeaderRight"><img alt="" src="{CCS_PathToMasterPage}Images/Spacer.gif"></td>
   </tr>
 </table>
    
The template panel we used to format the Search form has a 'title' and 
'content'. We moved the search form to the 'content' panel, so now add a title 
to the 'title' panel:
    

    <!-- BEGIN Panel Title -->Search<!-- END Panel Title -->
    
Our Search form already has a form title ('Search'), so since this is 
redundant, delete this code on the search form:
    

     <table border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td><img border="0" alt="" src="{page:pathToRoot}Styles/None/Images/Spacer.gif"></td> 
      <td><strong>Search</strong> </td> 
      <td><img border="0" alt="" src="{page:pathToRoot}Styles/None/Images/Spacer.gif"></td>
   </tr>
 </table>
 
    
Also, change the alignment of the button so it appears in line with the rest 
of the fields:
    

    <td align="left">
    
The final page should look something like this:
    


    

    

    11. 













於





沒有留言:
  


















標籤：

















        

      









訂閱：
文章 (Atom)









如何判斷現在FORM是在 insert mode? 還是 update mode?



只要用  if (empty({primary_key})) 就可以知道是否為新增模式了。 如果 {promary_key} 是空白的，那麼就是在新增模式；反之，就是更新模式。 以上。












    

  • 

    

    PHP 接收 post 的 json 資料
    

    讓 PHP 接收 post 的 json 資料  - 8月 02, 2013  我們在串接API的時候會用到 CURL 函式 POST 資料給 JSON 接收，雖然我們是使用 POST 傳出資料。但是我們在接收的 SERVER 端使用 $_POST 卻抓不到任何資料。   原來 ...
    

    

    

    • 

  • 

    

    Bootstrap 3 跳出式視窗 modal 如何做？
    

    參考：   https://getbootstrap.com/docs/3.3/javascript/#modals   <!-- Button trigger modal -->  <button  type= "button"  clas...
    

    

    

    • 

  • 

    

    PHP Notice: undefined index 完美解决方法
    

      分享：網站上 http://shuai.be/archives/php-undefined-index/     平時用 $_GET[ ‘ xx ’ ] 取得參數值時，如果之前不加判斷在未傳進參數時會出現這樣的警告 :      PHP Notice: undefined i...
    

    

    

    •