有机肥

JSON字符串转换JAVA对象例子。

package com.demo.json;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.json.simple.JSONValue;

public class JsonTest
{
    public static void main(String[] args)
    {
        // -----------------------------------------------------------------------------
        // Object 2 JSON
        List<Peoper> peopers = new ArrayList<Peoper>();
        Peoper p1 = new Peoper("001", "Taki", "中国");
        Peoper p2 = new Peoper("002", "DSM", "China");
        peopers.add(p1);
        peopers.add(p2);
        String result = JsonTool.getJsonString("Peopers", peopers);
        System.out.println("JSON: " + result);

        // 解析PHP json_encode 字符串
        String jsonStr = "{\"Name\":\"\u5e0c\u4e9a\",\"Age\":20}";
        Object obj = JSONValue.parse(jsonStr);
        System.out.println(obj);
        System.out.println();

        // -----------------------------------------------------------------------------
        // JSON 2 Object
        String jsonString = "["
                + "{\"author\":\"7\",\"id\":358,\"title\":\"Japan\",\"pictures\":[{\"description\":\"001\",\"imgPath\":\"/cms/u/cms/www/201203/05150720ii68.jpg\"},{\"description\":\"002\",\"imgPath\":\"/cms/u/cms/www/201203/05150720ii67.jpg\"}],\"path\":\"ip\"},"
                + "{\"author\":\"8\",\"id\":359,\"title\":\"China\",\"pictures\":[{\"description\":\"101\",\"imgPath\":\"/cms/u/cms/www/201203/111111111111.jpg\"},{\"description\":\"102\",\"imgPath\":\"/cms/u/cms/www/201203/222222222222.jpg\"}],\"path\":\"ip\"}]";
        JSONArray array = JSONArray.fromObject(jsonString);

        // Content.class包含pictures.class,需要设置这个参数
        Map<String, Class<pictures>> classMap = new HashMap<String, Class<pictures>>();
        classMap.put("pictures", pictures.class);

        Object[] objs = new Object[array.size()];
        for (int i = 0; i < array.size(); i++)
        {
            JSONObject jsonObject = array.getJSONObject(i);
            objs[i] = (Content) JSONObject.toBean(jsonObject, Content.class, classMap);
        }
        // 转换Content,循环输出所有content
        for (int i = 0; i < objs.length; i++)
        {
            Content content = (Content) objs[i];
            System.out.println("author:" + content.getAuthor() + " ID:"
                    + content.getId() + " Title:" + content.getTitle() + " Path:" + content.getPath());

            // 转换pictures,循环输出所有picture
            List<pictures> pictures = content.getPictures();
            for (int n = 0; n < pictures.size(); n++)
                System.out.println("description:"
                        + pictures.get(n).getDescription() + " imgPath:" + pictures.get(n).getImgPath());
        }
    }
}

package com.demo.json;

import java.util.regex.Matcher;
import java.util.regex.Pattern;

import net.sf.json.JSONObject;

public class JsonTool
{
   public static String getJsonString(Object key, Object value)
   {
       //System.out.println("key: " + key);
       //System.out.println("value: " + value.toString());
       JSONObject obj = new JSONObject();
       obj.put(key, value);   //添加物件
       return obj.toString();   //转换为字符串并返回
   }

   //解析PHP json_encode 字符串
   public static String unescapeUnicode(String str)
   {
        StringBuffer b=new StringBuffer();
        Matcher m = Pattern.compile("\\\\u([0-9a-fA-F]{4})").matcher(str);
        while(m.find())
        {
            b.append((char)Integer.parseInt(m.group(1),16));
        }
        return b.toString();
    }
}

package com.demo.json;

public class People
{
   public People()
   {
   }

   public People(String id, String name, String address)
   {
       this.id = id;
       this.name = name;
       this.address = address;
   }

   private String id;
   private String name;
   private String address;

   public String getId() {
       return id;
   }

   public void setId(String id) {
       this.id = id;
   }

   public String getName() {
       return name;
   }

   public void setName(String name) {
       this.name = name;
   }

   public String getAddress() {
       return address;
   }

   public void setAddress(String address) {
       this.address = address;
   }

   public String toString()
   {
       return "ID:" + this.id + " Name:" + this.name + " Address:" + this.address;
   }
}

package com.demo.json;

import java.util.List;

public class Content {

   private String author;
   private String id;
   private String title;
   private List<pictures> pictures;
   private String path;

   public String getAuthor() {
       return author;
   }

   public void setAuthor(String author) {
       this.author = author;
   }

   public String getId() {
       return id;
   }

   public void setId(String id) {
       this.id = id;
   }

   public String getTitle() {
       return title;
   }

   public void setTitle(String title) {
       this.title = title;
   }

   public List<pictures> getPictures() {
       return pictures;
   }

   public void setPictures(List<pictures> pictures) {
       this.pictures = pictures;
   }

   public String getPath() {
       return path;
   }

   public void setPath(String path) {
       this.path = path;
   }
}

package com.demo.json;

public class pictures {
   private String description;
   private String imgPath;

   public String getDescription() {
       return description;
   }

   public void setDescription(String description) {
       this.description = description;
   }

   public String getImgPath() {
       return imgPath;
   }

   public void setImgPath(String imgPath) {
       this.imgPath = imgPath;
   }
}

posted @ 2016-09-18 17:52 有机肥| 编辑收藏

【译】用jQuery 处理XML-- jQuery与XML

使用jQuery进行DOM元素的操作和遍历

首先确定妳在页面引用的jQuery库，才能使用它。然后简单地使用jQuery()或者它的简化形式$(), 传递一个选择器作为它的第一个参数。选择器通常是一个指定了一个或多个元素的字符串。清单20展示了一些基本的jQuery选择器的使用。

Listing 20. Basic jQuery selectors

var allImages = $("img"); // all IMG elements

var allPhotos = $("img.photo"); // all IMG elements with class "photo"

var curPhoto = $("img#currentPhoto"); // IMG element with id "currentPhoto"

</script>

需要记住的一点是jQuery方法返回的始终是一个jQuery对象。这种对象支持链式操作（见清单21）。这一特性在其他JavaScript框架中也是通用的。

Listing 21. Basic jQuery operation with chained method calls

$("img").css({"padding":"1px", "border": "1px solid #333"})

.wrap("<div class='img-wrap'/>");

</script>

上述代码选中页面中所有img元素并设置padding和border, 然后用一个带img-wrap class 的div 来包裹所有这些img.

清单22则展示了jQuery 是如何将前面章节的一个例子进行简化。

Listing 22. Creating and injecting a DOM node with jQuery

alert($("h1:first").html()); // .text() also works and might be better suited here

$("#auth").text("Sign Out");

var $li = $("<li>List Item Text</li>");

// $ is used as var prefix to indicate jQuery object

$("ul#nav").append($li);

</script>

使用jQuery 处理XML

之前有提到过传递给jQuery $()的第一个参数是一个字符串形式的选择器。第二个不起眼的参数则允许你设置context，或者开始一个jQuery节点，抑或把当前选择的元素当作一个根节点来使用。默认jQuery会把Document作为当前的Context, 但更好的做法是把context指定得更详细更一些，具体到某个特定的元素身上。在进行XML处理时，需要把context设置为XML的根节点（见清单 23）。

Listing 23. Retrieving values from an XML document with jQuery

// get value of single node (with jQuery)

var description = $("description", xmlData).text();

// xmlData was defined in previous section

// get values of nodes from a set (with jQuery)

var relatedItems = $("related_item", xmlData);

var relatedItemVals = [];

$.each(relatedItems, function(i, curItem){

relatedItemVals.push(curItem.text());

});

</script>

上述代码使表示变得相当简洁。通过向jQuery传递节点名称和设置它的context为xmlData,可以很方便地获取想要的节点。取得元素的值，刚需要一翻周折了。

因为innerHTML 对于非HTML元素不管用，所以就不能使用jQuery的html()方法来获取节点的值。jQuery 虽然提供了一个跨浏览器的方法innerText 来获取元素的值，但当用来处理XML时在浏览器间仍有些差异。比如IE会把包含空值（空格，Tab点位符，换行）的节点给忽略掉，而处理这样的情况时，FireFox则会把这些节点当作正常节点。为了避免这点不一致性，可以创建一个函数来处理。这个函数里需要用到一些jQuery函数： contents(), filter() 和 trim()。

Listing 24. Cross-browser JavaScript functions for accurate text value retrieval of a node

/**

* Retrieves non-empty text nodes which are children of passed XML node.

* Ignores child nodes and comments. Strings which contain only blank spaces

* or only newline characters are ignored as well.

* @param node {Object} XML DOM object

* @return jQuery collection of text nodes

*/

function getTextNodes(node){

return $(node).contents().filter(function(){

return (

// text node, or CDATA node

((this.nodeName=="#text" && this.nodeType=="3")

|| this.nodeType=="4") &&

// and not empty

($.trim(this.nodeValue.replace("\n","")) !== "")

);

});

}

/**

* Retrieves (text) node value

* @param node {Object}

* @return {String}

*/

function getNodeValue(node){

var textNodes = getTextNodes(node);

var textValue = (node && isNodeComment(node)) ?

// isNodeComment is defined above

node.nodeValue : (textNodes[0]) ? $.trim(textNodes[0].textContent) : "";

return textValue;

}

</script>

现在来看看如何设置节点的值（见清单25）。示例代码中有两点需要注意：一是设置根结果的文本值会重写所有子节点。另外就是如果一个节点之前是没有值的，那么就用 node["textContent"]而不是node.textContent。因为在IE中空节点根本就没有textContent属性。

Listing 25. Cross-browser JavaScript function for accurate setting of the text value of a node

function setNodeValue(node, value){

var textNodes = getTextNodes(node);

if (textNodes.get(0)){

textNodes.get(0).nodeValue = value;

}

else {

node["textContent"] = value;

}

</script>

DOM属性与jQuery

在之前的一些例子中已经展示了即使用最原始的JavaScript来处理DOM中的属性也是非常直观明了的了。同样地，jQuery也提供了相应的简化方式。更重要的是，属性可以用在选择器中，非常的强大。

Listing 26. Getting and setting DOM element attributes with jQuery

var item = $("item[content_id='1']", xmlData);

// select item node with content_id attribute set to 1

var pubDate = item.attr("date_published");

// get value of date_published attribute

item.attr("archive", "true");

// set new attribute called archive, with value set to true

</script>

从代码中可以看出，jQuery的attr()方法即可以设置设置也可以返回属性值。更强大的是jQuery允许在选择器中提供属性来返回特定的元素。下如上面的代码所展示的那样，我们获取到了content_id为1的元素。

通过jQuery的Ajax来装载XML

或许你已经有所了解，Ajax是用JavaScript来异步从服务器获取XML的一种Web技术。Ajax本身是依赖XMLHttpRequest (XHR) 所提供的API来向服务器发送请求和从服务器获取响应的。jQuery除了提供强大的用于遍历和处理DOM元素的方法外，还提供了跨浏览器的Ajax支持。也就是说通过Ajax获取XML简单得就是调用Ajax的get方法。清单27展示了这样的例子。

Listing 27. Loading an external XML file with jQuery's Ajax method

$.ajax({

type : "GET",

url : "/path/to/data.xml",

dataType : "xml",

success : function(xmlData){

var totalNodes = $('*',xmlData).length; // count XML nodes

alert("This XML file has " + totalNodes);

},

error : function(){

alert("Could not retrieve XML file.");

}

});

</script>

$.ajax()方法有一系列丰富的选项设置，并且可以通过其他一些简化的变形方式来调用，比如$.getScript()会导入JavaScript脚本并执行，$.getJSON()会获取JSON数据然后可以在Success回调中使用。当装载XML文件时，妳需要了解一下Ajax的基本语法。如上面代码所示，我们设置类型为get，url设置为从"/path/to/data.xml"这个路径获取XML文件，然后还指明文件类型为XML。当从服务器获取了数据后，success 或error中的一个方法会被触发。本例中，装载成功的话会弹出窗口显示所有节点数目。jQuery的星号选择器表示匹配所有元素。最重要的一点是在回调函数中，第一个参数用来接收从服务器返回的数据。这个参数的名字随便起，接下来的Context就被设置成了这个返回的数据。

在处理Ajax相关的请求时需要注意跨域问题，出于安全性考虑一般不允许从不同的域获取文件。所以上述例子中的代码可能在妳实际的程序中有所不同。

像处理XML一样处理外部的XHTML

因为XHTML是XML的一个子集，所以像XML一样处理XHTML是完全没有问题的。至于为什么妳有处理XHTML的需求是另一回事，但事实是妳确实可以这样做。比如，导入一个XHTML页面然后从中解析数据是可行的，虽然我会建议用另外更强健的方法来实现。

尽管之前讲述了DOM元素的遍历和处理，jQuery同时也可以用来处理XML，虽然需要先将XML文件破费周折地装载进代码中。本节的内容包含了不同的方法和基本的用于完成XML处理的例子。

posted @ 2016-09-18 17:50 有机肥| 编辑收藏

用Jquery解析中国所有省市区的XML文档（转）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>省市区三级级联</title>
<script src="jquery-1.8.0.js"></script>
<script>
var d;
$(document).ready(function (){

$.ajax({
       url:"city.xml",
       dataType:"xml",
       success:function(data){
           d = data;
           $(data).find("province").each(function (i){
               //往province中添加值
               $("<option></option>").html($(this).attr("name")).attr("value",$(this).attr("name")).appendTo("#province");
           });
           chpro($("#province").attr("value")); //选中的值传给chpro函数
       }
   });
});

var c;
function chpro(val){
   $("#city").empty(); //清空
   //遍历province的name为val下的city
   $(d).find("province[name='"+val+"']").find("city").each(function (i){
       //往city中添加值设置属性value的值为当前对象的属性name的值
       $("<option></option>").html($(this).attr("name")).attr("value",$(this).attr("name")).appendTo("#city");
       c = val;
       chcity($("#city").attr("value"));
   });
}

function chcity(val){
   $("#area").empty();
   //遍历province的name为c下的city的name为val下的area
   $(d).find("province[name='"+c+"']").find("city[name='"+val+"']").find("area").each(function (i){
       $("<option></option>").html($(this).attr("name")).attr("value",$(this).attr("name")).appendTo("#area");
   });
}
</script>
</head>

<body>
<form id="myform">
地址：<select id="province" onchange="chpro(this.value)" style="width:150px"></select>
<select id="city" onchange="chcity(this.value)" style="width:150px"></select>
<select id="area" style="width:150px"></select>
</form>
</body>
</html>

posted @ 2016-09-18 17:48 有机肥| 编辑收藏

手机web——自适应网页设计（转）

文章主要参考于：http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html(阮一峰的网络日志)

在这篇文章的基础上加上了写自己的理解（文章蓝色部分）。

一. 允许网页宽度自动调整：

"自适应网页设计"到底是怎么做到的？其实并不难。

首先，在网页代码的头部，加入一行viewport元标签。

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

对于viewport属性，我是真正在接触移动web开发是才遇到的，一般的pc布局都是固定的960px，1000px这种。

下面三篇文章是对viewport属性详细的解释：

Viewport（视区概念）——pc端的理解

Viewport（视区概念）——移动端的应用

viewport ——视区概念（转）

对于老式IE6，7，8浏览器需要js处理，由于主要平台是ios和安卓，所以可以暂时不考虑

二. 不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说，CSS代码不能指定像素宽度：

width:xxx px;

只能指定百分比宽度：

width: xx%;

或者：

width:auto;

这里开发是指一个网页不仅能用在pc上，也能同时用于移动端，但是对于webapp这种还是需要单独做一个webapp使用的页面。

对于这个知识点，对于我目前做的项目有用处，主要用于控制限定数据库里读出来的图片宽度。

详见：手机webapp的jquery mobile初次使用心得和解决图片自适应大小问题

三. 相对大小的字体

字体也不能使用绝对大小（px），而只能使用相对大小（em）。
　　body {
　　　　font: normal 100% Helvetica, Arial, sans-serif;
　　}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
　　h1 {
　　　　font-size: 1.5em;
　　}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
　　small {
　　　　font-size: 0.875em;
　　}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

四. 流动布局（fluid grid）
"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
　　.main {
　　　　float: right;
　　　　width: 70%;
　　}
　　.leftBar {
　　　　float: left;
　　　　width: 25%;
　　}
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。

五. "自适应网页设计"的核心，就是CSS3引入的Media Query模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
　　<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" />
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
　　<link rel="stylesheet" type="text/css"
　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
　　　　href="smallScreen.css" />
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
　　@import url("tinyScreen.css") screen and (max-device-width: 400px);

六. CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
　　@media screen and (max-device-width: 400px) {
　　　　.column {
　　　　　　float: none;
　　　　　　width:auto;
　　　　}
　　　　#sidebar {
　　　　　　display:none;
　　　　}
　　}
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

这篇文章有详细的讲解：手机web——自适应网页设计(@media使用)

七. 图片的自适应（fluid image）
除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。
这只要一行CSS代码：
　　img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
　　img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：
　　img { width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
　　img { -ms-interpolation-mode: bicubic; }
或者，Ethan Marcotte的imgSizer.js。
　　addLoadEvent(function() {
　　　　var imgs = document.getElementById("content").getElementsByTagName("img");
　　　　imgSizer.collate(imgs);
　　});
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。

posted @ 2013-09-10 15:21 有机肥阅读(117) | 评论 (0) | 编辑收藏

flex event(zhuan)

package com.montage.vo
{
public class User
{
public function User() {}
public var name:String;
public var country:String;
}
}

package com.montage.events

{
import com.montage.vo.User;
import flash.events.Event;
public class UserEvent extends Event
{
public static var SELECTED_USER:String = "selectedUser";
public var user:User;
public function UserEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}

package com.montage.model
{
import flash.events.Event;
import flash.events.EventDispatcher;
[Event(name="selectedUser", type="com.montage.events.UserEvent")]
public class EventMessage extends EventDispatcher
{
private static var instance:EventMessage = null;
public function EventMessage()
{
if( instance != null )
{
throw new Error("EventMessage是一个单件类,只能被实例化一次!");
}
}
public static function getInstance():EventMessage
{
if( instance == null )
{
instance = new EventMessage();
}
return instance;
}
public function send( event:Event ):void
{
dispatchEvent( event );
}
}
}

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" title="选择用户">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import com.montage.events.UserEvent;
import com.montage.vo.User;
import com.montage.model.EventMessage;
import mx.managers.PopUpManager;
private var eMessage:EventMessage = EventMessage.getInstance();
private function submitHandler():void
{
if( grid.selectedIndex > -1 )
{
var item:XML = XML( grid.selectedItem );
var user:User = new User();
user.name = item.@name;
user.country = item.@country;
var event:UserEvent = new UserEvent( UserEvent.SELECTED_USER );
event.user = user;
eMessage.send( event );
cancelHandler();
}
else {
Alert.show("请选择一个用户！");
}
}
private function cancelHandler():void
{
PopUpManager.removePopUp( this );
}
]]>
</mx:Script>
<mx:XML id="users" source="user.xml"/>
<mx:DataGrid id="grid" width="100%" height="100%" dataProvider="{users.User}">
<mx:columns>
<mx:DataGridColumn headerText="姓名" dataField="@name"/>
<mx:DataGridColumn headerText="国家" dataField="@country"/>
</mx:columns>
</mx:DataGrid>
<mx:ControlBar width="100%">
<mx:Spacer width="100%"/>
<mx:Button label="确定" click="submitHandler()"/>
<mx:Button label="取消" click="cancelHandler()"/>
</mx:ControlBar>
</mx:TitleWindow>

<root>

<User name="David" country="America"/>
<User name="Tome" country="Canada"/>
<User name="Montage" country="China"/>
</root>

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" fontSize="12">
<mx:Script>
<![CDATA[
import com.montage.events.UserEvent;
import com.montage.model.EventMessage;
import mx.managers.PopUpManager;
import com.montage.view.user.UserList;
private var eMessage:EventMessage = EventMessage.getInstance();
private function init():void
{
eMessage.addEventListener(UserEvent.SELECTED_USER, selectedUserHandler);
}
private function selectedUserHandler( event:UserEvent ):void
{
textArea.htmlText = "你选择了:<b>" + event.user.name + "</b>("+ event.user.country +")";
}
private function clickHandler():void
{
var userList:UserList = UserList( PopUpManager.createPopUp(this, UserList, true) );
userList.x = ( width - userList.width ) / 2;
userList.y = ( height - userList.height ) / 2;
}
]]>
</mx:Script>
<mx:Panel width="400" height="300" layout="vertical" paddingLeft="5" paddingRight="5" paddingTop="5">
<mx:TextArea id="textArea" width="100%"/>
<mx:Button label="选择用户" click="clickHandler()"/>
</mx:Panel>
</mx:Application>

posted @ 2012-03-20 11:17 有机肥阅读(249) | 评论 (0) | 编辑收藏

JSON字符串转换JAVA对象例子。

【译】用jQuery 处理XML-- jQuery与XML

使用jQuery进行DOM元素的操作和遍历

使用jQuery 处理XML

DOM属性与jQuery

通过jQuery的Ajax来装载XML

像处理XML一样处理外部的XHTML

用Jquery解析中国所有省市区的XML文档（转）

手机web——自适应网页设计（转）

flex event(zhuan)

flex必须使用命名空间限定css选择器

eclise装scala插件

在Eclipse里使用SVN必装Subclipse插件

导航

统计

常用链接

留言簿

随笔档案

搜索

最新评论

阅读排行榜

评论排行榜