FileMaker Go and HTML5

[iSolutions]

Back in 2000, iSolutions was the first firm to create solutions that integrated FileMaker

databases with Flash interfaces.

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 into 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.

Then, as FileMaker's web publishing engine matured, we began to integrate Flash into the FileMaker desktop experience. 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.

Now its time for a new blend of technologies that allow for the same type of extension of the FileMaker User interface, but that can also be accessed on iOS.

FileMaker, meet HTML5 and JavaScript.

Case Study:

Here is a quick case study of a recent project that started as FileMaker/Flash, but evolved into HTMl5/JavaScript as a result of changing requirements:

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. The users also have IT policy issues with connecting Flash and remote databases to a server

because of closed ports so a system that requires a web server causes connectivity problems.

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. Solution: The Flash seating map was replaced with a seat map created using HTML5 and JavaScript to allow for an animated seat map experience on both the desktop and FileMaker Go on the iPad.

Because of the use of the HTML5 and JavaScript in the web viewer, we were able to embed all the code within the FileMaker database by using global fields in a resource table and saving files to the temp directory on file open.

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.

We created a prototype of the system working in a database on FileMaker Go that invokes a web viewer to show the seat map and the map is drawn using HTML5 and embedded JavaScript. We have provides two screen caps below of the database so you can get an idea how seamless the web viewer can be within the FileMaker layouts.

First, this video demonstrates HTML5, JavaScript and FMPURLs inside a web viewer that allow iPad users to seat guests in the database into an interactive seat map:

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 <video>, <audio> and <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 executivesacross 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. Another thing to consider is that some users will not allow JavaScript to run in their browser so, HTML5 apps will be restricted in those cases.

Luckily, FileMaker developers will likely have a captive audience of known users and can make that a requirement for usage.

Although there is no way to compile the HTML5 code so it can be protected from exposure, we found a way to store all the JavaScript files and images in containers in a FIleMaker database, then write those files to the TEMP Directory on FileMaker Go or PRO and the web viewers and HTML you write in your calculations can refer to those files and then be flushed out at the end of your session. You can restrict access to those fields if you want to protect your code.

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 th every 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:

data URLs

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: “data:text/html,” &

...then you just follow it with calculated or static HTML code that can be viewed using your machine's browser engine.

Since the web viewer uses the engine from your machine's browser (IE/WIN or Safari/MAC), it can display anything you could display in a web page. This includes technologies within your code like JavaScript, HTML, CSS, etc.

HTML5

HTML5 editors are few and far between, for now. But mainly because developers are familiar with text based applications when it comes to coding JavaScript or HTML.

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. http://tumult.com/hype/

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: click here: HTML5 First Look

JavaScript

If you look at JavaScript code, it might look daunting. It certainly is if you try to write it from scratch.

But the best part about JavaScript is that you can get most of what you need for free. Its also a great way to learn the code, use some libraries that were created elsewhere and reverse engineer them to understand how to create your own.

Here are some great training titles on lynda.com that will help introduce you to these JavaScript: click here: JavaScript Essential Training

You will also want to become familiar with the libraries of JavaScript code found on this site: http://jquery.com/

If you want an introduction to JQuery, check out this training video: click here: JQuery Essential Training

FMP URLs

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.

This also means you can continue to use your FileMaker scripting and calculation experience to manipulate what is being displayed in web viewers and fully integrate your business logic using FileMaker instead of having it all built into HTML5 and JavaScript.

All of this can be done within the database itself, without the need for web hosting or web servers. 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:

FMP://[[account:password@]netaddress]/databasename [?script=scriptname[&param=scriptparameter][&$variablename=value]]

Here are some other examples of ways to use these formats:

• To open a hosted FileMaker file:
  

fmp://127.0.0.1/FMServer_Sample

• To call a Script in a hosted FIleMaker file:
  

fmp://127.0.0.1/POC?script=CreateSeatingRecord

• To create a dynamic calculation that calls a script in a hosted file while setting a script parameter:
  

fmp://<<$$ipAddress>>/{{FileName}}?script=EditSeated&param=hello&$seatid=1234

• To open a file on FileMaker Go and use the same parameters, variables and script calls in a Go "local" file:
  

FMP://~/databasename?script=EditSeated&param=hello&$seatid=1234

• To open a FileMaker Go "hiberated" file (not hosted or a database in your Files directory on Go):
  

FMP://$/databasename[... fmp://~/POC/script=AddSeat&$GuestID=12345

• 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.

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.

This post has been promoted to an article