[译]FlashBack-基于ASP.NET的图像共享应用程序

原文地址：https://www.codeproject.com/Articles/4767/FlashBack-ASP-NET-based-image-sharing-application

原文作者：Stefan Kyntchev

译文由本站 robot-v1.0 翻译

前言

FlashBack is a web application used to organize and share pictures and video clips with friends and family.

FlashBack是一个Web应用程序,用于与朋友和家人组织和共享图片和视频剪辑.

• 下载源文件-1500 Kb(Download source files - 1500 Kb)

介绍(Introduction)

本文简要概述了FlashBack(基于个人Web的目录和图片共享网站)的体系结构和设计.(This article provides a brief overview of the architecture and design of FlashBack, a personal web based catalog and picture sharing web site.)

FlashBack是使用.NET框架,ASP.NET和C#构建的.在开发过程中,我将尝试分享我的经验,并强调一些我必须做出的建筑和设计选择.我希望您会发现FlashBack有用,并使其适合您的需求.多个版本的FlashBack已成功运行约2年.(FlashBack was built using the .NET framework, ASP.NET and C#. I will try to share my experiences and highlight some architectural and design choices I had to make, while developing it. I hope that you will find FlashBack useful and adapt it for your own needs. Several versions of FlashBack have been running successfully for about 2 years.)

为了使本文相对简短,我将主要介绍体系结构和高级设计.我将尝试提供一些核心组件的简短实现细节.如果您有兴趣,可以浏览源代码并获取实现的详细信息.(To keep this article relatively short I will cover mostly the architecture and high level design. I will try to provide brief implementation details for some of the core components. If you are interested you can browse the source code and get the details of the implementation.)

可从以下位置获得最新版本的FlashBack(包括用户文档):(The latest version of FlashBack (including user documentation) is available from the) 闪回工作区(FlashBack Workspace) .(.)

您还可以看到一个(You can see also a) 有限的在线演示(limited online demo) 版.此演示版本仅限于不显示图片上传功能和管理界面.(version. This demo version is limited to not show picture upload functionality and the administration interface.)

(请注意,演示版本在端口8008上运行.如果无法连接,请确保您的防火墙/代理允许到端口8008的传出连接)((Please note that the demo version runs on port 8008. If you can’t connect, make sure your firewall/proxy allows outgoing connections to port 8008))

特征(Features)

以下是主要功能:(Following are the key features:)

• 使用网络浏览器可以访问图片和视频剪辑,专辑和专辑结构.(Provides access to pictures and video clips, albums and album structure using a web browser.)
• 根据发布日期过滤相册.(Filter albums based on date posted.)
• 以缩略图的形式预览相册中的图像,或以幻灯片形式单独查看每个图像.为了节省带宽,可以从原始图像中自动生成较低分辨率的缩略图和幻灯片图像.(Preview images in albums as thumbnails or view each image individually in a slide show. To conserve bandwidth, lower resolution thumbnails and slide images can be generated automatically from your original images.)
• 使用嵌入式播放器(Windows Media Player或Quick Time)播放视频片段.(Plays video clips using an embedded player (Windows Media player or Quick Time).)
• 下载图像/剪辑并将其上传到相册.通过网络浏览器创建和管理相册.(Download and upload images/clips to albums. Create and manage albums from a web browser.)
• 根据关键字和创建/发布日期等属性搜索图像.搜索使用Microsoft索引服务对图片属性进行背景索引.(Search for images based on attributes such as keywords and date created/posted. Search uses Microsoft Indexing Service for background indexing of picture attributes.)
• 管理员可以根据用户组限制对相册的访问. FlashBack使用独立于Windows用户和组的内部用户/组结构.(Administrators can restrict access to albums based on user groups. FlashBack uses an internal user/group structure that is independent from Windows users and groups.)
• 可以向选定的用户发送电子邮件通知,以在有新图片可用时通知他们.(E-mail notifications can be sent to selected users notifying them when new pictures are available.) 以Internet Explorer为目标,但任何浏览器都可以使用受限版本.对小屏幕浏览器(例如Windows CE/Pocket PC操作系统中使用的Pocket Internet Explorer)也有一些有限的支持.(Targeted for Internet Explorer, but a limited version can be used with any browser. There is also some limited support for small screen browsers such as Pocket Internet Explorer used in Windows CE/ Pocket PC operating systems.)

FlashBack具有内置的基于Web的管理工具,用于:(FlashBack has built-in web based administration tool for:)

• 管理用户,组和对文件夹的访问(Managing users, groups and access to folders)
• 监控用户活动(Monitoring user activity)
• 监视应用程序运行状况(Monitoring application health)

建筑(Architecture)

下图概述了应用程序体系结构.每个块代表一个通常位于单独组件中的组件.虚线表示某些组件相关性.方框箭头显示了组件之间数据流的一般方向.(The following diagram provides an overview of the application architecture. Each block represents a component that typically resides in a separate assembly. Dotted lines present some of the component dependencies. The block arrows show the general direction of data flow between the components.)

如您所见,应用程序的体系结构在很大程度上围绕表示层(蓝色组件).对于此应用程序,表示层负责大部分功能.业务逻辑相对简单明了.(As you can see, the architecture of the application is centered in a large part around the presentation tier (blue components). For this application, the presentation layer accounts for most of the functionality. Business logic is relatively simple and straightforward.)

大部分演示文稿都是通过ASP.NET Web表单,C#“代码背后的代码"和几个自定义用户控件交付的.大多数业务逻辑是由应用程序逻辑组件(紫色和黄色)交付的.应用程序组件通常与某些外部实体进行交互-文件系统,索引引擎或事件日志.黄色组件包装COM接口.紫色组件负责各种内部文件,图像和安全管理功能.(Most of the presentation is delivered through ASP.NET web forms, C# “code behind,” and a couple of custom user controls. Most of the business logic is delivered by application logic components (purple and yellow). Application components typically interface with some external entity – file system, indexing engine or the event log. Yellow components wrap COM interfaces. Purple components are responsible for various internal file, image and security management functions.)

请注意,没有后端数据库.所有必需的信息都存储在文件系统中.这使移动,设置,备份和还原整个图片集变得非常容易.(Note that there is no back end database. All required information is stored in the file system. This makes it very easy to move, setup, backup and restore the entire picture collection.)

申请流程(Application workflow)

此应用程序的主要用户方案是浏览相册和查看图片.这种情况下的工作流程相对简单:(The main user scenario for this application is browsing albums and viewing pictures. The workflow in this scenario is relatively simple:)

• 当用户在树视图(左窗格,如图1所示)中单击相册时,该请求将由ASPX页接收并显示在主(右)窗格中.相册的路径作为查询字符串参数提供.的(When a user clicks on an album in the tree view (left pane, as shown in Figure 1), the request is received by an ASPX page and displayed in the main (right) pane. The path to the album is provided as a query string parameter. The) OnLoad 页面的方法将请求分派给(method of the page dispatches the request to the) DirectoryHelper 中的课程(class in the) ApplicationTools 组件请求此相册中的图像列表.此类负责:(component requesting a list of images in this album. This class is responsible for:)

  • 检索此相册中的图片或视频剪辑.(Retrieving pictures or video clips in this album.)
  • 将图片格式化为所需的分辨率.(Formatting the pictures to the requested resolution.)
  • 过滤掉当前用户无权查看的图片.(Filtering out pictures the current user is not authorized to see.)

• 返回的图片列表((The returned list of images (an) ArrayList 的(of) FileSystemInfo 对象)保存用户有权查看的特定格式的所有图片.根据用户请求的视图(缩略图,幻灯片显示),列表包含分辨率(大小)不同的文件.所有必需的图像格式和尺寸都是根据原始图片自动创建的,并缓存起来以备后用.(object) holds all pictures of a particular format that the user is authorized to see. Based on what view the user has requested (thumbnails, slide show), the list contains files with different resolution (size). All required image formats and sizes are created automatically from the original pictures and cached for later use.)

• 转换后(After converting this) ArrayList 到一个(to a) DataTable ,该列表用于将数据绑定到(, the list is used to data bind to a) DataGrid 显示控件.在数据绑定过程中的几个地方,图片的物理路径被替换为在Web浏览器中正确呈现图像所需的虚拟路径.(control for display. In several places during the data binding process, the physical path to the picture is replaced with a virtual path needed to correctly render the image in a web browser) 对于三个主要视图,此重复的一般工作流程有所不同:缩略图,幻灯片和视频剪辑.(This general workflow is repeated with some variations for all the three major views: Thumbnails, Slide Show and Video Clip.)

影像管理(Image management)

基于Web的图像目录必须管理几种不同的图像格式(分辨率/尺寸).主要格式是图片的原始格式.平均而言,一个2兆位的数码相机每个图像使用大约300 KB.发送十几个或更多的300KB图像仅作为缩略图显示会非常低效.为了使此过程更有效,当您访问每个相册时,FlashBack会自动从原始图片生成分辨率较低的缩略图(80x100像素,每张图像约5 K).缩略图仅生成一次并缓存到模仿原始目录结构的目录结构中.缓存的目录结构由应用程序隐藏并在内部维护.出于所有实际目的,您只需要担心原件.(A web-based image catalog must manage several different image formats (resolutions/sizes). The primary format is the image’s original format. On average, a 2 megabit digital camera uses about 300 KB per image. It would be very inefficient to send a dozen or more 300KB images just for displaying as thumbnails. To make this process more efficient, FlashBack generates lower resolution thumbnails (80x100 pixels, about 5 K per image) from the original pictures automatically, as you visit each album. Thumbnails are generated once and cached to a directory structure that mimics the directory structure of the originals. The cached directory structure is hidden and maintained internally by the application. For all practical purposes, you only have to worry about the originals.)

对于幻灯片图像(在幻灯片视图中显示的图像)重复相同的过程.生成的幻灯片图像约为800x600像素或每幅图像约50K.如果您具有快速连接(和大型显示器),则可以告诉FlashBack将原始图像用作幻灯片图像.(The same process is repeated for slide images (images that are displayed in the slide show view). Generated slide images are about 800x600 pixels or approximately 50K per image. If you have fast connection (and a large monitor) you can tell FlashBack to use the original images as slide images.)

DirectoryHelper类(DirectoryHelper class)

如上所述,用户界面层使用(As mentioned above, the user interface tier uses the services of the) ApplicationTools 组件以获取要显示的正确图片列表.的(component to get the correct list of pictures to display. The) DirectoryHelper 类提供使文件系统看起来像图片的分层存储库的API.它使用户界面从了解图片的存储位置中抽象出来.中心方法(class presents an API that makes the file system look like a hierarchical repository of pictures. It abstracts the user interface from knowing much about where the pictures are stored. The central method of) DirectoryHelper 类是(class is the) GetPictureList 方法.此方法以正确的格式(尺寸)返回给定相册的图片列表.(method. This method returns a list of pictures from a given album with the correct format (size).)

的(The) GetPictureList 方法检查所请求的相册是否存在以及所请求的格式(缩略图或幻灯片)是否可用.如果所选的格式不存在,则会即时生成并缓存.生成图片的实际工作是由(method checks if the requested album exists and if the requested format (thumbnails or slideshow) is available. If the selected format does not exist, it is generated on the fly and cached. The actual work of generating the pictures is done by the) ThumbnailGenerator 类,位于(class, located in the) ApplicationTools 部件.(assembly.)

如果您在缓存某些原始图片后将其删除,则(If you delete some original pictures after they have been cached, the) GetPictureList 将尝试检测并相应地更新其缓存.它使用原始相册和缓存相册中的图片计数来检测此更改,因此,如果仅替换图片,它将无法检测到.(will try to detect that and update its cache accordingly. It uses a picture count in the original and cached albums to detect this change, so if you just replace a picture it will not detect it.)

即时生成的一个潜在问题是,如果给定的相册包含大量图片,则用户将必须等到所有图像生成后,应用程序才能返回结果.这还会在请求期间绑定IIS工作线程,从而阻碍了可伸缩性.幸运的是,仅在第一次请求专辑时,这种情况只会发生一次,并且在"非商业"环境中是可以接受的.在商业环境中,这可以通过后台服务来完成,也可以作为上传新图片后手动部署步骤的一部分来完成.(One potential issue with on-the-fly generation is that, if given album has a large number of pictures, your user will have to wait until all images are generated before the application returns a result. This also ties up an IIS worker thread for the duration of the request, thus hindering scalability. Fortunately this happens only once - on the first request for an album - and is acceptable for “non-commercial” environments. In a commercial environment, this could be done by a background service or as a part of a manual deployment step after uploading new pictures.)

缩略图生成器类(Thumbnail generator class)

ThumbnailGenerator 负责从原始图像生成不同的图像尺寸.内部使用内置(is responsible for generating different image sizes from an original image. Internally it uses the built- in) System.Drawing.Bitmap 用于处理图像的类-加载,调整大小和保存.(class to manipulate the image - load, resize and save.)

指某东西的用途(The use of) ThumbnailGenerator 上课很简单.您可以通过提供原始图像的路径来构造类.的(class is very simple. You construct the class by providing a path to the original image. The) Generate 方法接受大小和文件名,将在其中保存生成的图像.提供的尺寸是新图像最大尺寸的尺寸.其他尺寸是根据图片的纵横比计算的.这样可以确保新图片在两个维度上都不会大于要求的尺寸.(method accepts size and the name of a file where the generated image will be saved. The supplied size is the size of the largest dimension of the new image. The other dimension is calculated based on the picture’s aspect ratio. This ensures that the new picture will be no larger than the requested size in both dimensions.)

的(The) ApplyBevel 方法允许您在生成的图像的边缘上应用斜角效果.此效果的代码来自Philipos Sakellaropoulos在此站点上发布的一篇文章. (本文中,Philipos还提供了一些示例代码,说明如何从其他文件类型(如Word文档或影片剪辑)中提取缩略图.)(method allows you to apply a bevel effect on the edges of the generated image. The code for this effect comes from an article published on this site by Philipos Sakellaropoulos. (In this article Philipos also provides some sample code of how to extract thumbnail images from other file types such as Word documents or movie clips.))

安全基础设施(Security infrastructure)

DirectoryHelper 类,作为执行(class, as part of executing the) GetPictureList 该方法还负责过滤请求用户无权查看的图片.通过将每张图片展示给(method, is also responsible for filtering pictures that the requesting user is not authorized to see. This filtering is done by presenting each picture to the) SecurityManager 并询问是否允许用户访问.(and asking it if the user is allowed access.)

我将安全子系统的设计保持尽可能通用,以使其可在其他应用程序中重用.在基础级别,安全子系统控制对虚拟资源的访问.对于闪回,资源是目录.在其他项目中,可能还有其他类型的资源需要保护.(I kept the design of the security subsystem as generic as possible to make it reusable in other applications. At the base level, the security subsystem controls access to virtual resources. In the case of Flashback, the resource is a directory. In other projects there may be other types of resources to protect.)

FlashBack安全子系统以组/相册级别的粒度运行.您可以控制对特定相册的访问,但不能控制对相册中单个照片的访问.嵌套相册后,拒绝访问父相册也会拒绝访问所有子相册.(The FlashBack security subsystem works at group/album level granularity. You can control access to particular albums, but not to individual pictures in the album. When albums are nested, denying access to the parent also denies access to all child albums.)

用户身份验证是由UI层使用内置的表单身份验证机制完成的.这时(User authentication is done by the UI tier using a built-in forms authentication mechanism. At this time the) SecurityManager 要求验证用户凭据.已验证的用户存储在会话变量中,可用于以后的请求.(is asked to validate the user credentials. The validated user is stored in a session variable and available for later requests.)

所有的凭证信息(All credential information that the) SecurityManager 用途存储在内存结构中.进行更改时将其序列化为XML文件,并在应用程序启动时将其清除.(uses is stored in in-memory structures. It is serialized to an XML file when changes are made and desterilized when the application starts.)

使用以下类型的表达式执行安全检查:(Security checks are performed using an expression of type:)

bool SecurityMgr.Instance.CanRead(user,resource)

除了身份验证和授权接口外,(In addition to the authentication and authorization interfaces, the) SecurityManager 提供了用于管理用户和组以及管理对资源的访问的界面.(provides an interface to manage users and groups as well as to manage access to resources.)

FlashBack当前使用的唯一权限是(The only permission that FlashBack currently uses is the) Read 允许.您无法控制哪些用户有权将照片上传或删除到哪些相册.闪回允许管理员在相册树中定义"公共区域”,允许用户上传和删除图片.管理员只能确定哪些用户可以上传图片.所有允许上传图片的用户都具有对"公共"区域的相同访问权限.通过将图片直接复制到服务器上的文件系统来管理专用区域或受限区域.(permission. You cannot control which users have rights to upload or delete pictures to which albums. FlashBack allows the administrator to define a “public area” in the album tree, where users are allowed to upload and delete pictures. The administrator can only determine which users can upload pictures. All users who are allowed to upload pictures have the same access to the “public” area. The private or restricted area is managed by copying pictures directly to the file system on the server.)

与Microsoft索引服务集成(Integration with Microsoft Indexing Service)

FlashBack可以与Microsoft Indexing Service交互以根据某些图片属性搜索图片.当前仅可搜索Windows 2000的默认属性:标题,主题,作者,类别,关键字和注释. (如果您实现了名为Indexing Service的插件,则可以搜索更多属性(FlashBack can interface with Microsoft Indexing Service to search for pictures based on some picture properties. Currently only default Windows 2000 properties are searchable: Title, Subject, Author, Categories, Keywords and Comments. (More properties can be searched, if you implement a plug-in to the Indexing Service called) IFilter ).您可以通过右键单击图片并选择来设置上述任何属性.(). You can set any of the properties mentioned above by right-clicking on the picture and selecting)*物产(Properties)*然后选择(and then selecting the)*概要(Summary)*标签.(tab.)

IndexService组件(IndexService component)

闪回使用(FlashBack uses the) IndexService 与索引服务接口的组件. Microsoft提供了两个COM对象,默认情况下将它们与索引服务一起安装.这些对象与索引服务进行通信,接受搜索条件并返回满足这些条件的文件列表,其方式类似于查询数据库.闪回的(component to interface with the indexing service. There are two COM objects provided by Microsoft and installed by default with the indexing service. These objects talk to the indexing service, accepting search criteria and returning back a list of files that satisfy these criteria - in a way similar to querying a database. FlashBack’s) IXQuery 类提供了一个托管API,该API封装了两个COM组件.它还提供了结果的某种转换,因此作为(class presents a managed API that wraps around both COM components. It also provides some transformation of the result, so it comes back as an) ArrayList 原始图片.根据搜索条件,此列表可能包含来自多个相册的图片.结果列表进一步提供给(of original pictures. Based on the search criteria, this list may contain pictures from multiple albums. The result list is further provided to an overload of) DirectoryHelper 的(’s) GetPictureList 方法,以确保生成适当的图片格式并应用安全规则.最后,经过过滤和格式化的列表用作数据源,用于将数据绑定到用户界面中的Web表单控件.(method, that ensures that the appropriate picture formats are generated and security rules applied. Finally, the filtered and formatted list is used as a data source for data binding to Web form controls in the user interface.)

记录和监视组件(Logging and monitoring component)

任何应用程序都需要一种记录执行期间发生的事件的方法.在FlashBack中(Any application needs a way to log events that occurred during its execution. In FlashBack the) Support 组件为应用程序的其余部分提供跟踪和日志记录服务.大多数代码来自参考实现(Microsoft Duwamish示例).(component provides tracing and logging services to the rest of the application. Most of the code comes from a reference implementation (Microsoft Duwamish sample).) ApplicationLog 是记录事件的主要界面.每次组件检测到重大事件(通常为错误,但其他条件(如创建用户或组)也被认为很重要)时,它会使用一些(is the main interface for logging events. Every time a component detects a significant event (usually errors, but other conditions like creating a user or group are also considered important), it logs this event using some of the) ApplicetionLog 方法(methods) WriteError ,(,) WriteWarning ,(,) WriteInfo 要么(or) WriteTrace .默认情况下,事件记录到两个位置–特定于应用程序的事件日志和文本日志文件.(. By default, the event is logged to two places – an application specific event log and to a text log file.)

每个事件也将发送到.NET框架中内置的跟踪基础结构.这提供了拦截事件和发送通知的标准机制.(Each event is also sent to the tracing infrastructure that is built in the .NET framework. This provides a standard mechanism for intercepting events and sending notifications.) NotificationTraceListener 中的课程(class in the) ApplicationTools 程序集拦截符合特定模式(正则表达式)的事件,然后将电子邮件发送到管理员的电子邮件帐户.默认情况下,仅监视用户登录事件和错误事件,但这是可配置的.(assembly intercepts events, matching a certain pattern (a regular expression), and sends E-mail messages to the administrator’s E-mail account. By default only user login events and error events are being monitored, but this is configurable.)

不久前,Microsoft发布了提供类似功能的异常处理应用程序块.还有一个名为Log4Net的开源项目,可提供应用程序日志记录.(Some time ago Microsoft released the exception handling application block that provides similar functionality. There is also an open source project called Log4Net that provides application logging.)

良好的日志记录是可以的,但如果您不定期查看日志,则无济于事. FlashBack使用如上所述的主动通知,并且还允许管理员在其管理屏幕中查看应用程序事件日志.(Good logging is fine, but does not help much if you don’t review your logs at regular intervals. FlashBack uses a proactive notification as described above, and also allows the administrator to view the application event log as part of his administration screens.)

日志记录还可用于跟踪网站使用情况.鉴于应用程序知道用户登录的时间和用户的IP地址,在一个时间段内查询Web服务器日志文件并查找给定IP访问的所有文件相对容易.在管理屏幕中,有一个链接,该链接使您可以查询给定用户会话中的所有已访问文件.(Logging can also be used to track site usage. Given that the application knows the time the user logged in and the IP address of the user, it is relatively easy to query web server log files and find all files accessed by a given IP within a time period. In the administration screen, there is a link that allows you to query for all accessed files in a given user session.)

IISHelper组件(IISHelper component)

IISHelper 组件包含(component contains the) IISLogBrowser 与Web服务器日志文件连接的类. Microsoft提供了一个COM组件,使查询日志文件就像数据库表一样容易.(class that interfaces with web server log files. Microsoft provides a COM component that makes it easy to query log files as if they are a database table.) IISLogBrowser 内部依赖于此COM类的实现.(relies internally on this COM class for its implementation.)

电子邮件通知(E-mail notification)

除上述自动事件通知外,FlashBack还支持将模板电子邮件发送给选定的用户组.包括两个示例模板电子邮件:–(In addition to the automatic event notification described above, FlashBack supports sending of template E-mail messages to selected groups of users. Two sample template E-mails are included: –) ForgottenPassword ,用于当用户请求其忘记的密码时,以及(, for when the user requests their forgotten password and) NewPictures ,–当新图片添加到站点时,管理员可以发送以通知用户.(, – which the administrator can send to notify users when new pictures are added to the site.)

电子邮件模板由存储电子邮件主题和正文的文本文件定义.您可以通过指定命名令牌将一些用户特定的信息放置在电子邮件中.生成电子邮件时,将用每个用户的正确用户信息替换这些令牌.当前支持的令牌包括(E-mail templates are defined by a text file that stores the subject and body of the E-mail. You can place some user specific information in the E-mail by specifying named tokens. These tokens will be replaced with the correct user information for each user, when E-mails are generated. Currently supported tokens include) [USER_NAME] ,(,) [USER_PASSWORD] ,(,) [ORIGINATOR_NAME] ,(,) [ORIGINATOR_EMAIL] 和(and) [SITE_URL] .(.)

管理屏幕提供了一种选择用户并将其他数据添加到消息的方法.(The administration screens provide a way to select users and add additional data to the message.)

MailHelper类(MailHelper class)

闪回使用(FlashBack uses the) MailHelper 来自的班级(class from the) ApplicationTools 组件以执行令牌转换并发送电子邮件.的(component to perform token transformation and send the E-mails. The) MailHelper 内部依赖于内置(internally relies on the built-in) System.Web.Mail.SmtpMail 类和线程池以异步发送电子邮件.(class and a thread pool to send E-mail messages asynchronously.)

用户界面(User interface)

设计用户界面时的目标是使其尽可能简单,但仍能够容纳不断增长的附加功能.它发展了数次,反映了我在先前项目中的经验.我决定给它更多的是应用程序的感觉,而不是传统的网页感觉.使用框架和(The goal when designing the user interface was to make it as simple as possible, but still be able to accommodate growing additional functionality. It evolved several times and reflected my experience in previous projects. I decided to give it more of an application feel rather than a traditional web page feel. Use of frames and) IFRAME 使得Flashback的可移植性较差,但满足了我对与应用程序进行交互的简单直接方式的要求.(s made Flashback less portable, but satisfied my requirements for an easy and direct way to interact with the application.)

乐队控制班(Bands control class)

左窗格是使用自定义" bands"控件实现的.此控件用于在相册/搜索/管理模式之间切换.乐队的数量及其名称是可定制的.每个乐队主持一个(The left pane was implemented using a custom “bands” control. This control is used to switch between Albums/Search/Administration modes. The number of bands and their names are customizable. Each band hosts an) IFRAME 指向内容文件.专辑的乐队主持了树控件.(that points to a content file. The album’s band hosts the tree control.)

树控制类(Tree control class)

树控件是服务器端用户控件.该控件是相当可定制的,因此您可以更改每个节点的呈现方式.此控件使用(The tree control is a server side user control. This control is fairly customizable so you can change how each node is rendered. This control uses a) TreeControlModel 该类从表示逻辑(树的外观)抽象树结构(树中的内容).树形控件在不同的浏览器上都可以很好地呈现-在Netscape,Pocket IE和IE上进行了测试.我已经在其他项目中成功重用了此控件.(class that abstracts the tree structure (what is in the tree) from the presentation logic (how does the tree look like). The tree control renders fairly well on different browsers – it was tested on Netscape, Pocket IE and IE. I have successfully reused this control in other projects.)

为了与主(右)视图通信,树控件使用客户端JavaScript在主视图框架中打开页面.基于相册的内容,此页面是"缩略图"视图或"影片"剪辑视图.(To communicate with the main (right) view, the tree control uses client-side JavaScript to open a page in the main view frame. This page is either a Thumbnails view or a Movie clip view, based on the contents of the album.)

缩略图视图包含一个(The Thumbnails view consists of a) DataGrid 在缩略图中呈现缩略图的控件(control that renders thumbnails in a) DataGrid 并支持分页.您可以控制一次显示多少行和多少列.(and supports paging. You can control how many rows and columns are displayed at a time.)

幻灯片视图使用客户端JavaScript通过在一定时间后切换到下一张图片来呈现幻灯片.(The Slide Show view uses a client- side JavaScript to present a slide show by switching to next picture after a certain time.)

“影片剪辑"视图托管嵌入式播放器,其中包含专辑中的视频剪辑列表.该视图将根据专辑的内容呈现Windows Media Player或Quick Time播放器.相册中的内容是通过查看相册中第一个文件的扩展名确定的(如果是)(The Movie Clip view hosts an embedded player with a list of video clips in the album. This view will render either Windows Media Player or Quick Time player based on the contents of the album. What is in the album is determined by looking at the extension of the first file in the album – if it is).MOV(.MOV*)*– FlashBack假定专辑包含Quick Time电影,并渲染Quick Time播放器.否则,它将渲染Windows Media Player.(*– FlashBack assumes that the album contains Quick Time movies and renders the Quick Time player. Otherwise it renders the Windows Media player.*)

组态(Configuration)

我试图使该应用程序可配置,因此它可以适合许多环境.(I tried to make this application configurable, so it can be fit in many environments.)*Web.config(Web.config)*是主要配置文件.有关详细信息,请参阅与应用程序一起分发的配置文件中的注释. FlashBack还支持并排执行不同版本,或者就我而言,支持相同版本的多个实例,它们托管不同的图像目录.(is the primary configuration file. For details, see the comments in the configuration file distributed with the application. FlashBack also supports side by side execution of different versions, or as in my case, several instances of the same version hosting different image catalogs.)

结论(Conclusion)

该应用程序在一段时间内逐步发展.根据需要添加了片段-通常是由于我的反馈或想法.我不得不多次重构现有代码,并使之更易于理解和维护.在某些地方,代码看起来"足够好"或不值得接触.(This application has evolved incrementally over a period of time. Pieces were added as needed - usually as a result of feedback or ideas I had. Several times I had to re-factor existing code and make it easier to understand and maintain. There are places where code looked “good-enough” or was not worth touching.)

这也是我尝试不同技术和方法的游乐场.这可以解释为什么某些功能对于这种类型的应用程序似乎有些过时.当时,我试图展示自己最好的架构,设计和实施技能.我确信,如果不得不再次构建它,那么我会做很多不同的事情.(This was also my playground to try different technologies and approaches. This may explain why some features seem like overkill for this type of application. I attempted to put my best architecture, design and implementation skills at the time. I am sure that if I have had to build it again, I would do many things differently.)

如果您决定不仅仅将本应用程序用于个人用途,请记住,在某些情况下,我诉诸于最简单的操作方式,而不是"正确"的方式(例如图片上传).还有一些安全问题,如果您知道完整的URL,就可以绕过安全基础结构并下载任何图片.实施自定义(If you decide to use this application for more than just personal use, keep in mind that in several cases I resorted to the easiest way of doing something, rather than the “right” way (picture upload for example). There are also some security issues allowing you to bypass the security infrastructure and download any picture if you know the full URL. Implementing a custom) HttpModule 可以解决此问题.我之前也提到过,可伸缩性也受到生成低分辨率图像的方式的阻碍.(can resolve this issue. I also mentioned before that scalability is also hindered by the way low resolution images are generated.)

还有一套单元测试(使用(There is also a suite of unit tests (using) NUnit )测试各种应用程序组件.在将它们上传到工作区之前,需要进行一些清理.() that test various application components. Some cleanup is needed before they can be uploaded to the workspace.)

在当前状态下,FlashBack是稳定的,并且在一定程度上是可维护和可扩展的应用程序.它完全可以完成它的工作,并且我已经成功使用了一段时间.我希望您也能找到一些用处.(In its current state FlashBack is stable and to a certain degree a maintainable and extendable application. It does exactly what it supposed to do and I have successfully used it for a while. I hope you can find some use for it too.)

请享用!(Enjoy!)

许可

本文以及所有相关的源代码和文件均已获得The Code Project Open License (CPOL)的许可。