ScrewTurn Wiki 3.0.2

Friday, 19 February 2010 10:14 by admin

ScrewTurn Wiki 在農曆年前的幾天,發佈了 3.0.2 版本

這版本對於台灣用戶來說,是一個很重要的版本,因為已經內建的正體中文翻譯

另外原本要外掛的 Sitemap ,也改為內建功能,不需要再外掛了

詳細更新與下載,請見官方網站: http://www.screwturn.eu/Changelog.ashx

Color ListBox for .Net 2.0

Monday, 8 February 2010 02:50 by admin

因為工作關係,常需要寫測試軟體,偶爾會看到訪間的 Log 畫面是彩色的,也想動手將測試結果輸出彩色的

一般我都會用 ListBox 作為顯示畫面,因為 ListBox 以行為單位,很適合我的使用,但也很不幸的 .Net 並沒有辦法將 ListBox 每行用不同的顏色,不過其實還是可以讓他用 "畫" 的完成這項作業

首先先把 DrawMode 設定為 OwnerDrawVariable ,再加入 listBox1.DrawItem += new System.Windows.Forms.DrawItemEventHandler(this.listBox1_DrawItem) ,這時您就可以自己創作 ListBox 的顯示方式了

此時便可以用 e.Graphics.DrawString 畫出所要的有顏色字串

e.Graphics.DrawString((sender as ListBox).Items[e.Index].ToString(), e.Font, myBrush, e.Bounds.X, e.Bounds.Y);

Item 內有 pass fail 時要改變不同顏色,判斷後修改 myBrush 的顏色即可

if (e.Index >= 0 && (sender as ListBox).Items[e.Index].ToString().IndexOf("fail", StringComparison.CurrentCultureIgnoreCase) >= 0)
					myBrush = Brushes.Red;
				else if (e.Index >= 0 && (sender as ListBox).Items[e.Index].ToString().IndexOf("pass", StringComparison.CurrentCultureIgnoreCase) >= 0)
					myBrush = Brushes.DarkGreen;
				else
					myBrush = Brushes.Black;

選取時反白當然也要考慮進去,改用 SolidBrush

myBrush = new SolidBrush(e.ForeColor);

完整的程式碼如下

public Form1()
		{
			InitializeComponent();
			this.listBox1.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawVariable;
			this.listBox1.DrawItem += new System.Windows.Forms.DrawItemEventHandler(this.listBox1_DrawItem);
		}

		private void button1_Click(object sender, EventArgs e)
		{
			listBox1.Items.Clear();
			listBox1.Items.Add("This is test!!");
			listBox1.Items.Add("Test pass!!");
			listBox1.Items.Add("Test fail!!");
		}

		private void listBox1_DrawItem(object sender, DrawItemEventArgs e)
		{
			e.DrawBackground();

			System.Drawing.Brush myBrush;
			if ((e.State & DrawItemState.Selected) != DrawItemState.Selected )
			{
				// unselected
				if (e.Index >= 0 && (sender as ListBox).Items[e.Index].ToString().IndexOf("fail", StringComparison.CurrentCultureIgnoreCase) >= 0)
					myBrush = Brushes.Red;
				else if (e.Index >= 0 && (sender as ListBox).Items[e.Index].ToString().IndexOf("pass", StringComparison.CurrentCultureIgnoreCase) >= 0)
					myBrush = Brushes.DarkGreen;
				else
					myBrush = Brushes.Black; 
			}
			else
			{
				myBrush = new SolidBrush(e.ForeColor);
			}

			if (e.Index >= 0)
				e.Graphics.DrawString((sender as ListBox).Items[e.Index].ToString(), e.Font, myBrush, e.Bounds.X, e.Bounds.Y);

			e.DrawFocusRectangle();
		}

成果:

後註:缺點是改用繪圖後,顯示的效能會下降很多,建議如需快速大量顯示資料,可以考慮完成後再切回繪圖模式,或是僅顯示少量

Subkismet captcha for CommunityServer or ASP.Net

Saturday, 6 February 2010 03:41 by admin

現在一位網站管理員,除了要管理真人的內容外,對付廣告機器人也是一件頭痛的問題,各大網站相繼淪陷於廣告機器人之後,就有網站陸續加入認證圖案,這時就造就了 CAPTCHA ( 詳細解釋請見 Wiki )

不論你網站規模大小,有沒有流量等等,總是會有一些廣告機器人滲透,CommunityServer 只要開了匿名留言,自然也會成為攻擊對象,於 .Net 2.0 中,要寫一個 CAPTCHA 並不困難,相對的網路上的免費資源也不少,這次就介紹 Subkismet ,Captcha 只是 Subkismet 專案的一部分,做出來的 Captcha 會是由點狀顯示文字 (如下圖),對於一般(亞洲)人辨識並不至於太困難,例如 reCaptcha 這個對於亞洲人來說就太過困難

 

Subkismet 主要分為兩部分,HttpHandler 與 CaptchaControl , HttpHandler 是負責產生圖形, CaptchaControl 負責編碼與驗證,在使用前請先完成設定作業

1. Web.config 加入 <add verb="*" path="*CaptchaImage.ashx" type="Subkismet.Captcha.CaptchaImageHandler, Subkismet"/>

2. 在使用的頁面開頭註冊元件 <%@ Register Assembly="Subkismet" Namespace="Subkismet.Captcha" TagPrefix="sbk" %>

完成要使用 CaptchaControl 其實很簡單,因為他是繼承 System.Web.UI.WebControls.BaseValidator ,設定好後直接放入以下程式碼到輸出表單中

<sbk:CaptchaControl id="captcha" runat="server" ErrorMessage="Oops! You must be bad at reading." Display="dynamic" CaptchaLength="4" ValidationGroup="Visible" />

 

CommunityServer Blog 使用方法範例 ( 以 default2 為例 ):

1. 開啟 \Themes\Blogs\default2\post.aspx

2. 於頁面最上方註冊 Subkismet.Captcha 元件 <%@ Register Assembly="Subkismet" Namespace="Subkismet.Captcha" TagPrefix="sbk" %>

3. 在留言的下方加入 Subkimet Captcha

<dt><CSControl:FormLabel LabelForId="tbComment" runat="server" ResourceName="Weblog_CommentForm_Comments" /> <em>(<CSControl:ResourceControl runat="server" ResourceName="Required" />)</em><asp:RequiredFieldValidator runat="server" ErrorMessage="*" ControlToValidate="tbComment" ValidationGroup="CreateCommentForm" /></dt>
                        <dd><asp:TextBox id="tbComment" runat="server" Rows="5" Columns="25" TextMode="MultiLine" ValidationGroup="CreateCommentForm" /></dd>
                        
                        <dt>Captcha</dt>
                        <dd><sbk:CaptchaControl id="captcha" runat="server" ErrorMessage="輸入錯誤."  LayoutStyle="CssBased" Display="dynamic" CaptchaLength="4" ValidationGroup="CreateCommentForm" /></dd>

                        <dt id="RememberWrapper" runat="server"><asp:CheckBox id="chkRemember" runat="server" Text="Remember Me?" ValidationGroup="CreateCommentForm" /></dt>

成果:

 

後註:

1. ASP.Net 皆可適用此元件,和 CMS 是不是 CommunityServer 並沒有關聯

2. 這種點文字 Captcha 已經有國外 de-Captcha 100% 讀取破解,可能還是會有機器人可以順利解讀,如果覺得功能不夠強大可以自行修改原始碼改善

3. 原本的 Subkismet 顯示後只會有一個文字方框讓使用者輸入訊息,一般訪客可能很難理解那方框用途,我加了 HelpInputMessage 版本供大家使用,需要者可下載

4. Hawaii blog Theme 修改範例,下載此範例

當 CommunityServer 遇上 LightBox (下)

Wednesday, 3 February 2010 08:55 by admin

在上一篇,講解了如何在 tinymce 上使用 lightbox ,但只有 blog 才能使用 tinymce 顯示 lightbox ,在多媒體 ( media ) 便派不上用場

如果要在多媒體使用 lightbox ,只有從 Theme ( aspx 檔案 ) 下手,CommunityServer 上,主要是靠 CSMedia:MediaGalleryPostData 物件顯示與建立聯結,但很不幸的,建立聯結這個屬性 LinkTo="View" 此類,並無法擴充讓他支援 lightbox ,如果要支援,唯有修改 SDK 或是自己建立一個新的 Control ,這裡便從講解 SDK 開始

當有 SDK 環境後,開啟CS2008.5_SP2_4.1.40407.4157.sdk\Source\CommunityServer.MediaGalleries\Controls\MediaGalleryPost\MediaGalleryPostData.cs 檔案,在 104 行左右便可見到此程式碼

case MediaGalleryPostLinkTo.View:
                            link = new HyperLink();

                            if (mediaGallery.Hub == null)
                                link.NavigateUrl = MediaGalleryUrls.Instance().ViewMediaGalleryPost(mediaGallery.ApplicationKey, post.PostID);
                            else
                                link.NavigateUrl = MediaGalleryUrls.Instance().HubMediaGalleryPost(mediaGallery.Hub.ApplicationKey, post.PostID);

                            break;

我並不建議直接修改原本的 LinkTo ,建議加一個 lightbox ,在 HyperLink 要加入 Rel 與 Title 屬性很簡單

link.Attributes.Add("rel", "lightbox");

再加入考慮是否為圖片再使用 lightbox ,整個 LinkTo 程式就如下列

case MediaGalleryPostLinkTo.LightBox:
							link = new HyperLink();

							if (post.Attachment.IsImage)
							{
								link.Attributes.Add("rel", "lightbox");
								link.Attributes.Add("title", post.Subject);
								link.NavigateUrl = post.Attachment.Url;
							}
							else
							{
								if (mediaGallery.Hub == null)
									link.NavigateUrl = MediaGalleryUrls.Instance().ViewMediaGalleryPost(mediaGallery.ApplicationKey, post.PostID);
								else
									link.NavigateUrl = MediaGalleryUrls.Instance().HubMediaGalleryPost(mediaGallery.Hub.ApplicationKey, post.PostID);
							}

							break;

當完成後,重新編譯即可使用 LinkTo="lightbox" 來顯示多媒體 lightbox ,以下就是顯示的範例

<CSMedia:MediaGalleryPostList runat="server" ID="MediaInformation" ShowHeaderFooterOnNone="true">
                                        <QueryOverrides PageSize="5" SortBy="PostDate" SortOrder="Descending" IncludeCategories="false"
                                            PageIndex="0" IsAggregate="false" IsCommunityAggregatedOnly="false" />
                                        <HeaderTemplate>
                                            <ul class="CommonContentBoxList">
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <CSMedia:MediaGalleryPostData ID="MediaGalleryPostData1" runat="server" Property="Subject"
                                                TruncateAt="50" LinkTo="LightBox" Tag="LI">
												<contenttemplate>
													<CSMedia:MediaGalleryPostViewer ID="MediaGalleryPostViewer1" runat="server" Width="1" Height="1" ViewType="Preview" />
												</contenttemplate>
                                            </CSMedia:MediaGalleryPostData>
                                        </ItemTemplate>
                                        <NoneTemplate>
                                            <li>
                                                <CSControl:ResourceControl runat="server" ResourceName="Home_NoFilesUploaded" />
                                            </li>
                                        </NoneTemplate>
                                        <FooterTemplate>
                                            </ul></FooterTemplate>
                                    </CSMedia:MediaGalleryPostList>

效果就會如本站首頁的顯示方式,按下圖片後啟用 lightbox 顯示圖片

當 CommunityServer 遇上 LightBox (中)

Tuesday, 2 February 2010 09:39 by admin

在一般 Tinymce 上,預設並不允許使用 rel 屬性,使用前請先在 extended_valid_elements 加入 a[name|href|target|title|onclick|rel] ,在 CommunityServer 環境下,上面步驟不需要,Telligent 已經將預設值寫好了

但在一般環境下,您插入聯結後就會發現 tinymce 並沒有地方讓您輸入 rel="lightbox" ,這時候有兩種解決方法

 

方法1: 直接編輯 HTML

按下 tinymce 的 HTML 按鈕,自己 DIY 加進去,這方法如果文章很長,就會很辛苦去找那些圖片連結跑哪去了

方法2: 安裝 advlink plugins

advlink plugins 預設並沒有安裝在 CommunityServer 上,首先先到 TinyMCE 官網下載最新版,解開後到 plugins 目錄即可取得 advlink

再來就是把 plugins 啟動,在 CommunityServer 上即用 notepad 開啟 CommunityServer.config ,在 editorOption name="plugins" 加入 advlink ,其他環境下可以看官網的安裝步驟

完成後插入或編輯聯結,就會變成 advlink ,這時就有 rel = lightbox 可以選擇,經常使用 lightbox 用戶建議安裝此 plugins