Differences

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

Link to this comparison view

gallery [2012/04/02 17:38]
srdjan.lukovic [GUI Code] 		gallery [2012/07/09 10:55] (current)
srdjan.lukovic [GUI Code]
Line 1: Line 1:
-====== Gallery Sample ====== +====== Gallery ====== 
-This is standalone application showing one way of using [[Dynamic Panel]]. By choosing House from suggest-box related gallery will be shown. Clicking on a thumbnail will show full sized picture. This functionality relies on external JavaScript code ([[http://fancybox.net | FancyBox]]), which is easily incorporated with the rest of SOLoist code. Clicking on disclosure panel will expand form for adding new pictures to gallery. Pictures can be reordered and removed.+ 
 +**Gallery** is a [[SOLoist Sample Applications|SOLoist sample application]] for a classical editable picture gallery. This is a simple, standalone application that demonstrates one way of using a [[Dynamic Panel]]. 
 + 
 +By choosing an object of //House// from the suggest box, the gallery of pictures associated with that object is displayed. 
 + 
 +A click on a thumbnail shows the full-sized picture. This functionality relies on an external JavaScript code, [[http://fancybox.net|FancyBox]], easily incorporated in the rest of the SOLoist code. 
 + 
 +A click on the disclosure panel expands the form for adding new pictures to the gallery. 
 + 
 +Pictures in the gallery can be reordered (by entering their order numbers in the boxes) and removed (by clicking on an X sign).
  
 ==== Live example ==== ==== Live example ====
Line 6: Line 15:
 [[http://soloistdemo.org/SampleApplications/gallery.html]]\\ [[http://soloistdemo.org/SampleApplications/gallery.html]]\\
 [[http://soloistdemo.org/SampleApplications/oql?q=SELECT+p%2C+p.title%2C+p.description%2C+p.isPublic%2C+p.submitted%2C+p.date%2C+p.superItem%2C+p.thumbnail%2C+p.picture%0AFROM+PictureFromGallery+p&hide=0 | OQL Query: Pictures]] [[http://soloistdemo.org/SampleApplications/oql?q=SELECT+p%2C+p.title%2C+p.description%2C+p.isPublic%2C+p.submitted%2C+p.date%2C+p.superItem%2C+p.thumbnail%2C+p.picture%0AFROM+PictureFromGallery+p&hide=0 | OQL Query: Pictures]]
 +|{{screen:gallery.png?300}}|
  
  
Line 59: Line 69:
         picture.val().removeFromGallery(gallery);         picture.val().removeFromGallery(gallery);
         // ---------<LOS id="23580b3c-e2c5-4b16-894c-e3f4464f5a98:___body___" />         // ---------<LOS id="23580b3c-e2c5-4b16-894c-e3f4464f5a98:___body___" />
 +    }
 +</code>
 +
 +<code java PictureFromGallery.java>
 +     /**
 +     * Makes a thumbnail from the existing picture and sets it to the thumbnail slot.
 +     * The size of the created thumbnail is 100 x 100px and the aspect ratio is
 +     * preserved.
 +     */
 +    public void makeThumbnail() 
 +    // -------------<SOL id="d1e4657a-b5a1-4c4c-9f4c-e0446b338e28:___throw__" />
 +    // -------------<LOS id="d1e4657a-b5a1-4c4c-9f4c-e0446b338e28:___throw__" />
 +    {
 +        // ---------<SOL id="d1e4657a-b5a1-4c4c-9f4c-e0446b338e28:___body___" />
 +    if (picture.val() != null)
 + try {
 + thumbnail.set(Picture.fromBufferedImage(Thumbnails.of(picture.val().toBufferedImage()).size(150, 150).outputFormat("jpg").asBufferedImage()));
 + } catch (IOException e) {
 + e.printStackTrace();
 + }
 +        // ---------<LOS id="d1e4657a-b5a1-4c4c-9f4c-e0446b338e28:___body___" />
 +    }
 +
 +    
 +    public void removeFromGallery(IAssociationEndInstance<PictureFromGallery> gallery) 
 +    // -------------<SOL id="0f0f610a-44b0-48dc-9a5d-2ed0887e62e3:___throw__" />
 +    // -------------<LOS id="0f0f610a-44b0-48dc-9a5d-2ed0887e62e3:___throw__" />
 +    {
 +        // ---------<SOL id="0f0f610a-44b0-48dc-9a5d-2ed0887e62e3:___body___" />
 +    gallery.remove(this);
 +        if (this.house.read().isEmpty())
 +        this.destroy();
 +        // ---------<LOS id="0f0f610a-44b0-48dc-9a5d-2ed0887e62e3:___body___" />
 +    }
 +
 +    
 +    public void addToGallery(IAssociationEndInstance<PictureFromGallery> gallery) 
 +    // -------------<SOL id="8cfd27a3-13bd-44e5-bb1b-b4681d1111e6:___throw__" />
 +    // -------------<LOS id="8cfd27a3-13bd-44e5-bb1b-b4681d1111e6:___throw__" />
 +    {
 +        // ---------<SOL id="8cfd27a3-13bd-44e5-bb1b-b4681d1111e6:___body___" />
 +    this.makeThumbnail();
 +    this.submitted.set(Boolean.TRUE);
 +    gallery.addLast(this);
 +        // ---------<LOS id="8cfd27a3-13bd-44e5-bb1b-b4681d1111e6:___body___" />
 +    }
 +
 +    
 +    public void moveWithinGallery(IAssociationEndInstance<PictureFromGallery> gallery, Integer pos) 
 +    // -------------<SOL id="f77e5360-24d5-4e7c-ba30-4b91b2622f88:___throw__" />
 +    // -------------<LOS id="f77e5360-24d5-4e7c-ba30-4b91b2622f88:___throw__" />
 +    {
 +        // ---------<SOL id="f77e5360-24d5-4e7c-ba30-4b91b2622f88:___body___" />
 +    int i = gallery.read().indexOf(this);
 + int position = pos.toInt() - 1;
 + if (position != -1) {
 + if (position >= gallery.size())
 + position = (int) (gallery.size() - 1);
 + else if (position < 0)
 + position = 0;
 + gallery.reorder(i, position);
 + }
 +        // ---------<LOS id="f77e5360-24d5-4e7c-ba30-4b91b2622f88:___body___" />
     }     }
 </code> </code>
Line 70: Line 143:
 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.Integer; 
-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.GUIElementComponent; +
-import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIInputKind; +
-import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUISuggestWidget;+
 import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIFindAllInstancesSAPComponent; import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIFindAllInstancesSAPComponent;
 import rs.sol.soloist.server.guiconfiguration.style.GUIContext; import rs.sol.soloist.server.guiconfiguration.style.GUIContext;
Line 93: Line 161:
  public void init() throws InitializerFailedException {  public void init() throws InitializerFailedException {
  GUIApplicationComponent application = new GUIApplicationComponent();  GUIApplicationComponent application = new GUIApplicationComponent();
- application.name.set(Text.fromString("GallerySample"));+ application.setName("GallerySample");
  SoloistServiceServlet.registerApplication(application);  SoloistServiceServlet.registerApplication(application);
- application.context.set(createContextAndStyles());+ application.setContext(createContextAndStyles());
   
  GUIPanelComponent root = GUIPanelComponent.createFlow(application);  GUIPanelComponent root = GUIPanelComponent.createFlow(application);
   
  GUILabelComponent title = GUILabelComponent.create(root, "Gallery");  GUILabelComponent title = GUILabelComponent.create(root, "Gallery");
- 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");
   
- GUILabelComponent.create(topPanel, "Choose house:").styleName.set(Text.fromString("formLabel"));+ GUILabelComponent.create(topPanel, "Choose house:").setStyle("formLabel");
   
- GUIFindAllInstancesSAPComponent allHouses = GUIFindAllInstancesSAPComponent.create(topPanel, House.FQ_TYPE_NAME); + GUIFindAllInstancesSAPComponent allHouses = GUIFindAllInstancesSAPComponent.create(topPanel, House.CLASSIFIER); 
- GUIElementComponent suggestBox = GUIElementComponent.createInput(topPanel, new GUISuggestWidget(), new GUICollectionInput()); + GUIInput suggestBox = GUIInput.createSuggest(topPanel); 
- GUIInputKind.get(suggestBox).lowerBound.set(Integer.valueOf(1)); + suggestBox.setLowerBound(1); 
- GUIComponentBinding.create(allHouses.value, GUICollectionInput.get(suggestBox).collection);+ GUIComponentBinding.create(allHouses.opValue(), suggestBox.ipCollection());
   
- new GalleryFragment(topPanel); + GalleryFragment gf = new GalleryFragment(topPanel); 
-  + GUIComponentBinding.create(suggestBox.opValue(), gf.ipOwner());
- GUIComponentBinding.create(suggestBox.value, topPanel.input);+
     }     }
   
  private GUIContext createContextAndStyles() {  private GUIContext createContextAndStyles() {
  GUIContext context = new GUIContext();  GUIContext context = new GUIContext();
- context.supercontext.set(DefaultContextInit.getRoot());+ DefaultContextInit.getRoot().addContext(context);
  GUIObjectSetting person = GUIObjectSetting.create(context, House.CLASSIFIER);  GUIObjectSetting person = GUIObjectSetting.create(context, House.CLASSIFIER);
  GUITextFeature.createName(person, House.PROPERTIES.code);  GUITextFeature.createName(person, House.PROPERTIES.code);
Line 139: Line 206:
 import rs.sol.soloist.server.builtindomains.builtincommands.CmdCreateObjectOfClass; import rs.sol.soloist.server.builtindomains.builtincommands.CmdCreateObjectOfClass;
 import rs.sol.soloist.server.builtindomains.builtindatatypes.Boolean; import rs.sol.soloist.server.builtindomains.builtindatatypes.Boolean;
-import rs.sol.soloist.server.builtindomains.builtindatatypes.Integer; 
-import rs.sol.soloist.server.builtindomains.builtindatatypes.Text; 
 import rs.sol.soloist.server.guiconfiguration.components.GUIButtonComponent; import rs.sol.soloist.server.guiconfiguration.components.GUIButtonComponent;
 import rs.sol.soloist.server.guiconfiguration.components.GUICommandComponent; import rs.sol.soloist.server.guiconfiguration.components.GUICommandComponent;
Line 148: Line 213:
 import rs.sol.soloist.server.guiconfiguration.components.PerformImmediately; import rs.sol.soloist.server.guiconfiguration.components.PerformImmediately;
 import rs.sol.soloist.server.guiconfiguration.construction.GUIComponentBinding; import rs.sol.soloist.server.guiconfiguration.construction.GUIComponentBinding;
-import rs.sol.soloist.server.guiconfiguration.construction.GUIFactory; +import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIEdit;
-import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIElementComponent; +
-import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIFieldWidget; +
-import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUISlotEditorKind; +
-import rs.sol.soloist.server.guiconfiguration.layout.CellLayoutData;+
 import rs.sol.soloist.server.guiconfiguration.layout.TableLayoutData; import rs.sol.soloist.server.guiconfiguration.layout.TableLayoutData;
 import rs.sol.soloist.server.guiconfiguration.layout.VerticalAlignment; import rs.sol.soloist.server.guiconfiguration.layout.VerticalAlignment;
 import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIBooleanFilter; import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIBooleanFilter;
 import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIBufferComponent; import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIBufferComponent;
 +import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIRelayComponent;
 import rs.sol.soloist.server.uml.concepts.runtime.ISlot; import rs.sol.soloist.server.uml.concepts.runtime.ISlot;
  
 public class GalleryFragment { public class GalleryFragment {
  
- private GUIPanelComponent rootPanel; + private ISlot<?> owner; 
- private ISlot<Text> galleryOwner; + 
- private GUIGalleryPanel galleryPanel;+ public ISlot<?> ipOwner(){ 
 + return owner; 
 + }
   
- public static MoveWithinGallery moveWithinGallery = new MoveWithinGallery(); + public static MoveWithinGallery cmdMoveWithinGallery = new MoveWithinGallery(); 
- public static RemoveFromGallery removeFromGallery = new RemoveFromGallery();+ public static RemoveFromGallery cmdRemoveFromGallery = new RemoveFromGallery();
   
  public GalleryFragment(GUIPanelComponent rootPanel) {  public GalleryFragment(GUIPanelComponent rootPanel) {
- this.rootPanel = rootPanel; + GUIRelayComponent ownerRelay = GUIRelayComponent.create(rootPanel); 
- this.galleryOwner = rootPanel.input; + owner = ownerRelay.ipRelay(); 
- init(); +
- } +
- +
- private void init() +
- {+
  GUIDisclosurePanel newPictureDisclosure = GUIDisclosurePanel.create(rootPanel, "Add picture to gallery");  GUIDisclosurePanel newPictureDisclosure = GUIDisclosurePanel.create(rootPanel, "Add picture to gallery");
   
  GUIPanelComponent subDisclosure = GUIPanelComponent.createFlow(newPictureDisclosure);  GUIPanelComponent subDisclosure = GUIPanelComponent.createFlow(newPictureDisclosure);
- subDisclosure.styleName.set(Text.fromString("disclosureForm"));+ subDisclosure.setStyle("disclosureForm");
  GUIPanelComponent table = GUIPanelComponent.createTable(subDisclosure);  GUIPanelComponent table = GUIPanelComponent.createTable(subDisclosure);
- table.styleName.set(Text.fromString("table"));+ table.setStyle("table");
   
  CmdCreateObjectOfClass cmd = new CmdCreateObjectOfClass();  CmdCreateObjectOfClass cmd = new CmdCreateObjectOfClass();
- cmd.className.set(Text.fromString(PictureFromGallery.FQ_TYPE_NAME));+ cmd.setClass(PictureFromGallery.CLASSIFIER);
  GUICommandComponent cmdNewBlank = GUICommandComponent.create(rootPanel, cmd, PerformImmediately.NOTHING);  GUICommandComponent cmdNewBlank = GUICommandComponent.create(rootPanel, cmd, PerformImmediately.NOTHING);
- GUIBooleanFilter gbf = GUIBooleanFilter.create(rootPanel, newPictureDisclosure.open); + GUIBooleanFilter gbf = GUIBooleanFilter.create(rootPanel); 
- GUIComponentBinding.create(gbf.yes, cmdNewBlank.click);+ GUIComponentBinding.create(newPictureDisclosure.opOpen(), gbf.ipInput()); 
 + GUIComponentBinding.create(gbf.opYes(), cmdNewBlank.ipClick());
   
  int row = 0;  int row = 0;
- GUILabelComponent.create(table, "Title", row++, 0).styleName.set(Text.fromString("formLabel")); + GUILabelComponent.create(table, "Title", row++, 0).setStyle("formLabel"); 
- GUILabelComponent.create(table, "Description", row++, 0).styleName.set(Text.fromString("formLabel")); + GUILabelComponent.create(table, "Description", row++, 0).setStyle("formLabel"); 
- GUILabelComponent.create(table, "Picture", row++, 0).styleName.set(Text.fromString("formLabel"));+ GUILabelComponent.create(table, "Picture", row++, 0).setStyle("formLabel");
  
  row = 0;  row = 0;
- GUIElementComponent title = GUIElementComponent.createSlotEditor(table, Document.PROPERTIES.title, row++, 1); + GUIEdit title = GUIEdit.createField(table, Document.PROPERTIES.title, row++, 1); 
- GUIElementComponent descrip = GUIElementComponent.createSlotEditor(table, Document.PROPERTIES.description, row++, 1); + GUIEdit descrip = GUIEdit.createField(table, Document.PROPERTIES.description, row++, 1); 
- GUIFieldWidget.get(descrip).maxLength.set(Integer.valueOf(2000)); + descrip.setMaxLength(2000); 
- GUIFieldWidget.get(descrip).multiline.set(Boolean.TRUE); + descrip.setMultiline(true); 
- CellLayoutData.setSize(descrip, "265px", "192px"); + descrip.setSize("265px", "192px"); 
- GUIPanelComponent picUpload = GUIFactory.createPictureFileComponent(table, PictureFromGallery.PROPERTIES.picture, true); + GUIPanelComponent picUpload = GUIEdit.createPicture(table, PictureFromGallery.PROPERTIES.picture, true); 
- TableLayoutData.setRowColumn(picUpload, row++, 1);+ picUpload.setRowColumn(row++, 1);
  
- GUIPanelComponent picture = GUIFactory.createPictureFileComponent(table, PictureFromGallery.PROPERTIES.picture, false); + GUIPanelComponent picture = GUIEdit.createPicture(table, PictureFromGallery.PROPERTIES.picture, false); 
- TableLayoutData.setRowColumn(picture, 0, 2, 4, 1); + picture.setRowColumn(0, 2, 4, 1); 
- TableLayoutData.setAlignment(picture, VerticalAlignment.TOP);+ picture.setCellAlignment(null, VerticalAlignment.TOP);
   
- GUIComponentBinding.create(cmdNewBlank, CmdCreateObjectOfClass.PROPERTIES.output, GUISlotEditorKind.get(title).element); + GUIComponentBinding.create(cmdNewBlank, CmdCreateObjectOfClass.PROPERTIES.output, title.ipElement()); 
- GUIComponentBinding.create(cmdNewBlank, CmdCreateObjectOfClass.PROPERTIES.output, GUISlotEditorKind.get(descrip).element); + GUIComponentBinding.create(cmdNewBlank, CmdCreateObjectOfClass.PROPERTIES.output, descrip.ipElement()); 
- GUIComponentBinding.create(cmdNewBlank, CmdCreateObjectOfClass.PROPERTIES.output, picUpload.input); + GUIComponentBinding.create(cmdNewBlank, CmdCreateObjectOfClass.PROPERTIES.output, picUpload.ipRelay1()); 
- GUIComponentBinding.create(cmdNewBlank, CmdCreateObjectOfClass.PROPERTIES.output, picture.input);+ GUIComponentBinding.create(cmdNewBlank, CmdCreateObjectOfClass.PROPERTIES.output, picture.ipRelay1());
   
- GUICommandComponent cmdAdd = GUIButtonComponent.create(table, "Add picture", new AddToGallery(), row++, 0); + GUIButtonComponent cmdAdd = GUIButtonComponent.create(table, "Add picture", new AddToGallery()); 
- GUIComponentBinding.create(galleryOwner, cmdAdd, AddToGallery.PROPERTIES.galleryOwner);+ cmdAdd.setLayoutData(TableLayoutData.create(row++, 0)); 
 + GUIComponentBinding.create(ownerRelay.opRelay(), cmdAdd, AddToGallery.PROPERTIES.galleryOwner);
  GUIComponentBinding.create(cmdNewBlank, CmdCreateObjectOfClass.PROPERTIES.output, cmdAdd, AddToGallery.PROPERTIES.picture);  GUIComponentBinding.create(cmdNewBlank, CmdCreateObjectOfClass.PROPERTIES.output, cmdAdd, AddToGallery.PROPERTIES.picture);
   
- galleryPanel = new GUIGalleryPanel(); + GUIGalleryPanel galleryPanel = new GUIGalleryPanel(); 
- rootPanel.children.add(galleryPanel); + rootPanel.add(galleryPanel); 
- GUIComponentBinding.create(galleryOwner, galleryPanel.element); + GUIComponentBinding.create(ownerRelay.opRelay(), galleryPanel.ipElement()); 
- GUIComponentBinding.create(cmdAdd.commandExecuted, galleryPanel.refreshContents); + GUIComponentBinding.create(cmdAdd.opCommandExecuted(), galleryPanel.ipRefreshContents()); 
- GUIBufferComponent gbc = GUIBufferComponent.create(rootPanel, Boolean.FALSE); + GUIBufferComponent gbc = GUIBufferComponent.create(rootPanel, false, Boolean.FALSE); 
- GUIComponentBinding.create(gbc.output, newPictureDisclosure.open); + GUIComponentBinding.create(gbc.opOutput(), newPictureDisclosure.ipOpen()); 
- GUIComponentBinding.create(cmdAdd.commandExecuted, gbc.send);+ GUIComponentBinding.create(cmdAdd.opCommandExecuted(), gbc.ipSend());
  }  }
-  
 } }
 </code> </code>

Trace: • gallery

Print/export