This is the first in a series of posts on the Sueetie Mobile Architecture, starting here with how the framework itself accommodates mobile devices. The series will continue by examining the mobile architecture of each of the applications in Sueetie: Gallery Server Pro, BlogEngine.NET, YetAnotherForum.NET and ScrewTurn Wiki.
The Going Mobile series is a repost of new documents found in the Sueetie Wiki, starting with Patterns and Origins: Sueetie Mobile Architecture. Any Sueetie Mobile Architecture documentation changes or additions will be made to those pages.
So let’s get into it! Here’s Going Mobile with the Sueetie Framework.
___________________
Dynamic Theming at the Heart of Sueetie Mobile
Sueetie Mobile displays one of two themes based on the user device: Sueetie Current Theme or Sueetie Current Mobile Theme. A MobileDevices SueetieConfiguration Core property is located in the Sueetie.config file. Using a RegEx match statement, if select strings located in the SueetieConfiguration.Core.MobileDevices are found in the browser User Agent description, the Sueetie Current Mobile Theme is used, along with its specific pages, master files and all themed objects.
Here is the current MobileDevices property.
MobileDevices="(android|iphone|ipod|nokia|sonyericsson|
blackberry|samsung|sec\-|windows ce|motorola|mot\-|up.b|midp\-)"
Because we are using dynamic theming based on the device we do not need to employ a http://mobile.sueetie.com strategy, with two different urls per page. All urls are shared between mobile and desktop devices. Single urls through dynamic theming streamlines SEO reporting, prevents any SEO penalties resulting from identical content on multiple URLs, and in general makes the site cleaner and more efficient.
Chiclet: the Default Sueetie Mobile Theme
Chiclet is the name of the Sueetie Mobile Theme. It is the default mobile theme (coming) in Sueetie 1.4 along with the default Lollipop desktop theme. Chiclet has the contents of any other Sueetie theme as you see here.
The Sueetie UrlRewrite HttpModule for Full Theme Independence
With the release of Sueetie 1.3 we had a rock solid global theming model in place with nearly complete independence of theming objects. More specifically, master pages, style sheets and user controls were unique for each theme in all Sueetie Applications. Yet there was still sharing of certain pages like the site home page, login page, aggregate blogs page and a few others. It was clear that to provide dual mobile and desktop support that we could no longer share pages either. So a new SueetieUrlRewrite HttpModule was created.
SueetieUrlRewrite reads the contents of the urls.config file which is cached. Here is a working urls.config file excerpt.
<?xml version="1.0"?>
<urls>
<!-- common -->
<!-- rewrittenurl denotes location typically in
/themes/CurrentTheme of physical page -->
<url name="home" path="/default.aspx"
rewrittenurl="/themes/{0}/pages/default.aspx" />
<url name="contact_us" path="/blog/contact.aspx" />
<url name="search_home" path="/search/default.aspx" />
<!-- members -->
<url name="members_login" path="/members/login.aspx"
rewrittenurl="/themes/{0}/pages/login.aspx" />
SueetieRewrite inspects the url path of the current request. If it matches any of the paths in urls.config and that url has a rewrittenurl property, a context.RewritePath() loads the rewrittenurl page. The pages in the original path locations for those urls are treated as IIS placemarkers with little more than a note on where to find that file's actual location.
Here is a screenshot of the new /theme/THEME/pages folder and some of the site pages which are no longer shared. Keep in mind that because SueetieRewrite is used globally across a Sueetie Community, we'll be seeing it used in other applications as well. In other words, both the path and rewrittenurl can exist anywhere needed to break-out shared files to their specific theme's /pages location.
All pages with the exception of the root default.aspx page share codebehind in the Sueetie WebApplication CodeFiles area, though you can of course create your own codebehind files.
Sueetie Mobile Architecture: Origins
Sueetie Mobile Architecture was based on that employed in BlogEngine.NET. Rather than duplicate that content here, please see Going Mobile with BlogEngine.NET.