This is an old revision of the document!

Table of Contents

Gallery Sample

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 ( 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.

Live example

http://soloistdemo.org/SampleApplications/gallery.html
OQL Query: Pictures

UML Model

Business Logic Code

AddToGallery.java
    public void execute() 
    // -------------<SOL id="e6326fe7-30c8-4f93-863a-2dc5825ac9aa:___throw__" />
    // -------------<LOS id="e6326fe7-30c8-4f93-863a-2dc5825ac9aa:___throw__" />
    {
        // ---------<SOL id="e6326fe7-30c8-4f93-863a-2dc5825ac9aa:___body___" />
    	ObjectOfClass owner = galleryOwner.val();
    	IAssociationEndInstance<PictureFromGallery> gallery = ((House) owner).gallery;
        picture.val().addToGallery(gallery);
        // ---------<LOS id="e6326fe7-30c8-4f93-863a-2dc5825ac9aa:___body___" />
    }
 
    // -------------<SOL id="519fec42-bffa-423b-997e-d6a6e567943e:___cend___" />
	@Override
	protected void doCheckPreconditions() throws CommandPreconditionsException {
		super.doCheckPreconditions();
		if (galleryOwner.val() == null) {
			throw new CommandPreconditionsException("Please select the house.");
		}
	}
    // -------------<LOS id="519fec42-bffa-423b-997e-d6a6e567943e:___cend___" />
MoveWithinGallery.java
    public void execute() 
    // -------------<SOL id="a7e66c29-b3b6-4471-8e5d-0f411c4c5a97:___throw__" />
    // -------------<LOS id="a7e66c29-b3b6-4471-8e5d-0f411c4c5a97:___throw__" />
    {
        // ---------<SOL id="a7e66c29-b3b6-4471-8e5d-0f411c4c5a97:___body___" />
    	ObjectOfClass owner = galleryOwner.val();
    	IAssociationEndInstance<PictureFromGallery> gallery = ((House) owner).gallery;    	
    	PictureFromGallery pfg = picture.val();
    	pfg.moveWithinGallery(gallery, position.val());
        // ---------<LOS id="a7e66c29-b3b6-4471-8e5d-0f411c4c5a97:___body___" />
    }
RemoveFromGallery.java
    public void execute() 
    // -------------<SOL id="23580b3c-e2c5-4b16-894c-e3f4464f5a98:___throw__" />
    // -------------<LOS id="23580b3c-e2c5-4b16-894c-e3f4464f5a98:___throw__" />
    {
        // ---------<SOL id="23580b3c-e2c5-4b16-894c-e3f4464f5a98:___body___" />
    	ObjectOfClass owner = galleryOwner.val();
    	IAssociationEndInstance<PictureFromGallery> gallery = ((House) owner).gallery;
        picture.val().removeFromGallery(gallery);
        // ---------<LOS id="23580b3c-e2c5-4b16-894c-e3f4464f5a98:___body___" />
    }

GUI Code

package rs.sol.sampleapps.gallery;
 
import rs.sol.sampleapps.House;
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.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.GUILabelComponent;
import rs.sol.soloist.server.guiconfiguration.components.GUIPanelComponent;
import rs.sol.soloist.server.guiconfiguration.construction.GUIComponentBinding;
import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUICollectionInput;
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.style.GUIContext;
import rs.sol.soloist.server.guiconfiguration.style.GUIObjectSetting;
import rs.sol.soloist.server.guiconfiguration.style.GUITextFeature;
import rs.sol.soloist.server.server.SoloistServiceServlet;
 
public enum Gallery implements Initializer {
 
	INSTANCE;
 
	@Override
	public void init() throws InitializerFailedException {
		GUIApplicationComponent application = new GUIApplicationComponent();
		application.name.set(Text.fromString("GallerySample"));
		SoloistServiceServlet.registerApplication(application);
		application.context.set(createContextAndStyles());
 
		GUIPanelComponent root = GUIPanelComponent.createFlow(application);
 
		GUILabelComponent title = GUILabelComponent.create(root, "Gallery");
		title.styleName.set(Text.fromString("titleStyle"));
 
		GUIPanelComponent topPanel = GUIPanelComponent.createFlow(root);
		topPanel.styleName.set(Text.fromString("topPanel"));
 
		GUILabelComponent.create(topPanel, "Choose house:").styleName.set(Text.fromString("formLabel"));
 
		GUIFindAllInstancesSAPComponent allHouses = GUIFindAllInstancesSAPComponent.create(topPanel, House.FQ_TYPE_NAME);
		GUIElementComponent suggestBox = GUIElementComponent.createInput(topPanel, new GUISuggestWidget(), new GUICollectionInput());
		GUIInputKind.get(suggestBox).lowerBound.set(Integer.valueOf(1));
		GUIComponentBinding.create(allHouses.value, GUICollectionInput.get(suggestBox).collection);
 
		new GalleryFragment(topPanel);
 
		GUIComponentBinding.create(suggestBox.value, topPanel.input);
    }
 
	private GUIContext createContextAndStyles() {
		GUIContext context = new GUIContext();
		context.supercontext.set(DefaultContextInit.getRoot());
		GUIObjectSetting person = GUIObjectSetting.create(context, House.CLASSIFIER);
		GUITextFeature.createName(person, House.PROPERTIES.code);
		return context;
	}
 
}
package rs.sol.sampleapps.gallery;
 
import rs.sol.sampleapps.Document;
import rs.sol.sampleapps.PictureFromGallery;
import rs.sol.sampleapps.commands.AddToGallery;
import rs.sol.sampleapps.commands.MoveWithinGallery;
import rs.sol.sampleapps.commands.RemoveFromGallery;
import rs.sol.sampleapps.gui.GUIGalleryPanel;
import rs.sol.soloist.server.builtindomains.builtincommands.CmdCreateObjectOfClass;
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.GUICommandComponent;
import rs.sol.soloist.server.guiconfiguration.components.GUIDisclosurePanel;
import rs.sol.soloist.server.guiconfiguration.components.GUILabelComponent;
import rs.sol.soloist.server.guiconfiguration.components.GUIPanelComponent;
import rs.sol.soloist.server.guiconfiguration.components.PerformImmediately;
import rs.sol.soloist.server.guiconfiguration.construction.GUIComponentBinding;
import rs.sol.soloist.server.guiconfiguration.construction.GUIFactory;
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.VerticalAlignment;
import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIBooleanFilter;
import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIBufferComponent;
import rs.sol.soloist.server.uml.concepts.runtime.ISlot;
 
public class GalleryFragment {
 
	private GUIPanelComponent rootPanel;
	private ISlot<Text> galleryOwner;
	private GUIGalleryPanel galleryPanel;
 
	public static MoveWithinGallery moveWithinGallery = new MoveWithinGallery();
	public static RemoveFromGallery removeFromGallery = new RemoveFromGallery();
 
	public GalleryFragment(GUIPanelComponent rootPanel) {
		this.rootPanel = rootPanel;
		this.galleryOwner = rootPanel.input;
		init();
	}
 
	private void init()
	{
		GUIDisclosurePanel newPictureDisclosure = GUIDisclosurePanel.create(rootPanel, "Add picture to gallery");
 
		GUIPanelComponent subDisclosure = GUIPanelComponent.createFlow(newPictureDisclosure);
		subDisclosure.styleName.set(Text.fromString("disclosureForm"));
		GUIPanelComponent table = GUIPanelComponent.createTable(subDisclosure);
		table.styleName.set(Text.fromString("table"));
 
		CmdCreateObjectOfClass cmd = new CmdCreateObjectOfClass();
		cmd.className.set(Text.fromString(PictureFromGallery.FQ_TYPE_NAME));
		GUICommandComponent cmdNewBlank = GUICommandComponent.create(rootPanel, cmd, PerformImmediately.NOTHING);
		GUIBooleanFilter gbf = GUIBooleanFilter.create(rootPanel, newPictureDisclosure.open);
		GUIComponentBinding.create(gbf.yes, cmdNewBlank.click);
 
		int row = 0;
		GUILabelComponent.create(table, "Title", row++, 0).styleName.set(Text.fromString("formLabel"));
		GUILabelComponent.create(table, "Description", row++, 0).styleName.set(Text.fromString("formLabel"));
		GUILabelComponent.create(table, "Picture", row++, 0).styleName.set(Text.fromString("formLabel"));
 
		row = 0;
		GUIElementComponent title = GUIElementComponent.createSlotEditor(table, Document.PROPERTIES.title, row++, 1);
		GUIElementComponent descrip = GUIElementComponent.createSlotEditor(table, Document.PROPERTIES.description, row++, 1);
		GUIFieldWidget.get(descrip).maxLength.set(Integer.valueOf(2000));
		GUIFieldWidget.get(descrip).multiline.set(Boolean.TRUE);
		CellLayoutData.setSize(descrip, "265px", "192px");
		GUIPanelComponent picUpload = GUIFactory.createPictureFileComponent(table, PictureFromGallery.PROPERTIES.picture, true);
		TableLayoutData.setRowColumn(picUpload, row++, 1);
 
		GUIPanelComponent picture = GUIFactory.createPictureFileComponent(table, PictureFromGallery.PROPERTIES.picture, false);
		TableLayoutData.setRowColumn(picture, 0, 2, 4, 1);
		TableLayoutData.setAlignment(picture, VerticalAlignment.TOP);
 
		GUIComponentBinding.create(cmdNewBlank, CmdCreateObjectOfClass.PROPERTIES.output, GUISlotEditorKind.get(title).element);
		GUIComponentBinding.create(cmdNewBlank, CmdCreateObjectOfClass.PROPERTIES.output, GUISlotEditorKind.get(descrip).element);
		GUIComponentBinding.create(cmdNewBlank, CmdCreateObjectOfClass.PROPERTIES.output, picUpload.input);
		GUIComponentBinding.create(cmdNewBlank, CmdCreateObjectOfClass.PROPERTIES.output, picture.input);
 
		GUICommandComponent cmdAdd = GUIButtonComponent.create(table, "Add picture", new AddToGallery(), row++, 0);
		GUIComponentBinding.create(galleryOwner, cmdAdd, AddToGallery.PROPERTIES.galleryOwner);
		GUIComponentBinding.create(cmdNewBlank, CmdCreateObjectOfClass.PROPERTIES.output, cmdAdd, AddToGallery.PROPERTIES.picture);
 
		galleryPanel = new GUIGalleryPanel();
		rootPanel.children.add(galleryPanel);
		GUIComponentBinding.create(galleryOwner, galleryPanel.element);
		GUIComponentBinding.create(cmdAdd.commandExecuted, galleryPanel.refreshContents);
		GUIBufferComponent gbc = GUIBufferComponent.create(rootPanel, Boolean.FALSE);
		GUIComponentBinding.create(gbc.output, newPictureDisclosure.open);
		GUIComponentBinding.create(cmdAdd.commandExecuted, gbc.send);
	}
 
}
extension.js
    function htmlComponentChanged(id) {
 
	if (id == "fancyGallery") {
		setTimeout(function() {
			$("a.fancy_group").fancybox({
				'titlePosition' : 'over'
			});
		}, timeout);
	}
 
}

Trace: • edit_person_s_details • tabs_and_layouts • person_tables • submit_person • gallery

Print/export