Skip to content

Commit

Permalink
TheCoder4eu/BootsFaces-OSP#1075 added an example using the default co…
Browse files Browse the repository at this point in the history 
…mmand with reponsive design
  • Loading branch information
@stephanrauh
stephanrauh committed Aug 1, 2019
1 parent cb89e59 commit 17c1f74
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 68 deletions.
102 changes: 54 additions & 48 deletions src/main/java/test/beans/TestBean.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,169 +20,175 @@
import net.bootsfaces.component.tree.model.Node;
import net.bootsfaces.utils.FacesMessages;


@SessionScoped
@ManagedBean(name = "test")
public class TestBean
implements TreeNodeEventListener, Serializable {
public class TestBean implements TreeNodeEventListener, Serializable {
private static final long serialVersionUID = -4647459610022075061L;
private static final SimpleDateFormat dateFormat = new SimpleDateFormat("dd.MM.yyyy HH:mm:ss");

private String selectedColor;
private Date dataToPick = new Date();

private Node statefullRootNode = null;
private String testField;
private LinkedList<String> messages = new LinkedList<>();
private LinkedList<String> messages = new LinkedList<>();

public TestBean() {
initStatefullRootNode();
}

public Date getDataToPick() {
return dataToPick;
}

public void setDataToPick(Date dataToPick) {
this.dataToPick = dataToPick;
}
public List<String> getMessages() {
return messages;
}

public List<String> getMessages() {
return messages;
}

private void initStatefullRootNode() {
statefullRootNode = new DefaultNodeImpl("root", "arrow-right").withBackColor("#FF1188");
List<Node> nodeList = new ArrayList<Node>();
nodeList.add(new DefaultNodeImpl("Node1", "user"));
nodeList.add(new DefaultNodeImpl("Node2", "envelope"));

List<Node> subNodes = new ArrayList<Node>();
subNodes.add(new DefaultNodeImpl("Subnode1", "user"));
subNodes.add(new DefaultNodeImpl("Subnode2", "main"));
subNodes.add(new DefaultNodeImpl("Subnode3", "arrow-left"));
DefaultNodeImpl nx = new DefaultNodeImpl("Child4-Link", "arrow-right");
nx.setHRef("http://www.google.it");
subNodes.add(nx);

DefaultNodeImpl child5 = new DefaultNodeImpl("Child5", "arrow-right");
child5.setColor("#FF0000");
List<Node> subSubNodes = new ArrayList<Node>();
subSubNodes.add(new DefaultNodeImpl("GrandChild 1", "play-circle"));
subSubNodes.add(new DefaultNodeImpl("GrandChild 2", "play-circle"));
child5.getChilds().addAll(subSubNodes);
subNodes.add(child5);

DefaultNodeImpl parent3 = new DefaultNodeImpl("Parent3", "signal");
parent3.setExpanded(false);
parent3.getChilds().addAll(subNodes);
nodeList.add(parent3);

statefullRootNode.getChilds().addAll(nodeList);
}

public Node getTreeModel() {
return statefullRootNode;
}

public void setTreeModel(Node rootNode) {
this.statefullRootNode = rootNode;
}

public String getSelectedColor() {
return selectedColor;
}

public void setSelectedColor(String selectedColor) {
this.selectedColor = selectedColor;
}

public Node getTestModel1() {
Node rootNode = new DefaultNodeImpl("root", "arrow-right").withBackColor("#FF9988");
List<Node> nodeList = new ArrayList<>();
nodeList.add(new DefaultNodeImpl("Parent1", "user"));
nodeList.add(new DefaultNodeImpl("Parent2", "envelope"));

List<Node> subNodes = new ArrayList<>();
subNodes.add(new DefaultNodeImpl("Child1", "user"));
subNodes.add(new DefaultNodeImpl("Child2", "main"));
subNodes.add(new DefaultNodeImpl("Child3", "arrow-left"));
DefaultNodeImpl nx = new DefaultNodeImpl("Child4-Link", "arrow-right");
nx.setHRef("http://www.google.it");
subNodes.add(nx);

DefaultNodeImpl child5 = new DefaultNodeImpl("Child5", "arrow-right");
child5.setColor("#FF0000");
List<Node> subSubNodes = new ArrayList<>();
subSubNodes.add(new DefaultNodeImpl("GrandChild 1", "play-circle"));
subSubNodes.add(new DefaultNodeImpl("GrandChild 2", "play-circle"));
child5.getChilds().addAll(subSubNodes);
subNodes.add(child5);

DefaultNodeImpl parent3 = new DefaultNodeImpl("Parent3", "signal");
parent3.setExpanded(false);
parent3.getChilds().addAll(subNodes);
nodeList.add(parent3);

rootNode.getChilds().addAll(nodeList);
return rootNode;
}

public Node getTestModel2() {
Node rootNode = new DefaultNodeImpl("root", "arrow-right").withBackColor("#119988");

List<String> tags = new ArrayList<String>();
tags.add("TAG 1");
tags.add("TAG 2");
List<Node> nodeList = new ArrayList<Node>();
nodeList.add(new DefaultNodeImpl("Node1", "rocket").withUseFaIcons(true).withBackColor("#FFFF00").withColor("#0000FF").withTags(tags));
nodeList.add(new DefaultNodeImpl("Node1", "rocket").withUseFaIcons(true).withBackColor("#FFFF00")
.withColor("#0000FF").withTags(tags));
nodeList.add(new DefaultNodeImpl("Node2", "soccer-ball-o").withUseFaIcons(true).withDisabled(true));

rootNode.getChilds().addAll(nodeList);

return rootNode;
}
@Override

@Override
public void processValueSelected(TreeNodeSelectionEvent event) {
if (event.isSelected())
messages.addFirst("Node selected: '" + event.getNode().getText() + "'");
else
messages.addFirst("Node unselected: '" + event.getNode().getText() + "'");
if (event.isSelected())
messages.addFirst("Node selected: '" + event.getNode().getText() + "'");
else
messages.addFirst("Node unselected: '" + event.getNode().getText() + "'");
}

@Override
public void processValueChecked(TreeNodeCheckedEvent event) {
if (event.isChecked())
messages.addFirst("Node checked: '" + event.getNode().getText() + "'");
else
messages.addFirst("Node unchecked: '" + event.getNode().getText() + "'");
}
@Override
public void processValueExpanded(TreeNodeExpandedEvent event) {
if (event.isExpanded())
messages.addFirst("Node expanded: '" + event.getNode().getText() + "'");
else
messages.addFirst("Node collapsed: '" + event.getNode().getText() + "'");
}
if (event.isChecked())
messages.addFirst("Node checked: '" + event.getNode().getText() + "'");
else
messages.addFirst("Node unchecked: '" + event.getNode().getText() + "'");
}

@Override
public void processValueExpanded(TreeNodeExpandedEvent event) {
if (event.isExpanded())
messages.addFirst("Node expanded: '" + event.getNode().getText() + "'");
else
messages.addFirst("Node collapsed: '" + event.getNode().getText() + "'");
}

/**
* Button methods for form test
*/
public void button1() {
FacesMessages.info("BUTTON 1", "BUTTON 1 WAS PRESSED");
}

public void button2() {
FacesMessages.info("BUTTON 2", "BUTTON 2 WAS PRESSED");
}

public void button3() {
FacesMessages.info("BUTTON 3", "BUTTON 3 WAS PRESSED");
}

public void button4() {
FacesMessages.info("BUTTON 4", "BUTTON 4 WAS PRESSED");
}


public void button5() {
FacesMessages.info("BUTTON 5", "BUTTON 5 WAS PRESSED");
}

public void updateTestField() {
this.testField = "Updated by Ajax Event! ;) You've selected " + dateFormat.format(dataToPick);
}
Expand Down
92 changes: 72 additions & 20 deletions src/main/webapp/forms/DefaultCommand.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<b:listLinks>
<b:navLink href="#defaultcommand" value="DefaultCommand (&lt;b:defaultCommand /&gt;)" />
<b:navLink href="#basic_usage" value="Basic usage" />
<b:navLink href="#responsive_design" value="Responsive Design" />
<b:navLink href="#multiple_default_commands_in_the_same_page" value="Multiple default commands in the same page" />
<b:navLink href="#search_expressions" value="Search Expressions" />
<b:navLink href="#reference_section" value="Reference section" />
Expand All @@ -35,13 +36,12 @@

<b:panel title="Live preview" look="info" collapsible="false">
<h:form>
<p>The default command button is 'Button2'.</p>
<p>The default command button is 'Button1'.</p>
<b:inputText label="InputText"></b:inputText>
<b:inputTextarea label="InputTextArea"></b:inputTextarea>
<b:commandButton id="button1" action="#{test.button1}" value="Button1" ajax="true" update="standardMsg" />
<b:commandButton id="button2" action="#{test.button2}" value="Button2" ajax="true" look="primary" update="standardMsg" />
<b:commandButton id="button1" action="#{test.button1}" value="Button1" ajax="true" look="primary" update="standardMsg" />
<b:commandButton id="button2" action="#{test.button2}" value="Button2" ajax="true" update="standardMsg" />
<b:commandButton id="button3" action="#{test.button3}" value="Button3" ajax="true" icon="plus-sign" update="standardMsg" />
<b:defaultCommand target="button2" />
<b:defaultCommand target="button1" />
<br/><br/>
<b:messages id="standardMsg" globalOnly="true" />
</h:form>
Expand All @@ -52,10 +52,10 @@
<![CDATA[
<h:form>
<b:inputText></b:inputText>
<b:commandButton id="button1" action="&num;{test.button1}" value="Button1" ajax="true" update="standardMsg" />
<b:commandButton id="button2" action="&num;{test.button2}" value="Button2" ajax="true" look="primary" update="standardMsg" />
<b:commandButton id="button1" action="&num;{test.button1}" value="Button1" ajax="true" look="primary" update="standardMsg" />
<b:commandButton id="button2" action="&num;{test.button2}" value="Button2" ajax="true" update="standardMsg" />
<b:commandButton id="button3" action="&num;{test.button3}" value="Button3" ajax="true" icon="plus-sign" update="standardMsg" />
<b:defaultCommand target="button2" />
<b:defaultCommand target="button1" />
<br/><br/>
<b:messages id="standardMsg" globalOnly="true" />
</h:form>
Expand All @@ -65,6 +65,56 @@
</f:facet>
</b:panel>

<h1><a id="responsive_design">Responsive design</a><b:badge value="since 1.4.2" /></h1>
<p>Since BootsFaces 1.4.2, the <code>&lt;b:defaultCommand /&gt;</code> also works with
<code>&lt;b:commandButtons&gt;></code>
bearing a <code>col-*</code> or <code>span</code> attribute. Kudos go to GitHub user
geopossachs who kindly contributed this improvement.
</p>

<b:panel title="Live preview" look="info" collapsible="false">
<h:form>
<b:row>
<p>The default command button is 'Button2'.</p>
</b:row>
<b:row>
<b:inputText label="InputText"></b:inputText>
</b:row>
<b:row>
<b:commandButton col-md="2" id="button1" action="#{test.button1}" value="Button1" ajax="true" update="standardMsg" />
<b:commandButton col-md="2" id="button2" action="#{test.button2}" value="Button2" ajax="true" look="primary" update="standardMsg" />
<b:commandButton col-md="2" id="button3" action="#{test.button3}" value="Button3" ajax="true" icon="plus-sign" update="standardMsg" />
<b:defaultCommand target="button2" />
</b:row>
<b:row>
<b:messages id="standardMsg" globalOnly="true" />
</b:row>
</h:form>
<f:facet name="footer">
<strong>JSF markup:</strong>
<b:panel>
<script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
<![CDATA[
<h:form>
<b:row>
<b:inputText></b:inputText>
</b:row>
<b:row>
<b:commandButton col-md="2" id="button1" action="&num;{test.button1}" value="Button1" ajax="true" update="standardMsg" />
<b:commandButton col-md="2" id="button2" action="&num;{test.button2}" value="Button2" ajax="true" look="primary" update="standardMsg" />
<b:commandButton col-md="2" id="button3" action="&num;{test.button3}" value="Button3" ajax="true" icon="plus-sign" update="standardMsg" />
<b:defaultCommand target="button2" />
<br/><br/>
</b:row>
<b:messages id="standardMsg" globalOnly="true" />
</h:form>
]]>
</script>
</b:panel>
</f:facet>
</b:panel>



<h2><a id="multiple_default_commands_in_the_same_page">Multiple default commands in the same page</a></h2>
<p>
Expand All @@ -78,22 +128,23 @@
<b:panel title="Live preview" look="info" collapsible="false">
<p>First Form (focus on input text and press enter key)</p>
<h:form>
<p>The default command button is 'Button 2'</p>
<p>The default command button is 'Button 3'</p>
<b:inputText></b:inputText>
<b:commandButton id="button_1" actionListener="#{test.button1}" value="Button 1" ajax="true" update="standardMsg_t1" />
<b:commandButton id="button_2" actionListener="#{test.button2}" value="Button 2" ajax="true" look="primary" update="standardMsg_t1" />
<b:defaultCommand target="button_2" />
<b:commandButton id="button_2" actionListener="#{test.button2}" value="Button 2" ajax="true" update="standardMsg_t1" />
<b:commandButton id="button_3" actionListener="#{test.button3}" value="Button 3" ajax="true" look="primary" update="standardMsg_t1" />
<b:defaultCommand target="button_3" />
<br/><br/>
<b:messages id="standardMsg_t1" globalOnly="true" />
</h:form>
<hr/>
<p>Second Form (focus on input text and press enter key)</p>
<h:form>
<p>The default command button is 'Button 3'</p>
<p>The default command button is 'Button 4'</p>
<b:inputText></b:inputText>
<b:commandButton id="button_3" actionListener="#{test.button3}" value="Button 3" ajax="true" look="primary" update="standardMsg_k1" />
<b:commandButton id="button_4" actionListener="#{test.button4}" value="Button 4" ajax="true" update="standardMsg_k1" />
<b:defaultCommand target="button_3" />
<b:commandButton id="button_4" actionListener="#{test.button4}" value="Button 4" ajax="true" look="primary" update="standardMsg_k1" />
<b:commandButton id="button_5" actionListener="#{test.button5}" value="Button 5" ajax="true" update="standardMsg_k1" />
<b:defaultCommand target="button_4" />
<br/><br/>
<b:messages id="standardMsg_k1" globalOnly="true" />
</h:form>
Expand All @@ -107,8 +158,9 @@
<p>The default command button is 'Button T2'</p>
<b:inputText></b:inputText>
<b:commandButton id="button_1" actionListener="&num;{test.button1}" value="Button 1" ajax="true" update="standardMsg_t1" />
<b:commandButton id="button_2" actionListener="&num;{test.button2}" value="Button 2" ajax="true" look="primary" update="standardMsg_t1" />
<b:defaultCommand target="button_2" />
<b:commandButton id="button_2" actionListener="&num;{test.button2}" value="Button 2" ajax="true" update="standardMsg_t1" />
<b:commandButton id="button_3" actionListener="&num;{test.button3}" value="Button 3" ajax="true" look="primary" update="standardMsg_t1" />
<b:defaultCommand target="button_2" />
<br/><br/>
<b:messages id="standardMsg_t1" globalOnly="true" />
</h:form>
Expand All @@ -117,9 +169,9 @@
<h:form>
<p>The default command button is 'Button K1'</p>
<b:inputText></b:inputText>
<b:commandButton id="button_3" actionListener="&num;{test.button3}" value="Button 3" ajax="true" look="primary" update="standardMsg_k1" />
<b:commandButton id="button_4" actionListener="&num;{test.button4}" value="Button 4" ajax="true" update="standardMsg_k1" />
<b:defaultCommand target="button_3" />
<b:commandButton id="button_3" actionListener="&num;{test.button4}" value="Button 3" ajax="true" look="primary" update="standardMsg_k1" />
<b:commandButton id="button_4" actionListener="&num;{test.button5}" value="Button 4" ajax="true" update="standardMsg_k1" />
<b:defaultCommand target="button_4" />
<br/><br/>
<b:messages id="standardMsg_k1" globalOnly="true" />
</h:form>
Expand Down

0 comments on commit 17c1f74

Please sign in to comment.