Package widgets using Adobe Widget Browser

Last Update:2013-12-26 Source: Internet

Author: User

Tags dreamweaver website

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The Widget browser is an Adobe AIR application that allows you to preview and configure widgets on an image interface. The term widget has many definitions, but in this article, a widget refers to a combination of small pieces of HTML, CSS, and JavaScript code that can work together to form a complex web page component. Foldable controls (Accordion), option card panel tabbed panel), and image Lightbox controls (image lightbox) are examples of widgets.

Directory:

Create an OpenAjax Metadata File
Create widget Project
Package and test Widgets
Add attribute
Publish widgets on Adobe Exchange
Next reading

Requirements

The following products are required:

Dreamweaver CS5

(Download the trial version)

Widget Browser

Download *
Learn more link *

Example file:

WidgetTutorial.zip

Prerequisites:

Creating widgets requires knowledge of JavaScript and XML.

Create an openajax metadata File

First, you need to create or find a widget that can run and you want to package it. Many JavaScript widgets have flexible licensing policies that allow you to use them in this way. Check the permissions of widgets.

Once you have your widget, you can start to create the OpenAjax Metadata OAM file, which is an XML file containing all information about the widget. The file format follows a standard describing JavaScript widgets, which is developed using OpenAjax Alliance. This file contains links to the following content:

Build JavaScript JS and CSS files for widgets
JavaScript, HTML, and CSS code to be inserted on the widget's HTML page.
Any attributes that can be customized by the user

For this example, I will first create the jQuery UI Button. The ZIP file included in this article contains a jQueryUIButton.html file, which has an example of a jQuery UI Button widget that can be run. If you want to package the widget, you need to create an OpenAjax Metafile that points to all the files required by the jQuery UI Button. This file also includes the code and attributes required for users to create their own pre-configured content for widgets in the Widget Browser and insert widgets on the Dreamweaver website.

In jQueryUIButton.html, you can see a <div> tag, which is an HTML Tag that can be converted into a button, and a JavaScript constructor, it specifies the id of the div to be converted to the jQuery UI Button.

Note: In jQuery, $ is the simplified symbol of jQuery. If you need to avoid conflicts with other JavaScript frameworks, you can use jQuery instead of $.

The following code searches for the <div> tag using the id set to myButton and calls the button function, which converts it to a jQuery UI button.

 
 
  
  <body> 
  
    <script type="text/javascript"> 
  
    $(function() { 
  
            $( "#myButton").button(); 
  
          }); 
  
    </script> 
  
  <p>Push Button</p> 
  
    <div id="myButton">div</div> 
  
   
  
  </body>

Follow these steps to create OpenAjax Metafile for the sample widget:

Set the id attribute of the widget to a unique ID.

It is a good habit to use the Sample Page location on the web. The name attribute defines the widget name, while the version attribute defines the widget version.

Add the widget description in the <description> label as follows. You can format the description using the HTML Tag:

  
  
   
   <description type="text/html" > 
   
       <![CDATA[ 
   
       <p>jQuery UI Push Button enhances standard form elements like button, input of type submit or reset or anchors to themable buttons with appropiate mouseover and active styles.</p> 
   
      ]]> 
   
   </description>

Add the <javascript> and <content> labels to specify the JavaScript constructor and HTML tag of the inserted code body. For example:

  
  
   
   <javascript location="beforeContent"> 
   
   <![CDATA[  
   
           $(function() { 
   
               $( "#myButton").button(); 
   
           });     
   
   ]]> 
   
   </javascript> 
   
    
   
   <content> 
   
   <![CDATA[     
   
           Push Button: <div id="myButton">Push Me</div> 
   
   ]]> 
   
    
   
   </content>

The location = "beforeContent" attribute of the javascript tag indicates that the JavaScript block should be displayed before the HTML Tag.

Now you can add references to JavaScript and CSS files. If you look at the header of the sample widget HTML file, you will see that the JavaScript file has jQuery links, jQuery UI JavaScript files, and basic jQuery UI Cascading Style Sheet files.

Add a <requires> label and the following three <require> labels to the OAM file to ensure that these links are added to the file header.

 
 
  
  <requires> 
  
      <require type="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /> 
  
      <require type="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" /> 
  
      <require type="css" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" /> 
  
  </requires>

For more information about the sample XML created by using the above steps, see the jquerypushbutton#oam.xml sample file.

Note: When you insert widgets, you can also provide local copies of JS and CSS files and copy them to your website, if you do not want to reference them through the Google API link on the web. For examples of local references to these files, see the jQueryPushButtonLocal_oam.xml sample file.

Create WIDGET Project

After installing and opening the Adobe Widget browser, the first thing you need to do is to start the widget project.

Package and test Widgets

It is very easy to package a widget into a ZIP file:

Import Widgets

After packaging widgets, You can import them and use Dreamweaver to insert them into a webpage.

Insert widgets using Dreamweaver

After the Widget is added to My Widgets, When you click the Widget in the Insert panel or Insert menu, it will be displayed in Dreamweaver.

Dreamweaver copies all local files to your website, displays a dialog box listing all files to be copied to your website, and arranges relevant links so that the URL can be correctly mapped.

Add attribute

You have successfully created a widget package and verified that you can use Dreamweaver to insert it to your webpage. The next step is to allow your users to customize the widget's appearance and behavior, and then create their own border form. First, you need to determine the attributes you want to customize. These attributes may include JavaScript parameters that will be passed to the widget constructor to change widget behavior. You may also want to allow users to override the default CSS style to change the widget's appearance.

You can define properties in the OAM file to display UI controls in the Adobe Widget browser, and you can use them to modify CSS or JavaScript code on the page.

When you click Configure in the lower-left corner of the preset list in the Preview column, the control is created in the Adobe Widget browser. See figure 3.

<Title> text is used as a label control. Datatype and format can define the type of the control. The defaultValue attribute can be used to define default values.

When you move the mouse over a control, the text of the <description> label is displayed as a tooltip.

Figure 3. Configure the Border Width and background color of the jQuery UI Push Button widget

Now, you can add css code in the <dw: CSS> label. When the control value is updated, it will change the widget's appearance. The name attribute in the property tag can be used to replace variables with the value selected by the user from the control.

Add the following code to the OAM file:

  
  
   
   <dw:css> 
   
       <![CDATA[ 
   
           .ui-button { 
   
               border-width: @@borderWidth@@; 
   
           } 
   
        
   
       .ui-state-default { 
   
               background-color: @@defaultBackgroundColor@@; 
   
               background-image: none; 
   
           }     
   
   ]]> 
   
   </dw:css>

Save your changes.

For the example XML created by using the above steps, see the jQueryPushButton2_oam.xml sample file.

@ PropertyName @ symbol indicates that the value of the corresponding control will be replaced here. You can use the jQuery button code to dynamically Add the ui-button class at runtime. In this example, you will overwrite the default style of the external style table, because the rule in the Document Header has a higher priority than the rule in the text default style table.

Note: You need to overwrite the background image defined in the external CSS file and change it to the background color.

Note: It is usually useful to use the Live Code option in Dreamweaver to verify widge so that you can see the style of JavaScript Code application. If you have problems applying CSS rules to get your expected style, the CSS Styles Panel provides you with help information by displaying the rules of the application and CSS cascade operations.

Use unique ID

To insert more than one widget into one page, you should associate a unique ID with each widget. You can add a <property> element to the <properties> section with format = "id" to specify a unique ID, in this example, specify the property name as _ WID _ In the JavaScript transform function or HTML Tag, and ensure that the corresponding id can be specified for any CSS style, in this way, you can apply different CSS styles for Multiple widgets on the same page.

Save your changes.

For more information about the sample XML created using the above steps, see the jQueryPushButton3_oam.xml sample file.

Use the updated OAM file to create a new widget package and import it to the Widget browser.

In the above Code, the defaultValue = "jQueryUIButton" attribute specifies that when a widget is inserted to a page for the first time, _ WID _ will be replaced by a unique ID starting with "jQueryUIButton. If the ID is already used on the current page, add a digital number to ensure that the ID is unique in this document. For example, jQueryUIButton1. Hidden = "true" indicates that the property is invisible when you click the Configure button in the Widget Browser. Widget Browser and Dreamweaver ensure that widgets are unique. Therefore, you do not need to display widgets in the widget Browser attribute configurator.

Note: If you want to specify other unique IDs, you can use format = "ID" and another unique attribute name instead of _ WID _. To achieve this purpose. Then, use the @ propertyName @ symbol in the other part of the OAM file to replace the matched unique ID.

Add border

Once you have all the properties you want to define your widget, it is very easy to create a Developer border.

Figure 4. configure a new Developer border

The new border form will appear in the border form list. See Figure 5.

Figure 5. Locate the new border form in My Presets

Click the Package button to create a new widget Package ZIP file.

After you import the widget package, you will see the created border format under Developer Presets. Now every developer who uses this widget can use this border.

Add author and license information

You may have noticed that widgets are displayed anonymously. You need to add the author and license details to the widget.

Save your changes.

Add icon

You can add a widget preview icon, which can be displayed in the Widget browser and used in the Property check tool when a widget is selected in Dreamweaver. See Figure 6.

Save your changes

For a complete example, see the jQueryPushButton4_oam.xml sample file.

Publish widgets on Adobe Exchange

After you create and package widgets, upload them to Adobe Exchange for sharing with other users in the widget Browser.

The Upload Type should be set to Dreamweaver Content And Extensions. To set Categories, select Dreamweaver: Widget Browser/Open Ajax Widgets. To set the Framework, select the corresponding Framework. For example, select jQuery. For Other projects, you can select another framework, or select Other if it is irrelevant to any of the listed JavaScript frameworks.

Thank you for submitting your widget!

About the author

Scott Richard is an engineer and has been working on Dreamweaver since the first release. He used to be the plug-in Manager, contributor, and Director of Macromedia. Recently, he is immersed in developing a Widget browser with Flex. Scott enjoys skiing without writing code.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More