カスタマイズ

本文にジャンプします

i-SITEではASP.NETのコンポーネント化技術を利用して、標準提供されるメニューやブログなどの機能モジュールのビジュアル部分であるHTMLを変更し、新たなモジュールとして利用できます。

i-SITEのモジュールは、コードビハインドという手法でHTML部分と、バックグラウンドで動作するロジック部分を分離しています、ロジック部分はサーバー上で動作していますので、見ることはできません。HTML部分はHTMLとASP.NET用の特殊なタグで構成されており、最近のDreamWeaverなど市販の主要なHTML編集ソフトではそのまま編集が可能です。標準モジュールは機能ごとに小さな単位で分離されていますので、サーバー上で動作しているロジック部分を意識することなく、ビジュアル部分(HTMLやASP.NETのタグ)を変更することができます。またモジュール単位のCSSもサポートしていますので、CSSの変更だけでビジュアルを変更することも可能です。

以下に例を示します。

まずSearch_D1.ascxというファイルです。このうち黄色背景部分(<%と%>で囲まれた部分含む)はおまじないと考えてそのまま利用してください。見慣れたHTMLタグ以外の<XXX:YYYから始まるタグはASP.NETのタグです。標準のASP.NETのタグは<asp:で始まり、それ以外はi-SITEのタグです。i-SITEのタグもおまじないと考えてそのまま利用してください。ASP.NETのタグはそれぞれ属性が設定できますが、詳細はASP.NETの解説書籍等参照してください。注意する点はID属性で指定された名前です。バックグラウンドで動作しているロジック部分はこのIDを頼りに動作していますので、タグは位置や属性は変更してもIDの名前は変更しないようにしてください。

<%@ Register TagPrefix="Portal" TagName="Title" Src="~/Parts/P_ModuleTitle.ascx" %>
<%@ Control Language="c#" AutoEventWireup="false" CodeBehind="Search.ascx.cs" Inherits="CSPortal.Browser.Search" %>
<!--BrowserSearchD1 start-->
<Portal:Title ID="ModuleTitle" runat="server" prop_align="center" javascript="true">
</Portal:Title>
<div class="BrowserSearchD1" style="<%= ModuleTitle.prop_CSSAlign%>">
  <table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td class="TdHead" colspan="2">
      </td>
    </tr>
    <tr>
      <td class="TdContent">
        <asp:Label AssociatedControlID="keywords" Style="display: none" runat="server">検索</asp:Label>
        <asp:TextBox ID="keywords" Columns="16" CssClass="TextBox" runat="server"></asp:TextBox>
      </td>
      <td class="TdContent">
        <asp:Button ID="SubmitBtn" Text="検索" runat="server" CausesValidation="false"></asp:Button>
      </td>
    </tr>
  </table>
</div>
<!--BrowserSearchD1 end-->

 


上記のascxファイルのCSSは以下のように定義されています。

.BrowserSearchD1{
        color: black;
        width: 160px;
        padding: 0px;
        padding-top: 5px;
        padding-bottom: 5px;
        margin: 0px;
}

.BrowserSearchD1
.TdHead{
        background: url(header.gif) no-repeat;
        width: 160px;
        height: 33px;
}
 
.BrowserSearchD1 .TdContent{
        background: url(content.gif);
        padding: 0px;
        padding-top: 3px;
        padding-bottom: 3px;
      font-size: small;
}
 
.BrowserSearchD1 .TextTBox{
      font-size: small;
        width: 88px;
}

表示サンプルは以下のようになります。