jDesktopDemo超炫桌面

<div style="width: 100%; text-align: center"><b style="color: #4697fc; font-size: 12px;">Hello world in jDesktop</b></div><br /><br /> <p>You can find finished 'Hello world' app in helloWorld.rar archive.</p><br /> <p>The idea here is to create window that will be started when your site loads. In your window you will crate a button and you will write code that will write 'Hello world' below this button when you click on it.</p> <p>You will use all features of jDesktop, like js and css dependancies and html loaded dynamically.<br /><br /> <p>Ok, first create a folder somewhere on your harddrive that will be your site root folder.</p> <p>Create index.html file and put it in your root folder. Here is html code for index.html file:</p><br /><br /> <div style="width: 90%;border: solid 1px #ccc; padding: 5px;"> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"&gt;<br /> &lt;head&gt;<br /> &nbsp;&nbsp;&lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;<br /> &nbsp;&nbsp;&lt;title&gt;jDesktop 1.0 - Hello world&lt;/title&gt;<br /> &nbsp;&nbsp;&lt;script type="text/javascript" src="js/jquery-1.4.2.min.js"&gt;&lt;/script&gt;<br /> &nbsp;&nbsp;&lt;script type="text/javascript" src="js/ensure.min.js"&gt;&lt;/script&gt;<br /> &nbsp;&nbsp;&lt;script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"&gt;&lt;/script&gt;<br /> &nbsp;&nbsp;&lt;script type="text/javascript" src="js/jquery.transform-0.6.2.min.js"&gt;&lt;/script&gt;<br /> &nbsp;&nbsp;&lt;script type="text/javascript" src="js/jquery.pulse.min.js"&gt;&lt;/script&gt;<br /> &nbsp;&nbsp;&lt;script type="text/javascript" src="js/jDesktop.1.0.min.js"&gt;&lt;/script&gt;<br /> &nbsp;&nbsp;&lt;script type="text/javascript" src="js/system.js"&gt;&lt;/script&gt;<br /><br /> &nbsp;&nbsp;&lt;link rel="stylesheet" href="css/jwindow.css" type="text/css" media="screen" /&gt;<br /> &nbsp;&nbsp;&lt;link rel="stylesheet" href="css/jdesktop.css" type="text/css" media="screen" /&gt;<br /><br /> &lt;/head&gt;<br /> &lt;body&gt;<br /> &nbsp;&nbsp;&lt;div id="topbar"&gt;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ul id="tcontainer"&gt;&lt;/ul&gt;<br /> &nbsp;&nbsp;&lt;/div&gt;<br /> &nbsp;&nbsp;&lt;div id="main"&gt;<br /> &nbsp;&nbsp;&lt;/div&gt;<br /> &nbsp;&nbsp;&lt;div id="loadingcontainer"&gt;<br /> &nbsp;&nbsp;&lt;/div&gt;<br /> &lt;/body&gt;<br /> &lt;/html&gt; </div><br /><br /> <p>Create js folder in your root folder and put all .js files needed in it. Copy css folder from jDestkop and paste it in your root folder.</p> <p>Create system.js file and put it in js folder.</p> <p>Now create folder named "apps" in your root folder and then inside of it create folder 'helloWorld' for your 'Hello world' application.</p> <p>Now, lets write your app:</p> <p>In helloWorld folder create startup.js file. Here you will write code that will construct your app window like this:</p><br /> <div style="width: 90%;border: solid 1px #ccc; padding: 5px;"> <p>function StartHelloWorld(){</p> <p>&nbsp;&nbsp;jDesktop.StartApp(</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;"myHelloWorldApp", /* this is ID of your application/window */</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;"My hello world application", /* this is title of your app that will be shown in title bar of your window */</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;"apps/helloWorld/appLogic.js", /* this is js file that your application depends on. It contains your app logic */</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;"apps/helloWorld/style.css", /* this is css file that your application depends on. */</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;"apps/helloWorld/helloWorld.html", /* this is path to .html file of your app */</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;{</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 400, /* here you define width for your window */</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 300, /* height of window */</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;closeConfirm: true, /* user will have to confirm that he wants to close window */</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minimizable: true /* window will be miminizable */ <p>&nbsp;&nbsp;&nbsp;&nbsp;},</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;function() { AppLogicSetup(); }&nbsp;/* this is function that contains your app logic. It is defined in appLogic.js file. */</p> <p>&nbsp;&nbsp;);</p> <p>}</p> </div><br /><br /> <p>Now create helloWorld.html file and put it in helloWorld folder. Here you will write html code for a button and a label:</p><br /> <div style="width: 90%;border: solid 1px #ccc; padding: 5px;"> &lt;button id="btnHelloWorld" class="button"&gt;&lt;span&gt;&lt;span&gt;Click me&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;br /&gt;&lt;br /&gt;<br /> &lt;span id="lblHelloWorld"&gt;&lt;/span&gt; </div><br /> <p>Thats it for html.</p><br /><br /> <p>Now create appLogic.js in helloWorld folder. This file will contain your application logic. In this file you will write function named 'AppLogicSetup()' that will be called by your StartHelloWorld() function as described above. Here you will write code that will bind click event to a button that you have crated in helloWorld.html file of your app. Clicking on this button will write 'Hello world' text in label under button.</p><br /> <div style="width: 90%; border: solid 1px #ccc; padding: 5px;"> <p>function AppLogicSetup(){</p> <p>&nbsp;&nbsp;$('#btnHelloWorld').click(function(){</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;$('#lblHelloWorld').text('Hello world !');</p> <p>&nbsp;&nbsp;});</p> <p>}</p> </div><br /> <p>Now create style.css file and put it in helloWorld folder. Here you will define text-color and size for label that will hold 'Hello world!' text:</p><br /> <div style="width: 90%; border: solid 1px #ccc; padding: 5px"> #lblHelloWorld { color: #ff0000; font-size: 14px; font-weight: bold; display: block; padding: 10px; } </div><br /> <p>And finaly open up system.js file that you have created. Here you will write code that will load your application when you open index.html file in your browser:</p><br /> <div style="width: 90%; border: solid 1px #ccc; padding: 5px;"> <p>function LoadHelloWorld(){</p> <p>&nbsp;&nbsp;jDesktop.LoadApp(</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;"apps/helloWorld/startup.js", /* this is path to startup.js file of your application that contains StartHelloWorld() function */</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;StartHelloWorld /* when startup.js file is loaded, this function is called and your application starts */</p> <p>&nbsp;&nbsp;);</p> <p>}</p><br /><br /> <p>$(document).ready(function(){</p> <p>&nbsp;&nbsp;LoadHelloWorld();&nbsp;&nbsp;/* when document is ready, this function is called to load and start your app */</p> <p>});</p> </div><br /><br /> <p>And thats it !</p><br /><br /> <p><button type="button" onclick="LoadHelloWorld()"><span><span>Start Hello World</span></span></button></p><br /><br /><br /> <p>Maybe this looks too much for a simple 'Hello world' but you can use same pattern for complex applications as well. Check out fractalbran.net, every application on my site is written like this.</p> <p>If this all is too confusing, just take a look in helloWorld.rar archive and study it. You will find it is very easy to make applications in jDesktop.<p><br /><br /> <p>If you have any questions you can contact me on <a href="http://www.fractalbrain.net">fractalbrain.net</a></p> <p>Enjoy !</p><br /><br /><br />