2 December 2005 
Web Information Systems 
Web Application Frameworks 
Prof. Beat Signer 
Department of Computer Science 
Vrije Universiteit Brussel 
http://www.beatsigner.com
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2 
Web Application Frameworks 
 There exist dozens of web application frameworks! 
A web application framework is a software framework that 
is designed to support the development of dynamic web-sites, 
web applications, web services and web resources. 
The framework aims to alleviate the overhead associated 
with common activities performed in web development. 
For example, many frameworks provide libraries for 
database access, templating frameworks and session 
management, and they often promote code reuse. 
[http://en.wikipedia.org/wiki/Web_application_framework]
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3 
Web Application Frameworks ... 
 A web application framework offers libraries and 
tools to deal with web application issues 
 template libraries, session management, database access 
libraries etc. 
 Some frameworks also offer an abstraction from the 
underlying enabling technologies 
 e.g. automatic creation of Java Servlets 
 Many frameworks follow the Model-View-Controller 
(MVC) design pattern 
 no mix of application logic and view (e.g. not like in JSP) 
 increases modularity and reusability 
 Lead to a faster and more robust development process
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4 
Model-View-Controller (MVC) 
 Model 
 data (state) and business logic 
 multiple views can be defined for a single model 
 when the state of a model changes, its views are notified 
 View 
 renders the data of the model 
 notifies the controller about changes 
 Controller 
 processes interactions with the view 
 transforms view interactions into 
operations on the model (state 
modification) 
Model 
Controller 
View 
notifies 
modifies 
state 
selects view 
notifies 
gets 
state
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5 
Apache Struts 2 
 Free open source framework for creating enterprise-ready 
Java-based web applications 
 Action-based MVC Model 2 (Pull MVC) framework 
combining Java Servlets and JSP technology 
 model 
- action (basic building blocks) from which the view can pull information via the 
ValueStack 
- action represented by POJO (Plain Old Java Object) following the JavaBean 
paradigm and optional helper classes 
 view 
- template-based approach often based on JavaServer Pages (JSP) in 
combination with tag libraries (collection of custom tags) 
 controller 
- based on Java Servlet filter in combination with interceptors
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6 
MVC Model 2 (MVC 2) in Struts 2 
Model 
POJOs 
Database 
Controller 
Servlet 
View 
e.g. JSP 
Browser 
1 
2 
3 
4 
5 
6
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7 
Apache Struts 2 Architecture 
 Servlet request 
 standard filter chain 
- interception of requests and 
responses 
- reusable modular units 
- e.g. XSLT transformation 
 StrutsPrepareAndExecute 
Filter consults controller 
(ActionMapper) 
 ActionProxy is called if 
action has to be executed 
 consult Configuration- 
Manager 
 create ActionInvocation 
[http://struts.apache.org/2.1.6/docs/big-picture.html]
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8 
Apache Struts 2 Architecture ... 
 invoke any interceptors 
(controller) before Action 
 Action class updates the 
model 
 ActionInvocation does 
a lookup for the Result 
 based on Action result code 
 mappings in struts.xml 
 Result execution (view) 
 often based on JSP template 
 interceptors in reverse order 
 Send response 
 again through filter chain 
[http://struts.apache.org/2.1.6/docs/big-picture.html]
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9 
Apache Struts 2 
 ValueStack 
 temporary objects, Action objects, ... 
 access from JSP via Object Graph Navigational Language (OGNL) 
 Multiple view alternatives 
 JSP, XSLT, Velocity, ... 
 Simplifies web development 
 convention over configuration 
 intelligent default values reduce the size of configuration files 
 fosters modularity and loose coupling (dependency injection) 
 standard development process for Struts 2 web applications 
 Requires no changes to the servlet container 
 regular servlet application
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10 
Apache Struts 2 web.xml 
<web-app id="WebApp1" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> 
<filter> 
<filter-name>struts</filter-name> 
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter 
</filter-class> 
<init-param> 
<param-name>actionPackages</param-name> 
<param-value>be.ac.vub.wise</param-value> 
</init-param> 
</filter> 
<filter-mapping> 
<filter-name>struts</filter-name> 
<url-pattern>/*</url-pattern> 
</filter-mapping> 
<taglib> 
<taglib-uri>/WEB-INF/struts-bean.tld</taglib-uri> 
<taglib-location>/WEB-INF/struts-bean.tld</taglib-location> 
</taglib> 
... 
</web-app>
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11 
Tag Libraries 
 Introduced to encapsulate reusable Java objects in JSP 
 provide access to methods on objects 
 Apache Struts 2 offers four different libraries 
 HTML 
- e.g. buttons, form fields, ... 
 Template 
- tags that are useful for creating dynamic JSP templates 
 Bean 
- e.g. definitions, parameters, ... 
 Logic 
- e.g. comparisons, ...
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12 
Apache Struts 2 Hello World Example 
<%@ taglib prefix="s" uri="/struts-tags" %> 
<html> 
<head> 
<title>Hello World</title> 
</head> 
<body> 
<h1><s:property value="message"/></h1> 
<p>Time: <b><s:property value="currentTime" /></b></p> 
</body> 
</html> 
HelloWorld.jsp
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13 
Apache Struts 2 Hello World Example ... 
package be.ac.vub.wise; 
import com.opensymphony.xwork2.ActionSupport; 
import java.util.Date; 
public class HelloWorldImpl extends ActionSupport { 
public static final String MESSAGE = "Hello World!"; 
public static final String SUCCESS = "success"; 
private String message; 
public String execute() throws Exception { 
setMessage(MESSAGE); 
return SUCCESS; 
} 
public void setMessage(String message){ 
this.message = message; 
} 
public String getMessage() { 
return message; 
} 
public String getCurrentTime(){ 
return new Date().toString(); 
} 
} HelloWorldImpl.java
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14 
Apache Struts 2 Hello World Example ... 
 Execute the Hello World example by sending request to 
 http://localhost:8080/wise/HelloWorld.action 
<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" 
"http://struts.apache.org/dtds/struts-2.0.dtd"> 
<struts> 
<constant name="struts.enable.DynamicMethodInvocation" value="false"/> 
<constant name="struts.devMode" value="true"/> 
<package name="be.ac.vub.wise" namespace="/wise" extends="struts-default"> 
<action name="HelloWorld" class="be.ac.vub.wise.HelloWorldImpl"> 
<result>/pages/HelloWorld.jsp</result> 
</action> 
... 
</package> 
... 
</struts> 
struts.xml
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15 
Spring Framework 
 Java application framework 
 Various extensions for web applications 
 Modules 
 model-view-controller 
 data access 
 inversion of control container 
 convention-over-configuration 
 remote access framework 
 transaction management 
 authentication and authorisation 
 …
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16 
Apache Flex 
 Software development kit for cross-platform 
Rich Internet Applications (RIAs) based on Adobe Flash 
 Main components 
 Adobe Flash Player runtime environment 
 Flex SDK (free) 
- compiler and debugger, the Flex framework and user interface components 
 Adobe Flash Builder (commercial) 
- Eclipse plug-in with MXML compiler and debugger 
 Separation of user interface and data 
 user interface described in MXML markup language in 
combination with ActionScript 
- compiled into flash executable (SWF flash movie)
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17 
Apache Flex ... 
 Flex framework offers various actions 
 e.g. HTTPRequest component 
 Flex applications can also be deployed as desktop 
applications via Adobe AIR (Adobe Integrated Runtime) 
<?xml version="1.0" encoding="UTF-8" ?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"> 
<mx:Script> 
<![CDATA[ 
import mx.controls.Alert; 
private function sayHello():void { 
Alert.show("Hello " + user.text); 
} 
]]> 
</mx:Script> 
<mx:Label fontSize="12" text="Name: " /> 
<mx:TextInput id="user" /> 
<mx:Button label="Go" click="sayHello()" /> 
</mx:Application> 
HelloWorld.mxml
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18 
Microsoft Silverlight 
 Microsoft's platform for Rich Internet Applications 
 competitor to Adobe Flash 
 Runtime requires a browser plug-in 
 Internet Explorer, Firefox, Safari and Google Chrome 
 Silverlight Core Common Language Runtime (CoreCLR) 
 A Silverlight application consists of 
 CreateSilverlight.js and Silverlight.js 
- initialise the browser plug-in 
 user interface described in the Extensible Application Markup 
Language (XAML) 
- XAML files are not compiled  indexable by search engines 
 code-behind file containing the program logic
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19 
Microsoft Silverlight ... 
 Programming based on a subset of the .NET Framework 
 Silverlight introduces a set of features including 
 LocalConnection API 
- asynchronous messaging between multiple applications on the same machine 
 out-of-browser experiences 
- locally installed application that runs out-of-the-browser (OOB apps) 
- cross-platform with Windows/Mac 
 microphone and Web cam support 
 Two types of Silverlight web requests 
 WebClient class 
- OpenReadAsync (for streaming), DownloadStringAsync as well as uploads 
 WebRequest 
- register an asynchronous callback handler (based on HttpWebRequest)
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20 
OpenLaszlo 
 Open source RIA platform 
 Two main components 
 LZX programming language 
- XML and JavaScript 
- similar to MXML and XAML 
 OpenLaszlo Server 
 The Open Laszlo Server compiles LZX applications into 
different possible runtime components 
 Java Servlets 
 binary SWF files 
 DHTML (HTML, DOM, JavaScript and CSS)
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21 
Ruby on Rails (RoR) 
 Open source web application framework 
 Combination of 
 dynamic, reflective, object-oriented programming language Ruby 
- combination of Perl-inspired syntax with "Smalltalk features" 
 web application framework Rails 
 Based on MVC architectural pattern 
 structure of a webpage separated from its functionality via the 
unobtrusive JavaScript technique 
 The scaffolding feature offered by Rails can 
automatically generate some of the models and views 
that are required for a website 
 developer has to run an external command to generate the code
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22 
Ruby on Rails (RoR) ... 
 Ruby on Rails Philosophy 
 Don't Repeat Yourself (DRY) 
- information should not be stored redundantly (e.g. do not store information in 
configuration files if the data can be automatically derived by the system) 
 Convention over Configuration (CoC) 
- programmer only has to specify unconventional application settings 
- naming conventions to automatically map classes to database tables (e.g. by 
default a 'Sale' model class is mapped to the 'sales' database table)
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23 
Video: Ruby on Rails 
http://media.rubyonrails.org/video/rails_blog_2.mov
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24 
Yii Framework 
 PHP framework for the development of Web 2.0 
applications that offers a rich set of features 
 AJAX-enabled widgets 
 web service integration 
 authentication and authorisation 
 flexible presentation via skins and themes 
 Data Access Objects (DAO) interface to transparently access 
different database management systems 
 integration with the jQuery JavaScript library 
 layered caching 
 ...
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25 
Zend 
 Open source PHP framework offering various features 
 MVC architectural pattern 
 loosely coupled components 
 object orientation 
 flexible caching 
 Simple Cloud API 
 features to deal with emails (POP3, IMAP4, …) 
 …
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26 
CakePHP 
 Open source PHP web application framework 
 MVC architectural pattern 
 rapid prototyping via scaffolding 
 authentication 
 localisation 
 session management 
 caching 
 validation 
 …
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27 
Node.js 
 Server-side JavaScript 
 handling post/get requests, database, sessions, … 
 Write your entire app in one language 
 Built-in web server (no need for Apache, Tomcat, etc.) 
 High modularity 
 plug-ins can be added for desired server-side functionality 
 Other more powerful frameworks such as Express.js 
build on top of Node.js
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28 
Django 
 Open source Python web application framework 
 MVC architectural pattern 
 don't repeat yourself (DRY) 
 object-relational mapper 
- mapping between model (Python classes) and a relational database 
 integrated lightweight web server 
 localisation 
 caching 
 ...
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29 
Web Content Management Systems 
 Content management systems that focus on web content 
 Main functionality 
 data storage and publishing, user management (including access 
rights), versioning, workflows 
 Offline (create static webpages), online (create 
webpages on the fly) and hybrid systems 
 Often some kind of server-side caching 
 Suited for non-technical users since the underlying 
technology is normally completely hidden 
 Web CMS Examples 
 Joomla, Drupal, ...
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30 
Exercise 5 
 Web Application Frameworks 
 implementation of a Struts 2 application
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31 
References 
 Struts 2 Quick Guide 
 http://www.tutorialspoint.com/struts_2/struts_quick_g 
uide.htm 
 Apache Struts 2 
 http://struts.apache.org/2.x/ 
 Ian Roughley, Struts 2 
 http://refcardz.dzone.com/refcardz/struts2 
 Spring Framework 
 http://www.springsource.org 
 Apache Flex 
 http://flex.org
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32 
References ... 
 Microsoft Silverlight 
 http://www.microsoft.com/silverlight/ 
 http://silverlight.net/learn/videos/silverlight-videos/ 
net-ria-services-intro/ 
 Open Laszlo 
 http://www.openlaszlo.org 
 Ruby on Rails Video: Creating a Weblog in 15 Minutes 
 http://www.youtube.com/watch?v=tUH1hewXnC0 
 Yii Framework 
 http://www.yiiframework.com 
 Zend Framework 
 http://framework.zend.com
October 24, 2014 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33 
References ... 
 CakePHP 
 http://cakephp.org 
 Node.js 
 http://nodejs.org 
 Django 
 https://www.djangoproject.com 
 Comparision of Web Application Frameworks 
 http://en.wikipedia.org/wiki/Comparison_of_web_ 
application_frameworks
2 December 2005 
Next Lecture 
Web 2.0 Basics

Web Application Frameworks - Lecture 05 - Web Information Systems (4011474FNR)

  • 1.
    2 December 2005 Web Information Systems Web Application Frameworks Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel http://www.beatsigner.com
  • 2.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2 Web Application Frameworks  There exist dozens of web application frameworks! A web application framework is a software framework that is designed to support the development of dynamic web-sites, web applications, web services and web resources. The framework aims to alleviate the overhead associated with common activities performed in web development. For example, many frameworks provide libraries for database access, templating frameworks and session management, and they often promote code reuse. [http://en.wikipedia.org/wiki/Web_application_framework]
  • 3.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3 Web Application Frameworks ...  A web application framework offers libraries and tools to deal with web application issues  template libraries, session management, database access libraries etc.  Some frameworks also offer an abstraction from the underlying enabling technologies  e.g. automatic creation of Java Servlets  Many frameworks follow the Model-View-Controller (MVC) design pattern  no mix of application logic and view (e.g. not like in JSP)  increases modularity and reusability  Lead to a faster and more robust development process
  • 4.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4 Model-View-Controller (MVC)  Model  data (state) and business logic  multiple views can be defined for a single model  when the state of a model changes, its views are notified  View  renders the data of the model  notifies the controller about changes  Controller  processes interactions with the view  transforms view interactions into operations on the model (state modification) Model Controller View notifies modifies state selects view notifies gets state
  • 5.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5 Apache Struts 2  Free open source framework for creating enterprise-ready Java-based web applications  Action-based MVC Model 2 (Pull MVC) framework combining Java Servlets and JSP technology  model - action (basic building blocks) from which the view can pull information via the ValueStack - action represented by POJO (Plain Old Java Object) following the JavaBean paradigm and optional helper classes  view - template-based approach often based on JavaServer Pages (JSP) in combination with tag libraries (collection of custom tags)  controller - based on Java Servlet filter in combination with interceptors
  • 6.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6 MVC Model 2 (MVC 2) in Struts 2 Model POJOs Database Controller Servlet View e.g. JSP Browser 1 2 3 4 5 6
  • 7.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7 Apache Struts 2 Architecture  Servlet request  standard filter chain - interception of requests and responses - reusable modular units - e.g. XSLT transformation  StrutsPrepareAndExecute Filter consults controller (ActionMapper)  ActionProxy is called if action has to be executed  consult Configuration- Manager  create ActionInvocation [http://struts.apache.org/2.1.6/docs/big-picture.html]
  • 8.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8 Apache Struts 2 Architecture ...  invoke any interceptors (controller) before Action  Action class updates the model  ActionInvocation does a lookup for the Result  based on Action result code  mappings in struts.xml  Result execution (view)  often based on JSP template  interceptors in reverse order  Send response  again through filter chain [http://struts.apache.org/2.1.6/docs/big-picture.html]
  • 9.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9 Apache Struts 2  ValueStack  temporary objects, Action objects, ...  access from JSP via Object Graph Navigational Language (OGNL)  Multiple view alternatives  JSP, XSLT, Velocity, ...  Simplifies web development  convention over configuration  intelligent default values reduce the size of configuration files  fosters modularity and loose coupling (dependency injection)  standard development process for Struts 2 web applications  Requires no changes to the servlet container  regular servlet application
  • 10.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10 Apache Struts 2 web.xml <web-app id="WebApp1" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <filter> <filter-name>struts</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter </filter-class> <init-param> <param-name>actionPackages</param-name> <param-value>be.ac.vub.wise</param-value> </init-param> </filter> <filter-mapping> <filter-name>struts</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <taglib> <taglib-uri>/WEB-INF/struts-bean.tld</taglib-uri> <taglib-location>/WEB-INF/struts-bean.tld</taglib-location> </taglib> ... </web-app>
  • 11.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11 Tag Libraries  Introduced to encapsulate reusable Java objects in JSP  provide access to methods on objects  Apache Struts 2 offers four different libraries  HTML - e.g. buttons, form fields, ...  Template - tags that are useful for creating dynamic JSP templates  Bean - e.g. definitions, parameters, ...  Logic - e.g. comparisons, ...
  • 12.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12 Apache Struts 2 Hello World Example <%@ taglib prefix="s" uri="/struts-tags" %> <html> <head> <title>Hello World</title> </head> <body> <h1><s:property value="message"/></h1> <p>Time: <b><s:property value="currentTime" /></b></p> </body> </html> HelloWorld.jsp
  • 13.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13 Apache Struts 2 Hello World Example ... package be.ac.vub.wise; import com.opensymphony.xwork2.ActionSupport; import java.util.Date; public class HelloWorldImpl extends ActionSupport { public static final String MESSAGE = "Hello World!"; public static final String SUCCESS = "success"; private String message; public String execute() throws Exception { setMessage(MESSAGE); return SUCCESS; } public void setMessage(String message){ this.message = message; } public String getMessage() { return message; } public String getCurrentTime(){ return new Date().toString(); } } HelloWorldImpl.java
  • 14.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14 Apache Struts 2 Hello World Example ...  Execute the Hello World example by sending request to  http://localhost:8080/wise/HelloWorld.action <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <constant name="struts.enable.DynamicMethodInvocation" value="false"/> <constant name="struts.devMode" value="true"/> <package name="be.ac.vub.wise" namespace="/wise" extends="struts-default"> <action name="HelloWorld" class="be.ac.vub.wise.HelloWorldImpl"> <result>/pages/HelloWorld.jsp</result> </action> ... </package> ... </struts> struts.xml
  • 15.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15 Spring Framework  Java application framework  Various extensions for web applications  Modules  model-view-controller  data access  inversion of control container  convention-over-configuration  remote access framework  transaction management  authentication and authorisation  …
  • 16.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16 Apache Flex  Software development kit for cross-platform Rich Internet Applications (RIAs) based on Adobe Flash  Main components  Adobe Flash Player runtime environment  Flex SDK (free) - compiler and debugger, the Flex framework and user interface components  Adobe Flash Builder (commercial) - Eclipse plug-in with MXML compiler and debugger  Separation of user interface and data  user interface described in MXML markup language in combination with ActionScript - compiled into flash executable (SWF flash movie)
  • 17.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17 Apache Flex ...  Flex framework offers various actions  e.g. HTTPRequest component  Flex applications can also be deployed as desktop applications via Adobe AIR (Adobe Integrated Runtime) <?xml version="1.0" encoding="UTF-8" ?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"> <mx:Script> <![CDATA[ import mx.controls.Alert; private function sayHello():void { Alert.show("Hello " + user.text); } ]]> </mx:Script> <mx:Label fontSize="12" text="Name: " /> <mx:TextInput id="user" /> <mx:Button label="Go" click="sayHello()" /> </mx:Application> HelloWorld.mxml
  • 18.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18 Microsoft Silverlight  Microsoft's platform for Rich Internet Applications  competitor to Adobe Flash  Runtime requires a browser plug-in  Internet Explorer, Firefox, Safari and Google Chrome  Silverlight Core Common Language Runtime (CoreCLR)  A Silverlight application consists of  CreateSilverlight.js and Silverlight.js - initialise the browser plug-in  user interface described in the Extensible Application Markup Language (XAML) - XAML files are not compiled  indexable by search engines  code-behind file containing the program logic
  • 19.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19 Microsoft Silverlight ...  Programming based on a subset of the .NET Framework  Silverlight introduces a set of features including  LocalConnection API - asynchronous messaging between multiple applications on the same machine  out-of-browser experiences - locally installed application that runs out-of-the-browser (OOB apps) - cross-platform with Windows/Mac  microphone and Web cam support  Two types of Silverlight web requests  WebClient class - OpenReadAsync (for streaming), DownloadStringAsync as well as uploads  WebRequest - register an asynchronous callback handler (based on HttpWebRequest)
  • 20.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20 OpenLaszlo  Open source RIA platform  Two main components  LZX programming language - XML and JavaScript - similar to MXML and XAML  OpenLaszlo Server  The Open Laszlo Server compiles LZX applications into different possible runtime components  Java Servlets  binary SWF files  DHTML (HTML, DOM, JavaScript and CSS)
  • 21.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21 Ruby on Rails (RoR)  Open source web application framework  Combination of  dynamic, reflective, object-oriented programming language Ruby - combination of Perl-inspired syntax with "Smalltalk features"  web application framework Rails  Based on MVC architectural pattern  structure of a webpage separated from its functionality via the unobtrusive JavaScript technique  The scaffolding feature offered by Rails can automatically generate some of the models and views that are required for a website  developer has to run an external command to generate the code
  • 22.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22 Ruby on Rails (RoR) ...  Ruby on Rails Philosophy  Don't Repeat Yourself (DRY) - information should not be stored redundantly (e.g. do not store information in configuration files if the data can be automatically derived by the system)  Convention over Configuration (CoC) - programmer only has to specify unconventional application settings - naming conventions to automatically map classes to database tables (e.g. by default a 'Sale' model class is mapped to the 'sales' database table)
  • 23.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23 Video: Ruby on Rails http://media.rubyonrails.org/video/rails_blog_2.mov
  • 24.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24 Yii Framework  PHP framework for the development of Web 2.0 applications that offers a rich set of features  AJAX-enabled widgets  web service integration  authentication and authorisation  flexible presentation via skins and themes  Data Access Objects (DAO) interface to transparently access different database management systems  integration with the jQuery JavaScript library  layered caching  ...
  • 25.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25 Zend  Open source PHP framework offering various features  MVC architectural pattern  loosely coupled components  object orientation  flexible caching  Simple Cloud API  features to deal with emails (POP3, IMAP4, …)  …
  • 26.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26 CakePHP  Open source PHP web application framework  MVC architectural pattern  rapid prototyping via scaffolding  authentication  localisation  session management  caching  validation  …
  • 27.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27 Node.js  Server-side JavaScript  handling post/get requests, database, sessions, …  Write your entire app in one language  Built-in web server (no need for Apache, Tomcat, etc.)  High modularity  plug-ins can be added for desired server-side functionality  Other more powerful frameworks such as Express.js build on top of Node.js
  • 28.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28 Django  Open source Python web application framework  MVC architectural pattern  don't repeat yourself (DRY)  object-relational mapper - mapping between model (Python classes) and a relational database  integrated lightweight web server  localisation  caching  ...
  • 29.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29 Web Content Management Systems  Content management systems that focus on web content  Main functionality  data storage and publishing, user management (including access rights), versioning, workflows  Offline (create static webpages), online (create webpages on the fly) and hybrid systems  Often some kind of server-side caching  Suited for non-technical users since the underlying technology is normally completely hidden  Web CMS Examples  Joomla, Drupal, ...
  • 30.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30 Exercise 5  Web Application Frameworks  implementation of a Struts 2 application
  • 31.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31 References  Struts 2 Quick Guide  http://www.tutorialspoint.com/struts_2/struts_quick_g uide.htm  Apache Struts 2  http://struts.apache.org/2.x/  Ian Roughley, Struts 2  http://refcardz.dzone.com/refcardz/struts2  Spring Framework  http://www.springsource.org  Apache Flex  http://flex.org
  • 32.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32 References ...  Microsoft Silverlight  http://www.microsoft.com/silverlight/  http://silverlight.net/learn/videos/silverlight-videos/ net-ria-services-intro/  Open Laszlo  http://www.openlaszlo.org  Ruby on Rails Video: Creating a Weblog in 15 Minutes  http://www.youtube.com/watch?v=tUH1hewXnC0  Yii Framework  http://www.yiiframework.com  Zend Framework  http://framework.zend.com
  • 33.
    October 24, 2014Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33 References ...  CakePHP  http://cakephp.org  Node.js  http://nodejs.org  Django  https://www.djangoproject.com  Comparision of Web Application Frameworks  http://en.wikipedia.org/wiki/Comparison_of_web_ application_frameworks
  • 34.
    2 December 2005 Next Lecture Web 2.0 Basics