Flex4.5环境配置和使用

合集下载

flex_romtting环境配置及应用

flex_romtting环境配置及应用

篇文章将介绍flash Remoting 开发的必备的运行环境和相关配置过程:一。

开发必备环境。

1. flex 3,请从Adobe官方网站下载或其它地方找D版(目前为止D版还没有出)。

2. Visual Studio 2005,.net 2.o。

3. fluorinefx(flash(flex) Remoting 与服务器程序数据交互的.net服务器端运行环境),下载地址:/download/fluorinefx/1.0.0.5/fluorinefx.exe 。

二。

相关配置过程。

1.安装fluorinefx,安装时请退出Visual Studio先。

2.安装fluorinefx后,打开Visual Studio2005,文件-->新建-->项目-->其它项目类型-->Visual Studio解决方案-->空白解决方案。

3.然后在解决方案资源管理器右键,添加-->添加新网站-->fluorinefx Web Site,设置网站名称和路径,Ok,.net服务器端配置完成(如下图)。

4.打开Flex 3,File-->New-->Flex Project,在Project Name(工程名称)中输入RemotingDemo,Project location(工程路径)选择工程径,Application type(应用程序类型)此处选择Web application(run in Flash Player),Server technology的Application Server Type选择CodeFusion之CodeFusion Flash Remoting,然后Next(如下图)。

5.Server location之CodeFusion server installation type请根据服务器类型选择,如果服务器是CodeFusion请选择Standalone,如果是.net或Java 请选择Deployed J2EE Server,这个地方本人在建项目时遇到麻烦,因为看到J2EE Server这个字眼,以为专为Java设置的,故选择了Standalone,岂知Validate Configuration始终没有成功,提示为“Invalid root. The WEB-INF/flex folder must contain either flex-config.xml or services-config.xml.”。

flex 的用法

flex 的用法

flex 的用法“flex”的用法“flex”是一种用于实现响应式布局的CSS工具。

它是“Flexible Box Layout”的缩写,也称为flexbox。

flexbox提供了一种灵活的方式来布置、对齐和分布元素,以适应不同的屏幕尺寸和设备类型。

在本文中,我们将一步一步回答以下关于“flex”的用法的问题:1. 什么是“flex”?2. 如何使用"flex"创建一个简单的布局?3. 如何在flex容器和flex项目中设置属性?4. 如何进行flex项目的对齐和分布?5. 如何在媒体查询中使用“flex”?6. 一些常见的“flex”应用示例。

7. “flex”的浏览器兼容性。

1. 什么是“flex”?“flex”是一种CSS布局技术,用于创建响应式布局。

它基于flexbox模型,其中包含一个flex容器和flex项目。

flex容器是一个包含flex项目的容器,而flex项目则是flex容器中的子元素。

2. 如何使用"flex"创建一个简单的布局?要创建一个简单的flex布局,首先需要创建一个flex容器。

我们使用`display: flex;`来将一个元素设置为flex容器。

接下来,我们可以使用其他属性来设置容器的方向、换行、对齐等属性。

css.container {display: flex;flex-direction: row;justify-content: space-between;align-items: center;}在上面的示例中,我们将一个元素的类名设置为“container”,然后使用`display: flex;`将其设置为flex容器。

接下来,我们使用`flex-direction: row;`设置容器内项目的排列方向为水平方向,使用`justify-content: space-between;`设置项目之间的间距,使用`align-items: center;`设置项目在容器中的垂直方向上的对齐方式。

Flex环境安装配置

Flex环境安装配置

1.安装JDK点击下一步点击下一步,如果想更换安装路径可以点击更改开始安装点击下一步,如果需要修改安装路径点击更改开始安装安装结束,点击完成配置环境变量(都配置到系统变量中),JAVA_HOME为JDK安装路径,默认通常为C:\Program Files\Java\jdk1.6.0_29;CLASSPATH为.;% JAVA_HOME%\lib;% JAVA_HOME%\lib\ tools.jar;PATH后面追加; % JAVA_HOME %\bin;% JAVA_HOME %\jre\bin,注意路径应该和自己的安装情况相一致,不要直接copy上面的示例路径。

至此JDK环境配置完成,在命令行下输入java –version若出现版本信息,说明配置成功。

2.安装tomcat7只需要将tomcat7直接解压即可,运行bin目录下的startup.bat文件,若可正常启动,说明没有问题。

3.安装postgreSQL9.0点击next点击next,若需要修改安装目录点击后面的浏览按钮点击next,若需要修改安装目录点击后面的浏览按钮输入密码端口号使用默认的5432,点击next语言选择新加坡简体中文,点击next点击next开始安装安装完成,将安装stack builder的选项去掉,点击finish4.安装eclipse3.7根据自己的系统环境(32位或64位),选择对应版本的eclipse(64位系统可以选择32位或64位eclipse,而32位系统只能选择32位eclipse),解压即可。

5.安装Flex4插件首先要注意,不要把安装文件放置在包含汉语的文件路径下。

开始安装后弹出的第一个窗口,设置一个用来存放解压文件的临时目录,这个无关紧要,但是路径中不能包含汉语,像下图中的路径是典型导致Flex4插件安装失败的例子!Flex安装完成之后这些文件可以删除掉,设置好路径后,点击下一步点击确定点击下一步选中接受许可协议,点击下一步设置安装路径,点击下一步选择再插入一个eclipse,路径设置为eclipse的根目录,点击下一步点击安装点击完成,Flex4插件安装完毕安装完毕之后先打开eclipse,弹出下面的窗口,设置工作空间路径之后将下面的勾打上,然后点击OK然后关闭eclipse,再打开eclipse,这时就会弹出Flex的注册窗口运行flash builder 4keygen.exe,下面的软件名选择Adobe Flash Builder v4.x ,然后点击一下上面的Patch Hosts File按钮然后把生成的序列号粘贴到注册窗口中,点击继续Flex4插件激活完成6.配置eclipse环境打开eclipse,点击菜单栏的window->preferences-gerneral->editors-text editors,将右侧的show line numbers勾上,点击apply点击左侧的java->installed jres点击add按钮选择Standard VM然后点击Next,在弹出窗口中点击Directory设置jdk的路径,如下图所示:点击Finish按钮选中我们刚才添加的条目,然后点击OK再次打开window->preferences->webservice->cxf2.x preferences点击Add按钮,选择cxf的路径:点击Finish按钮将新出现的条目打上勾,然后点OK按钮。

flex高级用法

flex高级用法

flex高级用法Flex是一款非常强大的命令行工具,它可以帮助我们自动化处理大量的任务,提高工作效率。

本文将介绍flex的高级用法,帮助大家更深入地了解这款工具的功能和特点。

一、flex概述Flex是一个基于正则表达式的文本分析器,它可以将输入的文本流分解成一系列的词素(token),并对这些词素进行一系列的分析和处理。

Flex的使用非常简单,只需要一个源文件作为输入,即可自动生成一个输出文件,其中包含了经过分析处理的词素序列。

1. 自定义词素定义默认情况下,flex会根据源文件中的正则表达式定义来生成词素。

但是,有时候我们需要自定义词素定义,以适应特定的需求。

可以通过在源文件中添加注释的方式来定义自定义词素。

每个自定义词素必须以“#”开头,后面跟着一个正则表达式,用于匹配输入文本中的词素。

例如,假设我们有一个源文件“input.l”,其中定义了一个简单的词素定义:```# /^[a-z]+$/ { word }; # 匹配所有小写字母组成的词素```其中,“#”开头的注释表示这个词素是一个自定义词素。

正则表达式“^[a-z]+$”表示匹配一个或多个小写字母组成的字符串。

生成的文件中,所有匹配这个正则表达式的词素都会被标记为“word”。

2. 使用多个flex工具处理输入流flex工具可以将输入流分解成词素序列,但是有时候我们需要对分解后的词素序列进行进一步的处理。

在这种情况下,可以使用多个flex工具来处理同一个输入流,从而实现更复杂的分析处理流程。

例如,假设我们有两个flex源文件“input1.l”和“input2.l”,我们可以使用flex命令将这两个源文件合并成一个输出文件:```cssflex -l input1.l input2.l > output.txt```这样,输入流就会被分解成两个独立的词素序列,分别经过两个flex工具的处理后生成输出文件“output.txt”。

flex使用以及注意事项

flex使用以及注意事项

flex使用以及注意事项
Flex是一种CSS布局模型,它可以让容器的子元素自适应其大小和位置。

以下是一些使用Flex布局时需要注意的事项:
1. 设置flex容器:将父级元素的display属性设置为“flex”或“inline-flex”,以启用Flex布局模型。

2. 设置flex子元素:将子元素的“flex”属性设置为一个数字,以确定它们在容器中的宽度比例。

3. 使用flex-wrap:当子元素不能在一行中容纳时,可以使用flex-wrap属性启用换行。

4. 使用justify-content:此属性调整flex子元素在容器中的水平位置。

5. 使用align-items:此属性调整flex子元素在容器中的垂直位置。

6. 使用align-content:此属性调整行与行之间的间距和对齐方式。

7. 避免过多的嵌套:Flex布局模型可以减少CSS嵌套,但过多嵌套会影响性能。

8. 兼容性:Flex布局模型在不同浏览器上的支持情况可能存在差异,因此建议在使用时进行测试。

总之,Flex布局模型是一种强大的CSS布局工具,但是需要注意使用方法和兼容性问题。

- 1 -。

flex 兼容写法

flex 兼容写法

flex 兼容写法一、flex 布局简介flex 布局是一种现代的 CSS 布局模型,它提供了更加灵活、便捷的布局方式。

flex 布局能够轻松地实现各种复杂的排版和设计需求,因此在现代网页设计中得到了广泛的应用。

然而,由于一些老版本的浏览器可能不支持 flex 布局,因此需要采用一些兼容写法来确保在不同浏览器中的兼容性。

1. 使用浏览器前缀浏览器厂商前缀是指为 CSS 属性添加浏览器特定的版本号,以兼容不同浏览器的兼容性问题。

在使用 flex 布局时,可以使用浏览器前缀来确保在不同浏览器中的兼容性。

例如,可以使用 -webkit- 来兼容 Safari 和 Chrome,-moz- 来兼容 Firefox,-ms- 来兼容 IE 等。

示例代码:* flex-direction: -webkit-flex-direction: row;* flex-wrap: -webkit-flex-wrap: wrap;* justify-content: -webkit-justify-content: flex-start;2. 使用 polyfillspolyfills 是一种为老版本浏览器提供新特性的 JavaScript 库,它们可以在老版本浏览器中实现新特性,从而确保在不同浏览器中的兼容性。

在使用 flex 布局时,可以使用 polyfills 来实现兼容性。

例如,可以使用 MDC Web 等 polyfill 库来实现 flex 布局的兼容性。

示例代码:*window.getComputedStyle(element).getPropertyValue('display');* if (window.CSS && 'flex' in window.CSS) {// 使用 flex 属性进行设置} else {// 使用 polyfill 进行兼容性处理}3. 使用 fallback 方案fallback 方案是指在老版本浏览器中提供备选方案,以实现相同的效果。

Flex4.5之TextArea文本内容框组件的运用

Flex4.5之TextArea文本内容框组件的运用

第九节TextArea文本内容框组件运用第一小节TextArea我们来了这个组件真的是很重要!比如混文图排,用处在那?用来写日志的,留言板,论坛发言,等等都需要。

下来我们来看下是哪个。

就是这个内容多了在当前内容面向显示不完,可是带滚动条是不是很方便!上一节我们将过滚动条,所以我在后面会讲到把文本框的滚动条外观换下。

我们下来看看怎么运用TextArea,在FLEX3的时代TextArea就是个鸡肋,只能做些简单的运用,比如htmlText属性支持html标签真是差强人意,虽然FLEX4.5没有htmlText这个功能但是一点都不印象它强大的处理文本的功能,想问那html标签还能用吗?那肯定没问题,虽然功能很强大,这节可能不回涉及那么多。

但是做个强大的混文图排实例,这个可以有!但是在后期实例教程肯定会有。

Adobe很费心,很为我们学过html标签人费心,自从多了TextLayout这个文本框架多了很多HTML标签不信大家跟着我看看:是不是多了很多html标签答案是肯定的我们可以写下看看<s:TextArea><s:a href="">ken</s:a> </s:TextArea>我们在看下场景变化:是不是一个超级链接建立OK我们允许下看看可以点击吗:大家要注意个属性就是可编辑设置为false否则点击不管用,才开始就因为这个浪费我N久时间点击下跳转了是不是很跳转了。

是不是跟hrml那些标签很相似。

我们继续看下去:<s:TextArea editable="false"><!--设置字体--><s:fontFamily>黑体</s:fontFamily><!--设置字体大小--><s:fontSize>20</s:fontSize><s:a href="">ken</s:a></s:TextArea>看下运行结果是不是字体变了我们在看下全部代码:<?xml version="1.0"encoding="utf-8"?><s:Application xmlns:fx="/mxml/2009"xmlns:s="library:///flex/spark"xmlns:mx="library:///flex/mx"minWidth="955"minHeight="600"> <fx:Declarations><!--将非可视元素(例如服务、值对象)放在此处--></fx:Declarations><s:TextArea x="142"y="50"width="368"height="344"editable="false"><!--设置字体--><s:fontFamily>黑体</s:fontFamily><!--设置字体大小--><s:fontSize>20</s:fontSize><!--超级链接--><s:a href="">ken</s:a><!--回车符--><s:br/><s:span color="0x66cccc"fontFamily="宋体"fontSize="36">李宇春</s:span><!--添加图片--><s:imgsource="/book/site1/20090403/12387405865158661968011059019518.jpg "/></s:TextArea></s:Application>在看下运行结果:是不是跟html功能一样。

Flex配置

Flex配置

打印本页将此页作为电子邮件发送回页首开始之前安装配置开发环境Flex Flex 结束语参考资料关于作者对本文的评价Web development图 1:开发调试需要的 FireFox 插件小提示在 Debug 版本的 Flash player 和 FlashTracer 插件完成好之后,我们发现 FlashTracer 并不能正常的显示用 trace 语句输出的调试信息。

为了使其能够工作,还需要先点击图 1中的 FlashTracer 设置按钮来设置日志文件的输出路径。

并且输出的日志文件路径对于 Windows XP 来说必须是C:\Documents and Settings\Administrator\Application Data\Macromedia\Flash Player\Logs\flashlog.txt 。

在安装了 Debug 版本的 Flash Player 之后,Flash Tracer 能显示您在程序中用 trace() 语句输出的调试信息,HttpFox 插件不仅能查看 HTTP 通信的过程和数据,还能看到哪些内容是从 Cache 里面读取的。

另外,Cache Status 插件可以让我们方便的管理缓存。

在 Flex 开发过程中,往往需要先清除掉缓存中的内容,才能看到新改动的效果。

接下来我们打开 Flex Builder, 在菜单Window>Preferences>Server>Runtime Environment 中设置我们的 Tomcat6 以及在菜单Window>Preferences>General>Web Browser 中设置浏览器为外部浏览器 FireFox ,如图 2 和图 3 所示:图 2:配置 Tomcat图 3:设置默认浏览器到此为止,我们的开发环境算是彻底搭建完毕,可以看出这个过程并不算是特别简单。

别急,先苦后甜,小憩一下,让我们来享受一下 Flex 开发带来的乐趣吧!回页首Flex 的 Hello World !创建项目打开 Flex Builder, 如图 4 所示,新建一个 Flex 项目:图 4:新建 Flex 项目在后续的设置页面中,我们配置项目运行时的 J2EE server 为我们在安装配置开发环境部分中配置的 Tomcat6 如图 6 所示:图 6:配置运行时 J2EE Server点击 Next,在下一个页面中一切都按照默认设置即可。

FLEX学习笔记(崔宏峰)0309

FLEX学习笔记(崔宏峰)0309

FLEX学习笔记贵在坚持崔二宏零峰一一年二月十七一、配flex环境需要软件:1.j dk2.t omcat3.m yeclipse4.f lex builder 插件5.b lazeds.war其它的安装比较简单。

只是装flex builder时注意。

有一步要选myeclipse的安装路径才行。

然后把D:\Program Files\adobe\Adobe Flash Builder 4 Plug-in\eclipse下的features和plugins文件夹放在myeclipse的D:\Program Files\Genuitec\Common 下(myeclipse8以后就是这种路径。

7好像是单独有一个eclipse文件夹),然后还有一个AMT文件夹放到D:\Program Files\Genuitec\MyEclipse-8.6\AMT文件夹(这个不知道是为啥)(注:也有人不拷贝这些。

只是像上边那样直接安装。

行不行有待考证)二、建立采用flex的web工程因为flex只是做为表示层展示,flex只接收java返回数据,那怎么和java服务端通信呢?这时我们需要用到adobe公司开发的一个开源项目Blazeds。

Blazeds是一个基于服务器的Java 远程控制(remoting) 和Web 消息传递(messaging) 技术,以LGPL(Lesser GNU Public License)公共许可证书发布。

它能够使得后端的Java 应用程序和运行在浏览器上的Adobe Flex 应用程序相互通信。

在Java应用服务器上,它以servlet的形式存在,因此可以在任何标准Java 网络应用中运用它。

下载好核心包解压出来就发现一个文件名是Blazeds.war,我们只需要把Blazeds.war改成Blazeds.rar然后解压就会出现:1.打开Myeclise8.0新建一个javaweb工程,选择javaEE 5.0如图2.把blazeds解压后的2个文件夹覆盖到WebRoot下面,展开发现在WEB-INF 目录下面多了flex文件夹,这个很重要主要是通信的4个配置文件。

读书笔记之使用Flex4.5开发Android应用程序

读书笔记之使用Flex4.5开发Android应用程序

读书笔记之《使用Flex4.5开发Android应用程序》原书《Developing Android Applications with Flex4.5》建议有flex编程经验的同志阅读第一章H e l lo Wo r ld1创建Flex 手机项目哈哈,这个很简单的,我用的是4.6版本,没问题第一个窗口允许你设置项目的名称,项目位置,和Flex SDK 版本第二个窗口你可以选择设置特定的目标平台(第二章介绍的布局)点击权限选项卡务必只选择适用于你的应用程序的权限(如摄像头,信息等)下一个窗口允许配置应用程序服务器和输出文件夹最后一个窗口是“构建路径”窗口,在这里你将可以设置你的应用程序ID 。

为了确保你的应用程序都有唯一标识符,使用反向域名命名约定效果最好。

Flash Builder 将创建新的项目,并且默认情况下,将创建HelloWorldHomeView.mxml 并在工作区中和HelloWorld.mxml 主应用程序文件一起被打开。

应用程序右键单击包资源管理器中的HelloWorld.mxml 文件,并选择运行方式→手机应用程序,如图1-8所示,由于这是我们第一次运行这个应用程序,将会打开运行配置窗口。

要使用Flash Builder 的模拟器运行此应用程序,启动方法选择“在桌面上”并从下拉菜单中选择要模拟的设备。

如果你有Android设备,你可以将其插入USB端口,并选择“在设备上”,在你的手机上运行Hello World应用程序。

现在单击应用,然后单击“运行”——你会看到Hello World应用程序在桌面模拟器或设备上启动。

2.调试Flex手机项目调试Flex手机应用程序的工作流程是和调试其它任意Adobe Flex应用程序或Adobe AIR应用程序是一样在Flash Builder内右键单击第14行行号并在上下文菜单选择切换断点。

在行号前将显示一个小蓝点,表明断点启用。

右键单击包资源管理器中的HelloWorld.mxml文件并选择调试方式->手机应用程序,选择“在桌面上”的启动方法,并从下拉菜单中选择要模拟的设备当询问你是否切换到Flash Builder的调试透视图,选择“Yes”应用程序在第14行暂停。

OrcaFlex软件操作指南

OrcaFlex软件操作指南

OrcaFlex软件操作指南按照客户要求,本报告以钢悬链立管(SCR)为例,从SCR总体强度分析、运动疲劳分析和安装分析三个方面给出了OrcaFlex软件的主要操作指南,现分别叙述如下。

1总体强度分析在OrcaFlex主界面里,由上到下依次是菜单栏、工具栏和模型显示窗口。

按住Ctrl+鼠标左键可以进行模型的旋转,按住Ctrl+鼠标中键可以进行模型放大和缩小,按住Ctrl+T可以正视整个模型,按住Ctrl+P可以俯视整个模型。

1.1模型树的调用双击打开OrcaFlex软件,点击工具栏中的模型浏览器按钮(Model Browser),显示模型树。

1.2环境参数设置双击Environment按钮打开环境参数设置界面。

1.2.1Sea由上到下可依次设置海平面位置,运动粘性系数,海水温度,雷诺数计算方法,具体如下面表格所示。

水平面位置(m)运动粘性系数(m2/s)海水温度(o T)雷诺数计算方法0 1.2E-6 15 沿横流方向计算其中海平面位置数值是相对于总体坐标系而言;温度为摄氏温度,它的大小直接影响到运动粘性系数。

而雷诺数的计算方法,主要取决于流速和结构特征长度的计算。

软件中三种方法雷诺数最终的计算公式分别为Re nom= |Vr|D/ν,Re cross = |Vr|Dcos(α)/ν,Re flow= |Vr|D/νcos(α),其中Vr径向速度。

OrcaFlex calculates Reynolds number in order to calculate drag and lift coefficients1.2.2Sea Density设置海水密度,可以是变化的,也可以是恒定不变的。

如该海域的海水密度为1025Kg/m3,具体如下图所示。

1.2.3Sea Bed设置海底形状,海水的深度、斜度以及海底土壤的刚度系数,其中海底斜度和海底方向都是相对于总体坐标系而言,具体参数应在立管总体设计参数中给出。

flex(eclipse)开发配置手册

flex(eclipse)开发配置手册

一 Flex For Eclipse开发环境安装1:从Adobe官网下载的Flex builder eclipse 插件:FB3_WWEJ_Plugin.exe 2:点击安装3:选择安装路劲,按默认安装即可4:点击下一步,选择你eclipse的安装目录。

例如D:/ProgramFiles/eclipse3.4_en/eclipse。

5:默认安装flash 9,可以选择不安装,因为官网有debug版的flash 9,对于开发者适合用debug版的。

6:安装完成7:将C:/Program Files/Adobe/Flex Builder 3 Plug-in/com.adobe.flexbuilder.update.site下的features 和plugins目录复制覆盖到D:/Program Files/eclipse3.4_en/eclipse目录下,这里覆盖实际上就是将原来目录里没有的插件添加进去。

8:将C:/Program Files/Adobe/Flex Builder 3 Plug-in/eclipse(和上一步的目录不一样)下的features 和plugins目录复制继续覆盖到D:/ProgramFiles/eclipse3.4_en/eclipse目录下9:将C:/Program Files/Adobe/Flex Builder 3 Plug-in下的sdks目录拷贝到eclipse目录中。

(此步骤非必须)10:启动eclipse,就可以在新建项目中找到Flex Bulider了11:最后一项配置SDK,(此步骤可以省去,默认已经配好了);选择Window->Preferences->Flex->Installed Flex SDKs。

如下图默认的sdks是我们安装的flex插件中的sdk。

我们可以修改为拷贝放入到eclipse目录里面的sdks。

60天的试用期提示,选择继续使用以上使用的eclipse使用的是3.4版本的。

flex使用以及注意事项

flex使用以及注意事项

flex使用以及注意事项Flex 是一个强大的 CSS 布局工具,可以帮助我们实现复杂的布局,使网页中的元素自适应,并且能快速响应不同设备的屏幕大小变化。

本文将介绍 Flex 的使用方法和注意事项。

一、Flex 的基本概念Flex 布局是一种弹性布局,可以让元素沿着主轴和交叉轴上进行排列,主轴和交叉轴可以根据需要进行反转。

- 主轴:是指 Flex 布局中的沿着元素排列的方向,可以是横向或纵向。

- 交叉轴:是指与主轴垂直的方向,在交叉轴上进行元素排序。

Flex 布局可以通过设置容器的 flex 属性来实现。

有两个值需要分别设置,主轴方向的 flex 属性和交叉轴方向的 flex 属性。

- flex-direction:设置主轴方向,可取的值为 row 和 column。

row 表示横向,column 表示纵向。

-justify-content:设置主轴上的对齐方式,可取的值为flex-start,center,flex-end,space-between 和space-around。

- align-items:设置交叉轴上的对齐方式,可取的值为 flex-start,center,flex-end 和stretch。

- align-content:设置多行排列时的对齐方式,可取的值为 flex-start,center,flex-end,space-between,space-around 和 stretch。

二、Flex 的基本使用方法1、设置容器的 display 属性为 flex。

```css .container { display: flex; } ```2、设置容器的 flex-direction 属性来指定主轴的方向。

```css .container { display: flex; flex-direction: row; /* 主轴方向为横向 */ } ```3、设置 flex-grow 属性来指定元素在主轴方向上的扩展比例。

Flex布局总结之flex的主要属性及参数用法

Flex布局总结之flex的主要属性及参数用法

Flex布局总结之flex的主要属性及参数⽤法这篇笔记是系统学习flex时所记,适合复习使⽤,新⼿学习还是要配合图⽰和代码来学习更容易理解。

flex布局模型:弹性盒⼦( Flexible Box 或 flexbox),是⼀种当页⾯需要适应不同的屏幕⼤⼩以及设备类型时确保元素拥有恰当的⾏为的布局⽅式。

引⼊弹性盒布局模型的⽬的是提供⼀种更加有效的⽅式来对⼀个容器中的⼦元素进⾏排列、对齐和分配空⽩空间。

⾸先要弄清楚⼏个重要概念:flex-container:弹性盒⼦容器flex-items:flex-container⾥⾯的直接⼦元素叫做flex-items主轴:main axis:main start & main end & main size交叉轴:cross axis:cross start & cross end & cross size⽤在flex container上的CSS属性:flex-flow、flex-direction、flex--wrap、justify-content、align-items、align-content应⽤在flex items上的CSS属性:flex、flex-grow、flex-basis、flex-sshrink、order、align-self开启flex布局:.box { display:flex or inline-flex; } // 块级元素或⾏内元素1. flex-direction :决定了main axis主轴⽅向,默认沿着main axis主轴从main start开始从main start开始往main end⽅向排布。

row---默认从左⾄右, row-reverse----从右⾄左, column----从上⾄下, column-reverse----从下⾄上2. justify-content:决定了flex items在主轴上的对齐⽅式flex-start-----默认与main start对齐, flex-end------与main end对齐, center-------居中对齐space-between-----两边对齐中间等分间距对齐, space-evenly-----等分间距对齐, space-around-----边距时中间距离⼀半3. align-items:决定了flex items在cross axis上的对齐⽅式normal------效果相当于stretch-----当flex items在cross axis⽅向的size为auto时,会⾃动拉伸⾄填充flex containerflex-start----默认与cross start对齐, flex-end------与cross-end对齐, center------居中对齐, baseline------基线对齐,第⼀⾏⽂本底部为基线4. flex-wrap:默认nowrap,不换⾏;wrap,换⾏。

个人总结flex各种用法

个人总结flex各种用法

个人总结flex各种用法个人总结flex各种用法转自获得屏幕的分辨率var x:Number=Capabilities.screenResolutionX;var y:Number=Capabilities.screenResolutionY;Alert.show("x="+x+"y="+y);第二种方法Alert.show(stage.fullScreenWidth+"=="+stage.fullScreenHe ight);//获得stage(工作区)的宽、高Alert.show(stage.stageWidth+"=="+stage.stageHeight);//读取xml文件private function readxml2():void{var urlrequest:URLRequest=new URLRequest("file/stu.xml");var urlloader:URLLoader=new URLLoader(urlrequest);urlloader.addEventListener(PLETE,completehandl er);}private function completehandler(event:Event):void{var xml:XML=new XML(event.target.data);//var arr:Array=new Array(xml);this.dg.dataProvider=xml.children();this.tree.dataProvider=xml;this.cb.dataProvider=xml.children();//this.hlist.dataProvider=xml.children();}//flex获得系统路径var add:String=ExternalInterface.call("window.location.href.toString",1);Alert.show(add);//背景颜色不断变化private function changeBG():void{var mytime:Timer=new Timer(2000);mytime.addEventListener(TimerEvent.TIMER,changHandle);mytime.start();}private function changHandle(e:TimerEvent):void{this.setStyle("backgroundColor",Math.random()*0xffffff);}//获得键盘按下的键的值public function getCode():void{btn.addEventListener(KeyboardEvent.KEY_DOWN,keyHandle );}function keyHandle(event:KeyboardEvent):void{Alert.show("你按下了:"+String.fromCharCode(event.charCode));}//动态加载不同界面import commont.Two;import commont.One;var t:Two=new Two();var o:One=new One();private function showOne():void{tw.removeAllChildren();tw.addChild(o);}private function showTwo():void{tw.removeAllChildren();tw.addChild(t);}//flex绑定图片[Bindable][Embed(source="img/1.jpg")]public var phone1:Class;//日期中文标题mx:DateChooser id="dtchoose"x="219"y="83"dayNames="[日,一,二,三,四,五,六]"monthNames="[一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月]"change="disDate()"minYear="2007"/ //选择日期dateChoose function disDate():void{txtDate.text=fm.format(dtchoose.selectedDate.toLocaleDate String());}//flex中添加html标记mx:TextArea id="text"creationComplete="init()"width="248"height="59"mx:htmlText![CDATA[input type='file'/a href="你哈!/a]]/mx:htmlT ext/mx:TextArea//flex带下划线的链接this.lblLink.htmlText="a href='target='_blank'新闻/a";mx:Labelx="524"y="393"text="Hellollll"id="lblLink"rollOver="focusMana ger.deactivate()"color="blue"opaqueBackground="#ffffff"rollOut="focusManager.activate()"styleName="Label"creationComplete="link()"/.Label{text-roll-over-color:red;text-decoration:underline;background-color:green;font-size:12px;text-selected-color:red;}//flex转向URL Var url:URLRequest=new URLRequest("");navigateToURL(url,"_self");//在本页打开navigateToURL(url,"_blank");//在新的一页打开//弹出对话框---非模式打开---PopUpManager.createPopUp(this,类(界面)的名称);---模式打开---var ep:Main=new Main();PopUpManager.addPopUp(ep,this,true);//界面,打开窗口父类,是否模式PopUpManager.centerPopUp(ep);//在父类窗口居中//---Alert的用法public function test():void{var glow:GlowFilter=new GlowFilter();glow.color=StyleManager.getColorName("blue");//边框颜色glow.strength=5;glow.alpha=0.8;var alert:Alert=Alert.show("是否选择","提示",Alert.YES|Alert.NO,this,alertHandle);alert.filters=[glow];}private function alertHandle(event:CloseEvent):void{if(event.detail==Alert.YES){lbl.text="是";}else{lbl.text="否";}}mx:Button x="62"y="80"label="Button"click="test()"/mx:Label x="62"y="37"text="Label"width="65"id="lbl"///flex Combobox添加–请选择-private function loadCB(){var arr:Array=new Array("-请选择-");for(var i:int=1;i 10;i++){arr[i]=i;}this.cb.dataProvider=arr;}//combobox选择的值和下标private function selected():void{Alert.show(cb.selectedItem.toString()+"下标:"+cb.selectedIndex);}mx:ComboBox x="194"y="80"id="cb"creationComplete="loadCB()"change="se lected()"//鼠标移动变大,Button加图片,变手型mx:Button x="72"y="80"label="Button"click="test()"mouseMove="changBi g()"mouseOut="changSmall()"id="btn"height="52"icon="@Em bed(source='img/3.jpg')"labelPlacement="bottom"width="67"useHandCursor="true "buttonMode="true"/private function changBig():void{this.btn.scaleX=1.5;this.btn.scaleY=1.5}private function changSmall():void{this.btn.scaleX=1;this.btn.scaleY=1;}//flex panel拖动效果mx:Panel x="194"y="125"width="192"height="121"layout="absolute"id= "panel"mouseDown="ondragStart(event)"mouseUp="ondragSt op(event)"/mx:Panel private function ondragStart(event:MouseEvent):void{Panel(event.target).startDrag();}private function ondragStop(event:MouseEvent):void{Panel(event.target).stopDrag();}//写入共享数据share=SharedObject.getLocal("username");erName=txtUser.text;share.flush();//读取共享数据var share:SharedObject=SharedObject.getLocal("username");Alert.show(erName);//jsp/html文件嵌入到flex中(需要把flexiframe.swc放在项目的flex_libs下)Application标签内xmlns:code=mx:HDividedBox x="0"y="10"width="100%"height="500"mx:Panel width="30%"height="500"layout="absolute"/mx:Panel mx:Panel width="70%"height="500"layout="absolute"code:IFrame id="frm"source="file/万年历.html"height="100%"width="100%"/!-这是最重要的-à/mx:Panel/mx:HDividedBox//检查使用的操作系统private function checkOS():void{var os:String=Capabilities.os;tt.text="你的操作系统是:--"+os;}//检查所使用的浏览器private function checkPlay():void{var play:String=Capabilities.playerType;Alert.show(play);if(play=="ActiveX"){tt.text="你的浏览器是--IE";}else if(play=="PlugIn"){tt.text="你的浏览器是--Mozilla-Firefox";}else{tt.text="你的浏览器是--其他";}}//检查player的版本和使用的语言private function other():void{var v:String=Capabilities.version;var l:String=nguage;tt.text="你的flayer版本号:--"+v+"\r\n你的语言是:--"+l;}//改变鼠标样式[Bindable][Embed(source="img/157.jpg")]public var cur:Class;private function initCursor(event:Event){ CursorManager.setCursor(cur);。

词法分析器flex中文手册

词法分析器flex中文手册

FLEX 中文手册这是flex手册的部分中文翻译,仅供参考•一些简单的例子•输入文件的格式•模式•如何匹配输入•动作•生成的扫描器•开始条件•文件结尾规则•与yacc一起使用一些简单的例子首先给出一些简单的例子,来了解一下如何使用flex。

下面的flex输入所定义的扫描器,用来将所有的“username”字符串替换为用户的登陆名字:%% username printf("%s", getlogin());默认情况下,flex扫描器无法匹配的所有文本将被复制到输出,所以该扫描器的实际效果是将输入文件复制到输出,并对每一个“username”进行展开。

在这个例子中,只有一个规则。

“username”是模式(pattern),“printf”是动作(action)。

“%%”标志着规则的开始。

这里是另一个简单的例子:int num_lines = 0, num_chars = 0;%% \n ++num_lines; ++num_chars; . ++num_chars;%% int main(void){yylex();printf("# of lines = %d, # of chars = %d\n", num_lines, num_chars);}该扫描器计算输入的字符个数和行数(除了最后的计数报告,并未产生其它输出)。

第一行声明了两个全局变量,“num_lines”和“num_chars”,可以在yylex()函数中和第二个“%%”后面声明的main()函数中使用。

有两个规则,一个是匹配换行符(“\n”)并增加行数和字符数,另一个是匹配所有不是换行符的其它字符(由正规表达式“.”表示)。

一个稍微复杂点的例子:/* scanner for a toy Pascal-like language */%{/* need this for the call to atof() below */#include <math.h>%}DIGIT [0-9] ID [a-z][a-z0-9]*%%{DIGIT}+ {printf( "An integer: %s (%d)\n", yytext,atoi( yytext ) );}{DIGIT}+"."{DIGIT}* {printf( "A float: %s (%g)\n", yytext,atof( yytext ) );}if|then|begin|end|procedure|function {printf( "A keyword: %s\n", yytext );}{ID} printf( "An identifier: %s\n", yytext );"+"|"-"|"*"|"/" printf( "An operator: %s\n", yytext );"{"[^}\n]*"}" /* eat up one-line comments */[ \t\n]+ /* eat up whitespace */. printf( "Unrecognized character: %s\n", yytext );%%int main(int argc, char **argv){++argv, --argc; /* skip over program name */if ( argc > 0 )yyin = fopen( argv[0], "r" );elseyyin = stdin;yylex();}这是一个类似Pascal语言的简单扫描器的初始部分,用来识别不同类型的标志(tokens)并给出报告。

OrcaFlex软件操作指南

OrcaFlex软件操作指南

OrcaFlex软件操作指南按照客户要求,本报告以钢悬链立管(SCR)为例,从SCR总体强度分析、运动疲劳分析和安装分析三个方面给出了OrcaFlex软件的主要操作指南,现分别叙述如下。

1总体强度分析在OrcaFlex主界面里,由上到下依次是菜单栏、工具栏和模型显示窗口。

按住Ctrl+鼠标左键可以进行模型的旋转,按住Ctrl+鼠标中键可以进行模型放大和缩小,按住Ctrl+T可以正视整个模型,按住Ctrl+P可以俯视整个模型。

1.1模型树的调用双击打开OrcaFlex软件,点击工具栏中的模型浏览器按钮(Model Browser),显示模型树。

1.2环境参数设置双击Environment按钮打开环境参数设置界面。

1.2.1Sea由上到下可依次设置海平面位置,运动粘性系数,海水温度,雷诺数计算方法,具体如下面表格所示。

水平面位置(m)运动粘性系数(m2/s)海水温度(o T)雷诺数计算方法0 1.2E-6 15 沿横流方向计算其中海平面位置数值是相对于总体坐标系而言;温度为摄氏温度,它的大小直接影响到运动粘性系数。

而雷诺数的计算方法,主要取决于流速和结构特征长度的计算。

软件中三种方法雷诺数最终的计算公式分别为Re nom= |Vr|D/ν,Re cross = |Vr|Dcos(α)/ν,Re flow= |Vr|D/νcos(α),其中Vr径向速度。

OrcaFlex calculates Reynolds number in order to calculate drag and lift coefficients1.2.2Sea Density设置海水密度,可以是变化的,也可以是恒定不变的。

如该海域的海水密度为1025Kg/m3,具体如下图所示。

1.2.3Sea Bed设置海底形状,海水的深度、斜度以及海底土壤的刚度系数,其中海底斜度和海底方向都是相对于总体坐标系而言,具体参数应在立管总体设计参数中给出。

Eclipse4.5和PyDev搭建完美Python开发环境

Eclipse4.5和PyDev搭建完美Python开发环境

Eclipse4.5和PyDev搭建完美Python开发环境安装Python 3.5目前,Python有两个版本,一个是2.x版,一个是3.x版,这两个版本是不兼容的。

由于3.x版越来越普及,我们的教程将以最新的Python 3.5版本为基础。

请确保你的电脑上安装的Python版本是最新的3.5.x,这样,你才能无痛学习这个教程。

●在Mac上安装Python如果你正在使用Mac,系统是OS X 10.8~10.10,那么系统自带的Python版本是2.7。

要安装最新的Python 3.5,有两个方法:方法一:从Python官网下载Python 3.5的安装程序(网速慢的同学请移步国内镜像),双击运行并安装;方法二:如果安装了Homebrew,直接通过命令brew install python3安装即可。

●在Linux上安装Python如果你正在使用Linux,那我可以假定你有Linux系统管理经验,自行安装Python 3应该没有问题,否则,请换回Windows系统。

对于大量的目前仍在使用Windows的同学,如果短期内没有打算换Mac,就可以继续阅读以下内容。

●在Windows上安装Python首先,根据你的Windows版本(64位还是32位)从Python的官方网站下载Python 3.5对应的64位安装程序或32位安装程序(网速慢的同学请移步国内镜像),然后,运行下载的EXE安装包:特别要注意勾上Add Python 3.5 to PATH,然后点“Install Now”即可完成安装。

运行Python安装成功后,打开命令提示符窗口,敲入python后,会出现两种情况:情况一:看到上面的画面,就说明Python安装成功!你看到提示符>>>就表示我们已经在Python交互式环境中了,可以输入任何Python代码,回车后会立刻得到执行结果。

现在,输入exit()并回车,就可以退出Python交互式环境(直接关掉命令行窗口也可以)。

flex开发环境配置手册

flex开发环境配置手册

flex开发环境配置手册开发工具篇一.开发工具这里要紧需要介绍的是两个Flex开发工具的环境配置Micromedia Flex Builder 1.5FlexBuilder 2.0 Eclipse 插件二.Micromedia Flex Builder 1.5环境配置1.安装Micromedia Flex Builder 1.5安装部分比较简单,基本上与其他的Windows软件安装差不多,这里不做全面介绍。

2.配置开发环境Flex Builder开发工具总体预览如下图1 总体预览OK,上面是配置完成的Flex Builder的开发环境预览,下面我们开始进入配置介绍,在这之前请先阅读Flex开发环境配置手册----服务器篇。

由于这里使用的服务器是在服务器篇中介绍的布局,因此建议最好先阅读服务器篇。

a)新建Flex站点首先我们需要在Flex Builder中为我们的Flex项目构建一个站点,我这里假设其站点名称之genifyFlex,并在服务器的公布目录下新建一个genifyFlex目录,当然这个名称你能够选取自己喜欢的名称。

在Flex Builder的菜单栏Site New Flex Site中配置项目站点,如下所示:图2 新建Flex站点01图3 新建Flex站点02Site name:Flex项目使用的站点名称。

Local root folder:项目源文件放置位置。

Flex server root folder:服务器篇中安装的Flex 1.5的目录(注意这个不是Flex Builder 的目录)。

URL prefix:用户访问时使用的URL前缀,在项目开发过程中对源文件进行调试时Flex Builder生成的访问路径的前缀也使用该前缀。

b)站点配置这里能够在上面的More Settings链接对站点进行更加全面的配置,也能够在Flex Builder 的菜单栏Site Manage Sites进行站点的全面配置图4 配置Flex站点01图5 配置Flex站点02在这里我们选择Edt对站点的一些信息进行全面配置,当然我们也能够在这里建立站点或者者导入导出站点信息,这些不是我们这里的重点。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

Flex4.5 + Tomcat6.0 + MyEclipse 10.0+ Java+LCD的环境搭建:
第一,下载、安装Flex4.5(Flash Builder),Tomcat6.0 ,MyEclipse 9.0,以及lcd.war
第二,在MyEclipse 10.0中新建Flex项目,配置Flex;
第三,配置Tomcat;
第四,发布项目;
1,启动MyEclipse 10.0。

切换到myEclipse里的Flex操作界面。

新建》Flex项目。

Project Name: FlexWeb
Application type(应用程序类型):Web application(网络应用程序)
Server technology(服务器技术):
Application server type(服务器类型):J2EE
Use remote object access service:(应用远程物体处理服务是选中的状态)
LiveCycle Data Services(选中)
Create combined Java/Flex project using WTP(选中)
java source folder(java文件包):src
接着窗口的设置
Target runtime: new (我们需要按new按钮,选择建立新的Tomcat 6服务器)
Context root: WebRoot (项目内容的根目录)
Context folder: WebRoot
Flex WAR file: D:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\lcd.war
(我们需要预先把lcd.war文件复制到Tomcat 6.0的webapps目录里)
Output folder:WebRoot(这一步很重要,这里我们选WebRoot)
如下图:
下一步:
2,配置TOMCAT
新建,选择Tomcat 6.0服务器。

可以添加TOMCAT
下一步
3,添加lcd.war
4,设置输出文件路径:
下一步
5,
配置输出文件URL:http://127.0.0.1:8080/FlexWeb/flex/FlexWeb
完成,
6,到这里我们看到了我们新建的FlexWeb工程了,工程结构如图:
Finishj即可。

7,发布项目:
这样我们的项目就配置成Web服务器式的了。

下一步就是需要把项目配置到Tomcat服务器了。

点击左上角的配置图标
我们可以看到我们的textWeb项目可以进行发布了
点击Add按钮,在弹出的窗口选Tomcat 6.x服务器
Finish完成,显示Successfully deployed. Ok即可。

启动Tomcat服务器。

启动显示成功。

回到Flex的编辑模式,运行我们的项目。

给项目加一个Button组件。

代码如下:
保存,运行项目。

如果没设置成功,我们还可以再设置项目的配置。

在项目FlexWeb上单击右键,选Properties(属性)
因为默认的状况下Tomcat会自动找到WebRoot目录下的文件来布置到服务器上,所以,我们的文件的输出路径一定要放到WebRoot目录下面。

如果没有运行成功,可以通过在右键单击项目,选Properties(属性)来重新设置部署。

注意它们之间的关系是对应的。

看一下我的运行结果:
点击按钮:
好的,部署完毕。

相关文档
最新文档