[أفكار] عمل أدوات خاصة - عرض الملفات

ممتاز جدا

الى الامام سر ونحن معك على الخط

فكرة جميلة

بصراحة موضوع (FileBrowser) شيء جميل وممتع ويحتاج لدقة

السلام عليكم أخي محمد خليل

بارك الله فيك على هذا الموضوع المفيد ان شاء الله

و نرجوا المتابعة

أنا بالانتظار

و جزاك الله خيرا

شكرا للمتابعين .. طيب! سنقوم بعمل Solution

يحوى على جزئين و هما

Web Application و به فقط صفحة Default.aspx

و C# Class Library سنستخدمها في عمل DLL لمستعرض الصفحات

طبعا ما نقوم به سيكون كالتالي:

ال Class Library ستكون هي بمثابة ال Custom User Control و هي شبيهة نوعا ما بال User Control العادية التي يتم استخدامها في صفحات ال ASPX و عادة تكون بامتداد ascx

الفرق انه سوف نقوم بعملها ك Class Library ثم نقوم بعمل Build لينتج لنا DLL خاص بها نضيفح لاحقا كمرجع Add Reference لتطبيق الويب ..

شجرة المشروع ستكون كالتالي:

دعونا نبدأ من ال Class Library:

ستكون محتوية على كلاس وحيد نسمي ملفه ب FSO.cs رمزا إلى File System Object و هو كائن مشهور في مكونات ال VbScript-Server Side و كان له دور كبير في تطبيقات ال ASP الكلاسيكية "الله يرحم ايامها"

دعونا نفترض بداية ان محتويات الكلاس FSO.CS ستكون بدائية كالتالي:

using System;
using System.Web;

namespace fsoWP
{

public class FSO 
	{
	protected override void Render(System.Web.UI.HtmlTextWriter writer)
		{
			base.Render(writer);
		}
	}
}

هكذا سيكون حال الكلاس في البداية .. يختلف نوعا ما عن كتابة صفحة aspx عادية .. حيث انه بالعادة تحوي على PageLoad Event

لكن!!! لا تخافوا من هذا الاختلاف فهو بسيط جدا و سيكون لك بمثابة نقلة نوعية في البرمجة :)

جميل كلامك يا محمد ولكن كيف سأستدعي هذه المكتبة او ال User Control في موقعي؟؟

انا لم اكذب عليك ابدا :) كل ما عليك هو عمل Build للمكتبة ثم الذهاب لل Solution Explorer و ستجد تحت تطبيق الويب المسمى ب FileBrowserWP مجلد باسم References

قم بالضغط على الزر اليمين ثم اختر Add Reference

ستجد نافذة اختر من خلال ال Tab المجموعة Project و ستجد بداخلها ال wpFSO .. اختره واضغط OK

جميل جدا ولكن لماذا؟؟

لانه يمكن الان الذهاب لصفحة Default.aspx والتعامل مع الكنترول و كأنه User Control عادي جدا كالتالي:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FileBrowserWP._Default" %>
<%@ Register Assembly="fsoWP" Namespace="fsoWP" TagPrefix="ExplorerWP" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
	<title>Untitled Page</title>
</head>
<link href="Style.css" rel="stylesheet" type="text/css" />

<body>
	<form id="form1" runat="server">
	<div>

	</div>


			<ExplorerWP:FSO id="myWP" runat="server" />
			<br />


	</form>

</body>
</html>

طبعا نرى انها صفحة عادية و كل ما هو جديد فيها هو:

<%@ Register Assembly="fsoWP" Namespace="fsoWP" TagPrefix="ExplorerWP" %>

طبعا ال Assembly يكون اسم المكتبة كما هو في ال SolutionExplorer

و ال NameSpace يكون اسم ال NameSpace بداخل الكلاس FSO.CS و هنا جاء صدفة يحمل نفس اسم المكتبة :)

ال TagPrefix انت حر في كتابته و لكن يجب الالتزام به عند تحديد مكان ظهور الكنترول كما قمنا هنا باستخدامه في داخل الصفحة كما هو موضح

<ExplorerWP:FSO id="myWP" runat="server" />

أود ان انوه لنقطة مهمة جدا جدا يغفلها الكثيرون .. طبعا نعلم لماذا كتبنا في بداية ال Tag كلمة ExplorerWP ؟ّّ!! طبعا لاننا حددنا هذا الاسم ك TagPrefix في اعلى الصفحة ولكن .. لماذا كتبت اسم FSO بالتحديد بعدها؟؟

لانه اسم الكلاس طبعا .. ربما تكون بعض التطبيقات تحوي عدد من الكلاسات وبالتالي يجب ان تحدد اي كلاس تود استخدامه

حتى الان اتمنى ان يجرب الكل الفكرة خاصة من لا تجربه له مع هذه الادوات .. واعطائي رأيكم او طرح اي استفسار

طبعا سأعود لاكمل كتابة ملف ال FSO.CS والذي سيحوي العديد من العمليات الجميلة لاكمال هذه الفكرة التي على الاقل تعجبني انا!!

بعد النهاية سأقوم بجولة حول ما كتبت لطرح بعض النقاط و تسليط الضوء على بعض الافكار و فوائدها

تحياتي لكم

أريد ان اضيف شيئا خاصة أنني اشعر بأن هناك من هو خائف او يظن بأن هذا الموضوع لل SharePointّّ!!!

انا قلت انه Custom User Control بال ASP.NET ويمكن لاحقا تحويله ل Custom Web Part for Sharepoint

يعني الكل بيقدر يستفيد على أنه جزء من ASP.NET وينسى موضوع ال sharepoint

شكرا اخي والى الامام

لكن قبل ما تبداء ممكن اعرف ايش sharepoint 2007 ياتي مع الاوفس

شكرا

نعم أخي هو تابع لحزمة الاوفيس

عموما انا كتبت مقال و به العديد من المواضيع و الكتب والوصلات عن ال Sharepoint2007

/index.php?showtopic=126025

بالتوفيق

بصراحة بلش الموضوع يحمى

موضوع Custom Server Control من المواضيع الرائعة وأنا من المعجبين بها جدا

ليس الفن في User Control بقدر ما هو هنا

معك ان شاء الله للنهاية

دعونا بداية نتوجه للمكتبة Class Library التي هي باسم fsoWP .. و نذهب للكلاس FSO و نقوم بانشاء أبسط اداة في التاريخ تقوم فقط بعرض التاريخ .. لماذا؟؟

لانه لو بدأت بكتابة اكواد كثيرة لن تفهم ما هو اصل الكلاس و كيف تمت اضافة الاجزاء الاخرى "سلطة يعني"

اما في هذا المثال سترى كيف يكون ابسط اداة و قد اضفت لها فقط سطر يستخدم Response.Write لعرض التاريخ.

ها هو المثال:

using System;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.IO;


namespace fsoWP 
{
	public class FSO : WebPart
	{
		protected override void Render(System.Web.UI.HtmlTextWriter writer)
		{
			HttpContext.Current.Response.Write(DateTime.Now);
			base.Render(writer);
		}
	}
}

ماذا نفعل بعدها؟؟

1. نذهب لل Solution Explorer و منه للمكتبة fsoWP ثم نقوم بعمل Build لها.

2. نذهب لمشروع الويب FileBrowserWP و منه ل References و نقوم بإضافة fsoWP تحت البند Project كما وضحت في بالأعلى.

3. نفتح صفحة Default.aspx على ال HTML View و نقوم بإضافة تاج ال Register بالاعلى ثم نستدعي الكنترول في اي مكان بالاسفل كالتالي:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FileBrowserWP._Default" %>
<%@ Register Assembly="fsoWP" Namespace="fsoWP" TagPrefix="ExplorerWP" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
	<title>Untitled Page</title>
</head>
<body>
	<form id="form1" runat="server">
	<div>
	<ExplorerWP:FSO runat=server ID="myFSO" />
	</div>
	</form>
</body>
</html>

4. نقوم بعمل Run للمشروع بالضغط فقط على F9

سوف تظهر صفحة ويب تعرض التاريخ فقط.

اخبروني ماذا سيحدث و ما المشاكل التي تواجهكم قبل ان انتقل بعمق اكبر داخل الاكواد

هل توجد مشاكل مع البعض؟ هل قام احد بالتجربة؟؟

اعتقد ان من جرب سيواجه مشكلة في ال References الخاصة بال fsoWP Class Library :)

انتظر تعليقاتكم

كل شيء تمام حسب شرحك

نتج لدي عنصر لعرض التاريخ والوق الحاليين مباشرة عند اضافة العنصر كما تفضلت

ولكنني قمت باضافة الخاصية :

[ToolboxData(@"<{0}:DateTimeControl runat=""server"" \>")]

هل سنقوم بتضمين ملفات (كموارد) داخل هذه المكتبة ؟

بصراحة قمت بعمل عدة مكتبات فيها موارد كصور وملفات جافاسكريبت وستايلات والموضوع ممتع لدرجة كبيرة

أرجو من جميع الشباب متابعة الموضوع لما له فائدة في فهم تقنية عنصر Web Control بشكل جيد جدا

ما فهمت شو قصدك ب

اقتباس

هل سنقوم بتضمين ملفات (كموارد) داخل هذه المكتبة ؟

إن كنت تسأل عن الملفات والمجلدات التي ستظهر في ال browser .. فإنها ستكون موضوعة على مكان ما على القرص الصلب او جهاز مشاركة و نقوم فقط بعمل Mapping لعرض محتوياته في ال TreeView

شكرا لمشاركتك و اتمنى ان يشارك المزيد

قصدي هو :

Embedded Recources

فمثلا : اذا كنت تريد اضافة ملف سكريبت ليقوم بكافة العمليات ويتم (طلبه من دون تدخل من المستخدم) للمكتبة كالتالي:

[assembly: WebResource("fsoWP.DateTimeControl.js", "text/javascript")]

حيث نلاحظ أن نتيجة هذا السطر هي :

<script src="/AT2000-fsoWP/WebResource.axd?d=6Dsvvdsfdg.......2&t=5605301453154" type="text/javascript"></script>

اوكي فهمت .. جوابي سيكون لا لن نقوم بإضافة Embedded Recources لل Class Library لان الهدف هنا هو تبسيط الامور للاعضاء و جعل الفكرة سهلة أمامهم وفي مرحلة لاحقة يتم عمل افكار اخرى بمستوى اعلى ..

عدنا اليكم من جديد

الان سنعود لل Class Library التي تكون مهمتها هي انشاء TreeView تقوم بعرض مجلدات متداخلة والملفات التابعة لها.

سوف اقوم بعمل بعض ال Methods و الأحداث Events التي تلزمنا ..

الطريقة او التابع كما يسميه البعض AddChildNode سوف تقوم بإضافة Node و تفحص إن كان بداخل كل Node مجلدات او ملفات لاضافتها للشجرة.

		private TreeNode AddChildNode(DirectoryInfo dir)
		{
			TreeNode node = new TreeNode(dir.Name, dir.FullName, "~/FilesImages/folder.gif");
			foreach (DirectoryInfo dr in dir.GetDirectories())
				node.ChildNodes.Add(AddChildNode(dr));
			foreach (FileInfo file in dir.GetFiles())
			{
				string ext = file.Extension;
				string fileImg = "";

				switch (ext.ToLower())
				{
					case ".doc":
					case ".xls":
					case ".zip":
					case ".vsd":
					case ".mpp":
					case ".ppt":
					case ".pdf": fileImg = ext.Substring(1) + ".gif"; break;
					case ".gif":
					case ".bmp":
					case ".jpg": fileImg = "img.gif"; break;
					default: fileImg = "file.gif"; break;
				}
				fileImg = "~/FilesImages/" + fileImg;
				node.ChildNodes.Add(new TreeNode(file.Name, file.FullName, fileImg));
			}
			return node;
		}

الطريقة CreateChildControls سوف نقوم بداخلها بإنشاء كنترول للشجرة من نوع TreeView سنسميه Explorer و نقوم بإستدعاء الطريقة السابقة Method و نمرر لها ال Root او الجذر لهذه الشجرة وبالتالي الطريقة السابقة سوف تبدأ إضافة Nodes ابتداء من الجذر و تدخل لداخل الشجرة لتعيد كل ال Nodes.

protected override void CreateChildControls()
		{
			DirectoryInfo Root = new DirectoryInfo(@"d:\TestDirectory");
			Explorer.Nodes.Add(AddChildNode(Root));
			Explorer.CollapseAll();
			Explorer.SelectedNodeChanged += new EventHandler(Explorer_SelectedNodeChanged);
			Controls.Add(Explorer);
			base.CreateChildControls();
		}

اضفت ايضا الحدث Explorer_SelectedNodeChanged الخاص بالكنترول Explorer و نرى بالمثال في الاسفل كيف يتم إضافة احداث لكنترول يتم تعريف الحدث لاحقا.

طبعا اضفت فكرة انه عند الضغط على اي ملف سيتم فتح الملف بواسطة البرنامج الانسب له

void Explorer_SelectedNodeChanged(object sender, EventArgs e)
		{
			if (((TreeView)sender).SelectedNode.ImageUrl != "~/FilesImages/folder.gif")
			{
				HttpContext.Current.Response.ContentType = "application/octet-stream";
				HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment; filename=" + ((TreeView)sender).SelectedNode.Value);
				HttpContext.Current.Response.WriteFile(((TreeView)sender).SelectedNode.Value);
			}
		}

و هذا هو الكود الخاص بالكلاس FSO كاملا

using System;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.IO;
namespace fsoWP
{
	public class FSO : WebPart 
	{
		TreeView Explorer = new TreeView();
		private TreeNode AddChildNode(DirectoryInfo dir)
		{
			TreeNode node = new TreeNode(dir.Name, dir.FullName, "~/FilesImages/folder.gif");
			foreach (DirectoryInfo dr in dir.GetDirectories())
				node.ChildNodes.Add(AddChildNode(dr));
			foreach (FileInfo file in dir.GetFiles())
			{
				string ext = file.Extension;
				string fileImg = "";

				switch (ext.ToLower())
				{
					case ".doc":
					case ".xls":
					case ".zip":
					case ".vsd":
					case ".mpp":
					case ".ppt":
					case ".pdf": fileImg = ext.Substring(1) + ".gif"; break;
					case ".gif":
					case ".bmp":
					case ".jpg": fileImg = "img.gif"; break;
					default: fileImg = "file.gif"; break;
				}
				fileImg = "~/FilesImages/" + fileImg;
				node.ChildNodes.Add(new TreeNode(file.Name, file.FullName,fileImg));
			}
			return node;
		}

		protected override void CreateChildControls()
		{
			DirectoryInfo Root = new DirectoryInfo(@"d:\TestDirectory");
			Explorer.Nodes.Add(AddChildNode(Root));
			Explorer.CollapseAll();
			Explorer.SelectedNodeChanged += new EventHandler(Explorer_SelectedNodeChanged);
			Controls.Add(Explorer);
			base.CreateChildControls();
		}

		void Explorer_SelectedNodeChanged(object sender, EventArgs e)
		{
			if (((TreeView)sender).SelectedNode.ImageUrl != "~/FilesImages/folder.gif")
			{
				HttpContext.Current.Response.ContentType = "application/octet-stream";
				HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment; filename=" + ((TreeView)sender).SelectedNode.Value);
				HttpContext.Current.Response.WriteFile(((TreeView)sender).SelectedNode.Value);
			}
		}

		protected override void Render(System.Web.UI.HtmlTextWriter writer)
		{
			base.Render(writer);
		}
	}
}

اخيرا وصلت النهاية نوعا ما ..

الان كل ما علينا هو عمل Build لل class Library ثم نقوم بعمل Run بواسطة F9 لتطبيق الويب .. يعني لازم نروح لل Web Site و نضغط F9 وليس من داخل ال Class Library

يبقى كيف نستخدم هذه الاداة في SharePoint على شكل Web Part

سوف ادرجها في المرة القادمة..

من لديه سؤال فليتفضل ..

السلام عليكم

شكرا لك على جهدك

لكن ظهرت معي مشكله هي

Could not load file or assembly 'fsoWP' or one of its dependencies. The system cannot find the file specified

طبقت الخطوات كما شرحت

شكر لك

اخي اعتقد انك لم تضف ال dll الخاص بال Class Library كمرجع reference لتطبيق الويب

قمت باضافته

طيب هل تظهر رسالة الخطأ في صفحة Default.aspx؟؟

هل أنت متأكد من ال Assembly وال Namespace؟؟ تغيير طفيف في الأسماء يكفي لظهور رسالة الخطأ ..

شيء جميل جدا

حتى الآن كل شيء تمام

بانتظار الخطوة القادمة : تحويلها ل WebPart في SharePoint

يظهر في Default.aspx

ومتاكد من Assembly وال Namespace

بس انا بسخدم VS2005

مابعرف انت في بدايه الموضوع حكيت انكرح تستخدم Oracs

يمكنك عمل ذلك حتى على VS.NET2003

انا انصحك بعمل التطبيق مرة اخرى والالتزام بالخطوات خطوة خطوة .. الاخ Arwany عمل التطبيق معه بدون مشاكل و بالتالي الكود اكيد سليم ..

"جل من لا يسهو"

يلا شد حيلك و حل المشكلة حتى اشرح كيف عمل ال Web Part

بالتوفيق

هنا التطبيق لما شرحه الأخ محمد خليل أبو صلاح:

(صورة المجلد ليست جيدة ولكنني وضعتها على وجه السرعة)

FSO.zip