Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Events
Videos
Audiobooks
Packt Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds

How-To Tutorials

7018 Articles
article-image-ibm-cognos-insight
Packt
12 Sep 2013
9 min read
Save for later

IBM Cognos Insight

Packt
12 Sep 2013
9 min read
(For more resources related to this topic, see here.) An example case for IBM Cognos Insight Consider an example of a situation where an organization from the retail industry heavily depends on spreadsheets as its source of data collection, analysis, and decision making. These spreadsheets contain data that is used to analyze customers' buying patterns across the various products sold by multiple channels in order to boost the sales across the company. The analysis hopes to reveal customers' buying patterns demographically, streamline sales channels, improve supply chain management, give an insight into forecast spending, and redirect budgets to advertising, marketing, and human capital management, as required. As this analysis is going to involve multiple departments and resources working with spreadsheets, one of the challenges will be to have everyone speak in similar terms and numbers. Collaboration across departments is important for a successful analysis. Typically in such situations, multiple spreadsheets are created across resource pools and segregated either by time, product, or region (due to the technical limitations of spreadsheets) and often the analysis requires the consolidation of these spreadsheets to be able to make the educated decision. After the number-crunching, a consolidated spreadsheet showing high level summaries is sent out to executives, while the details remain on other tabs within the same spreadsheet or on altogether separate spreadsheet files. This manual procedure has a high probability of errors. The similar data analysis process in IBM Cognos Insight would result in faster decision making by keeping the details and the summaries in a highly compressed Online Analytical Processing (OLAP) in-memory cube. Using the intuitive drag-and-drop functionality or the smart-metadata import wizard, the spreadsheet data now appears instantaneously (due to the in-memory analysis) in a graphical and pivot table format. Similar categorical data values, such as customer, time, product, sales channel and retail location are stored as dimension structures. All the numerical values bearing factual data such as revenue, product cost, and so on, defined as measures are stored in the OLAP cube along with the dimensions. Two or more of these dimensions and measures together form a cube view that can be sliced and diced and viewed at a summarized or a detailed level. Within each dimension, elements such as customer name, store location, revenue amount generated, and so on, are created. These can be used in calculations and trend analysis. These dimensions can be pulled out on the analysis canvas as explorer points that can be used for data filtering and sorting. Calculations, business rules and differentiator metrics can be added to the cube view to enhance the analysis. After enhancements to the IBM Cognos Insight workspace have been saved, these workspaces or fi les can be e-mailed and distributed as offline analyses. Also, the users have the option to publish the workspace into the IBM Cognos Business Intelligence web portal, Cognos Connection or IBM Cognos Express, both of which are targeted to larger audiences, where this information can be shared with broader workgroups. Security layers can be included to protect sensitive data, if required. The publish-and-distribute option within IBM Cognos Insight is used for advanced analytics features and write-back functionality in larger deployments. where, the users can modify plans online or offline, and sync up to the enterprise environment on an as-and-when basis. As an example, the analyst can create what-if scenarios for business purposes to simulate the introduction of a new promotion price for a set of smart phones during high foot traffic times to drive up sales. Or simulating an extension of store hours during summer months to analyze the effects on overall store revenue can be created. The following diagram shows the step-by-step process of dropping a spreadsheet into IBM Cognos Insight and viewing the dashboard and the scorecard style reports instantaneously, which can then be shared on the IBM Cognos BI web-portal or published to an IBM TM1 environment. The preceding screenshot demonstrates the steps from raw data in spreadsheets being imported into IBM Cognos Insight to reveal a dashboard style report instantaneously. Additional calculations to this workspace creates scorecard type graphical variances, thus giving an overall picture through rich graphics. Using analytics successfully Over the past few years, there have been huge improvements in the technology and processes of gathering the data. Using Business Analytics and applications such as IBM Cognos Insight we can now analyze and accurately measure anything and everything. This leads to the question: Are we using Analytics successfully? The following high-level recommendations should be used as a guidance for organizations that are either attempting a Business Analytics implementation for the first time or for those who are already involved with Business Analytics, both working towards a successful implementation: The first step is to prioritize the targets that will produce intelligent analytics from the available trustworthy data. Choosing this target wisely and thoughtfully has an impact on the success rate of the implementation. Usually, these are high value targets that need problem solving and/or quick wins to justify the need and/or investment towards a Business Analytics solution. Avoid the areas with a potential for probable budget cuts and/or involving corporate cultural and political battles that are considered to be the major factors leading to an implementation pitfall. Improve your chances by asking the question—where will we achieve maximum business value? Selecting the appropriate product to deliver the technology is the key for success—a product that is suitable for all the skill levels and that can be supported by the organization's infrastructure. IBM Cognos Insight is one such product where the learning curve is minimal; thanks to its ease of use and vast features. The analysis produced by using IBM Cognos Insight can then be shared by publishing to an enterprise-level solution such as IBM Cognos BI, IBM Cognos Express, or IBM TM1. This product reduces dependencies on IT departments in terms of personnel and IT resources due to the small learning curve, easy setup, intuitive look, feel, and vast features. The sharing and collaborating capabilities eliminate the need for multiple silos of spreadsheets, one of the reasons why organizations want to move towards a more structured and regulated Enterprise Analytics approach. Lastly, organize a governing body such as a Analytics Competency Center (ACC) or Analytics Center of Excellence (ACE) that has the primary responsibility to do the following: Provide the leadership and build the team Plan and manage the Business Analytics vision and strategy (BA Roadmap) Act as a governing body maintaining standardization at the Enterprise level Develop, test, and deliver Business Analytic solutions Document all the processes and procedures, both functional and technical Train and support end users of Business Analytics Find ways to increase the Return on Investment (ROI) Integrate Business Analytics into newer technologies such as mobile and cloud computing The goals of a mature, enterprise-wide Analytics solution is when any employee within the organization, be it an analyst to an executive, or a member of the management team, can have their business-related questions answered in real time or near real time. These answers should also be able to predict the unknown and prepare for the unforeseen circumstances better. With the success of a Business Analytics solution and realized ROI, a question that should be asked is—are the solutions robust and flexible enough to expand regionally/globally? Also, can it sustain a merger or acquisition with minimal consolidation efforts? If the Business Analytics solution provides the confidence in all of the above, the final question should be—can the Business Analytics solution be provided as a service to the organizations' suppliers and customers? In 2012, a global study was conducted jointly by IBM's Institute of Business Value (IBV) and MIT Sloan Management Review. This study, which included 1700 CEOs globally, reinforced the fact that one of the top objectives within their organizations was sharing and collaboration. IBM Cognos Insight, the desktop analysis application, provides collaborative features that allow the users to launch development efforts via IBMs Cognos Business Intelligence, Cognos Express, and Performance Management enterprise platforms. Let us consider a fictitious company called PointScore. Having completed its marketing, sales, and price strategy analysis, PointScore is now ready to demonstrate its research and analysis efforts to its client. Using IBM Cognos Insight, PointScore has three available options. All of these will leverage the Cognos Suite of products that its client has been using and is familiar with. Each of these options can be used to share the information with a larger audience within the organization. Though technical, this article is written for a non-technical audience as well. IBM Cognos Insight is a product that has its roots embedded in Business Intelligence and its foundation is built upon Performance Management solutions. This article provides the readers with Business Analytics techniques and discusses the technical aspects of the product, describing its features and benefits. The goal of writing this article was to make you feel confident about the product. This article is meant to expand on your creativity so that you can build better analysis and workspaces using Cognos Insight. The article focuses on the strengths of the product, which is to share and collaborate the development efforts into an existing IBM Cognos BI, Cognos Express, or TM1 environment. This sharing is possible because of the tight integration among all the products under the IBM Business Analytics umbrella. Summary After reading this article, you should be able to tackle Business Analytics implementations It will also help you to leverage the sharing capability to reach an end goal of spreading the value of Business Analytics throughout their organizations. Resources for Article: Further resources on this subject: How to Set Up IBM Lotus Domino Server [Article] Tips and Tricks on IBM FileNet P8 Content Manager [Article] Reporting Planning Data in IBM Cognos 8: Publish and BI Integration [Article]
Read more
  • 0
  • 0
  • 2999

article-image-introducing-windows-store
Packt
12 Sep 2013
17 min read
Save for later

Introducing the Windows Store

Packt
12 Sep 2013
17 min read
(For more resources related to this topic, see here.) Developing a Windows Store app is not just about design, coding, and markup. A very essential part of the process that leads to a successful app is done on the Windows Store Dashboard. It is the place where you submit the app, pave its way to the market, and monitor how it is doing there. Also, it is the place where you can get all the information about your existing apps and where you can plan your next app. The submission process is broken down into seven phases. If you haven't already opened a Windows Store developer account, now is the time to do so because you will need it to access your Dashboard. Before you sign up, make sure you have a credit card. The Windows Store requires a credit card to open a developer account even if you had a registration code that entitles you to a free registration. Once signed in, locate your app listed on the home page under the Apps in progress section and click on Edit. This will direct you to the Release Summary page and the app will be titled AppName: Release 1. The release number will auto-increment each time you submit a new release for the same app. The Release Summary page lists the steps that will get your app ready for Windows Store certification. On this page, you can enter all the info about your Windows Store app and upload its packages for certification. At the moment you will notice that the two buttons at the bottom of the page labeled as Review release info and Submit app for certification are disabled and will remain so until all the previous steps have been marked Complete. The submission progress can always be saved to be resumed later, so it is not necessarily a one-time mission. We'll go over these steps one by one: App name: This is the first step and it includes reserving a unique name for the app. Selling details: This step includes selecting the following: The app price tier option sets the price of your app (for example, free or 1.99 USD). The free trial period option is the number of days the customer can use the app before they start paying to use it. This option is enabled only if the app price tier is not set to Free. The Market where you would like the app to be listed in the Windows Store. Bear in mind that if your app isn't free, your developer account must have a valid tax profile for each country/region you select. The release date option specifies the earliest date when the app will be listed in the Windows Store. The default option is to release as soon as the app passes the certification. The App category and subcategory option indicates where your app be listed in the Store, which in turn lists the apps under Categories. The Hardware requirements option will specify the minimum requirements for the DirectX feature level and the system RAM. The Accessibility option is a checkbox that when checked indicates that the app has been tested to meet accessibility guidelines. Services: In this step, you can add services to your app such as Windows Azure Mobile Services and Live Services. You can also provide products and features that the customer can buy from within the app called In-app offers. Age rating and rating certificates: In this step, you can set an age rating for the app from the available Windows Store age ratings. Also, you can upload country/region-specific rating certificates in case your app is a game. Cryptography: In this step, you specify if your app calls, supports, and contains or uses cryptography or encryption. The following are some of the examples of how an app might apply cryptography or encryption: Use of a digital signature such as authentication or integrity checking Encryption of any data or files that your app uses or accesses Key management, certificate management, or anything that interacts with a public key infrastructure Using a secure communication channel such as NTLM, Kerberos, Secure Sockets Layer (SSL), or Transport Layer Security (TLS) Encrypting passwords or other forms of information security Copy protection or digital rights management (DRM) Antivirus protection Packages: In this step, you can upload your app to the Store by uploading the .appxupload file that was created in Visual Studio during the package-creation process. We will shortly see how to create an app package. The latest upload will show on the Release Summary page in the packages box and should be labeled as Validation Complete. Description: In this step you can add a brief description (mandatory) on what the app does for your customers. The description has a 10,000-character limit and will be displayed in the details page of the app's listing in the Windows Store. Besides description, this step contains the following features: App features: This feature is optional. It allows you to list up to 20 of the app's key features. Screenshots: This feature is mandatory and requires to provide at least one .png file image; the first can be a graphic that represents your app but all the other images must be screenshots with a caption taken directly from the app. Notes: This feature is optional. Enter any other info that you think your customer needs to know; for example, changes in an update. Recommended hardware: This feature is optional. List the hardware configurations that the app will need to run. Keywords: This feature is optional. Enter keywords related to the app to help its listing appear in search results. Copyright and trademark info: This feature is mandatory. Enter the copyright and trademark info that will be displayed to customers in the app's listing page. Additional license terms: This feature is optional. Enter any changes to the Standard App License Terms that the customers accept when they acquire this app. Promotional images: This feature is optional. Add images that the editors use to feature apps in the Store. Website: This feature is optional. Enter the URL of the web page that describes the app, if any. Support contact info: This feature is mandatory. Enter the support contact e-mail address or URL of the web page where your customers can reach out for help. Privacy policy: This feature is optional. Enter the URL of the web page that contains the privacy policy. Notes to testers: This is the last step and it includes adding notes about this specific release for those who will review your app from the Windows Store team. The info will help the testers understand and use this app in order to complete their testing quickly and certify the app for the Windows Store. Each step will remain disabled until the preceding one is completed and the steps that are in progress are labeled with the approximate time (in minutes) it will take you to finish it. And whenever the work in a single step is done, it will be marked Complete on the summary page as shown in the following screenshot: Submitting the app for certification After all the steps are marked Complete, you can submit the app for certification. Once you click on Submit for certification, you will receive an e-mail notification that the Windows Store has received your app for certification. The dashboard will submit the app and you will be directed to the Certification status page. There, you can view the progress of the app during the certification process, which includes the following steps: Pre-processing: This step will check if you have entered all the required details that are needed to publish the app. Security tests: This step tests your app against viruses and malware. Technical compliance: This step involves the Windows App certification Kit to check if the app complies with the technical policies. The same assessment can be run locally using Visual Studio, which we will see shortly, before you upload your package. Content compliance: This step is done by testers from the Store team who will check if the contents available in the app comply with the content policies set by Microsoft. Release: This step involves releasing the app; it shouldn't take much time unless the publish date you've specified in Selling details is in the future, in which case the app will remain in this stage until that date arrives. Signing and publishing: This is the final step in the certification process. At this stage, the packages you submitted will be signed with a trusted certificate that matches the technical details of your developer account, thus guaranteeing for the potential customers and viewers that the app is certified by the Windows Store. The following screenshot shows the certification process on Windows Store Dashboard: No need to wait on that page; you can click on the Go to dashboard button and you will be redirected to the My apps page. In the box containing the app you just submitted, you will notice that the Edit and Delete links are gone, and instead there is only the Status link, which will take you to the Certification status page. Additionally, a Notifications section will appear on this page and will list status notifications about the app you just submitted, for example: BookTestApp: Release 1 submitted for certification. 6/4/2013 When the certification process is completed, you will be notified via e-mail with the result. Also, a notification will be added to the dashboard main page showing the result of the certification, either failed or succeeded, with a link to the certification report. In case the app fails, the certification reports will show you which part needs revisiting. Moreover, there are some resources to help you identify and fix the problems and errors that might arise during the certification process; these resources can be found at the Windows Dev Center page for Windows Store apps at the following location: http://msdn.microsoft.com/en-us/library/windows/apps/jj657968.aspx Also, you can always check your dashboard to check the status of your app during certification. After the certification process is completed successfully, the app package will be published to the Store with all the relevant data that will be visible in your app listing page. This page can be accessed by millions of Windows 8 users who will in turn be able to find, install, and use your app. Once the app has been published to the Store and it's up and running, you can start collecting telemetry data on how it is doing in the Store; these metrics include information on how many times the app has been launched, how long it has been running, and if it is crashing or encountering a JavaScript exception. Once you enable telemetry data collection, the Store will retrieve this info for your apps, analyze them, and summarize them in very informative reports on your dashboard. Now that we have covered almost everything you need to know about the process of submitting your app to the Windows Store, let us see what is needed to be done in Visual Studio. The Store within Visual Studio Windows Store can be accessed from within Visual Studio using the Store menu. Not all the things that we did on the dashboard can be done here; a few very important functionalities such as app package creation are provided by this menu. The Store menu can be located under the Project item in the menu bar using Visual Studio 2012 Ultimate, or if you are using Visual Studio 2012 Express, you can find it directly in the menu bar, and it will appear only if you're working on a Windows Store project or solution. We will get to see the commands provided by the Store menu in detail and the following is the screenshot that shows how the menu will look: The command options in the Store menu are as follows: Open Developer Account...: This option will open a web page that directs you to Windows Dev Center for Windows Store apps, where you can obtain a developer account for the Store. Reserve App Name...: This option will direct you to your Windows Store Dashboard and specifically to the Submit an app page, where you can start with the first step, reserving an app name. Acquire Developer License...: This option will open up a dialog window that will prompt you to sign in with your Microsoft Account; after you sign in, it will retrieve your developer license or renew it if you already have one. Edit App Manifest: This option will open a tab with Manifest Designer, so you can edit the settings in the app's manifest file. Associate App with the Store...: This option will open a wizard-like window in Visual Studio, containing the steps needed to associate an app with the Store. The first step will prompt you to sign in; afterwards, the wizard will retrieve the apps registered with the Microsoft Account you used to sign in. Select an app and the wizard will automatically download the following values to the app's manifest file for the current project on the local computer: Package's display name Package's name Publisher ID Publisher's display name Capture Screenshot...: This option will build the current app project and launch it in the simulator instead of the start screen. Once the simulator opens, you can use the Copy screenshot button on the simulator sidebar. This button will be used to take a screenshot of the running app that will save this image as a .png file. Create App Package...: This option will open a window containing the Create App Packages wizard that we will see shortly. Upload App Package...: This option will open a browser that directs you to the Release Summary page in the Windows Store Dashboard, if your Store account is all set and your app is registered. Otherwise, it will just take you to the sign-in page. In the Release Summary page, you can select Packages and from there upload your app package. Creating an App Package One of the most important utilities in the Store menu is the app package creation, which will build and create a package for the app that we can upload to the Store at a later stage. This package is consistent with all the app-specific and developer-specific details that the Store requires. Moreover, the developers do not have to worry about any of the intricacies of the whole package-creation process, which is abstracted for us and available via a wizard-link window. In the Create App Packages wizard, we can create an app package for the Windows Store directly, or create the one to be used for testing or local distribution. This wizard will prompt you to specify metadata for the app package. The following screenshot shows the first two steps involved in this process: In the first step, the wizard will ask you if you want to build packages to upload to the Windows Store; choose Yes if you want to build a package for the Store or choose No if you want a package for testing and local use. Taking the first scenario in consideration, click on Sign In to proceed and complete the sign-in process using your Microsoft Account. After a successful sign-in, the wizard will prompt you to select the app name (step 2 of the preceding screenshot) either by clicking on the apps listed in the wizard or choosing the Reserve Name link that will direct you to the Windows Store Dashboard to complete the process and reserve a new app name. The following screenshot shows step 3 and step 4: Step 3 contains the Select and Configure Packages section in which we will select Output location that points to where the package files will be created. Also, in this section we can enter a version number for this package or chose to make it auto-increment each time we package the app. Additionally, we can select the build configuration we want for the package from the Neutral, ARM, x64, and x86 options and by default, the current active project platform will be selected and a package will be produced for each configuration type selected. The last option in this section is the Include public symbol files option. Selecting this option will generate the public symbols files (.pdb) and add it to the package, which will help the store later in analyzing your app and will be used to map crashes of your app. Finally, click on Create and wait while the packaging is being processed. Once completed, the Package Creation Completed section appears (step 4) and will show Output location as a link that will direct you to the package files. Also, there is a button to directly launch the Windows App Certification Kit. Windows App Certification Kit will validate the app package against the Store requirements and generate a report of the validation. The following screenshot shows the window containing the Windows App Certification Kit process: Alternatively, there is a second scenario for creating an app package but it is more aimed at testing, which is identical to the process we just saw except that you have to choose No in the first page on the wizard and there is no need to sign-in with the Microsoft Account. This option will end the wizard when the package creation has completed and display the link to the output folder but you will not be able to launch the Windows App Certification Kit. The packages created with this option can only be used on a computer that has a developer license installed. This scenario will be used more often since the package for the Store should ideally be tested locally first. After creating the app package for testing or local distribution, you can install it on a local machine or device. Let's install the package locally. Start the Create App Packages wizard; choose No in the first step, complete the wizard, and find files of the app package just created in the output folder that you specified for the package location. Name this as PackageName_Test. This folder will contain an .appx file, a security certificate, a Windows PowerShell script, and other files. The Windows PowerShell script generated with the app package will be used to install the package for testing. Navigate to the Output folder and install the app package. Locate and select the script file named Add-AppDevPackage, and then right-click and choose Run with PowerShell as shown in the following screenshot: Run the script and it will perform the following steps: It displays information about Execution Policy Change and prompts about changing the execution policy. Enter Y to continue. It checks if you have a developer license; in case there wasn't any script, it will prompt you to get one. It checks and verifies whether the app package and the required certificates are present; if any item is missing, you will be notified to install them before the developer package is installed. It checks for and installs any dependency packages such as the WinJS library. It displays the message Success: Your package was successfully installed. Press Enter to continue and the window will close. The aforementioned steps are shown in the following screenshot: Once the script has completed successfully, you can look for your app on the Start screen and start it. Note that for users who are on a network and don't have permission to access the directory where the Add-AppDevPackage PowerShell script file is located, an error message might appear. This issue can be solved by simply copying the contents of the output folder to the local machine before running the script. Also, for any security-related issues, you might want to consult the Windows Developer Center for solutions. Summary In this article, we saw the ins and outs of the Windows Store Dashboard and we covered the steps of the app submission process leading to the publishing of the app in the Store. We also learned about the Store menu in Visual Studio and the options it provides to interact with the dashboard. Moreover, we learned how to create app packages and how to deploy the app locally for testing. Resources for Article: Further resources on this subject: WPF 4.5 Application and Windows [Article] HTML5 Canvas [Article] Responsive Design with Media Queries [Article]
Read more
  • 0
  • 0
  • 2442

article-image-video-conversion-required-html5-video-playback
Packt
12 Sep 2013
5 min read
Save for later

Video conversion into the required HTML5 Video playback

Packt
12 Sep 2013
5 min read
(For more resources related to this topic, see here.) If you have issues with Playback support and probably thinking that you would play any video in Windows Media Player, it is not so as Windows Media Player doesn't support all formats. This article will show you how to fix this and get them playing. Transcoding audio files (must know) We start this section by getting ready the files we are going to use later on—it is likely you may well have some music tracks already, but not in the right format. We will fix that in this task by using a shareware program called Switch Audio File Converter, which is available from http://www.nch.com.au/switch for approximately USD40. Getting ready For this task, you need download a copy of the Switch Sound Converter application—it is available from http://www.nch.com.au/switch/index.html. You may like to note that a license is required for encoding AMR files or using MP3 files in certain instances—these can be purchased at the same time as purchasing the main license. How to do it... The first thing to do is install the software, so let's go ahead and run switchsetup.exe—note that for the purposes of this demo, you should not select any of the additional related programs when requested. Double-click the application to open it, then click on Add File and browse to, and then select the file you want to convert: Click on Output Format and change it to .ogg—it will automatically download the required converter as soon as you click on Convert. The file is saved by default into your Music folder underneath your profile. How it works... Switch Sound File Converter has been designed to make the conversion process as simple as possible—this includes downloading any extra components that are required for the purposes of encoding or decoding audio files. You can alter the encoding settings, although you should find that for general use this may not be necessary. There's more... There are lots of converters available that you can try—I picked this one as it is quick and easy to use, and doesn't have a large footprint (unlike some others). If you prefer, you can also use online services to accomplish the same task—two examples include Fre:ac (http://www.freac.org) or Online-Convert.com (http://www.online-convert.com). Note though that some sites will take note of details such as your IP address or what it is you are converting as well as store copies for a period of time. Installing playback support: codecs (Must know) Now that we have converted our audio files ready for playback—it's time to ensure that we can actually play them back in our PCs as well as in our browsers. Most of the latest browsers will play at least one of the formats we've created in the previous task but it is likely that you won't be able to play them outside of the browser. Let's take a look at how we can fix this by updating the codecs installed in your PC. For those of you not familiar with codecs, they are designed to help encode assets when the audio file is created and decode them as part of playback. Software and hardware makers will decide the makeup of each codec based on which containers and technologies they should support; a number of factors such as file size, quality, and bandwidth all play a part in their decisions. Let's take a look at how we can update our PCs to allow for proper playback of HTML5 video. Getting ready There are lots of individuals or companies who have produced different codecs, with differing results. We will take a look at one package that seems to work very well for Windows, which is the K-Lite Codec Pack. You need to download a copy of the pack, which is available from http://fileforum.betanews.com/detail/KLite-Codec-Pack-Basic/1094057842/1 —use the blue Download link on the right side of the page. This will download the basic version, which is more than sufficient for our needs at this stage. How to do it... Download, then run K-Lite_Codec_Pack_860_Basic.exe. Click on Next. On the Installation Mode screen, select the Simple option. On the File Associations page, select Windows Media Player. On the File associations screen for Windows Media Player screen, click on Select all audio: On the Thumbnails screen, click on Next. On the Speaker configuration screen, click on Next, then Install. The software will confirm when the codecs have been installed. How it works... In order to play back HTML5 format audio in Windows Media Player, you need to ensure you have the correct support in place; Windows Media Player doesn't understand the encoding format of HTML5 audio by default. We can overcome this by installing additional codecs that tell Windows how to encode or decode a particular file format; K-Lite's package aims to remove the pain of this process. There's more... The package we've looked at in this task is only available for Windows, if you are a Mac user, you will need to use an alternative method. There are lots of options available online—one such option is X Lossless Decoder, available from http://www.macupdate.com/app/mac/23430/x-lossless-decoder, which includes support for both .ogg and .mp4 formats. Summary We've taken a look at the recipes that show you to transcode a video into HTML5 Format and install playback support. This is only just the start of what you can achieve using this article—there is a whole world out there to explore. Resources for Article : Further resources on this subject: Basic use of Local Storage [Article] Customize your LinkedIn profile headline [Article] Blocking versus Non blocking scripts [Article]
Read more
  • 0
  • 0
  • 2007

article-image-extracting-data-using-dom-must-know
Packt
12 Sep 2013
5 min read
Save for later

Extracting data using DOM (Must know)

Packt
12 Sep 2013
5 min read
(For more resources related to this topic, see here.) Getting ready This section will parse the content of the page at, http://jsoup.org. The index.html file in the project is provided if you want to have a fi le as input, instead of connecting to the URL. How to do it... The following screenshot shows the page that is going to be parsed: By viewing the source code for this HTML page, we know the site structure. The jsoup library is quite supportive of the DOM navigation method; it provides ways to find elements and extract their contents efficiently. Create the Document class structure by connecting to the URL. Document doc = Jsoup.connect("http://jsoup.org").get(); Navigate to the menu tag whose class is nav-sections. Elements navDivTag = doc.getElementsByClass("nav-sections"); Get the list of all menu tags that are owned by &#lt;a> . Elements list = navDivTag.get(0).getElementsByTag("a"); Extract content from each Element class in the previous menu list. for(Element menu: list) {System.out.print(String.format("[%s]", menu.html()));} The output should look like the following screenshot after running the code: The complete example source code for this section is placed at sourceSection02. The API reference for this section is available at: http://jsoup.org/apidocs/org/jsoup/nodes/Element.html How it works... Let's have a look at the navigation structure: html > body.n1-home > div.wrap > div.header > div.nav-sections > ul >li.n1-news > a The div class="nav-sections" tag is the parent of the navigation section, so by using getElementsByClass("nav-sections"), it will move to this tag. Since there is only one tag with this class value in this example, we only need to extract the first found element; we will get it at index 0 (first item of results). Elements navDivTag = doc.getElementsByClass("nav-sections"); The Elements object in jsoup represents a collection ( Collection<>) or a list (List<>); therefore, you can easily iterate through this object to get each element, which is known as an Element object. When at a parent tag, there are several ways to get to the children. Navigate from subtag <ul>, and deeper to each <li> tag, and then to the <a> tag. Or, you can directly make a query to find all the <a> tags. That's how we retrieved the list that we found, as shown in the following code: Elements list = navDivTag.get(0).getElementsByTag("a"); The final part is to print the extracted HTML content of each <a> tag. Beware of the list value; even if the navigation fails to find any element, it is always not null, and therefore, it is good practice to check the size of the list before doing any other task. Additionally, the Element.html() method is used to return the HTML content of a tag. There's more... jsoup is quite a powerful library for DOM navigation. Besides the following mentioned methods, the other navigation types to find and extract elements are also supported in the Element class. The following are the common methods for DOM navigation: Methods   Descriptions   getElementById(String id)   Finds an element by ID, including its children.   getElementsByTag(String c)   Finds elements, including and recursively under the element that calls this method, with the specified tag name (in this case, c).   getElementsByClass(String className)   Finds elements that have this class, including or under the element that calls this method. Case insensitive.   getElementsByAttribute(String key)   Find elements that have a named attribute set. Case insensitive. This method has several relatives, such as: getElementsByAttribute Starting(String keyPrefix) getElementsByAttributeValue (String key, String value) getElementsByAttributeValue Not(String key, String value) getElementsMatchingText(Pattern pattern)   Finds elements whose text matches the supplied regular expression.   getAllElements()   Finds all elements under the specified element (including self and children of children).   There is a need to mention all methods that are used to extract content from an HTML element. The following table shows the common methods for extracting elements: Methods   Descriptions   id()   This retrieves the ID value of an element.   className()   This retrieves the class name value of an element.   attr(String key)   This gets the value of a specific attribute.   attributes()   This is used to retrieve all the attributes.   html()   This is used to retrieve the inner HTML value of an element.   data()   This is used to retrieve the data content, usually applied for getting content from the <script> and <style> tags.   text()   This is used to retrieve the text content. This method will return the combined text of all inner children and removes all HTML tags, while the html() method returns everything between its open and closed tags.   tag()   This retrieves the tag of the element.   Summary In this article we saw to extract data using DOM from an HTML page. It was seen that jsoup is quite a powerful library for DOM navigation. Resources for Article : Further resources on this subject: HTML5 Presentations - creating our initial presentation [Article] Building HTML5 Pages from Scratch [Article] JBoss Tools Palette [Article]
Read more
  • 0
  • 0
  • 7865

article-image-one-page-application-development
Packt
12 Sep 2013
10 min read
Save for later

One-page Application Development

Packt
12 Sep 2013
10 min read
(For more resources related to this topic, see here.) Model-View-Controller or MVC Model-View-Controller ( MVC ) is a heavily used design pattern in programming. A design pattern is essentially a reusable solution that solves common problems in programming. For example, the Namespace and Immediately-Invoked Function Expressions are patterns that are used throughout this article. MVC is another pattern to help solve the issue of separating the presentation and data layers. It helps us keep our markup and styling outside of the JavaScript; keeping our code organized, clean, and manageable—all essential requirements for creating one-page-applications. So let's briefly discuss the several parts of MVC, starting with models. Models A model is a description of an object, containing the attributes and methods that relate to it. Think of what makes up a song, for example the track's title, artist, album, year, duration, and more. In its essence, a model is a blueprint of your data. Views The view is a physical representation of the model. It essentially displays the appropriate attributes of the model to the user, the markup and styles used on the page. Accordingly, we use templates to populate our views with the data provided. Controllers Controllers are the mediators between the model and the view. The controller accepts actions and communicates information between the model and the view if necessary. For example, a user can edit properties on a model; when this is done the controller tells the View to update according to the user's updated information. Relationships The relationship established in an MVC application is critical to sticking with the design pattern. In MVC, theoretically, the model and view never speak with each other. Instead the controller does all the work; it describes an action, and when that action is called either the model, view, or both update accordingly. This type of relationship is established in the following diagram: This diagram explains a traditional MVC structure, especially that the communication between the controller and model is two-way; the controller can send data to/from the model and vice versa for the view. However, the view and model never communicate, and there's a good reason for that. We want to make sure our logic is contained appropriately; therefore, if we wanted to delegate events properly for user actions, then that code would go into the view. However, if we wanted to have utility methods, such as a getName method that combines a user's first name and last name appropriately, that code would be contained within a user model. Lastly, any sort of action that pertains to retrieving and displaying data would be contained in the controller. Theoretically, this pattern helps us keep our code organized, clean, and efficient. In many cases this pattern can be directly applied, especially in many backend languages like Ruby, PHP, and Java. However, when we start applying this strictly to the frontend, we are confronted with many structural challenges. At the same time, we need this structure to create solid one-page-applications. The following sections will introduce you to the libraries we will use to solve these issues and more. Introduction to Underscore.js One of the libraries we will be utilizing in our sample application will be Underscore.js. Underscore has become extremely popular in the last couple of years due to the many utility methods it provides developers without extending built-in JavaScript objects, such as String, Array, or Object. While it provides many useful methods, the suite has also been optimized and tested across many of the most popular web browsers, including Internet Explorer. For these reasons, the community has widely adopted this library and continually supported it. Implementation Underscore is extremely easy to implement in our applications. In order to get Underscore going, all we need to do is include it on our page like so: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> </head> <body> <script src = "//ajax.googleapis.com/ajax/libs/jquery/ 1.9.0/jquery.min.js"></script> <script src = "//cdnjs.cloudflare.com/ajax/libs/underscore.js/ 1.4.3/underscore-min.js"></script> </body> </html> Once we include Underscore on our page, we have access to the library at the global scope using the _ object. We can then access any of the utility methods provided by the library by doing _.methodName. You can review all of the methods provided by Underscore online (http://underscorejs.org/), where all methods are documented and contain samples of their implementation. For now, let's briefly review some of the methods we'll be using in our application. _.extend The extend method in Underscore is very similar to the extend method we have been using from Zepto (http://zeptojs.com/#$.extend). If we look at the documentation provided on Underscore's website (http://underscorejs.org/#extend), we can see that it takes multiple objects with the first parameter being the destination object that gets returned once all objects are combined. Copy all of the properties in the source objects over to the destination object, and return the destination object. It's in-order, so the last source will override properties of the same name in previous arguments. As an example, we can take a Song object and create an instance of it while also overriding its default attributes. This can be seen in the following example: <script> function Song() { this.track = "Track Title"; this.duration = 215; this.album = "Track Album"; }; var Sample = _.extend(new Song(), { 'track': 'Sample Title', 'duration': 0, 'album': 'Sample Album' }); </script> If we log out the Sample object, we'll notice that it has inherited from the Song constructor and overridden the default attributes track, duration, and album. Although we can improve the performance of inheritance using traditional JavaScript, using an extend method helps us focus on delivery. We'll look at how we can utilize this method to create a base architecture within our sample application later on in the article. _.each The each method is extremely helpful when we want to iterate over an Array or Object. In fact this is another method that we can find in Zepto and other popular libraries like jQuery. Although each library's implementation and performance is a little different, we'll be using Underscore's _.each method, so that we can stick within our application's architecture without introducing new dependencies. As per Underscore's documentation (http://underscorejs.org/#each), the use of _.each is similar to other implementations: Iterates over a list of elements, yielding each in turn to an iterator function. The iterator is bound to the context object, if one is passed. Each invocation of iterator is called with three arguments: (element, index, list). If list is a JavaScript object, iterator's arguments will be (value, key, list). Delegates to the native forEach function if it exists. Let's take a look at an example of using _.each with the code we created in the previous section. We'll loop through the instance of Sample and log out the object's properties, including track, duration, and album. Because Underscore's implementation allows us to loop through an Object, just as easily as an Array, we can use this method to iterate over our Sample object's properties: <script> function Song() { this.track = "Track Title"; this.duration = 215; this.album = "Track Album"; }; var Sample = _.extend(new Song(), { 'track': 'Sample Title', 'duration': 0, 'album': 'Sample Album' }); _.each(Sample, function(value, key, list){ console.log(key + ": " + value); }); </script> The output from our log should look something like this: track: Sample Title duration: 0 album: Sample Album As you can see, it's extremely easy to use Underscore's each method with arrays and objects. In our sample application, we'll use this method to loop through an array of objects to populate our page, but for now let's review one last important method we'll be using from Underscore's library. _.template Underscore has made it extremely easy for us to integrate templating into our applications. Out of the box, Underscore comes with a simple templating engine that can be customized for our purposes. In fact, it can also precompile your templates for easy debugging. Because Underscore's templating can interpolate variables, we can utilize it to dynamically change the page as we wish. The documentation provided by Underscore (http://underscorejs.org/#template) helps explain the different options we have when using templates: Compiles JavaScript templates into functions that can be evaluated for rendering. Useful for rendering complicated bits of HTML from JSON data sources. Template functions can both interpolate variables, using <%= … %>, as well as execute arbitrary JavaScript code, with <% … %>. If you wish to interpolate a value, and have it be HTML-escaped, use <%- … %>. When you evaluate a template function, pass in a data object that has properties corresponding to the template's free variables. If you're writing a one-off, you can pass the data object as the second parameter to template in order to render immediately instead of returning a template function. Templating on the frontend can be difficult to understand at first, after all we were used to querying a backend, using AJAX, and retrieving markup that would then be rendered on the page. Today, best practices dictate we use RESTful APIs that send and retrieve data. So, theoretically, you should be working with data that is properly formed and can be interpolated. But where do our templates live, if not on the backend? Easily, in our markup: <script type="tmpl/sample" id="sample-song"> <section> <header> <h1><%= track %></h1> <strong><%= album %></strong> </header> </section> </script> Because the preceding script has an identified type for the browser, the browser avoids reading the contents inside this script. And because we can still target this using the ID, we can pick up the contents and then interpolate it with data using Underscore's template method: <script> function Song() { this.track = "Track Title"; this.duration = 215; this.album = "Track Album"; }; var Sample = _.extend(new Song(), { 'track': 'Sample Title', 'duration': 0, 'album': 'Sample Album' }); var template = _.template(Zepto('#sample-song').html(), Sample); Zepto(document.body).prepend(template); </script> The result of running the page, would be the following markup: <body> <section> <header> <h1>Sample Title</h1> <strong>Sample Album</strong> </header> </section> <!-- scripts and template go here --> </body> As you can see, the content from within the template would be prepended to the body and the data interpolated, displaying the properties we wish to display; in this case the title and album name of the song. If this is a bit difficult to understand, don't worry about it too much, I myself had a lot of trouble trying to pick up the concept when the industry started moving into one-page applications that ran off raw data (JSON). For now, these are the methods we'll be using consistently within the sample application to be built in this article. It is encouraged that you experiment with the Underscore.js library to discover some of the more advanced features that make your life easier, such as _.map, _.reduce, _.indexOf, _.debounce, and _.clone. However, let's move on to Backbone.js and how this library will be used to create our application.
Read more
  • 0
  • 0
  • 1861

article-image-article-nginx-proxy-module
Packt
12 Sep 2013
2 min read
Save for later

Nginx proxy module

Packt
12 Sep 2013
2 min read
(For more resources related to this topic, see here.) The first step towards establishing the new architecture will be to discover the appropriate module. The default Nginx build comes with the proxy module, which allows forwarding of HTTP requests from the client to a backend server. We will be configuring multiple aspects of the module: Basic address and port information on the backend server Caching, buffering, and temporary file options Limits, timeout, and error behavior Other miscellaneous options All these options are available via directives which we will learn to configure throughout this section. Main directives The first set of directives will allow you to establish basic configuration such as the location of the backend server, information to be passed, and how it should be passed. Table 1 Caching, buffering, and temporary files Ideally, as much as possible, you should reduce the amount of requests being forwarded to the backend server. The following directive will help you build a caching system, as well as control buffering options and the way Nginx handles temporary files: Table 2 Limits, timeouts, and errors The following directives will help you define timeout behavior, as well as various limitations regarding communications with the backend server: Table 3 Other directives Finally, the last set of directives available in the proxy module is uncategorized and is as follows: Table 4 Variables The proxy module offers several variables that can be inserted in various locations, for example, in the proxy_set_header directive or in the logging-related directives such as log_format. The available variables are: $proxy_host: Contains the hostname of the backend server used for the current request. $proxy_port: Contains the port of the backend server used for the current request. $proxy_add_x_forwarded_for: This variable contains the value of the X-Forwarded-For request header, followed by the remote address of the client. Both values are separated by a comma. If the X-Forwarded-For request header is unavailable, the variable only contains the client remote address. $proxy_internal_body_length: Length of the request body (set with the proxy_set_body directive or 0). Summary In this article, we learned to discover an appropriate module before establishing a new connection. We configured multiple aspects of the module. Resources for Article :   Further resources on this subject: Introduction to nginx [Article] Nginx HTTP Server FAQs [Article] Using Nginx as a Reverse Proxy [Article]
Read more
  • 0
  • 0
  • 995
Unlock access to the largest independent learning library in Tech for FREE!
Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
Renews at €18.99/month. Cancel anytime
article-image-setting-test-infrastructure
Packt
12 Sep 2013
9 min read
Save for later

Setting Up a Test Infrastructure

Packt
12 Sep 2013
9 min read
(For more resources related to this topic, see here.) Setting up and writing our first tests Now that we have the base test libraries, we can create a test driver web page that includes the application and test libraries, sets up and executes the tests, and displays a test report. The test driver page A single web page is typically used to include the test and application code and drive all frontend tests. Accordingly, we can create a web page named test.html in the chapters/01/test directory of our repository starting with just a bit of HTML boilerplate—a title and meta attributes: <html> <head> <title>Backbone.js Tests</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> Then, we include the Mocha stylesheet for test reports and the Mocha, Chai, and Sinon.JS JavaScript libraries: <link rel="stylesheet" href="js/lib/mocha.css" /> <script src = "js/lib/mocha.js"></script> <script src = "js/lib/chai.js"></script > <script src = "js/lib/sinon.js"></script> Next, we prepare Mocha and Chai. Chai is configured to globally export the expect assertion function. Mocha is set up to use the bdd test interface and start tests on the window.onload event: <script> // Setup. var expect = chai.expect; mocha.setup("bdd"); // Run tests on window load event. window.onload = function () { mocha.run(); }; </script> After the library configurations, we add in the test specs. Here we include a single test file (that we will create later) for the initial test run: <script src = "js/spec/hello.spec.js"></script> </head> Finally, we include a div element that Mocha uses to generate the full HTML test report. Note that a common alternative practice is to place all the script include statements before the close body tag instead of within the head tag: <body> <div id="mocha"></div> </body> </html> And with that, we are ready to create some tests. Now, you could even open chapters/01/test/test.html in a browser to see what the test report looks like with an empty test suite. Adding some tests It is sufficient to say that test development generally entails writing JavaScript test files, each containing some organized collection of test functions. Let's start with a single test file to preview the testing technology stack and give us some tests to run. The test file chapters/01/test/js/spec/hello.spec.js creates a simple function (hello()) to test and implements a nested set of suites introducing a few Chai and Sinon.JS features. The function under test is about as simple as you can get: window.hello = function () { return "Hello World"; }; The hello function should be contained in its own library file (perhaps hello.js) for inclusion in applications and tests. The code samples simply include it in the spec file for convenience. The test code uses nested Mocha describe statements to create a test suite hierarchy. The test in the Chai suite uses expect to illustrate a simple assertion. The Sinon.JS suite's single test shows a test spy in action: describe("Trying out the test libraries", function () { describe("Chai", function () { it("should be equal using 'expect'", function () { expect(hello()).to.equal("Hello World"); }); }); describe("Sinon.JS", function () { it("should report spy called", function () { var helloSpy = sinon.spy(window, 'hello'); expect(helloSpy.called).to.be.false; hello(); expect(helloSpy.called).to.be.true; hello.restore(); }); }); }); Not to worry if you do not fully understand the specifics of these tests and assertions at this point, as we will shortly cover everything in detail. The takeaway is that we now have a small collection of test suites with a set of specifications ready to be run. Running and assessing test results Now that all the necessary pieces are in place, it is time to run the tests and review the test report. The first test report Opening up the chapters/01/test/test.html file in any web browser will cause Mocha to run all of the included tests and produce a test report: Test report This report provides a useful summary of the test run. The top-right column shows that two tests passed, none failed, and the tests collectively took 0.01 seconds to run. The test suites declared in our describe statements are present as nested headings. Each test specification has a green checkmark next to the specification text, indicating that the test has passed. Test report actions The report page also provides tools for analyzing subsets of the entire test collection. Clicking on a suite heading such as Trying out the test libraries or Chai will re-run only the specifications under that heading. Clicking on a specification text (for example, should be equal using 'expect') will show the JavaScript code of the test. A filter button designated by a right triangle is located to the right of the specification text (it is somewhat difficult to see). Clicking the button re-runs the single test specification. The test specification code and filter The previous figure illustrates a report in which the filter button has been clicked. The test specification text in the figure has also been clicked, showing the JavaScript specification code. Advanced test suite and specification filtering The report suite and specification filters rely on Mocha's grep feature, which is exposed as a URL parameter in the test web page. Assuming that the report web page URL ends with something such as chapters/01/test/test.html, we can manually add a grep filter parameter accompanied with the text to match suite or specification names. For example, if we want to filter on the term spy, we would navigate a browser to a comparable URL containing chapters/01/test/test.html?grep=spy, causing Mocha to run only the should report spy called specification from the Sinon.JS suite. It is worth playing around with various grep values to get the hang of matching just the suites or specifications that you want. Test timing and slow tests All of our tests so far have succeeded and run quickly, but real-world development necessarily involves a certain amount of failures and inefficiencies on the road to creating robust web applications. To this end, the Mocha reporter helps identify slow tests and analyze failures. Why is test speed important? Slow tests can indicate inefficient or even incorrect application code, which should be fixed to speed up the overall web application. Further, if a large collection of tests run too slow, developers will have implicit incentives to skip tests in development, leading to costly defect discovery later down the deployment pipeline. Accordingly, it is a good testing practice to routinely diagnose and speed up the execution time of the entire test collection. Slow application code may be left up to the developer to fix, but most slow tests can be readily fixed with a combination of tools such as stubs and mocks as well as better test planning and isolation. Let's explore some timing variations in action by creating chapters/01/test/js/spec/timing.spec.js with the following code: describe("Test timing", function () { it("should be a fast test", function (done) { expect("hi").to.equal("hi"); done(); }); it("should be a medium test", function (done) { setTimeout(function () { expect("hi").to.equal("hi"); done(); }, 40); }); it("should be a slow test", function (done) { setTimeout(function () { expect("hi").to.equal("hi"); done(); }, 100); }); it("should be a timeout failure", function (done) { setTimeout(function () { expect("hi").to.equal("hi"); done(); }, 2001); }); }); We use the native JavaScript setTimeout() function to simulate slow tests. To make the tests run asynchronously, we use the done test function parameter, which delays test completion until done() is called. The first test has no delay before the test assertion and done() callback, the second adds 40 milliseconds of latency, the third adds 100 milliseconds, and the final test adds 2001 milliseconds. These delays will expose different timing results under the Mocha default configuration that reports a slow test at 75 milliseconds, a medium test at one half the slow threshold, and a failure for tests taking longer than 2 seconds. Next, include the file in your test driver page (chapters/01/test/test-timing.html in the example code): <script src = "js/spec/timing.spec.js"></script> Now, on running the driver page, we get the following report: Test report timings and failures This figure illustrates timing annotation boxes for our medium (orange) and slow (red) tests and a test failure/stack trace for the 2001-millisecond test. With these report features, we can easily identify the slow parts of our test infrastructure and use more advanced test techniques and application refactoring to execute the test collection efficiently and correctly. Test failures A test timeout is one type of test failure we can encounter in Mocha. Two other failures that merit a quick demonstration are assertion and exception failures. Let's try out both in a new file named chapters/01/test/js/spec/failure.spec.js: // Configure Mocha to continue after first error to show // both failure examples. mocha.bail(false); describe("Test failures", function () { it("should fail on assertion", function () { expect("hi").to.equal("goodbye"); }); it("should fail on unexpected exception", function () { throw new Error(); }); }); The first test, should fail on assertion, is a Chai assertion failure, which Mocha neatly wraps up with the message expected 'hi' to equal 'goodbye'. The second test, should fail on unexpected exception, throws an unchecked exception that Mocha displays with a full stack trace. Stack traces on Chai assertion failures vary based on the browser. For example, in Chrome, no stack trace is displayed for the first assertion while one is shown in Safari. See the Chai documentation for configuration options that offer more control over stack traces. Test failures Mocha's failure reporting neatly illustrates what went wrong and where. Most importantly, Chai and Mocha report the most common case—a test assertion failure—in a very readable natural language format. Summary In this article, we introduced an application and test structure suitable for development, gathered the Mocha, Chai, and Sinon.JS libraries, and created some basic tests to get things started. Then, we reviewed some facets of the Mocha test reporter and watched various tests in action—passing, slow, timeouts, and failures. Resources for Article: Further resources on this subject: The Aliens Have Landed! [Article] Testing your App [Article] Quick Start into Selenium Tests [Article]
Read more
  • 0
  • 0
  • 1585

article-image-photo-pad
Packt
11 Sep 2013
7 min read
Save for later

Photo Pad

Packt
11 Sep 2013
7 min read
(For more resources related to this topic, see here.) Time for action – creating Photo Pad In the HTML file, we will add a toolbar with buttons for Load, Save, and Effects. <body> <div id="app"> <header>Photo Pad </header> <div id="main"> <div id="toolbar"> <div class="dropdown-menu"> <button data-action="menu">Load</button> <ul id="load-menu" data-option="file-picker" class="file-picker menu"> <li data-value="file-picker"> <input type="file" /> </li> </ul> </div> <button data-action="save">Save</button> <div class="dropdown-menu"> <button data-action="menu">Effects</button> <ul data-option="applyEffect" class="menu"> <li data-value="invert">Invert</li> </ul> </div> </div> <canvas width="0" height="0"> Sorry, your browser doesn't support canvas. </canvas> </div> <footer>Click load to choose a file</footer> </div> </body> The Load toolbar item has a drop-down menu, but instead of menu items it has a file input control in it where the user can select a file to load. The Effects item has a drop-down menu of effects. For now we just have one in there, Invert, but we will add more later. For our CSS we will copy everything we had in canvasPad.css to photoPad.css, so that we get all of the same styling for the toolbar and menus. We will also use the Toolbar object in toolbar.js. In our JavaScript file we will change the application object name to PhotoPadApp. We also need a couple of variables in PhotoPadApp. We will set the canvas variable to the <canvas> element, the context variable to the canvas's context, and define an $img variable to hold the image we will be showing. Here we initialize it to a new <img> element using jQuery: function PhotoPadApp() { var version = "5.2", canvas = $("#main>canvas")[0], context = canvas.getContext("2d"), $img = $("<img>"); The first toolbar action we will implement is the Save button, since we already have that code from Canvas Pad. We check the action in toolbarButtonClicked() to see if it's "save", and if so we get the data URL and open it in a new browser window: function toolbarButtonClicked(action) { switch (action) { case "save": var url = canvas.toDataURL(); window.open(url, "PhotoPadImage"); break; } } What just happened? We created the scaffolding for the Photo Pad application with toolbar items for Load, Save, and Effects. We implemented the save function the same as we did for Canvas Pad. The next thing we'll implement is the Load drop-down menu since we need an image to manipulate. When the Load toolbar button is clicked, it will show the drop-down menu with a file input control in it that we defined previously. All of that we get for free because it's just another drop-down menu in our toolbar. But before we can do that we need to learn about the HTML5 File API. The File API We may not be able to save files directly to the user's filesystem, but we can access files using HTML5's File API. The File API allows you to get information about, and load the contents of, files that the user selects. The user can select files using an input element with a type of file. The process for loading a file works in the following way: The user selects one or more files using a <input type="file"> element. We get the list of files from the input element's files property. The list is a FileList object containing File objects. You can enumerate over the file list and access the files just like you would an array. The File object contains three fields. name: This is the filename. It doesn't include path information. size: This is the size of the file in bytes. type: This is the MIME type, if it can be determined. Use a FileReader object to read the file's data. The file is loaded asynchronously. After the file has been read, it will call the onload event handler. FileReader has a number of methods for reading files that take a File object and return the file contents. readAsArrayBuffer(): This method reads the file contents into an ArrayBuffer object. readAsBinaryString(): This method reads the file contents into a string as binary data. readAsText(): This method reads the file contents into a string as text. readAsDataURL(): This method reads the file contents into a data URL string. You can use this as the URL for loading an image. Time for action – loading an image file Let's add some code to the start() method of our application to check if the File API is available. You can determine if a browser supports the File API by checking if the File and FileReader objects exist: this.start = function() { // code not shown... if (window.File && window.FileReader) { $("#load-menu input[type=file]").change(function(e) { onLoadFile($(this)); }); } else { loadImage("images/default.jpg"); } } First we check if the File and FileReader objects are available in the window object. If so, we hook up a change event handler for the file input control to call the onLoadFile() method passing in the <input> element wrapped in a jQuery object. If the File API is not available we will just load a default image by calling loadImage(), which we will write later. Let's implement the onLoadFile() event handler method: function onLoadFile($input) { var file = $input[0].files[0]; if (file.type.match("image.*")) { var reader = new FileReader(); reader.onload = function() { loadImage(reader.result); }; reader.readAsDataURL(file); } else { alert("Not a valid image type: " + file.type); setStatus("Error loading image!"); } } Here we get the file that was selected by looking at the file input's files array and taking the first one. Next we check the file type, which is a MIME type, to make sure it is an image. We are using the String object's regular expression match() method to check that it starts with "image". If it is an image, we create a new instance of the FileReader object. Then we set the onload event handler to call the loadImage() method, passing in the FileReader object's result field, which contains the file's contents. Lastly, we call the FileReader object's readAsDataURL() method, passing in the File object to start loading the file asynchronously. If it isn't an image file, we show an alert dialog box with an error message and show an error message in the footer by calling setStatus(). Once the file has been read, the loadImage() method will be called. Here we will use the data URL we got from the FileReader object's result field to draw the image into the canvas: function loadImage(url) { setStatus("Loading image"); $img.attr("src", url); $img[0].onload = function() { // Here "this" is the image canvas.width = this.width; canvas.height = this.height; context.drawImage(this, 0, 0); setStatus("Choose an effect"); } $img[0].onerror = function() { setStatus("Error loading image!"); } } First we set the src attribute for the image element to the data URL we got after the file was loaded. This will cause the image element to load that new image. Next we define the onload event handler for the image, so that we are notified when the image is loaded. Note that when we are inside the onload event handler, this points to the <image> element. First we change the canvas' width and height to the image's width and height. Then we draw the image on the canvas using the context's drawImage() method. It takes the image to draw and the x and y coordinates of where to draw it. In this case we draw it at the top-left corner of the canvas (0, 0). Lastly, we set an onerror event handler for the image. If an error occurs loading the image, we show an error message in the footer. What just happened? We learned how to use the File API to load an image file from the user's filesystem. After the image was loaded we resized the canvas to the size of the image and drew the image onto the canvas.
Read more
  • 0
  • 0
  • 1681

Packt
11 Sep 2013
15 min read
Save for later

Get Connected – Bluetooth Basics

Packt
11 Sep 2013
15 min read
(For more resources related to this topic, see here.) Why Bluetooth? There are other forms of wireless communication that we could use, like infrared and Wi-Fi, but Bluetooth is perfect for many household projects. It is cheap, very easy to set up, will typically use less power than Wi-Fi because of the shorter range, and it's very responsive. It's important to keep in mind that there isn't a single "best" form of communication. Each type will suit each project (or perhaps budget) in different ways. In terms of performance, I have found that a short message will be transmitted in under 20 milliseconds from one device to another, and the signal will work for just less than 10 meters (30 feet). These numbers, however, will vary based on your environment. Things you need The things required for this project are as follows: Netduino Breadboard Bluetooth module Windows Phone 8 Lots of different Bluetooth modules exist, but I have found that the JY-MCU is very cheap (around $10) and reliable. Any Windows Phone 8 device can be used, as they all have Bluetooth. The project setup The setup for this project is extremely basic because we are just connecting the Bluetooth module and nothing else. Once our phone is connected we will use it to control the onboard LED, however, you can expand this to control anything else too. The Bluetooth module you buy may look slightly different to the diagram, but not to worry, just make sure you match up the labels on the Bluetooth module (GND, 3-3V or VCC, TX, and RX) to the diagram. If you encounter a situation where everything is hooked up right but no data is flowing, examine the minimum baud rate in your Bluetooth module's manual or specifications sheet. It has been reported that some Bluetooth modules do not work well communicating at 9600 baud. This can be easily remedied by setting the baud rate in your SerialPort's constructor to 115200. For example, SerialPort(new SerialPort(SerialPorts.COM1, 115200, Parity.None, 8, StopBits.One). Once it is wired up, we can get onto the coding. First we will do the Netduino part. The Netduino will listen for messages over Bluetooth, and will set the brightness of the onboard LED based on the percentage it receives. The Netduino will also listen for "ping", and if it receives this then it will send the same text back to the other device. We do this as an initial message to make sure that it gets from the phone to the Netduino, and then back to the phone successfully. After that we will code the phone application. The phone will connect, send a "ping", and then wait until it receives the "ping" back. When the phone receives the "ping" back then it can start sending messages. In this article only Windows Phone 8 will be covered, however, the same concepts apply, and it won't be too hard to code the equivalent app for another platform. The Netduino code will remain the same no matter what device you connect to. Coding Because we will be using a phone to connect to the Netduino, there are two distinct parts which need to be coded. The Netduino code Open up Visual Studio and create a new Netduino Plus 2 Application. Add a reference to SecretLabs.NETMF.Hardware.PWM. Open Program.cs from the Solution Explorer. You need to add the following using statements at the top: using System.IO.Ports;using System.Text;using NPWM = SecretLabs.NETMF.Hardware.PWM; You need to get the phone paired with the Bluetooth module on the Netduino. So in Program.cs, replace the Main method with this: private static SerialPort _bt;public static void Main(){_bt = new SerialPort(SerialPorts.COM1, 9600,Parity.None, 8, StopBits.One);_bt.Open();while (true){Thread.Sleep(Timeout.Infinite);}} This code creates a new instance of a SerialPort (the Bluetooth module), then opens it, and finally has a loop (which will just pause forever). Plug in your Netduino and run the code. Give it a few seconds until the blue light goes off—at this point the Bluetooth module should have a flashing red LED. On your Windows Phone, go to Settings | Bluetooth and make sure that it is turned on. In the list of devices there should be one which is the Bluetooth module (mine is called "linvor") so tap it to connect. If it asks for a pin try the default of "1234", or check the data sheet. As it connects, the red LED on the Bluetooth module will go solid, meaning that it is connected. It will automatically disconnect in 10 seconds; that's fine. Now that you've checked that it connects correctly, start adding in the real code: private static SerialPort _bt;private static NPWM _led;private static string _buffer;public static void Main(){_led = new NPWM(Pins.ONBOARD_LED);_bt = new SerialPort(SerialPorts.COM1, 9600,Parity.None, 8, StopBits.One);_bt.DataReceived += new SerialDataReceivedEventHandler(rec_DataReceived);_bt.Open();while (true){Thread.Sleep(Timeout.Infinite);}} This is close to the code you replaced but also creates an instance of the onboard LED, and declares a string to use as a buffer for the received data. Next you need to create the event handler that will be fired when data is received. Something that can easily trip you up is thinking that each message will come through as a whole. That's incorrect. So if you send a "ping" from your phone, it will usually come through in two separate messages of "p" and "ing". The simplest way to work around that is to just have a delimiter that marks the end of a message (in the same way as military personnel end radio communications by saying "10-4"). So send the message as "ping|" with a pipe at the end. This code for the DataReceived event handler builds up a buffer until it finds a pipe (|), then processes the message, then resets the buffer (or sets it to whatever is after the pipe, which will be the first part of the next message): private static void rec_DataReceived(object sender,SerialDataReceivedEventArgs e){byte[] bytes = new byte[_bt.BytesToRead];_bt.Read(bytes, 0, bytes.Length);char[] converted = new char[bytes.Length];for (int b = 0; b < bytes.Length; b++){converted[b] = (char)bytes[b];}string str = new String(converted);if (str != null && str.Length > 0){if (str.IndexOf("|") > -1){_buffer += str.Substring(0, str.IndexOf("|"));ProcessReceivedString(_buffer);_buffer = str.Substring(str.LastIndexOf("|") +1);}else{_buffer += str;}}} At the start of the event handler, you create a byte array to hold the received data, then loop through that array and convert each byte to a char and put those chars into a char array. Once you have a char array, create a new string using the char array as a parameter, which will give the string representation of the array. After checking that it is not null or empty you check whether it has a pipe (meaning it contains the end of a message). If so, add all the characters up to the pipe onto the buffer and then process the buffer. If there is no pipe then just add to the buffer. The only thing that remains is the method to process the received string (the buffer) and a method to send messages back to the phone. So put these methods below the event handler that you just added: private static void ProcessReceivedString(string _buffer){if (_buffer == "ping"){Write(_buffer);}else{uint val = UInt32.Parse(_buffer);_led.SetDutyCycle(val);}}private static void Write(string message){byte[] bytes = Encoding.UTF8.GetBytes(message + "|");_bt.Write(bytes, 0, bytes.Length);} As mentioned before, if you receive a "ping" then just send it back, or alternatively convert the string into an unsigned integer and set the brightness of the onboard LED. The last method simply adds a pipe to the end of the string, converts it to a byte array, then writes it to the Bluetooth SerialPort to send to the phone. At this point, you should run the code on the Netduino, but keep in mind that the same thing as before will happen because we are not sending it any data yet. So next up, we need to make the phone application that helps us send messages to the Netduino. The phone code As mentioned, we will be using a Windows Phone 8 device to connect to the Netduino. The same principles demonstrated in this section will apply to any platform, and it all revolves around just knowing how to read and write the Bluetooth data. You may notice that much of the phone code resembles the Netduino code—this is because both are merely sending and receiving messages. Before moving on, you will need the Windows Phone 8 SDK installed. Download and install it from here: http://developer.windowsphone.com You may need to close any copies of Visual Studio that are open. Once it is installed you can go ahead and open the Netduino project (from the previous section) again, then follow these steps: We could create the phone project in the same solution as the Netduino project, but in terms of debugging, it's easier to have them in separate instances of Visual Studio. So open up another copy of Visual Studio and click on File | New | Project. Find the Windows Phone App template by navigating to Installed | Templates | Visual C# | Windows Phone. Name the project and then click on OK to create it. A dialog may appear asking you to choose which version of the OS you would like to target. Make sure that Windows Phone OS 8.0 is selected (Windows Phone 7.1 does not have the required APIs for third party developers). When creating a new Windows Phone application, MainPage.xaml will automatically be displayed. This is the first page of the app that the user will see when they run your app. XAML is the layout language used on Windows Phone, and if you've ever used HTML then you will be quite at home. In the XAML window, scroll down until you find the grid named ContentPanel. Replace it with: <Grid x_Name="ContentPanel" Grid.Row="1"Margin="12,0,12,0"><Slider IsEnabled="False" Minimum="0" Maximum="100"x:Name="slider" ValueChanged="slider_ValueChanged"/></Grid> This will add a Slider control to the page with the value at the far left being 0 and the far right being 100—essentially a percent. Whenever the user drags the slider, it will fire the ValueChanged event handler, which you will add soon. That is the only UI change you need to make. So in the Solution Explorer, right-click on MainPage.xaml | View Code. Add these Using statements to the top: using Windows.Storage.Streams;using System.Text;using Windows.Networking.Sockets;using Windows.Networking.Proximity;using System.Runtime.InteropServices.WindowsRuntime; We need to declare some variables, so replace the MainPage constructor with this: StreamSocket _socket;string _receivedBuffer = "";bool _isConnected = false;public MainPage(){InitializeComponent();TryConnect();}private void slider_ValueChanged(object sender,RoutedPropertyChangedEventArgs<double> e){if (_isConnected){Write(((int)slider.Value).ToString());}}async private void Write(string str){var dataBuffer = GetBufferFromByteArray(Encoding.UTF8.GetBytes(str + "|"));await _socket.OutputStream.WriteAsync(dataBuffer);}private IBuffer GetBufferFromByteArray(byte[] package){using (DataWriter dw = new DataWriter()){dw.WriteBytes(package);return dw.DetachBuffer();}} The StreamSocket is essentially a way to interact with the phone's Bluetooth chip, which will be used in multiple methods in the app. When the slider's value changes, we check that the phone is connected to the Netduino, and then use the Write method to send the value. The Write method is similar to the one we made on the Netduino, except it requires a few lines extra to convert the byte array into an IBuffer. In the previous step, you might have noticed that we ran a method called TryConnect in the MainPage constructor. As you may have guessed, in this method we will try to connect to the Netduino. Add this method below the ones you added previously: private async void TryConnect(){PeerFinder.AlternateIdentities["Bluetooth:Paired"] ="";var pairedDevices = await PeerFinder.FindAllPeersAsync();if (pairedDevices.Count == 0){MessageBox.Show("Make sure you pair the devicefirst.");}else{SystemTray.SetProgressIndicator(this,new ProgressIndicator { IsIndeterminate = true,Text = "Connecting", IsVisible = true });PeerInformation selectedDevice = pairedDevices[0];_socket = new StreamSocket();await _socket.ConnectAsync(selectedDevice.HostName, "1");WaitForData(_socket);Write("ping");}} We first get a list of all devices that have been paired with the phone (even if they are not currently connected), and display an error message if there are no devices. If it does find one or more devices, then we display a progress bar at the top of the screen (in the SystemTray) and proceed to connect to the first Bluetooth device in the list. It is important to note that in the example code we are connecting to the first device in the list—in a real-world app, you would display the list to the user and let them decide which is the right device. After connecting, we call a method to wait for data to be received (this will happen in the background and will not block the rest of the code), and then write the initial ping message. Don't worry, we are almost there! The second last method you need to add is the one that will wait for the data to be received. It is an asynchronous method, which means that it can have a line within it that blocks execution (for instance, in the following code the line that waits for data will block the thread), but the rest of the app will carry on fine. Add in this method: async private void WaitForData(StreamSocket socket){try{byte[] bytes = new byte[5];await socket.InputStream.ReadAsync(bytes.AsBuffer(), 5, InputStreamOptions.Partial);bytes = bytes.TakeWhile((v, index) =>bytes.Skip(index).Any(w => w != 0x00)).ToArray();string str = Encoding.UTF8.GetString(bytes, 0,bytes.Length);if (str.Contains("|")){_receivedBuffer += str.Substring(0,str.IndexOf("|"));DoSomethingWithReceivedString(_receivedBuffer);_receivedBuffer = str.Substring(str.LastIndexOf("|") + 1);}else{_receivedBuffer += str;}}catch{MessageBox.Show("There was a problem");}finally{WaitForData(socket);}} Yes, this code looks complicated, but it is simple enough to understand. First we create a new byte array (the size of the array isn't too important, and you can change it to suit your application), then wait for data to come from the Netduino. Once it does, we copy all non-null bytes to our array, then convert the array to a string. From here, it is exactly like the Netduino code. The final code left to write is the part that handles the received messages. In this simple app, we don't need to check for anything except the return of the "ping". Once we receive that ping, we know it has connected successfully and we enable the slider control to let the user start using it: private void DoSomethingWithReceivedString(string buffer){if (buffer == "ping"){_isConnected = true;slider.IsEnabled = true;SystemTray.SetProgressIndicator(this, null);}} We also set the progress bar to null to hide it. Windows Phone (and other platforms) needs to explicitly define what capabilities they require for security reasons. Using Bluetooth is one such capability, so to define that we are using it, in the Solution Explorer find the Properties item below the project name. Left-click on the little arrow on the left of it to expand its children. Now double-click on WMAppManifest.xml to open it up then click the Capabilities tab near the top. The list on the left defines each specific capability. Ensure that both ID_CAP_PROXIMITY and ID_CAP_NETWORKING are checked. And that's it! Make sure your Netduino is plugged in (and running the program you made in this article), then plug your Windows Phone 8 in, and run the code. The run button may say Emulator X, you will need to change it to Device by clicking on the little down arrow on the right of the button. Once the two devices are connected, slide the slider on the phone forwards and backwards to see the onboard LED on the Netduino go brighter and dimmer. Not working? If the phone does not connect after a few seconds then something has probably gone wrong. After double-checking your wiring, the best thing to try is to unplug both the Netduino and phone, then plug them back in. If you are using a different Bluetooth board, you may have to pair it again to the phone. Repeat step 5 of the The Netduino Code section of this article. With both plugged back in, run the Netduino code (and give it a few seconds to boot up), then run the phone code. If that still doesn't work, unplug both again, and only plug back in the Netduino. When it is powered up, it will run the last application deployed to it. Then with your phone unplugged, go to the app list and find the phone app you made, and tap on it to run it. Summary You've managed to control your Netduino from afar! This article had a lot more code than most of the rest will because of needing to code both the Netduino and phone. However, the knowledge you've gained here will help you in many other projects, and we will be using this article as a base for some of the others. Resources for Article: Further resources on this subject: Automating the Audio Parameters – How it Works [Article] Ease the Chaos with Automated Patching [Article] Skype automation [Article]
Read more
  • 0
  • 0
  • 20079

article-image-creating-sample-web-scraper
Packt
11 Sep 2013
10 min read
Save for later

Creating a sample web scraper

Packt
11 Sep 2013
10 min read
(For more resources related to this topic, see here.) As web scrapers like to say: "Every website has an API. Sometimes it's just poorly documented and difficult to use." To say that web scraping is a useful skill is an understatement. Whether you're satisfying a curiosity by writing a quick script in an afternoon or building the next Google, the ability to grab any online data, in any amount, in any format, while choosing how you want to store it and retrieve it, is a vital part of any good programmer's toolkit. By virtue of reading this article, I assume that you already have some idea of what web scraping entails, and perhaps have specific motivations for using Java to do it. Regardless, it is important to cover some basic definitions and principles. Very rarely does one hear about web scraping in Java—a language often thought to be solely the domain of enterprise software and interactive web apps of the 90's and early 2000's. However, there are many reasons why Java is an often underrated language for web scraping: Java's excellent exception-handling lets you compile code that elegantly handles the often-messy Web Reusable data structures allow you to write once and use everywhere with ease and safety Java's concurrency libraries allow you to write code that can process other data while waiting for servers to return information (the slowest part of any scraper) The Web is big and slow, but the Java RMI allows you to write code across a distributed network of machines, in order to collect and process data quickly There are a variety of standard libraries for getting data from servers, as well as third-party libraries for parsing this data, and even executing JavaScript (which is needed for scraping some websites) In this article, we will explore these, and other benefits of Java in web scraping, and build several scrapers ourselves. Although it is possible, and recommended, to skip to the sections you already have a good grasp of, keep in mind that some sections build up the code and concepts of other sections. When this happens, it will be noted in the beginning of the section. How is this legal? Web scraping has always had a "gray hat" reputation. While websites are generally meant to be viewed by actual humans sitting at a computer, web scrapers find ways to subvert that. While APIs are designed to accept obviously computer-generated requests, web scrapers must find ways to imitate humans, often by modifying headers, forging POST requests and other methods. Web scraping often requires a great deal of problem solving and ingenuity to figure out how to get the data you want. There are often few roadmaps or tried-and-true procedures to follow, and you must carefully tailor the code to each website—often riding between the lines of what is intended and what is possible. Although this sort of hacking can be fun and challenging, you have to be careful to follow the rules. Like many technology fields, the legal precedent for web scraping is scant. A good rule of thumb to keep yourself out of trouble is to always follow the terms of use and copyright documents on websites that you scrape (if any). There are some cases in which the act of web crawling is itself in murky legal territory, regardless of how the data is used. Crawling is often prohibited in the terms of service of websites where the aggregated data is valuable (for example, a site that contains a directory of personal addresses in the United States), or where a commercial or rate-limited API is available. Twitter, for example, explicitly prohibits web scraping (at least of any actual tweet data) in its terms of service: "crawling the Services is permissible if done in accordance with the provisions of the robots.txt file, however, scraping the Services without the prior consent of Twitter is expressly prohibited" Unless explicitly prohibited by the terms of service, there is no fundamental difference between accessing a website (and its information) via a browser, and accessing it via an automated script. The robots.txt file alone has not been shown to be legally binding, although in many cases the terms of service can be. Writing a simple scraper (Simple) Wikipedia is not just a helpful resource for researching or looking up information but also a very interesting website to scrape. They make no efforts to prevent scrapers from accessing the site, and, with a very well-marked-up HTML, they make it very easy to find the information you're looking for. In this project, we will scrape an article from Wikipedia and retrieve the first few lines of text from the body of the article. Getting ready It is recommended that you have some working knowledge of Java, and the ability to create and execute Java programs at this point. As an example, we will use the article from the following Wikipedia link: http://en.wikipedia.org/wiki/Java Note that this article is about the Indonesian island nation Java, not the programming language. Regardless, it seems appropriate to use it as a test subject. We will be using the jsoup library to parse HTML data from websites and convert it into a manipulatable object, with traversable, indexed values (much like an array). In this xercise, we will show you how to download, install, and use Java libraries. In addition, we'll also be covering some of the basics of the jsoup library in particular. How to do it... Now that we're starting to get into writing scrapers, let's create a new project to keep them all bundled together. Carry out the following steps for this task: Open Eclipse and create a new Java project called Scraper. Packages are still considered to be handy for bundling collections of classes together within a single project (projects contain multiple packages, and packages contain multiple classes). You can create a new package by highlighting the Scraper project in Eclipse and going to File | New | Package . By convention, in order to prevent programmers from creating packages with the same name (and causing namespace problems), packages are named starting with the reverse of your domain name (for example, com.mydomain.mypackagename). For the rest of the article, we will begin all our packages with com.packtpub.JavaScraping appended with the package name. Let's create a new package called com.packtpub.JavaScraping.SimpleScraper. Create a new class, WikiScraper, inside the src folder of the package. Download the jsoup core library, the first link, from the following URL: http://jsoup.org/download Place the .jar file you downloaded into the lib folder of the package you just created. In Eclipse, right-click in the Package Explorer window and select Refresh. This will allow Eclipse to update the Package Explorer to the current state of the workspace folder. Eclipse should show your jsoup-1.7.2.jar file (this file may have a different name depending on the version you're using) in the Package Explorer window. Right-click on the jsoup JAR file and select Build Path | Add to Build Path. In your WikiScraper class file, write the following code: package com.packtpub.JavaScraping.SimpleScraper; import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import java.net.*; import java.io.*; public class WikiScraper { public static void main(String[] args) { scrapeTopic("/wiki/Python"); } public static void scrapeTopic(String url){ String html = getUrl("http://www.wikipedia.org/"+url); Document doc = Jsoup.parse(html); String contentText = doc.select("#mw-content-text > p").first().text(); System.out.println(contentText); } public static String getUrl(String url){ URL urlObj = null; try{ urlObj = new URL(url); } catch(MalformedURLException e){ System.out.println("The url was malformed!"); return ""; } URLConnection urlCon = null; BufferedReader in = null; String outputText = ""; try{ urlCon = urlObj.openConnection(); in = new BufferedReader(new InputStreamReader(urlCon.getInputStream())); String line = ""; while((line = in.readLine()) != null){ outputText += line; } in.close(); }catch(IOException e){ System.out.println("There was an error connecting to the URL"); return ""; } return outputText; } } Assuming you're connected to the internet, this should compile and run with no errors, and print the first paragraph of text from the article. How it works... Unlike our HelloWorld example, there are a number of libraries needed to make this code work. We can incorporate all of these using the import statements before the class declaration. There are a number of jsoup objects needed, along with two Java libraries, java.io and java.net , which are needed for creating the connection and retrieving information from the Web. As always, our program starts out in the main method of the class. This method calls the scrapeTopic method, which will eventually print the data that we are looking for (the first paragraph of text in the Wikipedia article) to the screen. scrapeTopic requires another method, getURL, in order to do this. getUrl is a function that we will be using throughout the article. It takes in an arbitrary URL and returns the raw source code as a string. Essentially, it creates a Java URL object from the URL string, and calls the openConnection method on that URL object. The openConnection method returns a URLConnection object, which can be used to create a BufferedReader object. BufferedReader objects are designed to read from, potentially very long, streams of text, stopping at a certain size limit, or, very commonly, reading streams one line at a time. Depending on the potential size of the pages you might be reading (or if you're reading from an unknown source), it might be important to set a buffer size here. To simplify this exercise, however, we will continue to read as long as Java is able to. The while loop here retrieves the text from the BufferedReader object one line at a time and adds it to outputText, which is then returned. After the getURL method has returned the HTML string to scrapeTopic, jsoup is used. jsoup is a Java library that turns HTML strings (such as the string returned by our scraper) into more accessible objects. There are many ways to access and manipulate these objects, but the function you'll likely find yourself using most often is the select function. The jsoup select function returns a jsoup object (or an array of objects, if more than one element matches the argument to the select function), which can be further manipulated, or turned into text, and printed. The crux of our script can be found in this line: String contentText = doc.select("#mw-content-text > p").first().text(); This finds all the elements that match #mw-content-text > p (that is, all p elements that are the children of the elements with the CSS ID mw-content-text), selects the first element of this set, and turns the resulting object into plain text (stripping out all tags, such as <a> tags or other formatting that might be in the text). The program ends by printing this line out to the console. There's more... Jsoup is a powerful library that we will be working with in many applications throughout this article. For uses that are not covered in the article, I encourage you to read the complete documentation at http://jsoup.org/apidocs/. What if you find yourself working on a project where jsoup's capabilities aren't quite meeting your needs? There are literally dozens of Java-based HTML parsers on the market. Summary Thus in this article we took the first step towards web scraping with Java, and also learned how to scrape an article from Wikipedia and retrieve the first few lines of text from the body of the article. Resources for Article : Further resources on this subject: Making a simple cURL request (Simple) [Article] Web Scraping with Python [Article] Generating Content in WordPress Top Plugins—A Sequel [Article]  
Read more
  • 0
  • 0
  • 9647
article-image-master-virtual-desktop-image-creation
Packt
11 Sep 2013
11 min read
Save for later

Master Virtual Desktop Image Creation

Packt
11 Sep 2013
11 min read
(For more resources related to this topic, see here.) When designing your VMware Horizon View infrastructure, creating a Virtual Desktop master image is second only to infrastructure design in terms of importance. The reason for this is simple; as ubiquitous as Microsoft Windows is, it was never designed to be a hosted Virtual Desktop. The good news is that with a careful bit of planning, and a thorough understanding of what your end users need, you can build a Windows desktop that serves all your needs, while requiring the bare minimum of infrastructure resources. A default installation of Windows contains many optional components and configuration settings that are either unsuitable for, or not needed in, a Virtual Desktop environment, and understanding their impact is critical to maintaining Virtual Desktop performance over time and during peak levels of use. Uninstalling unneeded components and disabling services or scheduled tasks that are not required will help reduce the amount of resources the Virtual Desktop requires, and ensure that the View infrastructure can properly support the planned number of desktops even as resources are oversubscribed. Oversubscription is defined as having assigned more resources than what is physically available. This is most commonly done with processor resources in Virtual Desktop environments, where a single server processor core may be shared between multiple desktops. As the average desktop does not require 100 percent of its assigned resources at all times, we can share those resources between multiple desktops without affecting the performance. Why is desktop optimization important? To date, Microsoft has only ever released a version of Windows designed to be installed on physical hardware. This isn't to say that Microsoft is unique is this regard, as neither Linux and Mac OS X offers an installation routine that is optimized for a virtualized hardware platform. While nothing stops you from using a default installation of any OS or software package in a virtualized environment, you may find it difficult to maintain consistent levels of performance in Virtual Desktop environments where many of the resources are shared, and in almost every case oversubscribed in some manner. In this section, we will examine a sample of the CPU and disk IO resources that can be recovered were you to optimize the Virtual Desktop master image. Due to the technological diversity that exists from one organization to the next, optimizing your Virtual Desktop master image is not an exact science. The optimization techniques used and their end results will likely vary from one organization to the next due to factors unrelated to View or vSphere. The information contained within this article will serve as a foundation for optimizing a Virtual Desktop master image, focusing primarily on the operating system. Optimization results – desktop IOPS Desktop optimization benefits one infrastructure component more than any other: storage. Until all flash storage arrays achieve price parity with the traditional spinning disk arrays many of us use today, reducing the per-desktop IOPS required will continue to be an important part of any View deployment. On a per-disk basis, a flash drive can accommodate more than 15 times the IOPS of an enterprise SAS or SCSI disk, or 30 times the IOPS of a traditional desktop SATA disk. Organizations that choose an all-flash array may find that they have more than sufficient IOPS capacity for their Virtual Desktops, even without doing any optimization. The following graph shows the reduction in IOPS that occurred after performing the optimization techniques described later in this article. The optimized desktop generated 15 percent fewer IOPS during the user workload simulation. By itself that may not seem like a significant reduction, but when multiplied by hundreds or thousands of desktops the savings become more significant. Optimization results – CPU utilization View supports a maximum of 16 Virtual Desktops per physical CPU core. There is no guarantee that your View implementation will be able to attain this high consolidation ratio, though, as desktop workloads will vary from one type of user to another. The optimization techniques described in this article will help maximize the number of desktops you can run per each server core. The following graph shows the reduction in vSphere host % Processor Time that occurred after performing the optimization techniques described later in this article: % Processor Time is one of the metrics that can be used to measure server processor utilization within vSphere. The statistics in the preceding graph were captured using the vSphere ESXTOP command line utility, which provides a number of performance statistics that the vCenter performance tabs do not offer, in a raw format that is more suited for independent analysis. The optimized desktop required between 5 to 10 percent less processor time during the user workload simulation. As was the case with the IOPS reduction, the savings are significant when multiplied by large numbers of desktops. Virtual Desktop hardware configuration The Virtual Desktop hardware configuration should provide only what is required based on the desktop needs and the performance analysis. This section will examine the different virtual machine configuration settings that you may wish to customize, and explain their purpose. Disabling virtual machine logging Every time a virtual machine is powered on, and while it is running, it logs diagnostic information within the datastore that hosts its VMDK file. For environments that have a large number of Virtual Desktops, this can generate a noticeable amount of storage I/O. The following steps outline how to disable virtual machine logging: In the vCenter client, right-click on the desktop master image virtual machine and click on Edit Settings to open the Virtual Machine Properties window. In the Virtual Machine Properties window, select the Options tab. Under Settings , highlight General . Clear Enable logging as shown in the following screenshot, which sets the logging = "FALSE" option in the virtual machine VMX file: While disabling logging does reduce disk IO, it also removes log files that may be used for advanced troubleshooting or auditing purposes. The implications of this change should be considered before placing the desktop into production. Removing unneeded devices By default, a virtual machine contains several devices that may not be required in a Virtual Desktop environment. In the event that these devices are not required, they should be removed to free up server resources. The following steps outline how to remove the unneeded devices: In the vCenter client, right-click on the desktop master image virtual machine and click on Edit Settings to open the Virtual Machine Properties window. In the Virtual Machine Properties window, under Hardware , highlight Floppy drive 1 as shown in the following screenshot and click on Remove : In the Virtual Machine Properties window, select the Options tab. Under Settings , highlight Boot Options . Check the checkbox under the Force BIOS Setup section as shown in the following screenshot: Click on OK to close the Virtual Machine Properties window. Power on the virtual machine; it will boot into the PhoenixBIOS Setup Utility . The PhoenixBIOS Setup Utility menu defaults to the Main tab. Use the down arrow key to move down to the Legacy Diskette A , and then press the Space bar key until the option changes to Disabled . Use the right arrow key to move to the Advanced tab. Use the arrow down key to select I/O Device Configuration and press Enter to open the I/O Device Configuration window. Disable the serial ports, parallel port, and floppy disk controller as shown in the following screenshot. Use the up and down arrow keys to move between devices, and the Space bar to disable or enable each as required: Press the F10 key to save the configuration and exit the PhoenixBIOS Setup Utility . Do not remove the virtual CD-ROM device, as it is used by vSphere when performing an automated installation or upgrade of the VMware Tools software. Customizing the Windows desktop OS cluster size Microsoft Windows uses a default cluster size, also known as allocation unit size, of 4 KB when creating the boot volume during a new installation of Windows. The cluster size is the smallest amount of disk space that will be used to hold a file, which affects how many disk writes must be made to commit a file to disk. For example, when a file is 12 KB in size, and the cluster size is 4 KB, it will take three write operations to write the file to disk. The default 4 KB cluster size will work with any storage option that you choose to use with your environment, but that does not mean it is the best option. Storage vendors frequently do performance testing to determine which cluster size is optimal for their platforms, and it is possible that some of them will recommend that the Windows cluster size should be changed to ensure optimal performance. The following steps outline how to change the Windows cluster size during the installation process; the process is the same for both Windows 7 and Windows 8. In this example, we will be using an 8 KB cluster size, although any size can be used based on the recommendation from your storage vendor. The cluster size can only be changed during the Windows installation, not after. If your storage vendor recommends the 4 KB Windows cluster size, the default Windows settings are acceptable. Boot from the Windows OS installer ISO image or physical CD and proceed through the install steps until the Where do you want to install Windows? dialog box appears. Press Shift + F10 to bring up a command window. In the command window, enter the following commands: diskpart select disk 0 create partition primary size=100 active format fs=ntfs label="System Reserve" quick create partition primary format fs=ntfs label=OS_8k unit=8192 quick assign exit Click on Refresh to refresh the Where do you want to install Windows? window. Select Drive 0 Partition 2: OS_8k , as shown in the following screenshot, and click on Next to begin the installation: The System Reserve partition is used by Windows to store files critical to the boot process and will not be visible to the end user. These files must reside on a volume that uses a 4 KB cluster size, so we created a small partition solely for that purpose. Windows will automatically detect this partition and use it when performing the Windows installation. In the event that your storage vendor recommends a different cluster size than shown in the previous example, replace the 8192 in the sample command in step 3 with whatever value the vendor recommends, in bytes, without any punctuation. Windows OS pre-deployment tasks The following tasks are unrelated to the other optimization tasks that are described in this article but they should be completed prior to placing the desktop into production. Installing VMware Tools VMware Tools should be installed prior to the installation of the View Agent software. To ensure that the master image has the latest version of the VMware Tools software, apply the latest updates to the host vSphere Server prior to installing the tools package on the desktop. The same applies if you are updating your VMware Tools software. The View Agent software should be reinstalled after the VMware Tools software is updated to ensure that the appropriate View drivers are installed in place of the versions included with VMware Tools. Cleaning up and defragmenting the desktop hard disk To minimize the space required by the Virtual Desktop master image and ensure optimal performance, the Virtual Desktop hard disks should be cleaned of nonessential files and optimized prior to deployment into production. The following actions should be taken once the Virtual Desktop master image is ready for deployment: Use the Windows Disk Cleanup utility to remove any unnecessary files. Use the Windows Defragment utility to defragment the virtual hard disk. If the desktop virtual hard disks are thinly provisioned, you may wish to shrink them after the defragmentation completes. This can be performed with utilities from your storage vendor if available, by using the vSphere vmkfstools utility, or by using the vSphere storage vMotion feature to move the virtual machine to a different datastore. Visit your storage vendor or the VMware vSphere Documentation (http://www.vmware.com/support/pubs/vsphere-esxi-vcenter-server-pubs.html) for instructions on how to shrink virtual hard disks or perform a storage vMotion.
Read more
  • 0
  • 0
  • 2512

article-image-cash-flow-management
Packt
11 Sep 2013
5 min read
Save for later

Cash Flow Management

Packt
11 Sep 2013
5 min read
(For more resources related to this topic, see here.) Budgets in Management Reporter 2012 The inquiries and report in Dynamics GP for budgets are good but fairly limited in functionality. Fortunately, another range of Dynamics products is available for use to report on budgets. This is the Management Reporter 2012 financial reporting product. With the Dynamics GP 2013 Starter Pack (the base licensing pack), an unlimited number of administrator, designer, generator, and viewer licenses are available. Management Reporter allows for the reporting of multiple budgets for periods, ranges of periods, or YTD. In this section, we'll take a look at producing a fairly simple budget for the Sales division using the 2017 SALES budget created earlier. Before producing the report, you will need a fully implemented installation of the latest version of Management Reporter 2012 (at time of writing, this is Rollup 6). You also need security access to Management Reporter and a basic understanding of the reporting product. We are going to cover a fairly simple report in this section in three parts showing how to create the row definition, column definition, and then the report definition, which pulls the first two together into a working report. Creating the row definition To create the row definition, follow the given steps: Launch Management Reporter 2012 and log into the Fabrikam, Inc. company as normal. Press Ctrl + Shift + R to create a new row definition. Click on the Edit menu and then click on Insert Rows from Dimensions. In the Division column, perform the following steps: Enter &&& into the Dimensions row. Enter 300 into the Dimension Range Start and Dimension Range End rows. In the Account column, change the value in Dimensions to ####. Click on OK to close the Insert Rows from Dimensions window and update the row definition. Click on Save. Enter BUDGET-SALES in the Name field. Enter Budget – Sales in the Description field. Click on OK and close the row definition. This row definition is very simple in structure, and will give an overview of the figures for the Sales division. However, with the options on the report definition that we will set later, we'll be able to drill down and see more details. Creating the column definition To create the column definition, follow the given steps: Launch Management Reporter 2012 and log into the Fabrikam, Inc. company. Press Ctrl + Shift + C to create a new column definition. Enter Desc in the Column Type in column A. In column B, perform the following steps: Double-click on the Header 1 cell and enter Sales Budget @FiscalYear in the Column header text and enter B in Spread from and G in Spread to. Click on Ok to close the Column Header window. In Header 2 enter 1 to 3, which is the period range that the column will contain. Enter FD in the Column Type row which defines this column as containing either actual or budget figures from the financial dimension. Enter 2017 Sales in the Book Code / Attribute Category row to select the required budget. Enter 2017 in the Fiscal Year row. Enter 1:3 in the Period row, which will calculate the figures for periods 1, 2, and 3. Enter PERIODIC in the Periods Covered row. Enter P<=B in the Print Column row. Repeat step 4.2 to step 4.8 for 4 to 6, 7 to 9, and 10 to 12 in Header 2; 4:6, 7:9, and 10:12 in the Period row. In column F, perform the following steps: In Header 2, enter Year-to-Date. Enter FD in the Column Type row. Enter 2017 Sales in the Book Code / Attribute Category row. Enter 2017 in the Fiscal Year row. Enter BASE in the Period row. Enter YTD in the Periods Covered row. In column G, perform the following steps: In Header 2, enter @FiscalYear. Enter FD in the Column Type row. Enter 2017 Sales in the Book Code / Attribute Category row. Enter 2017 in the Fiscal Year row. Enter 1:12 in the Period row. Enter PERIODIC in the Periods Covered row. Click on Save to save the new column definition. Enter BUDGET-SALES-2017 in the Name field. Enter Budget – Sales 2017 in the Description field. Click on OK and close the column definition. Creating the report definition To create the default records needed for analytical accounting, follow the given steps: Launch Management Reporter 2012 and log into the Fabrikam, Inc. company as normal. Press Ctrl + Shift + P to create a new report definition. Set the Detail level: to Financial, Account, & Transaction. Fabrikam, Inc. is operating in 2017, so change the Base Year: to 2017. Set the Row: to BUDGET-SALES. Set the Column: to BUDGET–SALES 2017. Click on the Output and Distribution tab. Enter BUDGET-SALES 2017 in the Output name: field. Click on Save to save the new column definition. Enter BUDGET-SALES-2017 in the Name field. Enter Budget – Sales 2017 in the Description field. Click on OK and close the column definition. Click on Generate to produce the report and launch the Report Viewer. As the base period was set to April, the print control means only the first of the periodic columns displays on the report. Clicking on the line will drill down to the account level showing the breakdown of the budget values on the accounts. As with report created in Management Reporter, additional columns can be added to the column definition to include actual figures in the report as well as calculation fields. Summary In this article, we have taken a look at the inquiries and reports available within a standard implementation of Microsoft Dynamics GP as well as looking at how Management Reporter 2012 can be used to extend this reporting. Resources for Article : Further resources on this subject: Setting up the Microsoft Dynamics GP System [Article] Planning: Microsoft Dynamics GP System [Article] Drilling Back to Source Data in Dynamics GP 2013 using Dashboards [Article]
Read more
  • 0
  • 0
  • 11126

article-image-html5-canvas
Packt
11 Sep 2013
5 min read
Save for later

HTML5 Canvas

Packt
11 Sep 2013
5 min read
(For more resources related to this topic, see here.) Setting up your HTML5 canvas (Should know) This recipe will show you how to first of all set up your own HTML5 canvas. With the canvas set up, we can then move on to look at some of the basic elements the canvas has to offer and how we would go about implementing them. For this task we will be creating a series of primitives such as circles and rectangles. Modern video games make use of these types of primitives in many different forms. For example, both circles and rectangles are commonly used within collision-detection algorithms such as bounding circles or bounding boxes. How to do it... As previously mentioned we will begin by creating our own HTML5 canvas. We will start by creating a blank HTML file. To do this, you will need some form of text editor such as Microsoft Notepad (available for Windows) or the TextEdit application (available on Mac OS). Once you have a basic webpage set up, all that is left to do in order to create a canvas is to place the following between both body tags: <canvas id="canvas" width="800" height="600"></canvas> As previously mentioned, we will be implementing a number of basic elements within the canvas. In order to do this we must first link the JavaScript file to our webpage. This file will be responsible for the initialization, loading, and drawing of objects to the canvas. In order for our scripts to have any effect on our canvas we must create a separate file called canvas example. Create this new file within your text editor and then insert the following code declarations: var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); These declarations are responsible for retrieving both the canvas element and context. Using the canvas context, we can begin to draw primitives, text, and load textures into our canvas. We will begin by drawing a rectangle in the top-left corner of our canvas. In order to do this place the following code below our previous JavaScript declarations: context.fillStyle="#FF00FF";context.fillRect(15,15,150,75); If you were to now view the original webpage we created, you would see the rectangle being drawn in the top-left corner at position X: 15, Y: 15. Now that we have a rectangle, we can look at how we would go about drawing a circle onto our canvas. This can be achieved by means of the following code: context.beginPath();context.arc(350,150,40,0,2 * Math.PI);context.stroke(); How it works... The first code extract represents the basic framework required to produce a blank webpage and is necessary for a browser to read and display the webpage in question. With a basic webpage created, we then declare a new HTML5 canvas. This is done by assigning an id attribute, which we use to refer to the canvas within our scripts. The canvas declaration then takes a width and height attribute, both of which are also necessary to specify the size of the canvas, that is, the number of pixels wide and pixels high. Before any objects can be drawn to the canvas, we first need to get the canvas element. This is done through means of the getElementById method that you can see in our canvas example. When retrieving the canvas element, we are also required to specify the canvas context by calling a built-in HTML5 method known as getContext. This object gives access to many different properties and methods for drawing edges, circles, rectangles, external images, and so on. This can be seen when we draw a rectangle to our the canvas. This was done using the fillStyle property, which takes in a hexadecimal value and in return specifies the color of an element. Our next line makes use of the fillRect method, which requires a minimum of four values to be passed to it. These values include the X and Y position of the rectangle, as well as the width and height of the rectangle. As a result, a rectangle is drawn to the canvas with the color, position, width, and height specified. We then move on to drawing a circle to the canvas, which is done by firstly calling a built-in HTML canvas method known as BeginPath. This method is used to either begin a new path or to reset a current path. With a new path setup, we then take advantage of a method known as Arc that allows for the creation of arcs or curves, which can be used to create circles. This method requires that we pass both an X and Y position, a radius, and a starting angle measured in radians. This angle is between 0 and 2 * Pi where 0 and 2 are located at the 3 o'clock position of the arc's circle. We also must pass an ending angle, which is also measured in radians. The following figure is taken directly from the W3C HTML canvas reference, which you can find at the following link http://bit.ly/UCVPY1: Summary In this article we saw how to first of all set up our own HTML5 canvas. With the canvas set up, we can then move on to look at some of the basic elements the canvas has to offer and how we would go about implementing them. Resources for Article: Further resources on this subject: Building HTML5 Pages from Scratch [Article] HTML5 Presentations - creating our initial presentation [Article] HTML5: Generic Containers [Article]
Read more
  • 0
  • 0
  • 2606
article-image-ravendbnet-client-api
Packt
11 Sep 2013
12 min read
Save for later

RavenDB.NET Client API

Packt
11 Sep 2013
12 min read
(For more resources related to this topic, see here.) The RavenDB .NET Client API RavenDB provides a set of .NET client libraries for interacting with it, which can be accessed from any .NET-based programming languages. By using these libraries, you can manage RavenDB, construct requests, send them to the server, and receive responses. The .NET Client API exposes all aspects of the RavenDB and allows developers to easily integrate RavenDB services into their own applications. The .NET Client API is involved with loading and saving the data, and it is responsible for integrating with the .NET System.Transactions namespace. With System.Transactions, there is already a general way to work transactionally across different resources. Also the .NET Client API is responsible for batching requests to the server, caching, and more. The .NET Client API is easy to use and uses several conventions to control how it works. These conventions can be modified by the user to meet its application needs. It is not recommended to use System.Transactions. In fact, it is recommended to avoid it. System.Transactions is supported in RavenDB mostly to allow integration while using collaboration tools between services for example, NServiceBus. Setting up your development environment Before you can start developing an application for RavenDB, you must first set up your development environment. This setup involves installing the following software packages on your development computer: Visual Studio 2012 (required) RavenDB Client (required) NuGet Package Manager (optional) You may download and install the latest Visual Studio version from the Microsoft website: http://msdn.microsoft.com/En-us/library/vstudio/e2h7fzkw.aspx In order to use RavenDB in your own .NET application, you have to add a reference to the Raven.Client.Lightweight.dll and the Raven.Abstractions.dll files, (which you can find in the ~Client folder of the distribution package) into your Visual Studio project. The easiest way to add a reference to these DLLs is by using the NuGet Package Manager, which you may use to add the RavenDB.Client package. NuGet Package Manager is a Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects that use the .NET framework. You can find more information on the NuGet Package Manager extension by visiting the official website at http://nuget.org/. Time for action – installing NuGet Package Manager The NuGet Package Manager extension is the easiest way to add the RavenDB Client library to a Visual Studio project. If you do not have NuGet Package Manager already installed, you can install it as follows: Start Visual Studio. From the TOOLS menu, click on Extensions and Updates.... In the Extensions and Updates... dialog, click on Online. If you don’t see NuGet Package Manager, type nuget package manager in the search box. Select the NuGet Package Manager extension and click on Download. After the download completes, you will be prompted to install the package. After the installation completes, you might be prompted to restart Visual Studio. What just happened? We installed the NuGet Package Manager extension to Visual Studio, which you will use to add RavenDB Client to your Visual Studio project. Creating a simple application Let’s write a simple application to learn how to interact with RavenDB. Time for action – adding RavenDB Client to a Visual Studio project Let’s go ahead and create a new Visual Studio project. You will add the RavenDB Client using the Nuget Package Manager extension to this project to be able to connect to RavenDB and begin using it: Start Visual Studio and click on New Project from the Start page or from the File menu, navigate to New and then Project. In the Templates pane, click on Installed and then click on Templates and expand the Visual C# node. Under Visual C#, click on Windows. In the list of project templates, select Console Application. Name the project as RavenDB_Ch03 and click on OK. From the TOOLS menu, click on Library Package Manager. If you do not see this menu item, make sure that the NuGet Package Manager extension has been installed correctly. Click on Manage NuGet Packages for Solution.... In the Manage NugGet Packages dialog, select Online. In the search box, type ravendb. Select the package named RavenDB Client. Click on Install and accept the license. After the package installs, click on Close to close the dialog box. What just happened? We created the RavenDB_Ch03 Visual Studio project and added the RavenDB Client to get connected to the RavenDB server. Once the RavenDB Client is installed, by expanding the References node of your project in Visual Studio, you can see the RavenDB DLLs (Raven.Abstractions, Raven.Client.Lightweight) added automatically to your project by the Nuget Package Manager extension. You should ensure that the RavenDB Client version matches the server version you are running. This can lead to some really frustrating runtime errors when the versions don’t match. You can also install RavenDB Client using the Package Manager console (Visual Studio | Tools | Library Package Manager | Package Manager Console). To install the latest RavenDB Client, run the following command in the Package Manager console: Install-Package RavenDB.Client or Install-Package RavenDB.Client–Version {version number} to add a specific version. Connecting to RavenDB To begin using RavenDB we need to get a new instance of the DocumentStore object, which points to the server and acts as the main communication channel manager. Once a new instance of DocumentStore has been created, the next step is to create a new session against that Document Store. The session object is responsible for implementing the Unit of Work pattern. A Unit of Work keeps track of everything you do during a business transaction that can affect the database. When you’re done, it figures out everything that needs to be done to alter the database as a result of your work. The session object is used to interact with RavenDB and provides a fully transactional way of performing database operations, and allows the consumer to store data into the database, and load it back when necessary using queries or by document ID. In order to perform an action against the RavenDB store, we need to ensure that we have an active and valid RavenDB session before starting the action, and dispose it off once it ends. Basically, before disposing of the session, we will call the SaveChanges() method on the session object to ensure that all changes will be persisted. To create a new RavenDB session, we will call the OpenSession() method on the DocumentStore object, which will return a new instance of the IDocumentSession object. Time for action – connecting to RavenDB Your Visual Studio project now has a reference to all needed RavenDB Client DLLs and is ready to get connected to the RavenDB server. You will add a new class and necessary code to create a communication channel with the RavenDB server: Open the RavenDB_Ch03 project. Modify the Main() method (in Program.cs class) to look like the following code snippet: Press Ctrl + Shift + S to save all files in the solution. What just happened? We just added the DocumentStore object initialization code to the Main() method of the RavenDB_Ch03 project. Within the Main() method, you create a new instance of the DocumentStore object, which is stored in the DocumentStore variable. The DocumentStore object basically acts as the connection manager and must be created only once per application. It is important to point out that this is a heavyweight and thread safe object. Note that, when you create many of these your application will run slow and will have a larger memory footprint. To create an instance of the DocumentStore object, you need to specify the URL that points to the RavenDB server. The URL has to include the TCP port number (8080 is the default port number) on which RavenDB server is listening (line 17 in the previous code snippet). In order to point to the Orders database, you set the value of DefaultDatabase to Orders, which is the name of our database (line 18). To get the new instance of the IDocumentStore object, you have to call the Initialize() method on the DocumentStore object. With this instance, you can establish the connection to the RavenDB server (line 19). The whole DocumentStore initialization code is surrounded by a using statement. This is used to specify when resources should be released. Basically, the using statement calls the Dispose() method of each object for which the resources should be released. Interacting with RavenDB using the .NET Client API RavenDB stores documents in JSON format. It converts the .NET objects into their JSON equivalent when storing documents, and back again by mapping the .NET object property names to the JSON property names and copies the values when loading documents. This process that makes writing and reading data structures to and from a document file extremely easy is called Serialization and Deserialization. Interacting with RavenDB is very easy. You might create a new DocumentStore object and then open a session, do some operations, and finally apply the changes to the RavenDB server. The session object will manage all changes internally, but changes will be committed to the underlying document database only when the SaveChanges() method is called. This is important to note because all changes to the document will be discarded if this method is not invoked. RavenDB is safe by default. This unique feature means that the database is configured to stop users querying for large amount of data. It is never a good idea to have a query that returns thousands of records, which is inefficient and may take a long time to process. By default, RavenDB limits the number of documents on the client side to 128 (this is a configurable option) if you don't make use of the Take() method on the Query object. Basically, if you need to get data beyond the 128 documents limit, you need to page your query results (by using Take() and Skip() methods). RavenDB also has a very useful option to stop you from creating the dreaded SELECT N+1 scenario—this feature stops after 30 requests are sent to the server per session, (which also is a configurable option). The recommended practice is to keep the ratio of SaveChanges() calls to session instance at 1:1. Reaching the limit of 30 remote calls while maintaining the 1:1 ratio is typically a symptom of a significant N+1 problem. To retrieve or store documents, you might create a class type to hold your data document and use the session instance to save or load that document, which will be automatically serialized to JSON. Loading a document To load a single document from a RavenDB database, you need to invoke the Load() method on the Session object you got from the DocumentStore instance. Then you need to specify the type of the document you will load from the RavenDB database. Time for action – loading a document You will create the Order class to hold the order data information and will add the LoadOrder()method, which you will call to load an Order document from the RavenDB server: Open the RavenDB_Ch03 project, add a new class and name it Order. Add the following code snippet to the Order class: Add the DisplayOrder() method to the Program class using the following code snippet: Add the Load<Order>() method to the Program class using the following code snippet: Save all the files and press F6 to build the solution. Switch to Windows Explorer and go to the RavenDB installation folder and launch RavenDB server using the Start.cmd command file. Return to Visual Studio, once the RavenDB server is running, press F5 to run RavenDB_Ch03 to see the document information in the output console window. What just happened? You just wrote the necessary code to load your first document from the RavenDB server. Let’s take a look at the code you added to the RavenDB_Ch03 project. You added the Order class to the project. This class will hold the data information for the Order document you will load from the server. It contains six fields (lines 11 to 16 in the previous code snippet) that will be populated with values from the JSON Order document stored on the server. By adding a field named Id, RavenDB will automatically populate this field with the document ID when the document is retrieved from the server. You added the DisplayOrder() method to the Program class. This method is responsible for displaying the Order field’s values to the output window. You also added the Load<Order>() method (lines 26 to 30) to the Program class. This method is surrounded by a using statement to ensure that the resources will be disposed at the end of execution of this method. To open a RavenDB session you call the OpenSession() method on the IDocumentStore object. This session is handled by the session variable (line 26). The Load() method is a generic method. It will load a specific entity with a specific ID, which you need to provide when calling the method. So in the calling code to the Load() method (line 28), you provide the Order entity and the document ID that we want to retrieve from the server which is Orders/A179854. Once the Order document with the Id field as Orders/A179854 is retrieved from the server, you send it to the DisplayOrder() method to be displayed (line 29). Finally, you build and run the RavenDB_Ch03 project. Have a go hero – loading multiple documents You know now how to load any single document from the RavenDB server using the Load() method. What if you have more than one document to load? You can use the Load() method to load more than one document in a single call. It seems easy to do. Well give it a go! Arrays are very useful!
Read more
  • 0
  • 0
  • 2700

article-image-architecture-javascriptmvc
Packt
10 Sep 2013
2 min read
Save for later

The architecture of JavaScriptMVC

Packt
10 Sep 2013
2 min read
(For more resources related to this topic, see here.) DocumentJS DocumentJS is an independent JavaScript documentation application and provides the following: Inline demos with source code and HTML panels Adds tags to the documentation Adds documentation as favorite Auto suggest search Test result page Comments Extends the JSDoc syntax Adds undocumented code because it understands JavaScript FuncUnit FuncUnit is an independent web testing framework and provides the following: Test clicking, typing, moving mouse cursor, and drag-and-drop utility Follows users between pages Multi browser and operating system support Continuous integration solution Writes and debugs tests in the web browser Chainable API that parallels jQuery jQueryMX jQueryMX is the MVC part of JavaScriptMVC and provides the following: Encourages logically separated, deterministic code MVC layer Uniform client-side template interface (supports jq-tmpl, EJS, JAML, Micro, and Mustache) Ajax fixtures Useful DOM utilities Language helpers JSON utilities Class system Custom events StealJS StealJS is an independent code manager and build tool and provides the following powerful features: Dependency management Loads JavaScript and CoffeeScript Loads CSS, Less, and Sass files Loads client-side templates such as TODO Loasd individual files only once Loads files from a different domain Concatenation and compression Google Closure compressor Makes multi-page build Pre processes TODO Can conditionally remove specified code from the production build Builds standalone jQuery plugins Logger Logs messages in a development mode Code generator Generates an application skeleton Adds the possibility to create your own generator Package management Downloads and install plugins from SVN and Git repositories Installs the dependencies Runs install scripts Loads individual files only once Loads files from a different domain Code cleaner Runs JavaScript beautifier against your codebase Runs JSLint against your codebase Resources for Article : Further resources on this subject: YUI Test [Article] From arrays to objects [Article] Writing Your First Lines of CoffeeScript [Article]
Read more
  • 0
  • 0
  • 2154
Modal Close icon
Modal Close icon