INTER-Mediator: Creating Web Site Easily Just Using FileMaker,
Progress Over 3 Years

CWP User Group 2015 / July 20, 2015
at FileMaker Developer Conference 2015
Masayuki Nii
nii@msyk.net msyknii msyk_nii

This presentation: http://nii.ac/CW15

Who is Masayuki Nii

Independent Developer

iOS/OS X native applications, and Web/DB development
FileMaker Solution especially Web Integration
Ph.D. in Engineering

FileMaker Experience

Developing from FileMaker 2
Committer of FX.php (Unicode support etc.)
Authored the Japanese book “FileMaker as a Relational Database”
Developed Several Huge Systems, ex. electronic health record system

Agenda

I presented INTER-Mediator 3 years ago at Miami's CWPUG.

Today's topic includes:

  • Developing with Declarative Descriptions
  • Demos
  • What's expanded in 3 years.

How to Build a Web Page with INTER-Mediator

Summary

1. Prepare FileMaker DB
2. HTML-based “Page File”
3. PHP-based “Definition File”

“Page File” as a Template

<span data-im="person@name"></span>
//The SPAN tag element shows the data of the "name" field in the "person" table.
<input type="text" data-im="person@name" />
//The text field shows the data of the "name" field in the "person" table, and can be modified by user.

“Definition File” as a Configuration

PHP!? But it just describes key-value data with an associated array.
Sample is here, BUT!
require_once('INTER-Mediator.php');	// Importing the framework.

IM_Entry(	// Always IMEntry function.
    array(
        array(   // This array is referred as "Context."
            'name' => 'person',
            'view' => 'person_layout',	// Layout name for reading from DB
            'table' => 'person_layout',	// Layout name for writing to DB
            'records' => 1,
            'paging' => true,
            'repeat-control' => 'confirm-delete confirm-insert',
        ),
    :

Definition File Editor and Page File Editor

You don't have to describe PHP code!

How Is INTER-Mediator Similar to FileMaker?

FileMaker's Layout is the Fundamental of View

INTER-Mediator generates the page from HTML-based Page File.

FileMaker Supports CRUD, Repeating and Relationship

INTER-Mediator supports them with declarative descriptions.

FileMaker is Extensible with Scripts

INTER-Mediator can include both server and client side script, PHP and JavaScript

Working Sample

  • Simple Listing
  • Binding to the Database
  • Pagination
  • Create/Delete Record
  • Master/Detail Layout
  • Relationship
  • Search Field

 

Demo Movie (Master/Detail UI)

Demo Movie (Search UI)

Summary of the Sample Application

Page File (1)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="INTER-Mediator/Samples/sample.css" />
    <script type="text/javascript" src="def25.php"></script>   // Including Framework
</head>
<body onload="INTERMediator.construct()">   // Generating Page
  <div>Search: <input type="text" data-im="_@condition:person:name,mail:*match*" /></div>
          // For 6. Search UI
  <div id="IM_NAVIGATOR"></div>  // For 2 Pagenation
  <table style="float:left;margin-right:20px;">   // 5. This is Master Component
    <tbody>   // 1. This is "Enclosure"
      <tr>      // 2. This is "Repeater"
        <td></td>
        <td><div data-im="person@name"></div><div data-im="person@mail"></div></td>
        <td></td>    // 1. data-im attribute binds a element to the database
      </tr>
    </tbody>
  </table> // continued...

Page File (2)

  <table>    // 5. This is Detail Component
    <tbody>
      <tr><th>Name</th><td><input type="text" data-im="detail@name"/></td></tr>
      <tr><th>Address</th><td><input type="text" data-im="detail@address"/></td></tr>
      <tr><th>Mail</th><td><input type="text" data-im="detail@mail"/></td></tr>
      <tr><th>Memo</th><td><textarea data-im="detail@memo"></textarea></td></tr>
      <tr><td colspan="2">
        <table>    // 4. The Table in Table Binds to the Associated Records with Relationship
          <thead>
            <tr><th>DateTime</th><th>Summary</th></tr>
          </thead>
          <tbody>
            <tr><td data-im="contact@datetime"></td><td data-im="contact@summary"></td></tr>
          </tbody>
        </table>
        </td>
      </tr>
    </tbody>
  </table>
  <br clear="all"/>
  </body>
</html>

Definition File

<?php
require_once('INTER-Mediator/INTER-Mediator.php');

IM_Entry(
  array (
    array (
      'name' => 'person',
      'table' => 'person_layout',
      'view' => 'person_layout',
      'key' => '-recid',
      'maxrecords' => 100,
      'paging' => true,
      'records' => 5,
      'repeat-control' => 'confirm-delete confirm-insert',
      'navi-control' => 'master',
    ),
    array (
      'name' => 'detail',
      'table' => 'person_layout',
      'view' => 'person_layout',
      'key' => '-recid',
      'navi-control' => 'detail',
      'records' => 1,
      'maxrecords' => 1,
    ),
    array (
      'name' => 'contact',
      'table' => 'contact_to',
      'view' => 'contact_to',
      'key' => '-recid',
      'relation' => array ( array (
          'foreign-key' => 'person_id',
          'join-field' => 'id',
          'operator' => '=',
      ), ),
    ),
  ),
  array ( ),
  array (
    'db-class' => 'FileMaker_FX',
    'database' => 'TestDB',
    'user' => 'web',
    'password' => 'password',
    'server' => 'homeserver.msyk.net',
    'port' => '80',
    'protocol' => 'http',
    'datatype' => 'FMPro12',
  ),
  false
);

Key Points of Sample Web Application

Just Declarative, (Almost) NO Prgramming Code

Database Operations

Conforiming UI Patterns

Key Features of INTER-Mediator

Key Features with Declarative Descriptions (1)

Binding Each Fields [Sample]

The data-im attribute let the element bind to database, and show the value of the field.
If the user modify, the database is going to be updated with optimistic lock.
Elements in a form (ex. checkbox, pop-up menu etc.) can update the database.

Repeating with Multiple Records [Sample]

Recognizing elements can repeat for multiple records, ex. TR tagged elements (Repeater) and TBODY (Enclosure).
The Enclosure/Repeater set generates multiple Repeater elements with each record.

Key Features with Declarative Descriptions (2)

Relationship on the Page [Sample]

The Enclosure/Repeater set can include another set with the different data source.
If the relationship definition is described for including set, it means the associated records will be queried by adding condition.

Inserting and Delete Record with Buttons Automatically Added [Sample]

Automatically Delete button can be added for each record.
Automatically Insert button can be added to the top/bottom of Enclosure.

Supporting Pagination [Sample]

A lot of records can be divided into some records.
The paging control appears on any place in the generated page.

Key Features with Declarative Descriptions (3)

Master/Detail Style User Interface [Sample]

The red-colored items are added in the last 3 years.
Switching the list and the detail of same table.
The Master and the Detail part place side by side, and it's similar to iPad UI.

Applying Conditions and Sort Orders

When the query is published, conditions and sort orders can be added for any fields in the table.

Adding Search and Sort Features [Sample]

Adding conditions with text fields having special data-im attribute.
The number of record in a page and sort order button can be added to the page.

Key Features with Declarative Descriptions (4)

Calculated Property

Getting the calculated value with some fields in same record.
Aggregating calculation for another Enclosure/Repeater is supported.

Post Only Page to Create a New Record

The page just for creating a record.
This feature easily build the survey page.

Validation in Modified Fields

Validation can be set for each editable elements.
Feedback of invalid value includes alert box and text message just beside of the element.

Multiple Client Synchronization with Push Notification

The modified data is going to send other clients sharing with the same field of the record.
Creating and deleting record synchronized other clients too.
This feature is not woking on the default situation. You have to set up the Pusher channel.

Key Features with Declarative Descriptions (5)

Authentication and Authorization

The user record can be stored in database.
The database engine's user and LDAP user can log in.

Integration with JavaScript Components

Some components (ex. TinyMCE and DatePicker of jQueryUI) are supported so far.

Uploading File

Drag and drop UI, and it can change the old style uploading form.

Sending Mail after Database Operations

Some filed values can be set to mail parameters.
The body template can be supplied with the text file.

Supporting Container Field

Show the image in the FileMaker's container field.
Upload to the container field.

Key Features with Programming

Client-side JavaScript Programming

Database Operation from Client
Node Searching in the Generated Page File
Applying Conditions and Sort Orders with JavaScript
Call-back Method when the Enclosure/Repeater is generated, and the Master/Detail are exchanging.

Server-side PHP Programming

Pre- and Post-Processing on Server.
Special purpose database wrapping class.

Differences with Other Frameworks

Based on Declarative Descriptions

Most of major frameworks use to do programming with programming languages.

Client/Server Integration

The front-end frameworks supplies just a JavaScript codes.

Recursive Enclosure/Repeater Recognition

AngularJS/KnockoutJS don't support the “other records in a record.” They have to assign another HTML template for inside records.

Wrapping Up

  • INTER-Mediator is declarative-based web application framework.
  • Sufficient features to build practical applications.
  • JavaScript/PHP programming interface can extend to support advanced requirements.

INTER-Mediator: http://inter-mediator.com/

This presentation: http://nii.ac/CW15

Community: Facebook Group (English)

Academic Paper: Framework Enabling End-Users to Maintain Web Applications (ICICWS 2015 in IMECS 2015)