At first, we used this combination of technologies to provide interactive, data driven web sites that were powered by FileMaker. We used technologies like CDML and FileMaker’s old Web Companion plug-in to make FileMaker data come to life as animations on the web.
This provided us with a new tool for creating unlimited ways to interact with live FileMaker data.
We created seating charts, calendars, maps, charts and various other custom interfaces and integrated them into the FileMaker user flow to help us solve interface issues that could not be solved by FileMaker layout tools alone.
FileMaker continued to add features that were friendly to this integration, a powerful Web (XML) Publishing Engine, web server integration and the Web Viewer layout object all allowed us to incorporate Flash/Flex seamlessly into FileMaker layouts.
In the wake of these feature updates, products emerged in the FileMaker market that leveraged Flash/Flex in web viewers to allow extensibility not seen in FileMaker layouts to date.
The game had changed. Recently, the game changed again.
FileMaker has moved into the rapidly growing device market and hitched its wagon wisely to the iPad/iPhone/Touch world with its revolutionary product, FileMaker Go. FileMaker Go allows FileMaker developers to create databases or extensions of their databases on mobile devices like the iPhone and iPad. With over 3 Million NEW iPad (third generation) sold to date alone, this market provides amazing potential to FileMaker developers everywhere.
However, what of the work done with Flash and FileMaker?
Its well known that Adobe and Apple feuded long and hard over Flash support on iOS and eventually the battle ended, proving that there is no future for Flash/Flex on iOS devices. This became a significant blow to any FileMaker databases that used Flash and would now need to be accessed via FileMaker Go.
Situation: Our client hired us to create a FileMaker-based seating map to be used for movie premieres.
The special events department invites and then seats guests for various movie premieres. The guests do not pick their own seats as these events are invite only. So they needed a system to manage all guests and to place them in the correct seats.
A guest will be assigned to a “section” (Orchestra or Balcony) in the database, then the users invoke the seating map and load a “pick List” that displays all guests who are to be seated in that section. Once seated, the guest name is removed from the Pick List and a related seat record is created for the Guest in the database. All of this through an interactive seat map made to look just like the theater.
Problem: The seat map was created using Flex/Flash embedded into a Web Viewer and the users require the mobility offered by FileMaker Go to allow them to access the seat map while on site at the theater or on the red carpet for arrivals.
Having a Flash application embedded in a web viewer and making a connection via a client that is not on the same machine or subnet as the server, means that a “cross domain” issue arises that requires the creation of a policy server in another technology, as well as the opening of up to 5 ports in the server firewall.
This issue becomes more complicated if the Web server, FileMaker Server and Web Publishing engine are not all on the same machine.
This meant that NO WEB SERVER was needed for the exchange of data from the database to the seat map.
Therefore, the database and the web viewer communicate locally using FMP URLs and the HTML5 code has several embedded data series that are driven by the FileMaker calculation engine rather than calls to the Web Publishing Engine and web server. Therefore, no web server connection needed at all and no ports to deal with!
HTML5 also allows for flash-like access via FileMaker Go as no player or API is required. All the code can not only be stored in the database, but all business logic is managed using FileMaker scripting and calculations rather than Flash ActionScript or URL logic.
This means that FileMaker skill sets can be used to manipulate all aspects of the seat map. You *could* even allow for complete seating setup in FileMaker, change the style (colors, etc) and any other business logic using FileMaker calculations if your requirements stated such a need.
Here is another video demo of how we used FMP URLs to communicate with a free 3rd party app called “pic2shop” so we could use it’s scanning functionality to scan the barcode of a ticket…then locate that ticket in our database…and zoom into the HTML5 seat map to locate the seat for the user to preview which seat they were assigned.
Both demos videos are from the same FileMaker application on Go.
HTML5 VS FLASH/FLEX
First, What is HTML5?
It is the fifth revision of the HTML standard and, as of July 2012, is still under development. Its core initiative has been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices.
In particular, HTML5 adds many new syntactical features. These include the new
<canvas> elements, as well as the integration of scalable vector graphics (SVG) and content that replaces the uses of generic
<object> tags and MathML for mathematical formulas.
These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs (i.e: Flash) .
Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets. Interestingly, when using HTML5, data is stored in the browser rather than a web server.
The adoption is clear as even sites like YouTube have created trial version of their Flash video sites, but in HTML5.
In December 2011, research firm Strategy Analytics forecast sales of HTML5 compatible phones will top 1 billion in 2013. In a recent survey of technology executives across more than 100 Fortune 500 companies, 74% said they were currently considering HTML5 implementation.
After doing lots of research into how to implement HTML5 into our solutions and by going through copious testing and proof of concepts, we have come up with some observations about HTML5 that we thought might be interesting to share here.
The nice thing about Flash/Flex was that you could compile code that could run and look the same across all platforms. We don’t have to test on the myriad of environments (Adobe did that for us with the Flash Player). We could use one development environment and one language to develop.
Flash/Flex could also be compiled so that we could protect the code from exposure and was even completely backward compatible across versions.
HTML5 will look and act differently in every browser, of every version, of every operating system and OS version. Each will need to be tested.
However, if you do take the time it takes to test under all platforms, then it can run everywhere, including a growing number of mobile devices.
Unfortunately, right now HTML5 is not as robust in features or look as Flash for creating rich experiences for an application. We are confident that will change quickly, but for now we will not be able to leverage all the same features Flash offered even from a few years ago.
Of course, this all depends on your client’s needs.
What could this mean to the future of your databases?
At this point all we can do is speculate and grasp on to emerging technologies like these and explore. It is the pitfall of the bleeding edge: uncertainty.
Something interesting happenedrecently and it *could* eventually mean something big for HTML5. FileMaker 12 introduced a new layout design surface that uses CSS3 style sheets to store and apply design elements FileMaker layouts, in the same way style sheets are used for a web site.
Currently, those are internally stored style sheets, but in the future they could possibly be made available to designers. Again, just speculation, but this could open the door for other supported technologies to be woven into the layout design surface…like HTML5 for example.
At the very least, HTML5 is here, now. You can use this technology along with FileMaker 12’s new FMP URL features and web viewers to extend your FileMaker layout beyond what you can do with FileMaker layout tools alone. You can bring in other apps and technologies into your FileMaker solutions and thus extend your solutions beyond what you or your clients could have previously imagined.
If I had to give any advice to someone entering the FileMaker development market, I’d tell them to learn CSS3 and HTML5 and jump to the head of the class over the next couple years.
How you can learn:
The first thing to understand in order to make HTML5 diplay in your web viewers is that you need to use “dataurls“. In order to get HTML to render in your web viewer when its not being hosted by a web server, you simply need to prefix the calculation that feeds the web viewer with:
…then you just follow it with calculated or static HTML code that can be viewed using your machine’s browser engine.
However, we fell in love with this application called Hype from Tumult. Using Tumult Hype, you can create beautiful HTML5 web content. Animations and interactive content made with Tumult Hype works on desktops, smartphones and iPads. No coding required.
It is particularly familiar if you worked with Flash and its timeline approach and keyframe-based animation system.
Matt O’Dell from FileMaker, Inc has done some excellent work in the HTML5/FileMaker space. If you missed his DEVCON presentation or his tour of user groups in 2011, you can check out his files here: click here: DOWNLOAD
You can also check out this introductory training video on lynda.com:
If you want an introduction to JQuery, check out this training video:
*More Training/Resource Links
- http://www.sitepoint.com/ all kinds of topics
- If you really want to get geeky with the specs: http://www.whatwg.org/ and/or http://www.w3.org/standards/webdesign/
- Joel Shapiro “FileMaker Responsive FIleMaker Design and Web Viewer Layouts” screen cast
- A cool “theme Roller” site for jquerymobile that helps you create UI elements
The most important aspect of being able to fully integrate live web controls into FileMaker layouts is the use of FileMaker 12’s new “fmp://” protocol.
Objects within a Web Viewer can use this new protocol to send messages directly to your FileMaker 12 databases, locally and without the need for a web server to host the files and without the need for the Web Publishing Engine to supply the data.
FMP URLs can directly call FileMaker scripts and pass parameters and script variables to them in real time. This means that a Web Viewer in our solution can make a round trip and communicate any changes about its state to your database, just like built-in layout controls you are comfortable with.
Just a note, this only works on a hosted FileMaker file or a FileMaker file in FileMaker Go.
If you learn the URL schemes of other iOS apps, you can make clean integrations with those apps and FileMaker, all within your FileMaker scripts. This works because not only does FileMaker have its own URL sysntax, but because all iOS apps have their own URL “Schemes”.
There are various different ways to use FMP URL.
You can call a script in a hosted FileMaker 12 database using this URL syntax:
Here are some other examples of ways to use these formats:
- To open a hosted (assuming host IP =127.0.0.1) FileMaker file:
- To call a Script in a hosted FIleMaker file:
- To create a dynamic calculation that calls a script in a hosted file while setting a script parameter:
- To open a file on FileMaker Go and use the same parameters, variables and script calls in a Go “local” file:
- To open a FileMaker Go “hiberated” file (not hosted or a database in your Files directory on Go):
- You can even use an FMP URL to send instructions to another iOS app (in this example, pic2shop), then tell that app how to “call back” data to FileMaker Go:
pic2shop://scan?callback=fmp” & GetAsURLEncoded ( “://$/” & Get ( FileName ) & “?script=ShowScannedTicket&$result=EAN” )
The more you learn about combining web viewers and data URLs and FMP URLs, the more you can do with HTML5 and supported technologies.
Sounds obvious, but after my 2005 presentation on Flash and FileMaker..nearly EVERYONE that came up to me after thought Flash and FileMaker could only be used for seating charts.
I want everyone to make sure to know you could use this for your own solution, whether those solutions are things like:
- dynamically generated visual shipping palettes
- assembly of items into a visual display of a new item
- dragging events on a calendar to a date
- dragging people to a meeting to assign them to a meeting
- Gantt charts
- Map Plotting
- Communicating with various third party apps on the iPad
- and anything you can imagine…
We encourage you to get familiar with all these technologies to help you dramatically expand what can be done within FileMaker layouts with the ability to extend this functionality to devices like iPads and iPhone.
MORE HTML5 VIDEOS AND POSTS HERE: