If you’ve done the first part of tutorial then you can carry on from where you left off.  If you haven’t and you want to skip the first part you can carry on by installing this aar file on your Altio server.

Because the images from Flickr are not stored locally on the Altio server we need to write a simple HTTP service function to load images from Flickr.  To do this open up the Application Manager for our Flickr app and create a new service function by clicking on the “HTTP” service function button in the main menu bar.
Set the “Service name” to “IMAGE_FROM_URL” and the “URL” field in the Request tab to “${client.IMG}”.  This is the name of the parameter that the Image  control will pass to the service function when it tries to load an image. 

Now click on the Response tab and select “IMG” from the “Document Type” select control.  This tells Altio the service function will return image data.  To test the service function click on the Test tab and enter “http://www.altio.com/images/logo.gif” as a test value for client.IMG.  When you click on the test button now you should see a whole load of data in the Body field of the test window.  We now have a service function that can load an image from any given URL.  Hit the save button and close the Application Manager and go back to the designer for the “flickrSearch” view file.

Select the image control in the Layout Panel and give it the following properties:

With the Data source property we’re telling the Image control to use the panel’s data element (“photo”) just like we did with the label in the first tutorial.  The Data field, when using the service function we just wrote, should resolve to a url.  We’re just putting a test value in for now.  The Image effect is just centering the image in the middle of the control and the Image server command is set to the service function we just created.  We set the Border Width to 0 to get rid of the border around the image control.
Run the app and type in a search term.  You should get a bunch of Altio logos instead of photos from Flickr.  Lets fix that next.

Set the data field property on the image to the following

Here we are constructing the url to a small version of each Flickr image.  We do this by joining the various attributes in our data together to create a sensible Flickr photo url.  You can find out more about how to do this here.

Now when you run the application and search you should get a set of thumbnails for the search term you typed.

One last thing to do is to allow the users to navigate to the corresponding image on Flickr.  Let’s set the cursor of the image control to “HAND” so that the user knows they can click the image:

Now click on the Events tab in the Properties window and select the “Click” item from the list of triggers.  Find the “Show URL” item in the Add Action list below and double click it to add a new action under the Click trigger.  This action will be called whenever the user clicks an image.

Select the Parameters tab next to the Add Action tab and enter the following values.

This action constructs a URL to the clicked photo’s Flickr page and opens that page in a new tab.

Save and run the app again and try searching and then clicking on some of the photos.  For some browsers the photo may open in a new tab in a different browser window.  This won’t occur when the app is deployed to a regular web page though.  You also need to make sure that pop ups aren’t being blocked.
Here is the final application:

If you have any trouble completing the tutorial you can leave a comment here, get help on the forums or you can find us on Twitter.

The following application will get you started, it has a HTTP service function set up to load data from Flickr describing a bunch of photos for a given search term. It also has a view with a search field and a button that calls that service function. It doesn’t display any images or data yet. That is what we’ll be doing in this tutorial.

You can get the application here.

To install an Altio archive file place it in the deploy directory of your Altio installation : <Altio_Install>/WEB-INF/classes/deploy.

For example:

/home/tomm/AltioInstalls/AltioLiveStudio5.2Enterprise/tomcat/webapps/altio52/WEB-INF/classes/deploy

or

C:\Program Files\AltioLiveStudio5.2Enterprise\tomcat\webapps\altio52\WEB-INF\classes\deploy

To begin open the view file named “flickrSearch.xml” in the designer by right clicking it from Studio and selecting “Designer”. Open the window named window “WINDOW” by double clicking it in the tree view. It might come up over your View Explorer window because it’s X Y co-ordinates are set to 0 but you can drag it away and designer will remember where you put it.

Run the application with the play button at the top of the designer and type a search term into the text box and hit the search button. Nothing will happen yet because we haven’t built the image controls but data will be loaded. You can see the debug data of the application by hitting CTRL-SHIFT-D which will open the Data window. In there somewhere you should see some data like this:

<rsp …>

    <photos page=”1″ pages=”11395″ … >

          <photo id=”3247648527″ … />

          <photo id=”3248474018″ …/>

…

          <photo id=”3248457036″ … />

     </photos>

</rsp>

This is the data returned by the Flickr search service function.

Close the data window and hit the stop button. Add a Layout Panel control to the window by clicking on the ControlX panel in the Control Palette and dragging from the Layout Panel onto the window.

To position the control where we want it, underneath the search field and button, open the properties window and set the following properties on the control.

The Layout Panel is a bit like the Tab Control, it contains child panels that multiple controls can be added to. Whilst the Tab control places it’s panels on top of each other the Layout Panel places them next to each other flowing across the window. The child panels you get by default in the Layout Panel are the two boxes that you can see inside the control. We only need one panel so delete one of them by right-clicking and selecting “Delete Child Panel”.

There are lots of images to display in the search results so you may ask why we are only using one panel. We’re going to make that panel data driven. That means a copy of that panel will be displayed for every instance of the “photo” element in our data. We can achieve this by selecting the remaining panel by clicking on it and adding the following property:

This tells the Layout Panel to create a new one of these panels for every instance of the “photo” data element in our data set. If you haven’t already, now would be a good time to save your progress. You can test the application so far by running it and typing a sensible search term. You should see one of those boxes (the panels) for each search result.

Now let’s add some controls. Drag an Image control and a label control onto the window and position the image control above the label control like this:

This should be possible to achieve with the mouse as the panel will resize to accommodate the controls as you move them and resize them but you can set their positions more exactly using the properties window like so:

Image control properties:

Label control properties:

Let’s also set a few properties to make the label wrap and display a smaller font:

And let’s get rid of the black border on the layout panel:

Now lets connect our label up to the data for the search results. In the “photo” element there is a title attribute which we’ll display in the label:

We clear the caption because when a label has a data source it displays a caption above it. We don’t want that any more. The Data source property is set to reference “panelelement”. That’s a place holder for the data element that the panel has been created to represent, one of the “photo” data elements. @title is the attribute we want to display for the element.

When you run the app now and perform a search you should get a panel full of results, no photos yet but the labels are now displaying title data.  Here’s an example:

If you have any trouble completing the tutorial you can leave a comment here, get help on the forums or you can find us on Twitter.

In part two we’ll look at how we’ll go about loading the images from Flickr.

List Properties

The name of the columns in the list control need to match the parameter names expected by the service request, otherwise the service request will be called incorrectly.

Service Request Event Parameters

Configure the service request to accept repeated calls

Data passed from the client is referenced using normal parameter syntax e.g. ${client.addionalData}. The columns in rows from the list used for multiple row processing are referenced using their column name e.g ${client.COL1} assuming there is a column name COL1 in the list.

The darker lines on the top and the left indicate the top and the left edge of the control(s) you are dragging to make it easier to line up with other items on the window. If the lines are difficult to see because of the colour scheme of your application you can try changing the “Guide color” and “Guide opacity (%)” properties. Changing the “Snap Granularity” will change the gap between the grid lines. If you don’t want to “snap” at all enter 0 into this field or change “Snap mode” to “NONE” to gain complete per-pixel control over where the dragged control ends up.

Another way of lining up controls on a window is to use a different “Snap mode”. Entering “CONTROLS” for this property will cause guidelines to appear whenever a control that is being resized or dragged has an edge that lines up with the edge of another control on the window and the dragged control will snap to that line.
 
You can use these modes to achieve precise and aesthetically pleasing UI Layouts and forms that are well spaced with good flow. Try using the grid mode with a very high granularity to achieve an effective grid based system in your Altio application.

Altio will be releasing a new Grid container control in Altio 5.3 to give even more control over grid based layouts.

Step one is to install an application featuring an Altio list configured to display checkboxes.  Download this application package for an example:

Checkbox Tutorial

To install an Altio archive file place it in the deploy directory of your Altio installation : <Altio_Install>/WEB-INF/classes/deploy.

For example:

/home/tomm/AltioInstalls/AltioLiveStudio5.2Enterprise/tomcat/webapps/altio52/WEB-INF/classes/deploy

or

C:\Program Files\AltioLiveStudio5.2Enterprise\tomcat\webapps\altio52\WEB-INF\classes\deploy

This simple application allows you to “design” a title header for  a website or application by choosing which images to include in the background of the header.  It may be contrived and somewhat limited but it will still serve as a good example as you achieve all of this by clicking check boxes in a list.

So let’s start by adding a header checkbox to the list in the application.  Open the tutorial’s view file in designer and select the VISIBLE column in the list (expand Windows->WINDOW->LIST in the View Explorer and click on VISIBLE).  In the Properties window expand the Appearance group and change the “Show Checkbox in Header” property to “Y”.

If you save your app and run it you should find that a check box has appeared in the header of the checkbox column.  If you click on it to alter it’s value though, you’ll also find that is has no effect.  This is because Altio has no default behaviour for this checkbox; we need to add some application logic to edit the underlying data ourselves.

The list control has a “Header Check Box Toggled” event fired whenever the user clicks on one.  Click on the list and then select the “Events” tab in the Properties window.  We’ll add a “Set Attribute Value” action to change the value of the list’s data according to the user’s setting in the header checkbox.  Click on the “Header CheckBox Toggled” event in the tree view and find the “Set attribute value” action in the list below.  Double click it to add the action to the event trigger.

Click on the parameters tab and enter the following parameters.  You can copy and paste them or build them up using the data builder.

• Element : /IMAGE
• Attribute : @VISIBLE
• Value : ${LIST/VISIBLE.headerchecked}

This means for every IMAGE element, set it’s VISIBLE parameter to whatever the user has set the value of the header checkbox to.  And because the action has been placed under the “Header Checkbox Toggled” event it will run every time the user clicks the checkbox.  Save the application and run it again and you should find the checkbox now works as you’d expect.

JNLP files are used by Java WebStart applications to describe the deployment requirements of an application, and converting an Applet to use a JNLP file is usually straightforward. With JNLP files Applets can now use the following Java 6 Update 10 features:

• Specifying an applet gets its own JVM instances, rather than sharing the same one with all other applets in the browser.
• Specifying the heap size (available memory) that the applet can use. Java defaults to 64MB, which can be very limiting for large applets or when multiple applets are running.
• Specifying a particular version of Java to be used to run the applet. Previously the applet ran with whatever the default Java version the user had installed.
• Take advantage of new features, such as being able to drag an applet out of the browser onto the desktop.
• Allow unsigned applets to directly communicate with domains other than the one they were downloaded from, as long as the domain allows it.

You can see full details of the features in Java 6 Update 10 here https://jdk6.dev.java.net/plugin2/

As you can see, Update 10 addresses many of the problems that people can experience when deploying applets, and adds some new features that bring applets up to date with other web technologies. One of the most useful features for enterprise applications written in Altio is the ability to deploy with more than the default memory size - previously each user had to manually edit their Java settings in the Control Panel, and now developers can specify different settings for different applications. Each AltioLive applet launched with a non-standard heap size will automatically run in its own JVM, so it also isolates an AltioLive application from any other applets in the users browser.

These new features are currently being incorporates into the latest AltioLive development code, but if you want to start using them as soon as Java 6 Update 10 is available then you can do so quite easily. All that you need to do is download 2 files:

• altioClient.js - This is an update to the standard Altio client JavaScript file used to construct applet parameters dynamically.
• getJNLP.jsp - This is a new file that dynamically generates a JNLP file for an AltioLive application. We need this, rather than a static JNLP file, because of the number of dynamic parameters used when configuring the AltioLive applet to launch an application.

These file can be downloaded from here: http://developers.altio.com/developer/downloads/altio-Java6Update10files.zip

Simply copy these two files into your Altio context (e.g. <altio>/tomcat/webapps/altio52). Once that is done, to enable the new features for an individual AltioLive application you need to add the line:

var useJNLP = true;

into the htmltemplate.txt file for that application. Once that is set then the altioClient.js will pick up that setting and use the new plugin features.

These files are very early technology previews, for testing new features, and are not intended to be used on production systems. In particular, getJNLP.jsp does not provide support for all of the dynamic features that are currently supported - so custom control JAR files need to be added manually to that file in order for it to load them. However the basics are there, and if all that you want is to try out AltioLive applications in separate JVMs with extra memory then they will do that.

We will post more information and updates as we progress with the incorporation of Update 10 features into the core AltioLive product.

The simplest thing I have found is to:

1. Install Altio.
2. Before staring Altio Presentation Server change the security settings.
   
   1. Open Windows explorer.
   2. Go to the directory where Altio is installed e.g. Program Files.
   3. Select the Altio folder e.g. AltioStudioEnterprise5.2.
   4. Right click on the folder and select properties.
   5. Select the security tabclick on “Edit” button for “To change permissions, click…..”
   6. Select the “Users….” group.
   7. Select “Full Control” from the “Permissions for Users” list.
   8. Click OK.
3. Now start Altio - everything should run as expected.

The reason you need to change security settings is that Windows provides restricted user access to the “Program Files” directory, so when Tomcat tries to unpack the WAR file it can’t.

It seems like a long build up to the release of JavaFX and the new browser plugin and I can’t wait for it to happen. As Jim mentions in his summary of day 3 I think there will now be a concern amongst AJAX followers that the technology is going to look dated. At the moment AJAX front ends that want to be really rich seem to rely too much upon Flash, look at Google Analytics - all the charts are Flash.

Even today AltioLive’s Graph control that will be released in Altio 5.2 shows the power of Applet based technologies over JavaScript. There are several JavaScript based graph widgets but they tend to be slow when handling lots of data.

I strongly believe that Java 6 has again made Java Applets an option for consumer Rich Web Applications and can come out from hiding in the enterprise solution area, and JavaFX further strengthens the position of Java Applets as a solution.

I’m sure that if you talk to the Java SE team they will strongly disagree with the idea of JavaFX being “stillborn”. Healthy competition between SilverLight, Flash, Applets and AJAX is required to provide end users with the best user experience possible.

If you want to see a real FilthyRich Web Application look at the AltioLive IDE, as Jim put’s it we “Eat our own dog food” I don’t believe a product can trully say it is good unless you can create an IDE using the underlying framework. I like Eclipse but there must be something wrong if AJAX and Flash don’t have IDE’s using their own technology. NOTE: there are some AJAX IDE’s out there.

http://news.zdnet.com/2422-13568_22-200560.html