Language Workbench Challenge 2013 Xtext Submission

Language Workbench Challenge 2013 Xtext Submission

LWC13 Submission

3 Developing the Code Generator

3.1 Reference Implementation

Before implementing a code generator one has to know what the target code is. Therefore a reference implementation has been developed which was coded to large degree manually. From this reference code the templates can be derived. Also this is a manual step.

We use a Java Server Faces (JSF, see

1.2

) based

application, which can be deployed on any Java

Web container (also known as a Servlet container) like Glassfish, JBoss and Apache Tomcat.

The screenshot shows the structure of the web application project. The application is available for download from the project homepage ( JSF-

QL-1.0.zip

)

Large parts of the application are not derivable from the model, they build the skeleton of the project. This is:

• Custom types (src/types/*)

• Custom type converter (src/converter/*)

• Libraries

(WebContent/WEB-INF/lib/*)

• Web Application Descriptor

(WebContent/WEB-INF/web.xml)

• Faces configuration

(WebContent/WEB-INF/faces-config.xml)

• Images

(WebContent/resources/default/img/*)

• Page Templates

(WebContent/resources/default/templates/*)

After describing some necessary configuration

35

LWC13 Submission of the IDE we will focus on the parts which are dependent on the QL model and thus subject of code generation in sub sesction

3.1.4

. These artifacts are:

• Java Bean classes representing the state of a Form (src/forms)

• JSF enabled XHTML pages representing the presentation of a Form (WebContent/forms/*)

3.1.1 IDE Configuration

Webtools

To get a nicely integrated developement environment we will install some com-

ponents of the Web Tools Platform (WTP)

33

into an existing Eclipse installation.

install new software http://download.eclipse.org/releases/juno/

Web, XML, Java EE and OSGi Enterprise Development

• Eclipse Java EE Developer Tools 3.4.0.v201107072300

• JavaServer Faces Tools (JSF) Project 3.4.1.v201208241503

• JST Server Adapters 3.2.200.v20120517_1442

• JST Server UI 3.4.0.v20120503_1042

• JST Server Adapters Extensions 3.3.101.v20120821_1416

• Eclipse Web Developer Tools 3.4.1.v201208170345

• Eclipse Java Web Developer Tools 3.4.1.v201208231800

Tomcat installation

add new server: - tomcat v7

3.1.2 Import and run reference

Checkout from git OR download from project home page @ code.google.com

Import project from git

Checkout instructions:

33 http://www.eclipse.org/webtools/

36

LWC13 Submission https://code.google.com/a/eclipselabs.org/p/lwc13-xtext/source/checkout

Download zip from project homepage

Download zip from: http://code.google.com/a/ eclipselabs.org/p/lwc13-xtext/

Run as MWE2 Workflow

1. /org.eclipse.xtext.example.ql/src/org/eclipse/xtext/example/ql/GenerateQlDsl.mwe2

2. /org.eclipse.xtext.example.qls/src/org/eclipse/xtext/example/qls/GenerateQlsDsl.mwe2

Run configuration

- LWC13 Runtime import existing project lwc13-xtext examples

QLTest

3.1.3 Main Layout

The logical entry to the web application is the welcome file WebContent/index.xhtml declared in WebContent/WEB-INF/web.xml. The index.xhtml composes the main layout with page contents and will later be helpful to integrate the generated artifacts with the web application’s layout by using JSF’s XHTML templating

34

.

10

11

8

9

12

13

14

3

4

1

2

5

6

7

<?xml version=’1.0’ encoding=’UTF-8’ ?>

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns = "http://www.w3.org/1999/xhtml" xmlns :h= "http://java.sun.com/jsf/html" xmlns :ui= "http://java.sun.com/jsf/facelets" >

< body >

<ui:composition template= "/resources/default/templates/defaultLayout.xhtml"

<ui:define name

Hello World!

</ui:define>

</ui:composition>

= "content" >

>

34 http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/

37

LWC13 Submission

15

16

17

</ body >

</ html >

3

4

1

2

5

Subpages of the application should use the index.xhtml placed in WebContent/ itself as their template and overwrite the content section with custom output via the same pattern.

<ui:composition template= "/index.xhtml" >

<ui:define name = "content" >

...my xhtml content

</ui:define>

</ui:composition>

Everything between the opening and closing facelet:define tag within the subpage will be passed into a corresponding facelet:insert section (name attribute is set to ”content”) defined in the template (here: defaultLayout.xhtml) or one of its parent templates when the

HTML output is rendered by the JSF framework.

Default template

We keep the main layout definition and the page contents separated from each other. The

WebContent/index.xhtml

defines the main composition of the application’s structural layout and content of pages as described in section

3.1.3

. Layout template defintions should be placed

in a folder WebContent/resources/*templateName* in our web application.

To change the main layout it is just necessary to change the template reference of the facelets:composite in WebContent/index.xhtml.

3

4

1

2

...

<ui:composition template= "/resources/default/templates/defaultLayout.xhtml" >

...

The reference application is shipped with a default template placed in

WebContent/resources/default/

. It is a very simple one providing only a skeleton

/templates/defaultLayout.xhtml

with basically 3 sections (header, content, footer) where clients can add custom content.

The current web application expects a defined facelets:insert section with name ’content’

38

LWC13 Submission within the template or one of its parents for proper composition. In our reference implementation it is declared in /resources/default/templates/defaultLayout.xhtml.

11

12

13

14

15

9

10

7

8

1

2

3

4

5

6

19

20

21

22

16

17

18

23

24

25

26

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns = "http://www.w3.org/1999/xhtml" xmlns :h= "http://java.sun.com/jsf/html" xmlns :ui= "http://java.sun.com/jsf/facelets" >

<h: head >

< title ><ui:insert name = "title" >LWC 2013 Xtext</ui:insert></ title >

</h: head >

< body >

< div id = "header" >

<ui:insert name = "header" >

<ui:include src = "/resources/default/templates/header.xhtml" />

</ui:insert>

</ div >

< div id = "content" >

<ui:insert name = "content" >

Content area. Compose by use of tag facelet:define & name= "content" .

</ui:insert>

</ div >

< div id = "footer" >

<ui:insert name = "footer" >

<ui:include src = "/resources/default/templates/footer.xhtml" />

</ui:insert>

</ div >

</ body >

</ html >

We added two facelets:insert sections to give the possibility to replace the header and footer. To simplify the concrete JSF compositions later we let JSF include default content for both by use of facelets:include for a fixed source src.

Our structural layout definition which is composed by using

/resources/default/templates/defaultLayout.xhtml

as template in

WebContent/resources/default/ has a Cascading Style Sheet (CSS) layouting can be done.

35

where fine grained

35 http://de.wikipedia.org/wiki/Cascading_Style_Sheets

39

LWC13 Submission

The applications style sheets consist of 2 files.

• container.css - defines styles for main page elements, basically we took the style of http://www.itemis.de/

• base.css - defines extended elements like grids,see http://www.yaml.de/docs/

Because we are not focusing on layout topics, we just did some small things to integrate the style with the contents like adding CSS classes to XHTML elements. The CSS definitions are added to show how dividing of content and styles can be done.

3.1.4 Reference Forms

The basic structure of our web application was described in the previous sections. This was the part of the application which was very general and can be reused for any other application. In the following we will describe the specific content which enables the questionnaire application specified in the LWC 2013 task description.

The questionnaire content basically consist of 3 main artifacts:

• WebContent/forms/index.xhtml - a link for each form will be available here, it uses WebContent/index.xhtml as template and will be the template for concrete forms in our application

• WebContent/forms/HouseOwning.xhtml - this file will implement the questionnaire form, it uses

WebContent/forms/index.xhtml

as its template

• src/forms/HouseOwning.java - the so called BackingBe-

40

LWC13 Submission

an

36

which holds the state of a questionnaire form

Within the reference application there are 3 additional artifacts which can be seen as some kind of utils:

• Money.java - a custom type that can be used in a bean

• MoneyConverter.java - a custom converter which will be used to convert values entered in web pages to custom types used in the bean and vise versa

• TypeFactory.java - a Factory that creates any kind of complex types (e.g. instances of custom type Money)

Form

The form of our reference application consists of different areas where each defines a single element of the questionnaire. Each question has a label and an input element. Whenever the

user changes a value of an input element the page should reload partly by using AJAX

37

.

In the following listings and screenshots you can see how the different parts of the questionnaire are defined and how they are rendered.

The following represents a question which can be answered by yes OR no. The label and checkbox are grouped by using a so called div to create a close relation between them.

4

5

6

7

8

1

2

3

9

10

11

12

< div class = "ym-grid" >

<h:outputLabel styleClass= value =

"ym-g33 ym-gl"

"Did you sell a house in 2010?"

<h:selectBooleanCheckbox styleClass= id

</ div >

= "chkHasSoldHouse" value

</h:selectBooleanCheckbox>

=

<f:ajax execute= "chkHasSoldHouse"

/>

"ym-g50 ym-gl"

"#{houseOwning.hasSoldHouse}" render= "grp_hasSoldHouse_hasBoughtHouse" />

>

The JSF html:outputLabel tag is rendered to a HTML label tag on server side before the server responses on client requests.

36 http://docs.oracle.com/javaee/5/tutorial/doc/bnaqm.html

37 https://en.wikipedia.org/wiki/Ajax_(programming)

41

LWC13 Submission

1

2

3

< label class = "ym-g33 ym-gl" >

Did you sell a house in 2010?

</ label >

The JSF html:selectBooleanCheckbox will be translated in a more complex HTML:input tag.

The most interesting thing is the action definition onclick which lets JSF do some magic via

AJAX to trigger partial page reloads. The base functionality is provided by the JSF framework and some JavaScript libraries.

5

6

7

8

1

2

3

4

< input id = "houseOwningForm:chkHasSoldHouse" class = "ym-g50 ym-gl" type = "checkbox" onclick = "mojarra.ab(

)" this,event,’valueChange’,’houseOwningForm:chkHasSoldHouse’,’houseOwningForm: grp_hasSoldHouse_hasBoughtHouse’ checked = "checked" name = "houseOwningForm:chkHasSoldHouse" >

</ input >

On client side the browser renders the question well grouped by use of some CSS framework classes already mentioned in section

3.1.3

.

The following CSS classes out of WebContent/resources/default/css/base.css are responsible for the shown layout.

• ym-grid - defines that childs should be grouped in a table

• ym-g*number - defines the width of an element

• ym-gl - defines that the element should float to the left of its container

Other question types are following the same pattern of a label and a proper input element to interact with the application.

3

4

5

1

2

6

< div class = "ym-grid" >

<h:outputLabel value =

<h:inputText styleClass styleClass =

= "ym-g60 ym-gl"

"Price the house was sold for:"

"ym-g33 ym-gl"

/> id = "inSellingPrice"

42

Was this manual useful for you? yes no
Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project