Directory

← Back

IkarusWidget

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

Author

Rating

Popularity

<100

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());
			}
		});

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

IkarusPopupTextField: *Bug fix: related to layout problems.

IkarusSlidingPanel: *Custom css support added.(see demo) *Slidingpanel can be attached to any widget by using setReferenceComponent() method.(see demo)

Released
2011-10-16
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 6.0+
Vaadin 6.6+ in 1.0.4
Browser
Internet Explorer
Internet Explorer
Firefox
Safari
Google Chrome
Internet Explorer

IkarusWidget - Vaadin Add-on Directory

IkarusWidgets : Slider, NumericField,MaskField,PopupField, ButtonTextField,SlidingPanel,Breadcrumb,Dock & Layouts, JQuery widgets IkarusWidget - Vaadin Add-on Directory
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)
Demo war (latest)
Discussion Forum
Author Homepage
Online Demo

IkarusWidget version 1.0.1
null

IkarusWidget version 1.0.2
-Some Bug fixes to v.1.0.1 -Added IkarusDock (JQuery dependency) -Added IkarusBreadCrumb (JQuery dependency) -Added IkarusSlidingPanel (JQuery dependency) -Added IkarusUList -Added IkarusListItem -Added IkarusDateField (Client Side only usage) -AddedIkarusNativeSelect (Client Side only usage)

IkarusWidget version 1.0.3
IkarusNumericField added: set scale size set precision size set decimal seperator set grouping seperator set text alignment

IkarusWidget version 1.0.4
IkarusDock: * Flickering problem on load has been fixed. IkarusTextField: * Ikarus text field diverged from vaadins' TextField. Clientside widget now using renderer & parser objects. At client side set/getText methods return formatted text value where as set/getValue methods return serverside value. IkarusNumberField: *Client side widget changed to use renderer/parser mechanism of VIkarusTextField and done at clientside. *GWT NumberFormat has been changed to custom formatting, by this way, precision size can be set up to 40 digits. *Bug related to deciamlpart accuracy has ben fixed. *Browser compatibility about key press handling has been achieved. IkarusMaskedTextField (New!!): *This widget is combination of MaskedTextField addon widget and IkarusTextField. *Widget accepts serverside value, parsing and rendering are done through IkarusTextField parser/renderer mechanism at client side. *Known bug: On FF; tab traversal does not work.

IkarusWidget version 1.0.6
Changes can be found at forum page.

IkarusWidget version 1.0.8
IkarusSlider: focus/blur event handling keyboard handling enable/disable slider

IkarusWidget version 1.0.9
IkarusPopupTextField: *Bug fix: related to layout problems. IkarusSlidingPanel: *Custom css support added.(see demo) *Slidingpanel can be attached to any widget by using setReferenceComponent() method.(see demo)

Online