Differences

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

Link to this comparison view

dynamic_panel [2012/04/02 12:17]
srdjan.lukovic [GUI Code] 		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 20: Line 27:
 import rs.sol.soloist.helpers.init.Initializer; import rs.sol.soloist.helpers.init.Initializer;
 import rs.sol.soloist.helpers.init.InitializerFailedException; import rs.sol.soloist.helpers.init.InitializerFailedException;
-import rs.sol.soloist.server.builtindomains.builtindatatypes.Text; 
 import rs.sol.soloist.server.guiconfiguration.components.GUIApplicationComponent; import rs.sol.soloist.server.guiconfiguration.components.GUIApplicationComponent;
 import rs.sol.soloist.server.guiconfiguration.components.GUILabelComponent; import rs.sol.soloist.server.guiconfiguration.components.GUILabelComponent;
 import rs.sol.soloist.server.guiconfiguration.components.GUIPanelComponent; import rs.sol.soloist.server.guiconfiguration.components.GUIPanelComponent;
 import rs.sol.soloist.server.guiconfiguration.construction.GUIComponentBinding; import rs.sol.soloist.server.guiconfiguration.construction.GUIComponentBinding;
-import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUICollectionInput; +import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIInput;
-import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIComboWidget; +
-import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIElementComponent;+
 import rs.sol.soloist.server.guiconfiguration.layout.VerticalAlignment; import rs.sol.soloist.server.guiconfiguration.layout.VerticalAlignment;
 import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIFindAllInstancesSAPComponent; import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIFindAllInstancesSAPComponent;
Line 40: Line 44:
  {  {
  GUIApplicationComponent page = new GUIApplicationComponent();  GUIApplicationComponent page = new GUIApplicationComponent();
- page.name.set(Text.fromString("PersonCombo")); + page.setName("PersonCombo");
  SoloistServiceServlet.registerApplication(page);  SoloistServiceServlet.registerApplication(page);
- page.context.set(DefaultContextInit.getRoot());+ page.setContext(DefaultContextInit.getRoot());
   
  GUIPanelComponent root = GUIPanelComponent.createFlow(page);  GUIPanelComponent root = GUIPanelComponent.createFlow(page);
   
  GUILabelComponent title = GUILabelComponent.create(root, "Dynamic Panel");  GUILabelComponent title = GUILabelComponent.create(root, "Dynamic Panel");
- title.styleName.set(Text.fromString("titleStyle"));+ title.setStyle("titleStyle");
   
  GUIPanelComponent topPanel = GUIPanelComponent.createFlow(root);  GUIPanelComponent topPanel = GUIPanelComponent.createFlow(root);
- topPanel.styleName.set(Text.fromString("topPanel"));+ topPanel.setStyle("topPanel");
   
  GUIPanelComponent horizontal = GUIPanelComponent.createHorizontal(topPanel, VerticalAlignment.TOP);  GUIPanelComponent horizontal = GUIPanelComponent.createHorizontal(topPanel, VerticalAlignment.TOP);
   
- GUILabelComponent.create(horizontal, "Choose person:").styleName.set(Text.fromString("margin3")); + GUILabelComponent.create(horizontal, "Choose person:").setStyle("margin3"); 
-  + GUIFindAllInstancesSAPComponent allPersons = GUIFindAllInstancesSAPComponent.create(horizontal, Person.CLASSIFIER); 
- GUIFindAllInstancesSAPComponent allPersons = GUIFindAllInstancesSAPComponent.create(horizontal, Person.FQ_TYPE_NAME); + GUIInput comboBox = GUIInput.createCombo(horizontal); 
- GUIElementComponent comboBox = GUIElementComponent.createInput(horizontal, new GUIComboWidget(), new GUICollectionInput()); + GUIComponentBinding.create(allPersons.opValue(), comboBox.ipCollection());
- GUIComponentBinding.create(allPersons.value, GUICollectionInput.get(comboBox).collection);+
   
  GUIPersonDetails pd = new GUIPersonDetails();  GUIPersonDetails pd = new GUIPersonDetails();
- pd.parent.set(horizontal);+ horizontal.add(pd);
   
- GUIComponentBinding.create(comboBox.value, pd.element);+ GUIComponentBinding.create(comboBox.opValue(), pd.ipElement());
  }  }
 } }
 </code> </code>
  
-<code java> +<code java GUIPersonDetails.java>
-    //GUIPersonDetails.java+
     @Override     @Override
-    protected GUIContainerComponent getDynamicContents(IElement el) + protected GUIContainerComponent getDynamicContents(IElement el) { 
-    { + GUIPanelComponent rootPanel = GUIPanelComponent.createFlow(null); 
-     GUIPanelComponent rootPanel = GUIPanelComponent.createFlow(null); + rootPanel.setStyle("person_details"); 
-     rootPanel.styleName.set(Text.fromString("person_details")); + 
-      + Person p = (Person) el; 
-     Person p = (Person)el; + if (p == null) { 
-     if (p == null) + GUILabelComponent.create(rootPanel, "No Persons selected."); 
-    { + return rootPanel; 
-     GUILabelComponent.create(rootPanel, "No Persons selected."); + } 
-     return rootPanel; + 
-     } + GUIPanelComponent table = GUIPanelComponent.createTable(rootPanel); 
-      + 
-     GUIPanelComponent table = GUIPanelComponent.createTable(rootPanel); + int row = 0; 
-      + if (p instanceof BankAdviser) { 
-     int row = 0; + GUILabelComponent.create(table, "Bank: ", row, 0); 
-     if (p instanceof BankAdviser) + GUILabelComponent.create(table, Text.stringValue(((BankAdviser) p).bank), row++, 1); 
-    { + } 
-     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, "Name: ", row, 0); + GUILabelComponent.create(table, p.isMarried.val().toBoolean() ? "YES" : "NO", row++, 1); 
-     GUILabelComponent.create(table, Text.stringValue(p.name), row++, 1); + 
-     GUILabelComponent.create(table, "Is married? ", row, 0); + if (Gender.MALE.equals(p.gender.val())) { 
-     GUILabelComponent.create(table, p.isMarried.val().toBoolean() ? "YES" : "NO", row++, 1); + GUILabelComponent.create(table, "Age: ", row, 0); 
-      + GUILabelComponent.create(table, p.age.val().toString(), row++, 1); 
-     if (Gender.MALE.equals(p.gender.val())) + table.setStyle("male"); 
-    { + } else { 
-     GUILabelComponent.create(table, "Age: ", row, 0); + table.setStyle("female"); 
-     GUILabelComponent.create(table, p.age.val().toString(), row++, 1); + } 
-     table.styleName.set(Text.fromString("male")); + 
-     } + return rootPanel; 
-    else + }
-    { +
-     table.styleName.set(Text.fromString("female")); +
-     } +
-      +
-     +
-     return rootPanel; +
-    }+
 </code> </code>

Trace:

Print/export