Differences

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

Link to this comparison view

dynamic_panel [2012/04/02 12:20]
srdjan.lukovic [Live example] 		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//. Choosing person from combo-box will show its details on the right, details will be bordered by red or blue line depending on the gender of selected person. Also, details will have additional information if selected person is bank adviser.+ 
 +**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 ====
Line 6: Line 11:
 [[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]] [[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 21: 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 41: 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: • wizard • examples • element_component • deck_and_layouts • dynamic_panel • polymorphic

Print/export