flex的Socket通信

这两天一直在flex的Socket ,现在终于懂了很多。由浅到深一步一步深入。慢慢体会实例,虽然实例都是在网上找的,但也经过了我的测试。我比较喜欢注释,也注释了很多。

跟着走你就会懂。。

 

Flex端 和 Java端, 先运行Java端启动服务。然后在测试Flex。

 

实例一:

Flex端:

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

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="349" height="326"

creationComplete="initApp()" showCloseButton="true" >

<mx:Script>

<![CDATA[

private var socket:Socket;

internal function initApp():void{

socket = new Socket(); //new出来,这时候才能被使用

socket.connect("localhost",8080); //连接服务器,参数 host:String,prot:int

socket.addEventListener(Event.CONNECT,funConnect); //监听是否连接上服务器

socket.addEventListener(Event.CLOSE,funClose); //监听服务器是否关闭

}

private function funConnect(event:Event):void {

myText.text+="已经成功连接到服务器!\n";

}

private function funClose(event:Event):void {

myText.text+="和服务器断开!\n"

}

]]>

</mx:Script>

<mx:TextArea id="myText" x="10" y="10" width="285" height="250" />

</mx:TitleWindow>


Java 端:
package f1.f1_005.socket;

import java.io.IOException;
import java.net.ServerSocket;
import java.net.Socket;

public class Server1 {

public static void main(String[] args) {
ServerSocket server = null;
try {
//使用指定的端口号创建了一服务器套接字对象。
server = new ServerSocket(8888);
System.out.println("服务器套接字已经被创建");
while(true){
System.out.println("等待客户机");
//调用accept()方法来等待客户机的连接请求。 api:倾听一个连接被使这插座,接受它
Socket socket = server.accept(); 
System.out.println("已与客户机连接");
}
} catch (IOException e) {
System.out.println(e);
e.printStackTrace();
} finally {
try {
if(server!=null)
server.close(); //关闭服务器套接字。如果一直没有客户机器提出连接请求,服务器套接字将会继续等待。
} catch (IOException e) {
e.printStackTrace();
}
}

}

-------------------------------------------------------------------------------------------
实例二:
Flex端:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp();"
>
<mx:Script>
<![CDATA[
private var socket:Socket = new Socket(); //定义Socket
internal function initApp():void{
socket.connect("127.0.0.1",8888); //连接服务器
socket.addEventListener(Event.CONNECT,funConnect);
socket.addEventListener(Event.CLOSE,funClose);
}
internal function funConnect(e:Event):void{
myText.text+="连接已建立 \n";
}
internal function funClose(e:Event):void{
myText.text+="连接已关闭 \n";
}
internal function sendMessage(msg:String):void{ //发送数据对应按钮click事件
var message:ByteArray = new ByteArray(); //新建一个ByteArray存放数据
//写入数据,writeUTFBytes方法,以utf-8格式传数据避免中文乱码
// \r 表示:回车符(ACSII:13 或0x0d),就是我们常说的硬回车。 \n 表示:换行(ACSII:10 或0x0a),就是我们常说的软回车。
message.writeUTFBytes(msg+"\r\n"); // \r\n是输出的HTML代码换行,客户看到的效果没有换行
socket.writeBytes(message); //写入Socket的缓冲区
socket.flush(); //调用flush方法发送信息
myText.text+=msg+"\r\n"; //在客户端屏幕上输出发送的内容
myInput.text=""; //清空发言框
}
]]>
</mx:Script>
<mx:TextArea x="10" y="10" width="703" height="263" id="myText"/>
<mx:TextInput x="10" y="297" width="605" id="myInput"/>
      <mx:Button x="648" y="297" label="发送" id="myBtn" click="sendMessage(myInput.text)"/>
</mx:Application>

Java端:
package f1.f1_005.socket;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.ServerSocket;
import java.net.Socket;

public class Server2 {
private BufferedReader reader; //负责输入
private ServerSocket server; //服务器套接字
private Socket socket;
public Server2(){} //缺省构造函数
void StartServer(){ //启动服务器
try {
server = new ServerSocket(8888); //创建服务器套接字
System.out.println("服务器套接字建立完毕");
while(true){
System.out.println("等待客户机");
socket = server.accept(); //若客户机提出连接请求,与socket连接
System.out.println("完成与客户机的连接");
//获取socket输入流,“utf-8”这个编码设置是为了更好显示中文
reader = new BufferedReader(new InputStreamReader(socket.getInputStream(),"UTF-8"));
getMessage();//读取来自客户机的数据,并输出至画面上
}
} catch (IOException e) {
System.out.println(e);
e.printStackTrace();
}
}
void getMessage(){ //读取来自套接字的信息
try {
while(true){ //循环
String msg = reader.readLine();
if(msg == null){break;}
System.out.println("客户机:"+msg);
}
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
System.out.println("客户机中断连接");
if(reader!=null) reader.close();
if(socket!=null) socket.close();
reader = null;
socket = null;
} catch (IOException e) {
e.printStackTrace();
}
}
}
public static void main(String[] args) {
Server2 s2 = new Server2();
s2.StartServer();
}

}
-------------------------------------------------------------------------------------------
实例三:
Flex 端:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="353" height="336"
creationComplete="initApp();" >
<mx:Script>
<![CDATA[
import mx.utils.ObjectUtil;
private var socket:Socket = new Socket();
private var intClient:int; //定义客户端数字出拳
private var intServer:int; //定义服务端数字出拳
private var intSY:int; //定义输赢判断
private var strClient:String; //客户端文字出拳
private var strServer:String; //服务端的文字出拳
internal function initApp():void{
socket.connect("127.0.0.1",8888);
socket.addEventListener(Event.CONNECT,funConnect);
                  socket.addEventListener(Event.CLOSE,funClose);
                  socket.addEventListener(ProgressEvent.SOCKET_DATA,funSocket);
}
internal function funConnect(e:Event):void{
myText.text+="连接已建立 \n";
}
internal function funClose(e:Event):void{
myText.text+="连接已关闭 \n";
}
private function sendMessage(msg:String):void{
var message:ByteArray = new ByteArray();
message.writeUTF(msg); //发送出拳数字
socket.writeBytes(message);
socket.flush();
intClient=int(msg);
switch(intClient){ //将数字转换成文字用于发布到屏幕上
case 0:
                              strClient="剪刀";
                              break;
                      case 1:
                              strClient="锤";
                              break;
                      case 2:
                              strClient="包袱";
                              break;
}
myText.text+="你出:"+strClient+";   ";
                  myInput.text="";
}
internal function funSocket(e:ProgressEvent):void{ //接到服务器信息
var msg:String="";
while(socket.bytesAvailable)
{
msg=socket.readUTF();
intServer=int(msg);
intSY=intClient-intServer; //通过数值判断输赢
switch(intServer) //将数字转换成文字用于发布到屏幕上
                      {
                          case 0:
                                  strServer="剪刀";
                                  break;
                          case 1:
                                  strServer="锤";
                                  break;
                          case 2:
                                  strServer="包袱";
                                  break;
                      }
                      myText.text+="服务器出:"+strServer+";   ";
                      //判断输赢的算法
                      if(intSY>0&&intSY<2)
                      {
                              myText.text+=" 结果:你赢了 \n";
                      }else if(intClient==intServer)
                      {
                              myText.text+=" 结果:平手 \n";
                      }else if(intSY<0&&intSY>-2)
                      {
                              myText.text+=" 结果:你输了 \n";
                      }else if(intSY>=2)
                      {
                              myText.text+=" 结果:你输了 \n";
                      }else if(intSY<=-2)
                      {
                              myText.text+=" 结果:你赢了 \n";
                      }
                      // myText滚动到最下面
                      myText.verticalScrollPosition = myText.maxVerticalScrollPositio n;
}
}
]]>
</mx:Script>
<mx:TextArea x="10" y="32" width="331" height="263" id="myText"/>
      <mx:TextInput x="10" y="303" width="245" id="myInput"/>
      <mx:Button x="273" y="304" label="发送" id="myBtn" click="sendMessage(myInput.text)"/>
      <mx:Label x="10" y="10" text="规则:0代表剪刀;1代表锤;2代表包袱" width="331" fontWeight="bold"/>
</mx:Application>

Java 端:
package f1.f1_005.socket;

import java.io.DataInputStream;
import java.io.DataOutputStream;
import java.io.IOException;
import java.net.ServerSocket;
import java.net.Socket;
import java.util.Random;
import java.util.Vector;

public class Server3 {
private ServerSocket server;
//Vector 类提供了实现可增长数组的功能,随着更多元素加入其中,数组变的更大。
Vector sManager = new Vector(); //管理套接字的Vector
Random rnd = new Random(); //创建随机数的发生器
public Server3(){}
void startServer() //运行服务器
{
try {
server = new ServerSocket(8888);
System.out.println("服务器套接字已创建成功!");
while (true)
{
Socket socket = server.accept();
System.out.println("已经与客户机连接");
new KBBCom_Thread(socket).start();
sManager.add(socket);
System.out.println("当前客户机连结数:"+sManager.size());
}
} catch (IOException e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
Server3 server=new Server3();
          server.startServer();
}
class KBBCom_Thread extends Thread   //与客户机进行通信的线程累
{
Socket socket; //套接字引用变量
private DataInputStream reader; //套接字输入流
private DataOutputStream writer;
KBBCom_Thread(Socket socket){ //构造函数
this.socket = socket;
}
public void run(){
try {
//获取套接字的输入输出流
reader = new DataInputStream(socket.getInputStream());
writer = new DataOutputStream(socket.getOutputStream());
String msg;
//如果收到客户端发来的数据
while((msg=reader.readUTF())!= null){
//向客户机传送0-2之间的整型随机数
writer.writeUTF(rnd.nextInt(3)+"\n");
writer.flush();
System.out.println("来自客户机:"+msg);
}
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
sManager.remove(socket); //删除套接字
//关闭输入输出流及套接字
if(reader!=null)reader.close();
if(writer!=null)writer.close();
if(socket!=null)socket.close();
reader=null;
writer=null;
socket=null;
//向屏幕输出相关信息
System.out.println("客户机离开");
                      System.out.println("当前客户机的连接数:"+sManager.size());
} catch (IOException e) {
e.printStackTrace();
}
}
}
}

}


-------------------------------------------------------------------------------------------
实例四:
Flex 端:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="initApp();" width="369" height="326">
<mx:Script>
<![CDATA[
private var socket:Socket = new Socket();
internal function initApp():void
{
socket.connect("192.168.0.56",8888);//执行连接 //localhost==127.0.0.1
                  //监听连接成功事件
                  socket.addEventListener(Event.CONNECT,funConnect);
                  //监听关闭事件
                  socket.addEventListener(Event.CLOSE,funClose);
                  //监听服务器新信息
                  socket.addEventListener(ProgressEvent.SOCKET_DATA,funSocket);
}
internal function funConnect(e:Event):void
{
myText.text+="连接已建立 \n";
}
internal function funClose(e:Event):void
{
myText.text+="连接已关闭 \n";
}
internal function sendMessage(msg:String):void
{
//新建一个ByteArray来存放数据
              var message:ByteArray=new ByteArray();
              //写入数据,使用writeUTFBytes以utf8格式传数据,避免中文乱码
              message.writeUTFBytes(msg+"\n");
              //写入socket的缓冲区
              socket.writeBytes(message);
              //调用flush方法发送信息
              socket.flush();
              //清空消息框
                  myInput.text="";
}
internal function funSocket(e:Event):void
{
var msg:String="";
              //循环读取数据,socket的bytesAvailable对象存放了服务器传来的所有数据
              while(socket.bytesAvailable)
              {
              //强制使用utf8格式,避免中文乱码
              msg += socket.readMultiByte(socket.bytesAvailable,"utf8"); //UTF-8
              //使用\n换行符号把信息切开
              var arr:Array = msg.split("\n");
              for(var i:int=0;i<arr.length;i++)
              {
              if(arr[i].length > 0){
              //正则表达式,回车符
              var myPattern:RegExp=/\r/;
              //删除回车符
              arr[i] = arr[i].replace(myPattern,"");
              //在聊天框中输出
              myText.text+=arr[i]+"\n";
              }
              }
              myText.horizontalScrollPosition = myText.maxVerticalScrollPositio n; //滚动到最下面
              }
}
]]>
</mx:Script>
<mx:TextInput x="10" y="10" width="344" text="名字" id="myName"/>
<mx:TextArea x="10" y="42" width="344" height="247" id="myText"/>
      <mx:TextInput x="10" y="297" width="270" id="myInput"/>
      <mx:Button x="288" y="298" label="发送" id="myBtn" click="sendMessage(myName.text+':'+myInput.text)"/>
</mx:Application>

Java 端:
package f1.f1_005.socket;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.ServerSocket;
import java.net.Socket;
import java.util.Vector;

public class Server4 {

private ServerSocket server;
private BManager bMan=new BManager();   //消息广播
public Server4() {}
void startServer()   //启动服务器
{
try {
server=new ServerSocket(8888); //创建服务器套接字
System.out.println("服务器套接字建立完毕");
while(true)
              {
Socket socket=server.accept();//若客户机提请求,socket连接
new Chat_Thread(socket).start();//启动线程
bMan.add(socket); //添加套接字
bMan.sendClientInfo(); //使用套接字输出当前聊天人数
              }
} catch (IOException e) {
System.out.println(e);
e.printStackTrace();
}
}
class Chat_Thread extends Thread{ //与客户机进行通信的线程累
Socket socket; //套接字引用变量
private BufferedReader reader; //引用套接字输入流;
private PrintWriter writer; //引用套接字输出流;
Chat_Thread(Socket socket){ //构造函数
this.socket = socket;
}
public void run() {
try {
reader = new BufferedReader(new InputStreamReader(socket.getInputStream(),"utf8"));//utf8UTF-8
//PrintWriter 的第二个参数:autoFlush - A boolean; if true,the println,printf,or format methods will flush the output buffer
writer = new PrintWriter(socket.getOutputStream(),true);
String msg;
//从输出流获取信息
while((msg=reader.readLine()) != null){
System.out.println(msg);
                      //向所有客户机传送信息
bMan.sendToAll(msg);
}
} catch (IOException e) {
e.printStackTrace();
} finally {
try { //从消息广播者立标中删除socket
bMan.remove(socket);
if(reader!=null) reader.close();
if(writer!=null) writer.close();
if(socket!=null) socket.close();
reader=null;
writer=null;
socket=null;
System.out.println("客户机离开");
//向所有客户机传送当前连接数
                      bMan.sendClientInfo();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
public static void main(String[] args) {
Server4 server=new Server4();
          server.startServer();
}

}

//消息广播者类,继承Vector类
class BManager extends Vector{ //消息广播者类,继承Vector类
BManager (){}//构造函数

void add(Socket socket) {
super.add(socket); //添加套接字
}

void remove(Socket socket) {
super.remove(socket); //删除套接字
}
//向所有客户机传送消息,同步化方法。
synchronized void sendToAll(String msg) {
PrintWriter writer = null; //输出流
Socket socket;
for (int i = 0; i < size(); i++) {
socket = (Socket)elementAt(i);
try {
//获取第i个套接字输出流
writer = new PrintWriter(socket.getOutputStream(),true);   //就是因为掉了个ture ,客服端就显示不了数据
} catch (IOException e) {
e.printStackTrace();
}
//使用第i各套接字输出流,输出消息
if(writer!=null)   writer.println(msg);
}
}
//向所有客户机发送当前聊天人数
synchronized void sendClientInfo(){
String info = "当前聊天人数:"+size();
System.out.println(info);
          sendToAll(info);
}
}

-------------------------------------------------------------------------------------------
实例五:
Flex 端:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12" 
creationComplete="initApp()" width="547" height="326" >
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import com.flex.f018.MyLogin;
import flash.net.Socket;
import flash.utils.ByteArray;
import mx.managers.PopUpManager;
import flash.events.MouseEvent;
private var strPD:String="22--";//协议头判断
private var socket:Socket=new Socket();
private var win:MyLogin=new MyLogin();
internal function initApp():void
{
win.width=240;
win.height=94;
win.x=153;
win.y=116;
PopUpManager.addPopUp(win,this,true);
win.myBtn.addEventListener(MouseEvent.CLICK,funBtn);
//socket.connect("127.0.0.1",8888);
//socket.addEventListener(ProgressEvent.SOCKET_DATA,funSocket);
}
internal function funChoose(event:MouseEvent):void
{
var item:Object=myList.selectedItem;
strPD="33--"+item+"--";
}
internal function funBtn(event:MouseEvent):void
{
myName.text=win.txtName.text;
PopUpManager.removePopUp(win);
socket.connect("127.0.0.1",8888);
socket.addEventListener(Event.CONNECT,funConnect);
//监听关闭事件
socket.addEventListener(Event.CLOSE,funClose);
socket.addEventListener(ProgressEvent.SOCKET_DATA,funSocket);
myList.addEventListener(MouseEvent.CLICK,funChoose);
sendMessage("11"+myName.text);

}

internal function funConnect(event:Event):void
{
trace("[log] funConnect:连接已建立");
myText.text+="连接已建立 \n";
//sendMessage("11"+myName.text);
}
internal function funClose(e:Event):void
{
trace("[log] funClose:连接已关闭");
myText.text+="连接已关闭 \n";
}
internal function sendMessage(msg:String):void
{
trace("[log] sendMessage :" + msg);
var message:ByteArray=new ByteArray();
message.writeUTFBytes(msg+"\n");
socket.writeBytes(message);
socket.flush();
myInput.text="";
}
internal function funSocket(event:ProgressEvent):void
{
trace("[log] funSocket ");
var msg:String="";
var pd:String=""; //协议判断字符
var intCD:int=0;
while(socket.bytesAvailable)
{
msg=socket.readMultiByte(socket.bytesAvailable,"utf8");
trace("[log] funSocket msg:"+msg);
pd=msg.substring(0,2);
intCD=msg.length;//获取字符串长度
if(pd=="11") // 11--UserName
{ // 11开头表示更新用户列表
msg=msg.substring(4,intCD);
var myPattern2:RegExp=/\r\n/;//清除回车和换行符
//var myPattern3:RegExp=/\n/;
msg=msg.replace(myPattern2,'');
//msg=msg.replace(myPattern3,'');
var arrList:Array=msg.split("--");
arrList.unshift("所有人");
trace("[log] 11 arrList : " +arrList);
myList.dataProvider=arrList;
}else if(pd=="22") // 22UserNamed登录了
{
msg=msg.substring(2,intCD);
var arr:Array=msg.split('\n');
for(var i:int=0;i<arr.length;i++)
{
if(arr[i].length>1)
{
var myPattern:RegExp=/\r/;
arr[i]=arr[i].replace(myPattern,'');
myText.text+=arr[i]+"\n";
}
}
myText.verticalScrollPosition = myText.maxVerticalScrollPositio n;//滚动到最下面
}else if(pd=="33")
{
}
else if(pd=="44") // 44当前在线认识:Size人
{
msg=msg.substring(2,intCD);
labCount.text=msg;
}
else
{}
}
}
]]>
</mx:Script>
<mx:TextArea x="10" y="10" width="344" height="279" id="myText"/>
<mx:TextInput x="103" y="297" width="357" id="myInput"/>
<mx:Button x="468" y="298" label="发送" id="myBtn" click="sendMessage(strPD+myName.text+'--'+myInput.text)"/>
<mx:Label x="10" y="299" width="85" textAlign="right" id="myName" fontWeight="bold" color="#ffffff"/>
<mx:List x="367" y="42" height="247" id="myList" width="170"></mx:List>
<mx:Label x="367" y="13" width="170" id="labCount"/>
</mx:Application>

Java 端:
package f1.f1_005.socket;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.ServerSocket;
import java.net.Socket;
import java.util.*;

public class Server5 {
private ServerSocket server;
private BManager5 bMan = new BManager5(); //消息广播者
//Map接口的HashMap类,元素拥有固定key值,key值不重复,这里用来存放在线用户
Map<Socket,String> clientList = new HashMap<Socket,String>();
public Server5(){} //构造函数
public void startServer(){ //启动服务器
try {
server = new ServerSocket(8888); //创建服务器套接字
System.out.println("服务器套接字建立完毕");
while(true)
{
Socket socket = server.accept(); //若客户机提出请求,使用socket进行连接
//String strIP = socket.getInetAddress().toString();//登陆者的ip
new Chat_Thread(socket).start(); //启动线程
bMan.add(socket); //添加套接字
bMan.sendClientInfo(); //使用套接字输出当前聊天人数
//funList(clientList);
//bMan.sendToAll(strIP+"/加入聊天室");
}
} catch (IOException e) {
System.out.println(e);
e.printStackTrace();
}
}
class Chat_Thread extends Thread{ //与客户机进行通讯的线程类
private Socket socket; //x1
private BufferedReader reader; //套接字输入流;
private PrintWriter writer; //套接字输出流
Chat_Thread(Socket socket){
this.socket = socket; //this.socket就是x1处的socket
}
public void run(){
try {
reader=new BufferedReader(new InputStreamReader(socket.getInputStream(),"utf8"));
//PrintWriter 的第二个参数:autoFlush - A boolean; if true,or format methods will flush the output buffer
writer=new PrintWriter(socket.getOutputStream(),true);
String msg; //msg获取消息
// while 这样写,在关闭浏览器的时候,会进入finally  
while((msg=reader.readLine())!=null) //while(true){
{
// if((msg=reader.readLine())!=null){
System.out.println(msg); //服务器屏幕输出消息
String str = msg.substring(0,2); //截取前两个个字符
int a=Integer.parseInt(str); //强制转换成int
String[] arrMsg=msg.split("--"); //将获取的消息以"--"符号为标志分解成数组
switch(a){
case 11: //当消息以11开头的时候,将登陆者的信息储存到hashmap之中,并向客户端发送新的在线列表
String strName = msg.substring(2); //获取登陆者名字,消息格式“11eko”
System.out.println(strName+"登陆了"); //服务器屏幕输出谁登陆了
bMan.sendToAll("22"+strName+"登陆了"); //广播谁登陆了
clientList.put(this.socket,strName); //加入到HashMap中
funList(clientList); //广播在线列表
break;
case 22: //当消息以22开头的时候,表示公聊,内容为“22--eko--内容”
System.out.println("公聊");
//构造消息,arrMsg[0]=消息头,arrMsg[1]消息发送者,arrMsg[2]消息内容
msg=arrMsg[0]+arrMsg[1]+"说:"+arrMsg[2];
bMan.sendToAll(msg);
break;
case 33: //消息以33开头时候,内容为“33--sandal--eko--内容”
//arrMsg[1]为说话对象,arrMsg[2]为说话人,arrMsg[3]为消息内容
if(arrMsg[1].equals("所有人"))//当说话对象为"所有人"的时候
{
//构造消息"22eko说:内容"
msg="22"+arrMsg[2]+"说:"+arrMsg[3];
//向所有人发送消息

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


一:display:flex布局display:flex是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写,意为"弹性布局",用来为盒状模型提供最大的灵
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现HTML代码:1<divclass="demo">2<divclass="inner">3<p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>4</div
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些应用。常见的例子,比如360杀毒,photoShop,VisualStudioCode等等移动端app是什么,有哪些应用。常见的例子,比如手机微信,手机qq,手机浏览器,美颜相机等等PC端与移动端的区别第一:PC考虑的是浏览器的兼容性,移动端考
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周末了,难得学点东西,grid是之前看到的,很好奇,讲的二维的布局,看起来很方便,应该很适合移动端布局,所以今天抽时间学一学,这个当是笔记了。参考的是阮老师的博客。阮一峰:CSSGrid网格布局教程http://www.ruanyifeng.com/blog/2019/03/g
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后,浮动,定位将不会有效果)给父元素设置的属性:(1)display:flex---把容器设置为弹性盒模型。(2)flex-direction---设置弹性盒模型主轴方向默认情况下主
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他地方的JavaScript,我可以告诉Safari不要这样做?解决方法:简短的
flex布局,flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是:开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此……必须有一些非常棒的Java库用于触摸交互,但是在Windows平台上
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&quo
【1】需求:  【2】解决方案:最近遇到布局上要求item两端对齐,且最后一行在列不满的情况下要求左对齐,使用flex的justify-content:space-between;实现时发现最后一行不能左对齐,而是两端对齐方式。 不是项目上想要的效果#网上查了一些资料,有两种方法可以实现效果:**1.
我有一个java套接字服务器,它在连接时将Animal对象发送到Flash客户端.对象发送方式如下:Amf3Outputamf3Output=newAmf3Output(SerializationContext.getSerializationContext());amf3Output.setOutputStream(userSocket.getOutputStream());amf3Output.writeObject(animal)
我正在开发一个Flex3.4应用程序,它通过最新版本的BlazeDS与JBoss-4.2.2服务器上运行的JavaEE后端进行交互.当我在Tomcat上从FlashBuilder4beta2运行Flex应用程序时,一切都很好,Flex应用程序能够进行所需的远程调用.但我的生产环境是在JBoss上,当我将应用程序移动到JBoss时(更
我有一个非常大的问题.我使用Flex3/Tomcat/BlazeDS/Spring编写了一个大型应用程序,在本地开发时运行良好,当我部署到公共开发环境时很好,但是当部署到我们的测试环境时经常失败.当远程处理请求花费大量时间(超过20秒)时,故障似乎最常发生.在我的开发服务器上,错误发生,但仅
弹性和布局display:flex在ie6,ie7不兼容状态,一般在pc用的比较少,在手机端所有的浏览器都是支持的控制子元素在父元素里面的位置关系display:flex是给父元素加的文档流是按照主轴排列,只要父元素加了flex,那么里面的子元素全部可以直接添加宽高主轴的方向
FLEX2.0源码分析(一)https://www.jianshu.com/p/8bc4c5f4b19fFLEX源码分析二(网络监测swizzle)https://www.jianshu.com/p/ffb95f2cbda6FLEX源码分析三(网络监测记录FLEXNetworkRecorder)https://www.jianshu.com/p/66267dc922c5FLEX源码分析四(Systemlog)https://www.jianshu.
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title><itle>6<style>7*{8margin:0;9padding:0;10
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&qu
flex:将对象作为弹性伸缩盒显示inline-flex:将对象作为内联块级弹性伸缩盒显示两者都是使子元素们弹性布局,但是如果是flex,父元素的尺寸不由子元素尺寸动态调整,不设置时默认是100%,而inline-flex则会使父元素尺寸跟随子元素们的尺寸动态调整。
<html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>test<itle><stylemedia="screen">.tab-head{list-style-type:no
有没有办法使用邮政编码找到径向距离?我的任务是搜索居住在指定距离内的所有用户.我知道用户的zipcodes.例如,距离当前位置25英里的用户.我有其他搜索类别,我正在使用mysql查询.我无法解决距离问题.我的后端是在PHP中Flex的前端和前端.对我来说最好的选择就是www.zip-codes.com