Today I have a couple of screenshots that I would like to show. My intention was to write up just a quick post about a new UI feature that is minor but often requested. Just to show you that we really do value our user feedback, the screenshot to the right shows off two things. First of all, it shows a still early capture of the new blog post editor. We're not done with it yet, but hopefully you will agree that it's looking good. Secondly, two more screenshots below show how the toolbars in Raven can be easily customized. Many of our users have complained that our toolbars are too small, particularly in the editor. To address this, we have made it so the user can easily change the size of the toolbars. To do this, simply right-click on the toolbar and choose from the handy context menu. Note that this also reinforces something I talked about in an earlier post: simplifying the UI by relying more on context. In this case, rather than clutter the UI with a variety of menu items in the main menu or user preferences, the user's toolbar size preference is decided via a context menu on the toolbar itself.

Screenshot of the toolbar menu:

How the toolbar looks after choosing "32x32" and "Show Text":

Technorati : raven, toolbar, zoundry
Del.icio.us : raven, toolbar, zoundry
Ice Rocket : raven, toolbar, zoundry
Flickr : raven, toolbar, zoundry
Zooomr : raven, toolbar, zoundry
Buzznet : raven, toolbar, zoundry
Riya : raven, toolbar, zoundry
43 Things : raven, toolbar, zoundry

Labels: editor, raven, toolbar, zoundry

One of the limitations in the Blog Writer is that only one Media Repository can be configured. The application does allow the user to associated a new Account with either the configured Media Repository or the built-in uploading capabilities of the given Account (if supported by the blog platform). However, it was always our intention to provide a way to configure multiple instance of media repositories (of different types) and allow the user to associate different media repositories with different blogs and/or blog accounts. In Zoundry Raven, we have done exactly that, and it is the topic of today's post.

Zoundry Raven allows the user to create and manage multiple media repositories (media stores) using the Media Store Manager. This manager is simply a dialog that allows the user to add, edit, and remove media stores. There will be a variety of types of media stores, such as FTP, Flickr, ImageShack, etc... (more on that later) Once a media store is created, it can be associated with a Blog Account or a Blog. A media store can be associated with a Blog Account during creation of a Blog Account, or later when editing the account's settings. In addition, for more granular control, a media store can be associated with an individual Blog. This way, different blogs, even if they are within the same Account, can use different media stores.

When creating a new media store, the New Media Store Wizard is used. This wizard walks the user through the process of creating a new store. It first asks the user to choose a type of media store (and store name). After that, the wizard asks the user to fill in the information needed by the store, such as username/password. This information is type specific, so page two of the wizard will be different depending on the store type chosen. The media store type might be Custom FTP, or it might be a more specific value, such as Ripway FTP. The more specific types are simply there to pre-populate the necessary fields when creating the store. For instance, Ripway FTP and Custom FTP are the essentially the same, except that page two of the wizard will have some values already filled in, such as 'host' and 'url'.

Finally, I want to explain a little bit about the store types and where the application gets that list from. As I mentioned, we are using the extensibility features of Raven in order to make the media stores highly pluggable. Here's how it works. There are two extension points exposed by Raven that plugins can contribute to. The first is the 'zoundry.blogapp.mediastore.type' extension point. This extension point allows plugins to contribute new media store types to the application. Media store types would be things like FTP, WebDAV, Flickr, etc. For the most part, there would be a single media store type contributed for each protocol/API that might be used to upload images to a remote site. Here is an example of the FTP media store type that will ship with Raven.

      <zoundry-extension point="zoundry.blogapp.mediastore.type">
          <id>zoundry.blogapp.mediastore.type.ftp</id>
          <class>zoundry.blogapp.services.mediastore.providers.ftpprovider.ZFTPMediaStoreProvider</class>
          <extension-data>
              <media-store-type>
                  <icon>icons/types/ftp.png</icon>
                  <properties>
                   <property name="host">
                       <display-name>Host</display-name>
                       <tooltip>The FTP host. (Example: ftp.myftphost.com)</tooltip>
                       <validation-regexp>.+</validation-regexp>
                       <validation-error-message>A value for 'host' is  required.</validation-error-message>
                   </property>
                   <property name="port">
                       <display-name>Port</display-name>
                       <default-value>21</default-value>
                       <tooltip>The FTP Port (Example: 21)</tooltip>
                       <validation-regexp>\d+</validation-regexp>
                       <validation-error-message>A value for 'port' is required (and must be a number).</validation-error-message>
                   </property>
                   <property name="username">
                       <display-name>Username</display-name>
                          <tooltip>Your FTP username.</tooltip>
                       <validation-regexp>.+</validation-regexp>
                       <validation-error-message>A value for 'username' is required.</validation-error-message>
                   </property>
                   <property name="password">
                       <display-name>Password</display-name>
                          <tooltip>Your FTP password.</tooltip>
                       <type>password</type>
                   </property>
                   <property name="path">
                       <display-name>FTP Path</display-name>
                       <tooltip>Path on the remote FTP server. (Example: /mypix)</tooltip>
                       <default-value>/</default-value>
                   </property>
                   <property name="url">
                       <display-name>URL</display-name>
                       <tooltip>URL used to retrieve uploaded files. (Example: http://www.myftphost.com/myusername/mypix/)</tooltip>
                       <validation-regexp>(.+):.+</validation-regexp>
                       <validation-error-message>A valid 'url' is required.</validation-error-message>
                   </property>
                   <property name="passive">
                       <display-name>Use 'passive' FTP</display-name>
                       <tooltip>Active/Passive FTP mode. (If your settings do not work, try changing the value of 'passive')</tooltip>
                       <type>checkbox</type>
                       <default-value>false</default-value>
                   </property>
                  </properties>
                  <capabilities>
                   <capability enabled="true" id="zoundry.raven.capability.mediastore.supports-delete"/>
                   <capability enabled="true" id="zoundry.raven.capability.mediastore.supports-file-list"/>
                  </capabilities>
              </media-store-type>
          </extension-data>
      </zoundry-extension>

Now, media store types are never visible to the user. There is another extension point that is exposed by Raven that is called 'zoundry.blogapp.mediastore.site'. A media store "site" essentially represents a real upload site, such as Ripway or Flickr. Each site refers to a media store type, which it uses to do the actual upload. The site is really just meta data that refines the a store type, making it more specific to an actual real destination. Note that in some cases, there will be a one-to-one relationship between a media store type and a media site. This is generally only the case for sites with their own custom APIs, such as Flickr. In many other cases, such as FTP, there will be a one-to-many relationship between the store type and multiple sites. Here is a quick example of a media store site contribution (in this case, Ripway FTP).

      <zoundry-extension point="zoundry.blogapp.mediastore.site">
          <id>zoundry.blogapp.mediastore.site.ripway</id>
          <class/>
          <extension-data>
              <media-site>
               <media-store-type-id>zoundry.blogapp.mediastore.type.ftp</media-store-type-id>
               <display-name>Ripway FTP</display-name>
                  <icon>icons/sites/ripway.png</icon>
                  <properties>
                   <property name="host">
                    <default-value>ftphost.ripway.com</default-value>
                   </property>
                   <property name="url">
                    <default-value>http://h1.ripway.com/USERNAME/</default-value>
                   </property>
                      <property name="passive">
                          <default-value>true</default-value>
                          <hidden>true</hidden>
                      </property>
                  </properties>
              </media-site>
          </extension-data>
      </zoundry-extension>

The result of all of this complexity is that it is very easy to add new store types and new sites. In fact, third parties could very easily contribute new media store sites without doing any actual coding, as long as those third parties support an API that is already contributed (via a media store type). So if an image host wanted to show up in the list of choices in the New Media Store Wizard, and that image host supports FTP, then they could create a plugin that simply contributed a new media site to the application, much like the Ripway example above.

Technorati : media store, raven, zoundry
Del.icio.us : media store, raven, zoundry
Ice Rocket : media store, raven, zoundry
Flickr : media store, raven, zoundry
Zooomr : media store, raven, zoundry
Buzznet : media store, raven, zoundry
Riya : media store, raven, zoundry
43 Things : media store, raven, zoundry

Labels: extensions, media store, raven, zoundry