Working with the Front-End Layer

On this page…
About the Front-End Layer About the Examples

Front-End Web Developer

Role	Knowledge Base	Responsibilities
Front-end Web developer	No MATLAB experience Minimal IT experience Expert at usability and Web page design Minimal access to IT systems Expert at JSP Expert at ASPX	As service consumer, manages presentation and usability Creates front-end applications Integrates MATLAB code with language-specific frameworks and environments Integrates WebFigures with the rest of the Web page

About the Front-End Layer

Note   For comprehensive end-to-end implementations of the concepts in this chapter, see Sources for More Information.

In well-designed multi-tier application architectures, the front-end layer presents data to the end user and validates the user's input. This is accomplished by accessing data acquired at lower-level architectural tiers to the user and taking in user inputs, validating them, and then sending them to the lower-level tiers for processing.

The data within this layer reside on servers that are almost always outside of the corporate firewall and therefore, accessible by everyone. Consequently, security and stability are integral to the front-end layer, and it is important to isolate implementation details outside of this layer so people cannot determine how your site is architected.

A well-designed front-end layer has data access, translation and validation, and presentation functions separated into individual logical code sections. This increases an application or Web site's maintainability since you can change where the data originates or the format that it arrives in without changing user-visible code.

A typical front-end layer contains the following sublayers.

Elements of the Front End Layer

• Data Access — This sublayer pulls data in from middle-tier services like databases, where access into a deployed application would typically take place. Among the technologies used to transmit data at this sublayer are:

  • Remoting interfaces

  • SOAP services

  • XML over HTTP protocol

• Translation/Validation — Data is passed from the data access sublayer to the translation sublayer and translated into objects used for data presentation. Since these objects represent what the user sees (rather than the underlying business logic) they are very lightweight and easy to maintain. This is also where any validation would occur to ensure that values are in a proper state for processing.

• Presentation — This layer uses the data in the business objects to display information on a Web site. Any user input actions are validated in the objects and, if needed, callbacks to the middle layer occur to retrieve updates based on the user input.

Back to Top

About the Examples

Dealing with MATLAB data is, for the most part, no different then dealing with other Web data except for the fact that dynamically generated images may be involved. The examples in this document are not meant to show how to build a Web site, but rather to demonstrate what types of building blocks are needed to work with MATLAB data in an existing Web site. Most of these examples can be integrated directly into larger applications containing JSP, HTML, or ASPX code.

Surf Peaks and Magic Square Application Integration

The following two templates show how you can integrate applications built with MATLAB products into a larger application. In each case, there is a small area in the interface where your applications exist after the user enters input (if only a mouse click).

In the left template, it is possible to have a simple IMG tag, where the src= is a servlet from the middle tier that dumps out the image data. It is also possible to use an interactive AJAX component embedded in a subframe, or to use embedded WebFigures.

In the right template, clicking the Go button triggers the page to validate that the value in the input box is valid, and then sends that data to the middle tier service which returns a two-dimensional array. It is the front-end layer's job to format this data and present it properly.

In the examples that follow, these concepts are simplified and focus on how the communication occurs within the middle layer, and how some typical data translations are performed.

Back to Top

Front-End Web Developer Tasks

Creating a WebFigure on a JSP Page

© 1984-2012- The MathWorks, Inc.    -   Site Help   -   Patents   -   Trademarks   -   Privacy Policy   -   Preventing Piracy   -   RSS