WebUI Case(1): www.swt-designer.com 首页

技术2022-05-11 57

本系列文章主要记录在网上发现的一些优秀的Web UI设计. 文章结构如下: (1) WebUI Case 编号 (2) WebUI Case 名称,地址 (3) 截图 (4) 源代码 (5) 评价(可选) 下面开始第一篇: (1)WebUI Case编号: 0001 (2) WebUI Case 名称: www.swt-designer.com 首页 (3) 截图 (4)源代码页面: < html > < head > < title > SWT Designer </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=iso-8859-1" > < link rel ="SHORTCUT ICON" href ="http://www.swt-designer.com/favicon.ico" type ="image/x-icon" > < link rel ="ICON" href ="http://www.swt-designer.com/favicon.ico" type ="image/x-icon" > </ head > < frameset frameborder ="0" border ="0" rows ="66,*" > < frame src ="http://www.instantiations.com/swt-designer/eclipse_banner.html" scrolling ="no" marginwidth ="5" marginheight ="5" > < frameset frameborder ="0" cols ="310,*" > < frame src ="http://www.instantiations.com/swt-designer/map.html" scrolling ="no" marginwidth ="5" marginheight ="5" > < frame name ="content" src ="http://www.instantiations.com/swt-designer/home.html" scrolling ="auto" marginwidth ="5" marginheight ="5" > </ frameset > < noframes > < body > This page uses frames, but your browser doesn't support them. </ body > </ noframes > </ frameset > < frameset > </ frameset > </ html > 顶层frame: < html > < head > < title ></ title > </ head > < body bgcolor ="#D4D0C8" > < table border ="0" cellPadding ="0" cellSpacing ="0" height ="100%" width ="100%" >  < tr > < td >< img src ="images/left_top.gif" width ="2" height ="2" ></ td > < td background ="images/top_top.gif" width ="100%" ></ td > < td >< img src ="images/top_right.gif" width ="3" height ="2" ></ td > </ tr >  < tr bgcolor ="#FFFFFF" > < td background ="images/left_border.gif" height ="100%" ></ td > < td align ="center" >< table width ="100%" border ="0" cellspacing ="0" cellpadding ="0" > < tr > < td width ="100%" >< table bgcolor ="#006699" width ="100%" border ="0" cellspacing ="0" cellpadding ="0" > < tr > < td bgcolor ="#006699" width ="33%" align ="left" > < a href ="http://www.instantiations.com" target ="_top" > < img src ="images/Instantiations-logo.gif" align ="absmiddle" border ="0" width ="202" height ="30" ></ a ></ td > < td align ="center" width ="33%" >< img border ="0" src ="images/designer.gif" width ="250" height ="48" ></ td > < td align ="right" width ="33%" >< a href ="http://www.eclipse.org" target ="_top" >< img src ="images/EclipseBannerPic.jpg" border ="0" align ="right" width ="115" height ="50" ></ a ></ td > </ tr > </ table > </ td > </ tr > </ table > </ td > < td background ="images/right_border.gif" height ="100%" ></ td > </ tr >  < tr > < td >< img src ="images/left_bottom.gif" width ="2" height ="3" ></ td > < td background ="images/bottom_bottom.gif" width ="100%" ></ td > < td >< img src ="images/bottom_right.gif" width ="3" height ="3" ></ td > </ tr > </ table > </ body > </ html > 左上frame: < html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=windows-1252" > < meta name ="GENERATOR" content ="Microsoft FrontPage 6.0" > < meta name ="ProgId" content ="FrontPage.Editor.Document" > < style > /* Style for tree item text */ .t0i { font-family : Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif ; font-size : 11px ; color : #000000 ; background-color : #ffffff ; text-decoration : none ; font-weight : normal ; } /* Style for tree item image */ .t0im { border : 0px ; width : 19px ; height : 16px ; } </ style > < title > Designer Tree </ title > </ head > < body > < table border ="0" cellpadding ="0" cellspacing ="0" > < tr > < td > < script language ="JavaScript" src ="tree.js" ></ script > < script language ="JavaScript" src ="tree_items.js" ></ script > < script language ="JavaScript" src ="tree_tpl.js" ></ script > < script language ="JavaScript" > new tree (TREE_ITEMS, tree_tpl); for (i = 0 ; i < trees[ 0 ].a_children[ 0 ].a_children.length; i ++ ){ trees[ 0 ].a_children[ 0 ].a_children[i].open(i == 8 || i == 9 || i == 10 || i == 12 || i == 13 ); } trees[ 0 ].a_children[ 0 ].select(); </ script > </ td > </ tr > </ table > </ body > </ html > 左下frame: < html > < head > < title > WindowBuilder Pro </ title > < meta content ="text/html; charset=windows-1252" http-equiv ="Content-Type" > < link rel ="stylesheet" type ="text/css" href ="styles/styles.css" > </ head > < body bgcolor ="#FFFFFF" > < table > < tr > < td > </ td >< td > September 29, 2005: Version 4.1.1 latest build released (SWT visual inheritance, enhanced SWT GridLayout support, non-visual beans, custom SWT widgets, code generation enhancements, expose property, etc.) </ td > </ tr > < tr > < td > </ td >< td > July 13, 2005: Swing SpringLayout < a target ="_top" href ="demos/springLayout.html" > demo </ a > added. </ td > </ tr > < tr > < td > </ td >< td > July 9, 2005: Version 4.1.0 released (Eclipse 3.1 GA, new dockable flyout palette & property panes, property filtering, automatic variable naming, improved NLS support, improved custom widget support, improved Eclipse Forms support, new wizards, etc.) </ td > </ tr > < tr > < td > </ td >< td > July 4, 2005: New < a target ="content" href ="docs/introduction/new_and_noteworthy_410.html" > New & Noteworthy </ a > section added to the web site. See all of the features that have been added in recent releases in one place. </ td > </ tr > < tr > < td > </ td >< td > April 5, 2005: Version 4.0.0 released (Eclipse 3.1 M6, < a target ="content" href ="shots/jgoodies_formlayout.html" > JGoodies FormLayout support </ a > , SWT_AWT support, SWT Spinner, Link, TreeColumn, TreeItem & TableItem support, enhanced keyboard navigation, custom swing properties & editors, better custom widget support, code hiding, improved SWT FormLayout support, etc.) </ td > </ tr > < tr > < td > </ td >< td > March 29, 2005: Visual Inheritance < a target ="_top" href ="demos/VisualInheritance.html" > demo </ a > added. </ td > </ tr > < tr > < td > </ td >< td > March 26, 2005: Added < a target ="content" href ="tutorials.html" > Swing tutorials and articles </ a > . </ td > </ tr > < tr > < td > </ td >< td > March 20, 2005: New < a target ="content" href ="faq.html" > FAQ </ a > that answers many commonly asked questions. </ td > </ tr > < tr > < td > </ td >< td > December 24, 2004: Updated < a href ="docs/nls/nls.html" target ="content" > internationalization docs </ a > covering NLS tools and i18n features. </ td > </ tr > < tr > < td > </ td >< td > December 8, 2004: Version 3.0.0 released (Eclipse 3.1 M1/M2/M3, Eclipse Forms API , Swing visual inheritance , performance improvements, replicate width/height, arrow key support, improved custom widget support, event handler code gen, etc.) </ td > </ tr > < tr > < td > </ td >< td > December 6, 2004: Updated < a href ="docs/wizards/wizards.html" target ="content" > wizard docs </ a > covering all wizards </ td > </ tr > < tr > < td > </ td >< td > October 14, 2004: WindowBuilder / Designer was < a href ="http://www.devx.com/Java/Article/22186/0" > reviewed in DevX </ a > . </ td > </ tr > < tr > < td > </ td >< td > September 5, 2004: Updated < a href ="docs/preferences/preferences.html" target ="content" > preference documentation </ a > covering all preferences </ td > </ tr > < tr > < td > </ td >< td > August 19, 2004: Version 2.1.0 released (Eclipse 3.0 Final Release, FieldEditorPreferencePages, SpringLayout, enhanced NLS support, enhanced SWT ViewPart support, enhanced JFace Dialog support, plugin-relative images, etc.) </ td > </ tr > < tr > < td > </ td >< td > June 20, 2004: NLS Tools < a href ="demos/NLSExample.html" target ="_top" > demo </ a > added. </ td > </ tr > < tr > < td > </ td >< td > June 14, 2004: GridBagLayout Example < a href ="demos/GridBagLayout.html" target ="_top" > demo </ a > added. </ td > </ tr > < tr > < td > </ td >< td > June 12, 2004: Swing Example < a href ="demos/SwingExample.html" target ="_top" > demo </ a > added. </ td > </ tr > < tr > < td > </ td >< td > May 25, 2004: Version 2.0.0 released (New < a href ="http://www.swing-designer.com" target ="_top" > Swing Designer </ a > , Eclipse 3.0 M9/RC1 support, updated docs, enhanced NLS, new wizards, simplified menu creation, custom widget support, new license manager, etc.) </ td > </ tr > < tr > < td > </ td >< td > May 24, 2004: Updated < a href ="docs.html" target ="content" > documentation </ a > containing content courtesy of the < a href ="http://www.cs.umanitoba.ca/~eclipse/" target ="_top" > University of Manitoba </ a > </ td > </ tr > < tr > < td > </ td >< td > March 19, 2004: Version 1.2.4 released (new < a href ="shots/code_generation.html" target ="content" > code generation </ a > options, editor layout options, ViewPart wizards, CLabel gradients, Eclipse 3.0 M7 support, etc.) </ td > </ tr > < tr > < td > </ td >< td > February 16, 2004: New < a href ="http://www.cs.umanitoba.ca/~eclipse/12-SWTDesigner.pdf" target ="content" > comprehensive tutorial </ a > posted courtesy of the < a href ="http://www.cs.umanitoba.ca/~eclipse/" target ="_top" > University of Manitoba </ a > </ td > </ tr > < tr > < td > </ td >< td > January 31, 2004: Version 1.2.3 released (Morphing, Cut/Copy/Paste, StackLayout, ScrolledComposite, Canvas, StyledText, Extract Frame refactoring, Eclipse 3.0 M6 support, etc.) </ td > </ tr > < tr > < td > </ td >< td > January 10, 2004: Creating Custom Composites < a href ="demos/CustomComposites.html" target ="_top" > demo </ a > added. </ td > </ tr > < tr > < td > </ td >< td > December 15, 2003: Templates < a href ="demos/Templates.html" target ="_top" > demo </ a > added. </ td > </ tr > < tr > < td > </ td >< td > December 9, 2003: Version 1.2.2 is released (embedded frame support, performance enhancements, Eclipse help integration, Eclipse 3.0 M5 support, etc.) </ td > </ tr > < tr > < td > </ td >< td > November 25, 2003: FormLayout < a href ="demos/FormLayout.html" target ="_top" > demo </ a > added. JFace ApplicationWindow < a href ="demos/AppWindow.html" target ="_top" > demo </ a > added. </ td > </ tr > < tr > < td > </ td >< td > November 10, 2003: Version 1.2.1 released (FormLayout, multi-widget editing, custom composite creation, SWT project creation, platform undo/redo, etc.) </ td > </ tr > < tr > < td > </ td >< td > October 22, 2003: < a href ="shots/formlayout.html" target ="content" > FormLayout Preview </ a > pics released. </ td > </ tr > < tr > < td > </ td >< td > September 30, 2003: Version 1.2.0 released (direct edit, cool bar, externalized strings, font support, application window support). SWT Designer acquired by Instantiations [ < a href ="../PR/030930.htm" target ="content" > News </ a > | < a href ="../PR/SWT-Designer-QA.PDF" target ="content" > FAQ </ a > ] </ td > </ tr > < tr >< td > </ td >< td > September 10, 2003: Menu creation < a href ="demos/demo4.html" target ="_top" > demo </ a > added. </ td ></ tr > < tr >< td > </ td >< td > September 4, 2003: Version 1.12 is released (drag &drop , context menu support in control tree, test button and delete layout in context menu). </ td ></ tr > < tr >< td > </ td >< td > August 20, 2003: Version 1.11 is released (fixed bug with SashForm, compatibility with GEF 2.1.0, partial custom controls support). </ td ></ tr > < tr >< td > </ td >< td > August 19, 2003: Documentation updated (installation and project configuration added). </ td ></ tr > < tr >< td > </ td >< td > August 18, 2003: Version 1.10 is released (Linux + GTK2 support, may be also other non-Windows platforms). </ td ></ tr > < tr >< td > </ td >< td > August 17, 2003: Linux screenshot published. </ td ></ tr > < tr >< td > </ td >< td > August 15, 2003: Version 1.04 is released (absolute layout, ViewPart and ViewForm support). </ td ></ tr > < tr >< td > </ td >< td > August 12, 2003: Version 1.03 is released (more bug fixes). </ td ></ tr > < tr >< td > </ td >< td > August 11, 2003: Version 1.02 is released (bug fixes only). </ td ></ tr > < tr >< td > </ td >< td > August 7, 2003: JFace Wizard page creation < a href ="demos/demo3.html" target ="_top" > demo </ a > added. July 31, 2003: Fast event handlers access < a href ="demos/demo2.html" target ="_top" > demo </ a > added. </ td ></ tr > < tr >< td > </ td >< td > July 31, 2003: Version 1.01 is released. </ td ></ tr > </ table > </ body > </ html >

右下角frame:

< html > < head > < title > SWT Designer </ title > < meta content ="text/html; charset=windows-1252" http-equiv ="Content-Type" > < link rel ="stylesheet" type ="text/css" href ="styles/styles.css" > </ head > < body bgcolor ="#FFFFFF" > < table border ="0" cellpadding ="0" cellspacing ="0" width ="100%" > < tr > < td width ="21" height ="30" ></ td > < td width ="265" height ="30" ></ td > < td width ="20" height ="30" ></ td > < td colspan ="3" width ="858" height ="30" > < img border ="0" src ="../images/new1.gif" align ="absmiddle" width ="40" height ="28" > SWT Designer v4.1.0 Released! </ td > </ tr > < tr > < td width ="21" height ="297" ></ td > < td width ="265" height ="297" valign ="top" >< a href ="../windowbuilderpro/shots/main.html" target ="content" > < img src ="shots/designer_small.gif" border ="0" align ="top" width ="259" height ="175" ></ a > < a href ="../windowbuilder/shots/main.html" target ="content" > < form method ="post" action ="http://www.eclipseplugincentral.com/modules.php?op=modload&name=Web_Links&file=index" > < table align ="center" border ="0" cellspacing ="0" cellpadding ="0" > < tr >< td align ="center" colspan ="2" > If you like our product, please rate it a Eclipse Plugin Central </ td ></ a ></ tr > < tr >< td align ="center" > < a href ="http://www.eclipseplugincentral.com" target ="_top" > < img border ="0" src ="images/EPiC-logo-sm.jpg" align ="left" width ="122" height ="40" ></ a > </ td >< td align ="center" > < table border ="0" cellspacing ="0" cellpadding ="0" align ="center" > < tr >< td valign ="top" > < select name ="rating" > < option selected > 10 </ option > < option > 9 </ option > < option > 8 </ option > < option > 7 </ option > < option > 6 </ option > < option > 5 </ option > < option > 4 </ option > < option > 3 </ option > < option > 2 </ option > < option > 1 </ option > </ select > </ td >< td valign ="top" > < input type ="hidden" name ="ratinglid" value ="15" >< input type ="hidden" name ="ratinguser" value ="outside" >< input type ="hidden" name ="req" value ="addrating" >< input type ="submit" value ="Vote!" > </ td ></ tr ></ table > </ td ></ tr > < tr >< td align ="center" > </ td >< td align ="center" > </ td ></ tr ></ table > </ form > < img border ="0" src ="images/wb-box.gif" width ="113" height ="130" > </ td > < td width ="20" height ="297" ></ td > < td colspan ="3" width ="858" height ="297" valign ="top" > Major new release includes support for new dockable flyout palette & property panes, property filtering, automatic variable naming, improved NLS support, improved Eclipse Forms support, new wizards, Eclipse 3.1 GA support plus many other new features. < ul > < li > Support for Eclipse 3.1 GA </ li > < li > New < a target ="content" href ="../windowbuilderpro/docs/preferences/preferences_editor_layout.html" > Dockable Flyout Palette & Property Editor </ a >< ul > < li > Dock the Property Editor & Palette to different sides of the design view </ li > < li > Palette & Property Editor may be easily collapsed and expanded </ li > < li > Palette & Property Editor available as separate views </ li > </ ul ></ li > < li > Added new < a target ="content" href ="../windowbuilderpro/docs/preferences/preferences_property_manager.html" > Property Manager </ a >< ul > < li > Important properties are highlighted in bold and sorted to the top of the list </ li > < li > Hidden properties are removed from the property list </ li > < li > New preference page for configuring properties </ li > </ ul ></ li > < li > Automatically < a target ="content" href ="../windowbuilderpro/docs/preferences/preferences_variable_names.html" > rename variables </ a > based on text property < ul > < li > Rename always, never or only for defaults </ li > < li > Specify renaming patterns using text, classname and acronym </ li > < li > New preference page for configuring variable names </ li > </ ul ></ li > < li > Enhanced < a target ="content" href ="../windowbuilderpro/docs/nls/nls.html" > NLS </ a > support < ul > < li > Added flag icons for all locales </ li > < li > Support for ResourceBundle.getBundle( " name " ).getString( " key " ) </ li > </ ul ></ li > < li > Enhanced SWT support < ul > < li > Support for setting SWT tab order within a container </ li > < li > Added BIDI (RIGHT_TO_LEFT) support for SWT GridLayout, FlowLayout and RowLayout </ li > < li > Added an Eclipse Forms Composite wizard </ li > < li > Added an SWT Dialog wizard </ li > < li > Support for direct edit/double click for ToolItem </ li > < li > Enhanced support for FormLayout </ li > < li > Support for drop down toolbar items and menus </ li > < li > Support for ColorRegistry & FontRegistry </ li > < li > Support for Eclipse 3.1 GridLayout enhancements </ li > < li > Added tooltips for FormLayout popup figures </ li > </ ul ></ li > < li > Enhanced JFace & RCP support < ul > < li > Support for adding existing actions for ApplicationWindow / ViewPart </ li > < li > Enhanced display of ViewParts and EditorParts </ li > </ ul ></ li > < li > Editor & Property Pane enhancements < ul > < li > New toolbar options to evenly distribute controls </ li > < li > Keyboard navigation for menus </ li > < li > New Rename command to rename multiple widgets at once </ li > < li > New Set Layout command on the context menu </ li > < li > New Autosize widget command for null layout </ li > < li > New Change Style command on the context menu </ li > </ ul ></ li > </ ul > </ td > </ tr > < tr > < td width ="21" ></ td > < td width ="265" valign ="top" > " I had forgotten just how much fun and easy it can be building Java GUIs. " --Sally Rich, RSS Solutions </ td > < td width ="20" ></ td > < td colspan ="3" width ="858" >< a href ="http://www.devx.com/Java/Article/22186/0" target ="_blank" >< img src ="../images/devx-s.gif" alt ="DevX" border ="0" align ="absmiddle" width ="48" height ="45" > Read a review of WindowBuilder on DevX </ a > </ td > </ tr > < tr > < td width ="21" height ="46" ></ td > < td width ="755" colspan ="3" rowspan ="2" height ="322" > < img border ="0" src ="images/WB-32x32.gif" align ="absmiddle" width ="32" height ="32" > What is Designer? Designer is a powerful and easy to use two-way Java GUI designer based onEclipse SWT technology. It is very easy to create Java GUI applications withoutspending a lot of time writing code to display simple forms. With SWT Designer you cancreate complicated windows in minutes. Use the visual designer and Java code will begenerated for you. You can easily add controls using drag-and-drop, add event handlers toyour controls, change various properties of controls using a property editor and muchmore. How does it work? Designer is built as a plugin to < a href ="http://www.eclipse.org" target ="_blank" > Eclipse </ a > and the variousWebSphere Studio IDEs (WSSD, WSAD, WSED, etc.). The plugin builds an abstractsyntax tree (AST) to navigate the source code and uses < a href ="http://www.eclipse.org/gef/" target ="_blank" > GEF </ a > to display and managethe visual presentation. Using WYSIWYG layout tools, you don't need to write any lines of javacode - the code will be generated for you by the designer. You can easily add any controlto a composite by using drag-and-drop, add an event handler to your controls,change various properties of controls using property editors and < a href ="../windowbuilder/features.html" target ="content" > much more </ a > . Generated code doesn't require anyadditional non-SWT library to compile and run: all of the generated code can be usedwithout having Designer installed. Designer can read and write almost any formatand reverse-engineer most hand-written Java GUI code. It also supports free formcode editing (make changes anywherenot just in special areas) and mostuser refactorings (you can move, rename and subdivide methods without aproblem). Download We offer a free < a href ="download.html" target ="content" > trial </ a > version of SWT Designer or can < a href ="order.html" target ="content" > purchase alicense </ a > of Designer. < a href ="http://www.digibuy.com/cgi-bin/order.html?Instantiatio+106381649216" > < img src ="../codepro/images/buyitnow.gif" alt ="Buy now" border ="0" align ="absmiddle" width ="68" height ="15" ></ a > Product Brochure < div align ="left" > < table border ="0" cellpadding ="0" cellspacing ="0" width ="349" > < tr > < td width ="22" ></ td > < td width ="100" >< a href ="../windowbuilderpro/WindowBuilderLowRes.pdf" >< img border ="0" src ="images/wb-box.gif" width ="113" height ="130" ></ a ></ td > < td width ="221" > < a href ="../windowbuilderpro/WindowBuilder.pdf" >< img src ="../images/pdf-sm.gif" alt ="PDF" align ="absmiddle" border ="0" width ="17" height ="17" > </ a >< a href ="../windowbuilderpro/WindowBuilder.pdf" > HiRes(4.6MB) </ a > < a href ="../windowbuilderpro/WindowBuilderLowRes.pdf" >< img src ="../images/pdf-sm.gif" alt ="PDF" align ="absmiddle" border ="0" width ="17" height ="17" > </ a >< a href ="../windowbuilderpro/WindowBuilderLowRes.pdf" > LowRes(0.7MB) </ a > </ td > </ tr > </ table > </ div > </ td > < td rowspan ="2" width ="7" height ="322" ></ td > < td width ="300" height ="40" > < a href ="../codepro/default.htm" target ="_top" > < img src ="../codepro/images/32x32codepro.gif" alt ="CodePro Studio" border ="0" align ="absmiddle" width ="32" height ="32" > Ask us about CodePro </ a > </ td > </ tr > < tr > < td width ="21" height ="276" ></ td > < td width ="300" valign ="top" height ="276" > < ul > < li > 700 + Code Audit Rules w/ QuickFix </ li > < li > 50+ Code Metrics w/ Drilldown </ li > < li > Powerful Dependency Analyzer </ li > < li > JUnit Test Case Generation & Code Coverage </ li > < li > Design Patterns & Code Generators </ li > < li > Automated Javadoc Repair </ li > < li > Integrated Spell Checker </ li > < li > Build & Deployment Automation </ li > < li > 100's of Productivity Enhancements </ li > </ ul > < a href ="../codepro/codeaudit.htm" target ="_top" > < img src ="../codepro/images/auditrulecount.gif" border ="0" align ="center" width ="91" height ="51" ></ a ></ td > </ tr > < tr > < td width ="1170" colspan ="6" height ="21" > </ td > </ tr > < tr > < td width ="1170" colspan ="6" height ="40" > </ td > </ tr > < tr > < td width ="21" height ="67" ></ td > < td width ="265" height ="67" valign ="top" > </ td > < td width ="20" height ="67" valign ="top" ></ td > < td width ="466" height ="67" valign ="top" > </ td > < td width ="7" height ="67" ></ td > < td width ="325" height ="67" ></ td > </ tr > </ table > </ body > </ html >

专利

最新回复(0)