R2i Open Web Studio


November 26, 2008


What is R2i Open Web Studio

Describing R2i Open Web Studio (OWS), at times can be extraordinarily difficult, simply because it can have so many answers to so many different people. In short, R2i Open Web Studio and its corresponding runtime engine provide a full programming environment complete with all necessary interaction and syntax - entirely managed within your browser. The runtime structure of R2i OWS is fairly simple, designed as a way of binding a markup template to your query results.  It provides a complete runtime layer with a rich, familiar and easy to use interface that allows you to very rapidly assemble a complete solution with all the necessary forms and interactions in an extremely short time.

Overview Video
Review the information provided within this Wiki article by watching the "General Overview" video.

The types of applications and solutions that you can build with R2i Open Web Studio are endless, starting with a few simple apps that we provide here in our community sections, like Chat, Avatar Manager, and Wiki, integration solutions like our Forum Service, and onward to complete solutions that meet the needs of nearly any vertical.

The R2i Open Web Studio environment also comes bundled with a complete Community Interaction layer, allowing you to work on configurations with friends, sharing applications and solutions with others, and helping out one another in a easy to use environment.


The rich environment of the R2i Open Web Studio IDE is a familiar sight to most users. Crafted after the wildly popular MS Office interface, R2i OWS IDE provides a robust ribbon control with a tailored environment that most users will find easy to use. The user interface is intuitive, using a List View or Tree structure for managing lists of records or the code tree and property sheets for modifying items contained within the lists.


The Ribbon is provided by an open source code project called jRibbon which encapsulates the entire look and feel of the Microsoft Fluent Ribbon control within a tiny Javascript footprint, completely defined with a block of JSON syntax. The project makes it very easy to integrate a ribbon into any web page.

It is also important to note that the ribbon interface is also used in each of the full text editors provided in the Administration.

Our ribbon facilitates the starting point for all interaction within the IDE and is broken into a set of Tabs and Ribbon Groups.



The initial Tab in R2i Open Web Studio is the "Home" tab which provides the Clipboard functionality and Configuration management.


The "General" tab is used  for editing a  configuration. This tab is used to manage the overall settings for the current configuration including its AJAX handling status, number of records per page and other general settings.


The code tree and runtime of the actions are supported by the "Actions" tab, which provides the set of Actions available during runtime. The entire handling of runtime of each R2i OWS configuration is completely managed by the Actions interface. Clicking on "Actions" on the ribbon will add the Action to your tree allowing it to execute.


A variety of tools are continually being added to the Open Web Studio platform.  Initially the tool comes with a complete repository and event logging capability. The "Tools" menu is the direct starting point for each of these tools.


To quickly get information about the current runtime of R2i Open Web Studio, its version and the corresponding platform wrapper being employed - click on the "About" tab.


Growing a community of developers and providing Social Development to each user of R2i Open Web Studio is facilitated with the "Community" tab as well as the R2i Open Web Studio website. From the Community tab you can look up questions, chat with users, ask for help, and get answers from the Wiki.

Ribbon Groups

Each Ribbon tab is comprised of a set of re-usable Ribbon Groups. These groups provide a set of buttons (once referred to as Toolbars). Clicking on each button within a group will load the corresponding interface.


Copying portions of the code tree from one configuration to another easily accomplished with the integrated IDE clipboard. Simply select an action from the code tree, and click "Copy" then, open the target configuration, select the target action and click "Paste" - the selected action, and its child actions, will be pasted into the target configuration instantly.


From the Configuration ribbon you can Open configurations; Create New configurations; Import and Export configurations using a simple text copy/paste; Publish the runtime version of the current configuration and Save a Sandbox version of the configuration for previewing.


A variety of actions are currently supported by R2i Open Web Studio and this list is growing rapidly. The Action structure provided by the framework is completely extendable. You can easily add new Actions to the runtime for management and handling. Simply clicking on an action within the Ribbon will add that action into the code tree for manipulation and execution.


The configurations created by R2i Open Web  Studio are stored in the database and are versioned based on each request to Publish or Save. From the repository you can reload a previous version, roll back to a previous version, set a Label or review the modifications timeline.

List View

The list and tree environments are provided in a similar fashion, always located directly below the Ribbon. Each row in the List View contains a set of icons which provide direct interaction, like Copy, Delete and View. Double-clicking on a row within the List will initiate the View (or in the case of the Configuration List, Open).

Property Sheet

When an Action is Viewed, the Property Sheet will load with the corresponding records value. The Property Sheet header will always provide a brief display of the type of element that is currently under modification, and the relative index of that element. The editable properties of the Action are provided with custom interaction based on the specific type of action. The "Save" and "Cancel" buttons are always directly below the attribute properties. Clicking "Save" will record the changes and store them in the configuration, ready for Publishing.


The configurations are stored in the database, or may be stored in resource files for direct loading from a User Control. The structure of these configurations is Javascript Object Notation also known as JSON. These configurations are versioned, as stated previously, upon each Publish and Save request.

When a runtime version is published, the configuration changes occur instantly.  As soon as you publish your change - the front-end is already taking the values you specified. This is a profoundly important point regarding Open Web Studio. All your changes are made instantly whenever you desire.  No compilation, copying and loading of libraries, or server restarts are required.

Templates and Queries

R2i Open Web Studio's main interaction is based on the template. The template is comprised of a dynamic set of headers, footers and detail templates corresponding to the query defined for the template. For example - you may provide a user report with historical tracking over a span of pages. Your Query would be defined as a selection of users, joined within their corresponding history, and grouped by the user record. The layout template may provide an overall header which provides the general time and date of the query, and then a sub header for each User record, followed by a detail record describing the history.

R2i Open Web Studio allows you to define this simple query and then layer the headers and footers accordingly, so that your output can come out something like this:

<div>User History from January 1, 2008 at 3:32 PM
    <div>User: Joe Johnson
            <li>1/1/2008 5:54 AM - Home</li>
            <li>1/1/2008 5:56 AM - About Us</li>
            <li>1/1/2008 5:57 AM - Our Services</li>
            <li>1/1/2008 6:14 AM - Contact Us</li>
    <div>User: Sally Samson
            <li>1/1/2008 3:24 PM - Home</li>
            <li>1/1/2008 3:30 PM - Contact Us</li>

To see more about how this is done or review some samples of using templates and queries, click Template Actions.


The syntax of R2i Open Web Studio is quick to pick up, using a text structure similar to standard Wiki languages. The language itself provides a variety of formatting capabilities, use of an array of collections (like query results, cookie, session, ViewState, querystring and local variables). Along with the ability to use runtime and column values, OWS provides a set of functional syntax calls for a tasks like IF/THEN Conditions, Sub Queries and Interactive cues.


Binding a configuration created in R2i Open Web Studio to your website is easy. Each Wrapper is crafted to provide a settings inferface to select the desired configuration to bind to the placeholder on your page. Once the Configuration is selected, all future publications of that configuration will be immediatly available to your users.


Creating A DNN PA Module From An R2i OWS Configuration




Average (4 Ratings):
Want to help out?

New York, NY • Baltimore, MD • Vienna, VA • St. Louis, MO • Seattle, WA • info@openwebstudio.com

Bookmark & Share Bookmark and Share