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 [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 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 • polymorphic • start • configuration

Print/export