Author: keith Date: Thu Feb 12 06:05:21 2009 New Revision: 30733 URL: http://wso2.org/svn/browse/wso2?view=rev&revision=30733
Log: Fix for Author: channa Date: Thu Sep 25 23:23:57 2008 New Revision: 22104 URL: http://wso2.org/svn/browse/wso2?view=rev&revision=22104 Log: Adding a quick start to the mashup documentation, to be shipped with the distribution. MASHUP-480. Added: branches/mashup/java/1.5/java/xdocs/images/console_out.png (contents, props changed) branches/mashup/java/1.5/java/xdocs/images/create_new.png (contents, props changed) branches/mashup/java/1.5/java/xdocs/images/mash_editor_hellow.png (contents, props changed) branches/mashup/java/1.5/java/xdocs/images/mooshup_self_reg.png (contents, props changed) branches/mashup/java/1.5/java/xdocs/images/my_mashups_hellow.png (contents, props changed) branches/mashup/java/1.5/java/xdocs/images/tray_ico.JPG (contents, props changed) branches/mashup/java/1.5/java/xdocs/quickstart.html Added: branches/mashup/java/1.5/java/xdocs/images/console_out.png URL: http://wso2.org/svn/browse/wso2/branches/mashup/java/1.5/java/xdocs/images/console_out.png?pathrev=30733 ============================================================================== Binary file. No diff available. Added: branches/mashup/java/1.5/java/xdocs/images/create_new.png URL: http://wso2.org/svn/browse/wso2/branches/mashup/java/1.5/java/xdocs/images/create_new.png?pathrev=30733 ============================================================================== Binary file. No diff available. Added: branches/mashup/java/1.5/java/xdocs/images/mash_editor_hellow.png URL: http://wso2.org/svn/browse/wso2/branches/mashup/java/1.5/java/xdocs/images/mash_editor_hellow.png?pathrev=30733 ============================================================================== Binary file. No diff available. Added: branches/mashup/java/1.5/java/xdocs/images/mooshup_self_reg.png URL: http://wso2.org/svn/browse/wso2/branches/mashup/java/1.5/java/xdocs/images/mooshup_self_reg.png?pathrev=30733 ============================================================================== Binary file. No diff available. Added: branches/mashup/java/1.5/java/xdocs/images/my_mashups_hellow.png URL: http://wso2.org/svn/browse/wso2/branches/mashup/java/1.5/java/xdocs/images/my_mashups_hellow.png?pathrev=30733 ============================================================================== Binary file. No diff available. Added: branches/mashup/java/1.5/java/xdocs/images/tray_ico.JPG URL: http://wso2.org/svn/browse/wso2/branches/mashup/java/1.5/java/xdocs/images/tray_ico.JPG?pathrev=30733 ============================================================================== Binary file. No diff available. Added: branches/mashup/java/1.5/java/xdocs/quickstart.html URL: http://wso2.org/svn/browse/wso2/branches/mashup/java/1.5/java/xdocs/quickstart.html?pathrev=30733 ============================================================================== --- (empty file) +++ branches/mashup/java/1.5/java/xdocs/quickstart.html Thu Feb 12 06:05:21 2009 @@ -0,0 +1,291 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> +<html> +<head> + <!-- + ~ Copyright 2005-2008 WSO2, Inc. (http://wso2.com) + ~ + ~ Licensed under the Apache License, Version 2.0 (the "License"); + ~ you may not use this file except in compliance with the License. + ~ You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + --> + <meta http-equiv="content-type" content=""> + <title>Quick Start Guide</title> + <link href="css/mashup-docs.css" rel="stylesheet" type="text/css" + media="all"> +</head> + +<body style="direction: ltr;"> + +<div id="main-content"> +<h1>Quick Start Guide</h1> + +<p>The WSO2 Mashup Server allows you to acquire web based information from a +variety of sources such as web services, web pages, databases or feeds, +combine it in interesting and useful ways before exposing the result again as +a web service or page, feed or a Google gadget. Your Mashup can even interact +with users via e-mails, instant messages and desktop alerts. This guide and +access to a Mashup Server should be all you need to start creating your own +personalized web services in minutes.</p> + +<h2>Getting Started</h2> + +<p>Since you may be viewing this document on-line or in a local installation, +let me stat off by stating that you can either setup a WSO2 Mashup Server +locally or register yourself at our <a href="http://mooshup.com";>community +site</a> and start writing your Mashups.</p> + +<h3>Setting Up Locally</h3> + +<p>If you’ve already got <a +href="http://java.sun.com/javase/downloads/index.jsp";>Java</a> (Version 1.5 +preferred) installed on your PC and an environment variable pointing to your +<a href="https://localhost:7443/docs/setting-java-home.html";>Java Home</a> +defined, simply download the <a +href="http://dist.wso2.org/products/mashup/wso2-mashup-server-1.5.1.zip";>Binary +Distribution</a> of the Mashup Server, unzip it in a local folder and run the +wso2mashup batch file (on Windows) or shell script (on Linux) found in the +'bin' directory to get it running. </p> + +<p>If you're on Windows, you can download and run the <a +href="http://dist.wso2.org/products/mashup/wso2-mashup-server-1.5.1-setup.exe";>Installer</a> +instead, which lets you click through a wizard, to setup and run the server +as a Windows Service. You should do fine just clicking on next at each step, +going with the default options.</p> + +<h3>Confirming that the Server is Up</h3> + +<p>If you used the Windows Installer, you will see a new icon in the system +tray that will indicate server status. </p> + +<p><img alt="Tray Icon" src="images/tray_ico.JPG" width="22" height="19"></p> + +<p>If you unzipped a distribution, the console or log file will show you the +progress of the server startup.</p> + +<p><img alt="Console" src="images/console_out.png" width="1291" +height="464"></p> + +<p>Once the server has started, open up the admin console on your browser. +You can use the ‘Administration’ right-click-menu item of the +tray icon if you used the Windows Installer or access <a +href="http://localhost:7762/";>localhost</a> on the default http or https port +(typically 7762 and 7443) with IE or Firefox. You will see the provisioning +screen below on first startup. </p> + +<p><img alt="Provisioning" src="images/provisioning.png" width="1006" +height="601"></p> + +<p>To setup the primary account, just type in a user name and preferably an +e-mail ID, along with a 5 or more character password and click 'Create +Account'.</p> + +<h3>Registering on Mooshup.com</h3> + +<p>Use the 'Sign Up' link on the home page to access the self registration +page, where you can create your own account and complete the process by +clicking on the verification link mailed to the e-mail ID you specify.</p> + +<p><img alt="Self Reg" src="images/mooshup_self_reg.png" width="70%"></p> + +<h2>Creating Your First Mashup</h2> + +<p>Regardless of whether you're using the community site or your local +system, once you login, you should see a welcome page with the options shown +below.</p> + +<p><img alt="Home Page" src="images/mashup-ui.png" width="1002" +height="885"></p> + +<p>Use the ‘Create a new mashup’ option of the 'Management tasks' +pane to create your first mashup. You will be prompted for a name, and when +you click 'create' a basic mashup will be created for you and displayed in +the Mashup editor.</p> + +<p><img alt="Prompt for Name" src="images/create_new.png" width="365" +height="136"></p> + +<h3>Saving and Testing the Mashup</h3> + +<p>The auto generated Mashup is a fully functional JavaScript service. Like +any other 'hello world' program it does nothing useful, but proves that you +have everything in place to write a Mashup that can. </p> + +<p><img alt="Hello World in Editor" src="images/mash_editor_hellow.png" +width="1016" height="687"></p> + +<p>Use the 'Save Changes' button and you will get back to the welcome page, +but with your newly created Mashup displayed under 'My Mashups'. </p> + +<p><img alt="My Mashups" src="images/my_mashups_hellow.png" width="686" +height="96"></p> + +<p>Clicking on the name of the Mashup here will take you to the Mashup +details page.</p> + +<p><img alt="Mashup Details" src="images/helloworld_listing.png" width="1002" +height="996"></p> + +<p>Here you can start, stop, edit or delete the service using the options in +the 'Management Tasks' pane. More importantly, you can try out your Service's +single operation using the 'Try the Service' link.</p> + +<p><img alt="TryIt HelloW" src="images/helloworld_tryit_deft.png" +height="300" width="420"></p> + +<p>If you get a response from the service when you try it, pat yourself on +the back, you've written your first mashup!</p> + +<h2>Adding the Interesting Bits</h2> + +<p>Now that you've seen how easy it is to write a service, you can start on +getting it to actually do something. The next few sections will show you how +to perform some actions that you can use as building blocks when creating +your own mashups.</p> +<br> + + +<h3>Scraping a Web Page</h3> + +<p>While instructions for using the Scraper host object are included in the +user guide, this section shows you how to create a configuration file using +the 'Scraping Assistant', which is a tool that will help you write a scraper +configuration. </p> + +<p>The basic steps you need to follow to create a configuration that will get +the contents of a web page as an XML document would be:</p> + +<p>1) Open up the Scraper Tool, which will give you an empty config which we +will fill up.</p> + +<p><img alt="Scraping Assistant" +src="images/Scraping_Assistant_start.png"></p> + +<p>1) Add a line to retrieve a page available at a given URL, using the 'Add +HTTP request' menu option, which will insert the single line below into the +config:</p> + +<p><http url="url-to-fetch" method="post"/></p> + +<p>Replace the url-to-fetch with the URL of the page you want to fetch.</p> + +<p>2) Add instructions to convert this HTML to XML, by selecting the previous +line and the using 'Convert HTML to XML' menu option, which will surrounding +the above statement with this pair of tags:</p> + +<p><html-to-xml outputtype="pretty"></p> + +<p></html-to-xml></p> + +<p>3) Add instructions to put the result into a variable, which you can +access from your JavaScript mashup, by using the 'Convert to Variable' menu +option with the existing code block selected. This will surround the existing +code with the following:</p> + +<p><var-def name="variable_1"></p> + +<p></var-def></p> + +<p>Optionally, use a variable name that has some semantic value, to arrive at +a completed configuration as shown below.</p> + +<p><img alt="Finish" src="images/ScrapingAssistant_finish.png" width="513" +height="150"></p> + +<p>4) Now you have a scraper configuration that you can use in a mashup. +Paste it into your script and use it as shown below:</p> + +<p class="Code">function getString(){<br> +var config =<br> +<config><br> +<var-def name="response"><br> +<html-to-xml outputtype="pretty"><br> +<http url="http://wso2.org/projects/mashup"; method="post"/><br> +</html-to-xml><br> +</var-def><br> +</config><br> +var scraper = new Scraper(config);<br> +var result = scraper.response;<br> +return result;<br> +}</p> + +<p>Use 'tryit to' test the operation; you should see the page content +displayed as the response. </p> + +<p><img alt="Result" src="images/Scraping_Assistant_result.png" width="1524" +height="271"></p> + +<p>You can now modify your configuration to filter out the information you +don't need from this page, or use logic within your mashup itself to extract +the bits you need.</p> +<br> + + +<h3>Accessing an External Web Service</h3> + +<p>The easiest way to access a web service hosted externally would be to +generate a stub for this service and include it in your mashup.</p> + +<p>1) Open up the 'JavaScript Stub Generator', paste the URL to the WSDL of +the service you want to access in the correct input field, select the +environment you will use it in (E4X) and select 'Generate from URL' to have +the stub code generated for you as shown below.</p> + +<p><img alt="Stub Generator" src="images/Javascript_Stub_Generator.png" +width="1017" height="778"></p> + +<p>2) Create a new Mashup, say 'Currency' and save it. You will find a +Currency.resources directory created in your personal scripts directory. +Create a new text file here for the stub and paste the generated code in it. +I've called it 'convertor.stub.js'.</p> + +<p>3) Edit the mashup and include an import statement to bring in your stub. +</p> + +<p><img alt="Source" src="images/Currency_source.png" width="611" +height="167"></p> + +<p>4) Call the Service.operation using the stub, to get the result shown +below:</p> + +<p><img alt="Tryit" src="images/Currency_service_tryit.png" width="705" +height="148"></p> +<br> + + +<h3>Reading a Feed</h3> + +<p>1) With the three lines of code shown below, you can get all the entries +of a given feed into an array. </p> + +<p class="Code">var feedReader = new FeedReader();<br> +var myFeed = feedReader.get(“feed-url”); <br> +var feedEntries = myFeed.getEntries();<br> +</p> + +<p>2) This can then be processed in a simple for-next loop as shown below.</p> + +<p><img alt="Feed Edit" src="images/Editing_FeedDemo.png" width="480" +height="315"></p> + +<p>3) It will return the contents of the feed as a string, as shown when +tried below.</p> + +<p><img alt="Try Feed" src="images/TryIt_FeedDemo.png" width="1535" +height="250">That concludes the 'Quick Start Guide'. Please refer to mashup +articles on the <a href="https://wso2.org/taxonomy/term/303/all";>Oxygen Tank</a>, in addition to the samples and documentation +included with the product, for more on creating Mashups.</p> +</div> + +<div id="main-content1"> +<p>© 2007-2008 WSO2 Inc.</p> +</div> +</body> +</html> _______________________________________________ Mashup-dev mailing list [email protected] https://wso2.org/cgi-bin/mailman/listinfo/mashup-dev
