How-To Tutorials

Creating validation functions for URLs, email addresses, and other types of data Ext JS has an extensive library of validation functions. This is how it can be used to validate URLs, email addresses, and other types of data. The following screenshot shows email address validation in action: This screenshot displays URL validation in action: How to do it... Initialize the QuickTips singleton: Ext.QuickTips.init(); Create a form with fields that accept specific data formats: Ext.onReady(function() { var commentForm = new Ext.FormPanel({ frame: true, title: 'Send your comments', bodyStyle: 'padding:5px', width: 550, layout: 'form', defaults: { msgTarget: 'side' }, items: [ { xtype: 'textfield', fieldLabel: 'Name', name: 'name', anchor: '95%', allowBlank: false }, { xtype: 'textfield', fieldLabel: 'Email', name: 'email', anchor: '95%', vtype: 'email' }, { xtype: 'textfield', fieldLabel: 'Web page', name: 'webPage', vtype: 'url', anchor: '95%' }, { xtype: 'textarea', fieldLabel: 'Comments', name: 'comments', anchor: '95%', height: 150, allowBlank: false }], buttons: [{ text: 'Send' }, { text: 'Cancel' }] }); commentForm.render(document.body);}); How it works... The vtype configuration option specifies which validation function will be applied to the field. There's more... Validation types in Ext JS include alphanumeric, numeric, URL, and email formats. You can extend this feature with custom validation functions, and virtually, any format can be validated. For example, the following code shows how you can add a validation type for JPG and PNG files: Ext.apply(Ext.form.VTypes, { Picture: function(v) { return /^.*.(jpg|JPG|png|PNG)$/.test(v); }, PictureText: 'Must be a JPG or PNG file';}); If you need to replace the default error text provided by the validation type, you can do so by using the vtypeText configuration option: { xtype: 'textfield', fieldLabel: 'Web page', name: 'webPage', vtype: 'url', vtypeText: 'I am afraid that you did not enter a URL', anchor: '95%'} See also... The Specifying the required fields in a form recipe, covered earlier in this article, explains how to make some form fields required The Setting the minimum and maximum length allowed for a field's value recipe, covered earlier in this article, explains how to restrict the number of characters entered in a field The Changing the location where validation errors are displayed recipe, covered earlier in this article, shows how to relocate a field's error icon Refer to the previous recipe, Deferring field validation until form submission, to know how to validate all fields at once upon form submission, instead of using the default automatic field validation The next recipe, Confirming passwords and validating dates using relational field validation, explains how to perform validation when the value of one field depends on the value of another field The Rounding up your validation strategy with server-side validation of form fields recipe (covered later in this article) explains how to perform server-side validation Confirming passwords and validating dates using relational field validation Frequently, you face scenarios where the values of two fields need to match, or the value of one field depends on the value of another field. Let's examine how to build a registration form that requires the user to confirm his or her password when signing up. How to do it… Initialize the QuickTips singleton: Ext.QuickTips.init(); Create a custom vtype to handle the relational validation of the password: Ext.apply(Ext.form.VTypes, { password: function(val, field) { if (field.initialPassField) { var pwd = Ext.getCmp(field.initialPassField); return (val == pwd.getValue()); } return true; }, passwordText: 'What are you doing?<br/>The passwords entered do not match!'}); Create the signup form: var signupForm = { xtype: 'form', id: 'register-form', labelWidth: 125, bodyStyle: 'padding:15px;background:transparent', border: false, url: 'signup.php', items: [ { xtype: 'box', autoEl: { tag: 'div', html: '<div class="app-msg"><img src="img/businessman add.png" class="app-img" /> Register for The Magic Forum</div>' } }, { xtype: 'textfield', id: 'email', fieldLabel: 'Email', allowBlank: false, minLength: 3, maxLength: 64,anchor:'90%', vtype:'email' }, { xtype: 'textfield', id: 'pwd', fieldLabel: 'Password', inputType: 'password',allowBlank: false, minLength: 6, maxLength: 32,anchor:'90%', minLengthText: 'Password must be at least 6 characters long.' }, { xtype: 'textfield', id: 'pwd-confirm', fieldLabel: 'Confirm Password', inputType: 'password', allowBlank: false, minLength: 6, maxLength: 32,anchor:'90%', minLengthText: 'Password must be at least 6 characters long.', vtype: 'password', initialPassField: 'pwd' }],buttons: [{ text: 'Register', handler: function() { Ext.getCmp('register-form').getForm().submit(); }},{ text: 'Cancel', handler: function() { win.hide(); } }]} Create the window that will host the signup form: Ext.onReady(function() { win = new Ext.Window({ layout: 'form', width: 340, autoHeight: true, closeAction: 'hide', items: [signupForm] }); win.show();

Do you want to use paid incoming links? Paying for incoming links can be a tricky business if you do it the wrong way. Google doesn't like web sites that use this link building technique and their representative master anti-spam spokesman, Matt Cutts is very clear on this subject. Buy links and get penalized… sell links and get penalized as well The major penalty is a very likely drop in Page Rank. Although Page Rank is becoming less important as compared to your rankings on the search engine result pages, people still see it as a quality making if you do have a high Page Rank. Of course using AdWords to do a "Pay Per Click" campaign is also a form of paid links. If you want to use the sponsored link options to get your site started, that is fine, but the ultimate goal of this article is to get higher rankings in the organic results of the search engines. Studies support the idea of using sponsored links to bring in more traffic from the organic searchers even after the campaign has stopped. It depends on how hard you need the traffic to your site for business, or if you want to go for organic results. Helping people helps you with link building If you have a topic that you are passionate about and you build a web site about it, then this option is one for you. Find a forum that matches the topic of your web site and start helping other people with your knowledge. On most forums there is a possibility to have your own "Signature", where you can have one or more lines of text with a link that people can click on. For instance, the site http://forums.digitalpoint.com has a lot of requests for information on Joomla! where you can help people to solve their problems. After a number of replies to questions, you can put in your own signature such as:   The links you put in there will not only bring traffic from your posts, but they also count as incoming links for Google. Not all forums have the same rules—for example, some of them have a rule that you can put a link to your site, but it should be the URL only without your main keywords in the link. So, be sure to go to the best forums you can find on your topic and start helping others with your knowledge. In the meantime, work on your incoming links as well. Commenting done the right way Another option you have is to look for blogs about your web site's topic. You will already probably know the most useful ones in your field of expertise. Go to those blogs and read some of the posts they have published. If you are lucky, there will be some kind of widget that shows you how many readers they have on that blog for their RSS Feed or email system. Large numbers are a good sign as that means a lot of people will read the blog and it probably has a good ranking in Google. Read the posts that are relevant to your topic and if you can, write a comment which shows that you know more about the topic. Also, if possible, make a new suggestion or correct an error in the article. Don't write comments such as "I really liked this post", "Thank you for this information", or even "I really like your blog". If you write comments such as those you won't get any interaction with the blogger in question and you don't add value to the discussion. Such comments will get deleted or labeled as spam. When I get comment links such as these, I remove them as they add null to zero information for other visitors and they are clearly there just for link building. It won't work that way, and if you are outsourcing or want to outsource this kind of link building, here is a warning, make sure you state in your contract with these people that blog and comment spamming is not allowed! If you don't add that clause, they may start commenting in your name, linking to your site (well, you paid them to do that…) with the same remarks over and over again. What happens next is that bloggers will ban you from commenting on their blogs, and in the worst case scenario you will loose a lot of credibility in your community. People are sometimes better informed than you think and a mistake like the one mentioned above will cost you more than money alone. So, if you start commenting, ask yourself: Do I have something of value to add to the conversation? Will people read that comment? How effective will this blog be in sending me traffic? Keep those in mind, with more emphasis on the first point, and you will do fine. Finding places to comment As I said before, commenting is a great way to create your own incoming links. But how do you find more relevant blogs to read and comment on? First of all, do a search for blogs about your web site's topic. You can use http://blogsearch.google.com/ to find the most recent blog posts and see if the blogs it finds fit your web site's topic.   Technorati is of course the best place to look for blogs.   Go ahead and use the option search the blogosphere.... From the results of this initial search, you can filter based on several options. In the first selection list you will find options such as Search Posts, Search Blogs, Search Photos, and Seach Videos. The second selection list allows you to filter based on entire post or just tags. The third option is the one you really need to set and there you can choose to filter on a lot of authority.   This option means a lot of people are linking to that web site/blog and it will probably get lots of traffic and do well in the search engines. Those blogs are the ones you want your voice to be heard on and remember if you are going to comment, make sure it is a useful one. What you need to do after finding the blog, is to really check out the site. In some cases there might just be one post about your web site's topic on that blog. And you really want it to be on topic all the way!   Two other blog search services you can use are: http://www.icerocket.com http://www.blogpulse.com Both are set up to bring to you the most recent results like Google does but they have something extra. You can learn about trends as Icerocket has a trend tool and Blogpulse has its trend search option. Using those trend tools will give you more insight on which terms are "hot" at the moment and growing. If you combine that with the blogs you just found, for your keywords, you could have a winning team.

FeedBurner FeedBurner can be used to track the number of RSS feed subscribers you have and how many of those subscribers are actively engaged with your feed. Setting up FeedBurner is quite simple, although you will need to register for an account at http://feedburner.google.com. If you already have an account at the old Feedburner.com site, you can move the feeds to your Google account when you sign in. Time for action – let's burn some feeds Download the Feedburner FeedSmith plugin from http://feedburner.google.com/fb/static/feedburner_feedsmith_plugin_2.3.zip . Upload the plugin's PHP file to /wp-content/plugins. Activate the plugin for yourself, then for all other users. Log in to Feedburner.google.com and add your site's feed to your FeedBurner account by entering the URL into the Burn a feed right this instant box. In most cases the default title and address should be fine; you may want to change the address if yours is too cumbersome. For Slayercafe.com, FeedBurner picked http://feeds2.feedburner.com/TheSlayerCafe, which is nice and easy to remember. On the next screen, tick the box to allow FeedBurner to track Clickthroughs and Reach. Go to the Publicize tab and activate the FeedCount feature. On your main blog, go to the Settings | FeedBurner screen and paste the URL you created in step 5 into the FeedBurner box. Install the FeedBurner Widget available at http://wordpress.org/extend/plugins/feedburner-widget/. On the Appearance | Widgets page, add the widget just above the normal RSS feed, and set it up like shown in the following screenshot. You should now have two subscription options on your front page. Once your site starts getting subscribers, you should see some useful statistics on the FeedBurner Analyze page. What's my feed URL?If you aren't sure what your feed's URL is, check out the following list: RSS 2.0: http://www.mydomain.tld/feed/ RSS 2.0: http://www.mydomain.tld/feed/rss2/ RSS 0.92: http://www.mydomain.tld/feed/rss RDF/RSS 1.0: http://www.mydomain.tld/feed/rdf Atom: http://www.mydomain.tld/feed/atom All of the above feed types are offered by WordPress MU. The RSS 2.0 feed will be the one that is most frequently asked for by directories and aggregators; however, it is useful to know the address of the other feeds in case a site requests them. What just happened? We have just set up two different ways for people to subscribe to the main blog, and we have offered our blog network's users the chance to do the same with their blogs. Our users will need to create their own FeedBurner accounts, but the rest of the work has been done for them—they just need to add the right widgets to their page. Offering two different ways to subscribe may seem strange, especially when you consider that the count shown by FeedBurner is inaccurate because it doesn't track people who subscribed using the direct link. The reason I have chosen to do it this way is because FeedBurner offers some useful statistics, such as how many people clicked through and which readers they are using, about the users that have subscribed via its feeds. If you find that you have a huge number of subscribers but they are never clicking on articles, then perhaps your headlines aren't enticing enough. FeedBurner also tracks Uncommon Uses—for example, someone scraping your feed to use as free content for a spam blog. If FeedBurner is so useful, then why offer an alternative? Well, not all RSS readers can understand FeedBurner feeds. This is especially true if your site expects a lot of visitors from people using older mobile devices. Offering a plain old RSS feed option is a good idea; otherwise, you will lose those subscribers entirely. Remember that if FeedBurner ever goes down, your FeedBurner subscribers will not be able to read your RSS feed. In my experience as a subscriber, FeedBurner is a reliable service; as you would expect because the service is now owned by Google, and I feel that the usefulness of the statistics it offers outweighs the risk of downtime. You may feel differently about using a third-party service to manage your feeds. If you cannot afford any downtime, then perhaps serving your feeds directly is a better option. Have a go hero – offering more RSS options If you think that the Add to Any butt on is too intrusive, or if you want to offer subscribe links in more than one place (for example, as a widget in the sidebar and also as a link at the bottom of a post), then you can use the following text link code to add the different kinds of feed links. Link Format <?php bloginfo('rss2_url'); ?> RSS 2.0 <?php bloginfo('rss_url'); ?> RSS 0.92 <?php bloginfo('rdf_url'); ?> RSS 1.0 <?php bloginfo('atom_url'); ?> Atom <?php bloginfo('comments_rss2_url'); ?> RSS Feed For Comments   You can use the code presented in this table anywhere you would like to have the RSS icons appear. Personally, I like to display the RSS icons in a prominent position in the right sidebar by editing r_sidebar.php.

Additional actions In the following section, you will be performing additional configuration that is optional but will greatly improve performance and usability in the context of the development work you are about to start. Setting memory limits Review the memory settings. This value is dependent on your machine resources and may need to be adjusted for your machine. Allocating less memory for startup will give you better performance on a machine with less memory available. This value is appropriate for a 3 GB memory machine or less. Edit the SOA domain environment file found here (make sure you have the SOA Domain environment file): C:OracleMiddlewarehome_11gR1user_projectsdomains domain1binsetSOADomainEnv.cmd Set memory values: set DEFAULT_MEM_ARGS=-Xms512m -Xmx512m Starting and stopping Now it's time to start your servers. You can start them using the provided script or you can start them separately. Instructions for both methods are included. Starting First set boot.properties and then start the servers. Before you start, set the boot properties so you are not prompted to log in during server startup. Copy C:pobinboot.properties to C:OracleMiddlewarehome_11gR1user_projectsdomainsdomain1. Edit the copied file to reflect the password for your configuration (entered during domain configuration). The first time the server is started this file is encrypted and copied to the server locations.You can start the servers one at a time or you can use the start_all script to start the admin and SOA managed servers (not BAM). To start them one at a time instead, skip to step 6. Copy the startup script to the Oracle directory: C:pobinstart_all.cmd toC:OracleMiddleware Edit the copied file to reflect your environment. Open a command window and start your servers as shown. You must specify how many seconds to wait after starting the admin server before starting the managed server. The admin server must be in the RUNNING state before the managed server starts (see the following screenshot). Try 180 seconds and adjust as necessary. You will need more time the first time you start after a machine reboot than for subsequent restarts: cd C:OracleMiddlewarestart_all.cmd 180 Your servers are now starting automatically so you can skip steps 6-10. Jump to step 12 to continue. To start the servers manually, continue with the following steps. Open three command windows, one for the WebLogic admin server, one for the SOA managed server, and one for the BAM managed server (only start BAM when you need it for a BAM lab). Start the Admin Server first: cd C:OracleMiddlewarehome_11gR1user_projectsdomainsdomain1startWebLogic.cmd Wait for the Admin Server to finish starting up. It takes a few minutes—watch for status RUNNING in the log console window: Start the SOA managed server in the second command window. This start script is in the bin directory. You can also run it directly from the bin directory: cd C:OracleMiddlewarehome_11gR1user_projectsdomainsdomain1binstartManagedWebLogic.cmd soa_server1 When prompted, enter the username weblogic and password welcome1. If you did step 1 and set boot.properties, you will not be prompted. The server is started when you see the message, INFO: FabricProviderServlet.stateChanged SOA Platform is running and accepting requests. Start the BAM managed server in the third command window—do this only when needed for the BAM lab: cd C:OracleMiddlewarehome_11gR1user_projectsdomainsdomain1binstartManagedWebLogic.cmd bam_server1 When prompted, enter the user name weblogic and password welcome1. If you did step 1 and set boot.properties, you will not be prompted. Watch for the RUNNING status. Console URLs Log in with weblogic/welcome1 for all consoles: Weblogic console: http://localhost:7001/console Enterprise Manager console: http://localhost:7001/em SOA worklist: http://localhost:8001/integration/worklistapp B2B console: http://localhost:8001/b2b BAM (must use IE browser): http://localhost:9001/OracleBAM Stopping servers Whenever you need to stop the servers complete the following: Stop the managed servers first by entering Ctrl+C in the command window. Wait until stopped. Stop the admin server by entering Ctrl+C in the command window. WebLogic Server console settings There are two suggested changes to make in the WebLogic Server console. First, you will be viewing application deployments often using the WebLogic server console. This is a lot more convenient if you change the settings not to show libraries as this makes the list a lot shorter and you can find what you need more quickly. Start the WebLogic Admin Server (WLS) if it is not already running. Log in to the WLS console http://localhost:7001/console. Click on Deployments in the left navigation bar. Click on Customize this table at the top of the Deployments table. Change the number of rows per page to 100 (there are only about 30). Select the checkbox to exclude libraries and click on Apply. Second, when the server is started, internal applications like the WLS console are not deployed completely and you see a slight delay when you first access the console. You saw this delay just now when you first accessed the console URL. You can change this behavior to deploy internal applications at startup instead and then you don't get the delay when you access the console. This is convenient for demos (if you want to show the console) and also if you tend to use the console each time you start up the server. Click on domain1 in the left navigation bar in the WLS console. Click on Configuration | General tab. Deselect Enable on-demand deployment of internal applications checkbox. Click on the Save button. EM settings for development The Enterprise Manager can provide different levels of information about composite runtime instances based on a property setting. During development, it is helpful to have a higher setting. These settings are not used on production machines except when specifically needed for debugging purposes as there is a performance cost. Start your servers if they are not already running. Log in to the EM console at http://localhost:7001/em. Right-click on the soa-infra (soa_server1) in the left navigation bar to open the SOA menu and select SOA Administration | Common Properties. Select Audit Level: Development and select the checkbox for Capture Composite Instance State. Click on Apply and click on Yes. If you need to uninstall JDeveloper and servers If you need to uninstall everything, complete the following: First save anything from C:OracleMiddlewarejdev_11gR1jdevelopermywork that you want to keep as this directory will be deleted. Run Uninstall from the program menu to completion for both JDeveloper and WLS. Delete C:OracleMiddlewarejdev_11gR1 and C:OracleMiddlewarehome_11gR1. If you get an error message about not being able to delete because a name or path is too long, change the names of the composite directories within home_ 11gR1user_projectsdomainsdomain1deployed-composites to abcd and try deleting again. Delete program groups from C:Documents and SettingsAll UsersStart MenuPrograms: Oracle Fusion Middleware 11.1.1.1.0 Oracle SOA 11g - Home1 Oracle WebLogic Complete the Dropping existing schema section earlier in this article to clean up the database.

What is the siteaccess system? To override eZ Publish's default configuration, we need to create a collection of configuration settings called siteaccess. The role of a siteaccess is to indicate to eZ which database, design, and var directory should be used for a particular context. With siteaccess it is possible to use the same content and different designs (for example, when creating a mobile version of our site) or do the opposite (for example, managing a multilingual site where the template doesn't change but the content does). It's also possible to create an administration siteaccess, where we can manage any kind of content, such as users, media files and, of course, the articles, or a frontend siteaccess that is the website, where we can only view the public published content. A typical eZ publish site consists of two siteaccesses: a public interface for visitors and a restricted interface for editors. In this case, both siteaccesses use the same content, but different designs. Whereas the administration siteaccess would most likely use the built-in administration design, the public siteaccess would probably use a custom design. The following illustration, taken from the official eZ Publish documentation, shows this scenario: Usually, in big projects it is also useful to have two additional siteaccesses: a staging siteaccess and a developing siteaccess. The first is used in a staging environment to make frequent deployments of modifications that can be tested by the customer (in this case, the siteaccess uses a different database but the same design as for the public and admin siteaccesses). The second one, instead, is used by developers on their local machine (this siteaccess uses a local database, but once again uses the same design as for the public and admin siteaccesses). A single eZ publish installation can host a virtually unlimited number of sites by simply adding new siteaccesses, designs, and databases. Siteaccess folder structure The configuration settings for siteaccesses are located inside a dedicated subfolder within the /settings/siteaccess folder. The name of the subfolder is the actual name of the siteaccess. It is very important to remember that a siteaccess name can only contain letters, numbers, and underscores. The following illustration shows a setup with two siteaccesses: admin and public. When a siteaccess is in use, eZ publish reads the configuration file in the following sequence: Default configuration settings: /settings/*.ini Siteaccess settings: /settings/siteaccess/[name_of_siteaccess]/*.ini.append.php Global overrides: /settings/override/*.ini.append.php eZ Publish will first read the default configuration settings. Then, it will determine which siteaccess to use based on the rules that are defined in the global override for site.ini /settings/override/site.ini.append.php. When it knows which siteaccess has to be used, it will go into the correct siteaccess folder and read the configuration files that belong to that siteaccess. The settings of the siteaccess will override the default configuration settings. For example, if a siteaccess uses a database called packtmediaproject_test, the system will find this and automatically use the specified database when an incoming request is processed. Finally, eZ Publish reads the configuration files in the global override directory. The settings in the global override directory will override all other settings. So, if a database called packtmediaproject is specified in the global override directory for site.ini, then eZ publish will attempt to use that database regardless of what is specified in the siteaccess settings. If a setting is not overridden either by the siteaccess, or from within a global override, then the default setting will be used. The default settings are set by the .ini files located in the /settings directory. The following figure illustrates how the system reads the configuration files, using the site.ini file as an example:                                                                                             Creating a siteaccess for dev, staging, and production environments Once we have finished installing eZ Publish, we'll find a folder called setting/siteaccess, with the default siteaccess automatically configured. In our case we'll find these folders: admin: This folder usually isn't used as siteaccess, but it contains a standard configuration file that can be used to set up the administration panel setup: This folder contains all of the configuration files that are used during the installation process ezwebin_site: This is where the main design is imported directly from the eZ.no site for the package eZ Webin ita, eng, fre: Last but not least, the ita, eng, and fre folders have the configuration files used by the site to enable internationalization and localization The ezwebin_site_admin is created by the webmin site package, and contains all of the configuration files for the administration panel. Enterprise siteaccess schema In an enterprise development process, it is very important to have four more siteaccesses: dev dev_panel staging staging_panel The siteaccesses dev and dev_panel will be used as a development playground installation, which can be used by the development team members, with their own configuration parameters, such as database connection, path, and debug file. This will help them to test different configuration parameters or extensions without impacting the production site. The siteaccesses staging and staging_panel will be used as a staging arena that can be used by a customer to evaluate new functionality before it is released to production. Usually, the staging installation is installed on a clone of the production server, to make sure that everything works in the same way. In our case, we will work on the same server to better understand how to create the different siteaccesses. All siteacccesses will have some configuration files in common, and sometimes these have to assign the same value to the parameters specified inside them. For example, if you need to create a new language siteacccess, you'll need to copy the same module configuration files to be sure that they will work in the same way for all of the languages. In this case, it will be useful to create a symbolic link from one siteaccess to another. If you don't know what a Linux symbolic link is, you can think of it as a virtual pointer to a real file, like a Windows XP shortcut.

Loading form data from the server An important part of working with forms is loading the data that a form will display. Here's how to create a sample contact form and populate it with data sent from the server. How to do it... Declare the name and company panel: var nameAndCompany = { columnWidth: .5, layout: 'form', items: [ { xtype: 'textfield', fieldLabel: 'First Name', name: 'firstName', anchor: '95%' }, { xtype: 'textfield', fieldLabel: 'Last Name', name: 'lastName', anchor: '95%' }, { xtype: 'textfield', fieldLabel: 'Company', name: 'company', anchor: '95%' }, { xtype: 'textfield', fieldLabel: 'Title', name: 'title', anchor: '95%' } ]} Declare the picture box panel: var picBox = { columnWidth: .5, bodyStyle: 'padding:0px 0px 0px 40px', items: [ { xtype: 'box', autoEl: { tag: 'div', style: 'padding-bottom:20px', html: '<img id="pic" src="' + Ext.BLANK_IMAGE_URL + '" class="img-contact" />' } }, { xtype: 'button', text: 'Change Picture' } ]} Define the Internet panel: var internet = { columnWidth: .5, layout: 'form', items: [ { xtype: 'fieldset', title: 'Internet', autoHeight: true, defaultType: 'textfield', items: [{ fieldLabel: 'Email', name: 'email', vtype: 'email', anchor: '95%' }, { fieldLabel: 'Web page', name: 'webPage', vtype: 'url', anchor: '95%' }, { fieldLabel: 'IM', name: 'imAddress', anchor: '95%' }] }]} Declare the phone panel: var phones = { columnWidth: .5, layout: 'form', items: [{ xtype: 'fieldset', title: 'Phone Numbers', autoHeight: true, defaultType: 'textfield', items: [{ fieldLabel: 'Home', name: 'homePhone', anchor: '95%' }, { fieldLabel: 'Business', name: 'busPhone', anchor: '95%' }, { fieldLabel: 'Mobile', name: 'mobPhone', anchor: '95%' }, { fieldLabel: 'Fax', name: 'fax', anchor: '95%' }] }]} Define the business address panel: var busAddress = { columnWidth: .5, layout: 'form', labelAlign: 'top', defaultType: 'textarea', items: [{ fieldLabel: 'Business', labelSeparator:'', name: 'bAddress', anchor: '95%' }, { xtype: 'radio', boxLabel: 'Mailing Address', hideLabel: true, name: 'mailingAddress', value:'bAddress', id:'mailToBAddress' }]} Define the home address panel: var homeAddress = { columnWidth: .5, layout: 'form', labelAlign: 'top', defaultType: 'textarea', items: [{ fieldLabel: 'Home', labelSeparator:'', name: 'hAddress', anchor: '95%' }, { xtype: 'radio', boxLabel: 'Mailing Address', hideLabel: true, name: 'mailingAddress', value:'hAddress', id:'mailToHAddress' }]} Create the contact form: var contactForm = new Ext.FormPanel({ frame: true, title: 'TODO: Load title dynamically', bodyStyle: 'padding:5px', width: 650, items: [{ bodyStyle: { margin: '0px 0px 15px 0px' }, items: [{ layout: 'column', items: [nameAndCompany, picBox] }] }, { items: [{ layout: 'column', items: [phones, internet] }] }, { xtype: 'fieldset', title: 'Addresses', autoHeight: true, hideBorders: true, layout: 'column', items: [busAddress, homeAddress] }], buttons: [{ text: 'Save' }, { text: 'Cancel' }]}); Handle the form's actioncomplete event: contactForm.on({ actioncomplete: function(form, action){ if(action.type == 'load'){ var contact = action.result.data; Ext.getCmp(contact.mailingAddress).setValue(true); contactForm.setTitle(contact.firstName + ' ' + contact.lastName); Ext.getDom('pic').src = contact.pic; } }}); Render the form: contactForm.render(document.body); Finally, load the form: contactForm.getForm().load({ url: 'contact.php', params:{id:'contact1'}, waitMsg: 'Loading'}); How it works... The contact form's building sequence consists of defining each of the contained panels, and then defining a form panel that will serve as a host. The following screenshot shows the resulting form, with the placement of each of the panels pinpointed: Moving on to how the form is populated, the JSON-encoded response to a request to provide form data has a structure similar to this: {success:true,data:{id:'1',firstName:'Jorge',lastName:'Ramon',company:'MiamiCoder',title:'Mr',pic:'img/jorger.jpg',email:'ramonj@miamicoder.net',webPage:'http://www.miamicoder.com',imAddress:'',homePhone:'',busPhone:'555 555-5555',mobPhone:'',fax:'',bAddress:'123 Acme Rd #001nMiami, FL 33133',hAddress:'',mailingAddress:'mailToBAddress'}} The success property indicates whether the request has succeeded or not. If the request succeeds, success is accompanied by a data property, which contains the contact's information. Although some fields are automatically populated after a call to load(), the form's title, the contact's picture, and the mailing address radio button require further processing. This can be done in the handler for the actioncomplete event: contactForm.on({ actioncomplete: function(form, action){ if(action.type == 'load'){} }}); As already mentioned, the contact's information arrives in the data property of the action's result: var contact = action.result.data; The default mailing address comes in the contact's mailingAddress property. Hence, the radio button for the default mailing address is set as shown in the following line of code: Ext.getCmp(contact.mailingAddress).setValue(true); The source for the contact's photo is the value of contact.pic: Ext.getDom('pic').src = contact.pic; And finally, the title of the form: contactForm.setTitle(contact.firstName + ' ' + contact.lastName); There's more... Although this recipe's focus is on loading form data, you should also pay attention to the layout techniques used—multiple rows, multiple columns, fieldsets—that allow you to achieve rich and flexible user interfaces for your forms. See Also... The next recipe, Serving the XML data to a form, explains how to use a form to load the XML data sent from the server.

What is a report? A report is a vehicle for organizing, processing, and displaying data in a format suitable for outputting. In the past, reports went to hardcopy devices (for example printers). Reporting technology is now more general purpose and flexible. Reports may be displayed on-screen in preview mode rather than being printed, or output to another device (for example, disk storage in PDF format), but with the same formatting as though they were printed. In fact, all of the report screenshots in this article were taken from reports generated in preview mode. Once generated, the data contents of a report are static. Part of the new flexibility of NAV 2009 is the capability to output reports in preview mode, which have interactive capabilities. However, those capabilities only affect the presentation of the data, not the data included in the report dataset. Examples include dynamic sorting and show or hide data (expand or collapse). Even so, all specification of the data selection criteria for a report must be done at the beginning, before the report is generated. NAV 2009 also allows dynamic functionality for drill down into the underlying data, drill through to a page, and even drill through into another report. In NAV, report objects can also be classified as processing only by setting the correct report property (that is, by setting the ProcessingOnly property to Yes). A ProcessingOnly report will display no data to the user in the traditional reporting manner, but will simply process and update data in the tables. A report can add, change, or delete data in tables, whether the report is ProcessingOnly or a normal printing report. In general, reports are associated with one or more tables. A report can be created without being externally associated with any table, but that is an exception, not a rule. Even if a report is associated with a particular table, it can freely access and display data from other referenced tables. Two NAV report designers NAV 2009 report design uses a pair of Report Designer tools. The first is the Report Designer that is part of the C/SIDE development environment. The second is the Visual Studio Report Designer. For simplicity, we will refer to these as C/SIDE RD and VS RD in this article. The C/SIDE RD is the only tool needed to create reports for the Classic Client. If a NAV 2009 system is using only the Classic Client, then only reports created using the C/SIDE RD can be run. However, when using the RoleTailored Client, both C/SIDE RD and VS RD reports can be run. The RTC runs C/SIDE RD reports by invoking a temporary instance of the Classic Client, running the report, and then closing down the Classic Client instance (no additional license slots are used). In this article, we will focus totally on the design of reports for the RoleTailored Client using the VS RD. The typical report development process for an RTC report begins by doing foundation work in the C/SIDE RD. That's where all the data structure, working data elements, data flow, and C/AL logic are defined. The only way to create or modify report objects is to start in the C/SIDE RD. Once all of the elements are in place, the development work proceeds to the VS RD where the layout and presentation work is done, including any desired dynamic options. The following flow chart provides a conceptual view of the creation of a new report using the two different Report Design approaches—one for the Classic Client and the other for the RoleTailored Client. The functions in the center and left chart paths are those done in the C/SIDE RD (steps 1 through 7). Those in the right set of the chart are the ones done in the VS RD (steps 4 and 6 through 10). Steps 1, 2, 3, and 5 are essentially the same (but not quite) regardless of the target client. Step 4 is done in the C/SIDE RD Sections Designer for both clients, but what you do is quite different in each case. As you can see, many of the functions are the same regardless of the target client. Most of those are done within the Classic Report Designer. Therefore, the accurate claim for NAV 2009 that, even though the layout function uses Visual Studio Report Designer, a large part of the report design is still done within the traditional NAV Report Designer. For the experienced NAV Classic Client developer who is moving to RTC projects, the biggest challenges will be to learn exactly which tasks are done using which development tool, and to learn the intricacies of the Visual Studio Report Designer layout tools. Those intricacies include understanding just how the VS RD features interact with the NAV data structures and the C/SIDE RD definitions. This chart shows the general flow of NAV report design in order to make it easier to understand which functions are done in which of the Report Design tools, and allows comparison of the Classic and RoleTailored design processes. In practice, the actual flow will depend on the specifics of a particular report. It's feasible for a simple C/SIDE report to be entirely generated by the Wizard, but that is generally not true for a VS RD report. It's important to note that some of the steps defined in the chart can be performed in a different sequence than that is shown, and some can be repeated in an iterative fashion. Nevertheless, the chart that follows is a good introductory guide to NAV Report Design. Terminology for the following chart: Working Data is all the non-database data needed to process the report; Report Data is what will be displayed in the report. A Hybrid Report Designer The Report Designer toolset in NAV 2009 represents a set of compromises tied back to some initial NAV 2009 product feature goals. One product feature goal was to retain the ability of developers of developers to do their to do their work within C/SIDE, thus avoiding scrapping more than a decade of knowledge and experience. A second product feature goal was to provide a much more fully featured set of reporting capabilities. After much thought and experimentation, the decision was made to create a toolset that would target report generation using the functionality of SQL Server Reporting Services (SSRS). The method of accomplishing that was to "glue together" the data and logic definition parts of the C/SIDE Report Designer to the layout parts of Visual Studio Report Designer, in order to create a hybrid. When a report is designed, VS RD builds a definition of the report layout in the XML-structured Report Definition Language Client-side (RDLC). When you exit VS RD, the latest copy of the RDLC code is stored in the current C/SIDE Report object. When you exit the Report Designer and save your Report object, the C/SIDE RD saves the combined set of report definition information, C/SIDE and RDLC, in the database. If you export a report object in text format, you will be able to see the two separate sets of report definition. The XML-structured RDLC is quite obvious (beginning with the heading RDLDATA). NAV report—look and feel NAV allows you to create reports of many different kinds with vastly different "look and feel" attributes. The consistency of report look and feel does not have the same level of design importance as the consistency of look and feel for pages does. The standard NAV application only uses a few of the possible report styles, most of which are in a relatively "plain-Jane" format. While good design practice dictates that enhancements should integrate seamlessly unless there is an overwhelming justification for being different, there are many opportunities for providing replacement or additional reporting capabilities. The tools that are available within NAV for accessing and manipulating data in textual format are very powerful. Unlike the previous versions of NAV, this new version includes a reasonable set of graphical reporting capabilities. And, of course, there is always the option to output report results to another processing/presentation tool such as Excel. NAV report types The following are the types of reports: List: This is a formatted list of data. A sample list report in the standard system is the Customer – Order Detail list shown in the following screenshot: Document: This is formatted along the lines of a pre-printed form, where a page (or several pages) represents a complete, self-contained report. Examples are Customer Invoice, Packing List (even though it's called a list, it's a document report), Purchase Order, and Accounts Payable check.The following screenshot is a Customer Sales-Invoice document report: The List and Document report types are defined based on their layout. The next three report types are defined based on their usage rather than their layout.

The basis for all of these topics is the object-oriented interface. Object-oriented versus MATLAB styles We have seen  a lot of examples, and in all of them we used the matplotlib.pyplot module to create and manipulate the plots, but this is not the only way to make use of the Matplotlib plotting power. There are three ways to use Matplotlib: pyplot: The module used so far in this article pylab:  A module to merge Matplotlib and NumPy together in an environment closer to MATLAB Object-oriented way: The Pythonic way to interface with Matplotlib Let's first elaborate a bit about the pyplot module: pyplot provides a MATLAB-style, procedural, state-machine interface to the underlying object-oriented library in Matplotlib. A state machine is a system with a global status, where each operation performed on the system changes its status. matplotlib.pyplot is stateful because the underlying engine keeps track of the current figure and plotting area information, and plotting functions change that information. To make it clearer, we did not use any object references during our plotting we just issued a pyplot command, and the changes appeared in the figure. At a higher level, matplotlib.pyplot is a collection of commands and functions that make Matplotlib behave like MATLAB (for plotting). This is really useful when doing interactive sessions, because we can issue a command and see the result immediately, but it has several drawbacks when we need something more such as low-level customization or application embedding. If we remember, Matplotlib started as an alternative to MATLAB, where we have at hand both numerical and plotting functions. A similar interface exists for Matplotlib, and its name is pylab. pylab (do you see the similarity in the names?) is a companion module, installed next to matplotlib that merges matplotlib.pyplot (for plotting) and numpy (for mathematical functions) modules in a single namespace to  provide an environment as near to MATLAB as possible, so that the transition would be easy. We and the authors of Matplotlib discourage the use of pylab, other than for proof-of-concept snippets. While being rather simple to use, it teaches developers the wrong way to use Matplotlib. The third way to use Matplotlib is through the object-oriented interface (OO, from now on). This is the most powerful way to write Matplotlib code because it allows for complete control of the result however it is also the most complex. This is the Pythonic way to use Matplotlib, and it's highly encouraged when programming with Matplotlib rather than working interactively. We will use it a lot from now on as it's needed to go down deep into Matplotlib. Please allow us to highlight again the preferred style that the author of this article, and the authors of Matplotlib want to enforce: a bit of pyplot will be used, in particular for convenience functions, and the remaining plotting code is either done with the OO style or with pyplot, with numpy explicitly imported and used for numerical functions. In this preferred style, the initial imports are: import matplotlib.pyplot as pltimport numpy as np In this way, we know exactly which module the function we use comes from (due to the module prefix), and it's exactly what we've always done in the code so far. Now, let's present the same piece of code expressed in the three possible forms which we just described. First, we present it in the style, pyplot only: In [1]: import matplotlib.pyplot as pltIn [2]: import numpy as npIn [3]: x = np.arange(0, 10, 0.1)In [4]: y = np.random.randn(len(x))In [5]: plt.plot(x, y)Out[5]: [<matplotlib.lines.Line2D object at 0x1fad810>]In [6]: plt.title('random numbers')In [7]: plt.show() The preceding code snippet results in: Now, let's see how we can do the same thing using the pylab interface: $ ipython -pylab... In [1]: x = arange(0, 10, 0.1)In [2]: y = randn(len(x)) In [3]: plot(x, y)Out[3]: [<matplotlib.lines.Line2D object at 0x4284dd0>] In [4]: title('random numbers')In [5]: show() Note that: ipython -pylab is not the same as running ipython and then: from pylab import * This is because ipython's-pylab switch, in addition to importing everything from pylab, also enables a specific ipython threading mode so that both the interactive interpreter and the plot window can be active at the same time. Finally, lets make the same chart by using OO style, but with some pyplot convenience functions: In [1]: import matplotlib.pyplot as pltIn [2]: import numpy as np In [3]: x = np.arange(0, 10, 0.1)In [4]: y = np.random.randn(len(x))In [5]: fig = plt.figure()In [6]: ax = fig.add_subplot(111)In [7]: l, = plt.plot(x, y)In [8]: t = ax.set_title('random numbers')In [9]: plt.show() The pylab code is the simplest, and ,pyplot is in the middle, while the OO is the most complex or verbose. As the Python Zen teaches us, "Explicit is better than implicit" and "Simple is better than complex" and those statements are particularly true for this example: for simple interactive sessions, pylab or ,pyplot are the perfect choice because they hide a lot of complexity, but if we need something more advanced, then the OO API makes clearer where things are coming from, and what's going on. This expressiveness will be appreciated when we will embed Matplotlib inside GUI applications. From now on, we will start presenting our code using the OO interface mixed with some pyplot functions. A brief introduction to Matplotlib objects Before we can go on in a productive way, we need to briefly introduce which Matplotlib objects compose a figure. Let's see from the higher levels to the lower ones how objects are nested: Object Description FigureCanvas Container class for the Figure instance Figure Container for one or more Axes instances Axes The rectangular areas to hold the basic elements, such as lines, text, and so on     Our first (simple) example of OO Matplotlib In the previous pieces of code, we had transformed this: ...In [5]: plt.plot(x, y)Out[5]: [<matplotlib.lines.Line2D object at 0x1fad810>]... into: ...In [7]: l, = plt.plot(x, y)... The new code uses an explicit reference, allowing a lot more customizations. As we can see in the first piece of code, the plot() function returns a list of Line2D instances, one for each line (in this case, there is only one), so in the second code, l is a reference to the line object, so every operation allowed on Line2D can be done using l. For example, we can set the line color with: l.set_color('red') Instead of using the keyword argument to plot(), so the line information can be changed after the plot() call. Subplots In the previous section, we have seen a couple of important functions without introducing them. Let's have a look at them now: fig = plt.figure(): This function returns a Figure, where we can add one or more Axes instances. ax = fig.add_subplot(111): This function returns an Axes instance, where we can plot (as done so far), and this is also the reason why we call the variable referring to that instance ax (from Axes). This is a common way to add an Axes to a Figure, but add_subplot() does a bit more: it adds a subplot. So far we have only seen a Figure with one Axes instance, so only one area where we can draw, but Matplotlib allows more than one. add_subplot() takes three parameters: fig.add_subplot(numrows, numcols, fignum) where: numrows  represents the number of rows of subplots to prepare numcols  represents the number of columns of subplots to prepare fignum  varies from 1 to numrows*numcols and specifies the current subplot (the one used now) Basically, we describe a matrix of numrows*numcols subplots that we want into the Figure; please note that fignum is 1 at the upper-left corner of the Figure and it's equal to numrows*numcols at the bottom-right corner. The following table should provide a visual explanation of this:   numrows=2, numcols=2, fignum=1 numrows=2, numcols=2, fignum=2 numrows=2, numcols=2, fignum=3 numrows=2, numcols=2, fignum=4

There are many reasons why you would want to display a calendar. You can use it to display upcoming events, to keep a diary, or to show a timetable. Recently, for example, I combined a calendar with an online store for a client to book meetings and receive payments more intuitively. Google calendar is probably what springs to mind when people think of calendars online. There is a very good plugin called jquery-week-calendar that shows a week with events in a fashion similar to Google's calendar. Its homepage is at http://www.redredred.com.au/projects/jquery-week-calendar/. To get the latest copy of the plugin, go to http://code.google.com/p/jquery-week-calendar/downloads/list and get the highest-numbered file. The examples in this article are done with version 1.2.0. Download the library and extract it so that there is a directory named jquery-weekcalendar-1.2.0 in the root of your demo directory. Displaying the calendar As usual, the HTML for the simplest configuration is very simple. Save this as calendar.html: <html> <head> <script src="../jquery.min.js"></script> <script src="../jquery-ui.min.js"></script> <script src="../jquery-weekcalendar-1.2.0/jquery.weekcalendar.js"> </script> <script src="calendar.js"></script> <link rel="stylesheet" type="text/css" href="../jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="../jquery-weekcalendar-1.2.0/jquery.weekcalendar.css"/> </head> <body> <div id="calendar_wrapper" style="height:500px"></div> </body> </html> We will keep all of our JavaScript in an external file called calendar.js, which will initially contain just this: $(document).ready(function() { $('#calendar_wrapper').weekCalendar({ 'height':function($calendar){ return $('#calendar_wrapper')[0].offsetHeight; } }); }); This is fairly straightforward. The script will apply the widget to the #calendar_wrapper element, and the widget's height will be set to that of the wrapper element. Even with this tiny bit of code, we already have a good-looking calendar, and when you drag your mouse cursor around it, you'll see that events are created as you lift the mouse up: It looks good, but it doesn't do anything yet. The events are temporary, and will vanish as soon as you change the week or reload the page. In order to make them permanent, we need to send details of the events to the server and save them there. Creating an event What we need to do is to have the client save the event on the server when it is created. In this article, we'll use PHP sessions to save the data for the sake of simplicity. Sessions are chunks of data, which are kept on the server side and are related to the cookie or PHPSESSID parameter that the client uses to access that session. We will use sessions in these examples because they do not need as much setup as databases. For your own projects, you should adapt the PHP side in order to connect to a database instead. If you are using this article to create a full application, you will obviously want to use something more permanent than sessions, in which case the PHP code should be adapted such that all references to sessions are replaced with database references instead. This is beyond the scope of this book, but as you are a PHP developer, you probably do this everyday anyway! When the event has been created, we want a modal dialog to appear and ask for more details. In this test case, we'll add a text area for further details, which allows for more data than would appear in the small visible area in the calendar itself. A modal dialog is a "pop up" that appears and blocks all other actions on the page until it has been taken care of. It's useful in cases where the answer to a question must be known before a script can carry on with its work. Now, let's create an event and add it to our calendar. Client-side code In the calendar.js file, add an eventNew event to the weekCalendar call: $(document).ready(function() { $('#calendar_wrapper').weekCalendar({ 'height':function($calendar){ return $('#calendar_wrapper')[0].offsetHeight; }, 'eventNew':function(calEvent, $event) { calendar_new_entry(calEvent,$event); } }); }); When an event is created, the calendar_new_entry function will be called with details of the new event in the calEvent parameter. Now, add the function calendar_new_entry: function calendar_new_entry(calEvent,$event){ var ds=calEvent.start, df=calEvent.end; $('<div id="calendar_new_entry_form" title="New Calendar Entry"> event name<br /> <input value="new event" id="calendar_new_entry_form_title" /> <br /> body text<br /> <textarea style="width:400px;height:200px" id="calendar_new_entry_form_body">event description </textarea> </div>').appendTo($('body')); $("#calendar_new_entry_form").dialog({ bgiframe: true, autoOpen: false, height: 440, width: 450, modal: true, buttons: { 'Save': function() { var $this=$(this); $.getJSON('./calendar.php?action=save&id=0&start=' +ds.getTime()/1000+'&end='+df.getTime()/1000, { 'body':$('#calendar_new_entry_form_body').val(), 'title':$('#calendar_new_entry_form_title').val() }, function(ret){ $this.dialog('close'); $('#calendar_wrapper').weekCalendar('refresh'); $("#calendar_new_entry_form").remove(); } ); }, Cancel: function() { $event.remove(); $(this).dialog('close'); $("#calendar_new_entry_form").remove(); } }, close: function() { $('#calendar').weekCalendar('removeUnsavedEvents'); $("#calendar_new_entry_form").remove(); } }); $("#calendar_new_entry_form").dialog('open'); } What's happening here is that a form is created and added to the body (the second line of the function), then the third line of the function creates a modal window from that form and adds some buttons to it. Our modal dialog should look like this: The Save button, when pressed, calls the server-side file calendar.php with the parameters needed to save the event, including the start and end, and the title and body. When the result returns, the calendar is refreshed with the new event's data included. When any of the buttons are clicked, we close the dialog and remove it from the page completely. Note how we are sending time information to the server (shown highlighted in the code we just saw). JavaScript time functions usually measure in milliseconds, but we want to send it to PHP, which generally measures time in seconds. So, we convert the value on the client so that the PHP can use the received data as it is, without needing to do anything to it. Every little helps! Server-side code On the server side, we want to take the new event and save it. Remember that we're doing it in sessions in this example, but you should feel free to adapt this to any other model that you wish. Create a file called calendar.php and save it with this source in it: <?php session_start(); if(!isset($_SESSION['calendar'])){ $_SESSION['calendar']=array( 'ids'=>0, ); } if(isset($_REQUEST['action'])){ switch($_REQUEST['action']){ case 'save': // { $start_date=(int)$_REQUEST['start']; $data=array( 'title'=>(isset($_REQUEST['title'])?$_REQUEST['title']:''), 'body' =>(isset($_REQUEST['body'])?$_REQUEST['body']:''), 'start'=>date('c',$start_date), 'end' =>date('c',(int)$_REQUEST['end']) ); $id=(int)$_REQUEST['id']; if($id && isset($_SESSION['calendar'][$id])){ $_SESSION['calendar'][$id]=$data; } else{ $id= ++$_SESSION['calendar']['ids']; $_SESSION['calendar'][$id]=$data; } echo 1; exit; // } } } ?> In the server-side code of this project, all the requested actions are handled by a switch statement. This is done for demonstration purposes—whenever we add a new action, we simply add a new switch case. If you are using this for your own purposes, you may wish to rewrite it using functions instead of large switch cases. The date function is used to convert the start and end parameters into ISO 8601 date format. That's the format jquery-week-calendar prefers, so we'll try to keep everything in that format. Visually, nothing appears to happen, but the data is actually being saved. To see what's being saved, create a new file named test.php, and use the var_dump function in it to examine the session data (view it in your browser): <?php session_start(); var_dump($_SESSION); ?> Here's an example from my test machine:

WordPress As I mentioned before, WordPress is the biggest scoring free service that you can use. It is also the only one that doesn't allow you to spam their system and use it just for promotional actions. All the other services mentioned earlier allow you to monetize your blog or web site. Some share a portion of their revenue as well. So, if you want to make some money on the side, these services will provide you with the possibility to do so. WordPress doesn't allow you to build blogs just for Search Engine Optimization and I quote: We have a very low tolerance for blogs created purely for Search Engine Optimization or commercial purposes, machine-generated blogs, and will continue to nuke them. So if that's what you're interested in, WordPress is not for you. A self-hosted solution would be much more appropriate for you; suitable hosts can be found at http://www.wordpress.org/ hosting. Also see the following text taken from http://support.wordpress.com/advertising: This might be just one of the reasons that Google loves WORDPRESS.COM blogs. So how is it possible to use WORDPRESS.COM to promote your website? Actually, you don't. On this service you are not going the promote your site in a way that you can do on the other services. On WORDPRESS.COM you truly build a blog or site containing pages with true value to the visitors of that blog. You can create an About page where you put a link to your main website and in that way show the readers where to get more information. You can also put a link to your website in the link section (Blogroll) together with a few other relevant links that contain valid information. Blogging on WordPress and your ranking If you cannot promote your web site in a big way then what is the point of creating a blog on WORDPRESS.COM? A blog on WordPress can rank highly for the topic that you are blogging about and will give you some SEO love through those rankings. What is more important is the fact that you can take a special topic from your main web site's topic and create a blog around that. If you write your blog posts well and start to rank on that topic you will be seen as an authority on that topic and people will want to know more about you. That is the main reason to invest time to blog on WORDPRESS.COM to be recognized as an authority in your field of expertise. As you took only one topic out of all the topics that your site is about, you can do it again for another topic as well. You could also see these blogs as a collection of topic silos that create an array of highly related web sites that point to yours. This kind of link building takes time, and a lot of it! Is it worth it? Yes most certainly, and in more ways than one. With blogging you can achieve the following: An authority status if you do it right More traffic to your web site Better rankings in the search engines More insight into what the visitors of your web site are looking for To interact with other people having interest in the same topic as you Fun in writing and that will reflect on your site as you want to create more content on that site as well There is also a downside that you have to consider—it takes time away from building content on your main site and you have to cover more locations to maintain in the beginning. If you use that blog to write some timeless quality content on a niche part of your main site you will find out that you can stop maintaining those blogs after a short period of time. Remember, these are valid blogs to build incoming links to your main site! Digging deeper into WORDPRESS.COM blogs Creating a blog on WordPress is also very simple, go to WORDPRESS.COM and get a blog. Wait! Don't go yet! You need a few guidelines to start. Your initial user account name is going to be the first part of your URL, so name it right and remember, you cannot use a "-" in your username. My first account was seo4joomla so what I got was seo4joomla.wordpress.com. When you are logged in to WORDPRESS.COM and you type in the URL with a new keyword that you want (if it is not taken); you will get the option to add that blog to your account so that you can manage all of your WordPress.COM blogs from one place. Think about the title of your blog, if you want to change it later you can do that in the settings panel. Once you have your new blog, start cleaning. Delete the sample post and the comment along with it. Delete all the links in the blogroll (unless you are going to write about WordPress). Change the base post category from Uncategorized to a relevant topic name. Change the name of the links category from Blogroll to your most relevant keyword. Delete the About page and create a new one with the keywords of your blog in the title. That way your URL (page slug in WordPress) is containing the same keywords. Choose a nice theme layout that fits your topic, and if possible use a customized header. Using a customized header will give your site a slightly different look from the other WORDPRESS.COM web sites. Change the tagline in the general settings and start writing the way you do on your web site!   Using free blogging services As you saw, there are several blogging platforms and free web site building platforms that you can use to promote your web site. There are a lot more out there on the Internet, but you need to look for the ones that rank well in the search engines before you put your valued time into building a linking "empire". These services are free of charge and sometimes live on the revenue that comes from the blog content they host. If you don't want to be on such a platform where there are advertisements around your writing, don't use them. If you are afraid that you can lose your blog on such sites look for a way to make backups (for example, on WORDPRESS.COM you can use the Export function). How to minimize your blog writing time Keeping content fresh and up-to-date on all the blogs that you build is not that difficult. If you focus on blogging on your own web site, you should try to integrate the RSS Feed from your web site into those blog pages. RSS Feeds are the best possible automatic way of updating one-to-many, so use it to your advantage. Using your best content for link building Use the best articles from your web site to get into the picture of social bookmarking web sites. Find the most visited pages and the pages with the greatest number of comments, if you have a blog on your Joomla! site. Go to bookmarking sites and bookmark your pages using your own account. There are a lot of bookmarking web sites that you can use, just make sure you send your bookmarks to at least the following: Delicous Digg Reddit Newsvine Bloglines StumbleUpon These are some of the most influential ones that count towards your search engine ranking and are a great way to get traffic. Traffic from this kind of web site will come in bursts and mostly will not span a longer time period than a few days. The real power lies in the long term effect. Writing articles for links If you like writing about your passion, you can consider writing articles and submitting them to article publishing services. People are always looking for information and, if you can provide that to them in a smart way, it will help you to gain recognition as a field expert. You don't have to write long articles, but they must be informative and should give the reader an answer to a question they might have. Write those articles and submit them to services such as: www.thewhir.com www.ideamarketers.com www.goarticles.com www.ezinearticles.com Each of those services have their own "Terms of Service" that you should read before submitting your articles. They have their quality guidelines as well. The length of the article might need to be of a certain minimum or maximum number of characters. You might not be permitted to link deeper into your web site than the top level. Get that information before you choose a service to work with. Depending on the number of webmasters that will use your articles to republish, you could get a lot more incoming links from just a few well-written articles. What you should NOT do is take an old article from your site and send it as an article to be republished. That could backfire, as the services mentioned have a clause in their "Terms of Service" stating that the article is original and not published before. You should really not republish an already submitted article on your own web site, it could give your site a duplicate content penalty as that article will be published all over the Internet (with your link in it). An alternative could be that you publish some of your articles combined and rewritten into an e-book in PDF format that you give away for free from your web site.  

In this article by Kae Verens, we will look at: How to install and use the DataTables plugin How to load data pages on request from the server Searching and ordering the data From time to time, you will want to show data in your website and allow the data to be sorted and searched. It always impresses me that whenever I need to do anything with jQuery, there are usually plugins available, which are exactly or close to what I need. The DataTables plugin allows sorting, filtering, and pagination on your data. Here's an example screen from the project we will build in this article. The data is from a database of cities of the world, filtered to find out if there is any place called nowhere in the world: Get your copy of DataTables from http://www.datatables.net/, and extract it into the directory datatables, which is in the same directory as the jquery.min.js file. What the DataTables plugin does is take a large table, paginate it, and allow the columns to be ordered, and the cells to be filtered. Setting up DataTables Setting up DataTables involves setting up a table so that it has distinct < thead > and < tbody > sections, and then simply running dataTable() on it. As a reminder, tables in HTML have a header and a body. The HTML elements < thead > and < tbody > are optional according to the specifications, but the DataTables plugin requires that you put them in, so that it knows what to work with. These elements may not be familiar to you, as they are usually not necessary when you are writing your web pages and most people leave them out, but DataTables needs to know what area of the table to turn into a navigation bar, and which area will contain the data, so you need to include them. Client-side code The first example in this article is purely a client-side one. We will provide the data in the same page that is demonstrating the table. Copy the following code into a file in a new demo directory and name it tables.html: <html> <head> <script src="../jquery.min.js"></script> <script src="../datatables/media/js/jquery.dataTables.js"> </script> <style type="text/css"> @import "../datatables/media/css/demo_table.css";</style> <script> $(document).ready(function(){ $('#the_table').dataTable(); }); </script> </head> <body> <div style="width:500px"> <table id="the_table"> <thead> <tr> <th>Artist / Band</th><th>Album</th><th>Song</th> </tr> </thead> <tbody> <tr><td>Muse</td> <td>Absolution</td> <td>Sing for Absolution</td> </tr> <tr><td>Primus</td> <td>Sailing The Seas Of Cheese</td> <td>Tommy the Cat</td> </tr> <tr><td>Nine Inch Nails</td> <td>Pretty Hate Machine</td> <td>Something I Can Never Have</td> </tr> <tr><td>Horslips</td> <td>The Táin</td> <td>Dearg Doom</td> </tr> <tr><td>Muse</td> <td>Absolution</td> <td>Hysteria</td> </tr> <tr><td>Alice In Chains</td> <td>Dirt</td> <td>Rain When I Die</td> </tr> <!-- PLACE MORE SONGS HERE --> </tbody> </table> </div> </body> </html> When this is viewed in the browser, we immediately have a working data table: Note that the rows are in alphabetical order according to Artist/Band. DataTables automatically sorts your data initially based on the first column. The HTML provided has a < div > wrapper around the table, set to a fixed width. The reason for this is that the Search box at the top and the pagination buttons at the bottom are floated to the right, outside the HTML table. The < div > wrapper is provided to try to keep them at the same width as the table. There are 14 entries in the HTML, but only 10 of them are shown here. Clicking the arrow on the right side at the bottom-right pagination area loads up the next page: And finally, we also have the ability to sort by column and search all data: In this screenshot, we have the data filtered by the word horslips, and have ordered Song in descending order by clicking the header twice. With just this example, you can probably manage quite a few of your lower-bandwidth information tables. By this, I mean that you could run the DataTables plugin on complete tables of a few hundred rows. Beyond that, the bandwidth and memory usage would start affecting your reader's experience. In that case, it's time to go on to the next section and learn how to serve the data on demand using jQuery and Ajax. As an example of usage, a user list might reasonably be printed entirely to the page and then converted using the DataTable plugin because, for smaller sites, the user list might only be a few tens of rows and thus, serving it over Ajax may be overkill. It is more likely, though, that the kind of information that you would really want this applied to is part of a much larger data set, which is where the rest of the article comes in! Getting data from the server The rest of the article will build up a sample application, which is a search application for cities of the world. This example will need a database, and a large data set. I chose a list of city names and their spelling variants as my data set. You can get a list of this type online by searching. The exact point at which you decide a data set is large enough to require it to be converted to serve over Ajax, instead of being printed fully to the HTML source, depends on a few factors, which are mostly subjective. A quick test is: if you only ever need to read a few pages of the data, yet there are many pages in the source and the HTML is slow to load, then it's time to convert. The database I'm using in the example is MySQL (http://www.mysql.com/). It is trivial to convert the example to use any other database, such as PostgreSQL or SQLite. For your use, here is a short list of large data sets: http://wordlist.sourceforge.net/—Links to collections of words. http://www.gutenberg.org/wiki/Gutenberg:Offline_Catalogs—A list of books placed online by Project Gutenburg. http://www.world-gazetteer.com/wg.php?men=stdl—A list of all the cities in the world, including populations. The reason I chose a city name list is that I wanted to provide a realistic large example of when you would use this. In your own applications, you might also use the DataTables plugin to manage large lists of products, objects such as pages or images, and anything else that can be listed in tabular form and might be very large. The city list I found has over two million variants in it, so it is an extreme example of how to set up a searchable table. It's also a perfect example of why the Ajax capabilities of the DataTables project are important. Just to see the result, I exported all the entries into an HTML table, and the file size was 179 MB. Obviously, too large for a web page. So, let's find out how to break the information into chunks and load it only as needed. Client-side code On the client side, we do not need to provide placeholder data. Simply print out the table, leaving the < tbody > section blank, and let DataTables retrieve the data from the server. We're starting a new project here, so create a new directory in your demos section and save the following into it as tables.html: <html> <head> <script src="../jquery.min.js"></script> <script src="../datatables/media/js/jquery.dataTables.js"> </script> <style type="text/css"> @import "../datatables/media/css/demo_table.css"; table{width:100%} </style> <script> $(document).ready(function(){ $('#the_table').dataTable({ 'sAjaxSource':'get_data.php' }); }); </script> </head> <body> <div style="width:500px"> <table id="the_table"> <thead> <tr> <th>Country</th> <th>City</th> <th>Latitude</th> <th>Longitude</th> </tr> </thead> <tbody> </tbody> </table> </div> </body> </html> In this example, we've added a parameter to the .dataTable call, sAjaxSource, which is the URL of the script that will provide the data (the file will be named get_data.php). Server-side code On the server side, we will start off by providing the first ten rows from the database. DataTables expects the data to be returned as a two-dimensional array named aaData. In my own database, I've created a table like this: CREATE TABLE `cities` ( `ccode` char(2) DEFAULT NULL, `city` varchar(87) DEFAULT NULL, `longitude` float DEFAULT NULL, `latitude` float DEFAULT NULL, KEY `city` (`city`(5)) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 Most of the searching will be done on city names, so I've indexed city. Initially, let's just extract the first page of information. Create a file called get_data.php and save it in the same directory as tables.html: <?php // { initialise variables $amt=10; $start=0; // } // { connect to database function dbRow($sql){ $q=mysql_query($sql); $r=mysql_fetch_array($q); return $r; } function dbAll($sql){ $q=mysql_query($sql); while($r=mysql_fetch_array($q))$rs[]=$r; return $rs; } mysql_connect('localhost','username','password'); mysql_select_db('phpandjquery'); // } // { count existing records $r=dbRow('select count(ccode) as c from cities'); $total_records=$r['c']; // } // { start displaying records echo '{"iTotalRecords":'.$total_records.', "iTotalDisplayRecords":'.$total_records.', "aaData":['; $rs=dbAll("select ccode,city,longitude,latitude from cities order by ccode,city limit $start,$amt"); $f=0; foreach($rs as $r){ if($f++) echo ','; echo '["',$r['ccode'],'", "',addslashes($r['city']),'", "',$r['longitude'],'", "',$r['latitude'],'"]'; } echo ']}'; // } In a nutshell, what happens is that the script counts how many cities are there in total, and then returns that count along with the first ten entries to the client browser using JSON as the transport.

Activity 3: Investigating texts using Quiz Aim: Using quiz to investigate texts Moodle modules: Quiz Extra programs: None Ease of setup: *** As noted elsewhere, Quiz can be a useful module for practicing different language skills. This is primarily because we can build in helpful feedback and because we can allow students to spend as much time as they want practicing. There are various ways that Quiz can help students listen. Here are some examples: Listening and matching: students listen for gist information and match answers to general questions about the text. Ordering task for arranging events in a sequence. Multiple-choice for information transfer, identifying speakers' attitudes, and identifying numbers. Gap-fill tasks: Students listen to a song, poem, or other text, and fill in the missing words. It's worth thinking carefully about what sorts of words you want to blank out. Do you want to focus on grammar words (prepositions, pronouns, and conjunctions, etc.), words that are difficult to spell, or keywords (words that convey the main meaning of the text)? To exemplify each of these examples, we'll make one quiz with four different question types. You could choose to have quizzes with any number of different question types. We'll take as our listening text a story which we recorded ourselves. We could record it in a recording program like Audacity. The story is about a rather special trip to the zoo. Here is a possible transcript abridged from http://www.onlyfunnystories.com/ZooJob.asp: One day an out of work mime artist is visiting the zoo and attempts to earn some money as a street performer monkey. As soon as he starts to draw a crowd, a zoo keeper grabs him and drags him into his office. The zoo keeper explains to the mime artist that the zoo's most popular attraction, a gorilla, has died suddenly and the keeper fears that attendance at the zoo will fall off. He offers the mime artist a job to dress up as the gorilla until they can get another one. The mime artist accepts. So the next morning the mime artist puts on the gorilla suit and enters the cage before the crowd comes. He discovers that it's a great job. He can sleep all he wants, play and make fun of people and he draws bigger crowds than he ever did as a mime. However, eventually the crowds tire of him and he tires of just swinging on trees. He begins to notice that the people are paying more attention to the lion in the cage next to his. Not wanting to lose the attention of his audience, he climbs to the top of his cage, crawls across a partition, and dangles from the top to the lion's cage. Of course, this makes the lion furious, but the crowd loves it. At the end of the day the zoo keeper comes and gives the mime artist a raise for being such a good attraction. Well, this goes on for some time, the mime keeps taunting the lion, the crowds grow larger, and his salary keeps going up. Then one terrible day when he is dangling over the furious lion he slips and falls. The mime artist is terrified. The lion gathers itself and prepares to pounce. The mime artist is so scared that he begins to run round and round the cage with the lion close behind. Finally, the mime artist starts screaming and yelling, "Help me, help me!", but the lion is quick and pounces. The mime artist soon finds himself flat on his back looking up at the angry lion and the lion says, "Shut up you idiot! Do you want to get us both fired?" The questions start with general gist questions (matching). Then comes an ordering question, which requires slightly more attention to detail. The last two are multiple-choice and gap-fill questions, which get students to focus on detailed aspects of the listening text. Here's how to do it The following sections refer you to the activities and point out any major differences. Setting up the quiz Listening and matching question Use NanoGong to create sound clips which replace pictures and texts. Here are some examples of the matching questions you could set up. These are general questions which help students get the gist of the story. Question Answer How many animals are there in the story?. Three Where does this take place? The zoo Where does the zoo keeper find the mime artist? On the street How many animals are there in the cages? Two This is what your matching question might look like: Here are a few more matching questions you could consider: Match recordings to pictures. Students could hear a description of an image (painting, photo) and identify the description. The easiest way to do this would be to take some photos of similar scenes. Match individual words to sounds. Students hear the recording and decide which words they are hearing. Recording Choice A. "I hear you're coming"   B."It's over here" hear/here   hear/here Ordering question In this variation students listen to a story and then order events in sequence. We need to make sure that the sequence is not guessable without hearing the story. Here are the stages from our story that you could include in the question: The zookeeper grabs the mime artist. The zookeeper offers the mime artist a job. The gorilla lies on top of the neighboring cage. The lion tries to attack the gorilla. The lion tells the gorilla off. This is what the ordering question would look like: Multiple-choice question Multiple-choice questions are a good way of getting students to investigate texts in more detail. Here are some possible questions we could include in this activity. Question 1 According to the story, why does the mime artist accept a job as a gorilla? Answer 1 His work on the street isn't going well. Answer 2 The zookeeper has an urgent need for a gorilla. Answer 3 He always wanted to work as a gorilla in a zoo. Answer 4 The last gorilla quit the job.

A game needs sound, music and video. It has to offer the player attractive background music. It must also generate sounds associated with certain game events. When a spaceship shoots a laser beam, a sound must accompany this action. Reproducing videos showing high-quality previously rendered animations is a good idea during transitions between one stage and the next. Hear the UFOs coming So far, we have worked with 3D scenes showing 3D models with textures and different kinds of lights. We took advantage of C# object-oriented capabilities and we animated 3D models and moved the cameras. We have read values from many different input devices and we added physics, artificial intelligence, amazing effects, gauges, statistics, skill levels, environments, and stages. However, the game does not use the speakers at all because there is no background music and there are no in-game sounds. Thus, we have to sort this issue out. Modern games use videos to dazzle the player before starting each new stage. They use amazing sound eff ects and music custom prepared for the game by renowned artists. How can we add videos, music, and sounds in Silverlight? We can do this by taking advantage of the powerful multimedia classes offered by Silverlight 3. However, as a game uses more multimedia resources than other simpler applications, we must be careful to avoid including unnecessary resources in the files that must be downloaded before starting the application. Time for action – installing tools to manipulate videos The 3D digital artists used Blender to create an introductory video showing a high quality rendered animation for five seconds. They took advantage of Blender's animation creation features, as shown in the following screenshot: A spaceship flies in a starry universe for a few seconds. Then, the camera navigates through the stars. Your project manager wants you to add this video as an introduction to the game. However, as the video file is in AVI (Audio Video Interleave) format and Silverlight 3 does not support this format, you have to convert the video to an appropriate format. The creation of video animations for a game is very complex and requires specialist skills. We are going to simplify this process by using an existing video. First, we must download and install an additional tool that will help us in converting an existing video to the most appropriate file formats used in Silverlight 3: The necessary tools will depend on the applications the digital artists use to create the videos. However, we will be using some tools that will work fine with our examples. Download one of the following files: parceApplication's name Download link File name Description Expression Encoder 2 http://www.microsoft.com/expression/try-it/try-it-v2.aspx Encoder_Trial_en.exe It is a commercial tool, but the trial offers a free fully functional version for 30 days. This tool will enable us to encode videos to the appropriate format to use in Silverlight 3. Expression Encoder 3 http://www.microsoft.com/expression/try-it Encoder_Trial_en.exe It is the newest trial version of the aforementioned commercial tool. Run the installers and follow the steps to complete the installation wizards. If you installed Expression Encoder 2, download and install its Service Pack 1. The download link for it is http://www.microsoft.com/expression/tryit/try-it-v2.aspx#encodersp1 file name—EncoderV2SP1_en.exe. Once you have installed one of the versions of Expression Encoder, you will be able to load and encode many video files in different file formats, as shown in the following screenshot:

Placing buttons in a toolbar You can embed different types of components in a toolbar. This topic teaches you how to build a toolbar that contains image-only, text-only and image/text buttons, a toggle button, and a combo box. How to do it Create the styles for the toolbar items: #tbar{ width:600px;}.icon-data{ background:url(img/data.png) 0 no-repeat !important;}.icon-chart{ background:url(img/pie-chart.png) 0 no-repeat !important;}.icon-table{ background:url(img/table.png) 0 no-repeat !important;} Define a data store for the combo box: Ext.onReady(function() { Ext.QuickTips.init(); var makesStore = new Ext.data.ArrayStore({ fields: ['make'], data: makes // from cars.js }); Create a toolbar and define the buttons and combo box inline: var tb = new Ext.Toolbar({ renderTo: 'tbar', items: [{ iconCls: 'icon-data', tooltip: 'Icon only button', handler:clickHandler }, '-', { text: 'Text Button' }, '-', { text: 'Image/Text Button', iconCls: 'icon-chart' }, '-', { text: 'Toggle Button', iconCls: 'icon-table', enableToggle: true, toggleHandler: toggleHandler, pressed: true }, '->', 'Make: ', { xtype: 'combo', store: makesStore, displayField: 'make', typeAhead: true, mode: 'local', triggerAction: 'all', emptyText: 'Select a make...', selectOnFocus: true, width: 135 }]}); Finally, create handlers for the push button and the toggle button: function clickHandler(btn) { Ext.Msg.alert('clickHandler', 'button pressed');}function toggleHandler(item, pressed) { Ext.Msg.alert('toggleHandler', 'toggle pressed');} How it works The buttons and the combo box are declared inline. While the standard button uses a click handler through the handler config option, the toggle button requires the toggleHandler config option.The button icons are set with the iconCls option, using the classes declared in the first step of the topic. As an example, note the use of the Toolbar.Separator instances in this fragment: }, '-', { text: 'Text Button'}, '-', { text: 'Image/Text Button', iconCls: 'icon-chart'}, '-', { Using '-' to declare a Toolbar.Separator is equivalent to using xtype: 'tbseparator'. Similarly, using '->' to declare Toolbar.Fill is equivalent to using xtype:'tbfill'. See also... The next recipe, Working with the new ButtonGroup component, explains how to use the ButtonGroup class to organize a series of related buttons Working with the new ButtonGroup component A welcome addition to Ext JS is the ability to organize buttons in groups. Here's how to create a panel with a toolbar that contains two button groups: How to do it Create the styles for the buttons: #tbar{ width:600px;}.icon-data{ background:url(img/data.png) 0 no-repeat !important;}.icon-chart{ background:url(img/pie-chart.png) 0 no-repeat !important;}.icon-table{ background:url(img/table.png) 0 no-repeat !important;}.icon-sort-asc{ background:url(img/sort-asc.png) 0 no-repeat !important;}.icon-sort-desc{ background:url(img/sort-desc.png) 0 no-repeat !important;}.icon-filter{ background:url(img/funnel.png) 0 no-repeat !important;} Define a panel that will host the toolbar: Ext.onReady(function() { var pnl = new Ext.Panel({ title: 'My Application', renderTo:'pnl-div', height: 300, width: 500, bodyStyle: 'padding:10px', autoScroll: true, Define a toolbar inline and create two button groups: tbar: [{ xtype: 'buttongroup', title: 'Data Connections', columns: 1, defaults: { scale: 'small' }, items: [{ xtype:'button', text: 'Data Sources', iconCls:'icon-data' }, { xtype: 'button', text: 'Tables', iconCls: 'icon-table' }, { xtype: 'button', text: 'Reports', iconCls: 'icon-chart' }]}, { xtype: 'buttongroup', title: 'Sort & Filter', columns: 1, defaults: { scale: 'small' }, items: [{ xtype: 'button', text: 'Sort Ascending', iconCls: 'icon-sort-asc' }, { xtype: 'button', text: 'Sort Descending', iconCls: 'icon-sort-desc' }, { xtype: 'button', text: 'Filter', iconCls: 'icon-filter' }]}] How it works Using a button group consists of adding a step to the process of adding buttons, or other items, to a toolbar. Instead of adding the items directly to the toolbar, you need to firstly define the group and then add the items to the group: tbar: [{ xtype: 'buttongroup', title: 'Data Connections', columns: 1, defaults: { scale: 'small' }, items: [{ xtype:'button', text: 'Data Sources', iconCls:'icon-data' }, { xtype: 'button', text: 'Tables', iconCls: 'icon-table' }, { xtype: 'button', text: 'Reports', iconCls: 'icon-chart' }]} See also... The next recipe, Placing buttons in a toolbar, illustrates how you can embed different types of components in a toolbar Placing menus in a toolbar In this topic, you will see how simple it is to use menus inside a toolbar. The panel's toolbar that we will build, contains a standard button and a split button, both with menus: How to do it Create the styles for the buttons: #tbar{ width:600px;}.icon-data{ background:url(img/data.png) 0 no-repeat !important;}.icon-chart{ background:url(img/pie-chart.png) 0 no-repeat !important;}.icon-table{ background:url(img/table.png) 0 no-repeat !important;} Create a click handler for the menus: Ext.onReady(function() { Ext.QuickTips.init(); var clickHandler = function(action) { alert('Menu clicked: "' + action + '"');}; Create a window to host the toolbar: var wnd = new Ext.Window({ title: 'Toolbar with menus', closable: false, height: 300, width: 500, bodyStyle: 'padding:10px', autoScroll: true, Define the window's toolbar inline, and add the buttons and their respective menus: tbar: [{ text: 'Button with menu', iconCls: 'icon-table', menu: [ { text: 'Menu 1', handler:clickHandler.createCallback('Menu 1'), iconCls: 'icon-data' }, { text: 'Menu 1', handler: clickHandler.createCallback('Menu 2'), iconCls: 'icon-data'}]}, '-',{ xtype: 'splitbutton', text: 'Split button with menu', iconCls: 'icon-chart', handler: clickHandler.createCallback('Split button with menu'), menu: [ { text: 'Menu 3', handler: clickHandler.createCallback('Menu 3'), iconCls: 'icon-data' }, { text: 'Menu 4', handler: clickHandler.createCallback('Menu 4'), iconCls: 'icon-data'}] }]}); Finally, show the window: wnd.show(); How it works This is a simple procedure. Note how the split button is declared with the xtype: 'splitbutton' config option. Also, observe how the createCallback() function is used to invoke the clickHandler() function with the correct arguments for each button. See also... The next recipe, Commonly used menu items, shows the different items that can be used in a menu Commonly used menu items To show you the different items that can be used in a menu, we will build a menu that contains radio items, a checkbox menu, a date menu, and a color menu.This is how the radio options and checkbox menu will look: The Pick a Date menu item will display a date picker, as shown in the next screenshot: The Pick a Color menu item displays a color picker, as seen here: How to do it Create a handler for the checkbox menu: Ext.onReady(function() { Ext.QuickTips.init(); var onCheckHandler = function(item, checked) { Ext.Msg.alert('Menu checked', item.text + ', checked: ' + (checked ? 'checked' : 'unchecked')); }; Define a date menu: var dateMenu = new Ext.menu.DateMenu({ handler: function(dp, date) { Ext.Msg.alert('Date picker', date); }}); Define a color menu: var colorMenu = new Ext.menu.ColorMenu({ handler: function(cm, color) { Ext.Msg.alert('Color picker', String.format('You picked {0}.', color)); }}); Create a main menu. Now add the date and color menus, as well as a few inline menus: var menu = new Ext.menu.Menu({ id: 'mainMenu', items: [{ text: 'Radio Options', menu: { items: [ '<b>Choose a Theme</b>', { text: 'Aero Glass', checked: true, group: 'theme', checkHandler: onCheckHandler }, { text: 'Vista Black', checked: false, group: 'theme', checkHandler: onCheckHandler }, { text: 'Gray Theme', checked: false, group: 'theme', checkHandler: onCheckHandler }, { text: 'Default Theme', checked: false, group: 'theme', checkHandler: onCheckHandler } ] } }, { text: 'Pick a Date', iconCls: 'calendar', menu: dateMenu }, { text: 'Pick a Color', menu: colorMenu }, { text: 'The last menu', checked: true, checkHandler: onCheckHandler }]}); Create a toolbar and add the main menu: var tb = new Ext.Toolbar({ renderTo: 'tbar', items: [{ text: 'Menu Items', menu: menu }]}); How it works After defining the date and color pickers, the main menu is built. This menu contains the pickers, as well as a few more items that are defined inline. To display checked items (see the checked: true config option) with a radio button instead of a checkbox, the menu items need to be defined using the group config option. This is how the theme selector menu is built: menu: { items: [ '<b>Choose a Theme</b>', { text: 'Aero Glass', checked: true, group: 'theme', checkHandler: onCheckHandler }, { text: 'Vista Black', checked: false, group: 'theme', checkHandler: onCheckHandler See also... The Placing buttons in a toolbar recipe (covered earlier in this article) illustrates how you can embed different types of components in a toolbar >> Continue Reading Making Progress with Menus and Toolbars using Ext JS 3.0: Part 2 [ 1 | 2 ]   If you have read this article you may be interested to view : Making Progress with Menus and Toolbars using Ext JS 3.0: Part 2 Load, Validate, and Submit Forms using Ext JS 3.0: Part 1 Load, Validate, and Submit Forms using Ext JS 3.0: Part 2 Load, Validate, and Submit Forms using Ext JS 3.0: Part 3

Media Manager As its name suggests, the Media Manager is the place to keep track of and organize all your media files within folders and subfolders. You can use it to upload files, delete old material, or create new folders. Accessing and using the Media Manager The interface within the Media Manager is graphical and similar to other file explorer programs you will have definitely used within a Windows environment. Like any of the sections of the administration control panel, you can access the Media Manager either by: Clicking Site | Media Manager from the top menu Clicking the Media Manager icon on the Control Panel You can switch your view of the files within the Media Manager to suit your preference, as both provide the same level of functionality: Click Thumbnail View to see small graphic versions of your files, handy when you want to find an image Click Detail View to see the names of your files along with the dimensions and sizes The following screenshot illustrates the use of the thumbnail view: The Folders section to the left of the Media Manager interface displays the site folders. Click one to open and reveal any subfolders within it. Within your site there will most likely be a subfolder within the images folder called stories, that is, images | stories. This is generally where the site images will have been placed and is where the Image Upload button defaults to when you add an image to an Article. You can also create new folders in here to store additional media. Using the Party People website, we have created a new article and now need to add an image that doesn't fit in with the established folder structure. Creating a new subfolder It may be that after adding a new Section and/or Category, none of the existing image folder structures apply. Here we'll create a new subfolder called glassware to accommodate the new material: Navigate to the Media Manager through the top menu or by clicking the Media Manager icon on the home page of the Control Panel. Click on the stories folder in the Media Manager. Note that the Media Manager opens directly into the images folder (this is set in the Global Configuration area and can be changed if necessary). Type in glassware as the name of the new folder and click the Create Folder button. The new subfolder will appear instantly. Now that we have the new glassware subfolder we can upload a new image to store in it using the Upload File tool. A note on copyright While you may have your own images and videos to use on your website, if you are considering using another artist's material and content, always ensure you have copyright permission or the license to do so in order to avoid breach of any copyright laws. You should refer to your local authority for full details. Many website developers and owners regularly purchase and use stock photography, illustrations, and videos. If you choose to purchase any material for your site, ensure you are purchasing it with the right license, as there may be restrictions on its use even after paying for the material. This may, in fact, be a license fee and not a transfer of complete ownership. Sites such as http://www.istockphoto.com/license.php have a page dedicated to licensing agreements around purchasing their material. What you should know about image and video files Have you ever visited a website where a large image takes forever to download? Or the video takes forever to start playing? Chances are that you gave up and left the site. While it doesn't happen quite so much now, take care to avoid this wherever possible. As a general rule, the larger the file size, the longer it takes to download into the browser, and not all users of your website may have fast download speeds. To ensure your images are downloaded as quickly as possible, ensure your files are formatted and compressed into as low a resolution version as possible (without losing the quality) and the dimensions of the videos displayed kept to minimum viewing sizes. There is a trade-off between quality of the image and download speed; compromise is the key here. Audio, video, and animation files can be referred to collectively as multimedia, especially when they are combined within a project. Choosing the best image file format Images come in a variety of file formats and some are smaller in size than others. There are other image file formats, but the following are often used within websites: .jpg files are great for highly detailed images such as photographs. As a result, their file size is generally bigger due to the amount of information they require to present the detail. .gif files are suited to images requiring less detail, such as drawings or diagrams, and are smaller in file size as a result. .png files are similar to .gif files, as they are also low resolution images. They often have a transparent background so you can place them over a colored background and the color will appear behind the image. Remember the following when applying images to your website: Use images with a purpose—to enhance or illustrate your content. Keep file sizes as small as possible. Consider a .gif rather than a .jpg if the image isn't a particularly detailed one. Use photo editing software to reduce the resolution of your image to 72dpi for fastest download time. Anything higher is pointless, as computer monitors only present a certain number of colors and drop the excess. If you don't have access to software such as Photoshop, there are a number of free possibilities. One is a program called GIMP (http://www.gimp.org). It's a free program that allows you to retouch photos and create and edit images. The website has tutorials as well. Adding and managing images Having covered editing and adding text to an article, updating and/or adding new images or other media to your articles is easy too. In this section, we'll work on adding and deleting images and cover some general information on how they can work best for your site. Uploading a new image The File Upload tool within the Media Manager makes it easy to move your images from your computer into your website folders. Select the new glassware subfolder within the Folders structure. This places us in that folder. Click the Browse button under the Upload File section. Navigate to the image file in the pop-up window and click Open. Click the Start Upload button back in the Media Manager. Now we have an image within the glassware folder, it's ready to be used within anarticle. Note that the following screenshot presents the Details View. Deleting an image You might find that as your website consumes more space on the server, you may have to delete some image files. However, be careful doing this, as you don't get a warning! Ensure your site does not require the image anymore, as you will end up with a blank area with a red square in it where the image should be, and that looks unprofessional. Using Thumbnail View within the Media Manager, select the checkbox under the image thumbnail or next to the filename. Click the red "x" icon next to it in order to immediately delete that file, as shown in the following screenshot. You can also use the Delete button in the contextual toolbar at the top right. Updating a Simple Image Gallery Rather than a single image, you might have an article with a Simple Image Gallery embedded within it that presents a selection of thumbnail images to the browser through the article. The gallery plugin parameters can be accessed through the Extensions | Plugins menu along the top of the administration interface. The following screenshot is an example of how one looks on the Party People website. Using the Party People website, we'll update this New Balloons in Stock Now! gallery applying the Balloons folder we made earlier. However, remember that the authors of this plugin recommend only 16 to 20 images per gallery. Navigate to the Media Manager and to the balloons folder. Upload the additional images to the balloons folder using the File Upload tool as outlined in the Uploading a file section of this article. Delete any outdated images, if necessary, by selecting them and clicking the Delete button, as outlined in the Deleting a File section of this article. To display the new images from a different folder in the article, we will need to access the article through which the gallery is presented: Navigate to the Article Manager and open the article containing the gallery of images. You will see something like the following code within the Article's text editor: {gallery}galleryNameIsHere{/gallery} Change this to balloons as in the folder where the balloon images are kept. The following screenshot illustrates the code snippet where you should change the folder name. Apply your changes and review them before going live. Changing the Simple Image Gallery's dimensions If the dimensions of the image gallery, such as the height and width, need to be changed, there are the following steps: Navigate to the Extensions menu using the global menu at the top of the screen. Select Plugin Manager from the drop-down list and navigate through the list until you see the Simple Image Gallery Plugin link in the list. To make this quicker, use the Select Type filter and choose Content. Ensure this plugin is enabled in the Plugin Manager. Click the link to view the parameters for this plug-in; change them as you like. Note that your developer may have changed the name of the module when it was installed. >> Continue Reading Managing Images and Videos in Joomla! 1.5: Part 2 [ 1 | 2 ]