Search Results

Search found 8941 results on 358 pages for 'src jar'.

Page 157/358 | < Previous Page | 153 154 155 156 157 158 159 160 161 162 163 164  | Next Page >

  • swap a div to an embed form when user tweets using the @anywhere function box

    - by Jeff
    I'm using the @anywhere twitter function on the front page of my site (vocabbomb.com) and right now it works great to allow users to tweet straight away. Problem is, when they click tweet, it just reloads the twitter box, empty. I want it to load something new, like a "thank you, now fill in this email form" and show a mailchimp form. Ok so this is the @anywhere code currently working fine: <div id="tbox"></div> <script type="text/javascript"> twttr.anywhere(function (T) { T("#tbox").tweetBox({ height: 100, width: 400, defaultContent: " #vocabbomb", label: "Use the word foo in a tweet:", }); }); </script> So this is fine, and when the user writes a tweet, it just re-displays the twitter box. I understand there is a function that lets you specify stuff after the tweet is made: (example from http://dev.twitter.com/pages/anywhere_tweetbox) <div id="example-ontweet"></div> <script type="text/javascript"> twttr.anywhere(function (T) { T("#example-ontweet").tweetBox({ onTweet : function(plaintext, html) { console.log(plaintext); alert(html); } }); }); </script> Is this the best way to attempt this? Or do I need a function or something that changes what's in the div to something else? I want the mailchimp email form to show up after the tweet. It includes a ton of script and tags and starts like this: <!-- Begin MailChimp Signup Form --> <!--[if IE]> <style type="text/css" media="screen"> #mc_embed_signup fieldset {position: relative;} #mc_embed_signup legend {position: absolute; top: -1em; left: .2em;} </style> <![endif]--> <!--[if IE 7]> <style type="text/css" media="screen"> .mc-field-group {overflow:visible;} </style> <![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script> <script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script> <div id="mc_embed_signup"> <form action="http://faresharenyc.us1.list-manage.com/subscribe/post?u=106b58b4751a007d826715754&amp;id=2fe6ba4e6a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial, sans-serif;font-size: 10px;"> ... So my attempt to just require it inside the function didn't work at all: <div id="tbox"></div> <script type="text/javascript"> twttr.anywhere(function (T) { T("#tbox").tweetBox({ height: 100, width: 400, defaultContent: " #vocabbomb", label: "Use the word foo in a tweet:", onTweet: function(plain, html){ <?php require_once('mailchimp.html'); ?> } }); }); </script> Nettuts had a brief discussion here: http://net.tutsplus.com/tutorials/javascript-ajax/using-twitters-anywhere-service-in-6-steps/ I am seeing now that the 'onTweet' function simply adds some text above the twitter box, but doesn't actually replace the entire twitter box. How do I do that? Is it possible? Thanks!

    Read the article

  • How can I determine if an image has loaded, using Javascript/jQuery?

    - by Kip
    I'm writing some Javascript to resize the large image to fit into the user's browser window. (I don't control the size of the source images unfortunately.) So something like this would be in the HTML: <img id="photo" src="a_really_big_file.jpg" alt="this is some alt text" title="this is some title text" /> Is there a way for me to determine if the src image in an img tag has been downloaded? I need this because I'm running into a problem if $(document).ready() is executed before the browser has loaded the image. $("#photo").width() and $("#photo").height() will return the size of the placeholder (the alt text). In my case this is something like 134 x 20. Right now I'm just checking if the photo's height is less than 150, and assuming that if so it is just alt text. But this is quite a hack, and it would break if a photo is less than 150 pixels tall (not likely in my particular case), or if the alt text is more than 150 pixels tall (could possibly happen on a small browser window). Edit: For anyone wanting to see the code: $(function() { var REAL_WIDTH = $("#photo").width(); var REAL_HEIGHT = $("#photo").height(); $(window).resize(adjust_photo_size); adjust_photo_size(); function adjust_photo_size() { if(REAL_HEIGHT < 150) { REAL_WIDTH = $("#photo").width(); REAL_HEIGHT = $("#photo").height(); if(REAL_HEIGHT < 150) { //image not loaded.. try again in a quarter-second setTimeout(adjust_photo_size, 250); return; } } var new_width = . . . ; var new_height = . . . ; $("#photo").width(Math.round(new_width)); $("#photo").height(Math.round(new_height)); } }); Update: Thanks for the suggestions. There is a risk of the event not being fired if I set a callback for the $("#photo").load event, so I have defined an onLoad event directly on the image tag. For the record, here is the code I ended up going with: <img id="photo" onload="photoLoaded();" src="a_really_big_file.jpg" alt="this is some alt text" title="this is some title text" /> Then in Javascript: //This must be outside $() because it may get called first var isPhotoLoaded = false; function photoLoaded() { isPhotoLoaded = true; } $(function() { //Hides scrollbars, so we can resize properly. Set with JS instead of // CSS so that page doesn't break with JS disabled. $("body").css("overflow", "hidden"); var REAL_WIDTH = -1; var REAL_HEIGHT = -1; $(window).resize(adjust_photo_size); adjust_photo_size(); function adjust_photo_size() { if(!isPhotoLoaded) { //image not loaded.. try again in a quarter-second setTimeout(adjust_photo_size, 250); return; } else if(REAL_WIDTH < 0) { //first time in this function since photo loaded REAL_WIDTH = $("#photo").width(); REAL_HEIGHT = $("#photo").height(); } var new_width = . . . ; var new_height = . . . ; $("#photo").width(Math.round(new_width)); $("#photo").height(Math.round(new_height)); } });

    Read the article

  • jQuery Validation in ASP.NET

    - by Abu Hamzah
    i have a strange situation may its a easy fix or something i may be missing but here is the question. i have a asp.net form with master page and my validation works great without any problem but the problems starts when i try to hook my click event to the server side, here is what i meant: i have a form with few fields on it and if the form is empty than it should STOP submitting, otherwise allow me to execute the server side script but its not happening, even my form is in invalid state (i do get error message saying i have to enter the required fileds) but still executing my server side script. i would like to execute my server side script only if the form is in valid state. here is my code: my master page <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>jQuery Validation in ASP.NET Master Page</title> <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script> <script src="Scripts/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> <script src="Scripts/jquery.validate.js" type="text/javascript"></script> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html> my content page: <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <script type="text/javascript"> $(document).ready(function() { $("#aspnetForm").validate({ rules: { <%=txtName.UniqueID %>: { minlength: 2, required: true }, <%=txtEmail.UniqueID %>: { required: true, email:true } }, messages: { <%=txtName.UniqueID %>:{ required: "* Required Field *", minlength: "* Please enter atleast 2 characters *" } } }); }); </script> Name: <asp:TextBox ID="txtName" MaxLength="30" runat="server" /><br /> Email: <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br /> <asp:Button ID="btnSubmit" runat="server" onclick="SubmitTheForm();" Text="Submit" /> </asp:Content> function SubmitTheForm() { SaveTheForm(); } function SaveTheForm() { debugger; var request = buildNewContactRequest(); ContactServiceProxy.invoke({ serviceMethod: "PostNewContact", data: { request: request }, callback: function(response) { processCompletedContactStore(response); }, error: function(xhr, errorMsg, thrown) { postErrorAndUnBlockUI(xhr, errorMsg, thrown); } }); return false; }

    Read the article

  • how to pull href link

    - by user1751494
    I am trying to pull a link from a page that is in a formal I can't seem to find by simply googling... it might be simple but xpath is not my area of expertise I am using c# and trying to pull the link and just write it to the console to figure out how to get the link here is my C# code var document = webGet.Load("http://classifieds.castanet.net/cat/vehicles/cars/0_-_4_years_old/"); var browser = document.DocumentNode.SelectSingleNode("//a[starts-with(@href,'/details/')]"); if (browser != null) { string htmlbody = browser.OuterHtml; Console.WriteLine(htmlbody); } the html code section is <div class="last">&hellip;</div><a href="/cat/vehicles/cars/0_-_4_years_old/?p=13">13</a><a href="/cat/vehicles/cars/0_-_4_years_old/?p=2">&raquo;</a> <select name="sortby" class="sortby" onchange="doSort(this);"> <option value="">Most Recent</option> <option value="of" >Oldest First</option> <option value="mw" >Most Views</option> <option value="lw" >Fewest Views</option> <option value="lp" >Lowest Price</option> <option value="hp" >Highest Price</option> </select><div style="clear:both"></div> </div> <br /><br /><br /> <a href="/details/2008_vw_gti/1454282/" class="prod_container" > <h2>2008 VW GTi</h2> <div style="float:left; width:122px; z-index:1000"> <div class="thumb"><img src="http://c.castanet.net/img/28/thumbs/1454282-1-1.jpg" border="0"/></div> <div class="clear"></div> mls </div> <div class="descr"> The most fun car I have owned. Dolphin Grey, 4 door, Dual Climate control, DRG Transmission with paddle shift. Leather... </div> <div class="pdate"> <p class="price">$19,000.00</p> <p class="date">Kelowna<br />Posted: Oct 15, 2:54 PM<br />Views: 349</p> </div> <div style="clear:both" ></div> <div class="seal"><img src="/images/bookmark.png" /></div> </a> <a href="/details/price_drop_gorgeous_rare_white_2009_honda_accord_ex-l_coupe/1447341/" class="prod_container" > <h2>PRICE DROP!!! Gorgeous Rare White 2009 Honda Accord EX-L Coupe </h2> <div style="float:left; width:122px; z-index:1000"> <div class="thumb"><img src="http://c.castanet.net/img/28/thumbs/1447341-1-1.jpg" border="0"/></div> <div class="clear"></div> sun2010 </div> <div class="descr"> the link I'm trying to get is the "/details/2008_vw_gti/1454282/" part. THanks

    Read the article

  • Need to determine button clicked in a JQuery mobile popup and perform actions based thereon

    - by Clifford
    I am having a problem with a JQM popup. The popup has 3 buttons, and the action taken in the main program depends on which button is clicked. The code in the main program is run more than once and I am not sure why. The simple example below uses an alert to display which button on the popup was clicked. When the popup is called the first time, it works as hoped, the 2nd time, the alert is displayed twice, the 3rd time, the alert is displayed 3 times, etc. <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" /> <script type="text/javascript" charset="utf-8" src="cordova-2.6.0.js"></script> <script type="text/javascript" src="js/jquery-1.9.1.min.js"/></script> <script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script> <script> function doCustomDialog(text1,button1,button2,button3,callback) { $("#customDialog .customDialogDesc").text(text1); $("#customDialog .customDialogOption1").text(button1).on("click.customDialog", function(){ callback("option1"); }); $("#customDialog .customDialogOption2").text(button2).on("click.customDialog", function(){ callback("option2"); }); $("#customDialog .customDialogOption3").text(button3).on("click.customDialog", function(){ callback("option3"); }); $("#customDialog").popup("open"); } </script> </head> <body> <div data-role="page" id="mainPage"> <div data-role="content"> <INPUT type="button" id="confirm" value="Save data" /> <div data-role="popup" id="customDialog" data-title="Are you sure?" class="ui-content"> <p class ="customDialogDesc">???</p> <a href="#" class ="customDialogOption1" data-role="button" data-theme="b" data-rel="back">Yes</a> <a href="#" class ="customDialogOption2" data-role="button" data-theme="b" data-rel="back">No</a> <a href="#" class ="customDialogOption3" data-role="button" data-theme="b" data-rel="back">Cancel</a> </div> </div> </div> <script> $("#mainPage").on("pageshow", function(e) { $("#confirm").click(function() { doCustomDialog("A similar record already exists. Do you want to Update the existing record or Add a new record?", "Update", "Add", "Cancel", function( returned ) { //Do things depending on the button clicked, for now just display which button was clicked alert(returned); }); }); }); </script> </body> </html>

    Read the article

  • jquery mouse events masked by img in IE8 - all other platforms/browsers work fine

    - by Bruce
    Using the jQuery mouse events for mouseenter, mouseleave or hover all work swimmingly on all Mac or Windows browsers except for IE8/Windows. I am using mouseenter and mouseleave to test for hot rectangles (absolutely positioned and dimensioned divs that have no content) over an image used as hotspots to make visible the navigation buttons when different regions of the main enclosing rectangle (image) are touched by the cursor. Windows/IE jQuery never sends notifications (mouseenter our mouseleave) as the cursor enters or exits one of the target divs. If I turn off the visibility of the image everything works as expected (like it does in every other browser), so the image is effectively blocking all messages (the intention was for the image to be a background and all the divs float above it, where they can be clicked on). I understand that there's a z-index gotcha (so explicitly specifying z-index for each absolute positioned div does not work), but unclear as to how to nest or order multiple divs to allow a single set of jQuery rules to support all browsers. The image tag seems to trump all other divs and always appear in front of them... BTW: I could not use i m g as a tag in this text so it is spelled image in the following, so the input editor does not think that I am trying to pull a fast one on stackoverflow... How used? "mainview" is the background image, "zoneleft" and "zoneright" are the active areas where when the cursor enters the nav buttons "leftarrow" and rightarrow" are supposed to appear. Javascript $("div#zoneleft").bind("mouseenter",function () // enters left zone see left arrow { arrowVisibility("left"); document.getElementById("leftarrow").style.display="block"; }).bind("mouseleave",function () { document.getElementById("leftarrow").style.visibility="hidden"; document.getElementById("rightarrow").style.visibility="hidden"; }); HTML <div id="zoneleft" style="position:absolute; top:44px; left:0px; width:355px; height:372px; z-index:40;"> <div id="leftarrow" style="position:absolute; top:158px; left:0px; z-index:50;"><img src="images/newleft.png" width="59" height="56"/></div></div> <div id="zoneright" style="position:absolute; top:44px; left:355px; width:355px; height:372px; z-index:40;"> <div id="rightarrow" style="position:absolute; top:158px; left:296px; z-index:50;"> (tag named changed so that I could include it here) <image src="images/newright.png" width="59" height="56" /></div></div> </div><!-- navbuttons --> <image id="mainview" style="z-index:-1;" src="images/projectPhotos/photo1.jpg" width:710px; height:372px; /> (tag named changed so that I could include it here) </div><!--photo-->

    Read the article

  • jquery parent/children selector for counting <li>

    - by Kreker
    Hi. I have this piece of HTML <div id="fileTreeInviati"> <ul class="php-file-tree"> <li class="pft-directory"> <a href="#" class="" name="101">A006 - SOMETEXT (<span name="contaNew"></span>)</a> <img src="./moduli/home/images/info.png" title="Informazioni Azienda" class="imgInfo"/> <ul style="display: none;"> <li class="pft-file ext-png"> <a href="javascript:getInfoFile('4');" class="" id="4">cut.png</a> </li> <li class="pft-file ext-dll"> <a href="javascript:getInfoFile('27');" class="new" id="27">Safari.dll</a> </li> </ul> </li> <li class="pft-directory"> <a href="#" class="" name="102">A012 - SOMETEXT (<span name="contaNew"></span>)</a> <img src="./moduli/home/images/info.png" title="Informazioni Azienda" class="imgInfo"/> <ul style="display: none;"> <li class="pft-file ext-jpg"> <a href="javascript:getInfoFile('19');" class="new" id="19">04.jpg</a> </li> <li class="pft-file ext-dll"> <a href="javascript:getInfoFile('24');" class="new" id="24">Safari.dll</a> </li> </ul> </li> <li class="pft-directory"> <a href="#" class="" name="103">A014 - SOMETEXT (<span name="contaNew"></span>)</a> <img src="./moduli/home/images/info.png" title="Informazioni Azienda" class="imgInfo"/> <ul style="display: none;"> <li class="pft-file ext-txt"> <a href="javascript:getInfoFile('17');" class="new" id="17">acu.txt</a> </li> <li class="pft-file ext-dll"> <a href="javascript:getInfoFile('22');" class="new" id="22">Safari.dll</a> </li> </ul> </li> </ul> I'm working on a js snippet that cycle through all "a" of the "li" and checks if it has the class "new" if yes increment a counter by one. This counter now has to be printed on the relative "li" "span" 3 level before. So I have the number of the element with the "new" class. The js snippet is this $("#fileTreeInviati .php-file-tree .pft-directory li").each(function(){ $(this).children("a").each(function(i,e){ if ($(e).hasClass("new")){ cont++; console.log($(e).text()); $(this).parent().parent().parent().children("a").children("span").text(cont); } }) cont = 0; }); I think I'm almost there but the counter is always 1. I think there is something mess with .children, maybe it can handle only the first occurrence? Thanks for help

    Read the article

  • get text from a certain <tr> tag

    - by WideBlade
    Is there a way to get the text in a dynamic way from a certain <tr> tag in the page? e.g. I've a page with a <tr> with the value "a1". I'd like to get only the text from this <tr> tag, and echo it into the page. is this possible? here is the HTML: <html><tr id='ieconn2' > <td><table width='100%'><tr><td valign='top'><table width='100%'><tr><td><script type="text/javascript"><!-- google_ad_client = "pub-4503439170693445"; /* 300x250, created 7/21/10 */ google_ad_slot = "7608120147"; google_ad_width = 300; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><br>When Marshall and Lily fear they will never get pregnant, they see a specialist who can hopefully help move the process along. Meanwhile, Robin starts her new job.<br><br><b>Source: </b>CBS <br>&nbsp;</td></tr><tr><td><b>There are no foreign summaries for this episode:</b> <a href='/edit/shows/3918/episode_foreign_summary/?eid=1065002553&season=6'>Contribute</a></td></tr><tr><td><b>English Recap Available: </b> <a href='/How_I_Met_Your_Mother/episodes/1065002553?show_recap=1'>View Here</a></td></tr></table></td><td valign='top' width='250'><div align='left'> <img alt='How I Met Your Mother season 6 episode 13' src="http://images.tvrage.com/screencaps/20/3918/1065002553.jpg" width="248" border='0' > </div><div align='center'><a href='/How_I_Met_Your_Mother/episodes/1065002553?gallery=1'>6 gallery images</a></div></td></tr></table></td></tr><tr> <td background='/_layout_v3/buttons/title.jpg' height='39' width='631' align='center'> <table width='100%' cellpadding='0' cellspacing='0' style='margin: 1px 1px 1px 1px;'> <tr> <td align='left' style='cursor: pointer;' onclick="SwitchHeader('ieconn3','iehide3','26')" width='90'>&nbsp;<span style='font-size: 15px; font-weight: bold; color: black; padding-left: 8px;' id='iehide3'><img src='/_layout_v3/misc/minus.gif' width='26'></span></td> <td align='center' style='cursor: pointer;' onclick="SwitchHeader('ieconn3','iehide3','26')" ><h5 class='nospace'>Sponsored Links</h5><a name=''></a></td> <td align='left' width='90' >&nbsp;</td></tr></table></td> </tr></html> All I want to get is this text: "When Marshall and Lily fear they will never get pregnant, they see a specialist who can hopefully help move the process along. Meanwhile, Robin starts her new job. "

    Read the article

  • z-index not working in IE8 with the sortable jQuery plugin

    - by Ojtwist
    I'm working with the jQuery Sortable plugin to drag and drop images from one box to another box. This works fine in ff,chrome and safari but it fails in IE8. It seems that when you start dragging that the image is send to the back. I've tried to solve this by adding the z-index option to the sortable plugin, i've tried appending it to a node higher in the hierarchy (body). It appears that setting a z-index on every other item in the page would fix this, haven't tried it yet and i'm not planning on doing this because this would mess up alot. So the user can drag an image from 1 gallery to the next gallery screenshot of how it should work: http://img69.imageshack.us/i/draganddrop.jpg/ Some html: <!--SECOND ARROCRDION ITEM --> <a class="flickr_accordeon_header" id="flickr_second_header" href="javascript:;">__MSG__SEARCH_FOR_PHOTOS__</a> <div> <p class ="flickr_text" > __MSG__SEARCH_FOR_PHOTOS__</p> <form method="GET" action="javascript:;"> <p> <input type="text" value="__MSG__SEARCH__" id="flickr_key_input" class="flickr_changeColorNormal" /> <button class="s3d-button flickr_search" id="flickr_seach_button"> <span class="s3d-button-inner" >__MSG__SEARCH__</span> </button> <img src="/devwidgets/flickr/images/ajax-loader-gray.gif" alt="__MSG__LOADING_IMAGE__" id="flickr_loading_img" /> <a href="javascript:;" id="flickr_refresh_key_button"><img src="/dev/_images/recent_activity_icon.png" alt="refresh" title='refresh' /></a> </p> </form> <div id="flickr_input_error">__MSG__INPUT_ERROR__</div> <div id="flickr_input_same_error">__MSG__INPUT_SAME_ERROR__</div> **<div id="flickr_key_gallery" ><ul class="flickr_key_ul"><li></li></ul></div>** <div id="flickr_key_pagging" ></div> </div> </div> <!--SLIDING SIDEBAR --> <div id="flickr_sidebar" class="jcarousel-skin-tango"> <div id="flickr_side_paging"></div> **<ul> <li><img src="/devwidgets/flickr/images/drop-image.png" alt="__MSG__DROP_HERE__" class="flick_drop_here"></li> </ul>** </div> The images get rendered into the ul, so basically it's just an ul with li's with images javascript for sortable: horizontal: { helper: "clone", // Instead of dragging the real image a copy will be dragged connectWith: ["#flickr_sidebar ul"], // To be able to drag and drop an image to another image gallery they need to be connected cursor: 'pointer', //change the cursor when dragging opacity: 0.50, //Change the opacity while dragging appendTo: 'body', //When dropped the images need to be appended to the image gallery where they are dropped containment: 'body', //Make sure the user can't drag the images outside the widget revert: true, // if the user releases the image ouside the dropbox it'll return to it's original position zIndex: 9999 } I've tried it with setting the dragged image to absolute and the container on relative... doesn't work Anyone know how to solve this in IE8 ?

    Read the article

  • how to make a div(black border,and on the google-maps) panel drop-disable,thanks

    - by zjm1126
    the black div is used to panel,so it can not be droppable. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes"> </head> <body onload="initialize()" onunload="GUnload()"> <style type="text/css"> *{ margin:0; padding:0; } .container{ padding:10px; width:50px; height:50px; border:5px solid black; } </style> <!--<div style="width:100px;height:100px;background:blue;"> </div>--> <div id="map_canvas" style="width: 500px; height: 300px;"></div> <!-- <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> --> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script> <script type="text/javascript"> var aFn; //********** function initialize() { if (GBrowserIsCompatible()) { //************ function a() { } a.prototype = new GControl(); a.prototype.initialize = function(map) { var container = document.createElement("div"); var a=''; for(i=0;i<5;i++){ a+='<div class=b style="width: 20px; height: 20px;background:red;position:absolute;"></div>' } $(container).addClass('container'); $(container).droppable( 'destroy' ).css('z-index','2700') $(map.getContainer()).append($(container).append(a)); return container; } a.prototype.getDefaultPosition = function() { return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7)); } //************ var map = new GMap2(document.getElementById("map_canvas")); map.addControl(new a()); var center=new GLatLng(39.9493, 116.3975); map.setCenter(center, 13); aFn=function(x,y){ var point =new GPoint(x,y) point = map.fromContainerPixelToLatLng(point); //console.log(point.x+" "+point.y) map.addOverlay(new GMarker(point)); } $(".b").draggable({}); $("#map_canvas").droppable({ drop: function(event,ui) { //console.log(ui.offset.left+' '+ui.offset.top) aFn(ui.offset.left+10,ui.offset.top+10); ui.draggable.remove(); } }); } } //************* </script> </body> </html>

    Read the article

  • jQuery - Need help stopping animation on click command.

    - by iamtheratio
    With a few of your help I was able to get the jquery I wanted to work flawlessly, except for one thing.. the animation doesn't stop when i click on the buttons. Scenario: I have an Image, and 3 buttons underneath labeled "1","2", and "3". The jquery will automate the click function every 4500ms and switch from 1 to 2, then 2 to 3 and continuously loop. However the problem is, if I manually click on a 1,2,3 button the animation does not stop. Any ideas how I could accomplish this? jQuery: var tabs; var len; var index = 1; var robot; function automate() { tabs.eq((index%len)).trigger('click'); index++; } robot = setInterval(automate, 5500); jQuery(document).ready(function(){ jQuery(".imgs").hide(); jQuery(".img_selection a").click(function(){ stringref = this.href.split('#')[1]; $(".img_selection a[id$=_on]").removeAttr('id'); this.id = this.className + "_on"; jQuery('.imgs').hide(); if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") { jQuery('.imgs#' + stringref).show(); } else jQuery('.imgs#' + stringref).fadeIn(); return false; }); $('.img_selection a').removeAttr('id').eq(0).trigger('click'); tabs = jQuery(".img_selection a"); len = tabs.size(); }); I tried adding the below code, with a lot of help from this website, but to no avail.. CODE: jQuery(document).ready(function(){ jQuery(".imgs").hide().click(function(){ clearInterval(robot); }); HTML: <!-- TOP IMAGE ROTATION --> <div id="upper_image"> <div id="img1" class="imgs"> <p><img src="images/top_image.jpg" width="900" height="250" alt="The Ratio - Print Projects!" border="0" /></p> </div> <div id="img2" class="imgs"> <p><img src="images/top_image2.jpg" width="900" height="250" alt="The Ratio - In The Works!" border="0" /></p> </div> <div id="img3" class="imgs"> <p><img src="images/top_image3.jpg" width="900" height="250" alt="The Ratio!" border="0" /></p> </div> </div> <!-- / TOP IMAGE ROTATION --> <!-- TOP IMAGE SELECTION --> <ul class="img_selection"> <li><a id="img1_on" class="img1" href="#img1">1</a></li> <li><a class="img2" href="#img2">2</a></li> <li><a class="img3" href="#img3">3</a></li> </ul> <!-- / TOP IMAGE SELECTION -->

    Read the article

  • Pagination links do not work properly - incorrect PHP function??

    - by ClarkSKent
    Hi everyone, I am still trying to figure out how to fix my pagination script to work properly. the problem I am having is when I click any of the pagination number links to go the next page, the new content does not load. literally nothing happens and when looking at the console in Firebug, nothing is sent or loaded. I have on the main page 3 links to filter the content and display it. When any of these links are clicked the results are loaded and displayed along with the associated pagination numbers for that specific content. I believe the problem is coming from the function(generate_pagination.php (seen below)). Here is the main page so you can how I am including and starting the function(I'm new to php): <?php include_once('generate_pagination.php'); ?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="jquery_pagination.js"></script> <div id="loading" ></div> <div id="content" data-page="1"></div> <ul id="pagination"> <?php generate_pagination($sql) ?> </ul> <br /> <br /> <a href="#" class="category" id="marketing">Marketing</a> <a href="#" class="category" id="automotive">Automotive</a> <a href="#" class="category" id="sports">Sports</a> This is as mentioned above, where i think the problem persists since I know nothing of the function formats and how to properly incorporate them: <?php function generate_pagination($sql) { include_once('config.php'); $per_page = 3; //Calculating no of pages $result = mysql_query($sql); $count = mysql_fetch_row($result); $pages = ceil($count[0]/$per_page); //Pagination Numbers for($i=1; $i<=$pages; $i++) { echo '<li class="page_numbers" id="'.$i.'">'.$i.'</li>'; } } $ids=$_GET['ids']; generate_pagination("SELECT COUNT(*) FROM explore WHERE category='$ids'"); ?> I thought I might as well through in the jquery if someone wants to see: $(document).ready(function(){ //Display Loading Image function Display_Load() { $("#loading").fadeIn(900,0); $("#loading").html("<img src='bigLoader.gif' />"); } //Hide Loading Image function Hide_Load() { $("#loading").fadeOut('slow'); }; //Default Starting Page Results $("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'}); Display_Load(); $("#content").load("pagination_data.php?page=1", Hide_Load()); //Pagination Click $("#pagination li").click(function(){ Display_Load(); //CSS Styles $("#pagination li") .css({'border' : 'solid #dddddd 1px'}) .css({'color' : '#0063DC'}); $(this) .css({'color' : '#FF0084'}) .css({'border' : 'none'}); //Loading Data var pageNum = this.id; $("#content").load("pagination_data.php?page=" + pageNum, function(){ $(this).attr('data-page', pageNum); Hide_Load(); }); }); // Editing below. // Sort content Marketing $("a.category").click(function() { Display_Load(); var this_id = $(this).attr('id'); $.get("pagination.php", { category: this.id }, function(data){ //Load your results into the page var pageNum = $('#content').attr('data-page'); $("#pagination").load('generate_pagination.php?category=' + pageNum +'&ids='+ this_id ); $("#content").load("filter_marketing.php?page=" + pageNum +'&id='+ this_id, Hide_Load()); }); }); }); Any help would be appreciated on getting the function to work properly. Thank you.

    Read the article

  • Hiding tables that have no data to display.

    - by Kinyanjui Kamau
    Hi Guys, I have this css styling and was wondering what I need to change in order to collapse/hide html tables that are empty. The style: <style> #search_settings { position:relative; height:25px; width:500px; } #users_table_results { border-collapse:separate; empty-cells:hide; } #events_table_results { border-collapse:separate; empty-cells:hide; } #establishments_table_results { border-collapse:separate; empty-cells:hide; } </style> My HTML: <div id="search_settings"> <table width="500" border="0"> <tr> <td height="20" class="heading_text_18">Search results</td> </tr> </table> <table id="users_table_results" max-width="500" name="users" border="0"> <tr> <td width="50" height="50"><a href="#profile.php"><img src="Images/<?php echo $row_result_users['picture_thumb_url']; ?>" border="0" height="50" width="50"/></a></td> <td width="150" class="ordinary_text_12"><?php echo $row_result_users['user_first_name']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_result_users['user_last_name']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_result_users['username']; ?></td> </tr> </table> <table id="events_table_results" width="500" name="events" border="0"> <tr> <td width="50" height="50"><a href="#profile.php"><img src="Images/<?php echo $row_event['event_thumb_url']; ?>" border="0" height="50" width="50"/></a></td> <td width="150" class="ordinary_text_12"><?php echo $row_event['event_name']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_event['event_venue']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_event['event_date']; ?></td> </tr> </table> <table id="establishments_table_results" width="500" name="establishments" border="0"> <tr> <td width="50" height="50"><a href="#profile.php"><img src="Establishment_Images/<?php echo $row_establishment['establishment_thumb_url']; ?>" border="0" height="50" width="50"/></a></td> <td width="150" class="ordinary_text_12"><?php echo $row_establishment['establishment_name']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_establishment['location_name']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_establishment['establishment_pricing']; ?></td> </tr> </table> </div> I would want it such that if there are no results for my events table, the table does not show(there is no blank space between search results where event results should be because border=0). Can you hide entire tables?

    Read the article

  • "Too much recursion" error when loading the same page with a hash

    - by Elliott
    Hi, I have a site w/ an image gallery ("Portfolio") page. There is drop-down navigation that allows a user to view a specific image in the portfolio from any page on the site. The links in the navigation use a hash, and that hash is read and converted into a string of an image filename. The image src attribute on the /portfolio/ page is then swapped out with the new image filename. This works fine if I'm clicking the dropdown link from a page OTHER THAN the /portfolio/ page itself. However if I take the same action from the /portfolio/ page, I get a "too much recursion" error in Firefox. Here's the code: Snippet of the nav markup: <li>Portfolio Category A <ul> <li><a href="/portfolio/#dining-room-table">Dining Room Table</a></li> <li><a href="/portfolio/#bathroom-mirror">Bathroom Mirror</a></li> </ul> </li> JS that reads the hash, converts it to an image filename, and swaps out the image on the page: $(document).ready(function() { if(location.pathname.indexOf("/portfolio/") > -1) { var hash = location.hash; var new_image = hash.replace("#", "")+".jpg"; swapImage(new_image); } }); function swapImage(new_image) { setTimeout(function() { $("img#current-image").attr("src", "/images/portfolio/work/"+new_image); }, 100); } I'm using the setTimeout function because I'm fading out the old image before making the swap, then fading it back in. I initially thought this was the function that was causing the recursion error, but when I remove the setTimeout I still have this problem. Does this have to do with a closure I'm not aware of? I'm pretty green on closures. JS that listens for the click on the nav: $("nav.main li.dropdown li ul li").click(function() { $(this).find("a").click(); $("nav.main").find("ul ul").hide(); $("nav.main li.hover").removeClass("hover"); }); I haven't implemented the fade in/out functionality for the dropdown nav yet, but I have implemented it for Next and Previous arrows, which can also be used to swap out images using the same swapImage function. Here's that code: $("#scroll-arrows a").click(function() { $("#current-image").animate({ opacity: 0 }, 100); var current_image = $("#current-image").attr("src").split("/").pop(); var new_image; var positions = getPositions(current_image); if($(this).is(".right")) { new_image = positions.next_img; } else { new_image = positions.prev_img; } swapImage(new_image); $("#current-image").animate({ opacity: 1 }, 100); return false; }); Here's the error I'm getting in Firefox: too much recursion var ret = handleObj.handler.apply( this, arguments ); jquery.js (line 1936) Thanks for any advice.

    Read the article

  • How do I make the info window editable in the Google Maps API?

    - by zjm1126
    I would like to make the info window editable when i click on it. This is my code: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes"> </head> <body onload="initialize()" onunload="GUnload()"> <style type="text/css"> *{ margin:0; padding:0; } </style> <!--<div style="width:100px;height:100px;background:blue;"> </div>--> <div id="map_canvas" style="width: 500px; height: 300px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script> <script type="text/javascript"> var aFn; //********** function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); var center=new GLatLng(39.9493, 116.3975); map.setCenter(center, 13); aFn=function(x,y){ var point =new GPoint(x,y) point = map.fromContainerPixelToLatLng(point); //console.log(point.x+" "+point.y) var marker = new GMarker(point,{draggable:true}); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<b>wwww</b>"); }); map.addOverlay(marker); /********** var marker = new GMarker(point, {draggable: true}); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml("????..."); }); map.addOverlay(marker); //*/ } $(".b").draggable({ revert: true, revertDuration: 0 }); $("#map_canvas").droppable({ drop: function(event,ui) { //console.log(ui.offset.left+' '+ui.offset.top) aFn(event.pageX-$("#map_canvas").offset().left,event.pageY-$("#map_canvas").offset().top); } }); } } </script> </body> </html>

    Read the article

  • Encoding GBK2312 Condundrum

    - by user792271
    I am an amateur coder and I have a small problem. My goal is to have one text input with two buttons. The first button uses a bit of Javascript called SundayMorning to translate the text (to Chinese) The second button submits the text to a URL. The URl requires that Chinese text be encoded it in GBK2312 character set. I have duct taped together various found code to the result I have now. Due to the finicky behavior of the SundayMorning Javascript, my solution is to have two input boxes, the second of which I will hide. Right now, this doesn't work: I am unable to encode the Chinese in GBK2312, no matter what I try. BONUS CONUNDRUM: The second box copies my input letter by letter as I type, but does not copy the Chinese translation that the Javascript returns. Sorry for my janky amateur code. I defer to those more clever, if you have any kind suggestions. <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <script type='text/javascript' Src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'> </script> ///THIS JS TRANSLATES THE TEXT INLINE <script type="text/javascript" src="jquery.sundaymorning.js"> </script> <script type="text/javascript"> $(function() { $('#example3').sundayMorningReset(); $('#example3 input[type=image]').click(function(evt) { $.sundayMorning( $('#example3 input[type=text]').val(),{source:'en', destination:'ZH', menuLeft:evt.pageX, menuTop:evt.pageY},function(response) {$('#example3 input[type=text]').val(response.translation);});});}); </script> /// ///THIS PUTS THE CONTENT OF THE TRANSLATION BOX INTO THE SUBMISSION BOX <script type="text/javascript"> $(document).ready(function(){ var $url = $("#url"); $("#track").keyup(function() { $url.val(this.value);}); $("#track").blur(function() { $url.val(this.value);});}); </script> ///THIS PUTS THE CONTENT OF THE SUBMISSION INSIDE A URL <SCRIPT type="text/javascript"> function goToPage(url) { var initial = "http://example.com/"; var extension = ".html"; document.something.action=initial+url+extension; } </SCRIPT> </head> <body> <div id="featured"> <div id="example3"> <input type="text" name="track" id="track" value="" class="box"onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('mama').click();}};"/> <input type="image" src="http://taobaofieldguide.com/images/orange-translate-button.png" id="searchsubmit" value="Translate" class="btn" /> </div> <FORM name="something" method="post" onsubmit="goToPage(this.url.value);"> <input type="text" id="url";> <INPUT type="submit" id="mama" value="GO" > </FORM> </div> </body>

    Read the article

  • Host AngularJS (Html5Mode) in ASP.NET vNext

    - by Shaun
    Originally posted on: http://geekswithblogs.net/shaunxu/archive/2014/06/10/host-angularjs-html5mode-in-asp.net-vnext.aspxMicrosoft had announced ASP.NET vNext in BUILD and TechED recently and as a developer, I found that we can add features into one ASP.NET vNext application such as MVC, WebAPI, SignalR, etc.. Also it's cross platform which means I can host ASP.NET on Windows, Linux and OS X.   If you are following my blog you should knew that I'm currently working on a project which uses ASP.NET WebAPI, SignalR and AngularJS. Currently the AngularJS part is hosted by Express in Node.js while WebAPI and SignalR are hosted in ASP.NET. I was looking for a solution to host all of them in one platform so that my SignalR can utilize WebSocket. Currently AngularJS and SignalR are hosted in the same domain but different port so it has to use ServerSendEvent. It can be upgraded to WebSocket if I host both of them in the same port.   Host AngularJS in ASP.NET vNext Static File Middleware ASP.NET vNext utilizes middleware pattern to register feature it uses, which is very similar as Express in Node.js. Since AngularJS is a pure client side framework in theory what I need to do is to use ASP.NET vNext as a static file server. This is very easy as there's a build-in middleware shipped alone with ASP.NET vNext. Assuming I have "index.html" as below. 1: <html data-ng-app="demo"> 2: <head> 3: <script type="text/javascript" src="angular.js" /> 4: <script type="text/javascript" src="angular-ui-router.js" /> 5: <script type="text/javascript" src="app.js" /> 6: </head> 7: <body> 8: <h1>ASP.NET vNext with AngularJS</h1> 9: <div> 10: <a href="javascript:void(0)" data-ui-sref="view1">View 1</a> | 11: <a href="javascript:void(0)" data-ui-sref="view2">View 2</a> 12: </div> 13: <div data-ui-view></div> 14: </body> 15: </html> And the AngularJS JavaScript file as below. Notices that I have two views which only contains one line literal indicates the view name. 1: 'use strict'; 2:  3: var app = angular.module('demo', ['ui.router']); 4:  5: app.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) { 6: $stateProvider.state('view1', { 7: url: '/view1', 8: templateUrl: 'view1.html', 9: controller: 'View1Ctrl' }); 10:  11: $stateProvider.state('view2', { 12: url: '/view2', 13: templateUrl: 'view2.html', 14: controller: 'View2Ctrl' }); 15: }]); 16:  17: app.controller('View1Ctrl', function ($scope) { 18: }); 19:  20: app.controller('View2Ctrl', function ($scope) { 21: }); All AngularJS files are located in "app" folder and my ASP.NET vNext files are besides it. The "project.json" contains all dependencies I need to host static file server. 1: { 2: "dependencies": { 3: "Helios" : "0.1-alpha-*", 4: "Microsoft.AspNet.FileSystems": "0.1-alpha-*", 5: "Microsoft.AspNet.Http": "0.1-alpha-*", 6: "Microsoft.AspNet.StaticFiles": "0.1-alpha-*", 7: "Microsoft.AspNet.Hosting": "0.1-alpha-*", 8: "Microsoft.AspNet.Server.WebListener": "0.1-alpha-*" 9: }, 10: "commands": { 11: "web": "Microsoft.AspNet.Hosting server=Microsoft.AspNet.Server.WebListener server.urls=http://localhost:22222" 12: }, 13: "configurations" : { 14: "net45" : { 15: }, 16: "k10" : { 17: "System.Diagnostics.Contracts": "4.0.0.0", 18: "System.Security.Claims" : "0.1-alpha-*" 19: } 20: } 21: } Below is "Startup.cs" which is the entry file of my ASP.NET vNext. What I need to do is to let my application use FileServerMiddleware. 1: using System; 2: using Microsoft.AspNet.Builder; 3: using Microsoft.AspNet.FileSystems; 4: using Microsoft.AspNet.StaticFiles; 5:  6: namespace Shaun.AspNet.Plugins.AngularServer.Demo 7: { 8: public class Startup 9: { 10: public void Configure(IBuilder app) 11: { 12: app.UseFileServer(new FileServerOptions() { 13: EnableDirectoryBrowsing = true, 14: FileSystem = new PhysicalFileSystem(System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "app")) 15: }); 16: } 17: } 18: } Next, I need to create "NuGet.Config" file in the PARENT folder so that when I run "kpm restore" command later it can find ASP.NET vNext NuGet package successfully. 1: <?xml version="1.0" encoding="utf-8"?> 2: <configuration> 3: <packageSources> 4: <add key="AspNetVNext" value="https://www.myget.org/F/aspnetvnext/api/v2" /> 5: <add key="NuGet.org" value="https://nuget.org/api/v2/" /> 6: </packageSources> 7: <packageSourceCredentials> 8: <AspNetVNext> 9: <add key="Username" value="aspnetreadonly" /> 10: <add key="ClearTextPassword" value="4d8a2d9c-7b80-4162-9978-47e918c9658c" /> 11: </AspNetVNext> 12: </packageSourceCredentials> 13: </configuration> Now I need to run "kpm restore" to resolve all dependencies of my application. Finally, use "k web" to start the application which will be a static file server on "app" sub folder in the local 22222 port.   Support AngularJS Html5Mode AngularJS works well in previous demo. But you will note that there is a "#" in the browser address. This is because by default AngularJS adds "#" next to its entry page so ensure all request will be handled by this entry page. For example, in this case my entry page is "index.html", so when I clicked "View 1" in the page the address will be changed to "/#/view1" which means it still tell the web server I'm still looking for "index.html". This works, but makes the address looks ugly. Hence AngularJS introduces a feature called Html5Mode, which will get rid off the annoying "#" from the address bar. Below is the "app.js" with Html5Mode enabled, just one line of code. 1: 'use strict'; 2:  3: var app = angular.module('demo', ['ui.router']); 4:  5: app.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) { 6: $stateProvider.state('view1', { 7: url: '/view1', 8: templateUrl: 'view1.html', 9: controller: 'View1Ctrl' }); 10:  11: $stateProvider.state('view2', { 12: url: '/view2', 13: templateUrl: 'view2.html', 14: controller: 'View2Ctrl' }); 15:  16: // enable html5mode 17: $locationProvider.html5Mode(true); 18: }]); 19:  20: app.controller('View1Ctrl', function ($scope) { 21: }); 22:  23: app.controller('View2Ctrl', function ($scope) { 24: }); Then let's went to the root path of our website and click "View 1" you will see there's no "#" in the address. But the problem is, if we hit F5 the browser will be turn to blank. This is because in this mode the browser told the web server I want static file named "view1" but there's no file on the server. So underlying our web server, which is built by ASP.NET vNext, responded 404. To fix this problem we need to create our own ASP.NET vNext middleware. What it needs to do is firstly try to respond the static file request with the default StaticFileMiddleware. If the response status code was 404 then change the request path value to the entry page and try again. 1: public class AngularServerMiddleware 2: { 3: private readonly AngularServerOptions _options; 4: private readonly RequestDelegate _next; 5: private readonly StaticFileMiddleware _innerMiddleware; 6:  7: public AngularServerMiddleware(RequestDelegate next, AngularServerOptions options) 8: { 9: _next = next; 10: _options = options; 11:  12: _innerMiddleware = new StaticFileMiddleware(next, options.FileServerOptions.StaticFileOptions); 13: } 14:  15: public async Task Invoke(HttpContext context) 16: { 17: // try to resolve the request with default static file middleware 18: await _innerMiddleware.Invoke(context); 19: Console.WriteLine(context.Request.Path + ": " + context.Response.StatusCode); 20: // route to root path if the status code is 404 21: // and need support angular html5mode 22: if (context.Response.StatusCode == 404 && _options.Html5Mode) 23: { 24: context.Request.Path = _options.EntryPath; 25: await _innerMiddleware.Invoke(context); 26: Console.WriteLine(">> " + context.Request.Path + ": " + context.Response.StatusCode); 27: } 28: } 29: } We need an option class where user can specify the host root path and the entry page path. 1: public class AngularServerOptions 2: { 3: public FileServerOptions FileServerOptions { get; set; } 4:  5: public PathString EntryPath { get; set; } 6:  7: public bool Html5Mode 8: { 9: get 10: { 11: return EntryPath.HasValue; 12: } 13: } 14:  15: public AngularServerOptions() 16: { 17: FileServerOptions = new FileServerOptions(); 18: EntryPath = PathString.Empty; 19: } 20: } We also need an extension method so that user can append this feature in "Startup.cs" easily. 1: public static class AngularServerExtension 2: { 3: public static IBuilder UseAngularServer(this IBuilder builder, string rootPath, string entryPath) 4: { 5: var options = new AngularServerOptions() 6: { 7: FileServerOptions = new FileServerOptions() 8: { 9: EnableDirectoryBrowsing = false, 10: FileSystem = new PhysicalFileSystem(System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, rootPath)) 11: }, 12: EntryPath = new PathString(entryPath) 13: }; 14:  15: builder.UseDefaultFiles(options.FileServerOptions.DefaultFilesOptions); 16:  17: return builder.Use(next => new AngularServerMiddleware(next, options).Invoke); 18: } 19: } Now with these classes ready we will change our "Startup.cs", use this middleware replace the default one, tell the server try to load "index.html" file if it cannot find resource. The code below is just for demo purpose. I just tried to load "index.html" in all cases once the StaticFileMiddleware returned 404. In fact we need to validation to make sure this is an AngularJS route request instead of a normal static file request. 1: using System; 2: using Microsoft.AspNet.Builder; 3: using Microsoft.AspNet.FileSystems; 4: using Microsoft.AspNet.StaticFiles; 5: using Shaun.AspNet.Plugins.AngularServer; 6:  7: namespace Shaun.AspNet.Plugins.AngularServer.Demo 8: { 9: public class Startup 10: { 11: public void Configure(IBuilder app) 12: { 13: app.UseAngularServer("app", "/index.html"); 14: } 15: } 16: } Now let's run "k web" again and try to refresh our browser and we can see the page loaded successfully. In the console window we can find the original request got 404 and we try to find "index.html" and return the correct result.   Summary In this post I introduced how to use ASP.NET vNext to host AngularJS application as a static file server. I also demonstrated how to extend ASP.NET vNext, so that it supports AngularJS Html5Mode. You can download the source code here.   Hope this helps, Shaun All documents and related graphics, codes are provided "AS IS" without warranty of any kind. Copyright © Shaun Ziyan Xu. This work is licensed under the Creative Commons License.

    Read the article

  • CodePlex Daily Summary for Friday, March 05, 2010

    CodePlex Daily Summary for Friday, March 05, 2010New Projects.svn Folders Cleanup Tool: dotSVN Cleanup is a tool that allows you to remove the .svn folders . Just click, browse, say abracadabra ...and the magic is done. Have fun with...Accord: The Accord framework creates an easy we to integrate any Dependency Injection framework into your project, while abstracting the details of your im...Asp.net MVC Lab: Try asp.net mvc outASP.NET Themes management with Webforms: The provided source is an example for how to use themes in ASP.NET Webforms. this source is the "up to date" support for the article I wroteB&W Port Scanner: B&W Port Scanner (formerly Net Inspector) is a fast TCP Port scan utility. The main idea is support of customizable operations to be performed f...BizTalk SWAT - Simple Web Activity Tracker: This is a web based version of BizTalk HAT. The concept is designed to be able to share and enable sharing of orchestration info easily. Some of th...C# Linear Hash Table: A C# dictionary-like implementation of a linear hash table. It is more memory efficiant than the .NET dictionary, and also almost as fast. NOTE: On...DBF Import Export Wizard: DBF Import Export Wizard is a tool for anyone needing to import DBF files into SQL Server or to export SQL Server tables to a DBF file. This proje...Domain as XML - Driven Development: Visual Studio Code Samples: Domain as XML - Driven Development: Visual Studio Code SamplesEasyDownload: This application allows to manage downloads handling an stack of files and several useful configurationsEos2: .FlightTickets: This application allows to buy flight ticketsFotofly PhotoViewer: A Silverlight control that uses the Fotofly metadata library to show the people in a photo (using Windows Live Photo Gallery People metadata) and a...Fujiy source code: Source code examplesGameSet: This application allows to play games with distributed users.Injectivity (Dependency Injection): Injectivity is a dependency injection framework (written in C#) with a strong focus on the ease of configuration and performance. Having been writt...Inventory: Keep track of inputs, materias and salesLoanTin.Com Source Code: LoanTin.Com - a Social Networking Website as same as Tumblr.com, based on source code of Loantiner Project, allow anyone can share anything to anyo...mysln: my solutions.NumTextBox: TextBox控件重写 之NumTextBox,主要实现的功能是,只允许输入数字,或String,Numeric,Currency,Decimal,Float,Double,Short,Int,Long 修改自:http://www.codeproject.com/KB/edit/num...Quick Performance Monitor: This small utility helps to monitor performance counters without using the full blown perfmon tool from Windows. It supports a number of command li...Runo: Runo ResearchSales: This application allows to manage a hardware storeScrewWiki Form Auth Provider: Enables your ASP.NET site to use Forms Authentication to integrate with your ScrewWiki. User management is performed on a parent site, and cookie i...SDS: Scientific DataSet library and tools: The SDS library makes it easy for .Net developers to read, write and share scalars, vectors, matrices and multidimensional grids which are very com...ShapeSweeper: Minesweeper-like game for the Zune HD. Each hidden object has three properties to discover--location, color, and shape--and all three must be corre...SilverlightExcel: an Excel file viewer in Silverlight 4: SilverlightExcel is a Silverlight application allowing you to open and view Excel files and also create graphs.sPWadmin: pwAdmin is an Web Interface based on JSP that uses the PW-Java API to control an PW-Server.Video Player control in Silverlight: A control for playing video in Silverlight 4 with chapters on timeline control. This player will be easily skinnable and customizable. More Featur...XNA Light Pre Pass Renderer: A demo/sample that shows how to write a light pre pass renderer in XNA.Zimms: Collaboration Site for friends, a code depot, and scratch padNew Releases.svn Folders Cleanup Tool: dotSVN Cleanup Tool: dotSVN Cleanup Tool executableAccord: Alpha: Initial build of the Accord framework.AcPrac: AcPrac Ver 0.1: The first version of AcPrac. It is not fully functional, but rather a version to get the bugs out. Please report all bugs.ASP.NET: ASP.NET Browser Definition Files: This download contains: ASP.NET 4 Browser Definition Files -- You can use the new ASP.NET 4 browser definition files with earlier versions of ASP....B&W Port Scanner: Black`n`White Port Scanner 1.0: B&W Port Scanner 1.0 Final Release Date: 03.03.2010 Black`n`WhiteBizTalk SWAT - Simple Web Activity Tracker: BizTalk SWAT: This is a web based version of BizTalk HAT. The concept is designed to be able to share and enable sharing of orchestration info easily. It uses th...BTP Tools: CSB+CUV+HCSB dict files 2010-03-04: 5. is now missing a space between the Strong’s number and the Count: >CSB Translation: 圣所 7, 至圣所G39+G394 it should be: CSB Translation: 圣所 7, 至圣所G...C# Linear Hash Table: Linear Hash Table: First working version of the Linear Hash Table.Cassiopeia: WinTools 1.0 beta: First ReleaseComposure: Caliburn-44007-trunk-vs2010.net40: This is a very simple conversion of the Caliburn trunk (rev 44007) for use in Visual Studio 2010 RC1 built against .NET40. Because the conversion w...Cover Creator: CoverCreator 1.3.0: English and Polish version. Functionality to add image to the front page. Load / save covers.DBF Import Export Wizard: DBF Import Export Wizard Source Code: Version 0.1.0.3DBF Import Export Wizard: DBF_Import_Export_Wizard Setup 0.1.0.3: Zip file contains Setup.exeESB Toolkit Extensions: Tellago BizTalk ESB 2.0 Toolkit Extensions v0.2: Windows Installer file that installs Library on a BizTalk ESB 2.0 system. This Install automatically configures the esb.config to use the new compo...Fotofly PhotoViewer: Fotofly Photoview v0.1: The first public release. Based on a Silverlight application I have been using for over a year at www.tassography.com. This version uses Fotofly v0...HPC with GPUs applied to CG: Cuda Soft Bodies simulation: Cuda src for soft bodiesHPC with GPUs applied to CG: Full Soft Bodies src: full src code for soft bodies simulationInjectivity (Dependency Injection): 2.8.166.2135: Release 2.8.166.2135 of the Injectivity dependency injection framework.Line Counter: 1.5 (Code Outline Preview): This version contains preview of the code outline feature, you can now view C# code outline within Line Counter. Note that the code outline now onl...Micajah Mindtouch Deki Wiki Copier: MicajahWikiCopier: You should use the following line arguments: WikiCopier.exe "http://oldwikiwithdata.wik.is/@api/deki" "login" "password" "http://newwiki.somename.l...ncontrols: Alpha 0.4.0.1: Added some example on the Console Project.NumTextBox: NumTextBox初始版本: TextBox控件重写 之NumTextBox,主要实现的功能是,只允许输入数字,或String,Numeric,Currency,Decimal,Float,Double,Short,Int,Long 此为初始版本PSCodeplex: PS CodePlex 0.2: PS CodePlex 0.2 has some breaking changes to the parameters. A few of the parameters are renamed and a few are made as switch parameters. Add-Rele...Quick Performance Monitor: QPerfMon First release - Version 1.0.0: The first release of the utility.RapidWebDev - .NET Enterprise Software Development Infrastructure: ProductManagement Quick Sample 0.2: This is a sample product management application to demonstrate how to develop enterprise software in RapidWebDev. The glossary of the system are ro...ScrewWiki Form Auth Provider: ScrewWiki Forms Authentication: Initial ReleaseSee.Sharper: See.Sharper.Docs-1.10.3.4: HTML documentation (including Doxygen project)See.Sharper: See.Sharper-1.10.3.4: Solution (Source files, debug and release binaries)Solar.Generic: Solar.Generic 0.8.0.0 Beta (Revised, Renamed): Solar.Generic 0.8.0.0 (Revised & Renamed) Renamed project from Solar.Commons to Solar.Generic. Project solution file is now in format of Visual ...Solar.Security: Solar.Security 1.1.0.0: Performed several major refactorings of code base. Stripped In-Memory implementation of IConfiguration interface of transactional behavior due to...sPWadmin: pwAdmin v0.7: -Star System Simulator: Star System Simulator 2.3: Changes in this release: Fixed several localisation issues. Features in this release: Model star systems in 3D. Euler-Cromer method. Improved...SysI: sysi, stable and ready: This time for sure.TheWhiteAmbit: TheWhiteAmbit - Demo: Two little demos demonstrating: - fast realtime raytracing - generating bent normals for shading (CUDA capable GPU needed = nVidia GeForce >8x00)VsTortoise - a TortoiseSVN add-in for Microsoft Visual Studio: VsTortoise Build 22 Beta: Build 22 (beta) New: Visual Studio 2010 RC support (VsTortoise for Visual Studio 2010 RC screenshots) New: VsTortoise integrates in to Solution E...WinMergeFS: WinMergeFS 0.1.42128alpha: WinMergeFS provides AuFS functionality for windows. With WinMergeFS users can mount multiple directories into a virtual drive. Plugin based root se...WSDLGenerator: WSDLGenerator 0.0.0.2: - Bugs fixed - Code refactored - Added support for custom typesXNA Light Pre Pass Renderer: LightPrePassRendererXNA: Zipped source code for the light pre pass renderer made with XNA.Most Popular ProjectsMetaSharpRawrWBFS ManagerAJAX Control ToolkitMicrosoft SQL Server Product Samples: DatabaseSilverlight ToolkitWindows Presentation Foundation (WPF)LiveUpload to FacebookASP.NETMicrosoft SQL Server Community & SamplesMost Active ProjectsUmbraco CMSRawrBlogEngine.NETSDS: Scientific DataSet library and toolsMapWindow GISpatterns & practices – Enterprise LibraryjQuery Library for SharePoint Web ServicesIonics Isapi Rewrite FilterMDT Web FrontEndDiffPlex - a .NET Diff Generator

    Read the article

  • Project Navigation and File Nesting in ASP.NET MVC Projects

    - by Rick Strahl
    More and more I’m finding myself getting lost in the files in some of my larger Web projects. There’s so much freaking content to deal with – HTML Views, several derived CSS pages, page level CSS, script libraries, application wide scripts and page specific script files etc. etc. Thankfully I use Resharper and the Ctrl-T Go to Anything which autocompletes you to any file, type, member rapidly. Awesome except when I forget – or when I’m not quite sure of the name of what I’m looking for. Project navigation is still important. Sometimes while working on a project I seem to have 30 or more files open and trying to locate another new file to open in the solution often ends up being a mental exercise – “where did I put that thing?” It’s those little hesitations that tend to get in the way of workflow frequently. To make things worse most NuGet packages for client side frameworks and scripts, dump stuff into folders that I generally don’t use. I’ve never been a fan of the ‘Content’ folder in MVC which is just an empty layer that doesn’t serve much of a purpose. It’s usually the first thing I nuke in every MVC project. To me the project root is where the actual content for a site goes – is there really a need to add another folder to force another path into every resource you use? It’s ugly and also inefficient as it adds additional bytes to every resource link you embed into a page. Alternatives I’ve been playing around with different folder layouts recently and found that moving my cheese around has actually made project navigation much easier. In this post I show a couple of things I’ve found useful and maybe you find some of these useful as well or at least get some ideas what can be changed to provide better project flow. The first thing I’ve been doing is add a root Code folder and putting all server code into that. I’m a big fan of treating the Web project root folder as my Web root folder so all content comes from the root without unneeded nesting like the Content folder. By moving all server code out of the root tree (except for Code) the root tree becomes a lot cleaner immediately as you remove Controllers, App_Start, Models etc. and move them underneath Code. Yes this adds another folder level for server code, but it leaves only code related things in one place that’s easier to jump back and forth in. Additionally I find myself doing a lot less with server side code these days, more with client side code so I want the server code separated from that. The root folder itself then serves as the root content folder. Specifically I have the Views folder below it, as well as the Css and Scripts folders which serve to hold only common libraries and global CSS and Scripts code. These days of building SPA style application, I also tend to have an App folder there where I keep my application specific JavaScript files, as well as HTML View templates for client SPA apps like Angular. Here’s an example of what this looks like in a relatively small project: The goal is to keep things that are related together, so I don’t end up jumping around so much in the solution to get to specific project items. The Code folder may irk some of you and hark back to the days of the App_Code folder in non Web-Application projects, but these days I find myself messing with a lot less server side code and much more with client side files – HTML, CSS and JavaScript. Generally I work on a single controller at a time – once that’s open it’s open that’s typically the only server code I work with regularily. Business logic lives in another project altogether, so other than the controller and maybe ViewModels there’s not a lot of code being accessed in the Code folder. So throwing that off the root and isolating seems like an easy win. Nesting Page specific content In a lot of my existing applications that are pure server side MVC application perhaps with some JavaScript associated with them , I tend to have page level javascript and css files. For these types of pages I actually prefer the local files stored in the same folder as the parent view. So typically I have a .css and .js files with the same name as the view in the same folder. This looks something like this: In order for this to work you have to also make a configuration change inside of the /Views/web.config file, as the Views folder is blocked with the BlockViewHandler that prohibits access to content from that folder. It’s easy to fix by changing the path from * to *.cshtml or *.vbhtml so that view retrieval is blocked:<system.webServer> <handlers> <remove name="BlockViewHandler"/> <add name="BlockViewHandler" path="*.cshtml" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" /> </handlers> </system.webServer> With this in place, from inside of your Views you can then reference those same resources like this:<link href="~/Views/Admin/QuizPrognosisItems.css" rel="stylesheet" /> and<script src="~/Views/Admin/QuizPrognosisItems.js"></script> which works fine. JavaScript and CSS files in the Views folder deploy just like the .cshtml files do and can be referenced from this folder as well. Making this happen is not really as straightforward as it should be with just Visual Studio unfortunately, as there’s no easy way to get the file nesting from the VS IDE directly (you have to modify the .csproj file). However, Mads Kristensen has a nice Visual Studio Add-in that provides file nesting via a short cut menu option. Using this you can select each of the ‘child’ files and then nest them under a parent file. In the case above I select the .js and .css files and nest them underneath the .cshtml view. I was even toying with the idea of throwing the controller.cs files into the Views folder, but that’s maybe going a little too far :-) It would work however as Visual Studio doesn’t publish .cs files and the compiler doesn’t care where the files live. There are lots of options and if you think that would make life easier it’s another option to help group related things together. Are there any downside to this? Possibly – if you’re using automated minification/packaging tools like ASP.NET Bundling or Grunt/Gulp with Uglify, it becomes a little harder to group script and css files for minification as you may end up looking in multiple folders instead of a single folder. But – again that’s a one time configuration step that’s easily handled and much less intrusive then constantly having to search for files in your project. Client Side Folders The particular project shown above in the screen shots above is a traditional server side ASP.NET MVC application with most content rendered into server side Razor pages. There’s a fair amount of client side stuff happening on these pages as well – specifically several of these pages are self contained single page Angular applications that deal with 1 or maybe 2 separate views and the layout I’ve shown above really focuses on the server side aspect where there are Razor views with related script and css resources. For applications that are more client centric and have a lot more script and HTML template based content I tend to use the same layout for the server components, but the client side code can often be broken out differently. In SPA type applications I tend to follow the App folder approach where all the application pieces that make the SPA applications end up below the App folder. Here’s what that looks like for me – here this is an AngularJs project: In this case the App folder holds both the application specific js files, and the partial HTML views that get loaded into this single SPA page application. In this particular Angular SPA application that has controllers linked to particular partial views, I prefer to keep the script files that are associated with the views – Angular Js Controllers in this case – with the actual partials. Again I like the proximity of the view with the main code associated with the view, because 90% of the UI application code that gets written is handled between these two files. This approach works well, but only if controllers are fairly closely aligned with the partials. If you have many smaller sub-controllers or lots of directives where the alignment between views and code is more segmented this approach starts falling apart and you’ll probably be better off with separate folders in js folder. Following Angular conventions you’d have controllers/directives/services etc. folders. Please note that I’m not saying any of these ways are right or wrong  – this is just what has worked for me and why! Skipping Project Navigation altogether with Resharper I’ve talked a bit about project navigation in the project tree, which is a common way to navigate and which we all use at least some of the time, but if you use a tool like Resharper – which has Ctrl-T to jump to anything, you can quickly navigate with a shortcut key and autocomplete search. Here’s what Resharper’s jump to anything looks like: Resharper’s Goto Anything box lets you type and quick search over files, classes and members of the entire solution which is a very fast and powerful way to find what you’re looking for in your project, by passing the solution explorer altogether. As long as you remember to use (which I sometimes don’t) and you know what you’re looking for it’s by far the quickest way to find things in a project. It’s a shame that this sort of a simple search interface isn’t part of the native Visual Studio IDE. Work how you like to work Ultimately it all comes down to workflow and how you like to work, and what makes *you* more productive. Following pre-defined patterns is great for consistency, as long as they don’t get in the way you work. A lot of the default folder structures in Visual Studio for ASP.NET MVC were defined when things were done differently. These days we’re dealing with a lot more diverse project content than when ASP.NET MVC was originally introduced and project organization definitely is something that can get in the way if it doesn’t fit your workflow. So take a look and see what works well and what might benefit from organizing files differently. As so many things with ASP.NET, as things evolve and tend to get more complex I’ve found that I end up fighting some of the conventions. The good news is that you don’t have to follow the conventions and you have the freedom to do just about anything that works for you. Even though what I’ve shown here diverges from conventions, I don’t think anybody would stumble over these relatively minor changes and not immediately figure out where things live, even in larger projects. But nevertheless think long and hard before breaking those conventions – if there isn’t a good reason to break them or the changes don’t provide improved workflow then it’s not worth it. Break the rules, but only if there’s a quantifiable benefit. You may not agree with how I’ve chosen to divert from the standard project structures in this article, but maybe it gives you some ideas of how you can mix things up to make your existing project flow a little nicer and make it easier to navigate for your environment. © Rick Strahl, West Wind Technologies, 2005-2014Posted in ASP.NET  MVC   Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

    Read the article

  • Metro: Query Selectors

    - by Stephen.Walther
    The goal of this blog entry is to explain how to perform queries using selectors when using the WinJS library. In particular, you learn how to use the WinJS.Utilities.query() method and the QueryCollection class to retrieve and modify the elements of an HTML document. Introduction to Selectors When you are building a Web application, you need some way of easily retrieving elements from an HTML document. For example, you might want to retrieve all of the input elements which have a certain class. Or, you might want to retrieve the one and only element with an id of favoriteColor. The standard way of retrieving elements from an HTML document is by using a selector. Anyone who has ever created a Cascading Style Sheet has already used selectors. You use selectors in Cascading Style Sheets to apply formatting rules to elements in a document. For example, the following Cascading Style Sheet rule changes the background color of every INPUT element with a class of .required in a document to the color red: input.red { background-color: red } The “input.red” part is the selector which matches all INPUT elements with a class of red. The W3C standard for selectors (technically, their recommendation) is entitled “Selectors Level 3” and the standard is located here: http://www.w3.org/TR/css3-selectors/ Selectors are not only useful for adding formatting to the elements of a document. Selectors are also useful when you need to apply behavior to the elements of a document. For example, you might want to select a particular BUTTON element with a selector and add a click handler to the element so that something happens whenever you click the button. Selectors are not specific to Cascading Style Sheets. You can use selectors in your JavaScript code to retrieve elements from an HTML document. jQuery is famous for its support for selectors. Using jQuery, you can use a selector to retrieve matching elements from a document and modify the elements. The WinJS library enables you to perform the same types of queries as jQuery using the W3C selector syntax. Performing Queries with the WinJS.Utilities.query() Method When using the WinJS library, you perform a query using a selector by using the WinJS.Utilities.query() method.  The following HTML document contains a BUTTON and a DIV element: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Application1</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet"> <script src="//Microsoft.WinJS.0.6/js/base.js"></script> <script src="//Microsoft.WinJS.0.6/js/ui.js"></script> <!-- Application1 references --> <link href="/css/default.css" rel="stylesheet"> <script src="/js/default.js"></script> </head> <body> <button>Click Me!</button> <div style="display:none"> <h1>Secret Message</h1> </div> </body> </html> The document contains a reference to the following JavaScript file named \js\default.js: (function () { "use strict"; var app = WinJS.Application; app.onactivated = function (eventObject) { if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { WinJS.Utilities.query("button").listen("click", function () { WinJS.Utilities.query("div").clearStyle("display"); }); } }; app.start(); })(); The default.js script uses the WinJS.Utilities.query() method to retrieve all of the BUTTON elements in the page. The listen() method is used to wire an event handler to the BUTTON click event. When you click the BUTTON, the secret message contained in the hidden DIV element is displayed. The clearStyle() method is used to remove the display:none style attribute from the DIV element. Under the covers, the WinJS.Utilities.query() method uses the standard querySelectorAll() method. This means that you can use any selector which is compatible with the querySelectorAll() method when using the WinJS.Utilities.query() method. The querySelectorAll() method is defined in the W3C Selectors API Level 1 standard located here: http://www.w3.org/TR/selectors-api/ Unlike the querySelectorAll() method, the WinJS.Utilities.query() method returns a QueryCollection. We talk about the methods of the QueryCollection class below. Retrieving a Single Element with the WinJS.Utilities.id() Method If you want to retrieve a single element from a document, instead of matching a set of elements, then you can use the WinJS.Utilities.id() method. For example, the following line of code changes the background color of an element to the color red: WinJS.Utilities.id("message").setStyle("background-color", "red"); The statement above matches the one and only element with an Id of message. For example, the statement matches the following DIV element: <div id="message">Hello!</div> Notice that you do not use a hash when matching a single element with the WinJS.Utilities.id() method. You would need to use a hash when using the WinJS.Utilities.query() method to do the same thing like this: WinJS.Utilities.query("#message").setStyle("background-color", "red"); Under the covers, the WinJS.Utilities.id() method calls the standard document.getElementById() method. The WinJS.Utilities.id() method returns the result as a QueryCollection. If no element matches the identifier passed to WinJS.Utilities.id() then you do not get an error. Instead, you get a QueryCollection with no elements (length=0). Using the WinJS.Utilities.children() method The WinJS.Utilities.children() method enables you to retrieve a QueryCollection which contains all of the children of a DOM element. For example, imagine that you have a DIV element which contains children DIV elements like this: <div id="discussContainer"> <div>Message 1</div> <div>Message 2</div> <div>Message 3</div> </div> You can use the following code to add borders around all of the child DIV element and not the container DIV element: var discussContainer = WinJS.Utilities.id("discussContainer").get(0); WinJS.Utilities.children(discussContainer).setStyle("border", "2px dashed red");   It is important to understand that the WinJS.Utilities.children() method only works with a DOM element and not a QueryCollection. Notice that the get() method is used to retrieve the DOM element which represents the discussContainer. Working with the QueryCollection Class Both the WinJS.Utilities.query() method and the WinJS.Utilities.id() method return an instance of the QueryCollection class. The QueryCollection class derives from the base JavaScript Array class and adds several useful methods for working with HTML elements: addClass(name) – Adds a class to every element in the QueryCollection. clearStyle(name) – Removes a style from every element in the QueryCollection. conrols(ctor, options) – Enables you to create controls. get(index) – Retrieves the element from the QueryCollection at the specified index. getAttribute(name) – Retrieves the value of an attribute for the first element in the QueryCollection. hasClass(name) – Returns true if the first element in the QueryCollection has a certain class. include(items) – Includes a collection of items in the QueryCollection. listen(eventType, listener, capture) – Adds an event listener to every element in the QueryCollection. query(query) – Performs an additional query on the QueryCollection and returns a new QueryCollection. removeClass(name) – Removes a class from the every element in the QueryCollection. removeEventListener(eventType, listener, capture) – Removes an event listener from every element in the QueryCollection. setAttribute(name, value) – Adds an attribute to every element in the QueryCollection. setStyle(name, value) – Adds a style attribute to every element in the QueryCollection. template(templateElement, data, renderDonePromiseContract) – Renders a template using the supplied data.  toggleClass(name) – Toggles the specified class for every element in the QueryCollection. Because the QueryCollection class derives from the base Array class, it also contains all of the standard Array methods like forEach() and slice(). Summary In this blog post, I’ve described how you can perform queries using selectors within a Windows Metro Style application written with JavaScript. You learned how to return an instance of the QueryCollection class by using the WinJS.Utilities.query(), WinJS.Utilities.id(), and WinJS.Utilities.children() methods. You also learned about the methods of the QueryCollection class.

    Read the article

  • SQL – Migrate Database from SQL Server to NuoDB – A Quick Tutorial

    - by Pinal Dave
    Data is growing exponentially and every organization with growing data is thinking of next big innovation in the world of Big Data. Big data is a indeed a future for every organization at one point of the time. Just like every other next big thing, big data has its own challenges and issues. The biggest challenge associated with the big data is to find the ideal platform which supports the scalability and growth of the data. If you are a regular reader of this blog, you must be familiar with NuoDB. I have been working with NuoDB for a while and their recent release is the best thus far. NuoDB is an elastically scalable SQL database that can run on local host, datacenter and cloud-based resources. A key feature of the product is that it does not require sharding (read more here). Last week, I was able to install NuoDB in less than 90 seconds and have explored their Explorer and Admin sections. You can read about my experiences in these posts: SQL – Step by Step Guide to Download and Install NuoDB – Getting Started with NuoDB SQL – Quick Start with Admin Sections of NuoDB – Manage NuoDB Database SQL – Quick Start with Explorer Sections of NuoDB – Query NuoDB Database Many SQL Authority readers have been following me in my journey to evaluate NuoDB. One of the frequently asked questions I’ve received from you is if there is any way to migrate data from SQL Server to NuoDB. The fact is that there is indeed a way to do so and NuoDB provides a fantastic tool which can help users to do it. NuoDB Migrator is a command line utility that supports the migration of Microsoft SQL Server, MySQL, Oracle, and PostgreSQL schemas and data to NuoDB. The migration to NuoDB is a three-step process: NuoDB Migrator generates a schema for a target NuoDB database It loads data into the target NuoDB database It dumps data from the source database Let’s see how we can migrate our data from SQL Server to NuoDB using a simple three-step approach. But before we do that we will create a sample database in MSSQL and later we will migrate the same database to NuoDB: Setup Step 1: Build a sample data CREATE DATABASE [Test]; CREATE TABLE [Department]( [DepartmentID] [smallint] NOT NULL, [Name] VARCHAR(100) NOT NULL, [GroupName] VARCHAR(100) NOT NULL, [ModifiedDate] [datetime] NOT NULL, CONSTRAINT [PK_Department_DepartmentID] PRIMARY KEY CLUSTERED ( [DepartmentID] ASC ) ) ON [PRIMARY]; INSERT INTO Department SELECT * FROM AdventureWorks2012.HumanResources.Department; Note that I am using the SQL Server AdventureWorks database to build this sample table but you can build this sample table any way you prefer. Setup Step 2: Install Java 64 bit Before you can begin the migration process to NuoDB, make sure you have 64-bit Java installed on your computer. This is due to the fact that the NuoDB Migrator tool is built in Java. You can download 64-bit Java for Windows, Mac OSX, or Linux from the following link: http://java.com/en/download/manual.jsp. One more thing to remember is that you make sure that the path in your environment settings is set to your JAVA_HOME directory or else the tool will not work. Here is how you can do it: Go to My Computer >> Right Click >> Select Properties >> Click on Advanced System Settings >> Click on Environment Variables >> Click on New and enter the following values. Variable Name: JAVA_HOME Variable Value: C:\Program Files\Java\jre7 Make sure you enter your Java installation directory in the Variable Value field. Setup Step 3: Install JDBC driver for SQL Server. There are two JDBC drivers available for SQL Server.  Select the one you prefer to use by following one of the two links below: Microsoft JDBC Driver jTDS JDBC Driver In this example we will be using jTDS JDBC driver. Once you download the driver, move the driver to your NuoDB installation folder. In my case, I have moved the JAR file of the driver into the C:\Program Files\NuoDB\tools\migrator\jar folder as this is my NuoDB installation directory. Now we are all set to start the three-step migration process from SQL Server to NuoDB: Migration Step 1: NuoDB Schema Generation Here is the command I use to generate a schema of my SQL Server Database in NuoDB. First I go to the folder C:\Program Files\NuoDB\tools\migrator\bin and execute the nuodb-migrator.bat file. Note that my database name is ‘test’. Additionally my username and password is also ‘test’. You can see that my SQL Server database is running on my localhost on port 1433. Additionally, the schema of the table is ‘dbo’. nuodb-migrator schema –source.driver=net.sourceforge.jtds.jdbc.Driver –source.url=jdbc:jtds:sqlserver://localhost:1433/ –source.username=test –source.password=test –source.catalog=test –source.schema=dbo –output.path=/tmp/schema.sql The above script will generate a schema of all my SQL Server tables and will put it in the folder C:\tmp\schema.sql . You can open the schema.sql file and execute this file directly in your NuoDB instance. You can follow the link here to see how you can execute the SQL script in NuoDB. Please note that if you have not yet created the schema in the NuoDB database, you should create it before executing this step. Step 2: Generate the Dump File of the Data Once you have recreated your schema in NuoDB from SQL Server, the next step is very easy. Here we create a CSV format dump file, which will contain all the data from all the tables from the SQL Server database. The command to do so is very similar to the above command. Be aware that this step may take a bit of time based on your database size. nuodb-migrator dump –source.driver=net.sourceforge.jtds.jdbc.Driver –source.url=jdbc:jtds:sqlserver://localhost:1433/ –source.username=test –source.password=test –source.catalog=test –source.schema=dbo –output.type=csv –output.path=/tmp/dump.cat Once the above command is successfully executed you can find your CSV file in the C:\tmp\ folder. However, you do not have to do anything manually. The third and final step will take care of completing the migration process. Migration Step 3: Load the Data into NuoDB After building schema and taking a dump of the data, the very next step is essential and crucial. It will take the CSV file and load it into the NuoDB database. nuodb-migrator load –target.url=jdbc:com.nuodb://localhost:48004/mytest –target.schema=dbo –target.username=test –target.password=test –input.path=/tmp/dump.cat Please note that in the above script we are now targeting the NuoDB database, which we have already created with the name of “MyTest”. If the database does not exist, create it manually before executing the above script. I have kept the username and password as “test”, but please make sure that you create a more secure password for your database for security reasons. Voila!  You’re Done That’s it. You are done. It took 3 setup and 3 migration steps to migrate your SQL Server database to NuoDB.  You can now start exploring the database and build excellent, scale-out applications. In this blog post, I have done my best to come up with simple and easy process, which you can follow to migrate your app from SQL Server to NuoDB. Download NuoDB I strongly encourage you to download NuoDB and go through my 3-step migration tutorial from SQL Server to NuoDB. Additionally here are two very important blog post from NuoDB CTO Seth Proctor. He has written excellent blog posts on the concept of the Administrative Domains. NuoDB has this concept of an Administrative Domain, which is a collection of hosts that can run one or multiple databases.  Each database has its own TEs and SMs, but all are managed within the Admin Console for that particular domain. http://www.nuodb.com/techblog/2013/03/11/getting-started-provisioning-a-domain/ http://www.nuodb.com/techblog/2013/03/14/getting-started-running-a-database/ Reference: Pinal Dave (http://blog.sqlauthority.com) Filed under: Big Data, PostADay, SQL, SQL Authority, SQL Query, SQL Server, SQL Tips and Tricks, T SQL, Technology Tagged: NuoDB

    Read the article

  • Error in code of basic game using multiple sprites and surfaceView [on hold]

    - by Khagendra Nath Mahato
    I am a beginner to android and i was trying to make a basic game with the help of an online video tutorial. I am having problem with the multi-sprites and how to use with surfaceview.The application fails launching. Here is the code of the game.please help me. package com.example.killthemall; import java.util.ArrayList; import java.util.List; import java.util.Random; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Rect; import android.os.Bundle; import android.view.SurfaceHolder; import android.view.SurfaceView; import android.widget.Toast; public class Game extends Activity { KhogenView View1; @Override protected void onPause() { // TODO Auto-generated method stub super.onPause(); while(true){ try { OurThread.join(); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); }} } Thread OurThread; int herorows = 4; int herocolumns = 3; int xpos, ypos; int xspeed; int yspeed; int herowidth; int widthnumber = 0; int heroheight; Rect src; Rect dst; int round; Bitmap bmp1; // private Bitmap bmp1;//change name public List<Sprite> sprites = new ArrayList<Sprite>() { }; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); View1 = new KhogenView(this); setContentView(View1); sprites.add(createSprite(R.drawable.image)); sprites.add(createSprite(R.drawable.bad1)); sprites.add(createSprite(R.drawable.bad2)); sprites.add(createSprite(R.drawable.bad3)); sprites.add(createSprite(R.drawable.bad4)); sprites.add(createSprite(R.drawable.bad5)); sprites.add(createSprite(R.drawable.bad6)); sprites.add(createSprite(R.drawable.good1)); sprites.add(createSprite(R.drawable.good2)); sprites.add(createSprite(R.drawable.good3)); sprites.add(createSprite(R.drawable.good4)); sprites.add(createSprite(R.drawable.good5)); sprites.add(createSprite(R.drawable.good6)); } private Sprite createSprite(int image) { // TODO Auto-generated method stub bmp1 = BitmapFactory.decodeResource(getResources(), image); return new Sprite(this, bmp1); } public class KhogenView extends SurfaceView implements Runnable { SurfaceHolder OurHolder; Canvas canvas = null; Random rnd = new Random(); { xpos = rnd.nextInt(canvas.getWidth() - herowidth)+herowidth; ypos = rnd.nextInt(canvas.getHeight() - heroheight)+heroheight; xspeed = rnd.nextInt(10 - 5) + 5; yspeed = rnd.nextInt(10 - 5) + 5; } public KhogenView(Context context) { super(context); // TODO Auto-generated constructor stub OurHolder = getHolder(); OurThread = new Thread(this); OurThread.start(); } @Override public void run() { // TODO Auto-generated method stub herowidth = bmp1.getWidth() / 3; heroheight = bmp1.getHeight() / 4; boolean isRunning = true; while (isRunning) { if (!OurHolder.getSurface().isValid()) continue; canvas = OurHolder.lockCanvas(); canvas.drawRGB(02, 02, 50); for (Sprite sprite : sprites) { if (widthnumber == 3) widthnumber = 0; update(); getdirection(); src = new Rect(widthnumber * herowidth, round * heroheight, (widthnumber + 1) * herowidth, (round + 1)* heroheight); dst = new Rect(xpos, ypos, xpos + herowidth, ypos+ heroheight); canvas.drawBitmap(bmp1, src, dst, null); } widthnumber++; OurHolder.unlockCanvasAndPost(canvas); } } public void update() { try { Thread.sleep(1000); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } if (xpos + xspeed <= 0) xspeed = 40; if (xpos >= canvas.getWidth() - herowidth) xspeed = -50; if (ypos + yspeed <= 0) yspeed = 45; if (ypos >= canvas.getHeight() - heroheight) yspeed = -55; xpos = xpos + xspeed; ypos = ypos + yspeed; } public void getdirection() { double angleinteger = (Math.atan2(yspeed, xspeed)) / (Math.PI / 2); round = (int) (Math.round(angleinteger) + 2) % herorows; // Toast.makeText(this, String.valueOf(round), // Toast.LENGTH_LONG).show(); } } public class Sprite { Game game; private Bitmap bmp; public Sprite(Game game, Bitmap bmp) { // TODO Auto-generated constructor stub this.game = game; this.bmp = bmp; } } } Here is the LogCat if it helps.... 08-22 23:18:06.980: D/AndroidRuntime(28151): Shutting down VM 08-22 23:18:06.980: W/dalvikvm(28151): threadid=1: thread exiting with uncaught exception (group=0xb3f6f4f0) 08-22 23:18:06.980: D/AndroidRuntime(28151): procName from cmdline: com.example.killthemall 08-22 23:18:06.980: E/AndroidRuntime(28151): in writeCrashedAppName, pkgName :com.example.killthemall 08-22 23:18:06.980: D/AndroidRuntime(28151): file written successfully with content: com.example.killthemall StringBuffer : ;com.example.killthemall 08-22 23:18:06.990: I/Process(28151): Sending signal. PID: 28151 SIG: 9 08-22 23:18:06.990: E/AndroidRuntime(28151): FATAL EXCEPTION: main 08-22 23:18:06.990: E/AndroidRuntime(28151): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.killthemall/com.example.killthemall.Game}: java.lang.NullPointerException 08-22 23:18:06.990: E/AndroidRuntime(28151): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1647) 08-22 23:18:06.990: E/AndroidRuntime(28151): at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:1663) 08-22 23:18:06.990: E/AndroidRuntime(28151): at android.app.ActivityThread.access$1500(ActivityThread.java:117) 08-22 23:18:06.990: E/AndroidRuntime(28151): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:931) 08-22 23:18:06.990: E/AndroidRuntime(28151): at android.os.Handler.dispatchMessage(Handler.java:99) 08-22 23:18:06.990: E/AndroidRuntime(28151): at android.os.Looper.loop(Looper.java:130) 08-22 23:18:06.990: E/AndroidRuntime(28151): at android.app.ActivityThread.main(ActivityThread.java:3683) 08-22 23:18:06.990: E/AndroidRuntime(28151): at java.lang.reflect.Method.invokeNative(Native Method) 08-22 23:18:06.990: E/AndroidRuntime(28151): at java.lang.reflect.Method.invoke(Method.java:507) 08-22 23:18:06.990: E/AndroidRuntime(28151): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:880) 08-22 23:18:06.990: E/AndroidRuntime(28151): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:638) 08-22 23:18:06.990: E/AndroidRuntime(28151): at dalvik.system.NativeStart.main(Native Method) 08-22 23:18:06.990: E/AndroidRuntime(28151): Caused by: java.lang.NullPointerException 08-22 23:18:06.990: E/AndroidRuntime(28151): at com.example.killthemall.Game$KhogenView.<init>(Game.java:96) 08-22 23:18:06.990: E/AndroidRuntime(28151): at com.example.killthemall.Game.onCreate(Game.java:58) 08-22 23:18:06.990: E/AndroidRuntime(28151): at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1049) 08-22 23:18:06.990: E/AndroidRuntime(28151): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1611) 08-22 23:18:06.990: E/AndroidRuntime(28151): ... 11 more 08-22 23:18:18.050: D/AndroidRuntime(28191): Shutting down VM 08-22 23:18:18.050: W/dalvikvm(28191): threadid=1: thread exiting with uncaught exception (group=0xb3f6f4f0) 08-22 23:18:18.050: I/Process(28191): Sending signal. PID: 28191 SIG: 9 08-22 23:18:18.050: D/AndroidRuntime(28191): procName from cmdline: com.example.killthemall 08-22 23:18:18.050: E/AndroidRuntime(28191): in writeCrashedAppName, pkgName :com.example.killthemall 08-22 23:18:18.050: D/AndroidRuntime(28191): file written successfully with content: com.example.killthemall StringBuffer : ;com.example.killthemall 08-22 23:18:18.050: E/AndroidRuntime(28191): FATAL EXCEPTION: main 08-22 23:18:18.050: E/AndroidRuntime(28191): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.killthemall/com.example.killthemall.Game}: java.lang.NullPointerException 08-22 23:18:18.050: E/AndroidRuntime(28191): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1647) 08-22 23:18:18.050: E/AndroidRuntime(28191): at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:1663) 08-22 23:18:18.050: E/AndroidRuntime(28191): at android.app.ActivityThread.access$1500(ActivityThread.java:117) 08-22 23:18:18.050: E/AndroidRuntime(28191): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:931) 08-22 23:18:18.050: E/AndroidRuntime(28191): at android.os.Handler.dispatchMessage(Handler.java:99) 08-22 23:18:18.050: E/AndroidRuntime(28191): at android.os.Looper.loop(Looper.java:130) 08-22 23:18:18.050: E/AndroidRuntime(28191): at android.app.ActivityThread.main(ActivityThread.java:3683) 08-22 23:18:18.050: E/AndroidRuntime(28191): at java.lang.reflect.Method.invokeNative(Native Method) 08-22 23:18:18.050: E/AndroidRuntime(28191): at java.lang.reflect.Method.invoke(Method.java:507) 08-22 23:18:18.050: E/AndroidRuntime(28191): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:880) 08-22 23:18:18.050: E/AndroidRuntime(28191): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:638) 08-22 23:18:18.050: E/AndroidRuntime(28191): at dalvik.system.NativeStart.main(Native Method) 08-22 23:18:18.050: E/AndroidRuntime(28191): Caused by: java.lang.NullPointerException 08-22 23:18:18.050: E/AndroidRuntime(28191): at com.example.killthemall.Game$KhogenView.<init>(Game.java:96) 08-22 23:18:18.050: E/AndroidRuntime(28191): at com.example.killthemall.Game.onCreate(Game.java:58) 08-22 23:18:18.050: E/AndroidRuntime(28191): at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1049) 08-22 23:18:18.050: E/AndroidRuntime(28191): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1611) 08-22 23:18:18.050: E/AndroidRuntime(28191): ... 11 more

    Read the article

  • How to tell if SPARC T4 crypto is being used?

    - by danx
    A question that often comes up when running applications on SPARC T4 systems is "How can I tell if hardware crypto accleration is being used?" To review, the SPARC T4 processor includes a crypto unit that supports several crypto instructions. For hardware crypto these include 11 AES instructions, 4 xmul* instructions (for AES GCM carryless multiply), mont for Montgomery multiply (optimizes RSA and DSA), and 5 des_* instructions (for DES3). For hardware hash algorithm optimization, the T4 has the md5, sha1, sha256, and sha512 instructions (the last two are used for SHA-224 an SHA-384). First off, it's easy to tell if the processor T4 crypto instructions—use the isainfo -v command and look for "sparcv9" and "aes" (and other hash and crypto algorithms) in the output: $ isainfo -v 64-bit sparcv9 applications crc32c cbcond pause mont mpmul sha512 sha256 sha1 md5 camellia kasumi des aes ima hpc vis3 fmaf asi_blk_init vis2 vis popc These instructions are not-privileged, so are available for direct use in user-level applications and libraries (such as OpenSSL). Here is the "openssl speed -evp" command shown with the built-in t4 engine and with the pkcs11 engine. Both run the T4 AES instructions, but the t4 engine is faster than the pkcs11 engine because it has less overhead (especially for smaller packet sizes): t-4 $ /usr/bin/openssl version OpenSSL 1.0.0j 10 May 2012 t-4 $ /usr/bin/openssl engine (t4) SPARC T4 engine support (dynamic) Dynamic engine loading support (pkcs11) PKCS #11 engine support t-4 $ /usr/bin/openssl speed -evp aes-128-cbc # t4 engine used by default . . . The 'numbers' are in 1000s of bytes per second processed. type 16 bytes 64 bytes 256 bytes 1024 bytes 8192 bytes aes-128-cbc 487777.10k 816822.21k 986012.59k 1017029.97k 1053543.08k t-4 $ /usr/bin/openssl speed -engine pkcs11 -evp aes-128-cbc engine "pkcs11" set. . . . The 'numbers' are in 1000s of bytes per second processed. type 16 bytes 64 bytes 256 bytes 1024 bytes 8192 bytes aes-128-cbc 31703.58k 116636.39k 350672.81k 696170.50k 993599.49k Note: The "-evp" flag indicates use the OpenSSL "EnVeloPe" API, which gives more accurate results. That's because it tells OpenSSL to use the same API that external programs use when calling OpenSSL libcrypto functions, evp(3openssl). DTrace Shows if T4 Crypto Functions Are Used OK, good enough, the isainfo(1) command shows the instructions are present, but how does one know if they are being used? Chi-Chang Lin, who works on Oracle Solaris performance, wrote a Dtrace script to show if T4 instructions are being executed. To show the T4 instructions are being used, run the following Dtrace script. Look for functions named "t4" and "yf" in the output. The OpenSSL T4 engine uses functions named "t4" and the PKCS#11 engine uses functions named "yf". To demonstrate, I'll first run "openssl speed" with the built-in t4 engine then with the pkcs11 engine. The performance numbers are not valid due to dtrace probes slowing things down. t-4 # dtrace -Z -n ' pid$target::*yf*:entry,pid$target::*t4_*:entry{ @[probemod, probefunc] = count();}' \ -c "/usr/bin/openssl speed -evp aes-128-cbc" dtrace: description 'pid$target::*yf*:entry' matched 101 probes . . . dtrace: pid 2029 has exited libcrypto.so.1.0.0 ENGINE_load_t4 1 libcrypto.so.1.0.0 t4_DH 1 libcrypto.so.1.0.0 t4_DSA 1 libcrypto.so.1.0.0 t4_RSA 1 libcrypto.so.1.0.0 t4_destroy 1 libcrypto.so.1.0.0 t4_free_aes_ctr_NIDs 1 libcrypto.so.1.0.0 t4_init 1 libcrypto.so.1.0.0 t4_add_NID 3 libcrypto.so.1.0.0 t4_aes_expand128 5 libcrypto.so.1.0.0 t4_cipher_init_aes 5 libcrypto.so.1.0.0 t4_get_all_ciphers 6 libcrypto.so.1.0.0 t4_get_all_digests 59 libcrypto.so.1.0.0 t4_digest_final_sha1 65 libcrypto.so.1.0.0 t4_digest_init_sha1 65 libcrypto.so.1.0.0 t4_sha1_multiblock 126 libcrypto.so.1.0.0 t4_digest_update_sha1 261 libcrypto.so.1.0.0 t4_aes128_cbc_encrypt 1432979 libcrypto.so.1.0.0 t4_aes128_load_keys_for_encrypt 1432979 libcrypto.so.1.0.0 t4_cipher_do_aes_128_cbc 1432979 t-4 # dtrace -Z -n 'pid$target::*yf*:entry{ @[probemod, probefunc] = count();}   pid$target::*yf*:entry,pid$target::*t4_*:entry{ @[probemod, probefunc] = count();}' \ -c "/usr/bin/openssl speed -engine pkcs11 -evp aes-128-cbc" dtrace: description 'pid$target::*yf*:entry' matched 101 probes engine "pkcs11" set. . . . dtrace: pid 2033 has exited libcrypto.so.1.0.0 ENGINE_load_t4 1 libcrypto.so.1.0.0 t4_DH 1 libcrypto.so.1.0.0 t4_DSA 1 libcrypto.so.1.0.0 t4_RSA 1 libcrypto.so.1.0.0 t4_destroy 1 libcrypto.so.1.0.0 t4_free_aes_ctr_NIDs 1 libcrypto.so.1.0.0 t4_get_all_ciphers 1 libcrypto.so.1.0.0 t4_get_all_digests 1 libsoftcrypto.so.1 rijndael_key_setup_enc_yf 1 libsoftcrypto.so.1 yf_aes_expand128 1 libcrypto.so.1.0.0 t4_add_NID 3 libsoftcrypto.so.1 yf_aes128_cbc_encrypt 1542330 libsoftcrypto.so.1 yf_aes128_load_keys_for_encrypt 1542330 So, as shown above the OpenSSL built-in t4 engine executes t4_* functions (which are hand-coded assembly executing the T4 AES instructions) and the OpenSSL pkcs11 engine executes *yf* functions. Programmatic Use of OpenSSL T4 engine The OpenSSL t4 engine is used automatically with the /usr/bin/openssl command line. Chi-Chang Lin also points out that if you're calling the OpenSSL API (libcrypto.so) from a program, you must call ENGINE_load_built_engines(), otherwise the built-in t4 engine will not be loaded. You do not call ENGINE_set_default(). That's because "openssl speed -evp" test calls ENGINE_load_built_engines() even though the "-engine" option wasn't specified. OpenSSL T4 engine Availability The OpenSSL t4 engine is available with Solaris 11 and 11.1. For Solaris 10 08/11 (U10), you need to use the OpenSSL pkcs311 engine. The OpenSSL t4 engine is distributed only with the version of OpenSSL distributed with Solaris (and not third-party or self-compiled versions of OpenSSL). The OpenSSL engine implements the AES cipher for Solaris 11, released 11/2011. For Solaris 11.1, released 11/2012, the OpenSSL engine adds optimization for the MD5, SHA-1, and SHA-2 hash algorithms, and DES-3. Although the T4 processor has Camillia and Kasumi block cipher instructions, these are not implemented in the OpenSSL T4 engine. The following charts may help view availability of optimizations. The first chart shows what's available with Solaris CLIs and APIs, the second chart shows what's available in Solaris OpenSSL. Native Solaris Optimization for SPARC T4 This table is shows Solaris native CLI and API support. As such, they are all available with the OpenSSL pkcs11 engine. CLIs: "openssl -engine pkcs11", encrypt(1), decrypt(1), mac(1), digest(1), MD5sum(1), SHA1sum(1), SHA224sum(1), SHA256sum(1), SHA384sum(1), SHA512sum(1) APIs: PKCS#11 library libpkcs11(3LIB) (incluDES Openssl pkcs11 engine), libMD(3LIB), and Solaris kernel modules AlgorithmSolaris 1008/11 (U10)Solaris 11Solaris 11.1 AES-ECB, AES-CBC, AES-CTR, AES-CBC AES-CFB128 XXX DES3-ECB, DES3-CBC, DES2-ECB, DES2-CBC, DES-ECB, DES-CBC XXX bignum Montgomery multiply (RSA, DSA) XXX MD5, SHA-1, SHA-256, SHA-384, SHA-512 XXX SHA-224 X ARCFOUR (RC4) X Solaris OpenSSL T4 Engine Optimization This table is for the Solaris OpenSSL built-in t4 engine. Algorithms listed above are also available through the OpenSSL pkcs11 engine. CLI: openssl(1openssl) APIs: openssl(5), engine(3openssl), evp(3openssl), libcrypto crypto(3openssl) AlgorithmSolaris 11Solaris 11SRU2Solaris 11.1 AES-ECB, AES-CBC, AES-CTR, AES-CBC AES-CFB128 XXX DES3-ECB, DES3-CBC, DES-ECB, DES-CBC X bignum Montgomery multiply (RSA, DSA) X MD5, SHA-1, SHA-256, SHA-384, SHA-512 XX SHA-224 X Source Code Availability Solaris Most of the T4 assembly code that called the new T4 crypto instructions was written by Ferenc Rákóczi of the Solaris Security group, with assistance from others. You can download the Solaris source for this and other parts of Solaris as a few zip files at the Oracle Download website. The relevant source files are generally under directories usr/src/common/crypto/{aes,arcfour,des,md5,modes,sha1,sha2}}/sun4v/. and usr/src/common/bignum/sun4v/. Solaris 11 binary is available from the Oracle Solaris 11 download website. OpenSSL t4 engine The source for the OpenSSL t4 engine, which is based on the Solaris source above, is viewable through the OpenGrok source code browser in directory src/components/openssl/openssl-1.0.0/engines/t4 . You can download the source from the same website or through Mercurial source code management, hg(1). Conclusion Oracle Solaris with SPARC T4 provides a rich set of accelerated cryptographic and hash algorithms. Using the latest update, Solaris 11.1, provides the best set of optimized algorithms, but alternatives are often available, sometimes slightly slower, for releases back to Solaris 10 08/11 (U10). Reference See also these earlier blogs. SPARC T4 OpenSSL Engine by myself, Dan Anderson (2011), discusses the Openssl T4 engine and reviews the SPARC T4 processor for the Solaris 11 release. Exciting Crypto Advances with the T4 processor and Oracle Solaris 11 by Valerie Fenwick (2011) discusses crypto algorithms that were optimized for the T4 processor with the Solaris 11 FCS (11/11) and Solaris 10 08/11 (U10) release. T4 Crypto Cheat Sheet by Stefan Hinker (2012) discusses how to make T4 crypto optimization available to various consumers (such as SSH, Java, OpenSSL, Apache, etc.) High Performance Security For Oracle Database and Fusion Middleware Applications using SPARC T4 (PDF, 2012) discusses SPARC T4 and its usage to optimize application security. Configuring Oracle iPlanet WebServer / Oracle Traffic Director to use crypto accelerators on T4-1 servers by Meena Vyas (2012)

    Read the article

  • JSON, Ajax login and signup form problem, critique

    - by user552828
    Here is my problem; indexdeneme2.php has two forms Sign up and Login form, and there is validation.js and login.js which are handling the AJAX and JSON response, there are validate.php and login.php which are my scripts for validating and login. When you sign up, it sends the data to validate.php perfectly and validate.php response with JSON perfectly, validate.js must show the error in #error div. validation.js works perfectly if it is working alone. I use same kind of script for login form. Login.php also works perfectly it responses with JSON and login.js shows the errors are appear in #errorlogin div. But this works when login.js works alone. When I try to work login.js and validate.js together, it is not working. validate.php and login.php works perfectly but login.js and validation.js are not working together. They can't handle the responses coming from php scripts. It is not showing the errors in #errorlogin and #error div. They intercept each other I guess. By the way if you can critique my login.php and validate.php I will be really appreciated. Thank you all. this is indexdeneme2.php <?php include('functions.php')?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="css/cssdeneme1.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="validation.js"></script> <script type="text/javascript" src="login.js"></script> <script type="text/javascript"> var RecaptchaOptions = { theme : 'custom', custom_theme_widget: 'recaptcha_widget' }; </script> </head> <body onload="document.signup.reset()"> <div id="topbar"> <div class="wrapper"> </div> </div> <div id="middlebar"> <div class="wrapper"> <div id="middleleft"> <div id="mainformsecondcover"> <div id="mainform"> <div id="formhead"> <div id="signup">Sign Up</div> </div> <form method="post" action="validate.php" id="myform" name="signup"> <div id="form"> <table border="0" cellpadding="0" cellspacing="1"> <tbody> <tr> <td class="formlabel"> <label for="name">First Name:</label> </td> <td class="forminput"> <input type="text" name="name" id="name" /> </td> </tr> <tr> <td class="formlabel"> <label for="lastname">Last Name:</label> </td> <td class="forminput"> <input type="text" name="surname" id="lastname" /> </td> </tr> <tr> <td class="formlabel"> <label for="email">Email:</label> </td> <td class="forminput"> <input type="text" name="email" id="email" /> </td> </tr> <tr> <td class="formlabel"> <label for="remail">Re-Enter Email:</label> </td> <td class="forminput"> <input type="text" name="remail" id="remail" /> </td> </tr> <tr> <td class="formlabel"> <label for="password">Password:</label> </td> <td class="forminput"> <input type="password" name="password" id="password" maxlength="16" /> </td> </tr> <tr> <td class="formlabel"> <label for="gender">I am:</label> </td> <td class="forminput"> <select name="gender" id="gender"> <option value="0" selected="selected">-Select Sex-</option> <option value="1">Male</option> <option value="2">Female</option> </select> </td> </tr> <tr> <td class="formlabel"> <label>My Birthday:</label> </td> <td class="forminput"> <select size="1" name="day"> <option value="0" selected="selected">Day</option> <?php formDay(); ?> </select>&nbsp; <select size="1" name="month"> <option value="0" selected="selected">Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select>&nbsp; <select size="1" name="year"> <option value="0" selected="selected">Year</option> <?php formYear(); ?> </select> </td> </tr> <tr> <td class="formlabel"> <label for="recaptcha_response_field">Security Check:</label> </td> </tr> </tbody> </table> <?php require_once('captchalib.php'); ?> </div> <div id="formbottom"> <div id="error"> </div> <div id="formbottomright"> <input type="submit" id="formbutton" value="Sign Up" /> <img id="loading" src="css/images/ajax-loader.gif" height="35" width="35" alt="Processing.." style="float:right; display:block" /> </div> </div> </form> </div> </div> </div> <div id="middleright"> <div id="loginform"> <form name="login" action="login.php" method="post" id="login"> <label for="username">Email:</label> <input type="text" name="emaillogin" /> <label for="password">Password:</label> <input type="password" name="passwordlogin" maxlength="16" /> <input type="submit" value="Login" /> <img id="loading2" src="css/images/ajax-loader.gif" height="35" width="35" alt="Processing.." style="float:right; display:block" /> </form> </div> <div id="errorlogin"></div> </div> </div> </div> <div id="bottombar"> <div class="wrapper"></div> </div> </body> </html> validation.js $(document).ready(function(){ $('#myform').submit(function(e) { register(); e.preventDefault(); }); }); function register() { hideshow('loading',1); error(0); $.ajax({ type: "POST", url: "validate.php", data: $('#myform').serialize(), dataType: "json", success: function(msg){ if(parseInt(msg.status)==1) { window.location=msg.txt; } else if(parseInt(msg.status)==0) { error(1,msg.txt); Recaptcha.reload(); } hideshow('loading',0); } }); } function hideshow(el,act) { if(act) $('#'+el).css('visibility','visible'); else $('#'+el).css('visibility','hidden'); } function error(act,txt) { hideshow('error',act); if(txt) $('#error').html(txt); } login.js $(document).ready(function(){ $('#login').submit(function(e) { login(); e.preventDefault(); }); }); function login() { error(2); $.ajax({ type: "POST", url: "login.php", data: $('#login').serialize(), dataType: "json", success: function(msg){ if(parseInt(msg.status)==3) { window.location=msg.txt; } else if(parseInt(msg.status)==2) { error(3,msg.txt); } } }); } function error(act,txt) { hideshow('error',act); if(txt) $('#errorlogin').html(txt); } login.php <?php session_start(); require("connect.php"); $email = $_POST['emaillogin']; $password = $_POST['passwordlogin']; $email = mysql_real_escape_string($email); $password = mysql_real_escape_string($password); if(empty($email)) { die('{status:2,txt:"Enter your email address."}'); } if(!filter_var($email, FILTER_VALIDATE_EMAIL)) { die('{status:2,txt:"Invalid email or password"}'); } if(empty($password)) { die('{status:2,txt:"Enter your password."}'); } if(strlen($password)<6 || strlen($password)>16) { die('{status:2,txt:"Invalid email or password"}'); } $query = "SELECT password, salt FROM users WHERE Email = '$email';"; $result = mysql_query($query); if(mysql_num_rows($result) < 1) //no such user exists { die('{status:2,txt:"Invalid email or password"}'); } $userData = mysql_fetch_array($result, MYSQL_ASSOC); $hash = hash('sha256', $userData['salt'] . hash('sha256', $password) ); if($hash != $userData['password']) //incorrect password { die('{status:2,txt:"Invalid email or password"}'); } //////////////////////////////////////////////////////////////////////////////////// if('{status:3}') { session_regenerate_id (); //this is a security measure $getMemDetails = "SELECT * FROM users WHERE Email = '$email'"; $link = mysql_query($getMemDetails); $member = mysql_fetch_row($link); $_SESSION['valid'] = 1; $_SESSION['userid'] = $member[0]; $_SESSION['name'] = $member[1]; session_write_close(); mysql_close($con); echo '{status:3,txt:"success.php"}'; } validate.php <?php $name = $_POST['name']; $surname = $_POST['surname']; $email = $_POST['email']; $remail = $_POST['remail']; $gender = $_POST['gender']; $bdate = $_POST['year'].'-'.$_POST['month'].'-'.$_POST['day']; $bday = $_POST['day']; $bmon = $_POST['month']; $byear = $_POST['year']; $cdate = date("Y-n-j"); $password = $_POST['password']; $hash = hash('sha256', $password); $regdate = date("Y-m-d"); function createSalt() { $string = md5(uniqid(rand(), true)); return substr($string, 0, 3); } $salt = createSalt(); $hash = hash('sha256', $salt . $hash); if(empty($name) || empty($surname) || empty($email) || empty($remail) || empty($password) ) { die('{status:0,txt:"All the fields are required"}'); } if(!preg_match('/^[A-Za-z\s ]+$/', $name)) { die('{status:0,txt:"Please check your name"}'); } if(!preg_match('/^[A-Za-z\s ]+$/', $surname)) { die('{status:0,txt:"Please check your last name"}'); } if($bdate > $cdate) { die('{status:0,txt:"Please check your birthday"}'); } if(!(int)$gender) { die('{status:0,txt:"You have to select your sex"}'); } if(!(int)$bday || !(int)$bmon || !(int)$byear) { die('{status:0,txt:"You have to fill in your birthday"}'); } if(!$email == $remail) { die('{status:0,txt:"Emails doesn&sbquo;t match"}'); } if(!filter_var($email, FILTER_VALIDATE_EMAIL)) { die('{status:0,txt:"Enter a valid email"}'); } if(strlen($password)<6 || strlen($password)>16) { die('{status:0,txt:"Password must be between 6-16 characters"}'); } if (!$_POST["recaptcha_challenge_field"]===$_POST["recaptcha_response_field"]) { die('{status:0,txt:"You entered incorrect security code"}'); } if('{status:1}') { require("connect.php"); function getRealIpAddr() { if (!empty($_SERVER['HTTP_CLIENT_IP'])) { $ip=$_SERVER['HTTP_CLIENT_IP']; } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) { $ip=$_SERVER['HTTP_X_FORWARDED_FOR']; } else { $ip=$_SERVER['REMOTE_ADDR']; } return $ip; } $rip = getRealIpAddr(); $ipn = inet_pton($rip); $checkuser = mysql_query("SELECT Email FROM users WHERE Email = '$email'"); $username_exist = mysql_num_rows($checkuser); if ( $username_exist !== 0 ) { mysql_close($con); die('{status:0,txt:"This email Address is already registered!"}'); } else { $query = "INSERT INTO users (name, surname, date, Email, Gender, password, salt, RegistrationDate, IP) VALUES ('$name', '$surname', '$bdate', '$email', '$gender', '$hash', '$salt', '$cdate', '$ipn')"; $link = mysql_query($query); if(!$link) { die('Becerilemedi: ' . mysql_error()); } else { mysql_close($con); echo '{status:1,txt:"afterreg.php"}'; } } } ?> css of indexdeneme2.php * { padding:0; margin:0; } #topbar { width:100%; height:50px; } .wrapper { margin:0 auto; width:1000px; height:100%; } #middlebar { width:100%; height:650px; } #middleleft { width:55%; float:left; height:650px; } #middleright { width:45%; float:right; height:650px; } #mainformsecondcover { width:404px; padding:0px; margin:0px; border:4px solid #59B; border-radius: 14px; -moz-border-radius: 14px; -webkit-border-radius: 14px; } #mainform { width:400px; border:2px solid #CCC; border-radius: 11px; -moz-border-radius: 11px; -webkit-border-radius: 11px; } #formhead { margin:7px; } #signup { margin-top:13px; margin-left:13px; margin-bottom:3px; color:#333; font-size:18px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight:bold } #form { margin:7px; } #form table { margin:0px; width:380px; } #form table tr{ height:28px; } #form table td{ height:18px; } .formlabel { cursor:pointer; display:table-cell; text-align:right; font-size:12px; color:#000; font-weight:normal; vertical-align:middle; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; letter-spacing:1px; width:120px; height:37px; padding-right:5px; } .formlabel label{ cursor:pointer } .forminput input { width:240px; font-size:13px; padding:4px; } #recaptcha_image { width:300px; height:57px; border:2px solid #CCC; } #recaptcha_widget { margin-left:35px; } #securityinfo { font-size: 11px; line-height: 16px; } #formbottom { width:360px; min-height:45px; } #error { float:left; width:200px; border:1px solid #F00; margin-left:20px; margin-top:7px; text-align:center; color:#F00; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:11px; line-height:16px; padding:2px; visibility:hidden; } #errorlogin { float:left; width:200px; border:1px solid #F00; margin-left:20px; margin-top:7px; text-align:center; color:#F00; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:11px; line-height:16px; padding:2px; visibility:hidden; } #formbottomright { float:right; height:45px; width:115px; margin-left:5px; } #loading { visibility:hidden; } #loading2 { visibility:hidden; } #formbutton { display:block; font-size:14px; color:#FFF; background: #0b85c6; /* Old browsers */ background: -moz-linear-gradient(top, #0b85c6 0%, #59b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0b85c6), color-stop(100%,#59b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #0b85c6 0%,#59b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #0b85c6 0%,#59b 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #0b85c6 0%,#59b 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0B85C6', endColorstr='#59B',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #0b85c6 0%,#59b 100%); /* W3C */ font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; height:26px; width:60px; margin:7px; text-align:center; padding-bottom:4px; padding-left:4px; padding-right:4px; float:left; margin-right:5px; } #bottombar { width:100%; height:50px; } {}

    Read the article

  • Using Apache FOP from .NET level

    - by Lukasz Kurylo
    In one of my previous posts I was talking about FO.NET which I was using to generate a pdf documents from XSL-FO. FO.NET is one of the .NET ports of Apache FOP. Unfortunatelly it is no longer maintained. I known it when I decidec to use it, because there is a lack of available (free) choices for .NET to render a pdf form XSL-FO. I hoped in this implementation I will find all I need to create a pdf file with my really simple requirements. FO.NET is a port from some old version of Apache FOP and I found really quickly that there is a lack of some features that I needed, like dotted borders, double borders or support for margins. So I started to looking for some alternatives. I didn’t try the NFOP, another port of Apache FOP, because I found something I think much more better, the IKVM.NET project.   IKVM.NET it is not a pdf renderer. So what it is? From the project site:   IKVM.NET is an implementation of Java for Mono and the Microsoft .NET Framework. It includes the following components: a Java Virtual Machine implemented in .NET a .NET implementation of the Java class libraries tools that enable Java and .NET interoperability   In the simplest form IKVM.NET allows to use a Java code library in the C# code and vice versa.   I tried to use an Apache FOP, the best I think open source pdf –> XSL-FO renderer written in Java from my project written in C# using an IKVM.NET and it work like a charm. In the rest of the post I want to show, how to prepare a .NET *.dll class library from Apache FOP *.jar’s with IKVM.NET and generate a simple Hello world pdf document.   To start playing with IKVM.NET and Apache FOP we need to download their packages: IKVM.NET Apache FOP and then unpack them.   From the FOP directory copy all the *.jar’s files from lib and build catalogs to some location, e.g. d:\fop. Second step is to build the *.dll library from these files. On the console execute the following comand:   ikvmc –target:library –out:d:\fop\fop.dll –recurse:d:\fop   The ikvmc is located in the bin subdirectory where you unpacked the IKVM.NET. You must execute this command from this catalog, add this path to the global variable PATH or specify the full path to the bin subdirectory.   In no error occurred during this process, the fop.dll library should be created. Right now we can create a simple project to test if we can create a pdf file.   So let’s create a simple console project application and add reference to the fop.dll and the IKVM dll’s: IKVM.OpenJDK.Core and IKVM.OpenJDK.XML.API.   Full code to generate a pdf file from XSL-FO template:   static void Main(string[] args)         {             //initialize the Apache FOP             FopFactory fopFactory = FopFactory.newInstance();               //in this stream we will get the generated pdf file             OutputStream o = new DotNetOutputMemoryStream();             try             {                 Fop fop = fopFactory.newFop("application/pdf", o);                 TransformerFactory factory = TransformerFactory.newInstance();                 Transformer transformer = factory.newTransformer();                   //read the template from disc                 Source src = new StreamSource(new File("HelloWorld.fo"));                 Result res = new SAXResult(fop.getDefaultHandler());                 transformer.transform(src, res);             }             finally             {                 o.close();             }             using (System.IO.FileStream fs = System.IO.File.Create("HelloWorld.pdf"))             {                 //write from the .NET MemoryStream stream to disc the generated pdf file                 var data = ((DotNetOutputMemoryStream)o).Stream.GetBuffer();                 fs.Write(data, 0, data.Length);             }             Process.Start("HelloWorld.pdf");             System.Console.ReadLine();         }   Apache FOP be default using a Java’s Xalan to work with XML files. I didn’t find a way to replace this piece of code with equivalent from .NET standard library. If any error or warning will occure during generating the pdf file, on the console will ge shown, that’s why I inserted the last line in the sample above. The DotNetOutputMemoryStream this is my wrapper for the Java OutputStream. I have created it to have the possibility to exchange data between the .NET <-> Java objects. It’s implementation:   class DotNetOutputMemoryStream : OutputStream     {         private System.IO.MemoryStream ms = new System.IO.MemoryStream();         public System.IO.MemoryStream Stream         {             get             {                 return ms;             }         }         public override void write(int i)         {             ms.WriteByte((byte)i);         }         public override void write(byte[] b, int off, int len)         {             ms.Write(b, off, len);         }         public override void write(byte[] b)         {             ms.Write(b, 0, b.Length);         }         public override void close()         {             ms.Close();         }         public override void flush()         {             ms.Flush();         }     } The last thing we need, this is the HelloWorld.fo template.   <?xml version="1.0" encoding="utf-8"?> <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">   <fo:layout-master-set>     <fo:simple-page-master master-name="simple"                   page-height="29.7cm"                   page-width="21cm"                   margin-top="1.8cm"                   margin-bottom="0.8cm"                   margin-left="1.6cm"                   margin-right="1.2cm">       <fo:region-body margin-top="3cm"/>       <fo:region-before extent="3cm"/>       <fo:region-after extent="1.5cm"/>     </fo:simple-page-master>   </fo:layout-master-set>   <fo:page-sequence master-reference="simple">     <fo:flow flow-name="xsl-region-body">       <fo:block font-size="18pt" color="black" text-align="center">         Hello, World!       </fo:block>     </fo:flow>   </fo:page-sequence> </fo:root>   I’m not going to explain how how this template is created, because this will be covered in the near future posts.   Generated pdf file should look that:

    Read the article

< Previous Page | 153 154 155 156 157 158 159 160 161 162 163 164  | Next Page >