Recently Mehul and I did a webinar about one of our newest demo applications called “DevExpress Documents”.
We talked about the functionality, its architecture and how modular and reusable this demo is constructed.
Why build an Office 365 Clone?
A lot of companies like the Office 365 approach. All documents are stored in one central place and there is no need for specific workstation configuration and deployment. In fact if you want to have a BYOD (Bring Your Own Device) policy, this is the perfect way to go!
Since not all companies are using Office 365, it must come with a caveat.
All documents created and stored on Office 365 are stored in a third-party cloud. This means that you don’t know for sure who has access to them, which is against the security policies of many companies.
With this demo and the webinar, we would like to show you that we have all the building blocks for creating your own document management system which can be easily hosted in-premises, or a local service provider, but with the same ease of use as Office 365.
How to build an Office 365 Clone?
From a UI perspective, besides the login page, this application contains only 3 pages:
Default.aspx
This is the homepage of the application, and serves the File navigation functionality. The main controls used in this page are: ASPxPanel, ASPxMenu, ASPxCallbackPanel and ASPxFileManager.
This page shows how we’re using the responsive and adaptive settings of the ASPxPanel to do some easy positioning like keeping the header always on top in the browser window. We also use the AdaptivitySettings of the filter panel to collapse when the browser window gets smaller than a certain width.
Another cool thing in this demo is the fact that we are switching FileSystemProviders of the ASPxFileManager through a callback depending on the selected filter.
RichTextEdit.aspx
This page serves as editor and viewer of RichText documents like *.doc, *.docx, *.rtf and others. It provides a nice example on how to use an external ASPxRibbon control together with the ASPxRichEdit.
SpreadsheetEdit.aspx
This page serves as an editor and viewer of Spreadsheet documents like *.xls, *.xlsx and others. It contains an ASPxRibbon and an ASPxSpreadsheet control. Like the RichTextEdit.aspx page, it shows how to use an external ASPxRibbon together with an ASPxSpreadsheet control.
The Service Oriented Architecture of DevExpress Documents
If you check out the code behind of the Default.aspx, you will notice that there is not a lot of code in it, except for some initialization. This is because we have chosen a Service Oriented Architecture for this application.
If you check Wikipedia’s definition of the Service Oriented Architecture, you will find:
“A service-oriented architecture (SOA) is an architectural pattern in computer software design in which application components provide services to other components via a communications protocol, typically over a network.”
In the Documents application the services will not communicate over a network, but the first part of the definition certainly applies.
We have defined a number of services which communicate with each other without knowing from each other what is happening under the hood.
An example of this is the DocumentService which handles all document related tasks like locking, editing, creating etc. This service needs data access to fulfill its tasks and therefore, it will communicate with the DataService . The DocumentService is completely unaware of the fact that the DataService is using Entity Framework to access the database.
An advantage of this architecture is that your application is pretty well structured even when it grows in time.
Another plus of this approach is that if you would like to use another ORM like our own XPress Persistent Objects (XPO), you could create another DataService which facilitates XPO and replace the E.F. DataService with this one.
The Services in the DevExpress Documents application
The services are located in the ~/App_Code folder, and it is definitely worth checking them out. We have defined the following services for the application:
Data service
The Data Service which manage all interaction with the database used for the application.
Document service
The Document Service which will manage the document locking, and keeps track of opened files etc.
File System service
The File System Service will process all file related operations like Opening, Editing, Uploading, Directory creation and modification etc.
Image service
The Image Service will process anything related with image related functionality like the users avatars and thumbnail processing.
User service
The User Service will provide and manage all user related functionality like validation and activity tracking
These services are all managed by an application object which is the DXApplication instance. One of the reasons for this approach is that it is very structured, but we also need to manage some global (shared) data like locked files etc.
The DXApplication object is an excellent place to store that kind of information.
A final note on the demo app
You can find the source of this demo in the %PUBLIC%\Documents\DevExpress Demos 15.1\Components\ASP.NET\CS\Documents folder where I’d like to mention that this project is a Web-Site project. My guess is that most of you will use Web Application projects, so if you want to use portions of code in your Web Application Project, you will need to change a couple of things before it will work.
If you’re interested in converting this Web-Site project into a Web Application project, let me know. I will put up another blog post with detailed instructions later on how to do that.
Also let me know if you have created your own Office 365 Clone or incorporated this functionality in your own project!
Free DevExpress Products - Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We'll be happy to follow-up.