Search Results

Search found 23556 results on 943 pages for 'programming style'.

Page 413/943 | < Previous Page | 409 410 411 412 413 414 415 416 417 418 419 420  | Next Page >

  • Why does my TextBox with custom control template not have a visible text cursor?

    - by Philipp Schmid
    I have a custom control template which is set via the style property on a TextBox. The visual poperties are set correctly, even typing to the textbox works, but there is no insertion cursor (the | symbol) visible which makes editing challenging for our users. How does the control template need changing to get the traditional TextBox behavior back? <Style x:Key="DemandEditStyle" TargetType="TextBox"> <EventSetter Event="LostFocus" Handler="DemandLostFocus" /> <Setter Property="HorizontalAlignment" Value="Stretch" /> <Setter Property="VerticalAlignment" Value="Stretch" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="1" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="1" /> </Grid.RowDefinitions> <Grid.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="White" Offset="0" /> <GradientStop Color="White" Offset="0.15" /> <GradientStop Color="#EEE" Offset="1" /> </LinearGradientBrush> </Grid.Background> <Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Background="Black" /> <Border Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Background="Black" /> <Grid Grid.Row="0" Grid.Column="0" Margin="2"> <Grid.ColumnDefinitions> <ColumnDefinition Width="1" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="1" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="1" /> <RowDefinition Height="*" /> <RowDefinition Height="1" /> </Grid.RowDefinitions> <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Background="Black" /> <Border Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Background="Black" /> <Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Background="#CCC" /> <Border Grid.Row="0" Grid.Column="2" Grid.RowSpan="3" Background="#CCC" /> <TextBlock Grid.Row="1" Grid.Column="1" TextAlignment="Right" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="3 0 3 0" Background="Yellow" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text}" Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}, AncestorLevel=1}, Path=ActualWidth}" /> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> Update: Replacing the inner-most TextBox with a ScrollViewer and naming it PART_ContentHost indeed shows the text insertion cursor. Trying to right-align the text in the TextBox by either setting the HorizontalContentAlignment in the Style or as a property on the ScrollViewer were unsuccessful. Suggestions?

    Read the article

  • Right-aligning button in a grid with possibly no content - stretch grid to always fill the page

    - by Peter Perhác
    Hello people, I am losing my patience with this. I am working on a Windows Phone 7 application and I can't figure out what layout manager to use to achieve the following: Basically, when I use a Grid as the layout root, I can't make the grid to stretch to the size of the phone application page. When the main content area is full, all is well and the button sits where I want it to sit. However, in case the page content is very short, the grid is only as wide as to accommodate its content and then the button (which I am desperate to keep near the right edge of the screen) moves away from the right edge. If I replace the grid and use a vertically oriented stack panel for the layout root, the button sits where I want it but then the content area is capable of growing beyond the bottom edge. So, when I place a listbox full of items into the main content area, it doesn't adjust its height to be completely in view, but the majority of items in that listbox are just rendered below the bottom edge of the display area. I have tried using a third-party DockPanel layout manager and then docked the button in it's top section and set the button's HorizontalAlignment="Right" but the result was the same as with the grid, it also shrinks in size when there isn't enough content in the content area (or when title is short). How do I do this then? ==EDIT== I tried WPCoder's XAML, only I replaced the dummy text box with what I would have in a real page (stackpanel) and placed a listbox into the ContentPanel grid. I noticed that what I had before and what WPCoder is suggesting is very similar. Here's my current XAML and the page still doesn't grow to fit the width of the page and I get identical results to what I had before: <phone:PhoneApplicationPage x:Name="categoriesPage" x:Class="CatalogueBrowser.CategoriesPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" xmlns:ctrls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" shell:SystemTray.IsVisible="True"> <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <StackPanel Orientation="Horizontal" VerticalAlignment="Center" > <TextBlock Text="Browsing:" Margin="10,10" Style="{StaticResource PhoneTextTitle3Style}" /> <TextBlock x:Name="ListTitle" Text="{Binding DisplayName}" Margin="0,10" Style="{StaticResource PhoneTextTitle3Style}" /> </StackPanel> <Button Grid.Column="1" x:Name="btnRefineSearch" Content="Refine Search" Style="{StaticResource buttonBarStyle}" FontSize="14" /> </Grid> <Grid x:Name="ContentPanel" Grid.Row="1"> <ListBox x:Name="CategoryList" ItemsSource="{Binding Categories}" Style="{StaticResource CatalogueList}" SelectionChanged="CategoryList_SelectionChanged"/> </Grid> </Grid> </phone:PhoneApplicationPage> This is what the page with the above XAML markup looks like in the emulator:

    Read the article

  • get text from a certain <tr> tag

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

    Read the article

  • Adding picture in symfony 2 from symfony form?

    - by user2833510
    How do I add a picture in symfony2 from form to a database. I want to make a logo as a picture field and store project picture in database from form. How do I do this? Here is my form: <?php namespace Projects\ProjectsBundle\Form; use Symfony\Component\Form\AbstractType; use Symfony\Component\Form\FormBuilderInterface; use Symfony\Component\OptionsResolver\OptionsResolverInterface; class ProjectsType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options) { $builder ->add('name') ->add('description') ->add('priority','choice', array( 'choices' => array('high' => 'high', 'low' => 'low', 'medium' => 'medium'))) ->add('logo') ->add('startedAt','datetime',array('label' => false,'data'=>new \DateTime(),'attr'=>array('style'=>'display:none;'))) ->add('completedOn','datetime',array('label' => false,'data'=>new \DateTime(),'attr'=>array('style'=>'display:none;'))) ->add('createdDatetime','datetime',array('label' => false,'data'=>new \DateTime(),'attr'=>array('style'=>'display:none;'))) ->add('updatedDatetime','datetime',array('label' => false,'data'=>new \DateTime(),'attr'=>array('style'=>'display:none;'))) ; } public function setDefaultOptions(OptionsResolverInterface $resolver) { $resolver->setDefaults(array( 'data_class' => 'Projects\ProjectsBundle\Entity\Projects' )); } public function getName() { return 'projects_projectsbundle_projectstype'; } } and here is my controller: public function createAction(Request $request) { $user = $this->get('security.context')->getToken()->getUser(); $userId = $user->getId(); $entity = new Projects(); $form = $this->createForm(new ProjectsType(), $entity); $form->bind($request); $entity->setCreatedBy($userId); $entity->setUpdatedBy($userId); $entity->setCompletedBy($userId); if ($form->isValid()) { $em = $this->getDoctrine()->getManager(); $em->persist($entity); $em->flush(); $_SESSION['projectid'] =$entity->getId(); if($request->isXmlHttpRequest()) { $response = new Response(); $output = array('success' => true, 'description' => $entity->getdescription(), 'id' => $entity->getId(), 'name' => $entity->getname(), 'priority' => $entity->getpriority(), 'logo' => $entity->getlogo(), 'startedat' => $entity->getstartedat(),'completedon' => $entity->getcompletedon(),'completedby' => $entity->getCompletedBy(), 'createdby' => $entity->getcreatedby(), 'updatedby' => $entity->getupdatedby(), 'createddatetime' => $entity->getcreateddatetime(), 'updateddatetime' => $entity->getupdateddatetime()); $response->headers->set('Content-Type', 'application/json'); $response->setContent(json_encode($output)); return $response; } return $this->redirect($this->generateUrl('projects_show', array('id' => $entity->getId()))); } return $this->render('ProjectsProjectsBundle:Projects:new.html.twig', array( 'entity' => $entity, 'form' => $form->createView(), )); }

    Read the article

  • Space Between Table Rows

    - by AGoodDisplayName
    This should be a simple problem, but I am have a tough time getting the html to display the way I want it... The problem is the space between my table rows...I don't want space between my rows. I just want my table to look like a spreadsheet with black borders. I am using a datalist and have a table in the datalist control's templates. I have been messing with this for a couple of hours now and I have tried a few different variations of CSS and table attributes. Can anyone tell me where I am going wrong? Below is my current mark up. <style type="text/css"> .tdHeader { border-color: Black; border-style: solid; border-width: 1px; font-family: Arial; font-size: 8pt; margin: 0; background-color: #DCDCDC; font-weight: bold; } .tdBorder { border-color: Black; border-style: solid; border-width: 1px; font-family: Arial; font-size: 8pt; margin: 0; text-align: center; } .trNoSpace { margin: 0; padding: 0; } </style> <asp:DataList ID="DataList1" runat="server" DataKeyField="Oid" DataSourceID="xdsHUDEligibilityMember"> <HeaderTemplate> <table cellspacing="0" width="600"> <tr class="trNoSpace"> <td class="tdHeader" width="100">Household Member Number </td> <td class="tdHeader">Household Member Name </td> <td class="tdHeader">Age of Household Member </td> </tr> </HeaderTemplate> <ItemTemplate> <tr class="trNoSpace"> <td class="tdBorder"> <asp:Label ID="Label2" runat="server" Text='<%# Eval("Oid") %>' /> </td> <td class="tdBorder"> <asp:Label ID="Label1" runat="server" Text='<%# Eval("FullName") %>' /> </td> <td class="tdBorder"> <asp:Label ID="AgeAtEffectiveDateLabel" runat="server" Text='<%# Eval("AgeAtEffectiveDate") %>' /> </td> </tr> </ItemTemplate> <FooterTemplate> <tr class="trNoSpace"> <td class="tdBorder"> </td> <td class="tdBorder"> </td> <td class="tdBorder"> </td> </tr> </table> </FooterTemplate>

    Read the article

  • jQuery - Stucked Animation

    - by v1n_vampire
    I'm kind of tired with Javascript long script for animation and decide to try jQuery, but it seems I'm stuck even at the simplest code. CSS: #menu {float: right; font: italic 16px/16px Verdana, Geneva, sans-serif;} ul#nav {list-style: none;} ul#nav li {float: left; padding-right: 10px;} ul#nav li a {color: white;} ul#subnav {float: right; list-style: none; padding: 0; display: none;} ul#subnav li {float: left; padding: 10px 5px; white-space: nowrap;} ul#subnav li a {color: white;} Script: $(document).ready(function() { $('.nav').hover(function() { $(this).find('#subnav').stop().animate({width:'toggle'},350); }); }); HTML: <div id="menu"> <ul id="nav"> <li class="nav"> <a href="#"><img src="images/icon-home.png" width="36" height="36"/></a> <ul id="subnav"> <li><a href="#">Home</a></li> </ul> </li> <li class="nav"> <a href="#"><img src="images/icon-signin.png" width="36" height="36"/></a> <ul id="subnav"> <li><a href="#">Sign In</a></li> </ul> </li> <li class="nav"> <a href="#"><img src="images/icon-register.png" width="36" height="36"/></a> <ul id="subnav"> <li><a href="#">Create Account</a></li> </ul> </li> <li class="nav" style="padding-right: 0;"> <a href="#"><img src="images/icon-mail.png" width="36" height="36"/></a> <ul id="subnav"> <li style="padding-right: 0;"><a href="#">Contact Us</a></li> </ul> </li> </ul> </div> Here's the sample page: http://v1n-vampire.com/dev/jq-animation-stuck If you continue to hover on the nav from left to right then back to left, eventually the animation will stuck. How to solve this? Thank you in advance.

    Read the article

  • load search results into a div that toggles with other divs

    - by Z. Edwards
    I am working with a page that has multiple divs that toggle. This function works. A search function was added and this works too. The problem with the page as it exists currently: The search bar was placed on the "default" div and the results load below the bar into another div that is invisible when empty. The results div is inside this first default div. If you toggle to another div, you lose the default div and can't get back to it. For this reason, I moved the search bar to the left navigation where the other toggle links are situated. I also moved the search results div out of the default div to "stand on its own." What I am trying to do: Make the search button show the div with the results as well as find the results. Basically, to integrate the search function into the array/toggle function. The search function is in one .js file and the toggle function is in a different .js file. I keep thinking there must be a way to get "onclick" to call from both .js files so that I don't have to do a bunch of extra work combining the two functions that already exist and work separately. I am a Javascript newbie learning by examples and haven't been able to figure this out. I have never seen a working example of this and my searches haven't produced one. I would be very grateful for any help. Hope I explained the problem adequately. Edit: Here is the code I already have for the toggle function. var ids=new Array('a','b','c',[and so on--search results not added here yet]); function switchid(id_array){ hideallids(); for( var i=0, limit=id_array.length; i < limit; ++i) showdiv(id_array[i]); } function hideallids(){ for (var i=0;i<ids.length;i++){ hidediv(ids[i]); } } function hidediv(id) { //safe function to hide an element with a specified id if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById(id).style.display = 'none'; } else { if (document.layers) { // Netscape 4 document.id.display = 'none'; } else { // IE 4 document.all.id.style.display = 'none'; } } } function showdiv(id) {//safe function to show an element with a specified id if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById(id).style.display = 'block'; } else { if (document.layers) { // Netscape 4 document.id.display = 'block'; } else { // IE 4 document.all.id.style.display = 'block'; } } } function initialize(){ var t = gup("target"); if( t ) { switchid([t]); } } function gup( name ) { name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regexS = "[\\?&]"+name+"=([^&#]*)"; var regex = new RegExp( regexS ); var results = regex.exec( window.location.href ); if( results == null ){ return ""; } else { return results[1]; } } Thanks in advance!

    Read the article

  • problem with tinymce textarea in dynamically added jquery tabs

    - by kranthi
    I have an aspx page(Default1.aspx),in which i have a static jquery tab and anchor tag upon clicking the anchor tag(Add Tab) I am adding new tab dynamically,which gets its contents loaded from another aspx page(Default2.aspx).This second page contains some text inside a tag,a textarea with 'tinymce' class which is placed inside a div with 'style="display:none" ' and this textarea gets displayed only upon clicking the edit button on that page. The HTML of Default1.aspx page looks like this. <head runat="server"> <title>Untitled Page</title> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> <link href="css/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" /> <link href="css/widgets.css" rel="stylesheet" type="text/css" /> <link href="css/print.css" rel="stylesheet" type="text/css" /> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/tiny_mce/jquery.tinymce.js"></script> <script type="text/javascript"> $(function() { //DECLARE FUNCTION: removetab var removetab = function(tabselector, index) { $(".removetab").click(function(){ $(tabselector).tabs('remove',index); }); }; //create tabs $("#tabs").tabs({ add: function(event, ui) { //select newely opened tab $(this).tabs('select',ui.index); //load function to close tab removetab($(this), ui.index); }, show: function(event, ui) { if($.fn.tinymce) { $('textarea.tinymce').tinymce({ // Location of TinyMCE script script_url : 'js/tiny_mce/tiny_mce.js', // General options theme : "advanced", plugins : "safari,style,layer,table,advhr,advimage,advlink,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", // Theme options theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", theme_advanced_buttons3 : "sub,sup,|,ltr,rtl,|,fullscreen", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left" /*theme_advanced_statusbar_location : "bottom",*/ /*theme_advanced_resizing : true,*/ }); } //load function to close selected tabs removetab($(this), ui.index); } }); //load new tab $(".addtab").click(function(){ var href=$(this).attr("href"); var title=$(this).attr("title"); $("#tabs").tabs( 'add' , href , title+' <span class="removetab ui-icon ui-icon-circle-close" style="float:right; margin: -2px -10px 0px 3px; cursor:pointer;"></span>'); return false; }); }); function showEditFields(){ $('.edit').css('display','inline'); } </script> </head> <body> <form id="form1" runat="server"> <div> <a class="addtab" title="Tab Label" href="HTMLPage.htm">Add Tab</a> <div id="tabs"> <ul> <li><a href="#tabs-1">Default Tab</a></li> </ul> <div id="tabs-1"> <p>Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> </div> </div> </form> </body> and the HTML of Default2.aspx looks like this. <head> </head> <body> <form id="form1" runat="server"> <div class="demo"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus. <div class="edit" style="display:none"> <textarea style="height:80px; width:100%" class="tinymce" name="" rows="8" runat="server" id="txtans">answer text goes here </textarea> </div> <input id="Button1" type="button" value="edit" onclick="showEditFields();" /> </p> </form> </body> so when I click on the "edit" button available on Default2.aspx ,the textarea with tinymce should appear and I can add as many tabs as I want from Default1.aspx by clicking on Add Tab(anchor) which loads multiple tabs with content from Default2.aspx.After adding these multiple tabs ,if I check to see whether all the textareas are with tinymce,I noticed that only the 1st tab contains textarea with tinymce and in all the other tabs tinymce doesnt show up ,simply the normal text area appears. Could someone please help me with this? Thanks.

    Read the article

  • Native ComboBox not displaying choices correctly

    - by anothershrubery
    EDIT: It seems that ListPicker is the way to go but I have had further problems with that detailed Microsoft.Phone.Controls.Toolkit ListPicker throws XamlParseException I have the following ComboBox in code: <ComboBox x:Name="Result" Grid.Column="6" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" Background="White"> <ComboBoxItem Content="Win" /> <ComboBoxItem Content="Place" /> <ComboBoxItem Content="Lose" /> </ComboBox> But it does not display as I would have expected. When you drop down the ComboBox the options don't appear, it's just like empty items. See below: However, when an item is selected, it displays correctly and the correct index/item is returned. See below: I'm sure there is something simple I have missed but can't put my finger on it. EDIT: Ok I am posting the full code for this. I have a user control, OddsRow, that looks like this: <UserControl xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" x:Class="MojoPinBetOddsCalculator.OddsRow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" d:DesignHeight="480" d:DesignWidth="480"> <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}"> <Grid.RowDefinitions> <RowDefinition Height="70"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="50*"></ColumnDefinition> <ColumnDefinition Width="70*"></ColumnDefinition> <ColumnDefinition Width="30*"></ColumnDefinition> <ColumnDefinition Width="70*"></ColumnDefinition> <ColumnDefinition Width="70*"></ColumnDefinition> <ColumnDefinition Width="70*" ></ColumnDefinition> <ColumnDefinition Width="100*"></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock x:Name="RowNumber" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock> <TextBox x:Name="OddsNumerator" Grid.Column="1" Width="90" Height="70" HorizontalAlignment="Center" TextAlignment="Center" VerticalAlignment="Center" MaxLength="3" InputScope="TelephoneNumber"></TextBox> <TextBlock x:Name="Slash" Grid.Column="2" Text="/" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> <TextBox x:Name="OddsDenominator" Grid.Column="3" Width="90" Height="70" VerticalAlignment="Center" TextAlignment="Center" MaxLength="3" HorizontalAlignment="Center" InputScope="TelephoneNumber"></TextBox> <CheckBox x:Name="EachWay" Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0" /> <CheckBox x:Name="Place" Grid.Column="5" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="0" Width="71" Margin="10,0,0,0" Padding="0" /> <ComboBox x:Name="Result" Grid.Column="6" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" Background="White"> <ComboBoxItem Content="Win" /> <ComboBoxItem Content="Place" /> <ComboBoxItem Content="Lose" /> </ComboBox> </Grid> </UserControl> And it is displayed in the MainPage like so: <phone:PhoneApplicationPage xmlns:my="clr-namespace:MojoPinBetOddsCalculator" x:Class="MojoPinBetOddsCalculator.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True"> <!--LayoutRoot is the root grid where all page content is placed--> <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!--TitlePanel contains the name of the application and page title--> <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock x:Name="ApplicationTitle" Text="BET ODDS CALCULATOR" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock x:Name="PageTitle" Text="calculate" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel> <!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" HorizontalAlignment="Stretch"> <Grid x:Name="Scrollable"> <ScrollViewer> <Grid x:Name="BettingGrid"> <Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions> <Grid x:Name="BetList"> <Grid.RowDefinitions> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="70"></RowDefinition> <RowDefinition Height="70"></RowDefinition> <RowDefinition Height="70"></RowDefinition> <RowDefinition Height="70"></RowDefinition> <RowDefinition Height="70"></RowDefinition> <RowDefinition Height="70"></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="50*"></ColumnDefinition> <ColumnDefinition Width="70*"></ColumnDefinition> <ColumnDefinition Width="30*"></ColumnDefinition> <ColumnDefinition Width="70*"></ColumnDefinition> <ColumnDefinition Width="70*"></ColumnDefinition> <ColumnDefinition Width="70*"></ColumnDefinition> <ColumnDefinition Width="100*"></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Text="EW" Style="{StaticResource PhoneTextNormalStyle}" Grid.Row="0" Grid.Column="4" HorizontalAlignment="Center" /> <TextBlock Text="Place" Style="{StaticResource PhoneTextNormalStyle}" Grid.Row="0" Grid.Column="5" HorizontalAlignment="Center" /> <TextBlock Text="Result" Style="{StaticResource PhoneTextNormalStyle}" Grid.Row="0" Grid.Column="6" HorizontalAlignment="Center" /> <my:OddsRow Grid.Row="1" Grid.ColumnSpan="7" Row="1"/> <my:OddsRow Grid.Row="2" Grid.ColumnSpan="7" Row="2"/> <my:OddsRow Grid.Row="3" Grid.ColumnSpan="7" Row="3"/> <my:OddsRow Grid.Row="4" Grid.ColumnSpan="7" Row="4"/> <my:OddsRow Grid.Row="5" Grid.ColumnSpan="7" Row="5"/> <my:OddsRow Grid.Row="6" Grid.ColumnSpan="7" Row="6"/> </Grid> <Grid x:Name="ControlsGrid" Grid.Row="1"> <Button x:Name="AddRowButton" Background="#BFFFFFFF" BorderBrush="#BFFFFFFF" Foreground="Black" Content="Add Row" FontSize="16" Click="AddRowButton_Click" Height="70" /> </Grid> </Grid> </ScrollViewer> </Grid> </Grid> </Grid> </phone:PhoneApplicationPage> Separately the ComboBox works, and also the code for the OddsRow works as expected... separately. When combined it doesn't display the items. OddsRow.xaml.cs public partial class OddsRow : UserControl { private int m_Row; public OddsRow() { InitializeComponent(); } public int Row { get { return m_Row; } set { m_Row = value; RowNumber.Text = m_Row + " - "; } } }

    Read the article

  • Type '_Default' already contains a definition

    - by salvationishere
    I am developing a C# VS 2008 / SQL Server 2008 website. I have a Gridview. I included the Default.aspx and aspx.cs files below. But when I build this I get the below error: The Type '_Default' already contains a definition for 'btnOWrite' What do I need to do to fix this? I am not getting any errors now; just that this grid does not show up. Thanks! ASPX file: <%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server"> <asp:Panel runat="server" ID="AuthenticatedMessagePanel"> <asp:Label runat="server" ID="WelcomeBackMessage"></asp:Label> <table> <tr> <td> <asp:Label ID="tableLabel" runat="server" Font-Bold="True" Text="Select target table:"></asp:Label> </td> <td> <asp:Label ID="inputLabel" runat="server" Font-Bold="True" Text="Select input file:"></asp:Label> </td> </tr> <tr> <td valign="top"> <asp:Label ID="feedbackLabel" runat="server"></asp:Label> <asp:SqlDataSource ID="SelectTables" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorks3_SelectTables %>" SelectCommand="getTableNames" SelectCommandType="StoredProcedure"> <SelectParameters> <asp:QueryStringParameter DefaultValue="Person" Name="SchemaName" QueryStringField="SchemaName" Type="String" /> </SelectParameters> </asp:SqlDataSource> <asp:GridView ID="GridView1" DataSourceID="SelectTables" runat="server" Style="width: 400px;" CellPadding="4" ForeColor="#333333" GridLines="None" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" AutoGenerateSelectButton="True" DataKeyNames="TABLE_NAME"> <RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> <Columns> <asp:BoundField HeaderText="TABLE_NAME" DataField="TABLE_NAME" /> </Columns> <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <EditRowStyle BackColor="#999999" /> <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> </asp:GridView> </td> <td valign="top"> <input id="uploadFile" type="file" size="26" runat="server" name="uploadFile" title="UploadFile" class="greybar" enableviewstate="True" /> </td> </tr> </table> <table> <tr> <td style="width:150px; height:50px"></td> <td valign="bottom" style="width:150px; height:50px"> <input id="btnOWrite" type="submit" value="Overwrite Data" runat="server" class="greybar" onserverclick="btnOWrite_Click" name="btnOWrite" />&nbsp; </td> <td style="width:100px"></td> <td valign="bottom" style="width:150px; height:50px"> <input id="btnAppend" type="submit" value="Append Data" runat="server" class="greybar" onserverclick="btnAppend_Click" name="btnAppend" /> </td> </tr> </table> </asp:Panel> <asp:Panel runat="Server" ID="AnonymousMessagePanel"> <asp:HyperLink runat="server" ID="lnkLogin" Text="Log In" NavigateUrl="~/Login.aspx"> </asp:HyperLink> </asp:Panel> </asp:Content> ASPX.CS file: using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Collections.Generic; using System.IO; using System.Drawing; using System.ComponentModel; using System.Data.SqlClient; using ADONET_namespace; using System.Security.Principal; //using System.Windows; public partial class _Default : System.Web.UI.Page //namespace AddFileToSQL { //protected System.Web.UI.HtmlControls.HtmlInputFile uploadFile; protected System.Web.UI.HtmlControls.HtmlInputButton btnOWrite; protected System.Web.UI.HtmlControls.HtmlInputButton btnAppend; protected System.Web.UI.WebControls.Label Label1; protected static string inputfile = ""; public static string targettable; public static string selection; // Number of controls added to view state protected int default_NumberOfControls { get { if (ViewState["default_NumberOfControls"] != null) { return (int)ViewState["default_NumberOfControls"]; } else { return 0; } } set { ViewState["default_NumberOfControls"] = value; } } protected void uploadFile_onclick(object sender, EventArgs e) { } protected void Load_GridData() { //GridView1.DataSource = ADONET_methods.DisplaySchemaTables(); //GridView1.DataBind(); } protected void btnOWrite_Click(object sender, EventArgs e) { if (uploadFile.PostedFile.ContentLength > 0) { feedbackLabel.Text = "You do not have sufficient access to overwrite table records."; } else { feedbackLabel.Text = "This file does not contain any data."; } } protected void btnAppend_Click(object sender, EventArgs e) { string fullpath = Page.Request.PhysicalApplicationPath; string path = uploadFile.PostedFile.FileName; if (File.Exists(path)) { // Create a file to write to. try { StreamReader sr = new StreamReader(path); string s = ""; while (sr.Peek() > 0) s = sr.ReadLine(); sr.Close(); } catch (IOException exc) { Console.WriteLine(exc.Message + "Cannot open file."); return; } } if (uploadFile.PostedFile.ContentLength > 0) { inputfile = System.IO.File.ReadAllText(path); Session["Message"] = inputfile; Response.Redirect("DataMatch.aspx"); } else { feedbackLabel.Text = "This file does not contain any data."; } } protected void Page_Load(object sender, EventArgs e) { if (Request.IsAuthenticated) { WelcomeBackMessage.Text = "Welcome back, " + User.Identity.Name + "!"; // Reference the CustomPrincipal / CustomIdentity CustomIdentity ident = User.Identity as CustomIdentity; if (ident != null) WelcomeBackMessage.Text += string.Format(" You are the {0} of {1}.", ident.Title, ident.CompanyName); AuthenticatedMessagePanel.Visible = true; AnonymousMessagePanel.Visible = false; if (!Page.IsPostBack) { Load_GridData(); } } else { AuthenticatedMessagePanel.Visible = false; AnonymousMessagePanel.Visible = true; } } protected void GridView1_SelectedIndexChanged(object sender, EventArgs e) { GridViewRow row = GridView1.SelectedRow; targettable = row.Cells[2].Text; } }

    Read the article

  • Html2Canvas ...Google Map is not rendering

    - by eric maxfield
    I am running a Apache Server . I have a simple screen capture set up using Html2canvas .The capture function is rendering a blank Image . I have tried numerous ways to configure the javascript using related articles from this site to no Avail . The code is all working and tested because I can capture the image prior to "google maps api being loaded . Thank you and any advice would be much appreciated . <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <head> <title>Tester</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="html2canvas.js"></script> <script type="text/javascript" src="jquery.plugin.html2canvas.js"></script> <script src="http://www.google.com/jsapi?key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script> <script> google.load("earth", "1"); var ge = null; function init() { google.earth.createInstance("map_canvas", initCallback, failureCallback); } function initCallback(object) { ge = object; ge.getWindow().setVisibility(true); } function failureCallback(object) { } function capture() { $('#target').html2canvas({ onrendered: function (canvas) { //Set hidden field's value to image data (base-64 string) $('#img_val').val(canvas.toDataURL("image/png")); //Submit the form manually document.getElementById("myForm").submit(); } }); } </script> <style type="text/css"> #map_canvas {position: fixed; top: 60px; left: 0px; right:0px; bottom:0px; } #target { border: 1px solid #CCC; margin: 0px; padding:0px; position: absolute; left: 10px;top: 80px;height: 580px; width: 580px; } </style> </head> <body onload='init()' id='body'> <form method="POST" enctype="multipart/form-data" action="save.php" id="myForm"> <input type="hidden" name="img_val" id="img_val" value="" /> </form> <input type="submit" value="Take Screenshot Of Div Below" onclick="capture();" /> <div id="target"> <div id="map_canvas"> </div> </div> </body> </html> This is the php document renders to save.php <?php //Get the base-64 string from data $filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1); //Decode the string $unencodedData=base64_decode($filteredData); //Save the image file_put_contents('img.png', $unencodedData); ?> <h2>Save the image and show to user</h2> <table> <tr> <td> <a href="img.png" target="blank"> Click Here to See The Image Saved to Server</a> </td> <td align="right"> <a href="index.php"> Click Here to Go Back</a> </td> </tr> <tr> <td colspan="2"> <br /> <br /> <span> Here is Client-sided image: </span> <br /> <?php //Show the image echo '<img src="'.$_POST['img_val'].'" />'; ?> </td> </tr> </table> <style type="text/css"> body, a, span { font-family: Tahoma; font-size: 10pt; font-weight: bold; } </style> This sample works Correctly . I want to achieve this with above Code using "Google Earth" <!DOCTYPE html> <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> <script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="html2canvas.js"></script> <script type="text/javascript" src="jquery.plugin.html2canvas.js"></script> </script> <script type="text/javascript"> function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); } google.maps.event.addDomListener(window, 'load', initialize); $(window).load(function(){ $('#load').click(function(){ html2canvas($('#googleMap'), { useCORS: true, onrendered: function (canvas) { var dataUrl= canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); window.location.href = dataUrl; } }); }); }); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> <input type="button" value="Save" id="load"/> </body> </html>

    Read the article

  • Adapting a HTML/CSS dropdown menu to multi-level

    - by Adam Nygate
    Ive been trying to make the original dropdown into multi level for a site im working on. All of my attempts have failed (. For some reason i can only do "margin-right" to align the elements, and this causes some problems. I think it has something to do with the position attribute. Here is my HTML: <ol id="nav"> <li><a href="index.php">Home</a></li> <li class="dropdown_alignedLeft"> <a href="">Products</a> <ul><li class="dropdown_alignedRight"> <a href="">iPoP</a> <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=ipop">iPoP - Network Solutions for Vessels</a></li></ul><li class="dropdown_alignedRight"> <a href="">Cameras</a> <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=icam">iCam 501 Ultra - Intrinsically Safe Digital Camera with Flash</a></li></ul><li class="dropdown_alignedRight"> <a href="">BNWAS</a> <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=bnwas">BNWAS - Bridge Navigation Watch Alarm System</a></li></ul><li class="dropdown_alignedRight"> <a href="">Lighting</a> <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=peli">Peli 2690 - Intrinsically Safe LED Head Lamp</a></li></ul><li class="dropdown_alignedRight"> <a href="">Communication</a> <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=handy">Ex-Handy 06 - Intrinsically Safe Cell Phone</a></li></ul> </ul> <li class="dropdown_alignedLeft"> <a href="">Customers</a> <ul> <li><a href="customers.php?category=maritime">Maritime</a></li> <li><a href="customers.php?category=non">Non-Maritime</a></li> <li class="dropdown_lastItem"><a href="customers.php?category=organizations">Regulatory Organizations</a></li> </ul> <li><a href="order.php">Product Enquiry</a></li> <li><a href="contact.php">Contact Us</a></li> <li class="dropdown_alignedLeft"> <a href="">Company</a> <ul> <!-- <li><a href="">About Us</a></li> --> <li><a href="newsandpr.php?category=News">News</a></li> <li class="dropdown_lastItem"><a href="newsandpr.php?category=Press Release">Press Releases</a></li> </ul> </ol> And my CSS: #nav { float:right; margin:15px 0 0; } #nav li { float:left; } #nav li a { display:block; font-family:"PT Sans","Helvetica Neue",Arial,sans-serif; font-size:16px; text-decoration:none; color:#2B95C8; padding:10px 20px 20px; } .dropdown_alignedLeft,.dropdown_alignedRight { position:relative; } #nav .dropdown_alignedLeft>a,#nav .dropdown_alignedRight>a { background:url(../images/dropdown_arrow_blue.png) no-repeat top right; padding:10px 30px 20px 20px; } #nav .dropdown_alignedLeft:hover>a,#nav .dropdown_alignedRight:hover>a { -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomright:0; -moz-border-radius-bottomleft:0; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -webkit-border-bottom-right-radius:0; -webkit-border-bottom-left-radius:0; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-right-radius:0; border-bottom-left-radius:0; color:#FFF; background:#2378A1 url(../images/dropdown_arrow_blue.png) no-repeat bottom right; } .dropdown_alignedLeft ul,.dropdown_alignedRight ul { display:none; } #nav .dropdown_alignedLeft:hover>ul,#nav .dropdown_alignedRight:hover>ul { display:block; z-index:100; position:absolute; top:50px; -moz-border-radius-topleft:0; -moz-border-radius-topright:0; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -webkit-border-top-left-radius:0; -webkit-border-top-right-radius:0; -webkit-border-bottom-right-radius:5px; -webkit-border-bottom-left-radius:5px; border-top-left-radius:0; border-top-right-radius:0; border-bottom-right-radius:5px; border-bottom-left-radius:5px; background:#2378A1; padding:0 0 6px; } #nav .dropdown_alignedRight:hover>ul { top:50px; right:0; text-align:right; } #nav li ul li { float:none; border-bottom:1px dashed #2B95C8; margin:0 20px; } #nav li ul li.dropdown_innerTitle { border:none; font-family:"Helvetica Neue",Arial,sans-serif; font-size:15px; white-space:nowrap; color:#C8DDE7; margin:10px 20px 0; padding:10px 0; } #nav li ul li.dropdown_lastItem { border:none; } #nav li ul li a { font-family:"Helvetica Neue",Arial,sans-serif; font-size:13px; color:#FFF; white-space:nowrap; padding:10px 0 9px; } #nav>li:hover>a,#nav li .current_page { color:#2378A1; background:url(../images/current_page_arrow_blue.png) no-repeat center bottom; } #nav li ul li a:hover { color: #C8DDE7; } For a live version of the menu, please go here: JSFiddle - Live Menu

    Read the article

  • how to bind repeater control as message threading

    - by Shalin Gajjar
    i have crm application. i have one difficulties that how i bind repeater control as message threading. like first thread as question and second thread as answer of that question. if user asked multiple question then first,second,.. threads as question and.as it is like message chatting... for keeping data from database i use this stored procedure: set ANSI_NULLS ON set QUOTED_IDENTIFIER ON GO ALTER PROCEDURE [dbo].[ViewMessageThreads] (@inquiry_id varchar(50)) AS BEGIN SET NOCOUNT ON; select i.body as master_body, h.body as history_body, q.body as question_body, q.Created_date as question_timestamp, a.body as answer_body, a.Created_date as answer_timestamp, t.Type_name as user_type from tbl_Inquiry_History i left join tbl_Inquiry_master h on h.Inquiry_id=i.Inquiry_id left join tbl_Question q on q.Inquiry_id=i.Inquiry_id left join tbl_Answer a on a.Question_id=q.Inquiry_id left join tbl_User_master u on u.Id=i.User_id left join tbl_Login_master l on l.Id=u.User_id left join tbl_Type t on t.Id = l.type_id where (i.Inquiry_id=@inquiry_id) END and this gives me result as: master_body history_body question_body question_t.. answer_body answer_t.. user_type __________________________________________________________________________________________ question 1 NULL question 1 2005-03-14... NULL NULL User question 1 NULL question 2 2005-03-14... NULL NULL User and i include this design source of repeater: <asp:Repeater ID="Repeater_Inquiry_Messages" runat="server"> <ItemTemplate> <table id="ctl00_ContentPlaceHolder1_dl_ticketmsg" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;"> <tbody><tr> <td style="background-color:#F5F5FF;"> <table cellpadding="0" cellspacing="0" border="0"> <tbody><tr> <td class="header"> <span id="ctl00_ContentPlaceHolder1_dl_ticketmsg_ctl00_lbl_msg_no"><%#Container.ItemIndex+1 %></span></td> <td class="normaltext" valign="bottom"> <span id="ctl00_ContentPlaceHolder1_dl_ticketmsg_ctl00_lbl_tagline">Message By <b><asp:Label ID="lbl_user_t" runat="server" Text='<%#Eval("user_type")%>'/></b> on <asp:Label ID="lbldatetime" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "question_timestamp","{0:ddd, dd MMMM yyyy}")%>'/></span></td> </tr> <tr> <td class="header"> &nbsp;</td> <td class="normaltext" valign="bottom"> <b>Message :</b><br> <span id="ctl00_ContentPlaceHolder1_dl_ticketmsg_ctl00_Label1"><asp:Label ID="lbl_inquiry_desc" runat="server" Text='<%#Eval("question_body")%>'/></span></td> </tr> </tbody></table> </td> </tr> </tbody></table> </ItemTemplate> <SeparatorTemplate> <table> <tr> <td style="height:3px"></td> </tr> </table> </SeparatorTemplate> <ItemTemplate> <table id="ctl00_ContentPlaceHolder1_dl_ticketmsg1" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;"> <tbody><tr> <td style="background-color:#F5F5FF;"> <table cellpadding="0" cellspacing="0" border="0"> <tbody><tr> <td class="header"> <span id="ctl00_ContentPlaceHolder1_dl_ticketmsg1_ctl00_lbl_msg_no"><%#Container.ItemIndex+1 %></span></td> <td class="normaltext" valign="bottom"> <span id="ctl00_ContentPlaceHolder1_dl_ticketmsg1_ctl00_lbl_tagline">Message By <b><asp:Label ID="Label1" runat="server" Text='<%#Eval("user_type")%>'/></b> on <asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "answer_timestamp","{0:ddd, dd MMMM yyyy}")%>'/></span></td> </tr> <tr> <td class="header"> &nbsp;</td> <td class="normaltext" valign="bottom"> <b>Message :</b><br> <span id="ctl00_ContentPlaceHolder1_dl_ticketmsg1_ctl00_Label1"><asp:Label ID="Label3" runat="server" Text='<%#Eval("answer_body")%>'/></span></td> </tr> <tr> <td class="header"> &nbsp;</td> <td class="normaltext" valign="bottom"> <b></b> </td> </tr> </tbody></table> </td> </tr> </tbody></table> </ItemTemplate> </asp:Repeater> how ever this gives me only question thread while i commenting up this second message thread. ----------------------------------------Updated--------------------------------------- please help me.. ---------------------------------------Updated---------------------------------------- Server Error in '/OmInvestmentStockMarketing_new' Application. Compilation Error Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. Compiler Error Message: CS1026: ) expected Source Error: Line 162: <span id="ctl00_ContentPlaceHolder1_dl_ticketmsg_ctl00_lbl_msg_no"><%#Container.ItemIndex+1 %></span></td> Line 163: <td class="normaltext" valign="bottom"> Line 164: <span id="ctl00_ContentPlaceHolder1_dl_ticketmsg_ctl00_lbl_tagline">Message By <b><asp:Label ID="lbl_user_t" runat="server" Text='<%# If(Eval("cargo2").ToString() Is "Admin", "You", Eval("cargo2"))%>'/></b> Line 165: on <asp:Label ID="lbldatetime" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"cargo1","{0:ddd, dd MMMM yyyy}")%>'/></span></td> Line 166: </tr> Source File: c:\Documents and Settings\Vishal\My Documents\Visual Studio 2005\WebSites\OmInvestmentStockMarketing_new\Admin\OWM_Inquiry.aspx Line: 164 Show Detailed Compiler Output: Show Complete Compilation Source: Version Information: Microsoft .NET Framework Version:2.0.50727.3053; ASP.NET Version:2.0.50727.3053

    Read the article

  • Changing the action of a form with javascript/jquery

    - by Micah
    I'm having an issue that is driving me crazy. I'm trying to modify the openid-selector to support facebook. I'm using RPXNow as my provider so it requires the form to be submitted to a different url than the standard. For example. RpxNow requires me to setup my form like this: <form action="https://wikipediamaze.rpxnow.com/openid/start?token_url=..."> This works for every provider except for facebook and myspace. Those require the form to be posted to a different url like this: <form action="https://wikipediamaze.rpxnow.com/facebook/start?token_url=..."> and <form action="https://wikipediamaze.rpxnow.com/myspace/start?token_url=..."> The open id selector has a bunch of buttons on the form each representing the openid providers. What I'm trying to do is detect when the facebook or myspace button is clicked and changed the action on the form before submitting. However it's not working. Here is my code. I've tried several variations all with the same "not supported" exception $("#openid_form").attr("action", form_url) document.forms[0].action = form_url Any suggestions? Update Here are more details on the code. I've ommitted some for brevity. The only thing i've done is added the facebook section to the "providers_large" object (which successfully adds the logo to the website), and instead of supply a url identifying the user, I'm creating a property called "form_url" which is what I want to set the action of my form to. If you look at the section title "Provider image click" you'll see where I'm checking for the presence of the property "form_url" and using jquery to change the action and submit the form. However when I step through the javascript in debug mode it tells me it's an ivalid operation. var providers_large = { google: { name: 'Google', url: 'https://www.google.com/accounts/o8/id' }, facebook: { name: 'Facebook', form_url: 'http://wikipediamaze.rpxnow.com/facebook/start?token_url=http://www.wikipediamaze.com/Accounts/Logon' }, }; var providers_small = { myopenid: { name: 'MyOpenID', label: 'Enter your MyOpenID username.', url: 'http://{username}.myopenid.com/' }, livejournal: { name: 'LiveJournal', label: 'Enter your Livejournal username.', url: 'http://{username}.livejournal.com/' }, flickr: { name: 'Flickr', label: 'Enter your Flickr username.', url: 'http://flickr.com/{username}/' }, technorati: { name: 'Technorati', label: 'Enter your Technorati username.', url: 'http://technorati.com/people/technorati/{username}/' }, wordpress: { name: 'Wordpress', label: 'Enter your Wordpress.com username.', url: 'http://{username}.wordpress.com/' }, blogger: { name: 'Blogger', label: 'Your Blogger account', url: 'http://{username}.blogspot.com/' }, verisign: { name: 'Verisign', label: 'Your Verisign username', url: 'http://{username}.pip.verisignlabs.com/' }, vidoop: { name: 'Vidoop', label: 'Your Vidoop username', url: 'http://{username}.myvidoop.com/' }, verisign: { name: 'Verisign', label: 'Your Verisign username', url: 'http://{username}.pip.verisignlabs.com/' }, claimid: { name: 'ClaimID', label: 'Your ClaimID username', url: 'http://claimid.com/{username}' } }; var providers = $.extend({}, providers_large, providers_small); var openid = { cookie_expires: 6*30, // 6 months. cookie_name: 'openid_provider', cookie_path: '/', img_path: 'images/', input_id: null, provider_url: null, init: function(input_id) { var openid_btns = $('#openid_btns'); this.input_id = input_id; $('#openid_choice').show(); $('#openid_input_area').empty(); // add box for each provider for (id in providers_large) { openid_btns.append(this.getBoxHTML(providers_large[id], 'large', '.gif')); } if (providers_small) { openid_btns.append('<br/>'); for (id in providers_small) { openid_btns.append(this.getBoxHTML(providers_small[id], 'small', '.ico')); } } $('#openid_form').submit(this.submit); var box_id = this.readCookie(); if (box_id) { this.signin(box_id, true); } }, getBoxHTML: function(provider, box_size, image_ext) { var box_id = provider["name"].toLowerCase(); return '<a title="'+provider["name"]+'" href="javascript: openid.signin(\''+ box_id +'\');"' + ' style="background: #FFF url(' + this.img_path + box_id + image_ext+') no-repeat center center" ' + 'class="' + box_id + ' openid_' + box_size + '_btn"></a>'; }, /* Provider image click */ signin: function(box_id, onload) { var provider = providers[box_id]; if (! provider) { return; } this.highlight(box_id); this.setCookie(box_id); // prompt user for input? if (provider['label']) { this.useInputBox(provider); this.provider_url = provider['url']; } else if(provider['form_url']) { $('#openid_form').attr("action", provider['form_url']); $('#openid_form').submit(); } else { this.setOpenIdUrl(provider['url']); if (! onload) { $('#openid_form').submit(); } } }, /* Sign-in button click */ submit: function() { var url = openid.provider_url; if (url) { url = url.replace('{username}', $('#openid_username').val()); openid.setOpenIdUrl(url); } return true; }, setOpenIdUrl: function (url) { var hidden = $('#'+this.input_id); if (hidden.length > 0) { hidden.value = url; } else { $('#openid_form').append('<input type="hidden" id="' + this.input_id + '" name="' + this.input_id + '" value="'+url+'"/>'); } }, highlight: function (box_id) { // remove previous highlight. var highlight = $('#openid_highlight'); if (highlight) { highlight.replaceWith($('#openid_highlight a')[0]); } // add new highlight. $('.'+box_id).wrap('<div id="openid_highlight"></div>'); }, setCookie: function (value) { var date = new Date(); date.setTime(date.getTime()+(this.cookie_expires*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); document.cookie = this.cookie_name+"="+value+expires+"; path=" + this.cookie_path; }, readCookie: function () { var nameEQ = this.cookie_name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }, useInputBox: function (provider) { var input_area = $('#openid_input_area'); var html = ''; var id = 'openid_username'; var value = ''; var label = provider['label']; var style = ''; if (label) { html = '<p>' + label + '</p>'; } if (provider['name'] == 'OpenID') { id = this.input_id; value = 'http://'; style = 'background:#FFF url('+this.img_path+'openid-inputicon.gif) no-repeat scroll 0 50%; padding-left:18px;'; } html += '<input id="'+id+'" type="text" style="'+style+'" name="'+id+'" value="'+value+'" />' + '<input id="openid_submit" type="submit" value="Sign-In"/>'; input_area.empty(); input_area.append(html); $('#'+id).focus(); } };

    Read the article

  • INDY WebService over SSL contains link with HTTP protocol instead of HTTPS in WSDL

    - by user1437820
    When creating new SOAP WebService server project using Delphi XE2 the wizard allows to set change port and HTTPS properties. Port is set to 443, HTTPS flag is checked, but when trying to connect to created server it returns incorrect transport (HTTP instead of HTTPS) in WSDL and generates HTTP links on the Service Info Page. The auto-generated page is not so important, but wrong information in WSDL file is a problem. Below you can see the returned WSDL - there are no HTTPS: <?xml version="1.0"?> <definitions xmlns="http://schemas.xmlsoap.org/wsdl/" xmlns:xs="http://www.w3.org/2001/XMLSchema" name="Itest123service" targetNamespace="http://tempuri.org/" xmlns:tns="http://tempuri.org/" xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:mime="http://schemas.xmlsoap.org/wsdl/mime/" xmlns:ns1="urn:test123Intf"> <types> <schema xmlns="http://www.w3.org/2001/XMLSchema" targetNamespace="urn:test123Intf"> <simpleType name="TEnumTest"> <restriction base="string"> <enumeration value="etNone"/> <enumeration value="etAFew"/> <enumeration value="etSome"/> <enumeration value="etAlot"/> </restriction> </simpleType> <complexType name="TDoubleArray"> <complexContent> <restriction base="soapenc:Array"> <sequence/> <attribute ref="soapenc:arrayType" n1:arrayType="xs:double[]" xmlns:n1="http://schemas.xmlsoap.org/wsdl/"/> </restriction> </complexContent> </complexType> <complexType name="TMyEmployee"> <sequence> <element name="LastName" type="xs:string"/> <element name="FirstName" type="xs:string"/> <element name="Salary" type="xs:double"/> </sequence> </complexType> </schema> </types> <message name="echoEnum0Request"> <part name="Value" type="ns1:TEnumTest"/> </message> <message name="echoEnum0Response"> <part name="return" type="ns1:TEnumTest"/> </message> <message name="echoDoubleArray1Request"> <part name="Value" type="ns1:TDoubleArray"/> </message> <message name="echoDoubleArray1Response"> <part name="return" type="ns1:TDoubleArray"/> </message> <message name="echoMyEmployee2Request"> <part name="Value" type="ns1:TMyEmployee"/> </message> <message name="echoMyEmployee2Response"> <part name="return" type="ns1:TMyEmployee"/> </message> <message name="echoDouble3Request"> <part name="Value" type="xs:double"/> </message> <message name="echoDouble3Response"> <part name="return" type="xs:double"/> </message> <portType name="Itest123"> <operation name="echoEnum"> <input message="tns:echoEnum0Request"/> <output message="tns:echoEnum0Response"/> </operation> <operation name="echoDoubleArray"> <input message="tns:echoDoubleArray1Request"/> <output message="tns:echoDoubleArray1Response"/> </operation> <operation name="echoMyEmployee"> <input message="tns:echoMyEmployee2Request"/> <output message="tns:echoMyEmployee2Response"/> </operation> <operation name="echoDouble"> <input message="tns:echoDouble3Request"/> <output message="tns:echoDouble3Response"/> </operation> </portType> <binding name="Itest123binding" type="tns:Itest123"> <binding xmlns="http://schemas.xmlsoap.org/wsdl/soap/" style="rpc" transport="http://schemas.xmlsoap.org/soap/http"/> <operation name="echoEnum"> <operation xmlns="http://schemas.xmlsoap.org/wsdl/soap/" soapAction="urn:test123Intf-Itest123#echoEnum" style="rpc"/> <input> <body xmlns="http://schemas.xmlsoap.org/wsdl/soap/" use="encoded" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" namespace="urn:test123Intf-Itest123"/> </input> <output> <body xmlns="http://schemas.xmlsoap.org/wsdl/soap/" use="encoded" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" namespace="urn:test123Intf-Itest123"/> </output> </operation> <operation name="echoDoubleArray"> <operation xmlns="http://schemas.xmlsoap.org/wsdl/soap/" soapAction="urn:test123Intf-Itest123#echoDoubleArray" style="rpc"/> <input> <body xmlns="http://schemas.xmlsoap.org/wsdl/soap/" use="encoded" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" namespace="urn:test123Intf-Itest123"/> </input> <output> <body xmlns="http://schemas.xmlsoap.org/wsdl/soap/" use="encoded" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" namespace="urn:test123Intf-Itest123"/> </output> </operation> <operation name="echoMyEmployee"> <operation xmlns="http://schemas.xmlsoap.org/wsdl/soap/" soapAction="urn:test123Intf-Itest123#echoMyEmployee" style="rpc"/> <input> <body xmlns="http://schemas.xmlsoap.org/wsdl/soap/" use="encoded" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" namespace="urn:test123Intf-Itest123"/> </input> <output> <body xmlns="http://schemas.xmlsoap.org/wsdl/soap/" use="encoded" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" namespace="urn:test123Intf-Itest123"/> </output> </operation> <operation name="echoDouble"> <operation xmlns="http://schemas.xmlsoap.org/wsdl/soap/" soapAction="urn:test123Intf-Itest123#echoDouble" style="rpc"/> <input> <body xmlns="http://schemas.xmlsoap.org/wsdl/soap/" use="encoded" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" namespace="urn:test123Intf-Itest123"/> </input> <output> <body xmlns="http://schemas.xmlsoap.org/wsdl/soap/" use="encoded" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" namespace="urn:test123Intf-Itest123"/> </output> </operation> </binding> <service name="Itest123service"> <port name="Itest123Port" binding="tns:Itest123binding"> <address xmlns="http://schemas.xmlsoap.org/wsdl/soap/" location="http://localhost:443/soap/Itest123"/> </port> </service> </definitions> When I'm trying to import WSDL to soapUI tool to check WebService work I need to change manually binding link to "https://" and only then RPCs will work. I will be very grateful for any idea how to force INDY to return links in WSDL with HTTPS protocol. Thanks in advance!

    Read the article

  • Visualising a 'Smarties' lid using XAML (WPF/Silverlight, Visual Studio/Blend)

    - by Mr. Disappointment
    Hi folks, First off, to clarify something in the title which could well be ambiguous/misleading, I'd like to inform you of my definition of 'Smarties', as I know often products are available all over - only under a different alias. Smarties are a candy product in the UK, little chocolate drops covered in a crispy shell which are distributed in a card tube, this tube used to have a plastic lid/top with an individual letter on the underside (they've taken a more economical approach as of late), the lid/top of the old-style tube is the main element of this question. Familiarisation Link Lid View Link Okay, now with the seller-type pitch out of the way (no, I don't work for Nestlé ;)), hopefully the question is becoming rather clear. Essentially, I'd like to recreate one of these lids using XAML, ultimately to be utilised in a Silverlight web application. That is, I'd like to result in a reusable control, of which the following is true: It looks like a Smarties lid. The colour can be specified. The letter can be specified. The control can be rotated to display either side. The second two seem trivial, but we must bare in mind that the background colour specified will almost, if not always, be the same as the foreground, leaving a visibility issue where the character content is concerned; as for the rotation, I'm hoping this kind of functionality is reasonably available, and acceptable to implement. So, to put this out there, consider a control named SmartiesLid which derives from ToggleButton (appropriate?) and further plotted out using a style in a resource dictionary which applies to it, as follows: <Style TargetType="local:SmartiesLid"> <Setter Property="Background" Value="Red"/> <Setter Property="Foreground" Value="Red"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:SmartiesLid"> <Grid x:Name="LayoutRoot"> <Grid.ColumnDefinitions> <ColumnDefinition Width=".05*"/> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition Width=".05*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height=".05*"/> <RowDefinition/> <RowDefinition/> <RowDefinition Height=".05*"/> <RowDefinition Height=".1*"/> </Grid.RowDefinitions> <Ellipse Grid.RowSpan="4" Grid.ColumnSpan="4" Fill="{TemplateBinding Background}" Stroke="Transparent"/> <Ellipse Grid.RowSpan="2" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1" Fill="{TemplateBinding Background}" Stroke="Transparent"> <Ellipse.Effect> <DropShadowEffect Direction="280" ShadowDepth="6" BlurRadius="6"/> </Ellipse.Effect> </Ellipse> <TextBlock Grid.RowSpan="2" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1" Name="LetterTextBlock" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" FontSize="190" HorizontalAlignment="Center" VerticalAlignment="Center"> </TextBlock> <!-- <Path Stretch="Fill" Grid.Row="3" Grid.RowSpan="2" Grid.Column="1" Grid.ColumnSpan="2" Fill="Black" Data="..."> How to craw the lid 'tab'? </Path> --> </Grid> <ControlTemplate.Resources> <TranslateTransform x:Key="IndentTransform" X="10" /> <RotateTransform x:Key="RotateTransform" Angle="0" /> <Storyboard x:Key="MouseOver"> </Storyboard> <Storyboard x:Key="MouseLeave"> </Storyboard> </ControlTemplate.Resources> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Trigger.EnterActions> <BeginStoryboard Storyboard="{StaticResource MouseOver}"/> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard Storyboard="{StaticResource MouseLeave}"/> </Trigger.ExitActions> </Trigger> <Trigger Property="IsPressed" Value="true"> <Setter TargetName="LayoutRoot" Property="RenderTransform" Value="{StaticResource IndentTransform}"/> </Trigger> <Trigger Property="IsChecked" Value="true"> <Setter TargetName="LayoutRoot" Property="RenderTransform" Value="{StaticResource RotateTransform}"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Foreground" Value="Gray"/> <Setter Property="Opacity" Value="0.5"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> With this in mind, can anyone give input on, in decreasing order of my incompetence in an area: Designing the overall look and feel of the damn thing (I'm no designer, and while I could hack away at this single control for days and potentially get something relatively useful, it's always a gamble). The particular barrier for me here is 'pathing' the tab of the lid, as you will see in the XAML as an element commented out. Should Path be used, or would it be more appropriate to transform a rectangle with rounded corners, or any specific suggestions? Bevelling the individually displayed letter; as detailed above, when the colour of both the foreground and background are the same then this will be invisible if no effects are applied, also for a decent level of realism I'd like to be able to apply such an effect/s. So far use of DropShadow and Balder3DEngine have fulfilled my requirements for graphics in XAML, how achievable is a bevel effect? Rotating the control on mouse-click, that is, showing the opposing face. Is this going to be possible using a style and XAML only for the design? Or is it that ugliness may rear it's head in the form of code-behind to show/hide embedded controls? Should the faces be separate controls and later somehow combined? Allowing the control to size dynamically. I'm supposing I will be able to convert a solid, absolute layout to a nice generic one when I actually have the former in place. Obviously this entails sizing the centralised letter and the lid 'tab', but that's it really, other than keeping the aspect ratio equal (since the ellipses grow nicely with the grid). Any suggestions to approaching this would be greatly appreciated, particularly with a dynamically growing font - I've done that before in a web-imaging scenario using code and System.Drawing, and wouldn't like to approach it in even a similar way. By the way, the reason I specify both WPF and Silverlight is that, from my current knowledge, the inputs being written targeting either of these will be fairly transferable for similar output by the other, albeit not without alterations in either scenario. The resulting application is in fact destined to be written in Silverlight, however, so I don't fancy inviting anything from WPF which will guarantee my only being able to convert 90% of it. I'll go give this little project a start, maybe in Blend(?), hopefully can catch up with some advice shortly. Thanks, Mr. D EDIT: Next question, ought this to be broken up into separate questions? :/

    Read the article

  • MVC4 Model in View has nested data - cannot get data in model

    - by Taersious
    I have a Model defined that gets me a View with a list of RadioButtons, per IEnumerable. Within that Model, I want to display a list of checkboxes that will vary based on the item selected. Finally, there will be a Textarea in the same view once the user has selected from the available checkboxes, with some dynamic text there based on the CheckBoxes that are selected. What we should end up with is a Table-per-hierarchy. The layout is such that the RadioButtonList is in the first table cell, the CheckBoxList is in the middle table cell, and the Textarea is ini the right table cell. If anyone can guide me to what my model-view should be to achieve this result, I'll be most pleased... Here are my codes: // // View Model for implementing radio button list public class RadioButtonViewModel { // objects public List<RadioButtonItem> RadioButtonList { get; set; } public string SelectedRadioButton { get; set; } } // // Object for handling each radio button public class RadioButtonItem { // this object public string Name { get; set; } public bool Selected { get; set; } public int ObjectId { get; set; } // columns public virtual IEnumerable<CheckBoxItem> CheckBoxItems { get; set; } } // // Object for handling each checkbox public class CheckBoxViewModel { public List<CheckBoxItem> CheckBoxList { get; set; } } // // Object for handling each check box public class CheckBoxItem { public string Name { get; set; } public bool Selected { get; set; } public int ObjectId { get; set; } public virtual RadioButtonItem RadioButtonItem { get; set; } } and the view @model IEnumerable<EF_Utility.Models.RadioButtonItem> @{ ViewBag.Title = "Connect"; ViewBag.Selected = Request["name"] != null ? Request["name"].ToString() : ""; } @using (Html.BeginForm("Objects" , "Home", FormMethod.Post) ){ @Html.ValidationSummary(true) <table> <tbody> <tr> <td style="border: 1px solid grey; vertical-align:top;"> <table> <tbody> <tr> <th style="text-align:left; width: 50px;">Select</th> <th style="text-align:left;">View or Table Name</th> </tr> @{ foreach (EF_Utility.Models.RadioButtonItem item in @Model ) { <tr> <td> @Html.RadioButton("RadioButtonViewModel.SelectedRadioButton", item.Name, ViewBag.Selected == item.Name ? true : item.Selected, new { @onclick = "this.form.action='/Home/Connect?name=" + item.Name + "'; this.form.submit(); " }) </td> <td> @Html.DisplayFor(i => item.Name) </td> </tr> } } </tbody> </table> </td> <td style="border: 1px solid grey; width: 220px; vertical-align:top; @(ViewBag.Selected == "" ? "display:none;" : "")"> <table> <tbody> <tr> <th>Column </th> </tr> <tr> <td><!-- checkboxes will go here --> </td> </tr> </tbody> </table> </td> <td style="border: 1px solid grey; vertical-align:top; @(ViewBag.Selected == "" ? "display:none;" : "")"> <textarea name="output" id="output" rows="24" cols="48"></textarea> </td> </tr> </tbody> </table> } and the relevant controller public ActionResult Connect() { /* TEST SESSION FIRST*/ if( Session["connstr"] == null) return RedirectToAction("Index"); else { ViewBag.Message = ""; ViewBag.ConnectionString = Server.UrlDecode( Session["connstr"].ToString() ); ViewBag.Server = ParseConnectionString( ViewBag.ConnectionString, "Data Source" ); ViewBag.Database = ParseConnectionString( ViewBag.ConnectionString, "Initial Catalog" ); using( var db = new SysDbContext(ViewBag.ConnectionString)) { var objects = db.Set<SqlObject>().ToArray(); var model = objects .Select( o => new RadioButtonItem { Name = o.Name, Selected = false, ObjectId = o.Object_Id, CheckBoxItems = Enumerable.Empty<EF_Utility.Models.CheckBoxItem>() } ) .OrderBy( rb => rb.Name ); return View( model ); } } } What I am missing it seems, is the code in my Connect() method that will bring the data context forward; at that point, it should be fairly straight-forward to set up the Html for the View. EDIT ** So I am going to need to bind the RadioButtonItem to the view with something like the following, except my CheckBoxList will NOT be an empty set. // // POST: /Home/Connect/ [HttpPost] public ActionResult Connect( RadioButtonItem rbl ) { /* TEST SESSION FIRST*/ if ( Session["connstr"] == null ) return RedirectToAction( "Index" ); else { ViewBag.Message = ""; ViewBag.ConnectionString = Server.UrlDecode( Session["connstr"].ToString() ); ViewBag.Server = ParseConnectionString( ViewBag.ConnectionString, "Data Source" ); ViewBag.Database = ParseConnectionString( ViewBag.ConnectionString, "Initial Catalog" ); using ( var db = new SysDbContext( ViewBag.ConnectionString ) ) { var objects = db.Set<SqlObject>().ToArray(); var model = objects .Select( o => new RadioButtonItem { Name = o.Name, Selected = false, ObjectId = o.Object_Id, CheckBoxItems = Enumerable.Empty<EF_Utility.Models.CheckBoxItem>() } ) .OrderBy( rb => rb.Name ); return View( model ); } } }

    Read the article

  • Using jQuery to slideToggle a group of Table Rows

    - by CCC
    Hi. I'm fairly new to javaScript and jQuery, so hopefully this will be a quick fix. I need to display a table containing data that can be grouped into several categories, and I'd like to implement a slideToggle that hides/reveals all of the observations in each given category. The code below should (ideally) display a table with 4 columns and 9 rows, with every group of 3 rows preceded by a green "Section i" row. I would like each Section header to work as a slideToggle that expands or collapses all of the rows beneath it. Right now, nothing is collapsing. Any thoughts? <head> <style type="text/css"> td{padding:5px;} </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(this).next(".section").slideToggle(); }); }); </script> </head> <body> <p> <table id="main_table"> <thead> <tr class="firstline"> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> </tr> </thead> <tbody> <tr style="background-color:green; color:white"> <td colspan="4" class="flip"> Section 1 </td> </tr> <div class="section"> <tr> <td>item 111</td> <td>item 112</td> <td>item 113</td> <td>item 114</td> </tr> <tr> <td>item 121</td> <td>item 122</td> <td>item 123</td> <td>item 124</td> </tr> <tr> <td>item 131</td> <td>item 132</td> <td>item 133</td> <td>item 134</td> </tr> </div> <tr style="background-color:green; color:white"> <td colspan="4" class="flip"> Section 2 </td> </tr> <div class="section"> <tr> <td>item 211</td> <td>item 212</td> <td>item 213</td> <td>item 214</td> </tr> <tr> <td>item 221</td> <td>item 222</td> <td>item 223</td> <td>item 224</td> </tr> <tr> <td>item 231</td> <td>item 232</td> <td>item 233</td> <td>item 234</td> </tr> </div> <tr style="background-color:green; color:white"> <td colspan="4" class="flip"> Section 3 </td> </tr> <div class="section"> <tr> <td>item 311</td> <td>item 312</td> <td>item 313</td> <td>item 314</td> </tr> <tr> <td>item 321</td> <td>item 322</td> <td>item 323</td> <td>item 324</td> </tr> <tr> <td>item 331</td> <td>item 332</td> <td>item 333</td> <td>item 334</td> </tr> </div> </tbody> </table> </p> </body>

    Read the article

  • Stretch UL to fill the entire DIV

    - by Interfaith
    There is a similar post: Stretch horizontal ul to fit width of div But mine is a little bit tricky, as I have tried the above example but failed. My code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-… <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/li… <script> function mainmenu(){ $(" #nav ul ").css({display: "none"}); // Opera Fix $(" #nav li").hover(function(){ $(this).find('ul:first').css({visibi… "visible",display: "none"}).show(400); },function(){ $(this).find('ul:first').css({visibi… "hidden"}); }); } $(document).ready(function(){ mainmenu(); }); </script> <style> body{ font-size:0.85em; font-family:Verdana, Arial, Helvetica, sans-serif; } #nav, #nav ul{ margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; display: table; width: 100%; } #nav a{ display:block; padding:10px 15px 10px 15px; border:1px solid #fff; color:#fff; text-align: center; margin:0; text-decoration:none; background: #C34328; border-top:1px solid #EF593B; -moz-box-shadow:0px 3px 4px #591E12 inset; -webkit-box-shadow:0px 3px 4px #591E12 inset; -box-shadow:0px 3px 4px #591E12 inset; } #nav a:hover{ background-color:#fff; color:#333; } #nav li{ float:left; position:relative; } #nav ul { position:absolute; display:none; width:12em; top:3.2em; } #nav li ul a{ width:12em; height:auto; float:left; } #nav ul ul{ top:auto; } #nav li ul ul { left:12em; margin:0px 0 0 10px; } </style> </head> <body> <div style="width: 980px; border: 1px black solid;"> <ul id="nav"> <li><a href="#">Find a Doctor</a></li> <li><a href="#">Why Interfaith</a></li> <li><a href="#">For Patients & Visitors</a> <ul> <li><a href="#">3.1 jQuery</a></li> <li><a href="#">3.2 Mootools</a></li> <li><a href="#">3.3 Prototype</a></li> </ul> </li> <li><a href="#">Medical Services</a> <ul> <li><a href="#">Behavioral Health</a></li> <li><a href="#">Clinical Laboratory</a></li> <li><a href="#">Dentistry</a></li> <li><a href="#">Emergency</a></li> <li><a href="#">Gynecology</a></li> <li><a href="#">Medicine</a></li> <li><a href="#">Pastoral</a></li> <li><a href="#">Pediatrics</a></li> <li><a href="#">Physical Medicine & Rehab</a></li> </ul> </li> <li><a href="#">Medical Trainings</a> <ul> <li><a href="#">Medical Training</a></li> <li><a href="#">Behavioral Health</a></li> <li><a href="#">Predoctoral Externship</a></li> <li><a href="#">Podiatric Residency</a></li> <li><a href="#">Dental Residency</a></li> <li><a href="#">Pulmonary Medicine</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html> Can someone tell me where I have to edit to complete the code? Thanks

    Read the article

  • css menu for cross browser...mobile and desktop

    - by user1763319
    I made a cross browser drop down menu, which works well with IE6. However, I have problems with other browsers such as IE9, Firefox, Chrome... etc. How can I modify my HTML and CSS to get the same effect that works in IE6? Link to JSFiddle Here is my CSS: <style> .bar ul,li{ z-index:999; margin:0; padding:0; } .bar { color: #FFFFFF; font-weight: bold; text-align: center; } .bar a { padding: 11px; } .bar a:visited { color: #FFFFFF; font-weight: bold; text-decoration:none } .bar a:link { color: #FFFFFF; font-weight: bold; text-decoration:none } .bar a:hover { color: #FFFFFF; font-weight: bold; text-decoration:underline } #nav0{ list-style:none; font-weight:bold; /* Clear floats */ float:left; width:100%; } #nav0 li{ float:left; margin-right:10px; position:relative; } #nav0 a{ display:block; padding:5px; color:#fff; background:#003399; text-decoration:none; } #nav0 a:hover{ color:#fff; background:#333; text-decoration:underline; } /*--- DROPDOWN ---*/ #nav0 ul{ background:#fff; background:rgba(255,255,255,0); list-style:none; position:absolute; left:-9999px; } #nav0 ul li{ padding-top:1px; float:none; } #nav0 ul a{ white-space:nowrap; } #nav0 li:hover ul{ left:0; } #nav0 li:hover a{ text-decoration:underline; } #nav0 li:hover ul a{ text-decoration:none; } #nav0 li:hover ul li a:hover{ background:#333; } #nav0 li ul li a{ text-align: left; } #nav0 li:hover ul li ul { display:block; background:#003399; float:left; position:relative; padding-left:20px; } #nav0 li ul li:hover ul { display:block; background:#003399; float:left; position:relative; padding-left:20px; } </style> Here is my HTML: <body bgcolor="#79A6A6"> <div id="page" align="center"> <table class="bar" border="0" width="960" cellspacing="0" cellpadding="0" id="table_bar" bgcolor="#003399"> <tr> <td> <ul id="nav0"> <li><a><strong>Home</strong> </a> <ul> <li><a href="#" title>Top Item 1</a><ul> <li><a href="#" title="-">Item 1</a></li> <li><a href="#" title="-">Item 2</a></li> </ul> </li> <li><a href="#" title>Top Item 2</a><ul> <li><a href="@" title>Item 3</a></li> <li><a href="@" title>Item 4</a></li> </ul> </li> </ul> </li> <li><a><strong>Home</strong> </a> <ul> <li><a href="#" title>Top Title</a><ul> <li><a href="#" title="-">title</a></li> <li><a href="#" title="-">title123456789</a></li> </ul> </li> <li><a href="#" title>Top Hello</a><ul> <li><a href="@" title>hello</a></li> <li><a href="@" title>hello123456789</a></li> </ul> </li> </ul> </li> </ul> </li> <ul> </ul> </td> <td width="50" style="text-align: left">&nbsp;</td> </tr> </table> </div> </body> In ie6 Home Top Item 1 Item 1 Item 2 Top Item 2 Item3 Item4 In ie9 Home Top Item 1 Top Item 2 Item 2 Item 3 Item 4

    Read the article

  • CSS list menu; extra padding on rollover of buttons

    - by user1669878
    I have been going crazy trying to figure out why there is extra padding showing up on my navigation buttons when I rollover them. It's only showing up to the left and right of them though. Here's a link to the screenshot of what it looks like: http://i179.photobucket.com/albums/w319/jdauel/Screenshot2012-09-13at25417PM.png I think it has something to do with my CSS but I have no idea anymore. Please help me??? I tried using Firebug to figure it out with no prevail. Here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Farren's Photography</title> <style type="text/css"> html { height: 100%; width: 100%; } body { margin: 0px; } #container { font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.2em; color: #000; background-color: #06F; text-align: left; padding: 0px; height: 650px; width: 960px; margin-right: auto; margin-left: auto; background-image: url(images/background_image.png); background-repeat: no-repeat; margin-top: 45px; } a:link { color: #FFF; } a:visited { color: #FFF; } a:hover { color: #FFF; } #container #logo { } #container #logo #fp-logo { background-image: url(images/logo.png); height: 137px; width: 408px; text-indent: -9999px; display: block; } #logo { height: 137px; width: 408px; position: relative; padding-top: 35px; padding-right: 0px; padding-bottom: 0px; padding-left: 35px; } #main { background-color: #FFF; min-height: 383px; width: 707px; position: relative; left: 217px; top: 16px; right: 36px; bottom: 113px; } #container #navbar { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #FFF; text-align: right; height: 45px; background-color: #CC0000; position: relative; top: 8px; bottom: 0px; left: 0px; right: 0px; } #container #navbar ul li a { text-decoration: none; } #container #navbar ul { list-style-type: none; padding-top: 16px; } #container #navbar ul li { display: inline; background-color: #280803; margin: 0px; height: 0px; width: 0px; position: relative; padding-top: 16px; padding-right: 15px; padding-bottom: 17px; padding-left: 15px; } #container #navbar ul li a:link { text-decoration: none; color: #FFF; } #container #navbar ul li a:visited { text-decoration: none; color: #FFF; } #container #navbar ul li a:hover { text-decoration: none; color: #FFF; background-color: #027e8e; padding-top: 16px; padding-right: 15px; padding-bottom: 17px; padding-left: 15px; margin: 0px; } #footer { font-family: Arial, Helvetica, sans-serif; font-size: x-small; height: 28px; position: relative; top: 8px; color: #FFF; font-style: italic; } </style> </head> <body> <div id="container"> <div id="logo"><a href="http://www.farrensphotography.com" title="Farren's Photography" target="_self" id="fp-logo">Farren's Photography</a></div><!-- end logo --> <div id="main"> <div id="content"> </div><!-- end content --> </div><!-- end main --> <div id="navbar"> <ul> <li><a href="index.html" target="_self">Home</a></li> <li><a href="portfolio.html" target="_self">Portfolio</a></li> <li><a href="mystyle.html" target="_self">My Style</a></li> <li><a href="specials.html" target="_self">Specials</a></li> <li><a href="pricing.html" target="_self">Pricing</a></li> <li><a href="contact.html" target="_self">Contact</a></li> </ul> </div> <!-- end navbar --> <div id="footer"> <div id="copyright">All images copyright© Farrens Photography </div><!-- end copyright --> <div id="network">Facebook button </div><!-- end network --> </div><!-- end footer --> </div><!-- end container --> </body> </html>

    Read the article

  • strange sqares like hints in Silverlight application?

    - by lina
    Good day! Strange square appears on mouse hover on text boxes, buttons, etc (something like hint) in a silverlight navigation application - how can I remove it? a scrin shot an example .xaml page: <Code:BasePage x:Class="CAP.Views.Main" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" xmlns:Code="clr-namespace:CAP.Code" d:DesignWidth="640" d:DesignHeight="480" Title="?????? ??????? ???????? ??? ?????"> <Grid x:Name="LayoutRoot"> <Grid.RowDefinitions> <RowDefinition Height="103*" /> <RowDefinition Height="377*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="120*" /> <ColumnDefinition Width="520*" /> </Grid.ColumnDefinitions> <Image Height="85" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="84" Margin="12,0,0,0" ImageFailed="image1_ImageFailed" Source="/CAP;component/Images/My-Computer.png" /> <TextBlock Grid.Column="1" Height="Auto" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="0,12,0,0" Name="textBlock1" Text="Good day!" VerticalAlignment="Top" FontFamily="Verdana" FontSize="16" Width="345" FontWeight="Bold" /> <TextBlock Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" Height="299" HorizontalAlignment="Left" Name="textBlock2" VerticalAlignment="Top" FontFamily="Verdana" FontSize="14" Width="441" > <Run Text="Some text "/><LineBreak/><LineBreak/><Run Text="and so on"/> <LineBreak/> </TextBlock> </Grid> xaml.cs: using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Windows.Navigation; using CAP.Code; namespace CAP.Views { public partial class Main : BasePage { public Main() : base() { InitializeComponent(); MapBuilder.AddToMap(new SiteMapUnit() { Caption = "???????", RelativeUrl = "Main" },true); ((App)Application.Current).Mainpage.tvMainMenu.SelectedItems.Clear(); } // Executes when the user navigates to this page. protected override void OnNavigatedTo(NavigationEventArgs e) { } private void image1_ImageFailed(object sender, ExceptionRoutedEventArgs e) { } protected override string[] NeededPermission() { return new string[0]; } } } MainPage.xaml <UserControl x:Class="CAP.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Code="clr-namespace:CAP.Code" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" mc:Ignorable="d" Margin="0,0,0,0" Width="auto" Height="auto" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"> <ScrollViewer Width="auto" Height="auto" BorderBrush="White" BorderThickness="0" Margin="0,0,0,0" x:Name="sV" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" > <ScrollViewer.Content> <Grid Width="auto" Height="auto" x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}" Margin="0,0,0,0"> <StackPanel Width="auto" Height="auto" Orientation="Vertical" Margin="250,0,0,50"> <Border x:Name="ContentBorder2" Margin="0,0,0,0" > <!--<navigation:Frame Margin="0,0,0,0" Width="auto" Height="auto" x:Name="AnotherFrame" VerticalAlignment="Top" Style="{StaticResource ContentFrameStyle}" Source="/Views/Menu.xaml" NavigationFailed="ContentFrame_NavigationFailed" JournalOwnership="OwnsJournal" Loaded="AnotherFrame_Loaded"> </navigation:Frame>--> <StackPanel Orientation="Vertical" Height="82" Width="Auto" HorizontalAlignment="Right" Margin="0,0,0,0" DataContext="{Binding}"> <TextBlock HorizontalAlignment="Right" Foreground="White" x:Name="ApplicationNameTextBlock4" Style="{StaticResource ApplicationNameStyle}" FontSize="20" Text="?????? ???????" Margin="20,16,20,0"/> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Image x:Name="imDoor" Visibility="Collapsed" MouseEnter="imDoor_MouseEnter" MouseLeave="imDoor_MouseLeave" Height="24" Stretch="Fill" Width="25" Margin="10,0,10,0" Source="/CAP;component/Images/sm_white_doors.png" MouseLeftButtonDown="bTest_Click" /> <TextBlock x:Name="bLogout" MouseEnter="bLogout_MouseEnter" MouseLeave="bLogout_MouseLeave" TextDecorations="Underline" Margin="0,6,20,4" Height="23" Text="?????" HorizontalAlignment="Right" Visibility="Collapsed" MouseLeftButtonDown="bTest_Click" FontFamily="Verdana" FontSize="13" FontWeight="Normal" Foreground="#FF1C1C92" /> </StackPanel> </StackPanel> </Border> <Border x:Name="bSiteMap" Margin="0,0,0,0" > <StackPanel x:Name="spSiteMap" Orientation="Horizontal" Height="20" Width="Auto" HorizontalAlignment="Left" Margin="0,0,0,0" DataContext="{Binding}"> <!-- <TextBlock Visibility="Visible" TextDecorations="Underline" Height="23" HorizontalAlignment="Left" x:Name="ar" Text="1" VerticalAlignment="Top" Foreground="Blue" FontFamily="Verdana" FontSize="13" /> <TextBlock Visibility="Visible" Height="23" HorizontalAlignment="Left" x:Name="Map" Text="->" VerticalAlignment="Top" Foreground="Blue" FontFamily="Verdana" FontSize="13" /> <TextBlock Visibility="Visible" TextDecorations="Underline" Height="23" HorizontalAlignment="Left" x:Name="ar1" Text="2" VerticalAlignment="Top" Foreground="Blue" FontFamily="Verdana" FontSize="13" /> <TextBlock Visibility="Visible" Height="23" HorizontalAlignment="Left" x:Name="Map1" Text="->" VerticalAlignment="Top" Foreground="Blue" FontFamily="Verdana" FontSize="13" /> <TextBlock Visibility="Visible" TextDecorations="Underline" Height="23" HorizontalAlignment="Left" x:Name="ar2" Text="3" VerticalAlignment="Top" Foreground="Blue" FontFamily="Verdana" FontSize="13" />--> </StackPanel> </Border> <Border Width="auto" Height="auto" x:Name="ContentBorder" Margin="0,0,0,0" > <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" Source="Main" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed" ToolTipService.ToolTip=" " Margin="0,0,0,0"> <navigation:Frame.UriMapper> <uriMapper:UriMapper> <!--Client--> <uriMapper:UriMapping Uri="RegistrateClient" MappedUri="/Views/Client/RegistrateClient.xaml"/> <!--So on--> </uriMapper:UriMapper> </navigation:Frame.UriMapper> </navigation:Frame> </Border> </StackPanel> <Grid x:Name="NavigationGrid" Style="{StaticResource NavigationGridStyle}" Margin="0,0,0,0" Background="{x:Null}" > <StackPanel Orientation="Vertical" Height="Auto" Width="250" HorizontalAlignment="Center" Margin="0,0,0,50" DataContext="{Binding}"> <Image Width="150" Height="90" HorizontalAlignment="Center" VerticalAlignment="Top" Source="/CAP;component/Images/logo__au.png" Margin="0,20,0,70"/> <Border x:Name="BrandingBorder" MinHeight="222" Width="250" Style="{StaticResource BrandingBorderStyle3}" HorizontalAlignment="Center" Opacity="60" Margin="0,0,0,0"> <Border.Background> <ImageBrush ImageSource="/CAP;component/Images/papka.png"/> </Border.Background> <Grid Width="250" x:Name="LichniyCabinet" Margin="0,10,0,0" HorizontalAlignment="Center" Height="211"> <Grid.ColumnDefinitions> <ColumnDefinition Width="19*" /> <ColumnDefinition Width="62*" /> <ColumnDefinition Width="151*" /> <ColumnDefinition Width="18*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="13" /> <RowDefinition Height="24" /> <RowDefinition Height="35" /> <RowDefinition Height="35" /> <RowDefinition Height="43" /> <RowDefinition Height="28" /> <RowDefinition Height="32*" /> </Grid.RowDefinitions> <TextBlock Visibility="Visible" Grid.Row="2" Height="23" HorizontalAlignment="Left" x:Name="tLogin" Text="?????" VerticalAlignment="Top" FontFamily="Verdana" FontSize="13" Foreground="White" Margin="1,0,0,0" Grid.Column="1" /> <TextBlock Visibility="Visible" FontFamily="Verdana" FontSize="13" Foreground="White" Height="23" HorizontalAlignment="Left" x:Name="tPassw" Text="??????" VerticalAlignment="Top" Grid.Row="3" Grid.Column="1" /> <TextBox Visibility="Visible" Grid.Column="2" Grid.Row="2" Height="24" HorizontalAlignment="Left" x:Name="logLogin" VerticalAlignment="Top" Width="150" /> <PasswordBox Visibility="Visible" Code:DefaultButtonService.DefaultButton="{Binding ElementName=bLogin}" PasswordChar="*" Height="24" HorizontalAlignment="Left" x:Name="logPassword" VerticalAlignment="Top" Width="150" Grid.Column="2" Grid.Row="3" /> <Button x:Name="bLogin" MouseEnter="bLogin_MouseEnter" MouseLeave="bLogin_MouseLeave" Visibility="Visible" Content="?????" Grid.Column="2" Grid.Row="4" Click="Button_Click" Height="23" HorizontalAlignment="Left" Margin="81,0,0,0" VerticalAlignment="Top" Width="70" /> <TextBlock MouseLeftButtonDown="ForgotPassword_MouseLeftButtonDown" MouseEnter="ForgotPassword_MouseEnter" MouseLeave="ForgotPassword_MouseLeave" Visibility="Visible" TextDecorations="Underline" Grid.ColumnSpan="2" Grid.Row="4" Height="23" HorizontalAlignment="Left" x:Name="ForgotPassword" Text="?????? ???????" VerticalAlignment="Top" Foreground="White" FontFamily="Verdana" FontSize="13" Grid.Column="1" /> <TextBlock MouseEnter="tbRegistration_MouseEnter" MouseLeave="tbRegistration_MouseLeave" MouseLeftButtonDown="tbRegistration_MouseLeftButtonDown" Grid.Column="2" Grid.Row="6" Height="23" x:Name="tbRegistration" TextDecorations="Underline" Text="???????????" VerticalAlignment="Top" FontFamily="Verdana" FontSize="13" TextAlignment="Center" HorizontalAlignment="Center" Foreground="#FF1C1C92" FontWeight="Normal" Margin="0,0,57,0" /> <TextBlock Cursor="Arrow" Height="23" HorizontalAlignment="Left" Margin="11,-3,0,0" Text="?????? ???????" VerticalAlignment="Top" Grid.ColumnSpan="3" Grid.RowSpan="2" FontFamily="Verdana" FontSize="13" FontWeight="Bold" Foreground="White" /> <Image Visibility="Collapsed" Height="70" x:Name="imUser" Stretch="Fill" Width="70" Grid.ColumnSpan="2" Margin="11,0,0,0" Grid.Row="2" Grid.RowSpan="2" Source="/CAP;component/Images/user2.png" /> <TextBlock x:Name="tbHello" Grid.Column="2" Visibility="Collapsed" Grid.Row="2" Height="auto" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="6,0,0,0" Text="" VerticalAlignment="Top" FontFamily="Verdana" FontSize="13" Foreground="White" Width="145" /> </Grid> </Border> <Border x:Name="MenuBorder" Margin="0,0,0,50" Width="250" Visibility="Collapsed"> <StackPanel x:Name="spMenu" Width="240" HorizontalAlignment="Left"> <telerikNavigation:RadTreeView x:Name="tvMainMenu" Width="240" Selected="TreeView1_Selected" SelectedValuePath="Text" telerik:Theming.Theme="Windows7" FontFamily="Verdana" FontSize="12"/> </StackPanel> </Border> </StackPanel> </Grid> <Border x:Name="FooterBorder" VerticalAlignment="Bottom" Width="auto" Height="76"> <Border.Background> <ImageBrush ImageSource="/CAP;component/Images/footer2.png" /> </Border.Background> <TextBlock x:Name="tbFooter" Height="24" Width="auto" Margin="0,20,0,0" TextAlignment="Center" HorizontalAlignment="Stretch" VerticalAlignment="Center" Foreground="White" FontFamily="Verdana" FontSize="11"> </TextBlock> </Border> </Grid> </ScrollViewer.Content> </ScrollViewer> </UserControl> MainPage.xaml.cs using System; using System.Collections.Generic; using System.Linq; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Navigation; using CAP.Code; using CAP.Registrator; using System.Windows.Input; using System.ComponentModel.DataAnnotations; using System.Windows.Browser; using Telerik.Windows.Controls; using System.Net; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Navigation; using System.Windows.Shapes; namespace CAP { public partial class MainPage { public App Appvars = Application.Current as App; private readonly RegistratorClient registrator; public SiteMapBuilder builder; public MainPage() { InitializeComponent(); sV.SetIsMouseWheelScrollingEnabled(true); builder = new SiteMapBuilder(spSiteMap); try { //working with service } catch { this.ContentFrame.Navigate(new Uri(String.Format("ErrorPage"), UriKind.RelativeOrAbsolute)); } } /// Recursive method to update the correct scrollviewer (if exists) private ScrollViewer CheckParent(FrameworkElement element) { ScrollViewer _result = element as ScrollViewer; if (element != null && _result == null) { FrameworkElement _temp = element.Parent as FrameworkElement; _result = CheckParent(_temp); } return _result; } // If an error occurs during navigation, show an error window private void ContentFrame_NavigationFailed(object sender, NavigationFailedEventArgs e) { e.Handled = true; ChildWindow errorWin = new ErrorWindow(e.Uri); errorWin.Show(); } } }

    Read the article

  • Blending the Sketchflow Action

    - by GeekAgilistMercenary
    Started a new Sketchflow Prototype in Expression Blend recently and documented each of the steps.  This blog entry covers some of those steps, which are the basic elements of any prototype.  I will have more information regarding design, prototype creation, and the process of the initial phases for development in the future.  For now, I hope you enjoy this short walk through.  Also, be sure to check out my last quick entry on Sketchflow. I started off with a Sketchflow Project, just like I did in my previous entry (more specifics in that entry about how to manipulate and build out the Sketchflow Map). Once I created the project I setup the following Sketchflow Map. The CoreNavigation is a ComponentScreen setup solely for the page navigation at the top of the screen.  The XAML markup in case you want to create a Component Screen with the same design is included below. <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:pb="clr-namespace:Microsoft.Expression.Prototyping.Behavior;assembly=Microsoft.Expression.Prototyping.Interactivity" x:Class="RapidPrototypeSketchScreens.CoreNavigation" d:DesignWidth="624" d:DesignHeight="49" Height="49" Width="624">   <Grid x:Name="LayoutRoot"> <TextBlock HorizontalAlignment="Stretch" Margin="307,3,0,0" Style="{StaticResource TitleCenter-Sketch}" Text="Aütøchart Scorecards" TextWrapping="Wrap"> <i:Interaction.Triggers> <i:EventTrigger EventName="MouseLeftButtonDown"> <pb:NavigateToScreenAction TargetScreen="RapidPrototypeSketchScreens.Screen_1"/> </i:EventTrigger> </i:Interaction.Triggers> </TextBlock> <Button HorizontalAlignment="Left" Margin="164,8,0,11" Style="{StaticResource Button-Sketch}" Width="144" Content="Scorecard"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <pb:NavigateToScreenAction TargetScreen="RapidPrototypeSketchScreens.Screen_1_2"/> </i:EventTrigger> </i:Interaction.Triggers> </Button> <Button HorizontalAlignment="Left" Margin="8,8,0,11" Style="{StaticResource Button-Sketch}" Width="152" Content="Standard Reports"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <pb:NavigateToScreenAction TargetScreen="RapidPrototypeSketchScreens.Screen_1_1"/> </i:EventTrigger> </i:Interaction.Triggers> </Button> </Grid> </UserControl> Now that the CoreNavigation Component Screen is done I built out each of the others.  In each of those screens I included the CoreNavigation Screen (all those little green lines in the image) as the top navigation.  In order to do that, as I created each of the pages I would hover over the CoreNavigation Object in the Sketchflow Map.  When the utilities drawer (the small menu that pops down under a node when you hover over it) shows click on the third little icon and drag it onto the page node you want a navigation screen on. Once I created all the screens I setup the navigation by opening up each screen and right clicking on the objects that needed to point to somewhere else in the prototype. Once I was done with the main page, my Home Navigation Page, it looked something like this in the Expression Blend Designer. I fleshed out each of the additional screens.  Once I was done I wanted to try out the deployment package.  The way to deploy a Sketchflow Prototype is to merely click on File –> Package SketchFlow Project and a prompt will appear.  In the prompt enter what you want the package to be called. I like to see the files generated afterwards too, so I checked the box to see that.  When Expression Blend is done generating everything you’ll have a directory like the one shown below, with all the needed files for deployment. Now these files can be copied or moved to any location for viewing.  One can even copy them (such as via FTP) to a server location to share with others.  Once they are deployed and you run the "TestPage.html" the other features of the Sketchflow Package are available. In the image below I have tagged a few sections to show the Sketchflow Player Features.  To the top left is the navigation, which provides a clearly defined area of movement in a list.  To the center right is the actual prototype application.  I have placed lists of things and made edits.  On the left hand side is the highlight feature, which is available in the Feedback section of the lower left.  On the right hand list I underlined the Autochart with an orange marker, and marked out two list items with a red marker. In the lower left hand side in the Feedback section is also an area to type in your feedback.  This can be useful for time based feedback, when you post this somewhere and want people to provide subsequent follow up feedback. Overall lots of great features, that enable some fairly rapid prototyping with customers.  Once one is familiar with the steps and parts of this Sketchflow Prototype Capabilities it is easy to step through an application without even stopping.  It really is that easy.  So get hold of Expression Blend 3 and get ramped up on Sketchflow, it will pay off in the design phases to do so! Original Entry

    Read the article

  • C# 5 Async, Part 1: Simplifying Asynchrony – That for which we await

    - by Reed
    Today’s announcement at PDC of the future directions C# is taking excite me greatly.  The new Visual Studio Async CTP is amazing.  Asynchronous code – code which frustrates and demoralizes even the most advanced of developers, is taking a huge leap forward in terms of usability.  This is handled by building on the Task functionality in .NET 4, as well as the addition of two new keywords being added to the C# language: async and await. This core of the new asynchronous functionality is built upon three key features.  First is the Task functionality in .NET 4, and based on Task and Task<TResult>.  While Task was intended to be the primary means of asynchronous programming with .NET 4, the .NET Framework was still based mainly on the Asynchronous Pattern and the Event-based Asynchronous Pattern. The .NET Framework added functionality and guidance for wrapping existing APIs into a Task based API, but the framework itself didn’t really adopt Task or Task<TResult> in any meaningful way.  The CTP shows that, going forward, this is changing. One of the three key new features coming in C# is actually a .NET Framework feature.  Nearly every asynchronous API in the .NET Framework has been wrapped into a new, Task-based method calls.  In the CTP, this is done via as external assembly (AsyncCtpLibrary.dll) which uses Extension Methods to wrap the existing APIs.  However, going forward, this will be handled directly within the Framework.  This will have a unifying effect throughout the .NET Framework.  This is the first building block of the new features for asynchronous programming: Going forward, all asynchronous operations will work via a method that returns Task or Task<TResult> The second key feature is the new async contextual keyword being added to the language.  The async keyword is used to declare an asynchronous function, which is a method that either returns void, a Task, or a Task<T>. Inside the asynchronous function, there must be at least one await expression.  This is a new C# keyword (await) that is used to automatically take a series of statements and break it up to potentially use discontinuous evaluation.  This is done by using await on any expression that evaluates to a Task or Task<T>. For example, suppose we want to download a webpage as a string.  There is a new method added to WebClient: Task<string> WebClient.DownloadStringTaskAsync(Uri).  Since this returns a Task<string> we can use it within an asynchronous function.  Suppose, for example, that we wanted to do something similar to my asynchronous Task example – download a web page asynchronously and check to see if it supports XHTML 1.0, then report this into a TextBox.  This could be done like so: private async void button1_Click(object sender, RoutedEventArgs e) { string url = "http://reedcopsey.com"; string content = await new WebClient().DownloadStringTaskAsync(url); this.textBox1.Text = string.Format("Page {0} supports XHTML 1.0: {1}", url, content.Contains("XHTML 1.0")); } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Let’s walk through what’s happening here, step by step.  By adding the async contextual keyword to the method definition, we are able to use the await keyword on our WebClient.DownloadStringTaskAsync method call. When the user clicks this button, the new method (Task<string> WebClient.DownloadStringTaskAsync(string)) is called, which returns a Task<string>.  By adding the await keyword, the runtime will call this method that returns Task<string>, and execution will return to the caller at this point.  This means that our UI is not blocked while the webpage is downloaded.  Instead, the UI thread will “await” at this point, and let the WebClient do it’s thing asynchronously. When the WebClient finishes downloading the string, the user interface’s synchronization context will automatically be used to “pick up” where it left off, and the Task<string> returned from DownloadStringTaskAsync is automatically unwrapped and set into the content variable.  At this point, we can use that and set our text box content. There are a couple of key points here: Asynchronous functions are declared with the async keyword, and contain one or more await expressions In addition to the obvious benefits of shorter, simpler code – there are some subtle but tremendous benefits in this approach.  When the execution of this asynchronous function continues after the first await statement, the initial synchronization context is used to continue the execution of this function.  That means that we don’t have to explicitly marshal the call that sets textbox1.Text back to the UI thread – it’s handled automatically by the language and framework!  Exception handling around asynchronous method calls also just works. I’d recommend every C# developer take a look at the documentation on the new Asynchronous Programming for C# and Visual Basic page, download the Visual Studio Async CTP, and try it out.

    Read the article

  • Node.js Adventure - When Node Flying in Wind

    - by Shaun
    In the first post of this series I mentioned some popular modules in the community, such as underscore, async, etc.. I also listed a module named “Wind (zh-CN)”, which is created by one of my friend, Jeff Zhao (zh-CN). Now I would like to use a separated post to introduce this module since I feel it brings a new async programming style in not only Node.js but JavaScript world. If you know or heard about the new feature in C# 5.0 called “async and await”, or you learnt F#, you will find the “Wind” brings the similar async programming experience in JavaScript. By using “Wind”, we can write async code that looks like the sync code. The callbacks, async stats and exceptions will be handled by “Wind” automatically and transparently.   What’s the Problem: Dense “Callback” Phobia Let’s firstly back to my second post in this series. As I mentioned in that post, when we wanted to read some records from SQL Server we need to open the database connection, and then execute the query. In Node.js all IO operation are designed as async callback pattern which means when the operation was done, it will invoke a function which was taken from the last parameter. For example the database connection opening code would be like this. 1: sql.open(connectionString, function(error, conn) { 2: if(error) { 3: // some error handling code 4: } 5: else { 6: // connection opened successfully 7: } 8: }); And then if we need to query the database the code would be like this. It nested in the previous function. 1: sql.open(connectionString, function(error, conn) { 2: if(error) { 3: // some error handling code 4: } 5: else { 6: // connection opened successfully 7: conn.queryRaw(command, function(error, results) { 8: if(error) { 9: // failed to execute this command 10: } 11: else { 12: // records retrieved successfully 13: } 14: }; 15: } 16: }); Assuming if we need to copy some data from this database to another then we need to open another connection and execute the command within the function under the query function. 1: sql.open(connectionString, function(error, conn) { 2: if(error) { 3: // some error handling code 4: } 5: else { 6: // connection opened successfully 7: conn.queryRaw(command, function(error, results) { 8: if(error) { 9: // failed to execute this command 10: } 11: else { 12: // records retrieved successfully 13: target.open(targetConnectionString, function(error, t_conn) { 14: if(error) { 15: // connect failed 16: } 17: else { 18: t_conn.queryRaw(copy_command, function(error, results) { 19: if(error) { 20: // copy failed 21: } 22: else { 23: // and then, what do you want to do now... 24: } 25: }; 26: } 27: }; 28: } 29: }; 30: } 31: }); This is just an example. In the real project the logic would be more complicated. This means our application might be messed up and the business process will be fragged by many callback functions. I would like call this “Dense Callback Phobia”. This might be a challenge how to make code straightforward and easy to read, something like below. 1: try 2: { 3: // open source connection 4: var s_conn = sqlConnect(s_connectionString); 5: // retrieve data 6: var results = sqlExecuteCommand(s_conn, s_command); 7: 8: // open target connection 9: var t_conn = sqlConnect(t_connectionString); 10: // prepare the copy command 11: var t_command = getCopyCommand(results); 12: // execute the copy command 13: sqlExecuteCommand(s_conn, t_command); 14: } 15: catch (ex) 16: { 17: // error handling 18: }   What’s the Problem: Sync-styled Async Programming Similar as the previous problem, the callback-styled async programming model makes the upcoming operation as a part of the current operation, and mixed with the error handling code. So it’s very hard to understand what on earth this code will do. And since Node.js utilizes non-blocking IO mode, we cannot invoke those operations one by one, as they will be executed concurrently. For example, in this post when I tried to copy the records from Windows Azure SQL Database (a.k.a. WASD) to Windows Azure Table Storage, if I just insert the data into table storage one by one and then print the “Finished” message, I will see the message shown before the data had been copied. This is because all operations were executed at the same time. In order to make the copy operation and print operation executed synchronously I introduced a module named “async” and the code was changed as below. 1: async.forEach(results.rows, 2: function (row, callback) { 3: var resource = { 4: "PartitionKey": row[1], 5: "RowKey": row[0], 6: "Value": row[2] 7: }; 8: client.insertEntity(tableName, resource, function (error) { 9: if (error) { 10: callback(error); 11: } 12: else { 13: console.log("entity inserted."); 14: callback(null); 15: } 16: }); 17: }, 18: function (error) { 19: if (error) { 20: error["target"] = "insertEntity"; 21: res.send(500, error); 22: } 23: else { 24: console.log("all done."); 25: res.send(200, "Done!"); 26: } 27: }); It ensured that the “Finished” message will be printed when all table entities had been inserted. But it cannot promise that the records will be inserted in sequence. It might be another challenge to make the code looks like in sync-style? 1: try 2: { 3: forEach(row in rows) { 4: var entity = { /* ... */ }; 5: tableClient.insert(tableName, entity); 6: } 7:  8: console.log("Finished"); 9: } 10: catch (ex) { 11: console.log(ex); 12: }   How “Wind” Helps “Wind” is a JavaScript library which provides the control flow with plain JavaScript for asynchronous programming (and more) without additional pre-compiling steps. It’s available in NPM so that we can install it through “npm install wind”. Now let’s create a very simple Node.js application as the example. This application will take some website URLs from the command arguments and tried to retrieve the body length and print them in console. Then at the end print “Finish”. I’m going to use “request” module to make the HTTP call simple so I also need to install by the command “npm install request”. The code would be like this. 1: var request = require("request"); 2:  3: // get the urls from arguments, the first two arguments are `node.exe` and `fetch.js` 4: var args = process.argv.splice(2); 5:  6: // main function 7: var main = function() { 8: for(var i = 0; i < args.length; i++) { 9: // get the url 10: var url = args[i]; 11: // send the http request and try to get the response and body 12: request(url, function(error, response, body) { 13: if(!error && response.statusCode == 200) { 14: // log the url and the body length 15: console.log( 16: "%s: %d.", 17: response.request.uri.href, 18: body.length); 19: } 20: else { 21: // log error 22: console.log(error); 23: } 24: }); 25: } 26: 27: // finished 28: console.log("Finished"); 29: }; 30:  31: // execute the main function 32: main(); Let’s execute this application. (I made them in multi-lines for better reading.) 1: node fetch.js 2: "http://www.igt.com/us-en.aspx" 3: "http://www.igt.com/us-en/games.aspx" 4: "http://www.igt.com/us-en/cabinets.aspx" 5: "http://www.igt.com/us-en/systems.aspx" 6: "http://www.igt.com/us-en/interactive.aspx" 7: "http://www.igt.com/us-en/social-gaming.aspx" 8: "http://www.igt.com/support.aspx" Below is the output. As you can see the finish message was printed at the beginning, and the pages’ length retrieved in a different order than we specified. This is because in this code the request command, console logging command are executed asynchronously and concurrently. Now let’s introduce “Wind” to make them executed in order, which means it will request the websites one by one, and print the message at the end.   First of all we need to import the “Wind” package and make sure the there’s only one global variant named “Wind”, and ensure it’s “Wind” instead of “wind”. 1: var Wind = require("wind");   Next, we need to tell “Wind” which code will be executed asynchronously so that “Wind” can control the execution process. In this case the “request” operation executed asynchronously so we will create a “Task” by using a build-in helps function in “Wind” named Wind.Async.Task.create. 1: var requestBodyLengthAsync = function(url) { 2: return Wind.Async.Task.create(function(t) { 3: request(url, function(error, response, body) { 4: if(error || response.statusCode != 200) { 5: t.complete("failure", error); 6: } 7: else { 8: var data = 9: { 10: uri: response.request.uri.href, 11: length: body.length 12: }; 13: t.complete("success", data); 14: } 15: }); 16: }); 17: }; The code above created a “Task” from the original request calling code. In “Wind” a “Task” means an operation will be finished in some time in the future. A “Task” can be started by invoke its start() method, but no one knows when it actually will be finished. The Wind.Async.Task.create helped us to create a task. The only parameter is a function where we can put the actual operation in, and then notify the task object it’s finished successfully or failed by using the complete() method. In the code above I invoked the request method. If it retrieved the response successfully I set the status of this task as “success” with the URL and body length. If it failed I set this task as “failure” and pass the error out.   Next, we will change the main() function. In “Wind” if we want a function can be controlled by Wind we need to mark it as “async”. This should be done by using the code below. 1: var main = eval(Wind.compile("async", function() { 2: })); When the application is running, Wind will detect “eval(Wind.compile(“async”, function” and generate an anonymous code from the body of this original function. Then the application will run the anonymous code instead of the original one. In our example the main function will be like this. 1: var main = eval(Wind.compile("async", function() { 2: for(var i = 0; i < args.length; i++) { 3: try 4: { 5: var result = $await(requestBodyLengthAsync(args[i])); 6: console.log( 7: "%s: %d.", 8: result.uri, 9: result.length); 10: } 11: catch (ex) { 12: console.log(ex); 13: } 14: } 15: 16: console.log("Finished"); 17: })); As you can see, when I tried to request the URL I use a new command named “$await”. It tells Wind, the operation next to $await will be executed asynchronously, and the main thread should be paused until it finished (or failed). So in this case, my application will be pause when the first response was received, and then print its body length, then try the next one. At the end, print the finish message.   Finally, execute the main function. The full code would be like this. 1: var request = require("request"); 2: var Wind = require("wind"); 3:  4: var args = process.argv.splice(2); 5:  6: var requestBodyLengthAsync = function(url) { 7: return Wind.Async.Task.create(function(t) { 8: request(url, function(error, response, body) { 9: if(error || response.statusCode != 200) { 10: t.complete("failure", error); 11: } 12: else { 13: var data = 14: { 15: uri: response.request.uri.href, 16: length: body.length 17: }; 18: t.complete("success", data); 19: } 20: }); 21: }); 22: }; 23:  24: var main = eval(Wind.compile("async", function() { 25: for(var i = 0; i < args.length; i++) { 26: try 27: { 28: var result = $await(requestBodyLengthAsync(args[i])); 29: console.log( 30: "%s: %d.", 31: result.uri, 32: result.length); 33: } 34: catch (ex) { 35: console.log(ex); 36: } 37: } 38: 39: console.log("Finished"); 40: })); 41:  42: main().start();   Run our new application. At the beginning we will see the compiled and generated code by Wind. Then we can see the pages were requested one by one, and at the end the finish message was printed. Below is the code Wind generated for us. As you can see the original code, the output code were shown. 1: // Original: 2: function () { 3: for(var i = 0; i < args.length; i++) { 4: try 5: { 6: var result = $await(requestBodyLengthAsync(args[i])); 7: console.log( 8: "%s: %d.", 9: result.uri, 10: result.length); 11: } 12: catch (ex) { 13: console.log(ex); 14: } 15: } 16: 17: console.log("Finished"); 18: } 19:  20: // Compiled: 21: /* async << function () { */ (function () { 22: var _builder_$0 = Wind.builders["async"]; 23: return _builder_$0.Start(this, 24: _builder_$0.Combine( 25: _builder_$0.Delay(function () { 26: /* var i = 0; */ var i = 0; 27: /* for ( */ return _builder_$0.For(function () { 28: /* ; i < args.length */ return i < args.length; 29: }, function () { 30: /* ; i ++) { */ i ++; 31: }, 32: /* try { */ _builder_$0.Try( 33: _builder_$0.Delay(function () { 34: /* var result = $await(requestBodyLengthAsync(args[i])); */ return _builder_$0.Bind(requestBodyLengthAsync(args[i]), function (result) { 35: /* console.log("%s: %d.", result.uri, result.length); */ console.log("%s: %d.", result.uri, result.length); 36: return _builder_$0.Normal(); 37: }); 38: }), 39: /* } catch (ex) { */ function (ex) { 40: /* console.log(ex); */ console.log(ex); 41: return _builder_$0.Normal(); 42: /* } */ }, 43: null 44: ) 45: /* } */ ); 46: }), 47: _builder_$0.Delay(function () { 48: /* console.log("Finished"); */ console.log("Finished"); 49: return _builder_$0.Normal(); 50: }) 51: ) 52: ); 53: /* } */ })   How Wind Works Someone may raise a big concern when you find I utilized “eval” in my code. Someone may assume that Wind utilizes “eval” to execute some code dynamically while “eval” is very low performance. But I would say, Wind does NOT use “eval” to run the code. It only use “eval” as a flag to know which code should be compiled at runtime. When the code was firstly been executed, Wind will check and find “eval(Wind.compile(“async”, function”. So that it knows this function should be compiled. Then it utilized parse-js to analyze the inner JavaScript and generated the anonymous code in memory. Then it rewrite the original code so that when the application was running it will use the anonymous one instead of the original one. Since the code generation was done at the beginning of the application was started, in the future no matter how long our application runs and how many times the async function was invoked, it will use the generated code, no need to generate again. So there’s no significant performance hurt when using Wind.   Wind in My Previous Demo Let’s adopt Wind into one of my previous demonstration and to see how it helps us to make our code simple, straightforward and easy to read and understand. In this post when I implemented the functionality that copied the records from my WASD to table storage, the logic would be like this. 1, Open database connection. 2, Execute a query to select all records from the table. 3, Recreate the table in Windows Azure table storage. 4, Create entities from each of the records retrieved previously, and then insert them into table storage. 5, Finally, show message as the HTTP response. But as the image below, since there are so many callbacks and async operations, it’s very hard to understand my logic from the code. Now let’s use Wind to rewrite our code. First of all, of course, we need the Wind package. Then we need to include the package files into project and mark them as “Copy always”. Add the Wind package into the source code. Pay attention to the variant name, you must use “Wind” instead of “wind”. 1: var express = require("express"); 2: var async = require("async"); 3: var sql = require("node-sqlserver"); 4: var azure = require("azure"); 5: var Wind = require("wind"); Now we need to create some async functions by using Wind. All async functions should be wrapped so that it can be controlled by Wind which are open database, retrieve records, recreate table (delete and create) and insert entity in table. Below are these new functions. All of them are created by using Wind.Async.Task.create. 1: sql.openAsync = function (connectionString) { 2: return Wind.Async.Task.create(function (t) { 3: sql.open(connectionString, function (error, conn) { 4: if (error) { 5: t.complete("failure", error); 6: } 7: else { 8: t.complete("success", conn); 9: } 10: }); 11: }); 12: }; 13:  14: sql.queryAsync = function (conn, query) { 15: return Wind.Async.Task.create(function (t) { 16: conn.queryRaw(query, function (error, results) { 17: if (error) { 18: t.complete("failure", error); 19: } 20: else { 21: t.complete("success", results); 22: } 23: }); 24: }); 25: }; 26:  27: azure.recreateTableAsync = function (tableName) { 28: return Wind.Async.Task.create(function (t) { 29: client.deleteTable(tableName, function (error, successful, response) { 30: console.log("delete table finished"); 31: client.createTableIfNotExists(tableName, function (error, successful, response) { 32: console.log("create table finished"); 33: if (error) { 34: t.complete("failure", error); 35: } 36: else { 37: t.complete("success", null); 38: } 39: }); 40: }); 41: }); 42: }; 43:  44: azure.insertEntityAsync = function (tableName, entity) { 45: return Wind.Async.Task.create(function (t) { 46: client.insertEntity(tableName, entity, function (error, entity, response) { 47: if (error) { 48: t.complete("failure", error); 49: } 50: else { 51: t.complete("success", null); 52: } 53: }); 54: }); 55: }; Then in order to use these functions we will create a new function which contains all steps for data copying. 1: var copyRecords = eval(Wind.compile("async", function (req, res) { 2: try { 3: } 4: catch (ex) { 5: console.log(ex); 6: res.send(500, "Internal error."); 7: } 8: })); Let’s execute steps one by one with the “$await” keyword introduced by Wind so that it will be invoked in sequence. First is to open the database connection. 1: var copyRecords = eval(Wind.compile("async", function (req, res) { 2: try { 3: // connect to the windows azure sql database 4: var conn = $await(sql.openAsync(connectionString)); 5: console.log("connection opened"); 6: } 7: catch (ex) { 8: console.log(ex); 9: res.send(500, "Internal error."); 10: } 11: })); Then retrieve all records from the database connection. 1: var copyRecords = eval(Wind.compile("async", function (req, res) { 2: try { 3: // connect to the windows azure sql database 4: var conn = $await(sql.openAsync(connectionString)); 5: console.log("connection opened"); 6: // retrieve all records from database 7: var results = $await(sql.queryAsync(conn, "SELECT * FROM [Resource]")); 8: console.log("records selected. count = %d", results.rows.length); 9: } 10: catch (ex) { 11: console.log(ex); 12: res.send(500, "Internal error."); 13: } 14: })); After recreated the table, we need to create the entities and insert them into table storage. 1: var copyRecords = eval(Wind.compile("async", function (req, res) { 2: try { 3: // connect to the windows azure sql database 4: var conn = $await(sql.openAsync(connectionString)); 5: console.log("connection opened"); 6: // retrieve all records from database 7: var results = $await(sql.queryAsync(conn, "SELECT * FROM [Resource]")); 8: console.log("records selected. count = %d", results.rows.length); 9: if (results.rows.length > 0) { 10: // recreate the table 11: $await(azure.recreateTableAsync(tableName)); 12: console.log("table created"); 13: // insert records in table storage one by one 14: for (var i = 0; i < results.rows.length; i++) { 15: var entity = { 16: "PartitionKey": results.rows[i][1], 17: "RowKey": results.rows[i][0], 18: "Value": results.rows[i][2] 19: }; 20: $await(azure.insertEntityAsync(tableName, entity)); 21: console.log("entity inserted"); 22: } 23: } 24: } 25: catch (ex) { 26: console.log(ex); 27: res.send(500, "Internal error."); 28: } 29: })); Finally, send response back to the browser. 1: var copyRecords = eval(Wind.compile("async", function (req, res) { 2: try { 3: // connect to the windows azure sql database 4: var conn = $await(sql.openAsync(connectionString)); 5: console.log("connection opened"); 6: // retrieve all records from database 7: var results = $await(sql.queryAsync(conn, "SELECT * FROM [Resource]")); 8: console.log("records selected. count = %d", results.rows.length); 9: if (results.rows.length > 0) { 10: // recreate the table 11: $await(azure.recreateTableAsync(tableName)); 12: console.log("table created"); 13: // insert records in table storage one by one 14: for (var i = 0; i < results.rows.length; i++) { 15: var entity = { 16: "PartitionKey": results.rows[i][1], 17: "RowKey": results.rows[i][0], 18: "Value": results.rows[i][2] 19: }; 20: $await(azure.insertEntityAsync(tableName, entity)); 21: console.log("entity inserted"); 22: } 23: // send response 24: console.log("all done"); 25: res.send(200, "All done!"); 26: } 27: } 28: catch (ex) { 29: console.log(ex); 30: res.send(500, "Internal error."); 31: } 32: })); If we compared with the previous code we will find now it became more readable and much easy to understand. It’s very easy to know what this function does even though without any comments. When user go to URL “/was/copyRecords” we will execute the function above. The code would be like this. 1: app.get("/was/copyRecords", function (req, res) { 2: copyRecords(req, res).start(); 3: }); And below is the logs printed in local compute emulator console. As we can see the functions executed one by one and then finally the response back to me browser.   Scaffold Functions in Wind Wind provides not only the async flow control and compile functions, but many scaffold methods as well. We can build our async code more easily by using them. I’m going to introduce some basic scaffold functions here. In the code above I created some functions which wrapped from the original async function such as open database, create table, etc.. All of them are very similar, created a task by using Wind.Async.Task.create, return error or result object through Task.complete function. In fact, Wind provides some functions for us to create task object from the original async functions. If the original async function only has a callback parameter, we can use Wind.Async.Binding.fromCallback method to get the task object directly. For example the code below returned the task object which wrapped the file exist check function. 1: var Wind = require("wind"); 2: var fs = require("fs"); 3:  4: fs.existsAsync = Wind.Async.Binding.fromCallback(fs.exists); In Node.js a very popular async function pattern is that, the first parameter in the callback function represent the error object, and the other parameters is the return values. In this case we can use another build-in function in Wind named Wind.Async.Binding.fromStandard. For example, the open database function can be created from the code below. 1: sql.openAsync = Wind.Async.Binding.fromStandard(sql.open); 2:  3: /* 4: sql.openAsync = function (connectionString) { 5: return Wind.Async.Task.create(function (t) { 6: sql.open(connectionString, function (error, conn) { 7: if (error) { 8: t.complete("failure", error); 9: } 10: else { 11: t.complete("success", conn); 12: } 13: }); 14: }); 15: }; 16: */ When I was testing the scaffold functions under Wind.Async.Binding I found for some functions, such as the Azure SDK insert entity function, cannot be processed correctly. So I personally suggest writing the wrapped method manually.   Another scaffold method in Wind is the parallel tasks coordination. In this example, the steps of open database, retrieve records and recreated table should be invoked one by one, but it can be executed in parallel when copying data from database to table storage. In Wind there’s a scaffold function named Task.whenAll which can be used here. Task.whenAll accepts a list of tasks and creates a new task. It will be returned only when all tasks had been completed, or any errors occurred. For example in the code below I used the Task.whenAll to make all copy operation executed at the same time. 1: var copyRecordsInParallel = eval(Wind.compile("async", function (req, res) { 2: try { 3: // connect to the windows azure sql database 4: var conn = $await(sql.openAsync(connectionString)); 5: console.log("connection opened"); 6: // retrieve all records from database 7: var results = $await(sql.queryAsync(conn, "SELECT * FROM [Resource]")); 8: console.log("records selected. count = %d", results.rows.length); 9: if (results.rows.length > 0) { 10: // recreate the table 11: $await(azure.recreateTableAsync(tableName)); 12: console.log("table created"); 13: // insert records in table storage in parallal 14: var tasks = new Array(results.rows.length); 15: for (var i = 0; i < results.rows.length; i++) { 16: var entity = { 17: "PartitionKey": results.rows[i][1], 18: "RowKey": results.rows[i][0], 19: "Value": results.rows[i][2] 20: }; 21: tasks[i] = azure.insertEntityAsync(tableName, entity); 22: } 23: $await(Wind.Async.Task.whenAll(tasks)); 24: // send response 25: console.log("all done"); 26: res.send(200, "All done!"); 27: } 28: } 29: catch (ex) { 30: console.log(ex); 31: res.send(500, "Internal error."); 32: } 33: })); 34:  35: app.get("/was/copyRecordsInParallel", function (req, res) { 36: copyRecordsInParallel(req, res).start(); 37: });   Besides the task creation and coordination, Wind supports the cancellation solution so that we can send the cancellation signal to the tasks. It also includes exception solution which means any exceptions will be reported to the caller function.   Summary In this post I introduced a Node.js module named Wind, which created by my friend Jeff Zhao. As you can see, different from other async library and framework, adopted the idea from F# and C#, Wind utilizes runtime code generation technology to make it more easily to write async, callback-based functions in a sync-style way. By using Wind there will be almost no callback, and the code will be very easy to understand. Currently Wind is still under developed and improved. There might be some problems but the author, Jeff, should be very happy and enthusiastic to learn your problems, feedback, suggestion and comments. You can contact Jeff by - Email: [email protected] - Group: https://groups.google.com/d/forum/windjs - GitHub: https://github.com/JeffreyZhao/wind/issues   Source code can be download here.   Hope this helps, Shaun All documents and related graphics, codes are provided "AS IS" without warranty of any kind. Copyright © Shaun Ziyan Xu. This work is licensed under the Creative Commons License.

    Read the article

< Previous Page | 409 410 411 412 413 414 415 416 417 418 419 420  | Next Page >