Esta URL se lleva todos los premios
http://gwt.google.com/samples/Showcase/Showcase.html
Y aqui tenemos mas URLs muy utiles
http://code.google.com/intl/es/webtoolkit/doc/latest/DevGuideUiPanels.html
http://code.google.com/intl/es/webtoolkit/doc/latest/DevGuideUiWidgets.html
http://code.google.com/intl/es/webtoolkit/doc/latest/DevGuideUiCustomWidgets.html
http://code.google.com/intl/es/webtoolkit/doc/latest/DevGuideUiCellWidgets.html
http://code.google.com/intl/es/webtoolkit/doc/latest/RefWidgetGallery.html
https://sites.google.com/site/gwttutor/2-absolutepanel
http://www.java2s.com/Code/Java/GWT/CatalogGWT.htm
CellWidgets
Cell widgets (data presentation widgets) are high-performance, lightweight widgets composed of Cells for displaying data. Examples are lists, tables, trees and browsers. These widgets are designed to handle and display very large sets of data quickly. A cell widget renders its user interface as an HTML string, using innerHTML instead of traditional DOM manipulation. This design follows the flyweight pattern where data is accessed and cached only as needed, and passed to flyweight Cell objects. A cell widget can accept data from any type of data source. The data model handles asynchronous updates as well as push updates. When you change the data, the view is automatically updated.
Las implementaciones de los CellWidgets son:
Cells are the basic blocks of a user interface and come in a variety of available cell types. They render views of data, interpret browser events and can be selected. A Cell has a type based on the data that the cell represents; for example, DatePickerCell is a Cell<Date> that represents a Date and allows the user to select a new Date. Cells must implement a render method that renders the typed value as an HTML string. In addition, cells can override onBrowserEvent to act as a flyweight that handles events that are fired on elements that were rendered by the cell.
Las implementaciones de los CellWidgets son:
- CellList
- CellTable
- CellTree
- CellBrowser
- CellSampler
- CellValidation
Cells are the basic blocks of a user interface and come in a variety of available cell types. They render views of data, interpret browser events and can be selected. A Cell has a type based on the data that the cell represents; for example, DatePickerCell is a Cell<Date> that represents a Date and allows the user to select a new Date. Cells must implement a render method that renders the typed value as an HTML string. In addition, cells can override onBrowserEvent to act as a flyweight that handles events that are fired on elements that were rendered by the cell.
GWT offers a number of concrete Cell implementations that you can use immediately. See the Cell Sampler for examples.
Text
- TextCell - A non-editable cell that displays text
- ClickableTextCell - A text field; clicking on the cell causes its ValueUpdater to be called
- EditTextCell - A cell that initially displays text; when clicked, the text becomes editable
- TextInputCell - A field for entering text
- ActionCell<C> - A button that takes a delegate to perform actions on mouseUp
- ButtonCell - A button whose text is the data value
- CheckboxCell - A checkbox that can be checked or unchecked
- SelectionCell - A drop-down menu for selecting one of many choices
- DateCell - A date that conforms to a specified date format
- DatePickerCell - A date picker that displays a month calendar in which the user can select a date
- ImageCell - A cell used to render an image URL
- ImageResourceCell - A cell used to render an ImageResource
- ImageLoadingCell - A cell used to render an image URL. A loading indicator is initially displayed
- NumberCell - A number that conforms to a specified number format
- Compositions
- CompositeCell<C> - A composition of multiple Cells
- IconCellDecorator<C> - A decorator that adds an icon to another Cell
A. CellList - Ejemplo
...
...
RootPanel.get("cellList").add(buildCellList());
...
...
private Widget buildCellList(){
List<String> DAYS = Arrays.asList("Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday");
// Create a cell to render each value in the list.
TextCell textCell = new TextCell();
// Create a CellList that uses the cell.
CellList<String> cellList = new CellList<String>(textCell);
cellList.setRowCount(DAYS.size(), true);
// Push the data into the widget.
cellList.setRowData(0, DAYS);
return cellList;
}
B. CellTable - Ejemplo
...
...
RootPanel.get("cellTable").add(buildCellTable());
...
...
private Widget buildCellTable(){
List<StockPrice> stocks = Arrays.asList(
new StockPrice("100", 1040),
new StockPrice("200", 2345));
// Create a CellTable.
CellTable<StockPrice> table = new CellTable<StockPrice>();
// Create id column.
TextColumn<StockPrice> idColumn = new TextColumn<StockPrice>() {
@Override
public String getValue(StockPrice stockPrice) {
return stockPrice.getSymbolId();
}
};
// Create price column.
TextColumn<StockPrice> priceColumn = new TextColumn<StockPrice>() {
@Override
public String getValue(StockPrice stockPrice) {
return String.valueOf(stockPrice.getPrice());
}
};
// Add the columns.
table.addColumn(idColumn, "Symbol ID");
table.addColumn(priceColumn, "Price");
// Set the total row count. This isn't strictly necessary, but it affects
// paging calculations, so its good habit to keep the row count up
// to date.
// to date.
table.setRowCount(stocks.size(), true);
// Push the data into the widget.
table.setRowData(0, stocks);
return table;
}
The SelectionModel is a simple interface that views use to determine if an item is selected. Cell widgets provide several selection models for selecting the children of a node: DefaultSelectionModel, NoSelectionModel, SingleSelectionModel and MultiSelectionModel. One of these is likely to fit your need.
For demonstrations of selection, the CwCellList widget creates a SingleSelectionModel, whereas CwCellTable implements a MultiSelectionModel using checkboxes.
C. CellList with SelectionModel - Ejemplo
....
....
RootPanel.get("cellListWithModel").add(buildCellListWithSelectionModel());
....
....
private Widget buildCellListWithSelectionModel(){
List<String> DAYS = Arrays.asList("Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday");
"Wednesday", "Thursday", "Friday", "Saturday");
// Create a cell to render each value in the list.
TextCell textCell = new TextCell();
// Create a CellList that uses the cell.
CellList<String> cellList = new CellList<String>(textCell);
cellList.setKeyboardSelectionPolicy(
KeyboardSelectionPolicy.ENABLED);
KeyboardSelectionPolicy.ENABLED);
// Add a selection model to handle user selection.
final SingleSelectionModel<String> selectionModel
= new SingleSelectionModel<String>();
= new SingleSelectionModel<String>();
cellList.setSelectionModel(selectionModel);
selectionModel.addSelectionChangeHandler(new
SelectionChangeEvent.Handler() {
public void onSelectionChange(SelectionChangeEvent event) {
String selected = selectionModel.getSelectedObject();
if (selected != null) {
Window.alert("You selected: " + selected);
}
}
});
// Set the total row count. This isn't strictly necessary,
// but it affects
// but it affects
// paging calculations, so its good habit to keep the row count
// up to date.
// up to date.
cellList.setRowCount(DAYS.size(), true);
// Push the data into the widget.
cellList.setRowData(0, DAYS);
return cellList;
}
Otros componentes
Otros componentes
Primer Imagen
private Widget buildAbsolutePanel() {
AbsolutePanel panel = new AbsolutePanel();
panel.setSize("200px", "120px");
panel.addStyleName("demo-panel");
Label label = new Label("Label");
label.setWidth("100px");
label.setStyleName("demo-label");
panel.add(label, 50, 50);
return panel;
}
Segunda Imagen
private Widget buildHTMLPanel(){
String html = "<div id='one' "
+ "style='border:3px dotted blue;'>"
+ "</div><div id='two' "
+ "style='border:3px dotted green;'"
+ "></div>";
HTMLPanel panel = new HTMLPanel(html);
panel.setSize("200px", "120px");
panel.addStyleName("demo-panel");
panel.add(new Button("Do Nothing"), "one");
panel.add(new TextBox(), "two");
return panel;
}
Tercer Imagen
private Widget buildScrollPanel(){
String lorem = "Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi sit amet massa
ornare mauris lobortis laoreet. Pellentesque vel
est at massa condimentum porta. Aliquam tincidunt
scelerisque orci. Donec sit amet elit nec leo
egestas
vestibulum. Mauris et nibh quis ipsum
volutpat congue.
Ut tellus nibh, convallis sed, consectetuer sit
amet,
facilisis eget, lectus. Morbi hendrerit, dolor eget
tincidunt tristique, velit enim laoreet erat, nec
condimentum eros mi quis tellus. Fusce pharetra nibh
vestibulum lacus. Integer vulputate eros at nisi.
Phasellus elit quam, dignissim quis, volutpat vitae,
egestas nec, nisi. Nullam sodales sagittis quam.
Aliquam iaculis neque ut magna. Donec convallis
interdum sem. Sed suscipit.";
ScrollPanel panel = new ScrollPanel(new HTML(lorem));
panel.setSize("200px", "120px");
return panel;
}
Cuarta Imagen
private Widget buildSimplePanel(){
SimplePanel panel = new SimplePanel();
panel.setSize("200px", "120px");
panel.addStyleName("demo-panel");
Label label = new Label("Label");
label.setWidth("100px");
label.setStyleName("demo-label");
panel.add(label);
return panel;
}
No hay comentarios:
Publicar un comentario