with 1 comment(s)
Filed under: ,
Here is the configuration for Tag-along
with no comments
Filed under:

Artshow is being rewritten as a native iphone application with an optional icefaces or jetty backend server to support interactive chat features.

Planned GA, sometime very late August.

Anyone tracking mooncatventures from its first post knows that we started out trying to write a web based upnp browser. Stand to reason that didn't work out very well. Well we are restarting that project as a native iphone application. The application will connect to either an icefaces or possibly a jetty 6 application server.

It will be restricted to wi-fi and not 3g due to ATT and Apple restrictions.

 First release candidate is planned for late August early September., Beta's may be difficult with a native app so they will probably be very limited and closed.

Mooncatventures is developing its first native iphone application. We call it imageShare. Details are below. It is also the first native iphone application to use java/icefaces as a backend applicationServer.

 This is the place to follow its development and read about tbe successes and issues  we encounter.


ImageShare won't be ready for the Iphone 3gs launch. But if it was. Here is a usage Scenario of where we hope to ultimately go.


So you're in line at one of the apple retail stores, you arrived early. When you arrived there were 50 people in line its now grown to over 300.

You scan your emails, there's one from your close friend Terry she's in line at another store. She wants to share her Travel log of the event.

Your Iphone displays the invite and the message "Share your location with imageShare group Terry's group.

You instantly see Terry's travelogue an iphone/google style continuously building list of comments and images

. Wow look at that crowd, Terry is sending as fast as she can snap the pictures

. You start snapping your own pictures and clicking share a list shows you . all watchers.. You notice there are 100 of them now, and 3 sharing with you and Terry

You click the tabbar icon to bring up a list of watchers, the first item is "share with all", But you noticed John your Old Boyfriend who works for a rival news service is watching

You click / highlight individuals watchers excluding John and click "Share" immediately your images are pushed to all watchers you just authorized.

Most images you click the camera icon without commentary and they appear with your contact picture and public info, but on a few you tap the comment field and enter a comment.

"same here" looks like a good turnout

You switch views from the tabbar, and start looking at some of Terry's pictures, you see one you like in particular, but its to light for publication

You click edit and bring up the enhancement menu, now you can use the image editing capabilities of the server to improve the quality of the image.

You click print and a list of printers comes up, the list includes Apple Store printers located by Bonjour you probably can't access and your home office laser printer the server knows about. You click that item.

Then you click either print or "Queue" all images for this printer" now all images you select from the camera view or detail view will go to the selected printer if available.

You snap some more pictures and leave imageShare to write some emails.

As your composing an email an apple push notification from Mike pops up, ,, You have to see this, its like a zoo... the att verification network just crashed like last time. The notification gives you the option to return to imageShare.

You never logged off the session, and the server session will stay open for 4 hours so the app doesn't attempt to verify you against your Ldap sever in the home office, just takes you directly to your webView.

You click an image, switching to detail view. And click email, your taken to email with the image ready for commetary.



The above is just a typical way imageShare could be used.



Technology : java 1.5, spring security 2.0, Icefaces 1.81, Objective-c 2.0 iphone OS 3.0

· Security is spring webflow, profile stored in settings bundle may include picture

· Profile can be set up with app, show camera icon for users picture

· Single Signon all features, Signon particulars hidden.

· security - spring security, optional ldap .

· Shareing is on an individual not item level, ie Terry can choice to Share all pictures with her sharers BUT Terry cannot single out an individual picture to share, at least not version one.

· Chatview shows contact info, comments

· TavelLougueView shows sharer's name , comments and shared Photo , view also available directly from camera

· Detail shows, thumbnails, rollover shows expanded detail, and edit buttons

· Top status bar, small thumbnails, last 4 shared images, sharer tally, watchers tally

· print functionality can be disabled.

· Images are not stored in fileSystems but can be archieved from webfrontend.

· Any image not archieved is lost at web appserver shutdown. Image security can prevent archieving, all shared images are scaled to a web acceptable resolution, images queued for print are not scaled but are removed from queue after printing. Version 1, seems no way to recover lost prints , suggest save images to camera that are high priority.


Project risks:

· Team involved with other projects

· All team members relatively new at Objective C

· Securing phones for QA testing

· Have to watch bandwidth, to keep in apple approval guidelines

· If video is added at some point, may need to restrict to wifi, so cfnetwork checking may be desirable from day one.


Use case 1

We just posted the first beta of our new iphone list component. The component can be run in a browser but is really meant for the uiview of a native application. As always the source and a war file are available in our svn archive. Here are some pictures of the component. The planned ga is mid june.

We have a new tutorial covering the entire dashcode Integration we've come up with so far.

Example code will be posted soon. 

Well in a few weeks I'm going to submit my app, I think apple will be
hardpressed to consider it a webclipping app. I would say 50% of the
code is web dependent and the other 50 objective c. Without giving to
much away, because I'm also doing a position paper for possible
submission to Javaone. It uses a lot of phone features including
location and gps. It uses a backend server written in java to display
images from x number of upnp or bonjoir servers on your network.

It doesn't use iui or phoneGap, It uses a combination of a java
framework called icefaces tightly integrated with dashcode for the web
portion. It uses a server push technology. Clicking on the web tab
opens 1-x uiwebviews, each webview represents an independent session.
The backend uses the icefaces equivalent of comet-d to allow all the
session to "talk" to each other. That is changing a value in one
session directly affects all the other sessions.  Lets say you had a
geocaching application (which is something else I am working on) and
the iphone ui has 4 open scaleable windows to your web application.
Than each window could have a different user view of the map, say as a
scatterPlot, a hyperbolic tree and an actual map showing gelogical
data. Lets say you wanted to do gecaching, than using the location and
gps functions on the phone the web application could update each of
the 4 independent views realtime. Once more as your location changes
the application could update all users who are connected to that
application as well. At the same time they can open a chat window and
talk with each other.

Meantime the same data can be pushed to a static html location on the
phone. (yes this is possible) which can be checked perodically via
objective-c, this static info can accessed via the sdk and the respose used to issue a
NSURLRequest , thus updating both gps info and the selection pick
boxes on the screen.

By my count to try to do this with safari would require 4 browser
windows simultaneously pointing at the same location, but the app
needs to know the session ids for this to work something your not
going to be able to do with safari alone.

This is just a quick capsule of the functionality, If apple calls this
a web clipping app than they need to hire testers who actually know
something about networking applications.

Also most of the above is impossible to do with iui and maybe phonegap but I need to explore that one more.

We will use this page to track progress with the icefaces/dashcode projects .

 The deliverables from this project will be Tagalong and Artshow proof of concepts. and a template for dashcode that creates an icefaces project ready for import into eclipse.


  1. Changes from earlier versions
    1. Artshow
      1. Use of UPNP mediaservers
      2. bonjoir (dns-sd)
      3. Developed as a plugin for a native Objective-c application. (displayed in a uiWebView
      4. Native phone features , location , local saving of photos
    2.  Tagalong
      1. Use of UPNP mediaservers
      2. Bonjoir (dns-sd) both local and wideArea
      3. Developed as a plugin for native Objective-c application (displayed in a uiWebView
      4. Native location features
  2. Deployment
    1. Arshow
      1. WebApplication
      2. native via itunes app store.
    2. Tagalong
      1. Webapplication
      2. possible deployment as a native application. (may be outside app store guidelines for acceptance)
    3. Icefaces template
      1. SourceForge


Steps for building a dashcode / icefaces application (detail will be added)

  1.  Create the UI in dashCode
    • All UI elemements should be created
    • basic main.js files other code can be added later
  2. Create The icefaces components (see the tutorial elsewhere on this site)
  3. Add all the js files in the parts folder to the build script and run the script to create a compressed parts file
  4. Add the following elements under icesoft.faces.webapps
    1. Parts.js (compressed)
    2. main.js
    3. Any css files and images and license txt files
  5. Create the backing beans and any other classes in your ide as needed.
  6. code the xhtml file(s) and include as many listviewData components as needed.


Below is an annotated listing of (builds the ui for tagalong)

 package com.icesoft.faces.component.listviewdata;


import com.icesoft.faces.context.DOMContext;
import com.icesoft.faces.context.effects.JavascriptContext;
import com.icesoft.faces.renderkit.dom_html_basic.DomBasicRenderer;
import com.icesoft.faces.component.CSS_DEFAULT;
import com.icesoft.faces.renderkit.dom_html_basic.HTML;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.w3c.dom.DOMException;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;

public class IphoneHelperRenderer extends DomBasicRenderer {

 private static final String DIV_ID = "div0";

 private static final Log log = LogFactory
 private static final String SPACER_IMG = "/xmlhttp/css-iphone/xp/css-images/spacer.gif";

 private IphoneHelper iphoneHelper;
 private boolean firstElement;

 public void encodeEnd(FacesContext facesContext, UIComponent uiComponent) {

  DOMContext domContext = DOMContext.attachDOMContext(facesContext,

  try {
   // might be the issue line 36
   if (!domContext.isInitialized()) {

    Element root = (Element) domContext.getCursorParent();
    Element browserDiv = domContext.createElement(HTML.DIV_ELEM);
    browserDiv.setAttribute(HTML.ID_ATTR, "browser");

     * <div id="browser"> <div id="header"> <div id="toolBar"> <div
     * id="btnEnvironment"></div> <div id="btnLocations"></div> <div
     * id="btnServers"></div> </div> <div id="back_button"
     * class="back_button_template dashcode-header-backbutton"
     * ></div> </div>

    Element headerDiv = domContext.createElement(HTML.DIV_ELEM);
    headerDiv.setAttribute(HTML.ID_ATTR, "header");
    Element toolBarDiv = domContext.createElement(HTML.DIV_ELEM);
    toolBarDiv.setAttribute(HTML.ID_ATTR, "toolBar");
    Element btnEnvironmentDiv = domContext
    btnEnvironmentDiv.setAttribute(HTML.ID_ATTR, "btnEnvironment");
    Element btnLocationsDiv = domContext
    btnLocationsDiv.setAttribute(HTML.ID_ATTR, "btnLocations");
    Element btnServersDiv = domContext.createElement(HTML.DIV_ELEM);
    btnServersDiv.setAttribute(HTML.ID_ATTR, "btnServers");
    Element backButton = domContext.createElement(HTML.DIV_ELEM);
    backButton.setAttribute(HTML.ID_ATTR, "back_button");
      "back_button_template dashcode-header-backbutton");
    /* disable the backbutton for now */
    backButton.setAttribute(HTML.STYLE_ATTR, "display:none");

     * <div id="stackLayout"> <div id="listLevel0"> <ul id="list">
     * <li id="listRowTemplate" class="listRowTemplate_template"
     * style="border-top-width: 0px; "> <div id="serverTitle"
     * class="serverTitle_template"></div> <div id="arrow"
     * class="arrow_template"> </div> </li> </ul> </div>

    Element stackLayout = domContext.createElement(HTML.DIV_ELEM);
    stackLayout.setAttribute(HTML.ID_ATTR, "stackLayout");
    Element listLevel0 = domContext.createElement(HTML.DIV_ELEM);
    listLevel0.setAttribute(HTML.ID_ATTR, "listLevel0");
    Element imagePanelDiv = domContext.createElement(HTML.DIV_ELEM);
    Element listUL0 = domContext.createElement(HTML.UL_ELEM);
    listUL0.setAttribute(HTML.ID_ATTR, "list");
    Element li0 = domContext.createElement(HTML.LI_ELEM);
    li0.setAttribute(HTML.ID_ATTR, "listRowTemplate");
    li0.setAttribute(HTML.CLASS_ATTR, "listRowTemplate_template");
    li0.setAttribute(HTML.STYLE_ATTR, "border-top-width: 0px;");
    Element titleDiv0 = domContext.createElement(HTML.DIV_ELEM);
    titleDiv0.setAttribute(HTML.ID_ATTR, "serverTitle");
    titleDiv0.setAttribute(HTML.CLASS_ATTR, "serverTitle_template");
    Element arrowDiv0 = domContext.createElement(HTML.DIV_ELEM);
    arrowDiv0.setAttribute(HTML.ID_ATTR, "arrow");
    arrowDiv0.setAttribute(HTML.CLASS_ATTR, "arrow_template");

     * <div id="listLevel"> <ul id="list2"> <li
     * id="listRowTemplate2" class="listRowTemplate2_template"
     * style="border-top-width: 0px; "> <div id="rowTitle"
     * class="rowTitle_template"></div> <div id="arrow1"
     * class="arrow1_template"> </div> </li> </ul>

    Element listLevel = domContext.createElement(HTML.DIV_ELEM);
    listLevel.setAttribute(HTML.ID_ATTR, "listLevel");
    Element listUL = domContext.createElement(HTML.UL_ELEM);
    listUL.setAttribute(HTML.ID_ATTR, "list2");
    Element li = domContext.createElement(HTML.LI_ELEM);
    li.setAttribute(HTML.ID_ATTR, "listRowTemplate2");
    li.setAttribute(HTML.CLASS_ATTR, "listRowTemplate2_template");
    Element titleDiv = domContext.createElement(HTML.DIV_ELEM);
    titleDiv.setAttribute(HTML.ID_ATTR, "rowTitle");
    titleDiv.setAttribute(HTML.CLASS_ATTR, "rowTitle_template");
    Element arrowDiv = domContext.createElement(HTML.DIV_ELEM);
    arrowDiv.setAttribute(HTML.ID_ATTR, "arrow1");
    arrowDiv.setAttribute(HTML.CLASS_ATTR, "arrow1_template");

     * </div><div id="listLevel3"> <ul id="list1"> <li
     * id="listRowTemplate1" class="listRowTemplate1_template"> <div
     * id="locationTitle" class="locationTitle_template"></div> <div
     * id="arrow2" class="arrow2_template"> </div> </li> </ul>

    Element listLevel3 = domContext.createElement(HTML.DIV_ELEM);
    listLevel3.setAttribute(HTML.ID_ATTR, "listLevel3");
    Element listUL3 = domContext.createElement(HTML.UL_ELEM);
    listUL3.setAttribute(HTML.ID_ATTR, "list1");
    Element li3 = domContext.createElement(HTML.LI_ELEM);
    li3.setAttribute(HTML.ID_ATTR, "listRowTemplate1");
    li3.setAttribute(HTML.CLASS_ATTR, "listRowTemplate1_template");
    Element title3Div = domContext.createElement(HTML.DIV_ELEM);
    title3Div.setAttribute(HTML.ID_ATTR, "locationTitle");
    Element arrow3Div = domContext.createElement(HTML.DIV_ELEM);
    arrowDiv.setAttribute(HTML.ID_ATTR, "arrow2");
    arrowDiv.setAttribute(HTML.CLASS_ATTR, "arrow2_template");

     * </div><div id="detailLevel"> <div id="detailBox"> <div
     * id="topRectangleShape"> </div> <div id="detailTitle"></div>
     * <div id="detailLocation"></div> <div
     * id="detailDescription"></div> </div> </div> </div> </div>

    Element detailLevel = domContext.createElement(HTML.DIV_ELEM);
    detailLevel.setAttribute(HTML.ID_ATTR, "detailLevel");
    Element detailBox = domContext.createElement(HTML.DIV_ELEM);
    detailBox.setAttribute(HTML.ID_ATTR, "detailBox");
    Element topRectangle = domContext.createElement(HTML.DIV_ELEM);
    topRectangle.setAttribute(HTML.ID_ATTR, "topRectangleShape");
    Element detailTitle = domContext.createElement(HTML.DIV_ELEM);
    detailTitle.setAttribute(HTML.ID_ATTR, "detailTitle");
    Element detailLocation = domContext
    detailLocation.setAttribute(HTML.ID_ATTR, "detailLocation");
    Element detailDescription = domContext
    /* carryover from original design leave in for now */
    // detailDescription.setAttribute(HTML.ONCLICK_ATTR,
    // "animatePic(,0)");


   domContext.streamWrite(facesContext, uiComponent);
  } catch (DOMException e) {
   // TODO Auto-generated catch block

  } catch (IOException e) {
   // TODO Auto-generated catch block



merry Christmas all.

 We have a new iphone browser demo to show you.

 You can see some pictures and preview it here.


Source is now available in our svn repository.

This prototype differs from the previous prototype , the earlier prototype was a static webpage created with dashcode and integrated with some icefaces components.

This new demo uses two custom icefaces components to create and manage the page. IphoneHelper similar to the version shown in our tutorial is used to construct the general UI, and another component ListViewData , is a custom datatable renderer that renders and manages the data table The javascript is again developed using dashcode and compressed using the yui compressor.

This demo uses a simple dao that builds a list from a directory of images. We hope to have our media servers component sometimes soon.  

Also we take the opputunity to show off the Art Work of a young aspiring Art Major Gabrielle Larose.




Here is the code for the jspx page.


<f:view xmlns:f=""







<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="viewport"

content="width=device-width, minimum-scale=1.0, maximum-scale=1.6" />

<meta name="apple-mobile-web-app-capable" content="YES" />





<link href="./xmlhttp/css-iphone/xp/xp.css" rel="stylesheet"

type="text/css" />






<body onload="load();">


<ice:iphoneHelper />


<ice:listViewData id="data" var="art" value="#{artList.artShows}"

preserveDataModel="true" rows="10" style="width:70%">


<ice:column id="type">


<ice:outputText value="#{art.type}"></ice:outputText>



<ice:column id="name">


<ice:outputText value="#{}"></ice:outputText>


<ice:column id="location">


<ice:outputText value="#{art.location}"></ice:outputText>


<ice:column id="image">


<ice:outputText value="#{art.image}"></ice:outputText>















For the curious here is the dao that builds the table. Again the source for the demo will be on subversion soon.

ackage test;



import java.util.ArrayList;

import java.util.List;


import javax.faces.context.FacesContext;

import javax.servlet.ServletContext;


public class ArtShowDAO {




public ArtShowDAO() {




public List<Art> filldata() {

FacesContext facesContext = FacesContext.getCurrentInstance();

ServletContext servletContext = (ServletContext) facesContext.getExternalContext().getContext();

String path = servletContext.getRealPath(


List<Art> artShow =
new ArrayList<Art>();File dir = new File(path+"/images/100044");

String[] chld = dir.list();

if(chld == null){

System.out.println("Specified directory does not exist");

return null;



for(int i = 0; i < chld.length; i++){

String fileName = chld[ i ] ;

new Art("folder", chld[ i ], "GabZ Larose, Mich USA", "100044/"+chld[ i ]));



return artShow;










One of our favorite science fiction writers was Arthur C Clake. In the 1950's Clarke wrote a short story called the nine billion names of gods, Computers were quite new back then, as the story goes a well known computer company was approached by an obscue group of  monks and tasked with developing a computing machine which could list all the 9 billion names of the old testement God. It is believed when that task is completed the end of the world will be upon us.

FastForward, it is sometimes in the arbitrary future , the Apple/Microsoft consortium has been approached by an equally obscured monestary and presented with the task of using there new Quantum computer to produce a listing of all the names of gods in realtime. It is assumed the processing time for a computer using all 32 quantum states would accomplsh the task quicker than a common binary based computer. (ed note: If I actually new a way to build a quantum computer this effiecent my first use case would be more like Clean out Vegas, Alas no Quantum computer exists like this yet ).

 Environment for the usecase

  • The quantum machine is located in Cupitino , the operating enviroment is a new lisp like language developed by MIT for massive pararell systems with a slower java based bridge to pass the problems to the optical processing systems.
  • Tasks are passed to the quantum machines from a lab located on the same campus. java RMI is used to remotely pass the tasks quip processor.
  • On the same subnet are an artbitrary number of conference areas with the monks awaiting the outcomes. These guys are used to long time frames.


You have been tasked with putting together a small more conventual proof of Concept to satisfy the Request for Proposal.


Numerical Functional Test Case.

The test case is a recursive version of the classic Tower of Hanoi problem, Some tibitan monks are said to believe that when the solution is reached the world will end.The calculation even for a computer takes an artbitrarily long time period.

Wikipedia on Tower of Hanoi

As always the projects are available in our SVN, the projects you want are




The setup you choose for your POC environment is as follows:


  • Application Server and message Broker
  •  Server (in the Cloud)
    • We will use a console app at first and later move to a light weight ui using Spring MVC for simple result screens, the important thing is to keep this environment as minimal as possible , no icefaces, no jsf ..etc.
  • Lab Client
    • Again either a simple console or Spring MVC
  •  Arbitrary number of WorkStations


  • Developer Notes


  • Sever
    • As mentioned previously the server is a simple console or spring MVC application , with limited Ui for initiating the remote process and getting back a result.
    • Both the server address and the server output is published via bonjour.
  •  Lab Client
    •  Similar to the server, may be located on another app server or jvm.
  •  Workstations
  • Full spring jsf and icefaces.
  • The example is a simple jsf form based on the icefaces Auction sample, a more complete example is in the works.


  • A solution has been found to eliminate the jni requirement , this is forthcomming.
  • A solution for Linux/
  • Unix is being explored, currently example runs on windows or Mac Leporad.


ActiveMq 5+ has a jmdms jar, its looks like an older version than the most current and only supports the listeners not registration, its there apparently for zero-config discovery of brokers and is not well documented.

The two pure java solutions jmDms and Ahavi both have licenses that are flexible enough , so we could use them as a starting point to build on.

The techniques used here are similar to techniques to be included in the tagalong technology preview we are devleoping.

This use case was partially based on a really good article on lingo here.

 If you really want to keep intouch with the future of knowledged based systems then the place to look is here MIT Media Lab, especially look at the scratch and netlogo projects which are based on squeak smalltalk.







Format for blog posts

Based on comments received people generally do learn something from our posts but find the explanations long and boring. Just give us the examples with a brief explanation ! So with notes from Atlantis we are going to take a different approach.

  •  Present a totally ficticious use Case.
  •  Present an example to solve the usecase
  •  Present a storyboard workflow for running the example
  •  Review major parts of the code for the example.



Use Case One Java Rmi Bridge

Workflow StoryBoard for Use Case One














































More Posts