Skip to content

Commit

Permalink
Improved the search expression demo
Browse files Browse the repository at this point in the history
  • Loading branch information
stephanrauh committed May 16, 2015
1 parent ec421bc commit b3438d0
Show file tree
Hide file tree
Showing 7 changed files with 922 additions and 31 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
package de.beyondjava.jsf.sample.carshop;

import java.io.Serializable;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="dtContextMenuView")
@SessionScoped
public class ContextMenuView implements Serializable {

@ManagedProperty(value="#{carPool.carPool}")
private List<Car> cars;

private Car selectedCar;

public List<Car> getCars() {
return cars;
}

public Car getSelectedCar() {
return selectedCar;
}

public void setSelectedCar(Car selectedCar) {
this.selectedCar = selectedCar;
}

public void deleteCar() {
getCars().remove(selectedCar);
selectedCar = null;
}

public void setCars(List<Car> cars) {
this.cars = cars;
}
}
135 changes: 104 additions & 31 deletions PFSearchExpressions/src/main/webapp/index.xhtml
Original file line number Diff line number Diff line change
Expand Up @@ -8,44 +8,117 @@
>

<h:head>
<h:outputStylesheet library="sh" name="shCore.css" />
<h:outputStylesheet library="sh" name="shCoreEclipse.css" />
<h:outputScript library="sh" name="shCore.js" target="head" />
<h:outputScript library="sh" name="shBrushXml.js" target="head" />
<h:outputScript library="sh" name="shBrushJava.js" target="head" />
<h:outputScript library="sh" name="shBrushGroovy.js" target="head" />
<h:outputScript library="sh" name="shBrushJScript.js" target="head" />

</h:head>
<h:body>
<b:container>
<b:panel
title="Using @row, @column and @cell with a PrimeFaces DataTable">
<h:form id="formID">
<prime:contextMenu for="@form:carsId:@column(innerPriceID)" event="mouseover">
<prime:menuitem value="decline offer" icon="ui-icon-close"
update="@form"
oncomplete="alert('This offer is way to expensive!')" />
</prime:contextMenu>
<p>This example show how to implement a column-specific context
menu to a PrimeFaces DataTable. It also demonstrates how to use the
search expressions @row, @column and @cell to update and individual
row, column or cell, respectively.</p>

<b:tabView>
<b:tab title="live demo">
<h:form id="formID">
<prime:contextMenu for="@form:carsId:@column(innerPriceID)"
event="mouseover" selectionMode="single">
<prime:menuitem value="decline offer" icon="ui-icon-close"
update="@form"
oncomplete="alert('This offer is way to expensive!')" />
</prime:contextMenu>

<prime:contextMenu for="@form:carsId:@column(innerBrandID)"
selectionMode="single">
<prime:menuitem value="ignore this brand" icon="ui-icon-close"
update="@form" oncomplete="alert('I hate this brand!')" />
<prime:menuitem value="choose this brand" icon="ui-icon-close"
update="@form" oncomplete="alert('I like this brand!')" />
</prime:contextMenu>

<prime:dataTable value="#{carPool.carPool}" var="car" id="carsId"
rowKey="#{car.price}" selectionMode="single">
<prime:column headerText="Brand">
<h:panelGroup id="innerBrandID">#{car.brand}</h:panelGroup>
</prime:column>
<prime:column headerText="Type">
<h:panelGroup id="innerTypeID">#{car.type}</h:panelGroup>
</prime:column>
<prime:column headerText="Price">
<h:panelGroup id="innerPriceID">#{car.price}</h:panelGroup>
</prime:column>
</prime:dataTable>
<prime:commandButton value="Update price in row 2"
actionListener="#{carPool.initRandomCarPool}"
update="carsId:@cell(innerPriceID,1)"></prime:commandButton>
<prime:commandButton value="Update price column"
actionListener="#{carPool.initRandomCarPool}"
update="carsId:@column(innerPriceID)"></prime:commandButton>
<prime:commandButton value="Update second Row"
actionListener="#{carPool.initRandomCarPool}"
update="carsId:@row(1)"></prime:commandButton>
<prime:commandButton value="Update the entire Table"
actionListener="#{carPool.initRandomCarPool}" update="carsId"></prime:commandButton>
</h:form>
</b:tab>
<b:tab title="JSF markup of the context menu">
<script type="syntaxhighlighter" class="brush: xml; toolbar: false;gutter: false; first-line: 1">
<![CDATA[
<prime:contextMenu for="@form:carsId:@column(innerPriceID)"
event="mouseover" selectionMode="single">
<prime:menuitem value="decline offer" icon="ui-icon-close"
update="@form"
oncomplete="alert('This offer is way to expensive!')" />
</prime:contextMenu>

<prime:dataTable value="#{carPool.carPool}" var="car" id="carsId"
rowKey="#{car.price}"
selectionMode="single">
<prime:column headerText="Brand">
<h:panelGroup id="innerBrandID">#{car.brand}</h:panelGroup>
</prime:column>
<prime:column headerText="Type">
<h:panelGroup id="innerTypeID">#{car.type}</h:panelGroup>
</prime:column>
<prime:column headerText="Price">
<h:panelGroup id="innerPriceID">#{car.price}</h:panelGroup>
</prime:column>
</prime:dataTable>
<prime:commandButton value="Update price in row 2"
actionListener="#{carPool.initRandomCarPool}"
update="carsId:@cell(innerPriceID,1)"></prime:commandButton>
<prime:commandButton value="Update price column"
actionListener="#{carPool.initRandomCarPool}"
update="carsId:@column(innerPriceID)"></prime:commandButton>
<prime:commandButton value="Update second Row"
actionListener="#{carPool.initRandomCarPool}"
update="carsId:@row(1)"></prime:commandButton>
<prime:commandButton value="Update the entire Table"
actionListener="#{carPool.initRandomCarPool}" update="carsId"></prime:commandButton>
</h:form>
<prime:contextMenu for="@form:carsId:@column(innerBrandID)"
selectionMode="single">
<prime:menuitem value="ignore this brand" icon="ui-icon-close"
update="@form" oncomplete="alert('I hate this brand!')" />
<prime:menuitem value="choose this brand" icon="ui-icon-close"
update="@form" oncomplete="alert('I like this brand!')" />
</prime:contextMenu>
]]>
</script>
<p>Note that it's important to set the attributes <code>rowKey</code> and <code>selectionMode="single"</code> of the PrimeFaces DataTable.
Otherwise, the context menus won't show.</p>
<script type="syntaxhighlighter" class="brush: xml; toolbar: false;gutter: false; first-line: 1">
<![CDATA[
<prime:dataTable value="&num;{carPool.carPool}" var="car" id="carsId"
rowKey="#{car.price}" selectionMode="single">
]]>
</script>
</b:tab>
<b:tab title="JSF markup of the command buttons">
<script type="syntaxhighlighter" class="brush: xml; toolbar: false;gutter: false; first-line: 1">
<![CDATA[
<prime:commandButton value="Update price in row 2"
actionListener="&num;{carPool.initRandomCarPool}"
update="carsId:@cell(innerPriceID,1)" />
<prime:commandButton value="Update price column"
actionListener="&num;{carPool.initRandomCarPool}"
update="carsId:@column(innerPriceID)" />
<prime:commandButton value="Update second Row"
actionListener="&num;{carPool.initRandomCarPool}"
update="carsId:@row(1)" />
<prime:commandButton value="Update the entire Table"
actionListener="&num;{carPool.initRandomCarPool}" update="carsId"/>
]]>
</script>
</b:tab>
</b:tabView>
</b:panel>
</b:container>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
</h:body>
</html>
69 changes: 69 additions & 0 deletions PFSearchExpressions/src/main/webapp/resources/sh/shBrushXml.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/**
* SyntaxHighlighter
* http://alexgorbatchev.com/SyntaxHighlighter
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
*
* @version
* 3.0.83 (July 02 2010)
*
* @copyright
* Copyright (C) 2004-2010 Alex Gorbatchev.
*
* @license
* Dual licensed under the MIT and GPL licenses.
*/
;(function()
{
// CommonJS
typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;

function Brush()
{
function process(match, regexInfo)
{
var constructor = SyntaxHighlighter.Match,
code = match[0],
tag = new XRegExp('(&lt;|<)[\\s\\/\\?]*(?<name>[:\\w-\\.]+)', 'xg').exec(code),
result = []
;

if (match.attributes != null)
{
var attributes,
regex = new XRegExp('(?<name> [\\w:\\-\\.]+)' +
'\\s*=\\s*' +
'(?<value> ".*?"|\'.*?\'|\\w+)',
'xg');

while ((attributes = regex.exec(code)) != null)
{
result.push(new constructor(attributes.name, match.index + attributes.index, 'color1'));
result.push(new constructor(attributes.value, match.index + attributes.index + attributes[0].indexOf(attributes.value), 'string'));
}
}

if (tag != null)
result.push(
new constructor(tag.name, match.index + tag[0].indexOf(tag.name), 'keyword')
);

return result;
}

this.regexList = [
{ regex: new XRegExp('(\\&lt;|<)\\!\\[[\\w\\s]*?\\[(.|\\s)*?\\]\\](\\&gt;|>)', 'gm'), css: 'color2' }, // <![ ... [ ... ]]>
{ regex: SyntaxHighlighter.regexLib.xmlComments, css: 'comments' }, // <!-- ... -->
{ regex: new XRegExp('(&lt;|<)[\\s\\/\\?]*(\\w+)(?<attributes>.*?)[\\s\\/\\?]*(&gt;|>)', 'sg'), func: process }
];
};

Brush.prototype = new SyntaxHighlighter.Highlighter();
Brush.aliases = ['xml', 'xhtml', 'xslt', 'html'];

SyntaxHighlighter.brushes.Xml = Brush;

// CommonJS
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();
Loading

0 comments on commit b3438d0

Please sign in to comment.