走向云和山的彼端

JSF中与POPUP(弹出）窗口交换数据的两种方式。

qiutian — Fri, 27 Aug 2010 08:27:19 +0000

很多人都知道，用：popup = window.open(url, name, features);
popup.focus();可以弹出一个新的浏览器的窗口，这是一个十分方便常用的功能。但是如何在JSF中与弹出窗口交换数据？是很多人关心的问题。这里基于Core JSF书中的例子，谈到两个方法，列举到这里，希望对有需求的人有所帮助。

第一种方法较为简单，和所有其他的基于网络编程语言一样，使用URL链接来提交你所需要的变量和变量值。比如我们的例子中，使用：

window.open(“popup.faces?country=” + country[i].value, “popup”, features);

来将ID为country的控件的值提交为一个叫做country的URL变量。然后在JSF中使用“param.country”来获取这个值。

具体例子实现：

popup1.js

function doPopup(source) {
   country = source.form[source.form.id + ":country"];
   for ( var i = 0; i < country.length; i++) {
      if (country[i].checked) {
         popup = window.open("popup1.xhtml?country="
            + country[i].value, "popup",
         "height=300,width=200,toolbar=no,menubar=no,"
               + "scrollbars=yes");
         popup.openerFormId = source.form.id;
         popup.focus();
      }
   }
}
 
function doSave(value) {
   var formId = window.openerFormId;
   opener.document.forms[formId][formId + ":state"].value = value;
   window.close();
}

technique1.xhtml

 version="1.0" encoding="UTF-8"?>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
   >
       library="javascript" name="popup1.js"/>
      >Popup window technique 1>
   >
   >
      >
         >
            >
               >Country:>
               > id="country" value="#{bb.country}">
                   itemLabel="USA" itemValue="USA"/>
                   itemLabel="Canada" itemValue="Canada"/>
               >>
            >
            >
               >State/Province:>
               > id="state" value="#{bb.state}"/>>
               > value="..."
               onclick="doPopup(this); return false;"/>>
            >
         >
         > value="Next" action="index"/>>
      >
   >
>

这是弹出窗口的内容：

popup1.xhtml

 version="1.0" encoding="UTF-8"?>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
   >
       library="javascript" name="popup1.js"/>
      >Select a state/province>
   >
   >
      >
          value="#{bb.states[param.country]}" var="state">
            >
                value="#" onclick="doSave('#{state}');">
                  #{state}
               >
            >
         >
      >
   >
>

第二种方法，是使用隐藏的表单，并且使用form的”target”属性来将值提交到需要的目标。

需要注意的是：

Target=”‘的目标要指向到具体的弹出窗口，这样浏览器才会将你所需要的值提交给你所需要的页面。
bb.country的值，由bb bean来维护
commandlink的action=”"部分的输出可以用来给JSF navigation
handler做各种判断

JS中使用以下方式来获取这个隐藏表单所提交的值：

document.getElementById(“hidden:country”).value = country[i].value;
document.getElementById(“hidden:go”).onclick(null);

具体实现如下：

technique2.xhtml

 version="1.0" encoding="UTF-8"?>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">
   >
       library="javascript" name="popup1.js"/>
      >Popup window technique 2>
   >
   >
      >
         >
            >
               >Country:>
               > id="country" value="#{bb.country}">
                   itemLabel="USA" itemValue="USA"/>
                   itemLabel="Canada" itemValue="Canada"/>
               >>
            >
            >
               >State/Province:>
               > id="state" value="#{bb.state}"/>>
               > value="..."
               onclick="doPopup(this); return false;"/>>
            >
         >
         > value="Next" action="index"/>>
      >
 
      
       id="hidden" target="popup">
          id="country" value="#{bb.country}"/>
          id="go" action="popup2"/>
      >
   >
>

popup2.xhtml

 version="1.0" encoding="UTF-8"?>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
   >
       library="javascript" name="popup1.js"/>
      >Select a state/province>
   >
   >
      >
          value="#{bb.statesForCountry}" var="state">
            >
                value="#" onclick="doSave('#{state}');">
                  #{state}
               >
            >
         >
      >
   >
>

popup2.js

function doPopup(source) {
   country = source.form[source.form.id + ":country"];
   for (var i = 0; i < country.length; i++) {
      if (country[i].checked) {
      popup = window.open("", "/faces/popup2.xhtml",
         "height=300,width=200,toolbar=no,menubar=no,scrollbars=yes");
         popup.openerFormId = source.form.id;
         popup.focus();
         document.getElementById("hidden:country").value = country[i].value;
         document.getElementById("hidden:go").onclick(null);
      }
   }
}
 
function doSave(value) {
   var formId = window.openerFormId;
   opener.document.forms[formId][formId + ":state"].value = value;
   window.close();
}

JSF中为DataTable增加翻页功能

qiutian — Fri, 27 Aug 2010 03:26:44 +0000

初学JSF的大概都会遇到这么个问题，从Bean中将数据读取出来以后，用DataTable在页面上显示。是很常用的数据内容输出的方法，但是DataTable本身没有翻页的功能。如何给DataTable增加翻页呢？这里分享一下CoreJSF 3rd Edition中的pager demo来完成这个数据分页。其思路可以扩展到各种大量数据需要翻页的情况。

不想自己实现这个翻页的朋友，可以使用各种UI Framework中自带的翻页组件。比如Apache Tomahawk 中的 dataScroller 具体实现方法其实和这里要谈到的类似。

OK首先是JSF网页部分：

index.xhtml

version="1.0" encoding="UTF-8"?>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:corejsf="http://corejsf.com">
   
      ="css" name="styles.css"/>
      <title>Pager Test</title>
   </h:head>
   
      />
      
         id="timezones" value="#{tz.data}" var="row" rows="10">
            #{row}</h:column>
         </h:dataTable>
         ="timezones" showpages="20"
                        selectedStyleClass="currentPage"/>
      </h:form>
   </h:body>
</html>

tz这个bean的data是个String[]，其中放了所有的timezone的名称。这里用DataTable将它输出到html页面上。这个表格将会很长，所以我们需要来将其分页化。

TimeZone bean的内容很简单：

TimeZoneBean.java

package com.corejsf;
 
import javax.faces.bean.ManagedBean;
   // or import javax.inject.Named;
import javax.faces.bean.RequestScoped;
 
@ManagedBean(name="tz") // or @Named("tz")
@RequestScoped
public class TimeZoneBean {
   private String[] data = java.util.TimeZone.getAvailableIDs();
   public String[] getData() { return data; }
}

好直到这里都没什么，如果你已经留意前面第一个jsf页面，其中的 selectedStyleClass=”currentPage”/>部分，实际就是我们这里的重点了，这是一个定制的Renderer，用这个定制的renderer来控制翻页并且切换DataTable的数据显示。

这里我们的这个翻页Renderer叫“com.corejsf.Pager”该类属于javax.faces.Command。

具体实现方式：

PageRenderer.java

package com.corejsf;
 
import java.io.IOException;
import java.util.Map;
import javax.faces.component.UIComponent;
import javax.faces.component.UIData;
import javax.faces.component.UIForm;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.render.FacesRenderer;
import javax.faces.render.Renderer;
 
@FacesRenderer(componentFamily="javax.faces.Command",
   rendererType="com.corejsf.Pager")
public class PagerRenderer extends Renderer {
   public void encodeBegin(FacesContext context, UIComponent component)
      throws IOException {
      String id = component.getClientId(context);
      UIComponent parent = component;
      while (!(parent instanceof UIForm)) parent = parent.getParent();
      String formId = parent.getClientId(context);
 
      ResponseWriter writer = context.getResponseWriter();    
 
      String styleClass = (String) component.getAttributes().get("styleClass");
      String selectedStyleClass
         = (String) component.getAttributes().get("selectedStyleClass");
      String dataTableId = (String) component.getAttributes().get("dataTableId");
      int showpages = toInt(component.getAttributes().get("showpages"));      
 
      // find the component with the given ID
 
      UIData data = (UIData) component.findComponent(dataTableId);
 
      int first = data.getFirst();
      int itemcount = data.getRowCount();
      int pagesize = data.getRows();
      if (pagesize <= 0) pagesize = itemcount;
 
      int pages = itemcount / pagesize;
      if (itemcount % pagesize != 0) pages++;
 
      int currentPage = first / pagesize;
      if (first >= itemcount - pagesize) currentPage = pages - 1;
      int startPage = 0;
      int endPage = pages;
      if (showpages > 0) {
         startPage = (currentPage / showpages) * showpages;
         endPage = Math.min(startPage + showpages, pages);
      }
      if (currentPage > 0)
         writeLink(writer, component, formId, id, "<", styleClass);
 
      if (startPage > 0)
         writeLink(writer, component, formId, id, "<<", styleClass);
 
      for (int i = startPage; i < endPage; i++) {
         writeLink(writer, component, formId, id, "" + (i + 1),
            i == currentPage ? selectedStyleClass : styleClass);
      }
 
      if (endPage < pages)
         writeLink(writer, component, formId, id, ">>", styleClass);
 
      if (first < itemcount - pagesize)
         writeLink(writer, component, formId, id, ">", styleClass);
 
      // hidden field to hold result
      writeHiddenField(writer, component, id);
   }
 
   private void writeLink(ResponseWriter writer, UIComponent component,
      String formId, String id, String value, String styleClass)
      throws IOException {
      writer.writeText(" ", null);
      writer.startElement("a", component);
      writer.writeAttribute("href", "#", null);
      writer.writeAttribute("onclick", onclickCode(formId, id, value), null);
      if (styleClass != null)
         writer.writeAttribute("class", styleClass, "styleClass");
      writer.writeText(value, null);
      writer.endElement("a");
   }
 
   private String onclickCode(String formId, String id, String value) {
      return new StringBuilder().append("document.forms['")
         .append(formId).append("']['")
         .append(id).append("'].value='").append(value).append("'; document.forms['")
         .append(formId).append("'].submit(); return false;").toString();
   }
 
   private void writeHiddenField(ResponseWriter writer, UIComponent component,
      String id) throws IOException {
      writer.startElement("input", component);
      writer.writeAttribute("type", "hidden", null);
      writer.writeAttribute("name", id, null);
      writer.endElement("input");
   }
 
   public void decode(FacesContext context, UIComponent component) {
      String id = component.getClientId(context);
      Map<String, String> parameters
         = context.getExternalContext().getRequestParameterMap();
 
      String response = (String) parameters.get(id);
      if (response == null || response.equals("")) return; 
 
      String dataTableId = (String) component.getAttributes().get("dataTableId");
      int showpages = toInt(component.getAttributes().get("showpages"));      
 
      UIData data = (UIData) component.findComponent(dataTableId);
 
      int first = data.getFirst();
      int itemcount = data.getRowCount();
      int pagesize = data.getRows();
      if (pagesize <= 0) pagesize = itemcount;
 
      if (response.equals("<")) first -= pagesize;
      else if (response.equals(">")) first += pagesize;
      else if (response.equals("<<")) first -= pagesize * showpages;
      else if (response.equals(">>")) first += pagesize * showpages;
      else {
         int page = Integer.parseInt(response);
         first = (page - 1) * pagesize;
      }
      if (first + pagesize > itemcount) first = itemcount - pagesize;
      if (first < 0) first = 0;
      data.setFirst(first);
   }
 
   private static int toInt(Object value) {
      if (value == null) return 0;
      if (value instanceof Number) return ((Number) value).intValue();
      if (value instanceof String) return Integer.parseInt((String) value);
      throw new IllegalArgumentException("Cannot convert " + value);
   }
}

配置方面还需要：

web.xml

 version="1.0" encoding="UTF-8"?>
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xmlns="http://java.sun.com/xml/ns/javaee"
   xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
      http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
   version="2.5">
   >
      >Faces Servlet>
      >javax.faces.webapp.FacesServlet>
   >
   >
      >Faces Servlet>
      >/faces/*>
   >
   >
      >faces/index.xhtml>
   >
   >
      >javax.faces.PROJECT_STAGE>
      >Development>
   >
   >
      >javax.faces.FACELETS_LIBRARIES>
      >/WEB-INF/corejsf.taglib.xml>
   >
>

corejsf.taglib.xml

 version="1.0" encoding="UTF-8"?>
 version="2.0"
   xmlns="http://java.sun.com/xml/ns/javaee"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
   http://java.sun.com/xml/ns/javaee/web-facelettaglibary_2_0.xsd">
   >http://corejsf.com>
   >
      >pager>
      >
         >javax.faces.Command>
         >com.corejsf.Pager>
      >
   >
>

具体实现如图，代码在tomcat 6.0.29 x64测试通过。

Five tips to convert more customers

qiutian — Mon, 23 Aug 2010 07:41:52 +0000

By Netregistry

If you’ve opened your ecommerce store and are ready to sell online, one of the biggest

challenges is trying to convince site visitors to become customers. The internet is a browsing

medium, allowing potential customers to flit from online store to online store, looking for the

cheapest price or best bargain, until they decide to make a purchase. Therefore, it is important

to provide an online store that recognises this.

Unlike the real world, where the presence of a helpful sales assistant can sometimes close a

sale on a wavering store visitor, the internet has a back button that makes it far easier for your

visitors to leave your store quickly and anonymously. So how do you close those sales?

Keep it simple

Most people shop online for convenience, so it is imperative that your online store has an

easy purchasing process. Don’t overcomplicate your online store by using forms, requiring

registration or using complex navigation if you don’t have to. Always ensure a customer can

click a button at any time to go straight to a purchase.

Secure and easy payments

One of the biggest worries to internet shoppers is the security of their credit card details when

buying their online bargains.

By ordering a dedicated or shared SSL certificate from Netregistry, you can show your

customers their payment transactions are safely encrypted to protect their valuable information.

Landing pages that sell

Visitors may arrive at your online store through a variety of routes, meaning they may land

on different pages of your website.

Because of this, ensure each relevant landing page is focussed on closing that particular

sale. The internet is about instant gratification, so reward a visitor searching for your

bargains with a quick response to their needs. Each landing page should be designed

to provide a simple ‘one click sale’ if at all possible, providing an instant solution to the

visitor’s request, whilst removing clutter. Take the visitor by the hand and lead them where

you want them to go.

Make them an offer they can’t refuse

That’s what Domino Pizza did when they entered the competitive pizza home delivery

market with their “30 minutes or it’s free” campaign. What can your online store offer to

encourage customers to buy from you instead of any of the other online stores fighting for

their attention; cheap deals on fast delivery, a money-back guarantee, free upgrades?

The online shopping world is different to the high street, where your shop is only

competing with sellers in the local area. Online, a customer can visit numerous stores in

minutes to compare prices and deals, increasing competition dramatically. Ensure your

offer stands out from the rest.

Have postage and shipping alternatives advertised up front

It is common for customers to abandon a purchase at the very last page of the payment

process once the postage is factored into the overall price, catching them by surprise. By

offering fair postage rates up front, you allow a customer to effectively assess the value of

buying through your store.

Offer alternative methods of postage, where possible. Some online stores offer delivery only by

courier, or other expensive methods, which can turn customers away. Courier costs can more

than double the price of an item in some cases, immediately short-circuiting a sale. Ensure

every product on your website has a cost-effective postage solution that makes the whole

package attractive to the buyer.

How to make your customers love you

qiutian — Mon, 23 Aug 2010 07:33:48 +0000

In a bricks-and-mortar store, customers can be served with a smile and a helping hand.

However, in the online world, there are many other factors to consider, such as dealing with postage and delivery issues and handling online queries. Luke Telford talks with two people from online stores about the challenges they face and how they use their service strategies to ensure their customers are taken care of online, all the time.

Monsterthreads: tailoring your style

“Effective communication is essential in business, and the internet is essential for connecting with the public, especially gen X and Y,” says Mark Mamrot, CEO and owner of online t-shirt retailer Monsterthreads.

“Online and face-to-face customers have strong service expectations, and your ability to meet those expectations shapes their perception of you. In a physical shop, customers can judge the quality of your business by many elements but online, the interaction is often limited to a relatively static website. Your responsiveness, therefore, is crucial to the customer’s experience.

“When dealing with customers online, responsiveness is definitely an important factor. However, manner is also crucial. It will vary from business to business – for a company such as ours, customers need to be treated with a personal touch. We treat our customers as we would treat our friends, and often go beyond our obligations to keep them satisfied and maintain the personality of the Monsterthreads brand.

“Of course, we do accommodate customer feedback. We have a ‘comments and feedback’ field integrated into our order process, and we use mailing list software with a return address. We also perform periodic satisfaction surveys. Most importantly, we act on what we learn from those surveys.

“Every bit of feedback receives a reply, whether it’s a thank-you, an apology or an explanation. When you deal with thousands of customers, you will encounter a diverse range of people, including some with unreasonable expectations. It’s important to understand that not everyone can be utterly satisfied with your product, especially with a product as personal as garments. However, just about everyone can be satisfied with your customer service effort.’

Mag Nation: grasping the leap of faith

“The willingness of customers to shop online means we’re not just competing with the newsagent up the block; we’re also competing with newsagents in Perth, as well as Amazon and other online magazine stores,” explains Oliver Palmer, online operator of MagNation.com.au.

“Customer service is paramount when other retailers are willing to deliver the same product at a similar price. Word of mouth is exponentially quicker than it was even five years ago. Tony Hsieh from online clothing store Zappos said that they’re not in the retail business so much as the customer service business, and we agree with this wholeheartedly.

“It’s hard to put a figure on how much time we spend interacting with customers but we keep a keen eye on Facebook and Twitter and make a point of responding to comments and tweets. Our customers have come to view our social media presence as a resource where they find out about new magazines or when titles are coming into our stores, and that’s not only useful for them but it’s also a great way for us to keep in touch with demand and shifting trends.

“We don’t have any complicated CRM systems to handle feedback; everything we use is off-the-shelf. Email, Twitter, Facebook and our blog runs on WordPress. We have a contact form on our website and get a lot of feedback via Facebook and tweets.

“Some essential elements for good customer service involve open communication and delivering what you promise. If something goes wrong, be honest and do whatever it takes to fix it.

“An anonymous commenter recently spammed seven of our most recent blog posts, accusing us of a litany of crimes. We decided to publish the comment in its entirety on a dedicated post and to debunk each of their accusations one by one. In this case, many of our customers sprang to our defence.

It took us a while to realise something that’s seemingly obvious – our customers online are taking a leap of faith by purchasing from us, or indeed any online store. They’re giving us their money upfront for a product that will be delivered over the course of an entire year and as a result, they often need a bit more care than in-store customers.”

2010 CWE/SANS Top 25 Most Dangerous Software Errors

qiutian — Mon, 23 Aug 2010 07:28:55 +0000

http://cwe.mitre.org/top25/#Listing

让Alfresco Explorer中表单提交后不回到页面顶端

qiutian — Wed, 18 Aug 2010 09:56:07 +0000

无论新的surf怎么好，起码现在还仍然不太成熟，老的Alfresco Explorer虽然技术较为落后，但是功能和各方面仍然比新的UI成熟很多。

如果你经常使用alfresco explorer来进行文档和记录管理和编辑，你会发现当你在同一个页面中有多个form的时候，每次form提交该页面都会自动回到首页，如果你的页面很长，这个问题很是烦人。（其实在使用ajax list or space or whatever picker等UI的时候都会有同样的问题，增加和删除项后form提交会导致页面回到顶端）

在alfresco.war的web.xml中有一个项可以修复该问题。编辑web.xml，找到：

Source code

>
        >org.apache.myfaces.AUTO_SCROLL>
        >true>
        >
            If true, a javascript function will be rendered that is able to restore the
            former vertical scroll on every request. Convenient feature if you have pages
            with long lists and you do not want the browser page to always jump to the top
            if you trigger a link or button action that stays on the same page.
            Default: "false"
        >
    >

3.2r2中没编辑过的话在56-66行，将其中的param-value 由 false改为ture就可以了。

修改后使用myface auto scrolling功能记录你上次的位置，方便了许多。

5 easy ways to keep your customers

qiutian — Mon, 16 Aug 2010 06:13:03 +0000

David Binning

3 August 2010

The more useful information you know about your customers, the better you can understand and address their needs.

Chosen carefully and implemented intelligently, a customer relationship management (CRM) system can help you gain powerful insights into what makes your customers tick.

The key to getting customer relationship management right is in deciding the best questions to ask and then figuring out what to do with the answers. Before you begin asking your customers questions though, ask yourself some:

* Who are your customers?
* What are the main subgroups?
* How do you currently interact with them, and how would you like to interact with them?
* What do they currently buy from you, and what do you think they might buy in the future?
* How long have they been customers, and what do you know about why they chose to do business with you?

CRM systems provide a framework to collect and process all of the information about the people who buy, or should be buying from you, so that you can develop smarter and more effective strategies for targeting them, while tracking your success beyond the mere fact of a sale.

1. Segment your customer base

In order for CRM systems to be effective, it is important to feed in as much useful information as possible on your customers.

This data should include a record of all conversations and interactions, from emails to phone calls and other channels. Also consider the customer experience of purchases, including with your competitors, and dates, return of goods for whatever reason, complaints and other post-sale feedback, including expressions of dissatisfaction.

Then there’s all the information specific to each customer, such as company and industry, name, job title and gender of key contacts, as well as how long they’ve been with the company and even their budget.

According to Michael Loop from digital marketing specialist Datarati, it’s vital to start from scratch and to ensure that the data entered is clean.

“It’s important to have rules for validation in systems so that segmentation is clean and accurate and the system is free from duplications,” he says. “If you don’t have that information you will be sending out inconsistent messaging and possibly creating duplication.”

2. Work out which information to focus on

Obvious information to capture includes the best method of contacting and interacting with customers, such as whether they prefer to be phoned or emailed and whether there are best times for contact. And as Foster stresses, make sure that your customers want to hear from you.

“You really need to know whether you have permission to send people emails, for instance,” he says. If you don’t have permission, you will be contravening spam/privacy laws.

Digital communications, especially via the web, are creating new opportunities to monitor and respond to customer behaviour. For instance, Datarati’s Loop suggests that companies pay close attention to what information is accessed on their websites, such as market reports, case studies or other materials that might provide insight into what customers are thinking about. Personal information is also very important. In the past, the more popular sources in the business world might have been bars and golf courses; now social networking is emerging as a useful source of ‘highly enriched data’ that can be applied to increase the effectiveness of CRM systems.

3. When you have the data, how do you use it?

A big point of getting CRM right, is that it boosts your ability to craft more intelligent and targeted campaigns for the future, while also giving you useful ways to refine your general interaction with customers.

For instance, information from a CRM system might lead to an email campaign being segmented into different groups presenting different incentives or special offers depending on past history. “Try to look at trends for customers and export that data to things like email marketing,” Foster suggests.

4. Make use of your CRM system day-to-day: checklist

* Train your staff – A CRM system will only be as good as the people who use it. Therefore the most important thing to get right for successful implementation is staff education.

* Ensure it gets used – CRM takes time and effort, and sales and other staff need to understand what’s in it for them. Unless there is a full understanding of and commitment to the concept of CRM, its value to your organisation will always be limited.

* Keep it fresh – Data has a use-by date, so it’s vital your team commits to keeping the data up-to-date and making the most of the latest information. “Start with something simple, such as just tracking every time you phone someone, until you begin to see value,” Shoeboxed’s Foster says. “Build on it over time.”

买了个多功能电子相框，好像叫做iPad啊？还不错。

qiutian — Mon, 09 Aug 2010 11:38:39 +0000

18th-Aug-2010: 新的3.2.2出来了，暂时不能越狱，大家注意如果你越狱了，iTune叫你升级新版注意点“否”，在iTunes的功能设置选项中有禁止自动更新的选项，注意调整。

10th-Aug-2010: 这年头的电子相框还能“越狱”，昨晚上越狱成功，中途出现白苹果，不过现已修复。还有这个相框是基于Unix操作系统的，怪不得还挺贵 lolz

越狱后装了IPA补丁，很可能会白苹果，不过可以重新刷回来，
步骤如下： 1。进入刷机模式：按HOME+电源 10秒，然后放开电源继续按HOME，直到ITUNES连接界面出现
2。打开ITUNES会有显示一个IPAD需要恢复。
3。按提示确认恢复。
4。下载恢复固件后，自己手动关机
5。把ITUNES的帐号换成美国帐号，不然下面就进不去恢复的服务器。
6。再重复1~3，之后会出现连接服务器，连上后恢复，成功。

一般下载是30分钟（400M）恢复是15分钟。
以上是昨天恢复出厂设置的经过，请大家参考。

1，下载iPad 3.2固件；http:/ /appldnld.apple.com.edgesuite.net/content.info.apple.com/iPad/061-7987.20100403.mjiTr/iPad1,1_3.2_7B367_Restore.ipsw 文件大小：456.8mb
2，将开机就只能显示一个大白苹果的IPAD用数据线链接到安装有iTunes的电脑，这时候的显示还是卡在一个白苹果的界面。
3，同时按住圆点+开/关机键直到IPAD黑屏，松开开/关机键大约7秒左右直到Itunes检测到连接为止即进入DFU模式，
4，此时看到iTunes会显示有一个等待恢复的ipad。
5，按住键盘shift后点击iTunes恢复按钮，会出现一个对话框，此时请选择之前下载的固件文件进行恢复。
6，恢复进程约5分钟。耐心等待。。。您心爱的ipad马上就要回到您身边了。

9th-Aug-2010: 买了个多功能电子相框，好像叫做iPad啊？还不错。

Will the Real Browser Stats Please Stand Up?

qiutian — Fri, 06 Aug 2010 07:43:22 +0000

Recently, Mashable published an article entitled “IE6 Finally Nearing Extinction”, announcing that IE6 usage in the United States and Europe has finally dropped below 5%.

That news probably warmed the cockles of the hearts of web designers everywhere. Thus, it seems designers and developers now have even more incentive to stop supporting IE6, following the pattern set by Google, notably with regards to YouTube.

The stats in the Mashable article are based on StatCounter Global Stats. In this article, I’ll provide some food for thought by way of some alternative statistics that in many ways contradict the sources for the article published by Mashable.

These stats should drive home the point that every website is different, and that in some cases it may still be necessary to provide a fairly decent experience in IE6, while progressively enhancing design and functionality for newer browsers.

Below is a screenshot from the June browser version report for Europe, with IE6’s share indicated:

But developers should not be so quick to jump on this bandwagon. The statistics that the Mashable article were based on are specific to Europe and the U.S. (which are obviously huge markets), so the advice given in so many areas of web design likewise applies here: Design for your audience, and don’t be swayed by trends.

What are the Worldwide Stats?

Let’s look at the same statistics from StatCounter, but with the broader worldwide filter applied:

Now the IE6 usage stats are just about doubled, up to just under 10%. Already we can see the importance of considering your own audience and your own analytics reports before hastily disregarding IE6 support.

Another browser version report, this one by Net Applications provides significantly higher statistics for IE6:

Net Applications explain on their home page how their stats are compiled, for those who are curious as to why their stats for IE6 differ so much. Even if we don’t accept these as the most relevant stats, they do offer an alternative report that encourages developers and site owners to pay close attention to their own analytics.

Another very significant set of stats for worldwide browser usage is provided by W3schools. Generally speaking, web developers should not rely on reports from W3schools, because their usage stats are based on W3school’s analytics. Their website is visited by web professionals and programmers who are very unlikely to use IE6 in their day-to-day tasks. Nonetheless, their browser version stats are interesting to consider:

Even in this niche area, the usage for IE6 is almost 3% higher than the reports for the U.S. and Europe. So again, while the stats for Europe and the U.S. are encouraging for the demise of IE6, we should still be careful.

It should also be noted that the W3schools browser stats page is (and has long been) at the top of Google search results for the phrase “browser usage statistics“. This is misleading because those stats are specific to the tech and programming industry, and should not be considered for final analytics.

What About Individual Country Reports?

This is where the reports get very interesting. Below, you’ll find screenshots displaying browser version stats for some of the most populous nations in the world, with the IE6 stats indicated:

Browser Usage Stats for China

The stats shown above for China alone are hard to believe. IE6 dominates usage in that market. But encouragingly, the stats are much lower for Asia overall, as shown below:

Browser Usage Stats for Asia

Browser Usage Stats for India

Browser Usage Stats for Pakistan

Of course, just because these are some of the most populated parts of the world, does not necessarily mean those are large or lucrative markets. In fact, due to the dense population numbers, the opposite could be true.

So, the stats above will obviously only be pertinent to those who are developing websites and web apps targeted at those specific geographic markets.

At the very least, reviewing some of these country-specific reports reminds us why the usage stats have remained so high for so long.

What Does This all Mean?

The reasonable thing to conclude from these reports is that each project is different, and no single set of stats should be the determining factor for support of IE6.

If you’re developing a brand new site that doesn’t have any analytics trends, then you should carefully study the demographics of your intended audience, and then adjust your support requirements as new analytics statistics are gathered after launch.

On the other hand, if you’re redeveloping or realigning an already established property, past analytics reports should prove invaluable to your development efforts to ensure you’re reaching as many people as possible.

As an epilogue to this discussion, it would certainly be wise to also consider usage for IE7 and IE8 — both of which, according to many of the charts shown above, have significant market shares.

This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.

CSS Hack

qiutian — Fri, 06 Aug 2010 07:27:18 +0000

This tutorial is written by David Hammond, a 20-year-old web technology enthusiast from California who is currently juggling this site, work, college, and other pet projects. He mantains the site Web Devout educating people on web development and standards.

Dealing with browser inconsistencies often makes up a majority of the work for a web designer. Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines. Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it’s best to know what your options are and weigh the consequences appropriately. The purpose of this article is to describe some of the CSS hacks, also called CSS filters, with the least significant potential consequences.

Conditional comments

Due to its relatively poor level of standards support, Internet Explorer tends to be the subject of most CSS hacks. Luckily, as of version 5, it deliberately supports a rather safe-to-use hack called “conditional comments”. Conditional comments are specially constructed HTML comments that Internet Explorer on Windows may treat differently from other browsers, optionally based on IE’s version number. They can cause Internet Explorer to ignore the markup between comments or to include part of a comment as if it was regular markup. Conditional comments apply specifically to browsers using Internet Explorer’s Trident layout engine, meaning IE-based browsers like Maxthon and Avant handle them like Internet Explorer does while browsers using other layout engines see them simply as regular comments. Internet Explorer on the Mac uses a different layout engine and doesn’t support conditional comments.

The most beneficial aspect of conditional comments is that you are not relying on browser bugs when using them. When you use CSS hacks that rely on browser bugs, you run into the possibility of those bugs being fixed at an unwanted time or other browsers showing the same bugs. Conditional comments only work in browsers that specifically support them and claim to be based on Internet Explorer, which in this case all known browsers are honest about.

There are two forms of conditional comments: positive and negative. A positive conditional comment will expose the included markup only to web browsers that match the condition (meaning only the selected versions of Internet Explorer). A negative conditional comment will expose the markup only to web browsers that don’t match the condition (meaning all non-IE web browsers and any versions of IE that the condition didn’t match). Note that, since versions of IE older than IE 5 don’t support conditional comments, you may get unexpected results in those browsers.

Syntax

The syntax for conditional comments is as follows:

Positive: HTML
Negative: HTML

condition is one of the following:

IE: Any version of IE
lt IE version: Versions less than version
lte IE version: Versions less than or equal to version
IE version: Only version version
gte IE version: Versions greater than or equal to version
gt IE version: Versions greater than version

version is the version of Internet Explorer, typically 5, 5.5, 6, or 7

HTML is the HTML to be included if the condition does or doesn’t match, depending on the type of conditional comment. When included, the HTML is placed right where the conditional comment is in the source.

For negative conditions, can be replaced with –> if the condition is simply IE. The longer version is only needed when Internet Explorer might parse the contents.

The directive is not available in XML, so it is illegal to use it in XHTML. A solution would be to split it up into two special conditional comments: XHTML –> XHTML where XHTML is the same both places. Note that Internet Explorer 7 and below don’t yet recognize XHTML as a form of XML, so this is merely forward-looking.

To minimize the chance of your site breaking in future versions of Internet Explorer, read Preparing your site for IE.next.

Fixing stand-alone versions of Internet Explorer

Internet Explorer was not designed to allow multiple versions to be installed at once, and Microsoft doesn’t officially support any such configurations. If you use one of the hacked third party packages that attempts to do this, you will experience problems with version-specific conditional comments, among other things. This is because the different stand-alone copies still rely on a common centralized registry for certain data, including version information.

Although there is no simple way to cut through all of the issues with stand-alone versions of Internet Explorer, it is possible to force them to look elsewhere for their version information, thus fixing this issue with conditional comments. The trick is to remove the normal centralized version indicator. To do this, first open up regedit.exe from the “Run…” dialog. Navigate to HKEY_LOCAL_MACHINE/Software/Microsoft/Internet Explorer/Version Vector/ (If HKEY_LOCAL_MACHINE doesn’t exist, try HKLM instead). In the right pane, you should see a row with a Name value of IE. Rename this by clicking on it and changing it to zIE (or anything unique and different). Restart Internet Explorer to see the effects. Now when it looks for the IE key for its version information, the key will be missing and it will be forced to determine the correct version number from its own module.

Stand-alone versions of Internet Explorer have a number of other issues, and it therefore may be better to instead use a separate virtual machine for each version of Internet Explorer to ensure that what you see is what your users will see. I recommend VMware Server, which is completely free of charge and fairly easy to set up.

Conditional comments as a CSS hack

Conditional comments can be used as a CSS hack by including links to stylesheets based on the layout engine. Here is an example of how stylesheets can be separated in this way:

Source code


<html lang="en">
<head>
<title>Test</title>
<link href="all_browsers.css" rel="stylesheet" type="text/css">


[IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> 
 <link href="not_ie.css" rel="stylesheet" type="text/css"> 
</head>
<body>
<p>Test</p>
</body>
</html>

In the above example, all_browsers.css applies to all browsers, ie_only.css only applies to all versions of Internet Explorer, ie_6_and_below.css applies to all versions of Internet Explorer below IE 7, recent.css applies to all browsers except IE versions below 7, and not_ie.css applies to all non-IE browsers.

In-CSS hacks

One of the drawbacks of conditional comments is that they require changes to the HTML source. Unfortunately, there is no equivalent to conditional comments in CSS. Instead, if you must use in-CSS hacks, you must use some other much less reliable techniques, often involving the exploitation of browser bugs.

Easy selectors

Most in-CSS hacks deal with selector bugs. The following is a list of browser version ranges and the beginnings of selectors that are known to select elements in them. Note that because these hacks rely on browser bugs or missing features, results may vary in some lesser-known or future browsers. All of these selectors use valid CSS.

IE 6 and below: * html {}
IE 7 and below: *:first-child+html {} * html {}
IE 7 only: *:first-child+html {}
IE 7 and modern browsers only: html>body {}
Modern browsers only (not IE 7): html>/**/body {}
Recent Opera versions 9 and below: html:first-child {}

Note that the hack for IE 7 and below is actually two separate selectors: one for IE 7 and one for IE 6 and below. The rest of the desired selector must be added to both parts of the hack. The two parts cannot be combined with a comma, because IE 6 and below will fail to correctly parse the selector and won’t be targetted.

Some of these selectors require that the document has a doctype but no processing instructions (including XML declarations). This is the ideal setup to prevent IE 6 from going into quirks mode anyway.

The above selectors will select either the html or body element. This should be used as the start of your full selector. For example, if your desired selector is #foo .bar and you want it to apply only to IE 7, your resulting selector will be *:first-child+html #foo .bar.

Warning: Due to the nature of the Opera-specific selector and Internet Explorer 7′s incorrect handling of :first-child, it is very possible that the html:first-child selector may also select in a future version of Internet Explorer, so be careful when using it. This selector also relies on a bug, so it may be fixed in a future version of Opera. This page also describes an alternative method that is more of an issue to implement but may be somewhat more dependable considering the likely priorities of bug fixing.

Minimized attribute selectors

These hacks are based on differences in handling of attributes in minimized form. If a tag is written , input[disabled="disabled"] {} should select it. However, most browsers get this wrong and in different ways.

For the above markup, here are the selectors various browsers recognize to select the p element:

#attrhack[disabled=""]+p {}: Firefox 1.5 and below, possibly future versions; Safari 2.0 and below, possibly future versions; Konqueror 3.5 and below, possibly future versions
#attrhack[disabled="true"]+p {}: Opera 9 and below, possibly future versions

Note that neither of these selects Internet Explorer 7. Although it supports attribute selectors and adjacent sibling combinators, it doesn’t seem to recognize a string value for attributes in minimized form.

Notice: Minimized attribute form is allowed in HTML but not in XHTML. This hack will not work in XHTML documents.

!important

Internet Explorer 6 and below had a problem with the !important identifier that caused it to be ignored if another declaration of the same property appeared later in the same style declaration block. This can be used to feed Internet Explorer 6 and below special property values that are ignored by other browsers. Internet Explorer 7 fixed this issue.

Here is an example of this technique in use:

Source code


<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<input type="hidden" disabled id="attrhack">
<p>Test</p>
</body>
</html>

@import “non-ie.css” all;

Internet Explorer 7 and below don’t support media selectors on @import rules, instead ignoring the entire rule when they are present. Therefore, you can create an entire stylesheet for non-IE browsers and import it into your main stylesheet by adding @import “non-ie.css” all;.

Future versions of Internet Explorer may support the @import rule correctly.

@import “stylesheet.css” all; imports the stylesheet in all major browsers except IE 7 and below. It may or may not work in future versions of IE.

body[class|="page-body"]

The CSS 2.1 specification isn’t clear about whether or not a hyphen can be included in the value of a hyphen-separated attribute selector. Most browsers, including Firefox and Internet Explorer 7, Allow the body[class|="page-body"] selector to select an element whose start tag looks like this: . However, Opera interprets the specification differently in this regard. It splits up the attribute value by hyphens and only checks the first piece against the attribute selector value. Obviously, if the attribute was split by hyphens, the first piece won’t have any hyphens in it, so Opera treats this selector as a non-match. Therefore, when the proper class is applied to the body element, this selector matches Internet Explorer 7 and most modern browsers except Opera. Opera may change their behavior to match other browsers in the future, but this technique is known to work for Opera 8 and 9.

Here is an example of this technique in use:

Source code


<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
p
{
background: red; /* Applies to all major browsers */
}
body[class|="page-body"] p
{
background: green; /* Applies to IE 7 and most modern browsers except Opera */
}
</style>
</head>
<body>
<p>Test</p>
</body>
</html>

body[class|="page-body"] {} selects the body element with the class page-body in IE 7 and all modern browsers except Opera 9 and below. It may or may not work in future versions.

Unrecommended hacks

If you are going to use hacks, the above techniques are the recommended choices. However, it’s interesting to point out the following unrecommended hacks. Some of them rely on invalid CSS or are more clumsy than the above alternatives.

_property: value and -property: value

Due to a parsing error, Internet Explorer 6 and below wouldn’t fail on properties that were prefixed with non-alphanumeric characters. Prefixing a regular property name with _ or – will cause the property to be applied to Internet Explorer 6 and below but generally not in other browsers. Internet Explorer 7 had this bug fixed.

The CSS specification allows browsers to use an underscore (_) or hyphen (-) as a prefix for a vendor-specific property name with the guarantee that such properties will never be used in a future CSS standard. Because of this guarantee, these two prefix characters are ideal options for this hack.

Although the CSS specification defines this vendor-specific property syntax, the properties are inherently not part of any W3C-endorsed CSS profile and are therefore invalid when validated against one. For this reason, and because there is an often acceptable alternative, this hack is unrecommended.

_property: value and -property: value apply the property value in IE 6 and below. Warning: this uses invalid CSS.

*property: value

Although Internet Explorer 7 corrected its behavior when a property name is prefixed with an underscore or a hyphen, other non-alphanumeric character prefixes are treated as they were in IE6. Therefore, if you add a non-alphanumeric character such as an asterisk (*) immediately before a property name, the property will be applied in IE and not in other browsers. Unlike with the hyphen and underscore method, the CSS specification makes no reservations for the asterisk as a prefix, so use of this hack could result in unexpected behavior as the CSS specifications evolve.

*property: value applies the property value in IE 7 and below. It may or may not work in future versions. Warning: this uses invalid CSS.

body:empty

The :empty pseudo-classes is proposed for CSS 3 and should select an element that has no elements or text inside it. However, when used on the body element, Firefox 1.5 and 2.0 (and corresponding versions of other Gecko-based browsers) always select it even when the body has content (which it should always have).

Although this hack is expected to be valid in CSS 3, it has not yet reached W3C Recommendation status and is invalid CSS 2.x, so it currently isn’t recommended to use this hack. However, it is probably the best way to single out recent versions of Firefox.

body:empty {} selects the body element in Firefox 1.5 and 2.0 only. It may or may not work in future versions. Warning: this uses invalid CSS 2.x but valid CSS 3 according to recent drafts.

a:link:visited, a:visited:link

According to the CSS standard, the :link and :visited link states are mutually exclusive: :link actually means “unvisited link”. However, IE 7 and below will ignore one of these pseudo-classes if the other appears later in the same simple selector.

If you have the tag , either #linkhack:link:visited {} or #linkhack:visited:link {} will select the element in IE 7 and below. The two selectors can be combined for a single declaration block: #linkhack:link:visited, #linkhack:visited:link {}. In IE 7, you can also use an adjacent sibling combinator (+) to select other elements near the link.

This uses perfectly valid CSS, but this method is less practical than some of the above methods and is therefore not recommended.

a:link:visited, a:visited:link {} selects an a element in IE 7 and below. It may or may not work in future versions.

>body

If a simple selector is missing on either side of the child combinator (>), Internet Explorer 7 incorrectly assumes that the missing simple selector is a universal selector. So >body is treated by IE7 like *>body, while other browsers ignore it because it’s a parsing error. Similarly, IE7 treats >> like *>*>*.

IE7 has the same quirk with other combinators. +p is treated like *+p and ~p is treated like *~p. (Note: The ~ combinator is an upcoming CSS 3 feature and is not valid CSS 2.1.)

>body {} selects the body element in IE 7 only. It may or may not work in future versions. Warning: this uses invalid CSS!

html*

Internet Explorer 7 fixed the quirk that allowed the universal selector (*) to select some nonexistent parent of the html element, but there’s another issue that they didn’t fix: When a universal selector is directly adjacent to another simple selector without a space between, Internet Explorer 7 assumes a space there. That means that html* is treated by IE7 like html *, while other browsers ignore it because it’s a parsing error. Similarly, IE7 treats ** like * *.

html* {} selects all descendants of the html element in IE 7 and below. It may or may not work in future versions. Warning: this uses invalid CSS!

!ie

Internet Explorer 7 fixed one of the issues with the !important identifier, but it still has problems when the identifier has an error in it. If an illegal identifier name is used in place of important, Internet Explorer 7 and below will handle the property normally instead of failing. Therefore, in any style declaration block, you can include properties intended to only apply to Internet Explorer and add an !ie identifier. Almost any word can be used in place of ie.

The !ie identifier allows the property to be applied in IE 7 and below. It may or may not work in future versions. Warning: this uses invalid CSS!

!important!

Another problem with the !important identifier that wasn’t fixed in IE 7 is the treatment of non-alphanumeric characters after the identifier. Normally, this should cause the property to fail, but Internet Explorer 7 and below ignore the additional punctuate and apply the property as if it just had the !important identifier.

The !important! identifier allows the property to be applied with importance in IE 7 and below and the property is not applied in other browsers. It may or may not work in future versions. Warning: this uses invalid CSS!

走向云和山的彼端

JSF中与POPUP(弹出）窗口交换数据的两种方式。

JSF中为DataTable增加翻页功能

Five tips to convert more customers

Keep it simple

Secure and easy payments

Landing pages that sell

Make them an offer they can’t refuse

Have postage and shipping alternatives advertised up front

How to make your customers love you

Monsterthreads: tailoring your style

Mag Nation: grasping the leap of faith

2010 CWE/SANS Top 25 Most Dangerous Software Errors

让Alfresco Explorer中表单提交后不回到页面顶端

5 easy ways to keep your customers

1. Segment your customer base

2. Work out which information to focus on

3. When you have the data, how do you use it?

4. Make use of your CRM system day-to-day: checklist

买了个多功能电子相框，好像叫做iPad啊？ 还不错。

Will the Real Browser Stats Please Stand Up?

What are the Worldwide Stats?

What About Individual Country Reports?

Browser Usage Stats for China

Browser Usage Stats for Asia

Browser Usage Stats for India

Browser Usage Stats for Pakistan

What Does This all Mean?

CSS Hack

Table of Contents

Conditional comments

Syntax

Fixing stand-alone versions of Internet Explorer

Conditional comments as a CSS hack

In-CSS hacks

Easy selectors

Minimized attribute selectors

!important

@import “non-ie.css” all;

body[class|="page-body"]

Unrecommended hacks

_property: value and -property: value

*property: value

body:empty

a:link:visited, a:visited:link

>body

html*

!ie

!important!

买了个多功能电子相框，好像叫做iPad啊？还不错。