Multiple Widget Effects in Ext GWT

Multiple widgets effect in Ext Google web toolkit like Slide In and Slide Out Effects,Fade In and Fade Out Effects,Move Effects,Blink Effects,Reset Effects.

How this effects works here is video preview for you


Slide In and Slide Out Effects 
It like a combo box drop down menu behaviour

Fade In and Fade Out Effects

Fade In Will be open in from transparent to original widget and Fade out opposite to that
Move Effects

Keeps the widget move on the vertical direction
Blink Effects

Makes user highlighting like css blink
Reset Effects

 

Bring it back to the Original posistion

package com.extjs.gxt.samples.client.examples.misc; import com.extjs.gxt.samples.resources.client.Resources; import com.extjs.gxt.samples.resources.client.TestData; import com.extjs.gxt.ui.client.Style.Direction; import com.extjs.gxt.ui.client.event.ButtonEvent; import com.extjs.gxt.ui.client.event.SelectionListener; import com.extjs.gxt.ui.client.fx.FxConfig; import com.extjs.gxt.ui.client.util.Rectangle; import com.extjs.gxt.ui.client.widget.ContentPanel; import com.extjs.gxt.ui.client.widget.LayoutContainer; import com.extjs.gxt.ui.client.widget.button.Button; import com.extjs.gxt.ui.client.widget.button.ButtonBar; import com.extjs.gxt.ui.client.widget.layout.MarginData; import com.google.gwt.user.client.Element; public class FxExample extends LayoutContainer { private ContentPanel cp; @Override protected void onRender(Element parent, int index) { super.onRender(parent, index); ButtonBar buttonBar = new ButtonBar(); buttonBar.add(new Button("Slide In / Out", new SelectionListener<ButtonEvent>() { public void componentSelected(ButtonEvent ce) { if (cp.isVisible()) { cp.el().slideOut(Direction.UP, FxConfig.NONE); } else { cp.el().slideIn(Direction.DOWN, FxConfig.NONE); } } })); buttonBar.add(new Button("Fade In / Out", new SelectionListener<ButtonEvent>() { public void componentSelected(ButtonEvent ce) { cp.el().fadeToggle(FxConfig.NONE); } })); buttonBar.add(new Button("Move", new SelectionListener<ButtonEvent>() { public void componentSelected(ButtonEvent ce) { if (cp.isVisible()) { Rectangle rect = cp.el().getBounds(); cp.el().setXY(rect.x + 50, rect.y + 50, FxConfig.NONE); } } })); buttonBar.add(new Button("Blink", new SelectionListener<ButtonEvent>() { public void componentSelected(ButtonEvent ce) { if (cp.isVisible()) { cp.el().blink(FxConfig.NONE); } } })); buttonBar.add(new Button("Reset", new SelectionListener<ButtonEvent>() { public void componentSelected(ButtonEvent ce) { cp.el().show(); cp.setPosition(10, 10); } })); cp = new ContentPanel(); cp.setCollapsible(true); cp.setHeading("FX Demo"); cp.setIcon(Resources.ICONS.text()); cp.setBodyStyleName("pad-text"); cp.addText(TestData.DUMMY_TEXT_SHORT); cp.setWidth(200); add(buttonBar, new MarginData(10)); add(cp); cp.setStyleAttribute("position", "relative"); cp.setPosition(10, 10); } }

Read More

Resizable and Dragable widget Ext GWT

Create Resizable and Dragable widget using Ext Google web toolkit.

Creating resizable widget is always useful for end user to play with widgets like our iGoogle and My Yahoo is all dragable and resizable widget allows user to customize by themselevs.

Real rendering widget before enduser customization

After user customization widgets looks like this.


Here is a sample code for you
package com.extjs.gxt.samples.client.examples.misc; import com.extjs.gxt.samples.resources.client.Resources; import com.extjs.gxt.samples.resources.client.TestData; import com.extjs.gxt.ui.client.fx.Draggable; import com.extjs.gxt.ui.client.fx.Resizable; import com.extjs.gxt.ui.client.widget.Component; import com.extjs.gxt.ui.client.widget.ContentPanel; import com.extjs.gxt.ui.client.widget.LayoutContainer; import com.extjs.gxt.ui.client.widget.layout.FlowLayout; import com.google.gwt.user.client.Element; public class ResizableExample extends LayoutContainer { @Override protected void onRender(Element parent, int pos) { super.onRender(parent, pos); setLayout(new FlowLayout()); for (int i = 0; i < 2; i++) { ContentPanel cp = new ContentPanel(); cp.setHeading("8-Way Resizing " + (i == 1 ? "Dynamic" : "")); cp.setIcon(Resources.ICONS.text()); cp.setBodyStyleName("pad-text"); cp.addText(TestData.DUMMY_TEXT_SHORT); cp.setSize(200, 125); cp.setPosition(10, 10 + (i == 1 ? 20 : 0)); Draggable d = new Draggable(cp); if (getParent() instanceof Component) { d.setContainer((Component) getParent()); } Resizable r = new Resizable(cp); r.setDynamic(i == 1); add(cp); } } }

Read More

Tool Tips using Ext Gwt - Sample Code

Tool Tips is a used to provide the help information to make the user friendly for the end user We have different kinds of Tool tips in Ext Google web toolkit.

1. Basic - Only simple information displayed only if you hover your mouse to that button
2. Closable - information displayed on your mouse hover with closable x button appear on the above of the information message and message will not closed until you click the x button
3. Mouse Tracking - Where you mouse moves the message will move 
4. Anchor - Its same like basic information but your message will provide an anchor to the information menu to the selected widget
5. Custom - You can create it with your wish

package com.extjs.gxt.samples.client.examples.misc; import com.extjs.gxt.ui.client.core.Template; import com.extjs.gxt.ui.client.widget.HorizontalPanel; import com.extjs.gxt.ui.client.widget.LayoutContainer; import com.extjs.gxt.ui.client.widget.button.Button; import com.extjs.gxt.ui.client.widget.tips.ToolTipConfig; import com.google.gwt.core.client.GWT; import com.google.gwt.user.client.Element; public class ToolTipsExample extends LayoutContainer { @Override protected void onRender(Element parent, int pos) { super.onRender(parent, pos); HorizontalPanel hp = new HorizontalPanel(); hp.setSpacing(10); Button btn = new Button("Basic"); btn.setToolTip(new ToolTipConfig("Information", "Prints the current document")); hp.add(btn); btn = new Button("Closable"); ToolTipConfig config = new ToolTipConfig(); config.setTitle("Information"); config.setText("Prints the current document"); config.setCloseable(true); btn.setToolTip(config); hp.add(btn); btn = new Button("Mouse Tracking"); config = new ToolTipConfig(); config.setTitle("Information"); config.setText("Prints the current document"); config.setTrackMouse(true); btn.setToolTip(config); hp.add(btn); btn = new Button("Anchor"); config = new ToolTipConfig(); config.setTitle("Information"); config.setText("Prints the current document"); config.setMouseOffset(new int[] {0, 0}); config.setAnchor("left"); btn.setToolTip(config); hp.add(btn); btn = new Button("Custom"); config = new ToolTipConfig(); config.setText("Prints the current document"); config.setTitle("Template Tip"); config.setMouseOffset(new int[] {0, 0}); config.setAnchor("left"); config.setTemplate(new Template(getTemplate(GWT.getHostPageBaseURL()))); config.setCloseable(true); config.setMaxWidth(415); btn.setToolTip(config); hp.add(btn); add(hp); } private native String getTemplate(String base) /*-{ var html = [ '<div><ul style="list-style: disc; margin: 0px 0px 5px 15px">', '<li>5 bedrooms</li>', '<li>2 baths</li>', '<li>Large backyard</li>', '<li>Close to metro</li>', '</ul>', '<img width="400" height="300" src="' + base + 'samples/images/examples/house.jpg" style="border: 1px solid #ddd">', '</div>' ]; return html.join(""); }-*/; }

Read More

Direct Drag, Proxy Drag and Constraint with EXT GWT

Create Direct Drag ,Proxy Drag and Constraints with Ext Google web toolkit

Direct Drag: Its always be on the top of any widget and you can place this widget any where of the screen Proxy Drag: Its always beneath of any widget and you can place this widget any where of the screen Constraints: Its Vertical only you can drag and drop but cannot perform horizontal drag and drop

Here is a sample code for you package com.extjs.gxt.samples.client.examples.misc; import com.extjs.gxt.samples.resources.client.Resources; import com.extjs.gxt.samples.resources.client.TestData; import com.extjs.gxt.ui.client.Style.Scroll; import com.extjs.gxt.ui.client.Style.VerticalAlignment; import com.extjs.gxt.ui.client.fx.Draggable; import com.extjs.gxt.ui.client.widget.ContentPanel; import com.extjs.gxt.ui.client.widget.HorizontalPanel; import com.extjs.gxt.ui.client.widget.LayoutContainer; import com.google.gwt.user.client.Element; public class DraggableExample extends LayoutContainer { @Override protected void onRender(Element parent, int pos) { super.onRender(parent, pos); HorizontalPanel vp = new HorizontalPanel(); vp.setVerticalAlign(VerticalAlignment.TOP); vp.setSpacing(10); ContentPanel cp = new ContentPanel(); cp.setCollapsible(true); cp.setIcon(Resources.ICONS.text()); cp.setBodyStyleName("pad-text"); cp.setHeading("Proxy Drag"); cp.addText(TestData.DUMMY_TEXT_SHORT); cp.setWidth(200); Draggable d = new Draggable(cp); vp.add(cp); cp = new ContentPanel(); cp.setCollapsible(true); cp.setBodyStyleName("pad-text"); cp.setHeading("Direct Drag"); cp.setIcon(Resources.ICONS.text()); cp.addText("Drags can only be started from the header."); cp.setWidth(200); vp.add(cp); d = new Draggable(cp, cp.getHeader()); d.setContainer(this); d.setUseProxy(false); cp = new ContentPanel(); cp.setBodyStyleName("pad-text"); cp.setHeading("Constrain"); cp.setIcon(Resources.ICONS.text()); cp.addText("Can only be dragged vertically."); cp.setWidth(200); vp.add(cp); d = new Draggable(cp, cp.getHeader()); d.setContainer(this); d.setConstrainHorizontal(true); add(vp); setScrollMode(Scroll.AUTO); } }

Read More

Date Picker In Ext GWT Sample Code

Create a Date Picker with Ext Google Web Toolkit . This Date picker come with very stylish and user friendly

package com.extjs.gxt.samples.client.examples.misc; import com.extjs.gxt.ui.client.event.ComponentEvent; import com.extjs.gxt.ui.client.event.Events; import com.extjs.gxt.ui.client.event.Listener; import com.extjs.gxt.ui.client.util.Params; import com.extjs.gxt.ui.client.widget.DatePicker; import com.extjs.gxt.ui.client.widget.Info; import com.extjs.gxt.ui.client.widget.LayoutContainer; import com.extjs.gxt.ui.client.widget.layout.FlowLayout; import com.google.gwt.i18n.client.DateTimeFormat; import com.google.gwt.user.client.Element; public class DatePickerExample extends LayoutContainer { @Override protected void onRender(Element parent, int index) { super.onRender(parent, index); setLayout(new FlowLayout(10)); final DatePicker picker = new DatePicker(); picker.addListener(Events.Select, new Listener<ComponentEvent>() { public void handleEvent(ComponentEvent be) { //String d = DateTimeFormat.getShortDateFormat().format(picker.getValue()); String d = DateTimeFormat.getFormat("MM/dd/yyyy").format(picker.getValue()); Info.display("Date Selected", "You selected {0}.", new Params(d)); } }); add(picker); } }

Read More

MySQL Tutorial Free - Index Page

DBMS is known as Data Base Management System is used to store and retrieve the data.There are millions of application are running on the internet its all
depend on the database.

There are different kind of database are available on the internet and each database has it own unique specialization in that few are most popular like
SQL, MySQL, SQLite, PostgreSQL, Microsoft Access, SQL Server, FileMaker,DB2, Oracle and DBASE.

This Blog is going to give you the full tutorial on Mysql because its an open source database and it also performance good.

What Mysql can do for you?
 

1. Execute queries against a database
2. Retrieve data from a database
3. Insert records in a database
4. Update records in a database
5. Delete records from a database
6. Create new databases
7. Create new tables in a database
8. Create stored procedures in a database
9. Create views in a database
10. Set permissions on tables, procedures, and views

Read More

Creating a database query in Mysql

CREATE and DATABASE is in build command for creating database and demo is database name and semicolon specifies the termination of the query line;

CREATE DATABASE demo;

After executing this query your database will be created to check whether your database is created or not

To check that type


SHOW DATABASES;

this will show what are all the databases have been created in your system.

After execution of creating database what kind of database will bee created.
Database charset - UTF8 and Database collation is utf8_general_ci this charset and collation will helps you to insert, update and delete the multilingual format of database

Read More