Knowledge is power. We love to share it.

News related to Mono products, services and latest developments in our community.

khorvat

MonoX architecture explained - the UI

11/12/2011Categories: MonoX

MonoX includes a lot of functionality out-of-the box: blogs , discussion boards, other social networking and mobile content management features and many more. But when it comes to customization, where do you start and what can you customize? Let us dig into the MonoX architecture to find out more.

This is a Part 1 of the "MonoX Architecture Explained" series.

Overview

MonoX is a rather complex Web application and we've put a lot of thought into designing a system that will be extensible by an average user. I would dare to say that complexity is not a bad thing here: after all, users expect to have a lot of their day-to-day scenarios covered by the base package.
Generally speaking, MonoX base system consists of three main parts (Image 1):

  • MonoX UI
  • MonoX API Layer
  • MonoX Core

MonoX Architecture

Image 1: MonoX Architectural Model

I'll describe the UI modules (which are used by non-developers, designers and other "non-technical" types of users) first as they have the largest audience and most impact on the user experience. The API layer goes next. It is used to extend the base MonoX functionality, and this section will be of interest to software developers. In the last section I'll describe the MonoX Core, the "deepest" layer that contains the engine which is used by the UI modules and API layer.

MonoX UI 

MonoX Web & Mobile Modules

MonoX is built upon Microsoft Web part framework. By definition, Web parts are "customizable plug and play components that empower information workers to create personalized user interfaces by simply dragging and dropping them onto a Web page". Web parts allow customization/personalization to be performed at both design time and the run time.

The Web Part Framework in MonoX is used by three categories of users:
1. end users in the site administrator roles (or other roles that allow personalization actions, as defined in the web.config file) can personalize Web pages to change the look and the behavior of various Web parts. They do this by changing Web part properties in the administrative toolbar.
2. Web Page authors and designers use Web Parts to build custom solutions based on the existing functionality. They can use any of the existing HTML editors to perform such actions.
3. ASP.NET developers extend MonoX by introducing the new functionality or extending the existing parts. They typically use Visual Studio for such development tasks.

Let me try to summarize the most important MonoX sections:

  • Content management system

Content management is one of the most important aspects of MonoX. In most of the cases HTML Editor module is used to manage the page content. It allow users to interactively edit the content of the portal, and to immediately see the results in the WYSIWYG fashion. Additionally, the administration infrastructure allows users to set the security roles, change the page template (by customizing theme and the master page), and perform delayed publishing.

  • Blog system

MonoX introduces a blog system that support categories, tagging, comments, attachments, simple content publishing and more. Although blog posts can be administered in the Blog Management section of the administrative panel, most users will manage their blogs directly, using the front-end blog Web parts. You can find more information on Blog Web parts in the MonoX manual - section 6.1.2.
MonoX automatically takes care of spam issues and performs anti-XSS validation; more on that subject will be covered in the following section. 
  • Social networking system

Social networking is the most exciting aspect of today's Web and MonoX allows you to build your own social network easily. MonoX social networking system supports friendship relations, followers (one-way and two-way mode), invitations, groups, activity streams, Web site walls, user walls, messaging, comments and more. To learn more about social networking Web parts, please study the MonoX user manual - Section 6.1.17
  • Discussion boards

Forums or discussion boards are one of the oldest and the most common social networking features. MonoX has a built-in discussion board system that works out-of-the-box and you only need to customize the Web part behavior to suite your needs. Standard features include forum membership, subscriptions & notifications, anti-XSS security, approval system, spam detection, daily reporting, related posts, ratings, answer marking, file attachments, topic tagging, reputation scores, content sharing, etc.
  • Photo gallery

MonoX comes with a simple but useful photo gallery system that can be used both in stand-alone and social networking group scenarios. Photo gallery offers an intuitive interface that allows all users to easily create their albums and to upload unlimited number of photos in a matter of seconds. Photo gallery has few a features that extend the basic file gallery, including ratings, reputation scores, comments and content sharing.
  • News system

News system serves as an alternative to the blog section, and has a few specific features such as hierarchical categorization, staged publishing, templating and specialized front-end Web parts. It supports two operational modes, simple and advanced. The publishing process in the simple mode allows all users in the predefined security roles (NewsEditor and NewsPublisher by default) to publish all news articles. On the other hand, in the advanced mode the publishing process is divided in two steps, where one group of users creates the news content (by default, NewsEditor roles are responsible for this) and another group (by default, users in the NewsPublisher role) reviews and publishes this content. More details can be found in the MonoX manual, Section 6.1.12 - News Web parts.

News system comes with a set of preconfigured front-end Web parts:
  • Main news module is used in the general purpose scenarios.
  • Home page module us used to show only the news articles that have the "home page" option selected.
  • Customizable news module is used in scenarios when user needs to fully customize the visual appearance of the news article.
  • Random news module is used to display the random content from the pool of news articles.
  • Archived news module is used to show the archived news articles.
  • Single news module is used to show the full content of the news article.
  • News menu module is used to show news category menu so the user can navigate through the news hierarchy.

 

  • Events (Calendar) system

Event modules allow users to display and schedule their events. This system supports multiple calendars per user. Event calendar Web part can work in two modes - simple and advanced. When used in a simple mode, calendar is rendered as an event list that can be completely restyled using the MonoX templating infrastructure. Advanced mode displays more advanced calendar with support for date navigation. Event module has many additional features, including "in place" event editing and preview, user group management, templating, etc. For more details, please visit the MonoX manual, Section 6.1.5 - Event calendar Web part for more information.

  • Membership system

MonoX membership system is built on top of the ASP.NET Membership provider infrastucture. It is good to know that MonoX membership system has two built-in providers: MonoXMembershipProvider and ActiveDirectoryMembershipProvider. Both of these providers are extendable and optimized to maximize the performance.MonoX Membership system also includes several predefined modules such as user registration, login and password recovery. You can read more about membership providers and modules in the MonoX manual sections 2.5.2 Provider models, 6.1.10 Login Web part and 6.1.13 Password recovery Web part.

  • Ad system

Ad system can be used in both simple (ad image) and advanced (Flash, JavaScript, Google AdWords and other media) scenarios. Its management section allows users to schedule a campaign and specify which ads will be included to their campaigns. Advanced features include keyword filtering, ad weight, page filtering, language filtering etc. You can read more about ad system in the MonoX manual sections 6.1.1 Ad Web part and 3.1 Logging in.

  • Groups system

Every social networking platform needs to allow users to interact with each other around a common topic. MonoX has built-in groups system that enables the creation of unlimited number of groups that can be public or private and include a wall, photo gallery and a discussion forum. It consists of a few front-end Web parts (group container, group list, people search...) and a back-end administration section. Groups can be placed into categories and multiple moderators can be assigned to each of them. For more information related to MonoX groups, please visit the manual, section 6.1.17.9 Group Web parts.

  • Other built-in modules

A number of "stand-alone" front end modules is included in the base package:

    • Captcha module – used for security purposes (read more on Wikipedia).
    • Contact form module – used to enable Web site visitors to contact the support staff.
    • iFrame module – used to dynamically embed external content into MonoX pages.
    • Language changer – used to enable users to change the Web site language and localization settings.
    • List module – used to create simple content lists for your sites.
    • HTML editor – allows users to enter content directly on site pages.
    • Menu and Simple menu – used to display the navigation menu.
    • Search box and Search results module – used to enable visitors to perform full text searches on various types of MonoX content (it will be described in detail in the next article).
    • Poll module – used to show polls created in the administration area.
    • RSS reader module – used to show RSS feeds on selected pages.
    • Slide show module – enables users to create simple slide shows by entering a list of images to be shown.
    • User profile module – used to show the user profile and its avatar (find more details in our blog).


MonoX mobile modules

Mobile development is taking place at a breathtaking speed and there are the number of mobile devices is increasing on a daily basis. Answering the users' demand, our team has recently build a set of mobile-enabled Web parts based on the jQuery Mobile framework. There is a great introductory article that covers MonoX mobile parts in depth, so let me just mention the mobile parts that are available out of the box:

  • Password recovery
  • Membership editor (used to register or update user data)
  • Login
  • Activation e-mail recovery
  • Wall notes
  • People search
  • Invitation list
  • Friend list
  • Comments
  • Blog
  • User profile

MonoX administration

MonoX administration area allows users to manage the above systems and individual Web parts. I just want to mention a few areas that I haven’t mentioned previously. Most of them are described in the manual, Section 5 Portal administration .

  • File management (local and Amazon S3) – section 5.1, File management.
  • MonoX pages and navigation – section 5.3, Page management.
  • Membership user and role management – section 5.4, User management and 5.5, Role management.
  • Poll management – section 5.8, Poll management.
  • List management – section 5.9, List management.
  • Newsletter management – section 5.10, Newsletter management.
  • Language manager - administrators can use it to add new languages that will be used in their projects.
  • Localization manager – allows users to manage localization resources dynamically (note - this feature is available only when the database resource provider is turned on)
  • Portal settings management – used to change global MonoX settings, some of the settings that can be configured:
    • User roles
    • Google Analytics account number
    • Upload locations
    • Avatar options
    • etc. 
       

This article has described the most important MonoX modules, their purpose and their basic functionality. In the next part of this series we will describe the MonoX API Layer and its features.

Please do not hesitate to contact our support team with your questions and comments.

Rated 1.75, 4 vote(s). 
Thanks for sharing the knowledge on MonoX architecture. Explanation is just excellent. Hope it will help a lot of people.
khorvat
Hi,

thanks, I though that we need to guide the community through all the features that MonoX supports so you guys can find your way faster and easier. Also get back to us with your thoughts on what to cover in next part of MonoX Architecture ?

Thanks again
By MK
hi,

We are waiting for next two articles about the architecture.

many thanks
khorvat
Hi,

we are preparing them as they need to be synced with the new MonoX version that is going to be release soon. Stay tuned.

Regards
clipflair
thanks, one comment though: colors in the image are not very good for reading (could use auto-correct probably in office picture manager or other photo editing program in case it helps)
khorvat
I'll see what we can do, thanks.