Differences

This shows you the differences between two versions of the page.

Link to this comparison view

dynamic_panel [2012/04/02 12:16]
srdjan.lukovic [UML Model] 		dynamic_panel [2012/07/09 10:54] (current)
srdjan.lukovic [GUI Code]
Line 1: Line 1:
-====== Dynamic Panel Sample ====== +====== Dynamic Panel ====== 
-This sample introduces often used //GUIDynamicContentPanel//.+ 
 +**Dynamic Panel** is a [[SOLoist Sample Applications|SOLoist sample application]] that demonstrates a panel with dynamic contents that are programmatically created by the backend UI code triggered from the client, using //GUIDynamicContentPanel//. 
 + 
 +Selecting an object of //Person// from the combo box will show its details on the right. The details will be bordered by a red or a blue line, depending on the gender of the selected person. In addition, the details will have some additional information if the selected person is a //Bank Adviser//. 
 + 
 +The backend processing that creates the contents of a dynamic panel is triggerred when the dynamic panel gets a new value on its input pin. 
  
 ==== Live example ==== ==== Live example ====
  
-[[http://soloistdemo.org/SampleApplications/personcombo.html]]+[[http://soloistdemo.org/SampleApplications/personcombo.html]]\\ 
 +[[http://soloistdemo.org/SampleApplications/oql?q=SELECT+p%2C+p.name%2C+p.gender%2C+p.age%2C+p.dateOfBirth%2C+p.height%2C+p.isMarried%2C+p.photo%2C+p.rootFolder%0D%0AFROM+Person+p&f=html | OQL Query: Persons]] 
 +|{{screen:dynamicpanel.png?250}}|
  
 ===== UML Model ===== ===== UML Model =====
Line 14: Line 21:
 ===== GUI Code ===== ===== GUI Code =====
 <code java> <code java>
-//...+package rs.sol.sampleapps; 
 + 
 +import rs.sol.sampleapps.gui.GUIPersonDetails; 
 +import rs.sol.soloist.helpers.init.DefaultContextInit; 
 +import rs.sol.soloist.helpers.init.Initializer; 
 +import rs.sol.soloist.helpers.init.InitializerFailedException; 
 +import rs.sol.soloist.server.guiconfiguration.components.GUIApplicationComponent; 
 +import rs.sol.soloist.server.guiconfiguration.components.GUILabelComponent; 
 +import rs.sol.soloist.server.guiconfiguration.components.GUIPanelComponent; 
 +import rs.sol.soloist.server.guiconfiguration.construction.GUIComponentBinding; 
 +import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIInput; 
 +import rs.sol.soloist.server.guiconfiguration.layout.VerticalAlignment; 
 +import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIFindAllInstancesSAPComponent; 
 +import rs.sol.soloist.server.server.SoloistServiceServlet; 
 + 
 +public enum PersonCombo implements Initializer{ 
 +  
 + INSTANCE; 
 +  
 + @Override 
 + public void init() throws InitializerFailedException 
 + { 
 + GUIApplicationComponent page = new GUIApplicationComponent(); 
 + page.setName("PersonCombo"); 
 + SoloistServiceServlet.registerApplication(page); 
 + page.setContext(DefaultContextInit.getRoot()); 
 +  
 + GUIPanelComponent root = GUIPanelComponent.createFlow(page); 
 +  
 + GUILabelComponent title = GUILabelComponent.create(root, "Dynamic Panel"); 
 + title.setStyle("titleStyle"); 
 +  
 + GUIPanelComponent topPanel = GUIPanelComponent.createFlow(root); 
 + topPanel.setStyle("topPanel"); 
 +  
 + GUIPanelComponent horizontal = GUIPanelComponent.createHorizontal(topPanel, VerticalAlignment.TOP); 
 +  
 + GUILabelComponent.create(horizontal, "Choose person:").setStyle("margin3"); 
 + GUIFindAllInstancesSAPComponent allPersons = GUIFindAllInstancesSAPComponent.create(horizontal, Person.CLASSIFIER); 
 + GUIInput comboBox = GUIInput.createCombo(horizontal); 
 + GUIComponentBinding.create(allPersons.opValue(), comboBox.ipCollection()); 
 +  
 + GUIPersonDetails pd = new GUIPersonDetails(); 
 + horizontal.add(pd); 
 +  
 + GUIComponentBinding.create(comboBox.opValue(), pd.ipElement()); 
 + } 
 +} 
 +</code> 
 + 
 +<code java GUIPersonDetails.java> 
 +    @Override 
 + protected GUIContainerComponent getDynamicContents(IElement el) { 
 + GUIPanelComponent rootPanel = GUIPanelComponent.createFlow(null); 
 + rootPanel.setStyle("person_details"); 
 + 
 + Person p = (Person) el; 
 + if (p == null) { 
 + GUILabelComponent.create(rootPanel, "No Persons selected."); 
 + return rootPanel; 
 + } 
 + 
 + GUIPanelComponent table = GUIPanelComponent.createTable(rootPanel); 
 + 
 + int row = 0; 
 + if (p instanceof BankAdviser) { 
 + GUILabelComponent.create(table, "Bank: ", row, 0); 
 + GUILabelComponent.create(table, Text.stringValue(((BankAdviser) p).bank), row++, 1); 
 + } 
 + 
 + GUILabelComponent.create(table, "Name: ", row, 0); 
 + GUILabelComponent.create(table, Text.stringValue(p.name), row++, 1); 
 + GUILabelComponent.create(table, "Is married? ", row, 0); 
 + GUILabelComponent.create(table, p.isMarried.val().toBoolean() ? "YES" : "NO", row++, 1); 
 + 
 + if (Gender.MALE.equals(p.gender.val())) { 
 + GUILabelComponent.create(table, "Age: ", row, 0); 
 + GUILabelComponent.create(table, p.age.val().toString(), row++, 1); 
 + table.setStyle("male"); 
 + } else { 
 + table.setStyle("female"); 
 + } 
 + 
 + return rootPanel; 
 + }
 </code> </code>

Trace: • dynamic_panel • element_component

Print/export