想要在GWT单元列表中实现“标记为已读”功能 [英] Want to Implement 'Mark as Read' feature in GWT Cell List
问题描述
我想通过一次修改来实现此单元格示例 。一旦某人被某人点击，我想让每一行变成灰色。它应该保留在那里，而不会随着用户点击另一行而改变。如果一旦发生新的服务器呼叫，就可以了。我这样做是为了将其标记为用户的读取消息。任何线索？
我重写（更新）了cellList的css风格，如下所示，但是当我检查到我没有看到'myCss'风格被应用。
CellListStyles.css
@external .dataView-cellListWidget;
@external .dataView-cellListEvenItem;
@external .dataView-cellListOddItem;
@external .dataView-cellListKeyboardSelectedItem;
@external .dataView-cellListSelectedItem;
.dataView-cellListWidget {}
.dataView-cellListEvenItem {}
.dataView-cellListOddItem {}
.dataView-cellListKeyboardSelectedItem {}
.dataView -cellListSelectedItem {}
.dataView-cellListWidget {
}
@external .dataView-cellListEvenItem .myCss {
background-color：aqua;
}
@external .dataView-cellListOddItem .myCss {
background-color：aqua;
}
.dataView -cellListEvenItem，.dataView-cellListOddItem {
cursor：pointer;
padding：2px 5px;
zoom：1;
}
@external .dataView-cellListKeyboardSelectedItem .myCss {
background-color：red;
}
.dataView-cellListKeyboardSelectedItem {
background：#ffc;
}
.dataView-cellListSelectedItem {
background-color：＃FFCBC1;
颜色：＃121212;
height：auto;
溢出：可见;
}
向所选对象添加一个类并应用css。你可能必须重写cellList资源css。重写cellList资源css看一看这里。
selectionModel.addSelectionChangeHandler（new SelectionChangeEvent.Handler（）{
public void onSelectionChange（SelectionChangeEvent event）{
contactForm.setContact（selectionModel.getSelectedObject（））;
/ **将其设置为选中状态** /
将类添加到选定的对象，而不是设置背景。使用css将背景设置为灰色
}
}）;
编辑：
我尝试了我自己的建议，它很有用。您需要覆盖资源。
一些示例代码。
将资源应用于celllist：
我在2个独立的类中创建了2个接口
$ b $ pre $ public interface DataViewCellListResources扩展了CellList。资源
{
@Import（value = {DataViewCellListStyles.class}）
@Source（sortListStyle.css）
DataViewCellListStyles cellListStyle（）;
$ b @ImportedWithPrefix（dataView）
public interface DataViewCellListStyles extends CellList.Style
{
}
final CellList<联系人> cellList = new CellList< Contact>（new ContactCell（），
（Resources）GWT.create（DataViewCellListResources.class），keyProvider）;
在sortListStyle.css中使用它
@external .dataView-cellListWidget;
@external .dataView-cellListEvenItem;
@external .dataView-cellListOddItem;
@external .dataView-cellListKeyboardSelectedItem;
@external .dataView-cellListSelectedItem;
.dataView-cellListWidget {}
.dataView-cellListEvenItem {}
.dataView-cellListOddItem {}
.dataView-cellListKeyboardSelectedItem {}
.dataView -cellListSelectedItem {}
在您的应用程序css文件中声明css以上
PS添加了2个新的类，用于显示访问过的
.dataView-cellListWidget {
}
.dataView-cellListEvenItem.myCss {
background-color：aqua;
}
.dataView-cellListOddItem.myCss {
background-color：aqua;
}
.dataView -cellListEvenItem，.dataView-cellListOddItem {
cursor：pointer;
padding：2px 5px;
zoom：1;
}
.dataView-cellListKeyboardSelectedItem .myClass {
background-color：red;
}
.dataView-cellListKeyboardSelectedItem {
background：#ffc;
}
.dataView-cellListSelectedItem {
background-color：＃FFCBC1;
颜色：＃121212;
height：auto;
溢出：可见;
}
渲染隐藏字段以指示选定的元素
private static class ContactCell extends AbstractCell< Contact>
{
@Override
public void render（com.google.gwt.cell.client.Cell.Context context，final Contact value，SafeHtmlBuilder sb）
{
if（value！= null）
{
sb.appendEscaped（value.name）;
sb.append（new SafeHtml（）
{
@Override
public String asString（）
{
return< input type = \hidden \id = \+ value.isSlected +\/>;
}
}）;
选择模型：
selectionModel.addSelectionChangeHandler（new SelectionChangeEvent.Handler（）
{
@Override
public void onSelectionChange（SelectionChangeEvent event）
{
联系selectedObject = selectionModel.getSelectedObject（）;
selectedObject.isSlected = true;
元素element = cellList.getElement（）;
NodeList< com.google.gwt.dom.client.Element> elementsByTagName = element.getElementsByTagName（input）;
for（int i = 0; i< elementsByTagName.getLength（）; i ++）
{
com.google.gwt.dom.client.Element item = elementsByTagName.getItem（i）;
if（item.getId ）.equals（true））item.getParentElement（）。addClassName（myCss）;
}
}
}）;
I want to implement this example of celllist with one modification. I want to make each row to a grey color once its clicked by someone. It should persist there, and not change as the user clicks on another row. It's okay if its gone once a new server call is made. I'm doing this to mark it as a 'read message' for the user. Any clues?
I overrided (updated) the css style of cellList as below but when I inspect I dont see the 'myCss' style being applied .
CellListStyles.css
@external .dataView-cellListWidget;
@external .dataView-cellListEvenItem;
@external .dataView-cellListOddItem;
@external .dataView-cellListKeyboardSelectedItem;
@external .dataView-cellListSelectedItem;
.dataView-cellListWidget{}
.dataView-cellListEvenItem{}
.dataView-cellListOddItem{}
.dataView-cellListKeyboardSelectedItem{}
.dataView-cellListSelectedItem{}
.dataView-cellListWidget {
}
@external .dataView-cellListEvenItem .myCss{
background-color: aqua;
}
@external .dataView-cellListOddItem .myCss{
background-color: aqua;
}
.dataView-cellListEvenItem,.dataView-cellListOddItem {
cursor: pointer;
padding: 2px 5px;
zoom: 1;
}
@external .dataView-cellListKeyboardSelectedItem .myCss{
background-color: red;
}
.dataView-cellListKeyboardSelectedItem {
background: #ffc;
}
.dataView-cellListSelectedItem {
background-color: #FFCBC1;
color: #121212;
height: auto;
overflow: visible;
}
One way to do it will be add a class to the selected object and apply css. you might have to override cellList resource css. to override cellList resource css have a look here.
selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
public void onSelectionChange(SelectionChangeEvent event) {
contactForm.setContact(selectionModel.getSelectedObject());
/** for setting it selected**/
add a class to the selected object here instead of setting background. And set background as grey using css.
}
});
Edit :
A tried my own suggestion and it works. you need to override the resource.
Some sample code.
Apply resources to celllist :
i have created 2 interfaces in 2 separate classes
public interface DataViewCellListResources extends CellList.Resources
{
@Import(value = {DataViewCellListStyles.class})
@Source("sortListStyle.css")
DataViewCellListStyles cellListStyle();
}
@ImportedWithPrefix("dataView")
public interface DataViewCellListStyles extends CellList.Style
{
}
final CellList<Contact> cellList = new CellList<Contact>(new ContactCell(),
(Resources) GWT.create(DataViewCellListResources.class), keyProvider);
use this in sortListStyle.css
@external .dataView-cellListWidget;
@external .dataView-cellListEvenItem;
@external .dataView-cellListOddItem;
@external .dataView-cellListKeyboardSelectedItem;
@external .dataView-cellListSelectedItem;
.dataView-cellListWidget{}
.dataView-cellListEvenItem{}
.dataView-cellListOddItem{}
.dataView-cellListKeyboardSelectedItem{}
.dataView-cellListSelectedItem{}
declare above css in your application css files P.S. added 2 new classes for showing visited
.dataView-cellListWidget {
}
.dataView-cellListEvenItem.myCss{
background-color: aqua;
}
.dataView-cellListOddItem.myCss{
background-color: aqua;
}
.dataView-cellListEvenItem,.dataView-cellListOddItem {
cursor: pointer;
padding: 2px 5px;
zoom: 1;
}
.dataView-cellListKeyboardSelectedItem .myClass{
background-color: red;
}
.dataView-cellListKeyboardSelectedItem {
background: #ffc;
}
.dataView-cellListSelectedItem {
background-color: #FFCBC1;
color: #121212;
height: auto;
overflow: visible;
}
Render a hidden field to indicate selected
private static class ContactCell extends AbstractCell<Contact>
{
@Override
public void render(com.google.gwt.cell.client.Cell.Context context, final Contact value, SafeHtmlBuilder sb)
{
if (value != null)
{
sb.appendEscaped(value.name);
sb.append(new SafeHtml()
{
@Override
public String asString()
{
return "<input type=\"hidden\" id=\"" + value.isSlected + "\"/>";
}
});
}
}
}
Selection Model :
selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler()
{
@Override
public void onSelectionChange(SelectionChangeEvent event)
{
Contact selectedObject = selectionModel.getSelectedObject();
selectedObject.isSlected = true;
Element element = cellList.getElement();
NodeList<com.google.gwt.dom.client.Element> elementsByTagName = element.getElementsByTagName("input");
for (int i = 0; i < elementsByTagName.getLength(); i++)
{
com.google.gwt.dom.client.Element item = elementsByTagName.getItem(i);
if (item.getId().equals("true")) item.getParentElement().addClassName("myCss");
}
}
});
这篇关于想要在GWT单元列表中实现“标记为已读”功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
