Search Results

Search found 7053 results on 283 pages for 'body'.

Page 132/283 | < Previous Page | 128 129 130 131 132 133 134 135 136 137 138 139  | Next Page >

  • How to embed a progressbar into a HTML form?

    - by Noah Brainey
    I have this code below and want it to show the progress of a form submission of a file upload. I want it to work on my website visit it through this IP (24.148.156.217). So if you saw the website I want the progress bar to be displayed when the user fills in the information and then hits the submit button. Then the progress bar displays with the time until it's finished. <style> <!-- .hide { position:absolute; visibility:hidden; } .show { position:absolute; visibility:visible; } --> </style> <SCRIPT LANGUAGE="JavaScript"> //Progress Bar script- by Todd King ([email protected]) //Modified by JavaScript Kit for NS6, ability to specify duration //Visit JavaScript Kit (http://javascriptkit.com) for script var duration=3 // Specify duration of progress bar in seconds var _progressWidth = 50; // Display width of progress bar. var _progressBar = "|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||" var _progressEnd = 5; var _progressAt = 0; // Create and display the progress dialog. // end: The number of steps to completion function ProgressCreate(end) { // Initialize state variables _progressEnd = end; _progressAt = 0; // Move layer to center of window to show if (document.all) { // Internet Explorer progress.className = 'show'; progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2); progress.style.top = document.body.scrollTop+(document.body.clientHeight/2) - (progress.offsetHeight/2); } else if (document.layers) { // Netscape document.progress.visibility = true; document.progress.left = (window.innerWidth/2) - 100+"px"; document.progress.top = pageYOffset+(window.innerHeight/2) - 40+"px"; } else if (document.getElementById) { // Netscape 6+ document.getElementById("progress").className = 'show'; document.getElementById("progress").style.left = (window.innerWidth/2)- 100+"px"; document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40+"px"; } ProgressUpdate(); // Initialize bar } // Hide the progress layer function ProgressDestroy() { // Move off screen to hide if (document.all) { // Internet Explorer progress.className = 'hide'; } else if (document.layers) { // Netscape document.progress.visibility = false; } else if (document.getElementById) { // Netscape 6+ document.getElementById("progress").className = 'hide'; } } // Increment the progress dialog one step function ProgressStepIt() { _progressAt++; if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd; ProgressUpdate(); } // Update the progress dialog with the current state function ProgressUpdate() { var n = (_progressWidth / _progressEnd) * _progressAt; if (document.all) { // Internet Explorer var bar = dialog.bar; } else if (document.layers) { // Netscape var bar = document.layers["progress"].document.forms["dialog"].bar; n = n * 0.55; // characters are larger } else if (document.getElementById){ var bar=document.getElementById("bar") } var temp = _progressBar.substring(0, n); bar.value = temp; } // Demonstrate a use of the progress dialog. function Demo() { ProgressCreate(10); window.setTimeout("Click()", 100); } function Click() { if(_progressAt >= _progressEnd) { ProgressDestroy(); return; } ProgressStepIt(); window.setTimeout("Click()", (duration-1)*1000/10); } function CallJS(jsStr) { //v2.0 return eval(jsStr) } </script> <SCRIPT LANGUAGE="JavaScript"> // Create layer for progress dialog document.write("<span id=\"progress\" class=\"hide\">"); document.write("<FORM name=dialog id=dialog>"); document.write("<TABLE border=2 bgcolor=\"#FFFFCC\">"); document.write("<TR><TD ALIGN=\"center\">"); document.write("Progress<BR>"); document.write("<input type=text name=\"bar\" id=\"bar\" size=\"" + _progressWidth/2 + "\""); if(document.all||document.getElementById) // Microsoft, NS6 document.write(" bar.style=\"color:navy;\">"); else // Netscape document.write(">"); document.write("</TD></TR>"); document.write("</TABLE>"); document.write("</FORM>"); document.write("</span>"); ProgressDestroy(); // Hides </script> <form name="form1" method="post"> <center> <input type="button" name="Demo" value="Display progress" onClick="CallJS('Demo()')"> </center> </form> <a href="javascript:CallJS('Demo()')">Text link example</a>

    Read the article

  • Work time in fullcalendar [Solution]

    - by Zozo
    Full calendar have no included options to work-time feature (selecting first and last rows in agenda view for any day - where in example company is not working). I managed something like that: viewDisplay: function(view){ $.ajax({ url: 'index.php?r=calendar/Default/worktime', dataType: 'json', success: function(data){ if(view.name=='agendaWeek') selectWorkTime(data, 30, 0, 24, false); else if(view.name=='agendaDay') selectDayWorkTime(data, 30, 0, 24, view, false); } }); } Where index.php?r=calendar/Default/worktime is php file returning json. It looks like that: $arr = array( 'mon' => array('8:00', '17:00'), 'tue' => array('9:00', '15:00'), 'wed' => array('9:30', '19:00'), 'thu' => array('6:00', '14:00'), 'fri' => array('0:00', '24:00'), 'sat' => array('9:00', '14:00'), 'sun' => array() ); foreach ($arr as &$day){ foreach($day as &$hour){ $tmp = explode(':', $hour); $hour = $tmp[0] * 3600 + $tmp[1] * 60; } } print json_encode($arr); and at the end, some functions using for counting and selecting work-time: function selectDayWorkTime(timeArray, slotMinutes, minTime, maxTime, viewObject, showAtHolidays){ var dayname; $('.fc-content').find('.fc-view-agendaWeek').find('.fc-agenda-body') .children('.fc-work-time').remove(); $('.fc-content').find('.fc-view-agendaDay') .find('.fc-work-time-day').removeClass('fc-work-time-day'); switch(viewObject.start.getDay()){ case 1: dayname='mon'; break; case 2: dayname='tue'; break; case 3: dayname='wed'; break; case 4: dayname='thu'; break; case 5: dayname='fri'; break; case 6: dayname='sat'; break; case 0: dayname='sun'; break; } for(var day in timeArray){ if(day == dayname){ if($('.fc-content').find('.fc-view-agendaDay').find('.fc-'+day).attr('class').search('fc-holiday') == -1 || showAtHolidays){ var startBefore = 0; var endBefore = timeArray[day][0] / (60 * slotMinutes) - (minTime * 60) / slotMinutes; var startAfter = timeArray[day][1] / (60 * slotMinutes) - (minTime * 60) / slotMinutes; var endAfter = (maxTime - minTime) * 60 / slotMinutes - 1; for(startBefore; startBefore < endBefore; startBefore++){ $('.fc-view-agendaDay').find('.fc-slot'+startBefore).find('div').addClass('fc-work-time-day'); } for(startAfter; startAfter <= endAfter; startAfter++){ $('.fc-view-agendaDay').find('.fc-slot'+startAfter).find('div').addClass('fc-work-time-day'); } } } } } function selectWorkTime(timeArray, slotMinutes, minTime, maxTime, showAtHolidays){ for(var day in timeArray){ var startBefore = 0; var endBefore = timeArray[day][0] / (60 * slotMinutes) - (minTime * 60) / slotMinutes; var startAfter = timeArray[day][1] / (60 * slotMinutes) - (minTime * 60) / slotMinutes; var endAfter = (maxTime - minTime) * 60 / slotMinutes - 1; if(startBefore > endBefore) endBefore = startBefore; if(startAfter > endAfter) startAfter = endAfter; try{ selectCell(startBefore, endBefore, 'fc-'+day, 'fc-work-time', false, showAtHolidays); selectCell(startAfter, endAfter, 'fc-'+day, 'fc-work-time', true, showAtHolidays); } catch(e){ continue; } } } function selectCell(startRowNo, endRowNo, collClass, cellClass, closeGap, showAtHolidays){ $('.fc-content').find('.fc-view-agendaWeek').find('.fc-agenda-body') .children('.'+cellClass+''+startRowNo+''+collClass).remove(); $('.fc-content').find('.fc-view-agendaDay') .find('.fc-work-time-day').removeClass('fc-work-time-day'); if($('.fc-content').find('.fc-view-agendaWeek').find('.'+collClass).attr('class').search('fc-holiday') == -1 || showAtHolidays){ var width = $('.fc-content').find('.fc-view-agendaWeek') .find('.'+collClass+':last').width(); var height = 0; if(closeGap && (startRowNo != endRowNo)){ height = $('.fc-content').find('.fc-view-agendaWeek') .find('.fc-slot'+ startRowNo).height(); } $('.fc-view-agendaWeek').find('.fc-agenda-body').prepend('<div class="'+cellClass+' ' + ''+cellClass+''+startRowNo+''+collClass+'"></div>'); $('.'+cellClass).width(width - 2); height += $('.fc-content').find('.fc-view-agendaWeek') .find('.fc-slot'+ endRowNo).position().top - $('.fc-content').find('.fc-view-agendaWeek') .find('.fc-slot'+ startRowNo).position().top; $('.'+cellClass+''+startRowNo+''+collClass).height(height); $('.'+cellClass+''+startRowNo+''+collClass) .css('margin-top', $('.fc-content').find('.fc-view-agendaWeek') .find('.fc-slot'+ startRowNo).position().top); $('.'+cellClass+''+startRowNo+''+collClass) .css('margin-left', $('.fc-content').find('.fc-view-agendaWeek') .find('.'+collClass+':last').offset().left - width / 2); } } Don't forget about CSS: .fc-work-time-day{ background-color: yellow; opacity: 0.3; filter: alpha(opacity=30); /* for IE */ } .fc-work-time{ position: absolute; background-color: yellow; z-index:10; margin: 0; padding: 0; text-align: left; z-index: 0; opacity: 0.3; filter: alpha(opacity=30); /* for IE */ } So, I've got some questions about - is the other way to make the same, but no using absolute div's in agendaWeek? And... How can I get in viewDisplay function actual slotMinutes, minTime and maxTime

    Read the article

  • Slide navigation problem multiple div movement

    - by littleMan
    I have almost figured it out but still doesn't quite work the way i want it to. my problem is this part. It scrolls the first element to the left but the second element just appears and doesn't scroll does anyone know what todo here. var i = jQuery('.wikiform .wizard .view').size(); jQuery('.wikiform .navigation input[name^=Next]').click(function () { jQuery('.wikiform .wizard .view').each(function (j) { jQuery(this).animate({ marginLeft: -(current.next().width() * (i - j)) }, 750); /*line above Im having problems with ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ current = current.next(); j++; }); }); my complete code down below test it out and see what Im doing wrong (function ($) { $.fn.WikiForm = function (options) { this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard'; var current = jQuery('.wikiform .view:first'); function positionForm() { jQuery('body') .css('overflow-y', 'hidden'); jQuery('<div id="overlay"></div>') .insertBefore('.wikiform') .css('top', jQuery(document).scrollTop()) .animate({ 'opacity': '0.8' }, 'slow'); jQuery('.wikiform') .css('height', jQuery('.wikiform .wizard .view:first').height() + jQuery('.wikiform .navigation').height()) .css('top', window.screen.availHeight / 2 - jQuery('.wikiform').height() / 2) .css('width', jQuery('.wikiform .wizard .view:first').width()) .css('left', -jQuery('.wikiform').width()) .animate({ marginLeft: jQuery(document).width() / 2 + jQuery('.wikiform').width() / 2 }, 750); jQuery('.wikiform .wizard') .css('overflow', 'hidden') .css('height', jQuery('.wikiform .wizard .view:first').height()); } if (this.Mode == "Wizard") { return this.each(function () { positionForm(); //alert(current.next().width()); var i = jQuery('.wikiform .wizard .view').size(); jQuery('.wikiform .navigation input[name^=Next]').click(function () { jQuery('.wikiform .wizard .view').each(function (j) { jQuery(this).animate({ marginLeft: -(current.next().width() * (i - j)) }, 750); current = current.next(); j++; }); }); jQuery('.wikiform .navigation input[name^=Back]').click(function () { }); }); } else if (this.Mode == "CancelOk") { return this.each(function () { }); } else { return this.each(function () { }); } }; })(jQuery); $(document).ready(function () { jQuery(window).bind("load", function () { jQuery(".wikiform").WikiForm({ mode: 'Wizard', speed:750, ease:"expoinout" }); }); }); <style type="text/css"> body { margin:0px; } #overlay { background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%; } .wikiform { background-color:Green; position:absolute; } .wikiform .wizard { clear: both; } .wizard { position: relative; left: 0; top: 0; width: 100%; list-style-type: none; } .wizard .view { float:left; } .view .form { } .navigation { float:right; clear:left } #view1 { background-color:Aqua; width:300px; height:300px; } #view2 { background-color:Fuchsia; width:300px; height:300px; } </style> <title></title></head><body><form action="" method=""><div id="layout"><div id="header"> Header </div> <div id="content" style="height:2000px"> Content </div> <div id="footer"> Footer </div> </div> <div id="formView1" class="wikiform"> <div class="wizard"> <div id="view1" class="view"> <div class="form"> Content 1 </div> </div> <div id="view2" class="view"> <div class="form"> Content 2 </div> </div> </div> <div class="navigation"> <input type="button" name="Back" value=" Back " /> <input type="button" name="Next " class="Next" value=" Next " /> <input type="button" name="Cancel" value="Cancel" /> </div> </div>

    Read the article

  • How to make a form using ajax, onchange event, reload to SAME page

    - by user1348220
    I've been studying this for a while and I'm not sure if I'm going about this the right way because every form I setup according to examples, it doesn't do what I need. I need to setup a form that will: set session when you select from dropdown menu not reload/refresh page (i've read that using AJAX solves this) submit and stay on SAME page (confused because most AJAX examples send it to different process.php page which is supposedly "invisible" but it doesn't "stay" on the same page, it redirects. Basically, client selects quantity of 1 to 10. If they select "2"... it does NOT reload the page.. but it DOES set a session[quantity]=2. Should be simple... but do I POST to same page as form? or POST to different page and it somehow redirects? Also, one test I did it kept pasting my "echo session[quantity]" down the page like 7, 2, 3, 5, etc. etc. each time instead of replacing it. I would paste code but it's all over the place and I'm hoping for direction on which methods to use. Feel I need to start all over again. Edit: trying to add code below but can't seem to paste it properly. <? ob_start();?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?php session_start(); ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Submit Form with out refreshing page Tutorial</title> <!-- JavaScript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" > $(function() { $(".submit").click(function() { var gender = $("#gender").val(); var dataString = '&gender=' + gender; if(gender=='') { $('.success').fadeOut(200).hide(); $('.error').fadeOut(200).show(); } else { $.ajax({ type: "POST", url: "join.php", data: dataString, success: function(){ $('.success').fadeIn(200).show(); $('.error').fadeOut(200).hide(); } }); } return false; }); }); </script> <style type="text/css"> body{ } .error{ color:#d12f19; font-size:12px; } .success{ color:#006600; font-size:12px; } </style> </head> <body id="public"> <div style="height:30px"></div> <div id="container"> <div style="height:30px"></div> <form method="post" name="form"> <select id="gender" name="gender"> <option value="">Gender</option> <option value="male">Male</option> <option value="female">Female</option> </select> <div> <input type="submit" value="Submit" class="submit"/> <span class="error" style="display:none"> Please Enter Valid Data</span> <span class="success" style="display:none"> Your gender is <?php echo $_SESSION['gender'];?></span> </div> </form> <div style="height:20px"></div> </div><!--container--> </body> </html> <? ob_flush(); ?> and here is my page where the POST goes called join.php (called that in example so I went with it for now) <?php session_start(); if($_POST) { $gender = $_POST['gender']; $_SESSION['gender'] = $gender; } else { } ?>

    Read the article

  • Threads to make video out of images

    - by masood
    updates: I think/ suspect the imageIO is not thread safe. shared by all threads. the read() call might use resources that are also shared. Thus it will give the performance of a single thread no matter how many threads used. ? if its correct . what is the solution (in practical code) Single request and response model at one time do not utilizes full network/internet bandwidth, thus resulting in low performance. (benchmark is of half speed utilization or even lower) This is to make a video out of an IP cam that gives a new image on each request. http://149.5.43.10:8001/snapshot.jpg It makes a delay of 3 - 8 seconds no matter what I do. Changed thread no. and thread time intervals, debugged the code by System.out.println statements to see if threads work. All seems normal. Any help? Please show some practical code. You may modify mine. This code works (javascript) with much smoother frame rate and max bandwidth usage. but the later code (java) dont. same 3 to 8 seconds gap. <!DOCTYPE html> <html> <head> <script type="text/javascript"> (function(){ var img="/*url*/"; var interval=50; var pointer=0; function showImg(image,idx) { if(idx<=pointer) return; document.body.replaceChild(image,document.getElementsByTagName("img")[0]); pointer=idx; preload(); } function preload() { var cache=null,idx=0;; for(var i=0;i<5;i++) { idx=Date.now()+interval*(i+1); cache=new Image(); cache.onload=(function(ele,idx){return function(){showImg(ele,idx);};})(cache,idx); cache.src=img+"?"+idx; } } window.onload=function(){ document.getElementsByTagName("img")[0].onload=preload; document.getElementsByTagName("img")[0].src="/*initial url*/"; }; })(); </script> </head> <body> <img /> </body> </html> and of java (with problem) : package camba; import java.applet.Applet; import java.awt.Button; import java.awt.Graphics; import java.awt.Image; import java.awt.Label; import java.awt.Panel; import java.awt.TextField; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.net.URL; import java.security.Timestamp; import java.util.Date; import java.util.concurrent.TimeUnit; import java.util.concurrent.atomic.AtomicBoolean; import javax.imageio.ImageIO; public class Camba extends Applet implements ActionListener{ Image img; TextField textField; Label label; Button start,stop; boolean terminate = false; long viewTime; public void init(){ label = new Label("please enter camera URL "); add(label); textField = new TextField(30); add(textField); start = new Button("Start"); add(start); start.addActionListener(this); stop = new Button("Stop"); add(stop); stop.addActionListener(this); } public void actionPerformed(ActionEvent e){ Button source = (Button)e.getSource(); if(source.getLabel() == "Start"){ for (int i = 0; i < 7; i++) { myThread(50*i); } System.out.println("start..."); } if(source.getLabel() == "Stop"){ terminate = true; System.out.println("stop..."); } } public void paint(Graphics g) { update(g); } public void update(Graphics g){ try{ viewTime = System.currentTimeMillis(); g.drawImage(img, 100, 100, this); } catch(Exception e) { e.printStackTrace(); } } public void myThread(final int sleepTime){ new Thread(new Runnable() { public void run() { while(!terminate){ try { TimeUnit.MILLISECONDS.sleep(sleepTime); } catch (InterruptedException ex) { ex.printStackTrace(); } long requestTime= 0; Image tempImage = null; try { URL pic = null; requestTime= System.currentTimeMillis(); pic = new URL(getDocumentBase(), textField.getText()); tempImage = ImageIO.read(pic); } catch(Exception e) { e.printStackTrace(); } if(requestTime >= /*last view time*/viewTime){ img = tempImage; Camba.this.repaint(); } } }}).start(); System.out.println("thread started..."); } }

    Read the article

  • JSF and Jquery - doesn't work

    - by darkrain
    Hi I am trying to get Jquery work in JSF. But i doesn't work. Can somebody help me ? The scripts are in the folder : resources This is my JSP code : I am using netbeans and the <?xml version="1.0" encoding="UTF-8"?> <!-- Document : testpage Created on : 08.07.2009, 01:16:01 Author : reBourne --> <jsp:root version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:webuijsf="http://www.sun.com/webui/webuijsf"> <jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/> <f:view> <webuijsf:page id="page1"> <webuijsf:html id="html1"> <webuijsf:head id="head1"> <webuijsf:link id="link1" url="/resources/css/stylesheet.css"/> <webuijsf:script id="script1" url="resources/jquery.js"/> <webuijsf:script id="script2" url="recources/main.js" /> <style> body { margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } h1{ font-size:180%; font-weight:normal; color:#555; } h2{ clear:both; font-size:160%; font-weight:normal; color:#555; margin:0; padding:.5em 0; } a{ text-decoration:none; color:#f30; } p{ clear:both; margin:0; padding:.5em 0; } pre{ display:block; font:100% "Courier New", Courier, monospace; padding:10px; border:1px solid #bae2f0; background:#e3f4f9; margin:.5em 0; overflow:auto; width:800px; } img{border:none;} ul,li{ margin:0; padding:0; } li{ list-style:none; float:left; display:inline; margin-right:10px; } /* */ #preview{ position:absolute; border:1px solid #ccc; background:#333; padding:5px; display:none; color:#fff; } /* */ </style> </webuijsf:head> <webuijsf:body id="body1" style="-rave-layout: grid"> <webuijsf:form id="form1"> <ul> <li> <a class="preview" href="resources/images/1.jpg"> <img alt="gallery thumbnail" src="resources/images/1s.jpg"/> </a> </li> <li> <a class="preview" href="resources/images/2.jpg"> <img alt="gallery thumbnail" src="resources/images/2s.jpg"/> </a> </li> <li> <a class="preview" href="resources/images/3.jpg"> <img alt="gallery thumbnail" src="resources/images/3s.jpg"/> </a> </li> <li> <a class="preview" href="resources/images/4.jpg"> <img alt="gallery thumbnail" src="resources/images/4s.jpg"/> </a> </li> </ul> </webuijsf:form> </webuijsf:body> </webuijsf:html> </webuijsf:page> </f:view> </jsp:root> Or has someone a real life example with Javascript ?!

    Read the article

  • centering ul so that columns will be centered too

    - by user1815176
    In my page I want it so that when you resize the page past the point of the pictures, that the pictures will go into another row, all the way so each picture has it's own row. And then potentially I won't need any media queries. But unfortunaltely I can't find a way to center. I have tried everything I can think of, aside of making hundreds of media queries with different positioning. I can't make it a block because then it won't go into rows, I have tried margin: 0 auto;. I have tried changing the padding, I have even tried using the html align="center". Nothing is working. Here is the website http://spencedesign.netau.net/singaporehome.html Also I have a minor issue, sorry to croud this with two questions. But when it is in it's mobile state, there is no 10px padding at the bottom, and the singapore title is on the left side rather than floating. Here is my code <html> <head> <title> Singapore - Home </title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <meta name="viewport" content="width=device-width, initial scale=1.0"> <style> * { margin: 0; padding: 0; } body { background: url('woodbackground.jpg'); background-size: cover; min-height: 100%; min-width: 100%; position: relative; top: 0; bottom: 0; left: 0; right: 0; } #container { width: 90%; margin: 0 auto; } h1 { font: bold 65px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; position: relative; top: 60px; } h3 { font: 25px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; position: relative; top: 80px; } ul#gallery { list-style: none; display: inline; margin: 0 auto; position: relative; top: 175px; width: 1300px; } ul#gallery li a { float: left; padding: 10px 10px 25px 10px; background-color: #eee; border: 1px solid #fff; -moz-box-shadow: 0px 2px 15px #333; position: relative; margin: 10px; text-decoration: none; } ul#gallery li a:hover { position: relative; top: -15px; } ul#gallery li a img { height: 150px; width: 250px; max-width: 100%; } ul#gallery li a p { margin-top: 25px; text-align: center; color: #000; font: Helvetica, Arial, Sans-serif; text-decoration: none; font-size: 20px; } @media screen and (max-width: 640px)    { ul#gallery {   left: 2.2%;   width: 600px; }   ul#gallery li a:hover {   top: 0px; } } </style> <body> <div id="container"> <h1> Singapore </h1> <h3><i> Singapore is the worlds first machine that works </i>- Lee Kuan Yew </h3> <ul id="gallery"> <li><a href="#"> <img src="gallery.jpg" alt="gallery" /> <p> Gallery </p> </a></li> <li><a href="#"> <img src="facts.jpg" alt="facts" /> <p> Facts </p></a></li> <li><a href="#"> <img src="tour.jpg" alt="tour" /> <p> Tour </p></a></li> <li><a href="#"> <img src="author.jpg" alt="author" /> <p> Author </p> </a></li> </ul> <br/> </div><!-- Container --> </body> <html> Thanks!

    Read the article

  • Why are items being placed below?

    - by Adam DePolo
    This is really confusing and I have never had this occur. For my computer, it is fine. But for anyone else's computer I have tried, it screws up. So on my site, designatease.com , the second bar down, it places the fifth item down below the first four. I am not sure why it is doing this. I want them to span across the bar but the stop at about half way. Help me out SOF. HTML <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Design At Ease - Home</title> </head> <body> <div id="header"> <div id="logo"><a class="logoclass">DesignAtEase.com</a></div> <ul id="headerlinks"> <li><a href="index.html">Home</a></li> <li><a href="coding.html">Coding</a></li> <li><a href="graphics.html">Graphics</a></li> <li><a href="database.html">Database</a></li> <li><a href="support.html">Support</a></li> <li><a href="more.html">More</a></li> </ul> </div> <ul id="quicklinks"> <li><a href="quickstart.html">Quick Start</a></li> <li><a href="tagsmain.html">Tag Helper</a></li> <li><a href="html.html">HTML</a></li> <li><a href="css.html">CSS</a></li> <li><a href="photoshop.html">Photoshop</a></li> <li><a href="quickstart.html">Quick Start</a></li> <li><a href="tagsmain.html">Tag Helper</a></li> </ul> </body> </html> CSS body{ background:#fffffc; margin: auto auto; } #header{ background:#e5e5e5; height:35px; width:100%; border-bottom: 1px #c9c9c9 solid; } #headerlinks{ position:relative; display:inline; float:right; margin-right:5%; bottom:37px; } #headerlinks li{ display:inline; padding-left:25px; } #headerlinks li a{ color:#777777; display:inline; font-size:18px; font-family: sans-serif; text-decoration:none; } #headerlinks li a:hover{ color:#a3a3a3; display:inline; font-size:18px; font-family: sans-serif; text-decoration:none; } #logo{ position:relative; color:black; margin-left:5%; top:5px; } .logoclass{ color:#212121; display:inline; font-size:24px; font-family: sans-serif; text-decoration:none; } #quicklinks{ width:90%; margin-left:auto; margin-right:auto;; height:25px; background:#e5e5e5; border-bottom: 1px #c9c9c9 solid; border-left: 1px #c9c9c9 solid; border-right: 1px #c9c9c9 solid; top:-16px; position:relative; } #quicklinks li{ display:inline; } #quicklinks li a{ } #quicklinks li a:hover{ } #wrapper{ width:80%; height:100%; }

    Read the article

  • CSS: Centering a floated block level element in IE6 (It almost works)

    - by Louis W
    I have a block level element which I am centering on the page. I have gotten it to work for all other browsers except IE6 where it ALMOST works. http://tinyurl.com/28sh9eq If I view the page in IE6 the red box is slightly off center of the pink one in IE. If I then resize the browser window it snaps into place where I want it. Uhhhhh.... yea.... what gives? How come resizing the window makes it work? I have also tried setting an explicit width on the wrapper with no avail. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <style type="text/css"> BODY { text-align: center; font-family: Arial; } .row_wrap { height: 100px; margin-bottom: 30px; background-color: pink; } .row { float: right; position: relative; left: -50%; text-align: left; clear: both; } .button1 { color: #FFF; height: 36px; text-decoration: none; position: relative; padding: 0 30px; background: url('button.gif') no-repeat 0 0; display: block; float: left; left: 50%; } .button1 .end { width: 20px; height: 37px; position: absolute; right: -2px; top: 0; background: url('button.gif') no-repeat right 0; } .button1 .text { font-size: 16px; font-weight: bold; white-space: nowrap; height: 36px; padding-top: 7px; display: block; float: left; } .button1 .text .arrow { vertical-align: 1px; } </style> </head> <body> <h2>RTL: Button 1</h2> <div class="row_wrap"> <div class="row" dir="rtl"> <a href="#" class="button1"> <span class="end"></span> <span class="text"><span class="arrow">»</span> Hello 1.</span> </a> </div> </div> <h2>RTL: Button 1-2</h2> <div class="row_wrap" style="width: 400px;"> <div class="row" dir="rtl"> <a href="#" class="button1"> <span class="end"></span> <span class="text"><span class="arrow">»</span> Hello 1.</span> </a> </div> </div> <br/><br/> <h2>Normal: Button 1</h2> <div class="row_wrap"> <div class="row"> <a href="#" class="button1"> <span class="end"></span> <span class="text"><span class="arrow">»</span> Hello.</span> </a> </div> </div> </body> Thanks for your help.

    Read the article

  • CSS issue with margin: auto

    - by user1702273
    Hi am having an issue with the margin auto of my website where i have a wrapper div with the width set to 1000px and the margins top and bottom to 0 and left and right to auto. I have a navigation menu in the side bar, where i used java script to replace the same div with different tables. when i click a link in the menu the wrapper shifts right some px and the comes to original, I don't want that action i want the wrapper to be static and not to vary at any time. how can i achieve that. when i set the margin to just 0, so problem with positioning. But i want the wrapper to be centered. Here is my css code: body { background-color:#E2E3E4; color:#333; margin:0; padding:0; font-size: 12px; } #wrapper { width:1000px; margin:0 auto; margin-bottom:10px; } #header1 { width:1000px; height:44px; margin:0 auto; background-color:#ED6B06; } #header2 { width:1000px; height:40px; margin:0 auto; border-bottom:1px solid #EDE9DE; } #header3 { width:1000px; height:40px; margin:0 auto; border-bottom:1px solid #EDE9DE; } #header2 p { margin:0 auto; font-size:20pt; color: #364395; font-smooth: auto; margin-left:15px; margin-top:5px; } #welcome { width:600px; float:left; padding:10px; margin:0 auto; } #status{ margin:0 auto; width:50px; float:right; padding:10px; margin-top:3px; margin-right:15px; } #content { width:780px; float:right; } #sidebar { width:150px; margin-top:15px; margin-left:10px; float:left; border-right:1px solid #EDE9DE; margin-bottom:25px; } #footer { clear:both; margin:0 auto; width:1000px; height:44px; border-top:1px solid #EDE9DE; } HTML: <html> <head> <link rel="stylesheet" type="text/css" href="style/style.css" media="screen" /> <title>Pearson Schools Management Portal</title> </head> <body id="home"> <div id="wrapper"> <?php include('includes/header1.php'); ?> <?php include('includes/header2.php'); ?> <?php include('includes/header3.php'); ?> <div id="content"> <h2>Welcome to Portal!</h2> </div> <!-- end #content --> <?php include('includes/sidebar.php'); ?> <?php include('includes/footer.php'); ?> </div> <!-- End #wrapper --> <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> <?php include('scripts/index_data.js'); ?> </body>

    Read the article

  • Map wont show rigth in Joomla

    - by user1653126
    I have the following code of a map using api google, I have tested the code in several html editor and its work perfectly, but when i upload in my web page doesn’t work. The map appears all zoomed in some random point in the ocean. I create an article in Joomla 1.5.20, paste the code. Its shows right in the preview but not in the web page. I disable filtering and use none editor and still won’t work. Thanks for the help. <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBInlv7FuwtKGhzBP0oISDoB2Iu79HNrPU&sensor=false"> </script> <script type="text/javascript"> var map; // lets define some vars to make things easier later var kml = { a: { name: "Productor", url: "https://maps.google.hn/maps/ms?authuser=0&vps=2&hl=es&ie=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c934a224eca7c3ad4" }, b: { name: "A&S", url: "https://maps.google.hn/maps/ms?ie=UTF8&authuser=0&msa=0&output=kml&msid=200984447026903306654.0004c94bac74cf2304c71" } // keep adding more if ye like }; // initialize our goo function initializeMap() { var options = { center: new google.maps.LatLng(13.324182,-87.080071), zoom: 9, mapTypeId: google.maps.MapTypeId.TERRAIN } map = new google.maps.Map(document.getElementById("map_canvas"), options); var ctaLayer = new google.maps.KmlLayer('https://maps.google.hn/maps/ms?authuser=0&vps=5&hl=es&ie=UTF8&oe=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c94bc3bce6f638aa1'); ctaLayer.setMap(map); var ctaLayer = new google.maps.KmlLayer('https://maps.google.hn/maps/ms?authuser=0&vps=2&ie=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c94ec7e838242b67d'); ctaLayer.setMap(map); createTogglers(); }; google.maps.event.addDomListener(window, 'load', initializeMap); // the important function... kml[id].xxxxx refers back to the top function toggleKML(checked, id) { if (checked) { var layer = new google.maps.KmlLayer(kml[id].url, { preserveViewport: true, suppressInfoWindows: true }); google.maps.event.addListener(layer, 'click', function(kmlEvent) { var text = kmlEvent.featureData.description; showInContentWindow(text); }); function showInContentWindow(text) { var sidediv = document.getElementById('content_window'); sidediv.innerHTML = text; } // store kml as obj kml[id].obj = layer; kml[id].obj.setMap(map); } else { kml[id].obj.setMap(null); delete kml[id].obj; } }; // create the controls dynamically because it's easier, really function createTogglers() { var html = "<form><ul>"; for (var prop in kml) { html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" + " onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" + kml[prop].name + "<\/li>"; } html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" + "Limpiar el Mapa<\/a><\/li>" + "<\/ul><\/form>"; document.getElementById("toggle_box").innerHTML = html; }; // easy way to remove all objects function removeAll() { for (var prop in kml) { if (kml[prop].obj) { kml[prop].obj.setMap(null); delete kml[prop].obj; } } }; // Append Class on Select function highlight(box, listitem) { var selected = 'selected'; var normal = 'normal'; document.getElementById(listitem).className = (box.checked ? selected: normal); }; </script> <style type="text/css"> .selected { font-weight: bold; } </style> </head> <body> <div id="map_canvas" style="width: 80%; height: 400px; float:left"></div> <div id="toggle_box" style="position: absolute; top: 100px; right: 640px; padding: 10px; background: #fff; z-index: 5; "></div> <div id="content_window" style="width:10%; height:10%; float:left"></div> </body> </html>

    Read the article

  • get iframe property and content

    - by zeroSeven
    is there a way to get the iframe properties and content and be able to display it? example: type it as Rich Text Editor on the iframe and it will be displayed as<b>Rich Text Editor</b> on some part of the page. Rich Text Editor == <b>Rich Text Editor</b> thank you in advance. <html> <head> <title>Rich Text Editor</title> </head> <script type="text/javascript"> function def() { document.getElementById("textEditor").contentWindow.document.designMode="on"; textEditor.document.open(); textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style></head>'); textEditor.document.close(); document.getElementById("fonts").selectedIndex=0; document.getElementById("size").selectedIndex=1; document.getElementById("color").selectedIndex=0; } function fontEdit(x,y) { document.getElementById("textEditor").contentWindow.document.execCommand(x,"",y); textEditor.focus(); } </script> <body onLoad="def()"> <center> <div style="width:500px; text-align:left; margin-bottom:10px "> <input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" /> <input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" /> <input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> | <input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" /> <input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" /> <input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> | <select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)"> <option value="Arial">Arial</option> <option value="Comic Sans MS">Comic Sans MS</option> <option value="Courier New">Courier New</option> <option value="Monotype Corsiva">Monotype</option> <option value="Tahoma">Tahoma</option> <option value="Times">Times</option> </select> <select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)"> <option value="black">-</option> <option style="color:red;" value="red">-</option> <option style="color:blue;" value="blue">-</option> <option style="color:green;" value="green">-</option> <option style="color:pink;" value="pink">-</option> </select> | <input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" /> <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('insertunorderedlist')" title="Bullets List" /> <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('outdent')" title="Outdent" /> <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('indent')" title="Indent" /> </div> <iframe id="textEditor" style="width:500px; height:170px;"> </iframe> </center> </body>

    Read the article

  • How to specify 2 different positions for Colorbox or Fancybox on the same page?

    - by Eric
    I know this question has been asked before, but I'm having difficulty implementing it. I'm looking for a more specific answer. Here is my html code: <head> <meta charset=utf-8 /> <title>ColorBox Examples</title> <style type="text/css"> body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;} a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;} h2{font-size:13px; margin:15px 0 0 0;} </style> <link media="screen" rel="stylesheet" href="colorbox.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="../colorbox/jquery.colorbox.js"></script> <script> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); }); </script> </head> <body> <p><a class='example7' href="http://google.com">Outside Webpage 1 (Iframe)</a></p> <p><a class='example7' href="http://google.com">Outside Webpage 2 (Iframe)</a></p> (Excuse the wrong indentation - I had to mess with the formatting to get the body content to show up.) Here is my CSS code(default colorbox code): #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:visible;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} #cboxOverlay{background:#fff;} #colorbox{} #cboxContent{margin-top:32px;} #cboxLoadedContent{background:#000; padding:1px;} #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;} #cboxLoadingOverlay{background:#000;} #cboxTitle{position:absolute; top:-22px; left:0; color:#000;} #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;} #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(images/controls.png) no-repeat 0 0;} #cboxPrevious{background-position:0px 0px; right:44px;} #cboxPrevious.hover{background-position:0px -25px;} #cboxNext{background-position:-25px 0px; right:22px;} #cboxNext.hover{background-position:-25px -25px;} #cboxClose{background-position:-50px 0px; right:0;} #cboxClose.hover{background-position:-50px -25px;} .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;} .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;} .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;} Can someone please tell me how this can be achieved? Forgive my lack of css knowledge :) Any help would be greatly appreciated. Thanks a ton.

    Read the article

  • js code works for one variable(?), how to make it work for many?

    - by jerry87
    I have working code of js, it shows different div for selected option. <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#box1').hide(); $('#box2').hide(); $('#box3').hide(); $("#thechoices").change(function(){ $("#" + this.value).show().siblings().hide(); }); $("#thechoices").change(); }); </script> </head> <body> <select id="thechoices"> <option value="box1">Box 1</option> <option value="box2">Box 2</option> <option value="box3">Box 3</option> </select> <!-- the DIVs --> <div id="boxes"> <div id="box1"><p>Box 1 stuff...</p></div> <div id="box2"><p>Box 2 stuff...</p></div> <div id="box3"><p>Box 3 stuff...</p></div> </div> </body> </html> Please, I have no js experience, so I don't know how to make it work several times on one page for many "thechoices". Something like copy paste but more suitable than this: <script type="text/javascript"> $(document).ready(function(){ $('#box1').hide(); $('#box2').hide(); $('#box3').hide(); $('#box4').hide(); $('#box5').hide(); $('#box6').hide(); $("#thechoices").change(function(){ $("#" + this.value).show().siblings().hide(); }); $("#thechoices2").change(function(){ $("#" + this.value).show().siblings().hide(); }); $("#thechoices").change(); }); $("#thechoices2").change(); }); </script> </head> <body> <select id="thechoices"> <option value="box1">Box 1</option> <option value="box2">Box 2</option> <option value="box3">Box 3</option> </select> <!-- the DIVs --> <div id="boxes"> <div id="box1"><p>Box 1 stuff...</p></div> <div id="box2"><p>Box 2 stuff...</p></div> <div id="box3"><p>Box 3 stuff...</p></div> </div> <select id="thechoices2"> <option value="box4">1</option> <option value="box5">2</option> <option value="box6">3</option> </select> <!-- the DIVs --> <div id="boxes"> <div id="box4"><p>1 stuff...</p></div> <div id="box5"><p>2 stuff...</p></div> <div id="box6"><p>3 stuff...</p></div> </div> I know you can help me, it seems to be simple but I can't handle with this. How can I change my second code to work in the same way but not only for two selectors. I need it for many. Don't want to copy paste the same section like in my second code.

    Read the article

  • tables wrapping to next line when width 100%

    - by jmo
    I'm encountering some weirdness with tables in css. The layout is fairly simple, a fixed-width nav bar on the left and the content on the right. When the content includes a table with a width of 100% the table ends up getting pushed down until it has room to take up the full width of the screen (instead of just the area to the right of the nav bar). If I remove the width=100% from the table's css, then it looks fine, but obviously the table doesn't grow to fill the space of the div. The problem is that i want the table to grow and shrink with the window but still stay in the bounds of its div. Thanks. Here's a simple example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test</title> <style type="text/css"> #content { padding-right:20px; background:white; overflow:hidden; margin:20px; } #content .column { position:relative; padding-bottom: 20010px; margin-bottom: -20000px; } #center { width:100%; padding-top:15px; } body { min-width:700px; } #left { width: 330px; padding: 0 10px; padding-top:10px; float:left; } .tableData { width:100%; } </style> </head> <body> <div id="content"> <div class="column" id="left"> <div> Some text goes in here<br/> some more text<br/> some more text<br/> some more text<br/> some more text<br/> some more text<br/> </div> </div> <div class="column" id="center"> Some text at the top; <hr/> <table class="tableData"> <thead> <tr><th>A</th><th>B</th><th>C</th></tr> </thead> <tbody> <tr> <td>A1 A1 A1 A1</td> <td>B1 B1 B1 B1</td> <td>C1 C1 C1 C1 C</td> </tr> <tr> <td>A2 A2 A2 A2 </td> <td>B2 B2 B2 B2 </td> <td>C2 C2 C2 C2</td> </tr> <tr> <td>A3 A3 A3 A3 A3 </td> <td>B3 B3 B3 B3 B3 </td> <td>C3 C3 C3 C3 C3</td> </tr> <tr> <td>A4 A4 A4 A4 A4</td> <td>B4 B4 B4 B4 B4</td> <td>C4 C4 C4 C4 C4</td> </tr> </tbody> </table> </div> </div> </body> </html>

    Read the article

  • Using FiddlerCore to capture HTTP Requests with .NET

    - by Rick Strahl
    Over the last few weeks I’ve been working on my Web load testing utility West Wind WebSurge. One of the key components of a load testing tool is the ability to capture URLs effectively so that you can play them back later under load. One of the options in WebSurge for capturing URLs is to use its built-in capture tool which acts as an HTTP proxy to capture any HTTP and HTTPS traffic from most Windows HTTP clients, including Web Browsers as well as standalone Windows applications and services. To make this happen, I used Eric Lawrence’s awesome FiddlerCore library, which provides most of the functionality of his desktop Fiddler application, all rolled into an easy to use library that you can plug into your own applications. FiddlerCore makes it almost too easy to capture HTTP content! For WebSurge I needed to capture all HTTP traffic in order to capture the full HTTP request – URL, headers and any content posted by the client. The result of what I ended up creating is this semi-generic capture form: In this post I’m going to demonstrate how easy it is to use FiddlerCore to build this HTTP Capture Form.  If you want to jump right in here are the links to get Telerik’s Fiddler Core and the code for the demo provided here. FiddlerCore Download FiddlerCore on NuGet Show me the Code (WebSurge Integration code from GitHub) Download the WinForms Sample Form West Wind Web Surge (example implementation in live app) Note that FiddlerCore is bound by a license for commercial usage – see license.txt in the FiddlerCore distribution for details. Integrating FiddlerCore FiddlerCore is a library that simply plugs into your application. You can download it from the Telerik site and manually add the assemblies to your project, or you can simply install the NuGet package via:       PM> Install-Package FiddlerCore The library consists of the FiddlerCore.dll as well as a couple of support libraries (CertMaker.dll and BCMakeCert.dll) that are used for installing SSL certificates. I’ll have more on SSL captures and certificate installation later in this post. But first let’s see how easy it is to use FiddlerCore to capture HTTP content by looking at how to build the above capture form. Capturing HTTP Content Once the library is installed it’s super easy to hook up Fiddler functionality. Fiddler includes a number of static class methods on the FiddlerApplication object that can be called to hook up callback events as well as actual start monitoring HTTP URLs. In the following code directly lifted from WebSurge, I configure a few filter options on Form level object, from the user inputs shown on the form by assigning it to a capture options object. In the live application these settings are persisted configuration values, but in the demo they are one time values initialized and set on the form. Once these options are set, I hook up the AfterSessionComplete event to capture every URL that passes through the proxy after the request is completed and start up the Proxy service:void Start() { if (tbIgnoreResources.Checked) CaptureConfiguration.IgnoreResources = true; else CaptureConfiguration.IgnoreResources = false; string strProcId = txtProcessId.Text; if (strProcId.Contains('-')) strProcId = strProcId.Substring(strProcId.IndexOf('-') + 1).Trim(); strProcId = strProcId.Trim(); int procId = 0; if (!string.IsNullOrEmpty(strProcId)) { if (!int.TryParse(strProcId, out procId)) procId = 0; } CaptureConfiguration.ProcessId = procId; CaptureConfiguration.CaptureDomain = txtCaptureDomain.Text; FiddlerApplication.AfterSessionComplete += FiddlerApplication_AfterSessionComplete; FiddlerApplication.Startup(8888, true, true, true); } The key lines for FiddlerCore are just the last two lines of code that include the event hookup code as well as the Startup() method call. Here I only hook up to the AfterSessionComplete event but there are a number of other events that hook various stages of the HTTP request cycle you can also hook into. Other events include BeforeRequest, BeforeResponse, RequestHeadersAvailable, ResponseHeadersAvailable and so on. In my case I want to capture the request data and I actually have several options to capture this data. AfterSessionComplete is the last event that fires in the request sequence and it’s the most common choice to capture all request and response data. I could have used several other events, but AfterSessionComplete is one place where you can look both at the request and response data, so this will be the most common place to hook into if you’re capturing content. The implementation of AfterSessionComplete is responsible for capturing all HTTP request headers and it looks something like this:private void FiddlerApplication_AfterSessionComplete(Session sess) { // Ignore HTTPS connect requests if (sess.RequestMethod == "CONNECT") return; if (CaptureConfiguration.ProcessId > 0) { if (sess.LocalProcessID != 0 && sess.LocalProcessID != CaptureConfiguration.ProcessId) return; } if (!string.IsNullOrEmpty(CaptureConfiguration.CaptureDomain)) { if (sess.hostname.ToLower() != CaptureConfiguration.CaptureDomain.Trim().ToLower()) return; } if (CaptureConfiguration.IgnoreResources) { string url = sess.fullUrl.ToLower(); var extensions = CaptureConfiguration.ExtensionFilterExclusions; foreach (var ext in extensions) { if (url.Contains(ext)) return; } var filters = CaptureConfiguration.UrlFilterExclusions; foreach (var urlFilter in filters) { if (url.Contains(urlFilter)) return; } } if (sess == null || sess.oRequest == null || sess.oRequest.headers == null) return; string headers = sess.oRequest.headers.ToString(); var reqBody = sess.GetRequestBodyAsString(); // if you wanted to capture the response //string respHeaders = session.oResponse.headers.ToString(); //var respBody = session.GetResponseBodyAsString(); // replace the HTTP line to inject full URL string firstLine = sess.RequestMethod + " " + sess.fullUrl + " " + sess.oRequest.headers.HTTPVersion; int at = headers.IndexOf("\r\n"); if (at < 0) return; headers = firstLine + "\r\n" + headers.Substring(at + 1); string output = headers + "\r\n" + (!string.IsNullOrEmpty(reqBody) ? reqBody + "\r\n" : string.Empty) + Separator + "\r\n\r\n"; BeginInvoke(new Action<string>((text) => { txtCapture.AppendText(text); UpdateButtonStatus(); }), output); } The code starts by filtering out some requests based on the CaptureOptions I set before the capture is started. These options/filters are applied when requests actually come in. This is very useful to help narrow down the requests that are captured for playback based on options the user picked. I find it useful to limit requests to a certain domain for captures, as well as filtering out some request types like static resources – images, css, scripts etc. This is of course optional, but I think it’s a common scenario and WebSurge makes good use of this feature. AfterSessionComplete like other FiddlerCore events, provides a Session object parameter which contains all the request and response details. There are oRequest and oResponse objects to hold their respective data. In my case I’m interested in the raw request headers and body only, as you can see in the commented code you can also retrieve the response headers and body. Here the code captures the request headers and body and simply appends the output to the textbox on the screen. Note that the Fiddler events are asynchronous, so in order to display the content in the UI they have to be marshaled back the UI thread with BeginInvoke, which here simply takes the generated headers and appends it to the existing textbox test on the form. As each request is processed, the headers are captured and appended to the bottom of the textbox resulting in a Session HTTP capture in the format that Web Surge internally supports, which is basically raw request headers with a customized 1st HTTP Header line that includes the full URL rather than a server relative URL. When the capture is done the user can either copy the raw HTTP session to the clipboard, or directly save it to file. This raw capture format is the same format WebSurge and also Fiddler use to import/export request data. While this code is application specific, it demonstrates the kind of logic that you can easily apply to the request capture process, which is one of the reasonsof why FiddlerCore is so powerful. You get to choose what content you want to look up as part of your own application logic and you can then decide how to capture or use that data as part of your application. The actual captured data in this case is only a string. The user can edit the data by hand or in the the case of WebSurge, save it to disk and automatically open the captured session as a new load test. Stopping the FiddlerCore Proxy Finally to stop capturing requests you simply disconnect the event handler and call the FiddlerApplication.ShutDown() method:void Stop() { FiddlerApplication.AfterSessionComplete -= FiddlerApplication_AfterSessionComplete; if (FiddlerApplication.IsStarted()) FiddlerApplication.Shutdown(); } As you can see, adding HTTP capture functionality to an application is very straight forward. FiddlerCore offers tons of features I’m not even touching on here – I suspect basic captures are the most common scenario, but a lot of different things can be done with FiddlerCore’s simple API interface. Sky’s the limit! The source code for this sample capture form (WinForms) is provided as part of this article. Adding Fiddler Certificates with FiddlerCore One of the sticking points in West Wind WebSurge has been that if you wanted to capture HTTPS/SSL traffic, you needed to have the full version of Fiddler and have HTTPS decryption enabled. Essentially you had to use Fiddler to configure HTTPS decryption and the associated installation of the Fiddler local client certificate that is used for local decryption of incoming SSL traffic. While this works just fine, requiring to have Fiddler installed and then using a separate application to configure the SSL functionality isn’t ideal. Fortunately FiddlerCore actually includes the tools to register the Fiddler Certificate directly using FiddlerCore. Why does Fiddler need a Certificate in the first Place? Fiddler and FiddlerCore are essentially HTTP proxies which means they inject themselves into the HTTP conversation by re-routing HTTP traffic to a special HTTP port (8888 by default for Fiddler) and then forward the HTTP data to the original client. Fiddler injects itself as the system proxy in using the WinInet Windows settings  which are the same settings that Internet Explorer uses and that are configured in the Windows and Internet Explorer Internet Settings dialog. Most HTTP clients running on Windows pick up and apply these system level Proxy settings before establishing new HTTP connections and that’s why most clients automatically work once Fiddler – or FiddlerCore/WebSurge are running. For plain HTTP requests this just works – Fiddler intercepts the HTTP requests on the proxy port and then forwards them to the original port (80 for HTTP and 443 for SSL typically but it could be any port). For SSL however, this is not quite as simple – Fiddler can easily act as an HTTPS/SSL client to capture inbound requests from the server, but when it forwards the request to the client it has to also act as an SSL server and provide a certificate that the client trusts. This won’t be the original certificate from the remote site, but rather a custom local certificate that effectively simulates an SSL connection between the proxy and the client. If there is no custom certificate configured for Fiddler the SSL request fails with a certificate validation error. The key for this to work is that a custom certificate has to be installed that the HTTPS client trusts on the local machine. For a much more detailed description of the process you can check out Eric Lawrence’s blog post on Certificates. If you’re using the desktop version of Fiddler you can install a local certificate into the Windows certificate store. Fiddler proper does this from the Options menu: This operation does several things: It installs the Fiddler Root Certificate It sets trust to this Root Certificate A new client certificate is generated for each HTTPS site monitored Certificate Installation with FiddlerCore You can also provide this same functionality using FiddlerCore which includes a CertMaker class. Using CertMaker is straight forward to use and it provides an easy way to create some simple helpers that can install and uninstall a Fiddler Root certificate:public static bool InstallCertificate() { if (!CertMaker.rootCertExists()) { if (!CertMaker.createRootCert()) return false; if (!CertMaker.trustRootCert()) return false; } return true; } public static bool UninstallCertificate() { if (CertMaker.rootCertExists()) { if (!CertMaker.removeFiddlerGeneratedCerts(true)) return false; } return true; } InstallCertificate() works by first checking whether the root certificate is already installed and if it isn’t goes ahead and creates a new one. The process of creating the certificate is a two step process – first the actual certificate is created and then it’s moved into the certificate store to become trusted. I’m not sure why you’d ever split these operations up since a cert created without trust isn’t going to be of much value, but there are two distinct steps. When you trigger the trustRootCert() method, a message box will pop up on the desktop that lets you know that you’re about to trust a local private certificate. This is a security feature to ensure that you really want to trust the Fiddler root since you are essentially installing a man in the middle certificate. It’s quite safe to use this generated root certificate, because it’s been specifically generated for your machine and thus is not usable from external sources, the only way to use this certificate in a trusted way is from the local machine. IOW, unless somebody has physical access to your machine, there’s no useful way to hijack this certificate and use it for nefarious purposes (see Eric’s post for more details). Once the Root certificate has been installed, FiddlerCore/Fiddler create new certificates for each site that is connected to with HTTPS. You can end up with quite a few temporary certificates in your certificate store. To uninstall you can either use Fiddler and simply uncheck the Decrypt HTTPS traffic option followed by the remove Fiddler certificates button, or you can use FiddlerCore’s CertMaker.removeFiddlerGeneratedCerts() which removes the root cert and any of the intermediary certificates Fiddler created. Keep in mind that when you uninstall you uninstall the certificate for both FiddlerCore and Fiddler, so use UninstallCertificate() with care and realize that you might affect the Fiddler application’s operation by doing so as well. When to check for an installed Certificate Note that the check to see if the root certificate exists is pretty fast, while the actual process of installing the certificate is a relatively slow operation that even on a fast machine takes a few seconds. Further the trust operation pops up a message box so you probably don’t want to install the certificate repeatedly. Since the check for the root certificate is fast, you can easily put a call to InstallCertificate() in any capture startup code – in which case the certificate installation only triggers when a certificate is in fact not installed. Personally I like to make certificate installation explicit – just like Fiddler does, so in WebSurge I use a small drop down option on the menu to install or uninstall the SSL certificate:   This code calls the InstallCertificate and UnInstallCertificate functions respectively – the experience with this is similar to what you get in Fiddler with the extra dialog box popping up to prompt confirmation for installation of the root certificate. Once the cert is installed you can then capture SSL requests. There’s a gotcha however… Gotcha: FiddlerCore Certificates don’t stick by Default When I originally tried to use the Fiddler certificate installation I ran into an odd problem. I was able to install the certificate and immediately after installation was able to capture HTTPS requests. Then I would exit the application and come back in and try the same HTTPS capture again and it would fail due to a missing certificate. CertMaker.rootCertExists() would return false after every restart and if re-installed the certificate a new certificate would get added to the certificate store resulting in a bunch of duplicated root certificates with different keys. What the heck? CertMaker and BcMakeCert create non-sticky CertificatesI turns out that FiddlerCore by default uses different components from what the full version of Fiddler uses. Fiddler uses a Windows utility called MakeCert.exe to create the Fiddler Root certificate. FiddlerCore however installs the CertMaker.dll and BCMakeCert.dll assemblies, which use a different crypto library (Bouncy Castle) for certificate creation than MakeCert.exe which uses the Windows Crypto API. The assemblies provide support for non-windows operation for Fiddler under Mono, as well as support for some non-Windows certificate platforms like iOS and Android for decryption. The bottom line is that the FiddlerCore provided bouncy castle assemblies are not sticky by default as the certificates created with them are not cached as they are in Fiddler proper. To get certificates to ‘stick’ you have to explicitly cache the certificates in Fiddler’s internal preferences. A cache aware version of InstallCertificate looks something like this:public static bool InstallCertificate() { if (!CertMaker.rootCertExists()) { if (!CertMaker.createRootCert()) return false; if (!CertMaker.trustRootCert()) return false; App.Configuration.UrlCapture.Cert = FiddlerApplication.Prefs.GetStringPref("fiddler.certmaker.bc.cert", null); App.Configuration.UrlCapture.Key = FiddlerApplication.Prefs.GetStringPref("fiddler.certmaker.bc.key", null); } return true; } public static bool UninstallCertificate() { if (CertMaker.rootCertExists()) { if (!CertMaker.removeFiddlerGeneratedCerts(true)) return false; } App.Configuration.UrlCapture.Cert = null; App.Configuration.UrlCapture.Key = null; return true; } In this code I store the Fiddler cert and private key in an application configuration settings that’s stored with the application settings (App.Configuration.UrlCapture object). These settings automatically persist when WebSurge is shut down. The values are read out of Fiddler’s internal preferences store which is set after a new certificate has been created. Likewise I clear out the configuration settings when the certificate is uninstalled. In order for these setting to be used you have to also load the configuration settings into the Fiddler preferences *before* a call to rootCertExists() is made. I do this in the capture form’s constructor:public FiddlerCapture(StressTestForm form) { InitializeComponent(); CaptureConfiguration = App.Configuration.UrlCapture; MainForm = form; if (!string.IsNullOrEmpty(App.Configuration.UrlCapture.Cert)) { FiddlerApplication.Prefs.SetStringPref("fiddler.certmaker.bc.key", App.Configuration.UrlCapture.Key); FiddlerApplication.Prefs.SetStringPref("fiddler.certmaker.bc.cert", App.Configuration.UrlCapture.Cert); }} This is kind of a drag to do and not documented anywhere that I could find, so hopefully this will save you some grief if you want to work with the stock certificate logic that installs with FiddlerCore. MakeCert provides sticky Certificates and the same functionality as Fiddler But there’s actually an easier way. If you want to skip the above Fiddler preference configuration code in your application you can choose to distribute MakeCert.exe instead of certmaker.dll and bcmakecert.dll. When you use MakeCert.exe, the certificates settings are stored in Windows so they are available without any custom configuration inside of your application. It’s easier to integrate and as long as you run on Windows and you don’t need to support iOS or Android devices is simply easier to deal with. To integrate into your project, you can remove the reference to CertMaker.dll (and the BcMakeCert.dll assembly) from your project. Instead copy MakeCert.exe into your output folder. To make sure MakeCert.exe gets pushed out, include MakeCert.exe in your project and set the Build Action to None, and Copy to Output Directory to Copy if newer. Note that the CertMaker.dll reference in the project has been removed and on disk the files for Certmaker.dll, as well as the BCMakeCert.dll files on disk. Keep in mind that these DLLs are resources of the FiddlerCore NuGet package, so updating the package may end up pushing those files back into your project. Once MakeCert.exe is distributed FiddlerCore checks for it first before using the assemblies so as long as MakeCert.exe exists it’ll be used for certificate creation (at least on Windows). Summary FiddlerCore is a pretty sweet tool, and it’s absolutely awesome that we get to plug in most of the functionality of Fiddler right into our own applications. A few years back I tried to build this sort of functionality myself for an app and ended up giving up because it’s a big job to get HTTP right – especially if you need to support SSL. FiddlerCore now provides that functionality as a turnkey solution that can be plugged into your own apps easily. The only downside is FiddlerCore’s documentation for more advanced features like certificate installation which is pretty sketchy. While for the most part FiddlerCore’s feature set is easy to work with without any documentation, advanced features are often not intuitive to gleam by just using Intellisense or the FiddlerCore help file reference (which is not terribly useful). While Eric Lawrence is very responsive on his forum and on Twitter, there simply isn’t much useful documentation on Fiddler/FiddlerCore available online. If you run into trouble the forum is probably the first place to look and then ask a question if you can’t find the answer. The best documentation you can find is Eric’s Fiddler Book which covers a ton of functionality of Fiddler and FiddlerCore. The book is a great reference to Fiddler’s feature set as well as providing great insights into the HTTP protocol. The second half of the book that gets into the innards of HTTP is an excellent read for anybody who wants to know more about some of the more arcane aspects and special behaviors of HTTP – it’s well worth the read. While the book has tons of information in a very readable format, it’s unfortunately not a great reference as it’s hard to find things in the book and because it’s not available online you can’t electronically search for the great content in it. But it’s hard to complain about any of this given the obvious effort and love that’s gone into this awesome product for all of these years. A mighty big thanks to Eric Lawrence  for having created this useful tool that so many of us use all the time, and also to Telerik for picking up Fiddler/FiddlerCore and providing Eric the resources to support and improve this wonderful tool full time and keeping it free for all. Kudos! Resources FiddlerCore Download FiddlerCore NuGet Fiddler Capture Sample Form Fiddler Capture Form in West Wind WebSurge (GitHub) Eric Lawrence’s Fiddler Book© Rick Strahl, West Wind Technologies, 2005-2014Posted in .NET  HTTP   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

  • Google PageSpeed, optimizing Google's own elements

    - by mowgli
    I'm trying Google's PageSpeed online service Ironically, it's primarily highlighting Google's own services as something that needs improvement on my site 1) jQuery from Google: blocking. So I moved all javascript from <head> to the end of the document before </body>. That helped 2) Linking to external Google Font CSS (in <head>): blocking. But the font is critical to the design of the page and should load before much else 3) Google Analytics: Caching is not good. (Google has set it internally to 2 hours expiration). Don't know how to change this (this is also placed at the bottom of page) The Google Font is highlighted as a big priority to change. How can I fix this? Where/how should I call the the font?

    Read the article

  • Install the Ajax Control Toolkit from NuGet

    - by Stephen Walther
    The Ajax Control Toolkit is now available from NuGet. This makes it super easy to add the latest version of the Ajax Control Toolkit to any Web Forms application. If you haven’t used NuGet yet, then you are missing out on a great tool which you can use with Visual Studio to add new features to an application. You can use NuGet with both ASP.NET MVC and ASP.NET Web Forms applications. NuGet is compatible with both Websites and Web Applications and it works with both C# and VB.NET applications. For example, I habitually use NuGet to add the latest version of ELMAH, Entity Framework, jQuery, jQuery UI, and jQuery Templates to applications that I create. To download NuGet, visit the NuGet website at: http://NuGet.org Imagine, for example, that you want to take advantage of the Ajax Control Toolkit RoundedCorners extender to create cross-browser compatible rounded corners in a Web Forms application. Follow these steps. Right click on your project in the Solution Explorer window and select the option Add Library Package Reference. In the Add Library Package Reference dialog, select the Online tab and enter AjaxControlToolkit in the search box: Click the Install button and the latest version of the Ajax Control Toolkit will be installed. Installing the Ajax Control Toolkit makes several modifications to your application. First, a reference to the Ajax Control Toolkit is added to your application. In a Web Application Project, you can see the new reference in the References folder: Installing the Ajax Control Toolkit NuGet package also updates your Web.config file. The tag prefix ajaxToolkit is registered so that you can easily use Ajax Control Toolkit controls within any page without adding a @Register directive to the page. <configuration> <system.web> <compilation debug="true" targetFramework="4.0" /> <pages> <controls> <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" /> </controls> </pages> </system.web> </configuration> You should do a rebuild of your application by selecting the Visual Studio menu option Build, Rebuild Solution so that Visual Studio picks up on the new controls (You won’t get Intellisense for the Ajax Control Toolkit controls until you do a build). After you add the Ajax Control Toolkit to your application, you can start using any of the 40 Ajax Control Toolkit controls in your application (see http://www.asp.net/ajax/ajaxcontroltoolkit/samples/ for a reference for the controls). <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> <!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>Rounded Corners</title> <style type="text/css"> #pnl1 { background-color: gray; width: 200px; color:White; font: 14pt Verdana; } #pnl1_contents { padding: 10px; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:Panel ID="pnl1" runat="server"> <div id="pnl1_contents"> I have rounded corners! </div> </asp:Panel> <ajaxToolkit:ToolkitScriptManager ID="sm1" runat="server" /> <ajaxToolkit:RoundedCornersExtender TargetControlID="pnl1" runat="server" /> </div> </form> </body> </html> The page contains the following three controls: Panel – The Panel control named pnl1 contains the content which appears with rounded corners. ToolkitScriptManager – Every page which uses the Ajax Control Toolkit must contain a single ToolkitScriptManager. The ToolkitScriptManager loads all of the JavaScript files used by the Ajax Control Toolkit. RoundedCornersExtender – This Ajax Control Toolkit extender targets the Panel control. It makes the Panel control appear with rounded corners. You can control the “roundiness” of the corners by modifying the Radius property. Notice that you get Intellisense when typing the Ajax Control Toolkit tags. As soon as you type <ajaxToolkit, all of the available Ajax Control Toolkit controls appear: When you open the page in a browser, then the contents of the Panel appears with rounded corners. The advantage of using the RoundedCorners extender is that it is cross-browser compatible. It works great with Internet Explorer, Opera, Firefox, Chrome, and Safari even though different browsers implement rounded corners in different ways. The RoundedCorners extender even works with an ancient browser such as Internet Explorer 6. Getting the Latest Version of the Ajax Control Toolkit The Ajax Control Toolkit continues to evolve at a rapid pace. We are hard at work at fixing bugs and adding new features to the project. We plan to have a new release of the Ajax Control Toolkit each month. The easiest way to get the latest version of the Ajax Control Toolkit is to use NuGet. You can open the NuGet Add Library Package Reference dialog at any time to update the Ajax Control Toolkit to the latest version.

    Read the article

  • Node.js Adventure - Host Node.js on Windows Azure Worker Role

    - by Shaun
    In my previous post I demonstrated about how to develop and deploy a Node.js application on Windows Azure Web Site (a.k.a. WAWS). WAWS is a new feature in Windows Azure platform. Since it’s low-cost, and it provides IIS and IISNode components so that we can host our Node.js application though Git, FTP and WebMatrix without any configuration and component installation. But sometimes we need to use the Windows Azure Cloud Service (a.k.a. WACS) and host our Node.js on worker role. Below are some benefits of using worker role. - WAWS leverages IIS and IISNode to host Node.js application, which runs in x86 WOW mode. It reduces the performance comparing with x64 in some cases. - WACS worker role does not need IIS, hence there’s no restriction of IIS, such as 8000 concurrent requests limitation. - WACS provides more flexibility and controls to the developers. For example, we can RDP to the virtual machines of our worker role instances. - WACS provides the service configuration features which can be changed when the role is running. - WACS provides more scaling capability than WAWS. In WAWS we can have at most 3 reserved instances per web site while in WACS we can have up to 20 instances in a subscription. - Since when using WACS worker role we starts the node by ourselves in a process, we can control the input, output and error stream. We can also control the version of Node.js.   Run Node.js in Worker Role Node.js can be started by just having its execution file. This means in Windows Azure, we can have a worker role with the “node.exe” and the Node.js source files, then start it in Run method of the worker role entry class. Let’s create a new windows azure project in Visual Studio and add a new worker role. Since we need our worker role execute the “node.exe” with our application code we need to add the “node.exe” into our project. Right click on the worker role project and add an existing item. By default the Node.js will be installed in the “Program Files\nodejs” folder so we can navigate there and add the “node.exe”. Then we need to create the entry code of Node.js. In WAWS the entry file must be named “server.js”, which is because it’s hosted by IIS and IISNode and IISNode only accept “server.js”. But here as we control everything we can choose any files as the entry code. For example, I created a new JavaScript file named “index.js” in project root. Since we created a C# Windows Azure project we cannot create a JavaScript file from the context menu “Add new item”. We have to create a text file, and then rename it to JavaScript extension. After we added these two files we should set their “Copy to Output Directory” property to “Copy Always”, or “Copy if Newer”. Otherwise they will not be involved in the package when deployed. Let’s paste a very simple Node.js code in the “index.js” as below. As you can see I created a web server listening at port 12345. 1: var http = require("http"); 2: var port = 12345; 3:  4: http.createServer(function (req, res) { 5: res.writeHead(200, { "Content-Type": "text/plain" }); 6: res.end("Hello World\n"); 7: }).listen(port); 8:  9: console.log("Server running at port %d", port); Then we need to start “node.exe” with this file when our worker role was started. This can be done in its Run method. I found the Node.js and entry JavaScript file name, and then create a new process to run it. Our worker role will wait for the process to be exited. If everything is OK once our web server was opened the process will be there listening for incoming requests, and should not be terminated. The code in worker role would be like this. 1: public override void Run() 2: { 3: // This is a sample worker implementation. Replace with your logic. 4: Trace.WriteLine("NodejsHost entry point called", "Information"); 5:  6: // retrieve the node.exe and entry node.js source code file name. 7: var node = Environment.ExpandEnvironmentVariables(@"%RoleRoot%\approot\node.exe"); 8: var js = "index.js"; 9:  10: // prepare the process starting of node.exe 11: var info = new ProcessStartInfo(node, js) 12: { 13: CreateNoWindow = false, 14: ErrorDialog = true, 15: WindowStyle = ProcessWindowStyle.Normal, 16: UseShellExecute = false, 17: WorkingDirectory = Environment.ExpandEnvironmentVariables(@"%RoleRoot%\approot") 18: }; 19: Trace.WriteLine(string.Format("{0} {1}", node, js), "Information"); 20:  21: // start the node.exe with entry code and wait for exit 22: var process = Process.Start(info); 23: process.WaitForExit(); 24: } Then we can run it locally. In the computer emulator UI the worker role started and it executed the Node.js, then Node.js windows appeared. Open the browser to verify the website hosted by our worker role. Next let’s deploy it to azure. But we need some additional steps. First, we need to create an input endpoint. By default there’s no endpoint defined in a worker role. So we will open the role property window in Visual Studio, create a new input TCP endpoint to the port we want our website to use. In this case I will use 80. Even though we created a web server we should add a TCP endpoint of the worker role, since Node.js always listen on TCP instead of HTTP. And then changed the “index.js”, let our web server listen on 80. 1: var http = require("http"); 2: var port = 80; 3:  4: http.createServer(function (req, res) { 5: res.writeHead(200, { "Content-Type": "text/plain" }); 6: res.end("Hello World\n"); 7: }).listen(port); 8:  9: console.log("Server running at port %d", port); Then publish it to Windows Azure. And then in browser we can see our Node.js website was running on WACS worker role. We may encounter an error if we tried to run our Node.js website on 80 port at local emulator. This is because the compute emulator registered 80 and map the 80 endpoint to 81. But our Node.js cannot detect this operation. So when it tried to listen on 80 it will failed since 80 have been used.   Use NPM Modules When we are using WAWS to host Node.js, we can simply install modules we need, and then just publish or upload all files to WAWS. But if we are using WACS worker role, we have to do some extra steps to make the modules work. Assuming that we plan to use “express” in our application. Firstly of all we should download and install this module through NPM command. But after the install finished, they are just in the disk but not included in the worker role project. If we deploy the worker role right now the module will not be packaged and uploaded to azure. Hence we need to add them to the project. On solution explorer window click the “Show all files” button, select the “node_modules” folder and in the context menu select “Include In Project”. But that not enough. We also need to make all files in this module to “Copy always” or “Copy if newer”, so that they can be uploaded to azure with the “node.exe” and “index.js”. This is painful step since there might be many files in a module. So I created a small tool which can update a C# project file, make its all items as “Copy always”. The code is very simple. 1: static void Main(string[] args) 2: { 3: if (args.Length < 1) 4: { 5: Console.WriteLine("Usage: copyallalways [project file]"); 6: return; 7: } 8:  9: var proj = args[0]; 10: File.Copy(proj, string.Format("{0}.bak", proj)); 11:  12: var xml = new XmlDocument(); 13: xml.Load(proj); 14: var nsManager = new XmlNamespaceManager(xml.NameTable); 15: nsManager.AddNamespace("pf", "http://schemas.microsoft.com/developer/msbuild/2003"); 16:  17: // add the output setting to copy always 18: var contentNodes = xml.SelectNodes("//pf:Project/pf:ItemGroup/pf:Content", nsManager); 19: UpdateNodes(contentNodes, xml, nsManager); 20: var noneNodes = xml.SelectNodes("//pf:Project/pf:ItemGroup/pf:None", nsManager); 21: UpdateNodes(noneNodes, xml, nsManager); 22: xml.Save(proj); 23:  24: // remove the namespace attributes 25: var content = xml.InnerXml.Replace("<CopyToOutputDirectory xmlns=\"\">", "<CopyToOutputDirectory>"); 26: xml.LoadXml(content); 27: xml.Save(proj); 28: } 29:  30: static void UpdateNodes(XmlNodeList nodes, XmlDocument xml, XmlNamespaceManager nsManager) 31: { 32: foreach (XmlNode node in nodes) 33: { 34: var copyToOutputDirectoryNode = node.SelectSingleNode("pf:CopyToOutputDirectory", nsManager); 35: if (copyToOutputDirectoryNode == null) 36: { 37: var n = xml.CreateNode(XmlNodeType.Element, "CopyToOutputDirectory", null); 38: n.InnerText = "Always"; 39: node.AppendChild(n); 40: } 41: else 42: { 43: if (string.Compare(copyToOutputDirectoryNode.InnerText, "Always", true) != 0) 44: { 45: copyToOutputDirectoryNode.InnerText = "Always"; 46: } 47: } 48: } 49: } Please be careful when use this tool. I created only for demo so do not use it directly in a production environment. Unload the worker role project, execute this tool with the worker role project file name as the command line argument, it will set all items as “Copy always”. Then reload this worker role project. Now let’s change the “index.js” to use express. 1: var express = require("express"); 2: var app = express(); 3:  4: var port = 80; 5:  6: app.configure(function () { 7: }); 8:  9: app.get("/", function (req, res) { 10: res.send("Hello Node.js!"); 11: }); 12:  13: app.get("/User/:id", function (req, res) { 14: var id = req.params.id; 15: res.json({ 16: "id": id, 17: "name": "user " + id, 18: "company": "IGT" 19: }); 20: }); 21:  22: app.listen(port); Finally let’s publish it and have a look in browser.   Use Windows Azure SQL Database We can use Windows Azure SQL Database (a.k.a. WACD) from Node.js as well on worker role hosting. Since we can control the version of Node.js, here we can use x64 version of “node-sqlserver” now. This is better than if we host Node.js on WAWS since it only support x86. Just install the “node-sqlserver” module from NPM, copy the “sqlserver.node” from “Build\Release” folder to “Lib” folder. Include them in worker role project and run my tool to make them to “Copy always”. Finally update the “index.js” to use WASD. 1: var express = require("express"); 2: var sql = require("node-sqlserver"); 3:  4: var connectionString = "Driver={SQL Server Native Client 10.0};Server=tcp:{SERVER NAME}.database.windows.net,1433;Database={DATABASE NAME};Uid={LOGIN}@{SERVER NAME};Pwd={PASSWORD};Encrypt=yes;Connection Timeout=30;"; 5: var port = 80; 6:  7: var app = express(); 8:  9: app.configure(function () { 10: app.use(express.bodyParser()); 11: }); 12:  13: app.get("/", function (req, res) { 14: sql.open(connectionString, function (err, conn) { 15: if (err) { 16: console.log(err); 17: res.send(500, "Cannot open connection."); 18: } 19: else { 20: conn.queryRaw("SELECT * FROM [Resource]", function (err, results) { 21: if (err) { 22: console.log(err); 23: res.send(500, "Cannot retrieve records."); 24: } 25: else { 26: res.json(results); 27: } 28: }); 29: } 30: }); 31: }); 32:  33: app.get("/text/:key/:culture", function (req, res) { 34: sql.open(connectionString, function (err, conn) { 35: if (err) { 36: console.log(err); 37: res.send(500, "Cannot open connection."); 38: } 39: else { 40: var key = req.params.key; 41: var culture = req.params.culture; 42: var command = "SELECT * FROM [Resource] WHERE [Key] = '" + key + "' AND [Culture] = '" + culture + "'"; 43: conn.queryRaw(command, function (err, results) { 44: if (err) { 45: console.log(err); 46: res.send(500, "Cannot retrieve records."); 47: } 48: else { 49: res.json(results); 50: } 51: }); 52: } 53: }); 54: }); 55:  56: app.get("/sproc/:key/:culture", function (req, res) { 57: sql.open(connectionString, function (err, conn) { 58: if (err) { 59: console.log(err); 60: res.send(500, "Cannot open connection."); 61: } 62: else { 63: var key = req.params.key; 64: var culture = req.params.culture; 65: var command = "EXEC GetItem '" + key + "', '" + culture + "'"; 66: conn.queryRaw(command, function (err, results) { 67: if (err) { 68: console.log(err); 69: res.send(500, "Cannot retrieve records."); 70: } 71: else { 72: res.json(results); 73: } 74: }); 75: } 76: }); 77: }); 78:  79: app.post("/new", function (req, res) { 80: var key = req.body.key; 81: var culture = req.body.culture; 82: var val = req.body.val; 83:  84: sql.open(connectionString, function (err, conn) { 85: if (err) { 86: console.log(err); 87: res.send(500, "Cannot open connection."); 88: } 89: else { 90: var command = "INSERT INTO [Resource] VALUES ('" + key + "', '" + culture + "', N'" + val + "')"; 91: conn.queryRaw(command, function (err, results) { 92: if (err) { 93: console.log(err); 94: res.send(500, "Cannot retrieve records."); 95: } 96: else { 97: res.send(200, "Inserted Successful"); 98: } 99: }); 100: } 101: }); 102: }); 103:  104: app.listen(port); Publish to azure and now we can see our Node.js is working with WASD through x64 version “node-sqlserver”.   Summary In this post I demonstrated how to host our Node.js in Windows Azure Cloud Service worker role. By using worker role we can control the version of Node.js, as well as the entry code. And it’s possible to do some pre jobs before the Node.js application started. It also removed the IIS and IISNode limitation. I personally recommended to use worker role as our Node.js hosting. But there are some problem if you use the approach I mentioned here. The first one is, we need to set all JavaScript files and module files as “Copy always” or “Copy if newer” manually. The second one is, in this way we cannot retrieve the cloud service configuration information. For example, we defined the endpoint in worker role property but we also specified the listening port in Node.js hardcoded. It should be changed that our Node.js can retrieve the endpoint. But I can tell you it won’t be working here. In the next post I will describe another way to execute the “node.exe” and Node.js application, so that we can get the cloud service configuration in Node.js. I will also demonstrate how to use Windows Azure Storage from Node.js by using the Windows Azure Node.js SDK.   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

  • Tips on Migrating from AquaLogic .NET Accelerator to WebCenter WSRP Producer for .NET

    - by user647124
    This year I embarked on a journey to migrate a group of ASP.NET web applications developed to integrate with WebLogic Portal 9.2 via the AquaLogic® Interaction .NET Application Accelerator 1.0 to instead use the Oracle WebCenter WSRP Producer for .NET and integrated with WebLogic Portal 10.3.4. It has been a very winding path and this blog entry is intended to share both the lessons learned and relevant approaches that led to those learnings. Like most journeys of discovery, it was not a direct path, and there are notes to let you know when it is practical to skip a section if you are in a hurry to get from here to there. For the Curious From the perspective of necessity, this section would be better at the end. If it were there, though, it would probably be read by far fewer people, including those that are actually interested in these types of sections. Those in a hurry may skip past and be none the worst for it in dealing with the hands-on bits of performing a migration from .NET Accelerator to WSRP Producer. For others who want to talk about why they did what they did after they did it, or just want to know for themselves, enjoy. A Brief (and edited) History of the WSRP for .NET Technologies (as Relevant to the this Post) Note: This section is for those who are curious about why the migration path is not as simple as many other Oracle technologies. You can skip this section in its entirety and still be just as competent in performing a migration as if you had read it. The currently deployed architecture that was to be migrated and upgraded achieved initial integration between .NET and J2EE over the WSRP protocol through the use of The AquaLogic Interaction .NET Application Accelerator. The .NET Accelerator allowed the applications that were written in ASP.NET and deployed on a Microsoft Internet Information Server (IIS) to interact with a WebLogic Portal application deployed on a WebLogic (J2EE application) Server (both version 9.2, the state of the art at the time of its creation). At the time this architectural decision for the application was made, both the AquaLogic and WebLogic brands were owned by BEA Systems. The AquaLogic brand included products acquired by BEA through the acquisition of Plumtree, whose flagship product was a portal platform available in both J2EE and .NET versions. As part of this dual technology support an adaptor was created to facilitate the use of WSRP as a communication protocol where customers wished to integrate components from both versions of the Plumtree portal. The adapter evolved over several product generations to include a broad array of both standard and proprietary WSRP integration capabilities. Later, BEA Systems was acquired by Oracle. Over the course of several years Oracle has acquired a large number of portal applications and has taken the strategic direction to migrate users of these myriad (and formerly competitive) products to the Oracle WebCenter technology stack. As part of Oracle’s strategic technology roadmap, older portal products are being schedule for end of life, including the portal products that were part of the BEA acquisition. The .NET Accelerator has been modified over a very long period of time with features driven by users of that product and developed under three different vendors (each a direct competitor in the same solution space prior to merger). The Oracle WebCenter WSRP Producer for .NET was introduced much more recently with the key objective to specifically address the needs of the WebCenter customers developing solutions accessible through both J2EE and .NET platforms utilizing the WSRP specifications. The Oracle Product Development Team also provides these insights on the drivers for developing the WSRP Producer: ***************************************** Support for ASP.NET AJAX. Controls using the ASP.NET AJAX script manager do not function properly in the Application Accelerator for .NET. Support 2 way SSL in WLP. This was not possible with the proxy/bridge set up in the existing Application Accelerator for .NET. Allow developers to code portlets (Web Parts) using the .NET framework rather than a proprietary framework. Developers had to use the Application Accelerator for .NET plug-ins to Visual Studio to manage preferences and profile data. This is now replaced with the .NET Framework Personalization (for preferences) and Profile providers. The WSRP Producer for .NET was created as a new way of developing .NET portlets. It was never designed to be an upgrade path for the Application Accelerator for .NET. .NET developers would create new .NET portlets with the WSRP Producer for .NET and leave any existing .NET portlets running in the Application Accelerator for .NET. ***************************************** The advantage to creating a new solution for WSRP is a product that is far easier for Oracle to maintain and support which in turn improves quality, reliability and maintainability for their customers. No changes to J2EE applications consuming the WSRP portlets previously rendered by the.NET Accelerator is required to migrate from the Aqualogic WSRP solution. For some customers using the .NET Accelerator the challenge is adapting their current .NET applications to work with the WSRP Producer (or any other WSRP adapter as they are proprietary by nature). Part of this adaptation is the need to deploy the .NET applications as a child to the WSRP producer web application as root. Differences between .NET Accelerator and WSRP Producer Note: This section is for those who are curious about why the migration is not as pluggable as something such as changing security providers in WebLogic Server. You can skip this section in its entirety and still be just as competent in performing a migration as if you had read it. The basic terminology used to describe the participating applications in a WSRP environment are the same when applied to either the .NET Accelerator or the WSRP Producer: Producer and Consumer. In both cases the .NET application serves as what is referred to as a WSRP environment as the Producer. The difference lies in how the two adapters create the WSRP translation of the .NET application. The .NET Accelerator, as the name implies, is meant to serve as a quick way of adding WSRP capability to a .NET application. As such, at a high level, the .NET Accelerator behaves as a proxy for requests between the .NET application and the WSRP Consumer. A WSRP request is sent from the consumer to the .NET Accelerator, the.NET Accelerator transforms this request into an ASP.NET request, receives the response, then transforms the response into a WSRP response. The .NET Accelerator is deployed as a stand-alone application on IIS. The WSRP Producer is deployed as a parent application on IIS and all ASP.NET modules that will be made available over WSRP are deployed as children of the WSRP Producer application. In this manner, the WSRP Producer acts more as a Request Filter than a proxy in the WSRP transactions between Producer and Consumer. Highly Recommended Enabling Logging Note: You can skip this section now, but you will most likely want to come back to it later, so why not just read it now? Logging is very helpful in tracking down the causes of any anomalies during testing of migrated portlets. To enable the WSRP Producer logging, update the Application_Start method in the Global.asax.cs for your .NET application by adding log4net.Config.XmlConfigurator.Configure(); IIS logs will usually (in a standard configuration) be in a sub folder under C:\WINDOWS\system32\LogFiles\W3SVC. WSRP Producer logs will be found at C:\Oracle\Middleware\WSRPProducerForDotNet\wsrpdefault\Logs\WSRPProducer.log InputTrace.webinfo and OutputTrace.webinfo are located under C:\Oracle\Middleware\WSRPProducerForDotNet\wsrpdefault and can be useful in debugging issues related to markup transformations. Things You Must Do Merge Web.Config Note: If you have been skipping all the sections that you can, now is the time to stop and pay attention J Because the existing .NET application will become a sub-application to the WSRP Producer, you will want to merge required settings from the existing Web.Config to the one in the WSRP Producer. Use the WSRP Producer Master Page The Master Page installed for the WSRP Producer provides common, hiddenform fields and JavaScripts to facilitate portlet instance management and display configuration when the child page is being rendered over WSRP. You add the Master Page by including it in the <@ Page declaration with MasterPageFile="~/portlets/Resources/MasterPages/WSRP.Master" . You then replace: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> With <asp:Content ID="ContentHead1" ContentPlaceHolderID="wsrphead" Runat="Server"> And </HEAD> <body> <form id="theForm" method="post" runat="server"> With </asp:Content> <asp:Content ID="ContentBody1" ContentPlaceHolderID="Main" Runat="Server"> And finally </form> </body> </HTML> With </asp:Content> In the event you already use Master Pages, adapt your existing Master Pages to be sub masters. See Nested ASP.NET Master Pages for a detailed reference of how to do this. It Happened to Me, It Might Happen to You…Or Not Watch for Use of Session or Request in OnInit In the event the .NET application being modified has pages developed to assume the user has been authenticated in an earlier page request there may be direct or indirect references in the OnInit method to request or session objects that may not have been created yet. This will vary from application to application, so the recommended approach is to test first. If there is an issue with a page running as a WSRP portlet then check for potential references in the OnInit method (including references by methods called within OnInit) to session or request objects. If there are, the simplest solution is to create a new method and then call that method once the necessary object(s) is fully available. I find doing this at the start of the Page_Load method to be the simplest solution. Case Sensitivity .NET languages are not case sensitive, but Java is. This means it is possible to have many variations of SRC= and src= or .JPG and .jpg. The preferred solution is to make these mark up instances all lower case in your .NET application. This will allow the default Rewriter rules in wsrp-producer.xml to work as is. If this is not practical, then make duplicates of any rules where an issue is occurring due to upper or mixed case usage in the .NET application markup and match the case in use with the duplicate rule. For example: <RewriterRule> <LookFor>(href=\"([^\"]+)</LookFor> <ChangeToAbsolute>true</ChangeToAbsolute> <ApplyTo>.axd,.css</ApplyTo> <MakeResource>true</MakeResource> </RewriterRule> May need to be duplicated as: <RewriterRule> <LookFor>(HREF=\"([^\"]+)</LookFor> <ChangeToAbsolute>true</ChangeToAbsolute> <ApplyTo>.axd,.css</ApplyTo> <MakeResource>true</MakeResource> </RewriterRule> While it is possible to write a regular expression that will handle mixed case usage, it would be long and strenous to test and maintain, so the recommendation is to use duplicate rules. Is it Still Relative? Some .NET applications base relative paths with a fixed root location. With the introduction of the WSRP Producer, the root has moved up one level. References to ~/ will need to be updated to ~/portlets and many ../ paths will need another ../ in front. I Can See You But I Can’t Find You This issue was first discovered while debugging modules with code that referenced the form on a page from the code-behind by name and/or id. The initial error presented itself as run-time error that was difficult to interpret over WSRP but seemed clear when run as straight ASP.NET as it indicated that the object with the form name did not exist. Since the form name was no longer valid after implementing the WSRP Master Page, the likely fix seemed to simply update the references in the code. However, as the WSRP Master Page is external to the code, a compile time error resulted: Error      155         The name 'form1' does not exist in the current context                C:\Oracle\Middleware\WSRPProducerForDotNet\wsrpdefault\portlets\legacywebsite\module\Screens \Reporting.aspx.cs                51           52           legacywebsite.module Much hair-pulling research later it was discovered that it was the use of the FindControl method causing the issue. FindControl doesn’t work quite as expected once a Master Page has been introduced as the controls become embedded in controls, require a recursion to find them that is not part of the FindControl method. In code where the page form is referenced by name, there are two steps to the solution. First, the form needs to be referenced in code generically with Page.Form. For example, this: ToggleControl ctrl = new ToggleControl(frmManualEntry, FunctionLibrary.ParseArrayLst(userObj.Roles)); Becomes this: ToggleControl ctrl = new ToggleControl(Page.Form, FunctionLibrary.ParseArrayLst(userObj.Roles)); Generally the form id is referenced in most ASP.NET applications as a path to a control on the form. To reach the control once a MasterPage has been added requires an additional method to recurse through the controls collections within the form and find the control ID. The following method (found at Rick Strahl's Web Log) corrects this very nicely: public static Control FindControlRecursive(Control Root, string Id) { if (Root.ID == Id) return Root; foreach (Control Ctl in Root.Controls) { Control FoundCtl = FindControlRecursive(Ctl, Id); if (FoundCtl != null) return FoundCtl; } return null; } Where the form name is not referenced, simply using the FindControlRecursive method in place of FindControl will be all that is necessary. Following the second part of the example referenced earlier, the method called with Page.Form changes its value extraction code block from this: Label lblErrMsg = (Label)frmRef.FindControl("lblBRMsg" To this: Label lblErrMsg = (Label) FunctionLibrary.FindControlRecursive(frmRef, "lblBRMsg" The Master That Won’t Step Aside In most migrations it is preferable to make as few changes as possible. In one case I ran across an existing Master Page that would not function as a sub-Master Page. While it would probably have been educational to trace down why, the expedient process of updating it to take the place of the WSRP Master Page is the route I took. The changes are highlighted below: … <asp:ContentPlaceHolder ID="wsrphead" runat="server"></asp:ContentPlaceHolder> </head> <body leftMargin="0" topMargin="0"> <form id="TheForm" runat="server"> <input type="hidden" name="key" id="key" value="" /> <input type="hidden" name="formactionurl" id="formactionurl" value="" /> <input type="hidden" name="handle" id="handle" value="" /> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" > </asp:ScriptManager> This approach did not work for all existing Master Pages, but fortunately all of the other existing Master Pages I have run across worked fine as a sub-Master to the WSRP Master Page. Moving On In Enterprise Portals, even after you get everything working, the work is not finished. Next you need to get it where everyone will work with it. Migration Planning Providing that the server where IIS is running is adequately sized, it is possible to run both the .NET Accelerator and the WSRP Producer on the same server during the upgrade process. The upgrade can be performed incrementally, i.e., one portlet at a time, if server administration processes support it. Those processes would include the ability to manage a second producer in the consuming portal and to change over individual portlet instances from one provider to the other. If processes or requirements demand that all portlets be cut over at the same time, it needs to be determined if this cut over should include a new producer, updating all of the portlets in the consumer, or if the WSRP Producer portlet configuration must maintain the naming conventions used by the .NET Accelerator and simply change the WSRP end point configured in the consumer. In some enterprises it may even be necessary to maintain the same WSDL end point, at which point the IIS configuration will be where the updates occur. The downside to such a requirement is that it makes rolling back very difficult, should the need arise. Location, Location, Location Not everyone wants the web application to have the descriptively obvious wsrpdefault location, or needs to create a second WSRP site on the same server. The instructions below are from the product team and, while targeted towards making a second site, will work for creating a site with a different name and then remove the old site. You can also change just the name in IIS. Manually Creating a WSRP Producer Site Instructions (NOTE: all executables used are the same ones used by the installer and “wsrpdev” will be the name of the new instance): 1. Copy C:\Oracle\Middleware\WSRPProducerForDotNet\wsrpdefault to C:\Oracle\Middleware\WSRPProducerForDotNet\wsrpdev. 2. Bring up a command window as an administrator 3. Run C:\Oracle\Middleware\WSRPProducerForDotNet\uninstall_resources\IISAppAccelSiteCreator.exe install WSRPProducers wsrpdev "C:\Oracle\Middleware\WSRPProducerForDotNet\wsrpdev" 8678 2.0.50727 4. Run C:\Oracle\Middleware\WSRPProducerForDotNet\uninstall_resources\PermManage.exe add FileSystem C:\Oracle\Middleware\WSRPProducerForDotNet\wsrpdev "NETWORK SERVICE" 3 1 5. Run C:\Oracle\Middleware\WSRPProducerForDotNet\uninstall_resources\PermManage.exe add FileSystem C:\Oracle\Middleware\WSRPProducerForDotNet\wsrpdev EVERYONE 1 1 6. Open up C:\Oracle\Middleware\WSRPProducerForDotNet\wsdl\1.0\WSRPService.wsdl and replace wsrpdefault with wsrpdev 7. Open up C:\Oracle\Middleware\WSRPProducerForDotNet\wsdl\2.0\WSRPService.wsdl and replace wsrpdefault with wsrpdev Tests: 1. Bring up a browser on the host itself and go to http://localhost:8678/wsrpdev/wsdl/1.0/WSRPService.wsdl and make sure that the URLs in the XML returned include the wsrpdev changes you made in step 6. 2. Bring up a browser on the host itself and see if the default sample comes up: http://localhost:8678/wsrpdev/portlets/ASPNET_AJAX_sample/default.aspx 3. Register the producer in WLP and test the portlet. Changing the Port used by WSRP Producer The pre-configured port for the WSRP Producer is 8678. You can change this port by updating both the IIS configuration and C:\Oracle\Middleware\WSRPProducerForDotNet\[WSRP_APP_NAME]\wsdl\1.0\WSRPService.wsdl. Do You Need to Migrate? Oracle Premier Support ended in November of 2010 for AquaLogic Interaction .NET Application Accelerator 1.x and Extended Support ends in November 2012 (see http://www.oracle.com/us/support/lifetime-support/lifetime-support-software-342730.html for other related dates). This means that integration with products released after November of 2010 is not supported. If having such support is the policy within your enterprise, you do indeed need to migrate. If changes in your enterprise cause your current solution with the .NET Accelerator to no longer function properly, you may need to migrate. Migration is a choice, and if the goals of your enterprise are to take full advantage of newer technologies then migration is certainly one activity you should be planning for.

    Read the article

  • Getting a Web Resource Url in non WebForms Applications

    - by Rick Strahl
    WebResources in ASP.NET are pretty useful feature. WebResources are resources that are embedded into a .NET assembly and can be loaded from the assembly via a special resource URL. WebForms includes a method on the ClientScriptManager (Page.ClientScript) and the ScriptManager object to retrieve URLs to these resources. For example you can do: ClientScript.GetWebResourceUrl(typeof(ControlResources), ControlResources.JQUERY_SCRIPT_RESOURCE); GetWebResourceUrl requires a type (which is used for the assembly lookup in which to find the resource) and the resource id to lookup. GetWebResourceUrl() then returns a nasty old long URL like this: WebResource.axd?d=-b6oWzgbpGb8uTaHDrCMv59VSmGhilZP5_T_B8anpGx7X-PmW_1eu1KoHDvox-XHqA1EEb-Tl2YAP3bBeebGN65tv-7-yAimtG4ZnoWH633pExpJor8Qp1aKbk-KQWSoNfRC7rQJHXVP4tC0reYzVw2&t=634533278261362212 While lately excessive resource usage has been frowned upon especially by MVC developers who tend to opt for content distributed as files, I still think that Web Resources have their place even in non-WebForms applications. Also if you have existing assemblies that include resources like scripts and common image links it sure would be nice to access them from non-WebForms pages like MVC views or even in plain old Razor Web Pages. Where's my Page object Dude? Unfortunately natively ASP.NET doesn't have a mechanism for retrieving WebResource Urls outside of the WebForms engine. It's a feature that's specifically baked into WebForms and that relies specifically on the Page HttpHandler implementation. Both Page.ClientScript (obviously) and ScriptManager rely on a hosting Page object in order to work and the various methods off these objects require control instances passed. The reason for this is that the script managers can inject scripts and links into Page content (think RegisterXXXX methods) and for that a Page instance is required. However, for many other methods - like GetWebResourceUrl() - that simply return resources or resource links the Page reference is really irrelevant. While there's a separate ClientScriptManager class, it's marked as sealed and doesn't have any public constructors so you can't create your own instance (without Reflection). Even if it did the internal constructor it does have requires a Page reference. No good… So, can we get access to a WebResourceUrl generically without running in a WebForms Page instance? We just have to create a Page instance ourselves and use it internally. There's nothing intrinsic about the use of the Page class in ClientScript, at least for retrieving resources and resource Urls so it's easy to create an instance of a Page for example in a static method. For our needs of retrieving ResourceUrls or even actually retrieving script resources we can use a canned, non-configured Page instance we create on our own. The following works just fine: public static string GetWebResourceUrl(Type type, string resource ) { Page page = new Page(); return page.ClientScript.GetWebResourceUrl(type, resource); } A slight optimization for this might be to cache the created Page instance. Page tends to be a pretty heavy object to create each time a URL is required so you might want to cache the instance: public class WebUtils { private static Page CachedPage { get { if (_CachedPage == null) _CachedPage = new Page(); return _CachedPage; } } private static Page _CachedPage; public static string GetWebResourceUrl(Type type, string resource) { return CachedPage.ClientScript.GetWebResourceUrl(type, resource); } } You can now use GetWebResourceUrl in a Razor page like this: <!DOCTYPE html> <html <head> <script src="@WebUtils.GetWebResourceUrl(typeof(ControlResources),ControlResources.JQUERY_SCRIPT_RESOURCE)"> </script> </head> <body> <div class="errordisplay"> <img src="@WebUtils.GetWebResourceUrl(typeof(ControlResources),ControlResources.WARNING_ICON_RESOURCE)" /> This is only a Test! </div> </body> </html> And voila - there you have WebResources served from a non-Page based application. WebResources may be a on the way out, but legacy apps have them embedded and for some situations, like fallback scripts and some common image resources I still like to use them. Being able to use them from non-WebForms applications should have been built into the core ASP.NETplatform IMHO, but seeing that it's not this workaround is easy enough to implement.© Rick Strahl, West Wind Technologies, 2005-2011Posted in ASP.NET  MVC   Tweet (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

  • Help with Collision Resolution?

    - by Milo
    I'm trying to learn about physics by trying to make a simplified GTA 2 clone. My only problem is collision resolution. Everything else works great. I have a rigid body class and from there cars and a wheel class: class RigidBody extends Entity { //linear private Vector2D velocity = new Vector2D(); private Vector2D forces = new Vector2D(); private OBB2D predictionRect = new OBB2D(new Vector2D(), 1.0f, 1.0f, 0.0f); private float mass; private Vector2D deltaVec = new Vector2D(); private Vector2D v = new Vector2D(); //angular private float angularVelocity; private float torque; private float inertia; //graphical private Vector2D halfSize = new Vector2D(); private Bitmap image; private Matrix mat = new Matrix(); private float[] Vector2Ds = new float[2]; private Vector2D tangent = new Vector2D(); private static Vector2D worldRelVec = new Vector2D(); private static Vector2D relWorldVec = new Vector2D(); private static Vector2D pointVelVec = new Vector2D(); public RigidBody() { //set these defaults so we don't get divide by zeros mass = 1.0f; inertia = 1.0f; setLayer(LAYER_OBJECTS); } protected void rectChanged() { if(getWorld() != null) { getWorld().updateDynamic(this); } } //intialize out parameters public void initialize(Vector2D halfSize, float mass, Bitmap bitmap) { //store physical parameters this.halfSize = halfSize; this.mass = mass; image = bitmap; inertia = (1.0f / 20.0f) * (halfSize.x * halfSize.x) * (halfSize.y * halfSize.y) * mass; RectF rect = new RectF(); float scalar = 10.0f; rect.left = (int)-halfSize.x * scalar; rect.top = (int)-halfSize.y * scalar; rect.right = rect.left + (int)(halfSize.x * 2.0f * scalar); rect.bottom = rect.top + (int)(halfSize.y * 2.0f * scalar); setRect(rect); predictionRect.set(rect); } public void setLocation(Vector2D position, float angle) { getRect().set(position, getWidth(), getHeight(), angle); rectChanged(); } public void setPredictionLocation(Vector2D position, float angle) { getPredictionRect().set(position, getWidth(), getHeight(), angle); } public void setPredictionCenter(Vector2D center) { getPredictionRect().moveTo(center); } public void setPredictionAngle(float angle) { predictionRect.setAngle(angle); } public Vector2D getPosition() { return getRect().getCenter(); } public OBB2D getPredictionRect() { return predictionRect; } @Override public void update(float timeStep) { doUpdate(false,timeStep); } public void doUpdate(boolean prediction, float timeStep) { //integrate physics //linear Vector2D acceleration = Vector2D.scalarDivide(forces, mass); if(prediction) { Vector2D velocity = Vector2D.add(this.velocity, Vector2D.scalarMultiply(acceleration, timeStep)); Vector2D c = getRect().getCenter(); c = Vector2D.add(getRect().getCenter(), Vector2D.scalarMultiply(velocity , timeStep)); setPredictionCenter(c); //forces = new Vector2D(0,0); //clear forces } else { velocity.x += (acceleration.x * timeStep); velocity.y += (acceleration.y * timeStep); //velocity = Vector2D.add(velocity, Vector2D.scalarMultiply(acceleration, timeStep)); Vector2D c = getRect().getCenter(); v.x = getRect().getCenter().getX() + (velocity.x * timeStep); v.y = getRect().getCenter().getY() + (velocity.y * timeStep); deltaVec.x = v.x - c.x; deltaVec.y = v.y - c.y; deltaVec.normalize(); setCenter(v.x, v.y); forces.x = 0; //clear forces forces.y = 0; } //angular float angAcc = torque / inertia; if(prediction) { float angularVelocity = this.angularVelocity + angAcc * timeStep; setPredictionAngle(getAngle() + angularVelocity * timeStep); //torque = 0; //clear torque } else { angularVelocity += angAcc * timeStep; setAngle(getAngle() + angularVelocity * timeStep); torque = 0; //clear torque } } public void updatePrediction(float timeStep) { doUpdate(true, timeStep); } //take a relative Vector2D and make it a world Vector2D public Vector2D relativeToWorld(Vector2D relative) { mat.reset(); Vector2Ds[0] = relative.x; Vector2Ds[1] = relative.y; mat.postRotate(JMath.radToDeg(getAngle())); mat.mapVectors(Vector2Ds); relWorldVec.x = Vector2Ds[0]; relWorldVec.y = Vector2Ds[1]; return new Vector2D(Vector2Ds[0], Vector2Ds[1]); } //take a world Vector2D and make it a relative Vector2D public Vector2D worldToRelative(Vector2D world) { mat.reset(); Vector2Ds[0] = world.x; Vector2Ds[1] = world.y; mat.postRotate(JMath.radToDeg(-getAngle())); mat.mapVectors(Vector2Ds); return new Vector2D(Vector2Ds[0], Vector2Ds[1]); } //velocity of a point on body public Vector2D pointVelocity(Vector2D worldOffset) { tangent.x = -worldOffset.y; tangent.y = worldOffset.x; return Vector2D.add( Vector2D.scalarMultiply(tangent, angularVelocity) , velocity); } public void applyForce(Vector2D worldForce, Vector2D worldOffset) { //add linear force forces.x += worldForce.x; forces.y += worldForce.y; //add associated torque torque += Vector2D.cross(worldOffset, worldForce); } @Override public void draw( GraphicsContext c) { c.drawRotatedScaledBitmap(image, getPosition().x, getPosition().y, getWidth(), getHeight(), getAngle()); } public Vector2D getVelocity() { return velocity; } public void setVelocity(Vector2D velocity) { this.velocity = velocity; } public Vector2D getDeltaVec() { return deltaVec; } } Vehicle public class Wheel { private Vector2D forwardVec; private Vector2D sideVec; private float wheelTorque; private float wheelSpeed; private float wheelInertia; private float wheelRadius; private Vector2D position = new Vector2D(); public Wheel(Vector2D position, float radius) { this.position = position; setSteeringAngle(0); wheelSpeed = 0; wheelRadius = radius; wheelInertia = (radius * radius) * 1.1f; } public void setSteeringAngle(float newAngle) { Matrix mat = new Matrix(); float []vecArray = new float[4]; //forward Vector vecArray[0] = 0; vecArray[1] = 1; //side Vector vecArray[2] = -1; vecArray[3] = 0; mat.postRotate(newAngle / (float)Math.PI * 180.0f); mat.mapVectors(vecArray); forwardVec = new Vector2D(vecArray[0], vecArray[1]); sideVec = new Vector2D(vecArray[2], vecArray[3]); } public void addTransmissionTorque(float newValue) { wheelTorque += newValue; } public float getWheelSpeed() { return wheelSpeed; } public Vector2D getAnchorPoint() { return position; } public Vector2D calculateForce(Vector2D relativeGroundSpeed, float timeStep, boolean prediction) { //calculate speed of tire patch at ground Vector2D patchSpeed = Vector2D.scalarMultiply(Vector2D.scalarMultiply( Vector2D.negative(forwardVec), wheelSpeed), wheelRadius); //get velocity difference between ground and patch Vector2D velDifference = Vector2D.add(relativeGroundSpeed , patchSpeed); //project ground speed onto side axis Float forwardMag = new Float(0.0f); Vector2D sideVel = velDifference.project(sideVec); Vector2D forwardVel = velDifference.project(forwardVec, forwardMag); //calculate super fake friction forces //calculate response force Vector2D responseForce = Vector2D.scalarMultiply(Vector2D.negative(sideVel), 2.0f); responseForce = Vector2D.subtract(responseForce, forwardVel); float topSpeed = 500.0f; //calculate torque on wheel wheelTorque += forwardMag * wheelRadius; //integrate total torque into wheel wheelSpeed += wheelTorque / wheelInertia * timeStep; //top speed limit (kind of a hack) if(wheelSpeed > topSpeed) { wheelSpeed = topSpeed; } //clear our transmission torque accumulator wheelTorque = 0; //return force acting on body return responseForce; } public void setTransmissionTorque(float newValue) { wheelTorque = newValue; } public float getTransmissionTourque() { return wheelTorque; } public void setWheelSpeed(float speed) { wheelSpeed = speed; } } //our vehicle object public class Vehicle extends RigidBody { private Wheel [] wheels = new Wheel[4]; private boolean throttled = false; public void initialize(Vector2D halfSize, float mass, Bitmap bitmap) { //front wheels wheels[0] = new Wheel(new Vector2D(halfSize.x, halfSize.y), 0.45f); wheels[1] = new Wheel(new Vector2D(-halfSize.x, halfSize.y), 0.45f); //rear wheels wheels[2] = new Wheel(new Vector2D(halfSize.x, -halfSize.y), 0.75f); wheels[3] = new Wheel(new Vector2D(-halfSize.x, -halfSize.y), 0.75f); super.initialize(halfSize, mass, bitmap); } public void setSteering(float steering) { float steeringLock = 0.13f; //apply steering angle to front wheels wheels[0].setSteeringAngle(steering * steeringLock); wheels[1].setSteeringAngle(steering * steeringLock); } public void setThrottle(float throttle, boolean allWheel) { float torque = 85.0f; throttled = true; //apply transmission torque to back wheels if (allWheel) { wheels[0].addTransmissionTorque(throttle * torque); wheels[1].addTransmissionTorque(throttle * torque); } wheels[2].addTransmissionTorque(throttle * torque); wheels[3].addTransmissionTorque(throttle * torque); } public void setBrakes(float brakes) { float brakeTorque = 15.0f; //apply brake torque opposing wheel vel for (Wheel wheel : wheels) { float wheelVel = wheel.getWheelSpeed(); wheel.addTransmissionTorque(-wheelVel * brakeTorque * brakes); } } public void doUpdate(float timeStep, boolean prediction) { for (Wheel wheel : wheels) { float wheelVel = wheel.getWheelSpeed(); //apply negative force to naturally slow down car if(!throttled && !prediction) wheel.addTransmissionTorque(-wheelVel * 0.11f); Vector2D worldWheelOffset = relativeToWorld(wheel.getAnchorPoint()); Vector2D worldGroundVel = pointVelocity(worldWheelOffset); Vector2D relativeGroundSpeed = worldToRelative(worldGroundVel); Vector2D relativeResponseForce = wheel.calculateForce(relativeGroundSpeed, timeStep,prediction); Vector2D worldResponseForce = relativeToWorld(relativeResponseForce); applyForce(worldResponseForce, worldWheelOffset); } //no throttling yet this frame throttled = false; if(prediction) { super.updatePrediction(timeStep); } else { super.update(timeStep); } } @Override public void update(float timeStep) { doUpdate(timeStep,false); } public void updatePrediction(float timeStep) { doUpdate(timeStep,true); } public void inverseThrottle() { float scalar = 0.2f; for(Wheel wheel : wheels) { wheel.setTransmissionTorque(-wheel.getTransmissionTourque() * scalar); wheel.setWheelSpeed(-wheel.getWheelSpeed() * 0.1f); } } } And my big hack collision resolution: private void update() { camera.setPosition((vehicle.getPosition().x * camera.getScale()) - ((getWidth() ) / 2.0f), (vehicle.getPosition().y * camera.getScale()) - ((getHeight() ) / 2.0f)); //camera.move(input.getAnalogStick().getStickValueX() * 15.0f, input.getAnalogStick().getStickValueY() * 15.0f); if(input.isPressed(ControlButton.BUTTON_GAS)) { vehicle.setThrottle(1.0f, false); } if(input.isPressed(ControlButton.BUTTON_STEAL_CAR)) { vehicle.setThrottle(-1.0f, false); } if(input.isPressed(ControlButton.BUTTON_BRAKE)) { vehicle.setBrakes(1.0f); } vehicle.setSteering(input.getAnalogStick().getStickValueX()); //vehicle.update(16.6666666f / 1000.0f); boolean colided = false; vehicle.updatePrediction(16.66666f / 1000.0f); List<Entity> buildings = world.queryStaticSolid(vehicle,vehicle.getPredictionRect()); if(buildings.size() > 0) { colided = true; } if(!colided) { vehicle.update(16.66f / 1000.0f); } else { Vector2D delta = vehicle.getDeltaVec(); vehicle.setVelocity(Vector2D.negative(vehicle.getVelocity().multiply(0.2f)). add(delta.multiply(-1.0f))); vehicle.inverseThrottle(); } } Here is OBB public class OBB2D { // Corners of the box, where 0 is the lower left. private Vector2D corner[] = new Vector2D[4]; private Vector2D center = new Vector2D(); private Vector2D extents = new Vector2D(); private RectF boundingRect = new RectF(); private float angle; //Two edges of the box extended away from corner[0]. private Vector2D axis[] = new Vector2D[2]; private double origin[] = new double[2]; public OBB2D(Vector2D center, float w, float h, float angle) { set(center,w,h,angle); } public OBB2D(float left, float top, float width, float height) { set(new Vector2D(left + (width / 2), top + (height / 2)),width,height,0.0f); } public void set(Vector2D center,float w, float h,float angle) { Vector2D X = new Vector2D( (float)Math.cos(angle), (float)Math.sin(angle)); Vector2D Y = new Vector2D((float)-Math.sin(angle), (float)Math.cos(angle)); X = X.multiply( w / 2); Y = Y.multiply( h / 2); corner[0] = center.subtract(X).subtract(Y); corner[1] = center.add(X).subtract(Y); corner[2] = center.add(X).add(Y); corner[3] = center.subtract(X).add(Y); computeAxes(); extents.x = w / 2; extents.y = h / 2; computeDimensions(center,angle); } private void computeDimensions(Vector2D center,float angle) { this.center.x = center.x; this.center.y = center.y; this.angle = angle; boundingRect.left = Math.min(Math.min(corner[0].x, corner[3].x), Math.min(corner[1].x, corner[2].x)); boundingRect.top = Math.min(Math.min(corner[0].y, corner[1].y),Math.min(corner[2].y, corner[3].y)); boundingRect.right = Math.max(Math.max(corner[1].x, corner[2].x), Math.max(corner[0].x, corner[3].x)); boundingRect.bottom = Math.max(Math.max(corner[2].y, corner[3].y),Math.max(corner[0].y, corner[1].y)); } public void set(RectF rect) { set(new Vector2D(rect.centerX(),rect.centerY()),rect.width(),rect.height(),0.0f); } // Returns true if other overlaps one dimension of this. private boolean overlaps1Way(OBB2D other) { for (int a = 0; a < axis.length; ++a) { double t = other.corner[0].dot(axis[a]); // Find the extent of box 2 on axis a double tMin = t; double tMax = t; for (int c = 1; c < corner.length; ++c) { t = other.corner[c].dot(axis[a]); if (t < tMin) { tMin = t; } else if (t > tMax) { tMax = t; } } // We have to subtract off the origin // See if [tMin, tMax] intersects [0, 1] if ((tMin > 1 + origin[a]) || (tMax < origin[a])) { // There was no intersection along this dimension; // the boxes cannot possibly overlap. return false; } } // There was no dimension along which there is no intersection. // Therefore the boxes overlap. return true; } //Updates the axes after the corners move. Assumes the //corners actually form a rectangle. private void computeAxes() { axis[0] = corner[1].subtract(corner[0]); axis[1] = corner[3].subtract(corner[0]); // Make the length of each axis 1/edge length so we know any // dot product must be less than 1 to fall within the edge. for (int a = 0; a < axis.length; ++a) { axis[a] = axis[a].divide((axis[a].length() * axis[a].length())); origin[a] = corner[0].dot(axis[a]); } } public void moveTo(Vector2D center) { Vector2D centroid = (corner[0].add(corner[1]).add(corner[2]).add(corner[3])).divide(4.0f); Vector2D translation = center.subtract(centroid); for (int c = 0; c < 4; ++c) { corner[c] = corner[c].add(translation); } computeAxes(); computeDimensions(center,angle); } // Returns true if the intersection of the boxes is non-empty. public boolean overlaps(OBB2D other) { if(right() < other.left()) { return false; } if(bottom() < other.top()) { return false; } if(left() > other.right()) { return false; } if(top() > other.bottom()) { return false; } if(other.getAngle() == 0.0f && getAngle() == 0.0f) { return true; } return overlaps1Way(other) && other.overlaps1Way(this); } public Vector2D getCenter() { return center; } public float getWidth() { return extents.x * 2; } public float getHeight() { return extents.y * 2; } public void setAngle(float angle) { set(center,getWidth(),getHeight(),angle); } public float getAngle() { return angle; } public void setSize(float w,float h) { set(center,w,h,angle); } public float left() { return boundingRect.left; } public float right() { return boundingRect.right; } public float bottom() { return boundingRect.bottom; } public float top() { return boundingRect.top; } public RectF getBoundingRect() { return boundingRect; } public boolean overlaps(float left, float top, float right, float bottom) { if(right() < left) { return false; } if(bottom() < top) { return false; } if(left() > right) { return false; } if(top() > bottom) { return false; } return true; } }; What I do is when I predict a hit on the car, I force it back. It does not work that well and seems like a bad idea. What could I do to have more proper collision resolution. Such that if I hit a wall I will never get stuck in it and if I hit the side of a wall I can steer my way out of it. Thanks I found this nice ppt. It talks about pulling objects apart and calculating new velocities. How could I calc new velocities in my case? http://www.google.ca/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&ved=0CC8QFjAB&url=http%3A%2F%2Fcoitweb.uncc.edu%2F~tbarnes2%2FGameDesignFall05%2FSlides%2FCh4.2-CollDet.ppt&ei=x4ucULy5M6-N0QGRy4D4Cg&usg=AFQjCNG7FVDXWRdLv8_-T5qnFyYld53cTQ&cad=rja

    Read the article

  • Looking Back at MIX10

    Its the sad truth of my life that even though Im fascinated by airplanes and flight in general since my childhood days, my body doesnt like flying. Even the ridiculously short flights inside Germany are taking their toll on me each time. Now combine this with sitting in the cramped space of economy class for many hours on a transatlantic flight from Germany to Las Vegas and back, and factor in some heavy dose of jet lag (especially on my way eastwards), and you get an idea why after coming back...Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

    Read the article

  • How can I get objects and property values from expression trees?

    This is a follow-up to the Getting Information About Objects, Types, and Members with Expression Trees post, so I would recommend that you read that one first. Among other code examples in that blog post, I demonstrated how you can get a property name as a string by using expression trees. Here is the method. public static string GetName<T>(Expression<Func<T>> e) { var member = (MemberExpression)e.Body; return member.Member.Name; } And here is how you can use it. string...Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

    Read the article

  • How can I get objects and property values from expression trees?

    This is a follow-up to the Getting Information About Objects, Types, and Members with Expression Trees post, so I would recommend that you read that one first. Among other code examples in that blog post, I demonstrated how you can get a property name as a string by using expression trees. Here is the method. public static string GetName<T>(Expression<Func<T>> e) { var member = (MemberExpression)e.Body; return member.Member.Name; } And here is how you can use it. string...Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

    Read the article

< Previous Page | 128 129 130 131 132 133 134 135 136 137 138 139  | Next Page >