FatPhone v0.5 supporting a native iPhone App

Just in case if you are wondering if FatPhone is dead... no, it is not. It is alive and kicking. In fact, I just released FatPhone 0.5 with  support for a native iPhone app...

Why are you doing this?

Basically every enquiry I received about FatPhone since I released it, ended with questions like "where is the native app?" or "can I release it on the App Store?"

Well, FatPhone was not meant initially to be a native iPhone app, just an iPhone web site. After all, FatWire Content Server is a CMS!

However, the trend is towards native apps. Actually I  already implemented an iPhone app that is using Fatwire Content Server as a backend.

So since I have the expertise, I made the decision to develop a native iphone application for Fatwire complementing FatPhone, and release it as an open source project as well.

In short, this is an announce that I am going to develop and release a native iphone application, that I will call  FatPhoneApp
FatPhone will became the backend  in FatWire for the upcoming FatPhoneApp.

Please note I have released so far only the FatPhone backend and a prototype iPhone app. Carry on reading, to know exactly what is available.

Evolving FatPhone

After considering my options, I decided that while using WEM could be a good option, I wanted to develop something available also for older version  of FatWire, and possibly reuse the work done so far with  FatPhone.

Since I need backend support on FatWire for the iPhone app, I decided to evolve the existing FatPhone to be such a backend. It turned out to be the more logical way to create the iPhone app.

So basically, to create content for the (upcoming) FatPhoneApp you still have to install and use FatPhone to create the content for the iPhone app.  The iPhone rendering abilities of FatPhone are good to get an easy preview. Also the site will be still available in HTML format, not only as an iPhone app.
The content you create in FatPhone will be exported in JSON format (and in HTML format as well), that the app will read and use to render.

This is what I is already implemented in FatPhone v0.5, released today on GitHub.

A tour of FatPhone 0.5

After installation, you can still access for example to the Home Page using the site entry http://locahost:8080/cs/ContentServer?pagename=FatPhone and this is what you will get:

However, it is now available also the corresponding http://locahost:8080/cs/ContentServer?pagename=FatPhoneJs that will output the same page in Json format.

If you try to call this url with a browser this is what you will see (using a pretty printer for son, actually):

Navigating the normal FatPhone site you can see other pages and reach "text" pages, like this:

The corresponding Json for this page is instead:

What about the iPhone app?

Ok, you may say, "so far you implemented the backend code for the iPhone app. But what have you done of the actual app? I may need it..."

Well, actually I am working on it, but it is not yet ready. What I have done so far is the proof of concept code.  Since it is not the complete iPhone app I need but only a demo, I released it in my "catch all" project FatGoodies. It is here.

If you download the code, build and launch it (while FatPhone is running as well) you will see the following in the iPhone simulator:

Basically,  this  iPhone app so far is able to connect to FatPhone, parse the specific Json generated by FatPhone 0.5 and render it in a table. It cannot yet navigate, so clicking on a row won't do anything.

Plans for FatPhoneApp

Once done, I will release the app in the upcoming project sciabarra/FatPhoneApp on GitHub. Also I will tag FatPhoneApp  with the corresponding version number of FatPhone that generate the correct json. So you will know that FatPhoneApp v0.5 requires FatPhone v0.5, version v0.6 of the app requires version 0.6 of the backed and so on.

Now I am busy coding the FatPhoneApp. My plan for the release is to match with the current FatPhone feature set, then move the project forwad adding features both to FatPhone and FatPhoneApp.

Stay tuned.

FatPhone 0.2 released

I am pleased to announce the release of version 0.2 of FatPhone. This version is the first to be actually usable to build  a real, although pretty  simple, iPhone website.

Here is the list of the new features.

Flex Family content

Flex content is most significant improvement of this release. In 0.1 there were only pages and templates, and the code was good for building the siteplan, but it was not supporting any real content. In this release there is finally the content, in the form of a flex asset with a flex definition.

To provide flex content however I had to introduce the whole Flex Family concept and, more important, to make them installable with the installer. This turned out to be a lot of work.  I think the work with the installer is now mostly done, so I can focus adding more features to the site.

Installation prerequisites are now a little bit more complex, since you need to create a Flex Family before installing FatPhone. Once you have done it, the creation of the required Attribute Editors, Attributes and Content Definitions is performed by the installer.

Installing FatPhone is not hard but at some point I may create a video to clarify the procedure.

Basically you have to create a FlexFamily as follows:

Text Content

I introduced a content asset (type fp_C, subtype fpMultiText) . It is  rendered as follows:

Those assets can be added as children of pages:

A page is now rendered combining the siteplan children (Pages) and the direct children of a page (fp_C), as follows:

Redirect to the Home Page

Another small feature  is that now you can reach the home page simply accessing the file "/fp/index.html" (or just "/fp/" if you have configured index.html as index pages).. This page will redirect to site catalog entry that will in turn locate the home page by name and redirect to the  page named fpHome.

Fixed Bugs and Future Directions

I fixed a few bugs. The most annoying was one preventing the install to work if you don't have firebug active (!), and this was reported by Anuhya of Sayam (thank you).

Next releases I will implement the navigation and extend the number of content types available, to render the full set of the capabilities of iWebKit. Stay tuned!

Released FatPhone 0.1.

Finally  FatPhone v0.1, a real release (not just an experiment), is ready. Please, let me  call it  alpha release, although it is in the "works for me" status... You can grab the code on github.com/sciabarra/fatphone.

It took me almost 2 weeks of spare time coding (and not only spare time,  since this effort consumed a good amount of  actually billable time...) but the first real release of FatPhone is here!

It is amazing how much work it takes  building something good for public release starting from something that is perfectly fine for internal use.

The installer

The biggest challenge has been actually to code an easy to use installer. I have the FatPhone code since a while, but how can I give it away in a form that can be installed, easily,  in Content Server? The common way of releasing code is using Catalog Mover dumps, but this solution is far from satisfactory.

I was worried that releasing Catalog Mover is going to export proprietary FatWire informations. So I dropped the idea.

After some attempts, I settled for coding a standalone installer. After considering Java,  i decided to code  it  in Javascript instead, using jQuery. Javascript has become amazingly powerful and flexible, these days.

The installer  creates elements in FatWire using the external CatalogMover interface; it creates assets using the XmlPost interface. Because I am only using documented interoperability interfaces (I didn't reverse engineer anything to do so), I should be  safe on the legal side (otherwise, tons of end user browsing Fatwire website are violating some license...).

It was an intense hacking experience (more complex that the whole FatPhone website itself) but at the end I built it and I am pretty happy of the work done.

Installing FatPhone

Using the installer,  setup of FatPhone is very easy, and works with different version of ContentServer. I started using JSK 7.0.2 then I deployed in JSK 7.5.2

Before you start, create a new site (following these directions), and call it FatPhone. Then you have to grab the source code from github and copy the fp directory in the root of the web server sitting in front of your FatWire installation.

Note: don't load the installer in the browser from localhost: it does not work. You have to deliver the fp folder in the same web server as the ContentServer: the JavaScript will then connect to the CatalogManager running in the same server.

The fp folder must be accessible as /fp , so  you can call the installer as http://yoursite/fp/install.html. The /fp directory is hardcoded, for now. This may change in the future.

When you call the installer, you will see the following screen:

You have to type  credentials of an user that can create Elements and  Assets in the site FatPhone. Click on Login, and if everything is ok  you will see the message:

Username/password validated.

Now you can install the Elements. You will see this screen:

Click on "All" to select all the element then click on "Install Elements". If everything is ok (and it should) this is the result.

You can then do the same for the assets and this is the final expected result:

Note that the installer is incremental and supports installation and updating of single Elements and Assets. I am basically using it as a replacement for Content Server Explorer!  I will blog more on this installer in the near future, but for now, let's come back to FatPhone.

The FatPhone site

After the installation, there are some new templates, and a number of pages. Pages are created more as a sample, the real code is in the templates. But the Pages are already available to experiment with. If you search for Pages, this is the list of the created Pages:

After the creation, Pages are all unplaced. You can (and should) arrange them in a hierarchy in the SitePlan as you like.

Note that is the SitePlan that configure the site navigation, so you have to create the site plan.

Here is an example.

The result is now a real iPhone web site that can be navigated. Pages are rendered as full web pages, using the page name as the title, and the page description to list them in a list. Children of a page in the site plan are shown as children of a page in the iPhone site. I used the filename field to specify to the icon for each page in a link. See a couple of screenshot below:

Actually, you should try into an iPhone simulator, because Page transitions have the typical scroll effect of iPhone application. This feature comes directly from the underlying iWebKit toolkit.

What is next?

So far I have implemented:

• the installer,
• the layout using iWebKit,
• the SitePlan hierarchy
• navigation between pages.

The project is far from complete, and I have still a lot of already written code I have to migrate to the new architecture.

I spent actually 90% of my time (and 99% of my energy) building the installer, that is an achievement I am proud of.

The installer is very useful also standalone, not just for FatPhone but also for your development project. It allows to build and update a Fatwire Site from code and data stored on the filesyste, using only eclipse (without any  plugin!) and a browser. It can upload both Elements and Assets (only basic asset, for now), and I suspect it may be even more useful to the Fatwire Community than the FatPhone site itself. I am releasing it as open source as well as part of FatPhone, for now, but I wait for reactions from the community to see if it is worth to be packaged and improved.

Comments welcome.

FatPhone: create a new site

Let's start our FatPhone  project - an iPhone site in FatWire.

In this tutorial you will learn how to create a new site in FatWire Content Server 7, using the Advanced interface.

Creating a site is easy, but is is not a single step process. So here I am going to explain all  the required steps.

New Site

You need to get access to the administrative tab, obviously called  Admin . By default, after the installation you can access it using the fwadmin user.

If you can see the Admin tab, selecting it you can also see the node Sites. Now,  expanding the node will reveal the "magic" Add new link.

Click on it, and then the Add new site form will be displayed to the right:

Specifify name and description, click Add Site and you have a new site. But you are not done yet...

Enable Assets

Exapanding the node of the new site you will see more options.

The necessary next step is now to enable the assets you need.

Expand the Asset Types node:

Clicking on Enable you will see a list of all the availabe assets in the system.

The absolute minimum are Pages and Templates. So select them:

Create Menu Items

After enabling them, the system will ask you how do you want to find and create Pages and Templates.

The standard way is to have an entry in the menu New and another entry in the menu Find. You can create them later, and in certain case it is appropriate NOT to have the default entries ,but instead create some more specific entries.

But for now let's accept the default:

Done?

You have  now a new site, with a few assets enabled and you can work on it. It is enough to start to work on FatPhone.

Anyway you will  have to create a new user and enable a role for it, either fwadmin or (better) another specific user (fpadmin).

In the next tutorial I will show how to create such an user. Stay tuned.

FatPhone v0.0.1 ALPHA released

In current code there is just the layout!

We have already written the code for an iPhone website, but releasing it on the public is a different matter.

The code needs to be updated, cleaned up and documented. So we are basically rebuilding the old web site, collecting the code documenting and releasing it, step by step.

The first code drop is now on GitHub, here. IT IS ONLY THE LAYOUT! Not editable yet.

How do I deploy it?

To deploy it you have to follow the provided directions, admittedly not very detailed. It will improve...

You have to:

• manually create the site,
• deploy the css and javascript in your webserver,
• download and install an eclipse plugin (and eclipse, if you don't have it, too!).

After this, you can:

• checkout the code inside Eclipse
• then use Eclipse to publish it.

Definitely, not a task for the faint of hearth.

Ok, but what I will get?

Not too much, yet. Basically, a page like this:

Don't be fooled! It is just static html. There is only the layout, for now, and I put some sample html in it just to see the rendering.

Cannot be edited with FatWire, yet.

But it will became a standalone editabile web site in the foreseeable future. Stay tuned.

FatPhone: a tour

FatPhone, our open source FatWire project,  is an implementation for FatWire Content Server of the iWebKit open source template.

The code is already written, but will be made public in a series of blog posts. In addition I plan to drop the code into a GitHub content repository. I have still to decide the best way to release the code, any suggestion is welcome.

Once implemented FatPhone in your ContentServer, you will be able to access the site with an iPhone and you will see something like this:

SitePlan

The website is not, of course, just static html: instead it can be fully managed using ContentServer backoffice. Each web page in the site is built using the SitePlan.

For example the siteplan corresponding to the home page is the following:

Basically, each page is rendered using its children as elements of the page.

There are special decorations for each page (implemented as associated elements) to accomodate for titles and separators.

Pages in my design are basically containers for list of elements.

Page Subtypes

Since there are different kind of lists in an iPhone user interface, we have different subtypes for Page. For each subtype we have a different rendering.

For example, the first screenshot shows the rendering of a Page with subtype HomePage. The followingn screenshot is the rendering of a Page with subtype Products:

And here is another snapshot, showing a Page of subtype Music:

Mobile FlexFamily

Of course, not everything is a list of elements, so we do not have only Page rendered as a list. There is some real content somewhere!

We defined a FlexFamily to store the "real content". Here is a snapshot of such a FlexFamily:

Using that family , we can add for example a text page like this:

What is next?

Snapshots are taken from the current version of FatPhone. I am actually writing a new version, cleaning up all the code, solving a few design problems and cleaning up everything for release.

I am still unsure how to release the code, and since there are not so many Fatwire Open Source projects (except FatClipse, I am aware of none). I am experimenting with a few possibilities.

I hope now you have a good feeling of what FatPhone is.

All the implementation details and the code will be made public in the next few weeks through this blog. Stay tuned.

Introducing FatPhone

Starting today, I will publish a series of articles describing how to implement an iPhone mobile site developed with Fatwire.

The project is called "FatPhone". I do not call it FatIphone because the web site can be accessed also by Android devices and other recent phones with a decent browser.

Why?

I built an iPhone demo site for a customer. The customer was happy of the demo but asked me instead to implement a mobile application, interacting with Fatwire through restful web services.

While I think it was a good decision for the specific needs of the project (some requirements was not easily satisfied by a web site), there are plenty of cases when a mobile web site is still a perfectly valid choice.

So I have decided to clean up the code, release to the public  as FatPhone and  write some blog posts about it.

The code of the site is going to be open source, released under the GPL v3.

How?

FatPhone will be based on the wonderful open source css/html framework iWebKit.

Basically FatPhone  is a port of iWebKit to Fatwire.

The project requires the following steps:

• define a new Flex Family Mobile to store the specific mobile content
• define a SitePlan and Page subtypes to create the "infrastructure" of the mobile site
• code all the templates, specifically:
  • the typeless Layout
  • the typed template for the different Page subtypes
  • the typed templates for the newly defined   Family

If you are interested in this project, stay tuned.