WebBuilder学习记录.docx

1、WebBuilder学习记录WebBuilder是一款跨平台、数据库和浏览器的可视化Web应用开发平台。WebBuilder使用了多项最新的技术，使Web应用的开发更快捷和简单。一、安装方法 1、安装任意类型的一款 JAVA Web 应用服务器（如 Tomcat）和数据库（如 MySql），并且在 Web 应用服务器中创建一个 JNDI 链接串，以访问所创建的数据库。 2、解压缩下载的安装包 webbuilder.zip，并把 wb 目录部署到 Web 应用服务器。例如，您使用 Tomcat， 那么可直接复制 wb 目录至 Tomcat 的 webapps/wb 目录。 3、打开浏览器并访问

2、http:/ip:port/wb，使用安装向导来完成 WebBuilder 的安装。例如，访问 http:/localhost:8080/wb 4、使用管理员帐户登录到系统，管理员默认用户名称和密码均为 admin。How to use PHP to collect Form data?Before you read this tutorial please make sure you understand the basics of creating forms as explained in this article: Creating Forms. We assume you have

3、already created your form and now your next step will be to collect the entered data after the users pressed the Submit button.In this tutorial we will use PHP to collect the form data, because the mailto: action which was used in the Creating Forms tutorial is not the most reliable way to collect d

4、ata in a form. For more detail about this please read this article: Notes: Make sure your web server supports PHP otherwise this solution will not work! Quick n Easy Web Builder does have a built-in PHP form processor. When using that option you do not need to write any code manually. * Recommended

5、for beginners! *Step 1Create a new page in and call it feedback. This is the page that will be displayed after the data has been submitted, so this page may contain a thank you for your submission message or any other content you prefer.Step 4Replace yourname with your own email address.Step 5Go bac

6、k to the page with your form and set the action property of the form to feedback.php.Verify that the method is set to POST. Also remove the content of the encodingtype field so that its empty. Step 2Open the page properties of the new page and set the file extension to PHP. Step 3Open Menu-Page-Page

7、 HTML, select Start of Page and copy/paste this code: $value) if (!is_array($value) $message .= n.$key. : .$value; else foreach ($_POST$key as $itemvalue) $message .= n.$key. : .$itemvalue; mail($mailto, $subject, stripslashes($message), $header); ?Note:Your form should contain a field called email,

8、 this field will be used as sender of the mail message!Step 6Now you can publish the 2 pages and test your form.Note: You can not test a PHP form on your local computer, the script should be executed on a web server with PHP support!Related articles:How to use the Form Wizard? 二、使用 WebBuilder 来生成一个窗

9、口 1、打开开发套件-集成开发环境模块，点击新建模块按钮，添加一个新的应用模块。 2、在控件列表中双击 Window 控件，来添加窗口，并设置 autoShow 属性为 true，title 属性为 demo。 3、点击运行按钮，就能见到我们刚才添加的窗口。 功能强大的集成开发环境在线的带语法分析和高亮的Java、JavaScript、ServerScript编辑器，所见即所得的表单设计器，强大的组件管理器和模块管理器，智能的对象探测器整合的Portal跨异构数据库的管理工具在线表格编辑，高亮的SQL和语法分析，支持大数据量的访问，支持所有类型数据（包括BLOB）的导入导出跨平台的远程服务器文

10、件访问使用资源管理器般的简单，就能轻松操纵远程服务器系统。随心所欲的权限控制能够对任意粒度的操作进行严格的权限控制。企业级的后台任务管理管理和控制后台计划任务稳定地运行。What is new in Quick n Easy Web Builder 3.0?This document provides a brief overview of what you can expect in this major new release. Quick n Easy Web Builder 3.0 has more than 100 new features/improvements. Thousan

11、ds of new options and possibilities! Heres a list of some of these new features. Responsive Web DesignWith the increase in popularity of browsing on mobile phones and tablets it is becoming essential to create web sites that are optimized to the needs of these users. Previously you had to create dif

12、ferent versions of the website and use scripts to redirect the visitor to the mobile version of the page. Quick n Easy Web Builder 3 introduces Responsive Web Design which allows you to create a single HTML page containing different variants of the layout, each optimized for specific device widths.

13、Your website will dynamically respond to the screen size of the visitor and display the layout most appropriate to their device. These different variants are called breakpoints and this concept is based on CSS3s media queries.A breakpoint is separate view of the page in Quick n Easy Web Builder. A p

14、age can have multiple breakpoints, each one optimized for a specific screen width. For example, you can have the standard desktop layout, one for tablets (1024 px) and another one for mobile phones (320 px). To add, edit or switch between breakpoints click the Manage Breakpoints option in the Page m

15、enu.You can also use the Breakpoints toolbar at the bottom of the screen to switch between breakpoints . To go back to the default layout, select Default. CSS3 animations and transitions- New feature: Added CSS3 animation and transition support! Related tutorials:- New feature: Added Animation Manag

16、er. This can be used to define animation (with key frames) for CSS3 animations. With more than 90 predefined animations to get you started.- New feature: Added support for animations and transitions in the Style Manager.- New Feature: Added Animation timeline. This can be used to display all animati

17、ons on the page, so you can easily add, edit and remove animations.- New Feature: Transform objects with animations and transitions (for example onmouseover): skew, translate, rotate, scale. flip etc.Header / Footer- New feature: Added Page Header object. An easy way to add a full width header to yo

18、ur website. Supports fixed and fullscreen with animations mode.- New feature: Added Page Footer object. An easy way to add a full width footer to your website. Supports fixed and fullscreen with animations mode.Timer Object- New feature: Added Timer object. Trigger actions based on timer events. For

19、 instance show or hide an object after X milliseconds. Timers can also start/stop other timers! All event actions are supported.Wrapping Text- New feature: Added Wrapping text object. This object makes it possible to wrap text around objects!Panel Menu- New feature: Added Panel Menu. A Panel Menu is

20、 initially invisible, but can slide from the right or left side of the page by clicking the menu button. Many modern web sites use this type menu.Blog- New feature: Added Blog object. The Blog object provides an easy way to implement a basic blog on your website without special requirements of the w

21、eb server.General features- New feature: The user interface was redesigned. It has now a more modern look with flat toolbars and new (flat) icons.- New feature: Added page name to the statusbar, it also displays the current breakpoint (for RWD).- New feature: JavaScript functions now always use an e

22、xternal (minified) file: qwb3.min.js- New feature: Added Events and Animations buttons to toolbar for quick access to these features.- New feature: Added a shortcut menu item to insert Google Analytics code in the section of the page.- New feature: Added Defaults in Page Properties. Here you can set

23、 the default font (family/size/color) for new objects in the current page.- New feature: Added support for background-size (CSS3) in for background images (include page background). This makes it possible to size/stretch background images in layers, forms, buttons etc. Supports contain, cover, pixel

24、s and percentages!- New feature: Added Margin option to Image, Shape, Logo, RollOver, SlideShow and others. The margin clears an area around an element (outside the border). Unlike padding, the margin does not have a background color, and is completely transparent. This can useful for objects in wra

25、pping text to add some spacing around objects. - New feature: Included (optional) support for jQuery 2.0. This version of jQuery is faster and smaller, but does not support Internet Explorer 6, 7, or 8. jQuery 1.11 and 1.7.1 are also still supported.Find and Replace- New feature: Added Find and Repl

26、ace tool. This tool can be used to quickly change the color, font, url or filename for all objects (or a selection) on the page or entire website. Publish- New feature: Added Publish files of modified objects only. When this option is selected publish will only upload the files of objects that have

27、been modified.For example you selected a different image. Then only this image will uploaded.Links- New feature: Added FaceTime link option. Launch the FaceTime app and initiate a call to the specified user.- New feature: Added Phone Number link option. Call the specified number.- New feature: Added

28、 SMS link option. Send an SMS.- New feature: Added Skype link option. Launch the Skype app and initiate a call to the specified user.Text- New feature: Added Lorum Ipsum Text generator to the text object! Available in the Edit menu and the context menu in text edit mode.- New feature: Added new outp

29、ut format to text properties: Include line-height in text styles, in many cases this creates perfectly aligned text with a small code footprint;)- New feature: Added support for text-shadow in the Style Manager. This allows you to add shadows to text (in supported browsers). For performance reasons the text will not be rendered with shadow in design view. You must preview or publish the page!YouTube- New feature: Added Show Controls option. Uncheck this to hide the player control