UI Application guide for platform

1. WEB UI FRAMEWORK
SETUP GUIDE
METADATA DRIVEN
SERVICE PLATFORM HongSeong Jeon
hsjeon70@gmail.com
jlook consulting

2. DEVELOPMENT
ENVIRONMENT
q Development Tool : eclipse Indigo
q Java Standard Edition JDK 1.6
q Apache Tomcat 6.0
q Maven eclipse plug-in : m2eclipse
http://download.eclipse.org/technology/m2e/updates/M/
q Check-out web application project from svn repository
q Tomcat Start Java Options : Launch Configuration
-Dapp.mode=local
-Dapp.home=/Users/hsjeon70/Applications/jlook
-Dlog4.debug=true

3. METADATA INITIAL
LOADING
q Deploy web application and run tomcat server
q Open web browser

4. METADATA INITIAL
LOADING
q H2 Database console : sa/*****
q Loading initial metadata
http://localhost:8080/applant/service/metadata/load?password=********

5. SIGN IN WEB
APPLICATION
q Sign In

6. CONFIGURATION GUIDE
q Web Application Deployment Descriptor : /WEB-INF/web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/
javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>jlook</display-name>
<listener>
<listener-class>org.springframework.security.web.session.HttpSessionEventPublisher</listener-class>
</listener>
<listener>
<listener-class>org.h2.server.web.DbStarter</listener-class>
</listener>
<listener>
<listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>
</listener>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<listener>
<listener-class>jlook.framework.infrastructure.web.JHttpSessionListener</listener-class>
</listener>
<context-param>
<param-name>db.url</param-name>
<param-value>jdbc:h2:~/db/jlook</param-value>
</context-param>

7. CONFIGURATION GUIDE
q Web Application Deployment Descriptor : /WEB-INF/web.xml
<context-param>
<param-name>db.user</param-name>
<param-value>sa</param-value>
</context-param>
<context-param>
<param-name>db.password</param-name>
<param-value>sa</param-value>
</context-param>
<context-param>
<param-name>db.tcpServer</param-name>
<param-value>-tcpAllowOthers</param-value>
</context-param>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>
classpath:spring/context-infrastructure.xml
classpath:spring/context-common.xml
classpath:spring/context-persistence.xml
classpath:spring/context-security.xml
classpath:spring/context-integration.xml
</param-value>
</context-param>

8. CONFIGURATION GUIDE
q Web Application Deployment Descriptor : /WEB-INF/web.xml
<filter>
<filter-name>jGlobalFilter</filter-name>
<filter-class>jlook.framework.infrastructure.web.filter.JGlobalFilter</filter-class>
</filter>
<filter>
<filter-name>jServiceFilter</filter-name>
<filter-class>jlook.framework.infrastructure.web.filter.JServiceFilter</filter-class>
</filter>
<filter>
<filter-name>springSecurityFilterChain</filter-name>
<filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
</filter>
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>

9. CONFIGURATION GUIDE
q Web Application Deployment Descriptor : /WEB-INF/web.xml
<filter>
<filter-name>sitemesh</filter-name>
<filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>jGlobalFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>springSecurityFilterChain</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>*.jsp</url-pattern>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
</filter-mapping>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

10. CONFIGURATION GUIDE
q Web Application Deployment Descriptor : /WEB-INF/web.xml
<filter-mapping>
<filter-name>jServiceFilter</filter-name>
<url-pattern>/service/*</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>jServiceFilter</filter-name>
<url-pattern>/openapi/*</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>jlook</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>jlook</servlet-name>
<url-pattern>/service/*</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>openapi</servlet-name>
<servlet-class>jlook.framework.interfaces.OpenAPIServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>

11. CONFIGURATION GUIDE
q Web Application Deployment Descriptor : /WEB-INF/web.xml
<servlet-mapping>
<servlet-name>openapi</servlet-name>
<url-pattern>/service/openapi/*</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>H2Console</servlet-name>
<servlet-class>org.h2.server.web.WebServlet</servlet-class>
<init-param>
<param-name>webAllowOthers</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>H2Console</servlet-name>
<url-pattern>/console/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

12. CONFIGURATION GUIDE
q Spring dispatcher configuration : /WEB-INF/jlook-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:util="http://www.springframework.org/schema/util"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/util
http://www.springframework.org/schema/util/spring-util-3.0.xsd">
<import resource="classpath:spring/context-example.xml"/>
<import resource="classpath:spring/jlook-servlet.xml" />
</beans>

13. CONFIGURATION GUIDE
q Spring dispatcher configuration : /WEB-INF/jlook-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:util="http://www.springframework.org/schema/util"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/util
http://www.springframework.org/schema/util/spring-util-3.0.xsd">
<import resource="classpath:spring/context-example.xml"/>
<import resource="classpath:spring/jlook-servlet.xml" />
</beans>

14. CONFIGURATION GUIDE
q JDBC Properteis: jdbc/jdbc-local.properties
#############################################
# Oracle JDBC Driver
#############################################
# log4sql Oracle JDBC proxy driver
jdbc.driver=org.h2.Driver
#jdbc.driver=oracle.jdbc.OracleDriver
#jdbc.url=jdbc:oracle:thin:@ip:1521:orcl
jdbc.url=jdbc:h2:~/db/jlook/mobile
jdbc.username=sa
jdbc.password=sa

15. CONFIGURATION GUIDE
q Environment Properteis: properties/env-local.properties
something=Hello local system
file.uploadDir=uploadDir
file.uploadTmp=uploadTmp
file.batchDir=batchDir
file.batchTmp=batchTmp
web.image.path=repos
mobile.app.path=mobile
# zipcode master sql file
zipcode.master.file=/Users/hsjeon70/Applications/zipcode/MYSQL_T1.sql
# management
accessLogEnabled=false
# testing environment properties ---------------------
#test.targetHost=http://121.78.58.139/applant
test.targetHost=http://localhost:8080/applant
dataLoadEnabled=false

16. CONFIGURATION GUIDE
q Hibernate Properteis: hibernate/hibernate-local.properties
#############################################
# Hibernate Properties
#############################################
hibernate.connection.provider_class=jlook.framework.infrastructure.jdbc.JConnectionProvider
hibernate.dialect=jlook.framework.infrastructure.jdbc.h2.JH2Dialect
hibernate.show_sql=false
hibernate.formrat_sql=false
hibernate.generate_statistics=false
hibernate.hbm2ddl.auto=update
hibernate.default_entity_mode=pojo

17. CONFIGURATION GUIDE
q Log4j configuration : log4j.xml
<logger name="jlook">
<level value="debug" />
</logger>
<logger name="jlook.framework.infrastructure.web.filter.JGlobalFilter">
<level value="info" />
</logger>
<logger name="org.springframework">
<level value="warn" />
</logger>
<logger name="org.springframework.security">
<level value="warn" />
</logger>
<logger name="org.hibernate">
<level value="warn" />
</logger>

18. SITEMESAH
CONFIGURATION
q Site mesh configuration : /WEB-INF/sitemesh.xml
<?xml version="1.0" encoding="UTF-8"?>
<sitemesh>
<property name="decorators-file" value="/WEB-INF/config/decorators.xml" />
<excludes file="${decorators-file}" />
<page-parsers>
<parser default="true" class="com.opensymphony.module.sitemesh.parser.DefaultPageParser"/>
<parser content-type="text/html" class="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />
<parser content-type="text/html;charset=UTF-8"
class="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />
</page-parsers>
<decorator-mappers>
<mapper class="com.opensymphony.module.sitemesh.mapper.PageDecoratorMapper">
<param name="property.1" value="meta.decorator"/>
<param name="property.2" value="decorator"/>
</mapper>
<mapper class="com.opensymphony.module.sitemesh.mapper.FrameSetDecoratorMapper">
</mapper>
<mapper class="com.opensymphony.module.sitemesh.mapper.AgentDecoratorMapper">
<param name="match.MSIE" value="ie"/>
<param name="match.Mozilla [" value="ns"/>
<param name="match.Opera" value="opera"/>
<param name="match.Lynx" value="lynx"/>
</mapper>

19. SITEMESAH
CONFIGURATION
q Site mesh configuration : /WEB-INF/sitemesh.xml
<mapper class="com.opensymphony.module.sitemesh.mapper.PrintableDecoratorMapper">
<param name="decorator" value="printable"/>
<param name="parameter.name" value="printable"/>
<param name="parameter.value" value="true"/>
</mapper>
<mapper class="com.opensymphony.module.sitemesh.mapper.RobotDecoratorMapper">
<param name="decorator" value="robot"/>
</mapper>
<mapper class="com.opensymphony.module.sitemesh.mapper.ParameterDecoratorMapper">
<param name="decorator.parameter" value="decorator"/>
<param name="parameter.name" value="confirm"/>
<param name="parameter.value" value="true"/>
</mapper>
<mapper class="com.opensymphony.module.sitemesh.mapper.FileDecoratorMapper">
</mapper>
<mapper class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper">
<param name="config" value="${decorators-file}" />
</mapper>
</decorator-mappers>
</sitemesh>

20. SITEMESAH
CONFIGURATION
q Decorator configuration : /WEB-INF/config/decorators.xml
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/WEB-INF/decorators">
<excludes>
<pattern>/docs/*</pattern>
<pattern>/console/*</pattern>
<pattern>/WEB-INF/jsp/generic/*</pattern>
<pattern>/WEB-INF/jsp/openapi/*</pattern>
<pattern>/WEB-INF/jsp/error/*</pattern>
</excludes>
<decorator name="head" page="head.jsp"/>
<decorator name="header" page="header.jsp"/>
<decorator name="menu" page="menu.jsp"/>
<decorator name="footer" page="footer.jsp"/>
<decorator name="apilist" page="apilist.jsp"/>
<decorator name="default" page="template_default.jsp">
<pattern>/*</pattern>
</decorator>
<decorator name="test" page="template_single.jsp">
<pattern>/WEB-INF/jsp/test/openapi*</pattern>
</decorator>
<decorator name="docs" page="template_api.jsp">
<pattern>/WEB-INF/jsp/docs/openapi*</pattern>
</decorator>
</decorators>

21. SITEMESH
CONFIGURATION
q Decorators jsp : /WEB-INF/decorators/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><decorator:title default="jlook Application Platform" /></title>
<body leftmargin="0" topmargin="0">
<header>
<hgroup>
<page:applyDecorator name="header" />
</hgroup>
</header>
<div id="wrapper">
<div id="j_frame">
<div id="frame_left"><page:applyDecorator name="menu" /></div>
<div id="frame_main"><decorator:body /></div>
<div id="frame_footer"><page:applyDecorator name="footer" /></div>
</div>
<div id="frame_popup"></div>
</div>
</body>
</html>

22. JAVA SCRIPT BUILD XML
q Java Script build xml : src/jscript/build.xml
<?xml version="1.0" encoding="UTF-8"?>
<project name="jlook js build" default="make-debug”>
<property file="build.properties" />
<property name="docroot" location="../../WebContent" />
<property name="src" location="${docroot}/src" />
<property name="system" location="${src}/system" />
<property name="vendor" location="${src}/vendor" />
<property name="target" location="${docroot}/deploy" />
<property name="resource" location="../../src/main/resources/properties”/>
<filelist id="vendorfiles" dir="${vendor}">
<file name="jquery/jquery-1.6.4.js"/>
<file name="jquery-ui/jquery-ui-1.8.16.custom.min.js"/>
<!--file name="jquery-ui/ui.tabs.closable.js"/-->
<file name="jquery-jqgrid/grid.locale-en.js"/>
<file name="jquery-jqgrid/jquery.jqGrid.src.js"/>
<file name="colorbox/jquery.colorbox.js"/>
</filelist>

23. JAVA SCRIPT BUILD XML
q Java Script build xml : src/jscript/build.xml
<filelist id="systemfiles" dir="${system}">
<file name="jlook.js"/>
<file name="jlook-util.js"/>
<file name="model/signIn.js"/>
<file name="event/events.js"/>
<file name="event/event_handlers.js"/>
<file name="model/grid.js"/>
<file name="model/menu.js"/>
<file name="model/detail.js"/>
<file name="model/search.js"/>
<file name="model/tabs.js”/>
<file name="util/uploader.js"/>
</filelist>
<target name="make-all" depends="init, clean, make-debug, make-prod"/>

24. RESOURCE FILES
q css and JavaScript file : template_default.jsp
<link href="<%=request.getContextPath()%>/css/vendor/jquery-ui/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/vendor/jquery-jqgrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/vendor/menu/style.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/vendor/colorbox/colorbox.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/default.css" type="text/css" media="all" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/system/layout.css" type="text/css" media="all" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/system/uploader.css" type="text/css" media="all" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/system/detail.css" type="text/css" media="all" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/system/tabs.css" type="text/css" media="all" />
<script>var CONTEXT_ROOT = "<%=request.getContextPath()%>";</script>
<script src="<%=request.getContextPath()%>/deploy/0.0.1/jlook-debug.js" type="text/javascript"></script>

25. JAVA SCRIPT FILES

26. METADATA FEATURE
q JObject : All entity inherits from JObject
q objectId : object identifier
q classId : entity identifier
q domainId : domain identifier
q Who-When attributes
è createdBy, createdOn, updatedBy, updateOn

27. METADATA FOR DETAIL
VIEW
q Attribute metadata for detail view

28. METADATA FOR DETAIL
VIEW
q UIType
§ TEXT
§ TIME
§ DATE
§ ARRAY
§ ATTACHMENT
§ REFERENCE
q Encrypt : “password”
q Type : JType name
q TypeId : JType objectId
q Validation : enum, pattern, range
q Value : if reference type è title model

29. METADATA FOR SUMMARY
VIEW
q Response json message for summary view

30. JTYPE METADATA