IkarusWidget

IkarusWidgets : Slider, NumericField,MaskField,PopupField, ButtonTextField,SlidingPanel,Breadcrumb,Dock & Layouts, JQuery widgets

View larger

Close

A set of IkarusProject widgets, can be found in this addon.

IkarusBTextField:

-ButtonTextfield converts the entered text to a button when it faces an input character of value textDelimiter. -ButtonTextField aims to communicate with server minimum. -ButtonTextField can expand its height to the given maxLinestoExpand value (Default:3) if there are more lines than that value, it will show vertical scroll bar. -ButtonTextField has focus remember functionality, After server communication, it remembers the next focus component to focus. -ButtonTextField has ItemContainer behaviour, each button is represented as item with button title as the itemId. One can register ItemSetChangeListener to get notified about the changes in dataset. -REMARK: Browsers backspace functionality must be disabled.

IkarusTextField:

-there are two additional properties that are used during validating the input characters at client side. -IkarusTextField aims to communicate with server minimum. -textType property can be PLAIN,ALPHANUMERIC,DIGIT,LETTER. If text type is set to PLAIN it will behave same as com.vaadin.ui.TextField. If text type is set to DIGIT, text field will only accept digits. etc... -exceptionalChars property is being used for allowing additional characters to be input other than text type

For example an IkarusTextField to be used as an Email input set TextType to ALPHANUMERIC and set exceptionalChars to "@._#"

IkarusOptionGroup:

A customized optiongroup widget, by setting alignment property component will align its options, HORIZONTALLy or VERTICALLY. Default alignment is HORIZONTAL. If there is not enough width to layout HORIZONTALLy component will layout its options VERTICALLY.

IkarusAbsoluteLayout:

-The only difference from its ancestor "AbsoluteLayout" is that IkarusAbsoluteLayout layouts the captions of its child components horizontally. -If the caption of a child component is set, it will layout like this: [++CAPTION++][++COMPONENT++]

-The width of the caption must be taken into consideration, while setting child components position to the layout -> addComponent(Component c, String position)

Sample code

	Window mainWindow = new Window("Testproject Application");
		IkarusAbsoluteLayout layout = new IkarusAbsoluteLayout();
		layout.setCaption("IkarusAbsoluteLayout");

		setMainWindow(mainWindow);
		mainWindow.setContent(layout);
		Label label = new Label();
		label.setContentMode(Label.CONTENT_XHTML);
		label.setValue("<b>IkarusAbsoluteLayout:</b> <br> Captions are" +
				" layout horizontally<br><br>");
		layout.addComponent(label, "top:20px;left:20px;");

		IkarusTextField textField = new IkarusTextField();
		textField.setCaption("Ikarus TextField : ");
		textField.setValue("This is a LETTER only TextField with exceptChars @._#");
		textField.setWidth(310, Sizeable.UNITS_PIXELS);
		textField.setTextType(IkarusTextField.TEXTTYPE_LETTER);
		textField.setExceptionalChars("@._#");
		layout.addComponent(textField, "top:80px;left:150px;");

		IkarusOptionGroup optionGroup = new IkarusOptionGroup("Ikarus OptionGroup1 : ");
		optionGroup.setItems("option1,option2,option3");
		optionGroup.setWidth(200, Sizeable.UNITS_PIXELS);
		optionGroup.select("option2");
		layout.addComponent(optionGroup, "top:110px;left:150px;");

		optionGroup = new IkarusOptionGroup("Ikarus OptionGroup2 : ");
		optionGroup.setMultiSelect(true);
		optionGroup.setItems("option1,option2,option3");
		optionGroup.setWidth(200, Sizeable.UNITS_PIXELS);
		optionGroup.select("option3");
		layout.addComponent(optionGroup, "top:140px;left:150px;");

		IkarusBTextField buttonTextField = new IkarusBTextField("Ikarus BTextField : ");
		buttonTextField.setWidth(500, Sizeable.UNITS_PIXELS);
		buttonTextField.setImmediate(true);
		IndexedContainer ic = new IndexedContainer();
		ic.addItem("xxxx.yyyyyyyyyy@yahoo.com");
		ic.addItem("kkkkkkkk.mmmmm@gmail.com");
		ic.addItem("xxxxxxxxxxx.hhhhhhhhhhh@hotmail.com");
		buttonTextField.setContainerDataSource(ic);
		layout.addComponent(buttonTextField, "top:170px;left:150px;");

final IkarusBreadCrumb breadCrumb = new IkarusBreadCrumb();
		breadCrumb.setCollapsible(true);
		breadCrumb.setHeight("25px");
		breadCrumb.setWidth("600px");
		Button b = new Button("linkxxxxxxxxxx1");
		breadCrumb.addLink(b);
		Link l = new Link("linkxxxxxxxxxx55", new ExternalResource("http://www.google.com"));
		breadCrumb.addLink(l);

		b = new Button("linkxxxxxxxxxx2");

		breadCrumb.addLink(b);
		b = new Button("linkxxxxxxxxxx3");
		breadCrumb.addLink(b);
		b = new Button("linkxxxxxxxxxx4");
		breadCrumb.addLink(b);
		l = new Link("linkxxxxxxxxxx55", null);
		breadCrumb.addLink(l);
		breadCrumb.setLinkVisible(false, breadCrumb.getIndexofLink(l));
		vl.addComponent(breadCrumb);
		Button button = new Button("Add link to BreadCrumb");
		button.setWidth("250px");
		vl.addComponent(button);
		button.addListener(new ClickListener() {
			public void buttonClick(ClickEvent event) {
				Button link = new Button("tttttttttttttttttt");
				breadCrumb.addLink(link);

			}
		});

HorizontalLayout hl = new HorizontalLayout();
		hl.setSizeFull();

		layout.addComponent(hl);
		layout.setExpandRatio(hl, 1f);

		/* verticalDock */

		IkarusDock dock1 = new IkarusDock("Ikarus Dock style(sample2):");
		dock1.setWidth("160px");

		IkarusDockItem image = null;
		image = new IkarusDockItem("library", new ThemeResource("../dockimages/library.png"));
		dock1.addDockItem(image);
		image = new IkarusDockItem("movies", new ThemeResource("../dockimages/movies.png"));
		dock1.addDockItem(image);
		image = new IkarusDockItem("images", new ThemeResource("../dockimages/images.png"));
		dock1.addDockItem(image);
		image = new IkarusDockItem("tunes", new ThemeResource("../dockimages/tunes.png"));

		dock1.addDockItem(image);
		image = new IkarusDockItem("private", new ThemeResource("../dockimages/private.png"));
		dock1.addDockItem(image);

		dock1.setUseLabel(true);
		dock1.setAlign(IkarusDock.vertical_center);
		dock1.setStyleName("sample2");
		hl.addComponent(dock1);

		/* Horizontal dock */
		final IkarusDock dock = new IkarusDock("Ikarus Dock style(sample1):");
		dock.setUseLabel(true);
		image = new IkarusDockItem("previous", new ThemeResource("../dockimages/previous.png"));
		dock.addDockItem(image);
		image.addListener(new MouseEvents.ClickListener() {
			public void click(com.vaadin.event.MouseEvents.ClickEvent event) {
				// Do something here....
				event.getComponent().getWindow().showNotification("Info : ", (String) ((IkarusDockItem) event.getComponent()).getTitle() + " Pressed");

			}
		});
		image = new IkarusDockItem("pause", new ThemeResource("../dockimages/pause.png"));
		dock.addDockItem(image);
		image.addListener(new MouseEvents.ClickListener() {
			public void click(com.vaadin.event.MouseEvents.ClickEvent event) {
				// Do something here....
				event.getComponent().getWindow().showNotification("Info : ", (String) ((IkarusDockItem) event.getComponent()).getTitle() + " Pressed");

			}
		});
		image = new IkarusDockItem("play", new ThemeResource("../dockimages/play.png"));
		image.setEnabled(false);
		dock.addDockItem(image);
		image.addListener(new MouseEvents.ClickListener() {
			public void click(com.vaadin.event.MouseEvents.ClickEvent event) {
				// Do something here....
				event.getComponent().getWindow().showNotification("Info : ", (String) ((IkarusDockItem) event.getComponent()).getTitle() + " Pressed");

			}
		});
		image = new IkarusDockItem("stop", new ThemeResource("../dockimages/stop.png"));
		dock.addDockItem(image);
		image.addListener(new MouseEvents.ClickListener() {
			public void click(com.vaadin.event.MouseEvents.ClickEvent event) {
				// Do something here....
				event.getComponent().getWindow().showNotification("Info : ", (String) ((IkarusDockItem) event.getComponent()).getTitle() + " Pressed");
				IkarusDockItem image = new IkarusDockItem("play", new ThemeResource("../dockimages/play.png"));
				dock.addDockItem(image);
			}
		});
		image = new IkarusDockItem("next", new ThemeResource("../dockimages/next.png"));
		dock.addDockItem(image);
		image.addListener(new MouseEvents.ClickListener() {
			public void click(com.vaadin.event.MouseEvents.ClickEvent event) {
				// Do something here....
				event.getComponent().getWindow().showNotification("Info : ", (String) ((IkarusDockItem) event.getComponent()).getTitle() + " Pressed");

			}
		});

		dock.setSizeFull();
		dock.setStyleName("sample1");

		hl.addComponent(dock);
		hl.setExpandRatio(dock, 1f);

IkarusSlidingPanel slidingPanel = new IkarusSlidingPanel();
		slidingPanel.setEdge(IkarusSlidingPanel.EDGE_RIGHT);
		slidingPanel.setHeaderLocation(IkarusSlidingPanel.MIDDLE);
		slidingPanel.setWidth("200px");
		slidingPanel.setHeight("400px");
		slidingPanel.setAnimationEnabled(true);
		slidingPanel.setOpen(false);
		slidingPanel.setContent(getDummyAccordion());
		mainWindow.addComponent(slidingPanel);

IkarusPopupTextField popupTextfield = new IkarusPopupTextField(new IkarusNumericField(), "PopupTextField(Numeric) : ");
		layout.addComponent(popupTextfield, "top:320px;left:160;");
		popupTextfield.setWidth("150px");
		popupTextfield.setRequired(true);
		popupTextfield.setImmediate(true);
		IkarusPopupWindow pWindow = new IkarusPopupWindow("PopupTextField -> Popup Window") {
			IkarusNumericField nf;

			public Component getClientArea() {
				VerticalLayout vl = new VerticalLayout();
				nf = new IkarusNumericField("Numeric Field :");
				vl.addComponent(nf);
				Button button = new Button("Complete");
				vl.addComponent(button);
				button.addListener(new ClickListener() {
					public void buttonClick(ClickEvent event) {
						complete();
					}
				});
				return vl;
			}

			public void doOnPopupClose() {
				setPopupTextValue((String) nf.getValue());
			}

			public void doOnPopupOpen() {
				nf.setValue(getPopupTextValue());
			}

			public void doOnClear() {
				nf.setValue("0");
			}

			public boolean isValid(String value) {
				BigDecimal bd = new BigDecimal(value);
				return bd.longValue() < 9999;
			}
		};
		popupTextfield.setPopupWindow(pWindow);

final IkarusSlider slider = new IkarusSlider("Ikarus Slider(1) : ");
		slider.setWidth("200px");
		slider.setRangeColor("blue");
		slider.setGrid(1);
		slider.setValue(new Integer("48"));
		slider.setEnabled(false);
		slider.setImmediate(true);
		slider.setShowValue(true);
		absoluteLayout.addComponent(slider, "top:420px;left:160;");

		final IkarusTextField sliderVal = new IkarusTextField("Slider(1) Value : ");
		sliderVal.setEnabled(false);
		sliderVal.setWidth("80px");
		absoluteLayout.addComponent(sliderVal, "top:470px;left:160px;");

		slider.addListener(new ValueChangeListener() {
			@Override
			public void valueChange(ValueChangeEvent event) {
				sliderVal.setValue(slider.getValue());
			}
		});

		final IkarusSlider slider1 = new IkarusSlider("Ikarus Slider(2) : ");
		slider1.setWidth("75%");
		slider1.setMin(-50);
		slider1.setMax(100);
		slider1.setEnabled(true);
		slider1.setImmediate(true);
		slider1.setRangeColor("green");
		slider1.setNegativeColor("red");
		slider1.setValue(new Integer("65"));
		absoluteLayout.addComponent(slider1, "top:500px;left:160;");
		slider1.addListener(new ValueChangeListener() {
			@Override
			public void valueChange(ValueChangeEvent event) {
				if (((Integer) slider1.getValue()).intValue() >= 0)
					slider.setValue(slider1.getValue());
			}
		});

Links

• Demo war (latest)
• Discussion Forum
• Author Homepage
• Online Demo

Compatibility