style - Page 152 - Developer IT

Partial Page Rendering in OAF Page

- by PRajkumar

Let us try to implement partial page rendering for a text item. If value of TextItem1 is null then TextItem2 will not be appreared on UI. If value of TextItem1 is not null then TextItem2 will be appreared on UI. 1. Create a New OA Workspace and Empty OA Project File> New > General> Workspace Configured for Oracle Applications File Name -- PPRProj Project Name – PPRDemoProj Default Package -- prajkumar.oracle.apps.fnd.pprdemo 2. Create Application Module AM PPRDemoProj right click > New > ADF Business Components > Application Module Name -- PPRAM Package -- prajkumar.oracle.apps.fnd.pprdemo.server Check Application Module Class: PPRAMImpl Generate JavaFile(s) 3. Create a PPRVO View Object PPRDemoProj> New > ADF Business Components > View Objects Name – PPRVO Package – prajkumar.oracle.apps.fnd.pprdemo.server In Attribute Page Click on New button and create transient primary key attribute with the following properties: Attribute Property Name RowKey Type Number Updateable Always Key Attribute (Checked) Click New button again and create transient attribute with the following properties: Attribute Property Name TextItem2Render Type Boolean Updateable Always Note – No Need to generate any JAVA files for PPRVO 4. Add Your View Object to Root UI Application Module Right click on PPRAM > Edit PPRAM > Data Model > Select PPRVO in Available View Objects list and shuttle to Data Model list 5. Create a OA components Page PPRDemoProj right click > New > OA Components > Page Name – PPRPG Package -- prajkumar.oracle.apps.fnd.pprdemo.webui 6. Modify the Page Layout (Top-level) Region Attribute Property ID PageLayoutRN Region Style pageLayout Form Property True Auto Footer True Window Title PPR Demo Window Title True Title PPR Demo Page Header AM Definition prajkumar.oracle.apps.fnd.pprdemo.server.PPRAM 7. Create the Second Region (Main Content Region) Right click on PageLayoutRN > New > Region Attribute Property ID MainRN Region Style messageComponentLayout 8. Create Two Text Items Create First messageTextItem -- Right click on MainRN > New > messageTextInput Attribute Property ID TextItem1 Region Style messageTextInput Prompt Text Item1 Length 20 Disable Server Side Validation True Disable Client Side Validation True Action Type firePartialAction Event TextItem1Change Submit True Note -- Disable Client Side Validation and Event property appears after you set the Action Type property to firePartialAction Create Second messageTextItem -- Select MainRN right click > New > messageTextInput Attribute Property ID TextItem2 Region Style messageTextInput Prompt Text Item2 Length 20 Rendered ${oa.PPRVO1.TextItem2Render} 9. Add Following code in PPRAMImpl.java import oracle.apps.fnd.framework.OARow; import oracle.apps.fnd.framework.OAViewObject; import oracle.apps.fnd.framework.server.OAApplicationModuleImpl; import oracle.apps.fnd.framework.server.OAViewObjectImpl; public void handlePPRAction() { Number val = 1; OAViewObject vo = (OAViewObject)findViewObject("PPRVO1"); if (vo != null) { if (vo.getFetchedRowCount() == 0) { vo.setMaxFetchSize(0); vo.executeQuery(); vo.insertRow(vo.createRow()); OARow row = (OARow)vo.first(); row.setAttribute("RowKey", val); row.setAttribute("TextItem2Render", Boolean.FALSE); } } } 10. Implement Controller for Page Select PageLayoutRN in Structure pane right click > Set New Controller Package Name -- prajkumar.oracle.apps.fnd.pprdemo.webui Class Name – PPRCO Write following code in processFormRequest function of PPRCO Controller import oracle.apps.fnd.framework.OARow; import oracle.apps.fnd.framework.OAViewObject; public void processRequest(OAPageContext pageContext, OAWebBean webBean) { super.processRequest(pageContext, webBean); PPRAMImpl am = (PPRAMImpl)pageContext.getApplicationModule(webBean); am.invokeMethod("handlePPRAction"); } public void processFormRequest(OAPageContext pageContext, OAWebBean webBean) { super.processFormRequest(pageContext, webBean); PPRAMImpl am = (PPRAMImpl)pageContext.getApplicationModule(webBean); OAViewObject vo = (OAViewObject)am.findViewObject("PPRVO1"); OARow row = (OARow)vo.getCurrentRow(); if ("TextItem1Change".equals(pageContext.getParameter(EVENT_PARAM))) { if (pageContext.getParameter("TextItem1").equals("")) { row.setAttribute("TextItem2Render", Boolean.FALSE); } else { row.setAttribute("TextItem2Render", Boolean.TRUE); } } } 11. Congratulation you have successfully finished. Run Your PPRPG page and Test Your Work

Read the article

Silverlight Recruiting Application Part 4 - Navigation and Modules

After our brief intermission (and the craziness of Q1 2010 release week), we're back on track here and today we get to dive into how we are going to navigate through our applications as well as how to set up our modules. That way, as I start adding the functionality- adding Jobs and Applicants, Interview Scheduling, and finally a handy Dashboard- you'll see how everything is communicating back and forth. This is all leading up to an eventual webinar, in which I'll dive into this process and give a honest look at the current story for MVVM vs. Code-Behind applications. (For a look at the future with SL4 and a little thing called MEF, check out what Ross is doing over at his blog!) Preamble... Before getting into really talking about this app, I've done a little bit of work ahead of time to create a ton of files that I'll need. Since the webinar is going to cover the Dashboard, it's not here, but otherwise this is a look at what the project layout looks like (and remember, this is both projects since they share the .Web): So as you can see, from an architecture perspective, the code-behind app is much smaller and more streamlined- aka a better fit for the one man shop that is me. Each module in the MVVM app has the same setup, which is the Module class and corresponding Views and ViewModels. Since the code-behind app doesn't need a go-between project like Infrastructure, each MVVM module is instead replaced by a single Silverlight UserControl which will contain all the logic for each respective bit of functionality. My Very First Module Navigation is going to be key to my application, so I figured the first thing I would setup is my MenuModule. First step here is creating a Silverlight Class Library named MenuModule, creatingthe View and ViewModel folders, and adding the MenuModule.cs class to handle module loading. The most important thing here is that my MenuModule inherits from IModule, which runs an Initialize on each module as it is created that, in my case, adds the views to the correct regions. Here's the MenuModule.cs code: public class MenuModule : IModule { private readonly IRegionManager regionManager; private readonly IUnityContainer container; public MenuModule(IUnityContainer container, IRegionManager regionmanager) { this.container = container; this.regionManager = regionmanager; } public void Initialize() { var addMenuView = container.Resolve<MenuView>(); regionManager.Regions["MenuRegion"].Add(addMenuView); } } Pretty straightforward here... We inject a container and region manager from Prism/Unity, then upon initialization we grab the view (out of our Views folder) and add it to the region it needs to live in. Simple, right? When the MenuView is created, the only thing in the code-behind is a reference to the set the MenuViewModel as the DataContext. I'd like to achieve MVVM nirvana and have zero code-behind by placing the viewmodel in the XAML, but for the reasons listed further below I can't. Navigation - MVVM Since navigation isn't the biggest concern in putting this whole thing together, I'm using the Button control to handle different options for loading up views/modules. There is another reason for this- out of the box, Prism has command support for buttons, which is one less custom command I had to work up for the functionality I would need. This comes from the Microsoft.Practices.Composite.Presentation assembly and looks as follows when put in code: <Button x:Name="xGoToJobs" Style="{StaticResource menuStyle}" Content="Jobs" cal:Click.Command="{Binding GoModule}" cal:Click.CommandParameter="JobPostingsView" /> For quick reference, 'menuStyle' is just taking care of margins and spacing, otherwise it looks, feels, and functions like everyone's favorite Button. What MVVM's this up is that the Click.Command is tying to a DelegateCommand (also coming fromPrism) on the backend. This setup allows you to tie user interaction to a command you setup in your viewmodel, which replaces the standard event-based setup you'd see in the code-behind app. Due to databinding magic, it all just works. When we get looking at the DelegateCommand in code, it ends up like this: public class MenuViewModel : ViewModelBase { private readonly IRegionManager regionManager; public DelegateCommand<object> GoModule { get; set; } public MenuViewModel(IRegionManager regionmanager) { this.regionManager = regionmanager; this.GoModule = new DelegateCommand<object>(this.goToView); } public void goToView(object obj) { MakeMeActive(this.regionManager, "MainRegion", obj.ToString()); } } Another for reference, ViewModelBase takes care of iNotifyPropertyChanged and MakeMeActive, which switches views in the MainRegion based on the parameters. So our public DelegateCommand GoModule ties to our command on the view, that in turn calls goToView, and the parameter on the button is the name of the view (which we pass with obj.ToString()) to activate. And how do the views get the names I can pass as a string? When I called regionManager.Regions[regionname].Add(view), there is an overload that allows for .Add(view, "viewname"), with viewname being what I use to activate views. You'll see that in action next installment, just wanted to clarify how that works. With this setup, I create two more buttons in my MenuView and the MenuModule is good to go. Last step is to make sure my MenuModule loads in my Bootstrapper: protected override IModuleCatalog GetModuleCatalog() { ModuleCatalog catalog = new ModuleCatalog(); // add modules here catalog.AddModule(typeof(MenuModule.MenuModule)); return catalog; } Clean, simple, MVVM-delicious. Navigation - Code-Behind Keeping with the history of significantly shorter code-behind sections of this series, Navigation will be no different. I promise. As I explained in a prior post, due to the one-project setup I don't have to worry about the same concerns so my menu is part of MainPage.xaml. So I can cheese-it a bit, though, since I've already got three buttons all set I'm just copying that code and adding three click-events instead of the command/commandparameter setup:  <StackPanel Grid.Row="1" Orientation="Vertical"> <Button x:Name="xJobsButton" Content="Jobs" Style="{StaticResource menuStyleCB}" Click="xJobsButton_Click" /> <Button x:Name="xApplicantsButton" Content="Applicants" Style="{StaticResource menuStyleCB}" Click="xApplicantsButton_Click" /> <Button x:Name="xSchedulingModule" Content="Scheduling" Style="{StaticResource menuStyleCB}" Click="xSchedulingModule_Click" /> </StackPanel> Simple, easy to use events, and no extra assemblies required! Since the code for loading each view will be similar, we'll focus on JobsView for now.The code-behind with this setup looks something like... private JobsView _jobsView; public MainPage() { InitializeComponent(); } private void xJobsButton_Click(object sender, RoutedEventArgs e) { if (MainRegion.Content.GetType() != typeof(JobsView)) { if (_jobsView == null) _jobsView = new JobsView(); MainRegion.Content = _jobsView; } } What am I doing here? First, for each 'view' I create a private reference which MainPage will hold on to. This allows for a little bit of state-maintenance when switching views. When a button is clicked, first we make sure the 'view' typeisn't active (why load it again if it is already at center stage?), then we check if the view has been created and create if necessary, then load it up. Three steps to switching views and is easy as pie. Part 4 Results The end result of all this is that I now have a menu module (MVVM) and a menu section (code-behind) that load their respective views. Since I'm using the same exact XAML (except with commands/events depending on the project), the end result for both is again exactly the same and I'll show a slightly larger image to show it off: Next time, we add the Jobs Module and wire up RadGridView and a separate edit page to handle adding and editing new jobs. That's when things get fun. And somewhere down the line, I'll make the menu look slicker. :) Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

Read the article

Using jQuery Live instead of jQuery Hover function

- by hajan

Let’s say we have a case where we need to create mouseover / mouseout functionality for a list which will be dynamically filled with data on client-side. We can use jQuery hover function, which handles the mouseover and mouseout events with two functions. See the following example: <!DOCTYPE html> <html lang="en"> <head id="Head1" runat="server"> <title>jQuery Mouseover / Mouseout Demo</title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script> <style type="text/css"> .hover { color:Red; cursor:pointer;} </style> <script type="text/javascript"> $(function () { $("li").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); }); }); </script> </head> <body> <form id="form2" runat="server"> <ul> <li>Data 1</li> <li>Data 2</li> <li>Data 3</li> <li>Data 4</li> <li>Data 5</li> <li>Data 6</li> </ul> </form> </body> </html> Now, if you have situation where you want to add new data dynamically... Lets say you have a button to add new item in the list. Add the following code right bellow the </ul> tag <input type="text" id="txtItem" /> <input type="button" id="addNewItem" value="Add New Item" /> And add the following button click functionality: //button add new item functionality $("#addNewItem").click(function (event) { event.preventDefault(); $("<li>" + $("#txtItem").val() + "</li>").appendTo("ul"); }); The mouse over effect won't work for the newly added items. Therefore, we need to use live or delegate function. These both do the same job. The main difference is that for some cases delegate is considered a bit faster, and can be used in chaining. In our case, we can use both. I will use live function. $("li").live("mouseover mouseout", function (event) { if (event.type == "mouseover") $(this).addClass("hover"); else $(this).removeClass("hover"); }); The complete code is: <!DOCTYPE html> <html lang="en"> <head id="Head1" runat="server"> <title>jQuery Mouseover / Mouseout Demo</title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script> <style type="text/css"> .hover { color:Red; cursor:pointer;} </style> <script type="text/javascript"> $(function () { $("li").live("mouseover mouseout", function (event) { if (event.type == "mouseover") $(this).addClass("hover"); else $(this).removeClass("hover"); }); //button add new item functionality $("#addNewItem").click(function (event) { event.preventDefault(); $("<li>" + $("#txtItem").val() + "</li>").appendTo("ul"); }); }); </script> </head> <body> <form id="form2" runat="server"> <ul> <li>Data 1</li> <li>Data 2</li> <li>Data 3</li> <li>Data 4</li> <li>Data 5</li> <li>Data 6</li> </ul> <input type="text" id="txtItem" /> <input type="button" id="addNewItem" value="Add New Item" /> </form> </body> </html> So, basically when replacing hover with live, you see we use the mouseover and mouseout names for both events. Check the working demo which is available HERE. Hope this was useful blog for you. Hope it’s helpful. HajanReference blog: http://codeasp.net/blogs/hajan/microsoft-net/1260/using-jquery-live-instead-of-jquery-hover-function

Read the article

CSS height problem. IE8 seems correct Firefox seems wrong. Any fix?

- by user169867

Below is a complete html page that shows the problem. The "myDiv" should be 22px in height (including the border). Item 1 should have a 1px space between its border and the divs border. In IE8 it is. In FF 3.6.2 though it is 24px and I can't understand why. Ultimately my goal is to get the same CSS to create the same result in both browsers. It's driving me crazy! Any help would be appreciated :) <!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> <title></title> <style type="text/css"> div.aclb {background:#EEF3FA; color:#666; cursor:text; padding:1px; overflow-y:auto; border:#BBC8D9 1px solid; } div.aclb:hover {border:#3399FF 1px solid;} div.aclb.focus {background:#FFF; border:#3399FF 1px solid;} div.aclb ul {padding:0; margin:0; list-style:none; display:table; vertical-align:middle; } div.aclb li {float:left; cursor:default; font-family:Arial; padding:0; margin:0;} div.aclb li.block {padding:0px 2px; height:16px; white-space:nowrap; border:solid 1px #BBD8FB; background:#f3f7fd; font-size:11px; line-height:16px;} div.aclb li.block:hover {border:solid 1px #5F8BD3; background:#E4ECF8; color:#000;} div.aclb li.input {} div.aclb input {margin:0; padding:0; height:18px; background:transparent; border:none; color:#666; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;} div.aclb input:focus {margin:0; padding:0; height:18px; background:transparent; border:none; color:#22F; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;} div.aclb a.d {cursor:pointer; display:block; color:#6B6B6B; width:13px; height:12px;float:right; margin:1px 0 1px 4px; border:solid 1px transparent; font-family:Verdana; font-size:11px; text-align:center; line-height:10px;} div.aclb a.d:hover { border:solid 1px #7DA2CE; background:#F7FAFD; color:#AD0B0B;} div.aclb a.d:active {border:solid 1px #497CBB; background:#BAD8E8; color:#A90909;} </style> </head> <body> <div id="myDiv" style="width:250px" class="aclb"> <ul> <li class="block"> <a class="d">x</a><span>Item 1</span> </li> <li class="input"> <input type="text" style="width:30px" maxlength="30"/> </li> </ul> </div> </body> </html>

Read the article

How can I make a jQuery UI 'draggable()' div draggable for touchscreen?

- by artlung

I have a jQuery UI draggable() that works in Firefox and Chrome. The user interface concept is basically click to create a "post-it" type item. Basically, I click or tap on div#everything (100% high and wide) that listens for clicks, and an input textarea displays. You add text, and then when you're done it saves it. You can drag this element around. That is working on normal browsers, but on an iPad I can test with I can't drag the items around. If I touch to select (it then dims slightly), I can't then drag it. It won't drag left or right at all. I can drag up or down, but I'm not dragging the individual div, I'm dragging the whole webpage. So here's the code I use to capture clicks: $('#everything').bind('click', function(e){ var elem = document.createElement('DIV'); STATE.top = e.pageY; STATE.left = e.pageX; var e = $(elem).css({ top: STATE.top, left: STATE.left }).html('<textarea></textarea>') .addClass('instance') .bind('click', function(event){ return false; }); $(this).append(e); }); And here's the code I use to "save" the note and turn the input div into just a display div: $('textarea').live('mouseleave', function(){ var val = jQuery.trim($(this).val()); STATE.content = val; if (val == '') { $(this).parent().remove(); } else { var div = $(this).parent(); div.text(val).css({ height: '30px' }); STATE.height = 30; if ( div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight ) { while (div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight) { var h = div.height() + 10; STATE.height = h; div.css({ height: (h) + 'px' }); // element just got scrollbars } } STATE.guid = uniqueID() div.addClass('savedNote').attr('id', STATE.guid).draggable({ stop: function() { var offset = $(this).offset(); STATE.guid = $(this).attr('id'); STATE.top = offset.top; STATE.left = offset.left; STATE.content = $(this).text(); STATE.height = $(this).height(); STATE.save(); } }); STATE.save(); $(this).remove(); } }); And I have this code when I load the page for saved notes: $('.savedNote').draggable({ stop: function() { STATE.guid = $(this).attr('id'); var offset = $(this).offset(); STATE.top = offset.top; STATE.left = offset.left; STATE.content = $(this).text(); STATE.height = $(this).height(); STATE.save(); } }); My STATE object handles saving the notes. Onload, this is the whole html body: <body> <div id="everything"></div> <div class="instance savedNote" id="iddd1b0969-c634-8876-75a9-b274ff87186b" style="top:134px;left:715px;height:30px;">Whatever dude</div> <div class="instance savedNote" id="id8a129f06-7d0c-3cb3-9212-0f38a8445700" style="top:131px;left:347px;height:30px;">Appointment 11:45am</div> <div class="instance savedNote" id="ide92e3d13-afe8-79d7-bc03-818d4c7a471f" style="top:144px;left:65px;height:80px;">What do you think of a board where you can add writing as much as possible?</div> <div class="instance savedNote" id="idef7fe420-4c19-cfec-36b6-272f1e9b5df5" style="top:301px;left:534px;height:30px;">This was submitted</div> <div class="instance savedNote" id="id93b3b56f-5e23-1bd1-ddc1-9be41f1efb44" style="top:390px;left:217px;height:30px;">Hello world from iPad.</div> </body> So, my question is really: how can I make this work better on iPad? I'm not set on jQuery UI, I'm wondering if this is something I'm doing wrong with jQuery UI, or jQuery, or whether there may be better frameworks for doing cross-platform/backward compatible draggable() elements that will work for touchscreen UIs. More general comments about how to write UI components like this would be welcome as well. Thanks!

Read the article

How to set focus for CustCombBox in a CellEditingTemplate when entering page at the first time(MVVM

- by Shamin

PreparingCellForEdit="dg_PreparingCellForEdit" BeginningEdit="dg_BeginningEdit" <data:DataGridTemplateColumn MinWidth="300"> <data:DataGridTemplateColumn.HeaderStyle> <Style TargetType="primitives:DataGridColumnHeader" BasedOn="{StaticResource FOTDataGridColumnHeaderStyle}"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <TextBlock Text="{Binding CancelReasonText2,Source={StaticResource LabelResource}}" Style="{StaticResource TextBlockLabelStandardStyle}"/> </DataTemplate> </Setter.Value> </Setter> </Style> </data:DataGridTemplateColumn.HeaderStyle> <data:DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBlock Text="{Binding CancelReason.CancelCodeDescription}" Style="{StaticResource TextBlockLabelStandardStyle}"/> </DataTemplate> </data:DataGridTemplateColumn.CellTemplate> <data:DataGridTemplateColumn.CellEditingTemplate> <DataTemplate> <input:AutoCompleteBox x:Name="cBoxCancelReason" FilterMode="StartsWith" IsDropDownOpen="True" SelectedItem="{Binding CancelReason, Mode=TwoWay}" ItemsSource="{Binding CancelCodes}" ValueMemberPath="CancelCodeDescription" > <input:AutoCompleteBox.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding CancelCodeDescription}" Style="{StaticResource TextBlockLabelStandardStyle}"/> </DataTemplate> </input:AutoCompleteBox.ItemTemplate> </input:AutoCompleteBox> </DataTemplate> </data:DataGridTemplateColumn.CellEditingTemplate> </data:DataGridTemplateColumn> </data:DataGrid.Columns> </data:DataGrid> ---CodeBind public partial class CancelFlightView : UserControl,ICancelFlightView { private data.CancelCode DefaultCancelCode { get { data.CancelCode code = new data.CancelCode(); code.CancelCd = "-1"; code.CancelCodeDescription = "-- Select Cancel Reason --"; return code; } } public CancelFlightView() { InitializeComponent(); this.dg.LoadingRow += new EventHandler<DataGridRowEventArgs>(dg_LoadingRow); //this.Loaded += new RoutedEventHandler(CancelFlightView_Loaded); } void dg_LoadingRow(object sender, DataGridRowEventArgs e) { CheckBox checkBox = (CheckBox)dg.Columns[0].GetCellContent(e.Row); if (checkBox.IsChecked.Value) { FrameworkElement obj = (FrameworkElement)dg.Columns[1].GetCellContent(e.Row); System.Windows.Browser.HtmlPage.Plugin.Focus(); DataGridCell cellEdit = (DataGridCell)obj.Parent; cellEdit.Focus(); dg.BeginEdit(); } } //private void UserControl_Loaded(object sender, RoutedEventArgs e) //{ // if (DataContext != null) // { // CancelFlightViewModel viewModel = (CancelFlightViewModel)DataContext; // viewModel.View = this; // viewModel.Grid = dg; // //viewModel.InitFocus(); // } //} //void CancelFlightView_Loaded(object sender, RoutedEventArgs e) //{ // if (dg.SelectedItem != null) // { // CheckBox checkBox = (CheckBox)dg.Columns[0].GetCellContent(dg.SelectedItem); // if (checkBox.IsChecked.Value) // { // DataGridCell cellEdit = ((DataGridCell)((System.Windows.Controls.Primitives.DataGridCellsPresenter)((DataGridCell)checkBox.Parent).Parent).Children[1]); // dg.CurrentColumn = dg.Columns[1]; // System.Windows.Browser.HtmlPage.Plugin.Focus(); // cellEdit.Focus(); // dg.BeginEdit(); // } // } //} public CancelFlightView(CancelFlightViewModel viewModel):this() { ViewModel = viewModel; } private void dg_PreparingCellForEdit(object sender, DataGridPreparingCellForEditEventArgs e) { object obj = dg.Columns[1].GetCellContent(e.Row); if (obj != null && obj.GetType() == typeof(AutoCompleteBox)) { AutoCompleteBox cBoxCancelReason = (AutoCompleteBox)obj; System.Windows.Browser.HtmlPage.Plugin.Focus(); cBoxCancelReason.Focus(); } } private void CustomComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { } private void dg_BeginningEdit(object sender, DataGridBeginningEditEventArgs e) { } private void chkFlight_Click(object sender, RoutedEventArgs e) { CheckBox chkTemp = sender as CheckBox; if (!chkTemp.IsChecked.Value) { } else { DataGridCell cellEdit = ((DataGridCell)((System.Windows.Controls.Primitives.DataGridCellsPresenter)((DataGridCell)chkTemp.Parent).Parent).Children[1]); dg.CurrentColumn = dg.Columns[1]; cellEdit.Focus(); dg.BeginEdit(); } } private void LayoutRoot_KeyUp(object sender, KeyEventArgs e) { //if (e.Key == Key.Enter) //{ //} } #region ICancelFlightView Members public CancelFlightViewModel ViewModel { get { return DataContext as CancelFlightViewModel; } set { DataContext = value; } } #endregion } Now, when user click CheckBox, I can set focus on CustCombBox, but I can't set focus on Whose checkBox.IsChecked.Value = true when page is opened for the first time. is it possible on MVVM pattern? Looking forward your reply, thanks very much.

Read the article

Namespaced Backbone.js Views not firing events

- by Stasio

I'm currently getting started with Backbone.js. I've wrote some examples with Backbone and they are working fine. But now I need to use Backbone.js with Rails 3.1 and CoffeeScript. I took my well-working examples and rewrote on CoffeeScript using backbone-rails gem. And got the following problem. I've simplyfied code, but the problem is still remaining I've got the following files: Here I'm starting my Backbone app at main.js.coffee file according to my main_controller in rails app: $ = jQuery $-> CsfTaskManager.init() Here is backbone app description: #= require_self #= require_tree ./templates #= require_tree ./models #= require_tree ./views #= require_tree ./routers window.CsfTaskManager = Models: {} Collections: {} Routers: {} Views: {} init: -> new CsfTaskManager.Routers.AppRouter() Backbone.history.start() This is my apps' router: class CsfTaskManager.Routers.AppRouter extends Backbone.Router initialize: (options) -> goalsBlock = new CsfTaskManager.Views.goalsView() routes: "!/": "root", some other routes... And finally view: class CsfTaskManager.Views.goalsView extends Backbone.View initialize: -> this.goals = new CsfTaskManager.Collections.GoalsCollection() el: $('div#app'), events: "click .add-btn": "addGoal" addGoal: -> alert('ji') HTML page has such code: <div id="app"> <div class="app-screen hidden" id="goal-form" style="display: block; "> <button class="btn" id="load"> Load </button> <h3> New Goal </h3> <div class="form-stacked"> <form accept-charset="UTF-8" action="/goals" class="new_goal" id="new_goal" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="?"><input name="authenticity_token" type="hidden" value="Pnt+V/tS1/b079M/1ZIRdw2ss1D6bvJKVh868DXRjUg="></div> <label for="goal_title">Title</label> <p></p> <input class="goal-title" id="goal_title" name="goal[title]" size="30" type="text"> <p></p> <label for="goal_note">Note</label> <p></p> <input class="goal-note" id="goal_note" name="goal[note]" size="30" type="text"> </form> </div> <p> <button class="add-btn btn"> Add </button> </p> <ul id="goals-list"></ul> </div> <table class="app-screen bordered-table" id="calendar-grid" style="display: none; "> <tbody><tr> <td colspan="2"> week </td> </tr> <tr> <td> day </td> <td> <div id="calendar"></div> </td> </tr> </tbody></table> <div class="app-screen hidden" id="role-form" style="display: none; "> <h3> New User Role </h3> <div class="form-stacked"> <form accept-charset="UTF-8" action="/roles" class="new_role" id="new_role" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="?"><input name="authenticity_token" type="hidden" value="Pnt+V/tS1/b079M/1ZIRdw2ss1D6bvJKVh868DXRjUg="></div> <label for="role_title">Title</label> <p></p> <input class="role-title" id="role_name" name="role[name]" size="30" type="text"> <p></p> <label for="role_note">Note</label> <p></p> <input class="role-note" id="role_description" name="role[description]" size="30" type="text"> </form> </div> <p> <button class="add-btn btn"> Add </button> </p> </div> </div> So .add-btn element is nested in #app, but click on this button doesn't fire event. Where can be a trouble? Before, when I had the same app in one .js file, without of coffeescript, namespacing and backbone-rails gem, everything was allright. Bytheway, appRouter works fine, goalsView object is created successfully too, but events don't fire for some reasons. Please give me some hint, because I'm really got stuck...

Read the article

Slick2d/Nifty-gui input

- by eerongal

I'm trying to get input from slick2d into nifty gui. Ive searched online, and I've seen a few examples, but I can't seem to get it working right. i've tried the example on here but I can't seem to get everything working. I'm not entirely sure what I'm doing wrong. I've also looked at examples using the JMonkeyEngine to help point me in the right direction, but still having issues with input. I can get everything else working like i need. Here's the code for my element controller: package gui; import java.util.Properties; import de.lessvoid.nifty.Nifty; import de.lessvoid.nifty.controls.Controller; import de.lessvoid.nifty.elements.Element; import de.lessvoid.nifty.input.NiftyInputEvent; import de.lessvoid.nifty.screen.Screen; import de.lessvoid.xml.xpp3.Attributes; public class BaseElementController implements Controller { private Element element; public void bind(Nifty arg0, Screen arg1, Element arg2, Properties arg3, Attributes arg4) { this.element = element; } public void init(Properties arg0, Attributes arg1) { // TODO Auto-generated method stub } public boolean inputEvent(NiftyInputEvent arg0) { // TODO Auto-generated method stub return false; } public void onFocus(boolean arg0) { // TODO Auto-generated method stub } public void onStartScreen() { // TODO Auto-generated method stub } public void test() { System.out.println("test"); } public void bam() { System.out.println("bam"); } } Here's my XML file: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <nifty> <useStyles filename="nifty-default-styles.xml"/> <useControls filename="nifty-default-controls.xml"/> <screen id="screen2" controller="gui.BaseScreenController"> <layer backgroundColor="#fff0" childLayout="absolute" id="layer4" controller="gui.BaseElementController"> <panel childLayout="center" height="30%" id="panel1" style="nifty-panel-simple" width="50%" x="282" y="334" controller="gui.BaseElementController"> <control id="checkbox1" name="checkbox"/> <control childLayout="center" id="button2" label="button2" name="button" x="381" y="224" visibleToMouse="true" controller="gui.BaseElementController"> <interact onClick="bam()"/> </control> </panel> <text text="${CALL.getPlayerName()}" style="nifty-label" width="100%" height="100%" x="0" y="10" /> </layer> </screen> </nifty> Here's how I'm trying to bind the controller: public void init(GameContainer gc) throws SlickException { Input input = gc.getInput(); inputSystem = new PlainSlickInputSystem(); inputSystem.setInput(input); gui = new Gui(); gui.init(gc, inputSystem, "gui/tset.xml", "screen2"); input.removeListener(this); input.removeListener(inputSystem); input.addListener(inputSystem); } Essentially, all that happens right now is the screen loads up and displays, and it grabs the variable correctly in the label, but none of the input seems to be getting forwarded to Nifty from slick. I assume there's something I'm missing, but I can't seem to figure out what that is. In so far as what I have tried, I attempted to define a custom input listener to pick up events and assign that to my game in order to pick up input, which did not work, so i dropped that implementation, at current i'm trying to take the default inputs and bind then with a PlainSlickInputSystem and assigning that to the input (as shown in the first example link). On code execution, all the code is hit, and i've put several system.out.println's to get ouput of what is happening (the code above has been cleaned for presentation), and i even see the elements getting bound to the controller, yet it doesn't pick up controller events. As far as EXACTLY what's wrong, that I don't know, because I've followed all implementations i can find of this, and none of them seem to do anything it's like the input is just getting thrown out. None of the objects from niftyGui appear to be recognizing any input. Here is the binding from my objects at run time: ******INITIALIZED SCREEN: de.lessvoid.nifty.screen.Screen@4a1ab1c1 ******INITIALIZED ELEMENT: button2 (de.lessvoid.nifty.elements.Element@1e8c1be9) ******INITIALIZED ELEMENT: focusable => true, width => 100px {nifty-button#panel}, backgroundImage => button/button.png {nifty-button#panel}, label => button2, paddingLeft => 7px {nifty-button#panel}, imageMode => sprite-resize:100,23,0,2,96,2,2,2,96,2,19,2,96,2,2 {nifty-button#panel}, paddingRight => 7px {nifty-button#panel}, id => button2, visibleToMouse => true, height => 23px {nifty-button#panel}, style => nifty-button, name => button, inputMapping => de.lessvoid.nifty.input.mapping.MenuInputMapping, childLayout => center, controller => gui.BaseElementController, y => 224, x => 381 ******INITIALIZED SCREEN: de.lessvoid.nifty.screen.Screen@4a1ab1c1 ******INITIALIZED ELEMENT: panel1 (de.lessvoid.nifty.elements.Element@373ec894) ******INITIALIZED ELEMENT: id => panel1, height => 30%, style => nifty-panel-simple, width => 50%, backgroundImage => panel/nifty-panel-simple.png {nifty-panel-simple}, controller => gui.BaseElementController, childLayout => center, padding => 5px {nifty-panel-simple}, imageMode => resize:9,2,9,9,9,2,9,2,9,2,9,9 {nifty-panel-simple}, y => 334, x => 282 ******INITIALIZED SCREEN: de.lessvoid.nifty.screen.Screen@4a1ab1c1 ******INITIALIZED ELEMENT: layer4 (de.lessvoid.nifty.elements.Element@6427d489) ******INITIALIZED ELEMENT: id => layer4, backgroundColor => #fff0, controller => gui.BaseElementController, childLayout => absolute the button2 object is getting bound to my BaseElementController, but i can't seem to get it into the defined "onClick" call.

Read the article

Using JQuery tabs in an HTML 5 page

- by nikolaosk

In this post I will show you how to create a simple tabbed interface using JQuery,HTML 5 and CSS.Make sure you have downloaded the latest version of JQuery (minified version) from http://jquery.com/download.Please find here all my posts regarding JQuery.Also have a look at my posts regarding HTML 5.In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.Another excellent resource is HTML 5 Doctor.Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. Let me move on to the actual example.This is the sample HTML 5 page<!DOCTYPE html><html lang="en"> <head> <title>Liverpool Legends</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.8.2.min.js"> </script> <script type="text/javascript" src="tabs.js"></script> </head> <body> <header> <h1>Liverpool Legends</h1> </header> <section id="tabs"> <ul> <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#first-tab">Defenders</a></li> <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#second-tab">Midfielders</a></li> <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#third-tab">Strikers</a></li> </ul> <div id="first-tab"> <h3>Liverpool Defenders</h3> <p> The best defenders that played for Liverpool are Jamie Carragher, Sami Hyypia , Ron Yeats and Alan Hansen.</p> </div> <div id="second-tab"> <h3>Liverpool Midfielders</h3> <p> The best midfielders that played for Liverpool are Kenny Dalglish, John Barnes,Ian Callaghan,Steven Gerrard and Jan Molby. </p> </div> <div id="third-tab"> <h3>Liverpool Strikers</h3> <p>The best strikers that played for Liverpool are Ian Rush,Roger Hunt,Robbie Fowler and Fernando Torres.<br/> </p> </div> </div></section> <footer> <p>All Rights Reserved</p> </footer> </body> </html> This is very simple HTML markup. I have styled this markup using CSS.The contents of the style.css file follow* { margin: 0; padding: 0;}header{font-family:Tahoma;font-size:1.3em;color:#505050;text-align:center;}#tabs { font-size: 0.9em; margin: 20px 0;}#tabs ul { float: left; background: #777; width: 260px; padding-top: 24px;}#tabs li { margin-left: 8px; list-style: none;}* html #tabs li { display: inline;}#tabs li, #tabs li a { float: left;}#tabs ul li.active { border-top:2px red solid; background: #15ADFF;}#tabs ul li.active a { color: #333333;}#tabs div { background: #15ADFF; clear: both; padding: 15px; min-height: 200px;}#tabs div h3 { margin-bottom: 12px;}#tabs div p { line-height: 26px;}#tabs ul li a { text-decoration: none; padding: 8px; color:#0b2f20; font-weight: bold;}footer{background-color:#999;width:100%;text-align:center;font-size:1.1em;color:#002233;}There are some CSS rules that style the various elements in the HTML 5 file. These are straight-forward rules. The JQuery code lives inside the tabs.js file $(document).ready(function(){$('#tabs div').hide();$('#tabs div:first').show();$('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function(){$('#tabs ul li').removeClass('active');$(this).parent().addClass('active');var currentTab = $(this).attr('href');$('#tabs div').hide();$(currentTab).show();return false;});}); I am using some of the most commonly used JQuery functions like hide , show, addclass , removeClass I hide and show the tabs when the tab becomes the active tab. When I view my page I get the following result Hope it helps!!!!!

Read the article

Issue with CSS drop down

- by user277314

Im having a little issue with the css drop down in my navigation. The products nav tab is suppose to have the drop down. Additionally, the nav works fine but it seems that the sub categories arent displaying correctly. HERE IS LINK Here is my navigation code: HTML <div id="nav"> <ul id="navlist"> <li><a href="home.html" id="nav-home">Home</a></li> <li><a href="company.html" id="nav-company">company</a></li> <li><a href="benefits.html" id="nav-benefits">benefits</a></li> <li><div id="nav-products2">Products</div> <ul> <li><a href="food.html" id="nav-food-serv">Food Processing Services</a></li> <li><a href="vehicle.html" id="nav-vehicle-serv">Vehicle Services</a></li> <li><a href="auto.html" id="nav-auto-serv">Automotive Services</a></li> <li><a href="laundry.html" id="nav-laundry-serv">Automotive Services</a></li> </ul> </li> <li><a href="laboratories.html" id="nav-labs">laboratories</a></li> <li><a href="industries.html" id="nav-industries">industries</a></li> <li><a href="contact.html" id="nav-contact">contact</a></li> </ul> </div> CSS #nav { float:left; width:1002px; height:42px; } #navlist { list-style: none; list-style-position:outside; list-style-type: none; } #navlist li{ float:left; } #navlist li a { display: block; height: 42px; overflow: hidden; background-position: top left; background-repeat: no-repeat; text-indent: -999em; } #navlist li a:hover { background-position: bottom left; } #navlist li .current {background-position: bottom left;} /* NAV SPECIFICS */ #nav-home {width: 129px; background-image: url(../images/nav/home.jpg);} #nav-company {width: 161px; background-image: url(../images/nav/company.jpg);} #nav-benefits {width: 133px; background-image: url(../images/nav/benefits.jpg);} #nav-products {width: 112px; background-image: url(../images/nav/products.jpg);} #nav-labs {width: 137px; background-image: url(../images/nav/laboratories.jpg);} #nav-industries {width: 169px; background-image: url(../images/nav/industries.jpg);} #nav-contact {width: 161px; background-image: url(../images/nav/contact.jpg);} #nav-food-serv {width: 161px; background-image: url(../images/nav/sub.jpg);} #nav-vehicle-serv {width: 161px; background-image: url(../images/nav/sub.jpg);} #nav-auto-serv {width: 161px; background-image: url(../images/nav/nav/sub.jpg);} #nav-laundry-serv {width: 161px; background-image: url(../images/nav/sub.jpg);} #nav-products2 {width: 112px; background-image: url(../images /nav/products.jpg);height: 42px; overflow: hidden; background-position: top left; background-repeat: no-repeat;text-indent: -999em;} #nav-products2:hover {background-position: bottom left;} #navlist li ul { /* second-level lists */ position: absolute; z-index:10; list-style:none; display: block; background: #000; width: 161px; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ margin:0; padding:0; border-left:1px solid #a58545; border-right:1px solid #a58545; } #navlist li ul li { list-style:none; display: block; clear:left; width:100%; } #navlist li ul li a { display:block; overflow: hidden; height:42px; background-position: top left; background-repeat: no-repeat; text-indent: -999em; margin:0; background-color:0; padding:0; width: 161px; } #navlist li ul li a:hover { background-position: bottom left; }

Read the article

How to refresh DataGrid and DropDown on main page after hiding modal popup

- by James

Hi, I am adding records to a database from a modal popup. After hiding the modal popup, the page has not been refreshed even though I have Rebound the controls. I have reviewed a few postings on the web about this but the solution still evades me. I have attached my code after removing some of the extra detail... It seems I need to cause a postback but I don't know what needs to be changed. Some posts have talked about the extender being misplaced. Anyway, thank you James <asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server"> <div class="divBorder"> <asp:DataGrid id="dgrSessionFolders" runat="server" BorderWidth="2px" BorderStyle="Solid" BorderColor="#C0C0FF" Font-Names="Arial" Font-Bold="True" Font-Size="8pt" GridLines="Horizontal" AutoGenerateColumns="False" PageSize="9999" AllowPaging="False" OnItemCommand="dgrSessionFolders_Command" OnItemDataBound="CheckSessionFolderStatus" HorizontalAlign="Left" ForeColor="Blue" ShowFooter="True" CellPadding="2" OnSortCommand="dgrSessionFolders_Sort" AllowSorting="True"> </asp:DataGrid> </div>     <asp:Label ID="Errormsg" runat="server" ForeColor="#CC0000"></asp:Label> <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline" ChildrenAsTriggers="false" UpdateMode="Conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnEditTopic" /> <asp:AsyncPostBackTrigger ControlID="btnAdd" /> <asp:AsyncPostBackTrigger ControlID="btnUpdate" /> <asp:AsyncPostBackTrigger ControlID="btnDelete" /> <asp:AsyncPostBackTrigger ControlID="btnClear" /> <asp:AsyncPostBackTrigger ControlID="btnAddTopic" /> <asp:AsyncPostBackTrigger ControlID="btnUpdateTopic" /> <asp:AsyncPostBackTrigger ControlID="btnDeleteTopic" /> </Triggers> <ContentTemplate> <asp:panel id="pnl" runat="server" HorizontalAlign="Center" Height="48px" Width="100%" >          <asp:ImageButton ID="btnEditTopic" runat="server" AlternateText="Edit Topic" ImageUrl="~/App_Themes/Common/images/BtnEditTopic.jpg" Height="28px"> </asp:ImageButton> <cc1:ModalPopupExtender ID="btnEditTopic_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground" DropShadow="true" Enabled="true" PopupControlID="pnlEditTopic" TargetControlID="btnEditTopicHidden" CancelControlID="btnEditTopicClose"> </cc1:ModalPopupExtender> <asp:ImageButton ID="btnAdd" runat="server" AlternateText="Add Folder" ImageUrl="~/App_Themes/Common/images/BtnAddFolder.jpg" Height="28px"> </asp:ImageButton> <asp:ImageButton ID="btnUpdate" runat="server" AlternateText="Update Folder" ImageUrl="~/App_Themes/Common/images/BtnUpdateFolder.jpg" Height="28px"> </asp:ImageButton> <asp:ImageButton ID="btnDelete" runat="server" AlternateText="Delete Folder" ImageUrl="~/App_Themes/Common/images/BtnDeleteFolder.jpg" Height="28px"> </asp:ImageButton> <asp:ImageButton ID="BtnClear" runat="server" AlternateText="Clear Screen Input Fields" ImageUrl="~/App_Themes/Common/images/BtnAddMode.jpg" Height="28px"> </asp:ImageButton> <asp:Button ID="btnEditTopicHidden" runat="server" Enabled="false" Text="" Style="visibility: hidden" /> </asp:panel> <asp:Panel ID="pnlEditTopic" runat="server" CssClass="modalPopupEditTopic" Style="display: none;" > <table cellspacing="0" class="borderTable0" width="100%" style=""> <tr> <td colspan="10" class="Subhdr" align="center" style="width:100%"> <asp:label id="lblTopicScreenHdr" Cssclass="ScreenHdr" runat="server">Topic Maintenance</asp:label> </td> </tr> <tr> <td colspan="6"> <asp:Label ID="TopicPopErrorMsg" runat="server" ForeColor="#CC0000"> </asp:Label> </td> </tr> <tr style="height:4px"> <td colspan="6" align="center"> <asp:ImageButton ID="btnAddTopic" runat="server" AlternateText="Add Topic" ImageUrl="~/App_Themes/Common/images/BtnApply.jpg" Height="28px"> </asp:ImageButton> <asp:ImageButton ID="btnUpdateTopic" runat="server" AlternateText="Update Topic" ImageUrl="~/App_Themes/Common/images/BtnApply.jpg" Height="28px"> </asp:ImageButton> <asp:ImageButton ID="btnDeleteTopic" runat="server" AlternateText="Delete Topic" ImageUrl="~/App_Themes/Common/images/BtnDelete.jpg" Height="28px"> </asp:ImageButton> <asp:ImageButton ID="btnEditTopicClose" runat="server" AlternateText="Close Edit Topic Popup" ImageUrl="~/App_Themes/Common/images/BtnCancel.jpg" Height="28px"> </asp:ImageButton> </td> </tr> </table> </asp:Panel> </ContentTemplate> </asp:UpdatePanel> Private Sub btnAddTopic_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnAddTopic.Click 'Add the Topic table entry AddTopic() 'Display an informational message Errormsg.Text = "The Topic has been successfully added, thank you! " Errormsg.ForeColor = Drawing.Color.Blue 'Rebind the Topic Drop Down and set to added Topic ddlSessionTopic.DataBind() ddlSessionTopic.SelectedValue = drTopic("TOPC_ID") 'Rebind the Session Folders grid RebindGrid() 'Hide the Topic Popup btnEditTopic_ModalPopupExtender.Hide() End Sub Private Sub RebindGrid() cnnSQL = New SqlConnection(strConnection) cmdSQL = New SqlCommand("GetSessionFoldersForGrid", cnnSQL) cmdSQL.CommandType = CommandType.StoredProcedure cmdSQL.Parameters.Clear() cnnSQL.Open() dadSQL = New SqlDataAdapter(cmdSQL) dadSQL.SelectCommand = cmdSQL dadSQL.Fill(dtSessionFolderGrid) cnnSQL.Close() dvSessionFolderGrid = dtSessionFolderGrid.DefaultView dvSessionFolderGrid.Sort = String.Format("{0} {1}{2}", so.Sortfield, so.SortDirection, so.SortSuffix) dgrSessionFolders.DataSource = dvSessionFolderGrid dgrSessionFolders.DataBind() End Sub

Read the article

Having trouble on mouse over tabs

- by user225269

I downloaded a webpage template from the internet because I don't know how to design webpage on photoshop. This was the one I downloaded: http://www.freewebtemplates.com/download/templates/9839 And modified it. And I have this code for mouse over tabs from dynamic drive. But doesn't seem to be working with the template that I downloaded. Here is my current code: <script src="mouseovertabs.js" type="text/javascript"> </script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Designed by Web Page Templates</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <table border="0" align="center" cellpadding="0" cellspacing="0" class="bg1"> <tr> <td class="text1" style="height: 50px;">xd627 information management system</td> </tr> <tr> <div id="mytabsmenu" class="tabsmenuclass"> <td class="bg5"><table border="0" cellspacing="0" cellpadding="0" style="height: 62px; padding-top: 15px;"> <tr align="center"> <td><ul><li><a href="index.html" class="link1">Homepage</a></li></td> <td><li><a href="RegStuds.php" class="link1">Database</a></li></td> <td><li><a href="#" class="link1">About</a></li> </ul></td> <a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a> <div id="mysubmenuarea" class="tabsmenucontentclass">  <a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a> </div> <script type="text/javascript"> //mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout") mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true) </script> </div> What might be wrong here,its working perfectly with my previous one, but with no layout at all: <script src="mouseovertabs.js" type="text/javascript"> /*********************************************** * Mouseover Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div id="mytabsmenu" class="tabsmenuclass"> <ul> <li><a href="" rel="gotsubmenu[selected]">Database Manipulation</a></li> <li><a href="" rel="gotsubmenu" >Register User</a></li> <li><a href="loginform2.php" rel="gotsubmenu" >Logout</a></li> <li><a href=""></a></li> </ul> </div> <div id="mysubmenuarea" class="tabsmenucontentclass">  <a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a> </div> <script type="text/javascript"> //mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout") mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true) </script> </body> </html>

Read the article

I see no LOBs!

- by Paul White

Is it possible to see LOB (large object) logical reads from STATISTICS IO output on a table with no LOB columns? I was asked this question today by someone who had spent a good fraction of their afternoon trying to work out why this was occurring – even going so far as to re-run DBCC CHECKDB to see if any corruption had taken place. The table in question wasn’t particularly pretty – it had grown somewhat organically over time, with new columns being added every so often as the need arose. Nevertheless, it remained a simple structure with no LOB columns – no TEXT or IMAGE, no XML, no MAX types – nothing aside from ordinary INT, MONEY, VARCHAR, and DATETIME types. To add to the air of mystery, not every query that ran against the table would report LOB logical reads – just sometimes – but when it did, the query often took much longer to execute. Ok, enough of the pre-amble. I can’t reproduce the exact structure here, but the following script creates a table that will serve to demonstrate the effect: IF OBJECT_ID(N'dbo.Test', N'U') IS NOT NULL DROP TABLE dbo.Test GO CREATE TABLE dbo.Test ( row_id NUMERIC IDENTITY NOT NULL, col01 NVARCHAR(450) NOT NULL, col02 NVARCHAR(450) NOT NULL, col03 NVARCHAR(450) NOT NULL, col04 NVARCHAR(450) NOT NULL, col05 NVARCHAR(450) NOT NULL, col06 NVARCHAR(450) NOT NULL, col07 NVARCHAR(450) NOT NULL, col08 NVARCHAR(450) NOT NULL, col09 NVARCHAR(450) NOT NULL, col10 NVARCHAR(450) NOT NULL, CONSTRAINT [PK dbo.Test row_id] PRIMARY KEY CLUSTERED (row_id) ) ; The next script loads the ten variable-length character columns with one-character strings in the first row, two-character strings in the second row, and so on down to the 450th row: WITH Numbers AS ( -- Generates numbers 1 - 450 inclusive SELECT TOP (450) n = ROW_NUMBER() OVER (ORDER BY (SELECT 0)) FROM master.sys.columns C1, master.sys.columns C2, master.sys.columns C3 ORDER BY n ASC ) INSERT dbo.Test WITH (TABLOCKX) SELECT REPLICATE(N'A', N.n), REPLICATE(N'B', N.n), REPLICATE(N'C', N.n), REPLICATE(N'D', N.n), REPLICATE(N'E', N.n), REPLICATE(N'F', N.n), REPLICATE(N'G', N.n), REPLICATE(N'H', N.n), REPLICATE(N'I', N.n), REPLICATE(N'J', N.n) FROM Numbers AS N ORDER BY N.n ASC ; Once those two scripts have run, the table contains 450 rows and 10 columns of data like this: Most of the time, when we query data from this table, we don’t see any LOB logical reads, for example: -- Find the maximum length of the data in -- column 5 for a range of rows SELECT result = MAX(DATALENGTH(T.col05)) FROM dbo.Test AS T WHERE row_id BETWEEN 50 AND 100 ; But with a different query… -- Read all the data in column 1 SELECT result = MAX(DATALENGTH(T.col01)) FROM dbo.Test AS T ; …suddenly we have 49 LOB logical reads, as well as the ‘normal’ logical reads we would expect. The Explanation If we had tried to create this table in SQL Server 2000, we would have received a warning message to say that future INSERT or UPDATE operations on the table might fail if the resulting row exceeded the in-row storage limit of 8060 bytes. If we needed to store more data than would fit in an 8060 byte row (including internal overhead) we had to use a LOB column – TEXT, NTEXT, or IMAGE. These special data types store the large data values in a separate structure, with just a small pointer left in the original row. Row Overflow SQL Server 2005 introduced a feature called row overflow, which allows one or more variable-length columns in a row to move to off-row storage if the data in a particular row would otherwise exceed 8060 bytes. You no longer receive a warning when creating (or altering) a table that might need more than 8060 bytes of in-row storage; if SQL Server finds that it can no longer fit a variable-length column in a particular row, it will silently move one or more of these columns off the row into a separate allocation unit. Only variable-length columns can be moved in this way (for example the (N)VARCHAR, VARBINARY, and SQL_VARIANT types). Fixed-length columns (like INTEGER and DATETIME for example) never move into ‘row overflow’ storage. The decision to move a column off-row is done on a row-by-row basis – so data in a particular column might be stored in-row for some table records, and off-row for others. In general, if SQL Server finds that it needs to move a column into row-overflow storage, it moves the largest variable-length column record for that row. Note that in the case of an UPDATE statement that results in the 8060 byte limit being exceeded, it might not be the column that grew that is moved! Sneaky LOBs Anyway, that’s all very interesting but I don’t want to get too carried away with the intricacies of row-overflow storage internals. The point is that it is now possible to define a table with non-LOB columns that will silently exceed the old row-size limit and result in ordinary variable-length columns being moved to off-row storage. Adding new columns to a table, expanding an existing column definition, or simply storing more data in a column than you used to – all these things can result in one or more variable-length columns being moved off the row. Note that row-overflow storage is logically quite different from old-style LOB and new-style MAX data type storage – individual variable-length columns are still limited to 8000 bytes each – you can just have more of them now. Having said that, the physical mechanisms involved are very similar to full LOB storage – a column moved to row-overflow leaves a 24-byte pointer record in the row, and the ‘separate storage’ I have been talking about is structured very similarly to both old-style LOBs and new-style MAX types. The disadvantages are also the same: when SQL Server needs a row-overflow column value it needs to follow the in-row pointer a navigate another chain of pages, just like retrieving a traditional LOB. And Finally… In the example script presented above, the rows with row_id values from 402 to 450 inclusive all exceed the total in-row storage limit of 8060 bytes. A SELECT that references a column in one of those rows that has moved to off-row storage will incur one or more lob logical reads as the storage engine locates the data. The results on your system might vary slightly depending on your settings, of course; but in my tests only column 1 in rows 402-450 moved off-row. You might like to play around with the script – updating columns, changing data type lengths, and so on – to see the effect on lob logical reads and which columns get moved when. You might even see row-overflow columns moving back in-row if they are updated to be smaller (hint: reduce the size of a column entry by at least 1000 bytes if you hope to see this). Be aware that SQL Server will not warn you when it moves ‘ordinary’ variable-length columns into overflow storage, and it can have dramatic effects on performance. It makes more sense than ever to choose column data types sensibly. If you make every column a VARCHAR(8000) or NVARCHAR(4000), and someone stores data that results in a row needing more than 8060 bytes, SQL Server might turn some of your column data into pseudo-LOBs – all without saying a word. Finally, some people make a distinction between ordinary LOBs (those that can hold up to 2GB of data) and the LOB-like structures created by row-overflow (where columns are still limited to 8000 bytes) by referring to row-overflow LOBs as SLOBs. I find that quite appealing, but the ‘S’ stands for ‘small’, which makes expanding the whole acronym a little daft-sounding…small large objects anyone? © Paul White 2011 email: [email protected] twitter: @SQL_Kiwi

Read the article

SpriteFont Exception, no such character?

- by Michal Bozydar Pawlowski

I have such spriteFont: <?xml version="1.0" encoding="utf-8"?>  <XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics"> <Asset Type="Graphics:FontDescription">  <FontName>Segoe UI</FontName>  <Size>20</Size>  <Spacing>0</Spacing>  <UseKerning>true</UseKerning>  <Style>Regular</Style>    <CharacterRegions> <CharacterRegion> <Start>	</Start> <End>	</End> </CharacterRegion> <CharacterRegion> <Start> </Start> <End>Ұ</End> </CharacterRegion> </CharacterRegions> </Asset> </XnaContent> It has the character regions (32-1200) And I get this exception: A first chance exception of type 'System.ArgumentException' occurred in Microsoft.Xna.Framework.Graphics.ni.dll The character '?' (0x0441) is not available in this SpriteFont. If applicable, adjust the font's start and end CharacterRegions to include this character. Parameter name: character Why? I'm drawing the string like this: spriteBatch.DrawString(font24, zasadyText, zasadyTextPos, kolorCzcionki1, -0.05f, Vector2.Zero, 1.0f, SpriteEffects.None, 0.5f) I even changed the spriteFont to cyrillic: <CharacterRegions> <CharacterRegion> <Start>	</Start> <End>	</End> </CharacterRegion> <CharacterRegion> <Start> </Start> <End>ſ</End> </CharacterRegion> <CharacterRegion> <Start>А</Start> <End>ї</End> </CharacterRegion> </CharacterRegions> </Asset> </XnaContent> and it still doesn't work. I got the (0x441 = char) exception -- EDIT -- Ok, I got the solution. It was a letter mistake in language. I had this: if (jezyk == "ru_RU") { font14 = Content.Load<SpriteFont>("ru_font14"); font24 = Content.Load<SpriteFont>("ru_font24"); font12 = Content.Load<SpriteFont>("ru_czcionkaFloty"); font10 = Content.Load<SpriteFont>("ru_font10"); font28 = Content.Load<SpriteFont>("ru_font28"); font20 = Content.Load<SpriteFont>("ru_font20"); } else { font14 = Content.Load<SpriteFont>("font14"); font24 = Content.Load<SpriteFont>("font24"); font12 = Content.Load<SpriteFont>("czcionkaFloty"); font10 = Content.Load<SpriteFont>("font10"); font28 = Content.Load<SpriteFont>("font28"); font20 = Content.Load<SpriteFont>("font20"); } and there should be not "ru_RU" but "ru-RU" I have no idea. I changed the spriteFont to cyrillic: <CharacterRegions> <CharacterRegion> <Start>	</Start> <End>	</End> </CharacterRegion> <CharacterRegion> <Start> </Start> <End>ſ</End> </CharacterRegion> <CharacterRegion> <Start>А</Start> <End>ї</End> </CharacterRegion> </CharacterRegions> </Asset> </XnaContent> and it still doesn't work. I got the (0x441 = char) exception

Read the article

Adding data (not only text) to a multi column ListView (WPF)

- by user811804

I am working on a WPF application in C# (.NET 4.0) where I have a ListView with a GridView that has two columns. I dynamically want to add rows (in code). My dilemma is that only the first column will have regular text added to it. The second column will have an object that includes a multi column Grid with TextBlocks. (see link http://imageshack.us/photo/my-images/803/listview.png/) If I do what you would normally do when you want to enter text in all columns (ie. DisplayMemberBinding) all I get in the second column is the text "System.Windows.Grid", which obviously isn't what I want. For reference if I just try to add the Grid object (with the TextBlocks) with the code listView1.Items.Add(grid1) (not using DisplayMemberBinding) the object gets added to the second column only (with the first column being blank) and not how it normally works with text where the same text ends up in all columns. I hope my question is detailed enough and any help with this would be much appreciated. EDIT: I have tried the following code, howeever every time I click the button to add a new row every single row gets updated with the same datatemplate. (ie. the second column always shows the same data on every row.) xaml: <Window x:Class="TEST.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="AAA" Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded"> <Grid Name="grid1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="374*" /> <ColumnDefinition Width="129*" /> </Grid.ColumnDefinitions> <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="21,12,0,0" Name="button1" VerticalAlignment="Top" Width="75" Grid.Column="1" Click="button1_Click" /> </Grid> code: public partial class MainWindow : Window { ListView listView1 = new ListView(); GridViewColumn viewCol2 = new GridViewColumn(); public MainWindow() { InitializeComponent(); Style style = new Style(typeof(ListViewItem)); style.Setters.Add(new Setter(ListViewItem.HorizontalContentAlignmentProperty, HorizontalAlignment.Stretch)); listView1.ItemContainerStyle = style; GridView gridView1 = new GridView(); listView1.View = gridView1; GridViewColumn viewCol1 = new GridViewColumn(); viewCol1.Header = "Option"; gridView1.Columns.Add(viewCol1); viewCol2.Header = "Value"; gridView1.Columns.Add(viewCol2); grid1.Children.Add(listView1); viewCol1.DisplayMemberBinding = new Binding("Option"); } private void Window_Loaded(object sender, RoutedEventArgs e) { } private void button1_Click(object sender, RoutedEventArgs e) { DataTemplate dataTemplate = new DataTemplate(); FrameworkElementFactory spFactory = new FrameworkElementFactory(typeof(Grid)); Random random = new Random(); int cols = random.Next(1, 6); int full = 100; for (int i = 0; i < cols; i++) { FrameworkElementFactory col1 = new FrameworkElementFactory(typeof(ColumnDefinition)); int partWidth = random.Next(0, full); full -= partWidth; col1.SetValue(ColumnDefinition.WidthProperty, new GridLength(partWidth, GridUnitType.Star)); spFactory.AppendChild(col1); } if (full > 0) { FrameworkElementFactory col1 = new FrameworkElementFactory(typeof(ColumnDefinition)); col1.SetValue(ColumnDefinition.WidthProperty, new GridLength(full, GridUnitType.Star)); spFactory.AppendChild(col1); } for (int i = 0; i < cols; i++) { FrameworkElementFactory text1 = new FrameworkElementFactory(typeof(TextBlock)); SolidColorBrush sb1 = new SolidColorBrush(); switch (i) { case 0: sb1.Color = Colors.Blue; break; case 1: sb1.Color = Colors.Red; break; case 2: sb1.Color = Colors.Yellow; break; case 3: sb1.Color = Colors.Green; break; case 4: sb1.Color = Colors.Purple; break; case 5: sb1.Color = Colors.Pink; break; case 6: sb1.Color = Colors.Brown; break; } text1.SetValue(TextBlock.BackgroundProperty, sb1); text1.SetValue(Grid.ColumnProperty, i); spFactory.AppendChild(text1); } if (full > 0) { FrameworkElementFactory text1 = new FrameworkElementFactory(typeof(TextBlock)); SolidColorBrush sb1 = new SolidColorBrush(Colors.Black); text1.SetValue(TextBlock.BackgroundProperty, sb1); text1.SetValue(Grid.ColumnProperty, cols); spFactory.AppendChild(text1); } dataTemplate.VisualTree = spFactory; viewCol2.CellTemplate = dataTemplate; int rows = listView1.Items.Count + 1; listView1.Items.Add(new { Option = "Row " + rows }); } }

Read the article

javascript robot

- by sarah

hey guys! I need help making this robot game in javascript (notepad++) please HELP! I'm really confused by the functions <html> <head><title>Robot Invasion 2199</title></head> <body style="text-align:center" onload="newGame();"> <h2>Robot Invasion 2199</h2> <div style="text-align:center; background:white; margin-right: auto; margin-left:auto;"> <div style=""> <div style="width: auto; border:solid thin red; text-align:center; margin:10px auto 10px auto; padding:1ex 0ex;font-family: monospace" id="scene"></pre> </div> <div><span id="status"></span></div> <form style="text-align:center"> PUT THE CONTROL PANEL HERE!!! </form> </div> <script type="text/javascript"> // GENERAL SUGGESTIONS ABOUT WRITING THIS PROGRAM: // You should test your program before you've finished writing all of the // functions. The newGame, startLevel, and update functions should be your // first priority since they're all involved in displaying the initial state // of the game board. // // Next, work on putting together the control panel for the game so that you // can begin to interact with it. Your next goal should be to get the move // function working so that everything else can be testable. Note that all nine // of the movement buttons (including the pass button) should call the move // function when they are clicked, just with different parameters. // // All the remaining functions can be completed in pretty much any order, and // you'll see the game gradually improve as you write the functions. // // Just remember to keep your cool when writing this program. There are a // bunch of functions to write, but as long as you stay focused on the function // you're writing, each individual part is not that hard. // These variables specify the number of rows and columns in the game board. // Use these variables instead of hard coding the number of rows and columns // in your loops, etc. // i.e. Write: // for(i = 0; i < NUM_ROWS; i++) ... // not: // for(i = 0; i < 15; i++) ... var NUM_ROWS = 15; var NUM_COLS = 25; // Scene is arguably the most important variable in this whole program. It // should be set up as a two-dimensional array (with NUM_ROWS rows and // NUM_COLS columns). This represents the game board, with the scene[i][j] // representing what's in row i, column j. In particular, the entries should // be: // // "." for empty space // "R" for a robot // "S" for a scrap pile // "H" for the hero var scene; // These variables represent the row and column of the hero's location, // respectively. These are more of a conveniece so you don't have to search // for the "H" in the scene array when you need to know where the hero is. var heroRow; var heroCol; // These variables keep track of various aspects of the gameplay. // score is just the number of robots destroyed. // screwdrivers is the number of sonic screwdriver charges left. // fastTeleports is the number of fast teleports remaining. // level is the current level number. // Be sure to reset all of these when a new game starts, and update them at the // appropriate times. var score; var screwdrivers; var fastTeleports; var level; // This function should use a sonic screwdriver if there are still charges // left. The sonic screwdriver turns any robot that is in one of the eight // squares immediately adjacent to the hero into scrap. If there are no charges // left, then this function should instead pop up a dialog box with the message // "Out of sonic screwdrivers!". As with any function that alters the game's // state, this function should call the update function when it has finished. // // Your "Sonic Screwdriver" button should call this function directly. function screwdriver() { // WRITE THIS FUNCTION } // This function should move the hero to a randomly selected location if there // are still fast teleports left. This function MUST NOT move the hero on to // a square that is already occupied by a robot or a scrap pile, although it // can move the hero next to a robot. The number of fast teleports should also // be decreased by one. If there are no fast teleports left, this function // should just pop up a message box saying so. As with any function that alters // the game's state, this function should call the update function when it has // finished. // // HINT: Have a loop that keeps trying random spots until a valid one is found. // HINT: Use the validPosition function to tell if a spot is valid // // Your "Fast Teleport" button s

Read the article

Refactoring an ERB Template to Haml

- by Liam McLennan

ERB is the default view templating system used by Ruby on Rails. Haml is an alternative templating system that uses whitespace to represent document structure. The example from the haml website shows the following equivalent markup: Haml ERB #profile .left.column #date= print_date #address= current_user.address .right.column #email= current_user.email #bio= current_user.bio <div id="profile"> <div class="left column"> <div id="date"><%= print_date %></div> <div id="address"><%= current_user.address %></div> </div> <div class="right column"> <div id="email"><%= current_user.email %></div> <div id="bio"><%= current_user.bio %></div> </div> </div> I like haml because it is concise and the significant whitespace makes it easy to see the structure at a glance. This post is about a ruby project but nhaml makes haml available for asp.net MVC also. The ERB Template Today I spent some time refactoring an ERB template to Haml. The template is called list.html.erb and its purpose is to render a list of tweets (twitter messages). <style> form { float: left; } </style> <h1>Tweets</h1> <table> <thead><tr><th></th><th>System</th><th>Human</th><th></th></tr></thead> <% @tweets.each do |tweet| %> <tr> <td><%= h(tweet['text']) %></td> <td><%= h(tweet['system_classification']) %></td> <td><%= h(tweet['human_classification']) %></td> <td><form action="/tweet/rate" method="post"> <%= token_tag %> <input type="submit" value="Positive"/> <input type="hidden" value="<%= tweet['id']%>" name="id" /> <input type="hidden" value="positive" name="rating" /> </form> <form action="/tweet/rate" method="post"> <%= token_tag %> <input type="submit" value="Neutral"/> <input type="hidden" value="<%= tweet['id']%>" name="id" /> <input type="hidden" value="neutral" name="rating" /> </form> <form action="/tweet/rate" method="post"> <%= token_tag %> <input type="submit" value="Negative"/> <input type="hidden" value="<%= tweet['id']%>" name="id" /> <input type="hidden" value="negative" name="rating" /> </form> </td> </tr> <% end %> </table> Haml Template: Take 1 My first step was to convert this page to a Haml template in place. Directly translating the ERB template to Haml resulted in: list.haml %style form {float: left;} %h1 Tweets %table %thead %tr %th %th System %th Human %th %tbody - @tweets.each do |tweet| %tr %td= tweet['text'] %td= tweet['system_classification'] %td= tweet['human_classification'] %td %form{ :action=>"/tweet/rate", :method=>"post"} = token_tag <input type="submit" value="Positive"/> <input type="hidden" value="positive" name="rating" /> %input{ :type=>"hidden", :value => tweet['id']} %form{ :action=>"/tweet/rate", :method=>"post"} = token_tag <input type="submit" value="Neutral"/> <input type="hidden" value="neutral" name="rating" /> %input{ :type=>"hidden", :value => tweet['id']} %form{ :action=>"/tweet/rate", :method=>"post"} = token_tag <input type="submit" value="Negative"/> <input type="hidden" value="negative" name="rating" /> %input{ :type=>"hidden", :value => tweet['id']} end I like this better already but I can go further. Haml Template: Take 2 The haml documentation says to avoid using iterators so I introduced a partial template (_tweet.haml) as the template to render a single tweet. _tweet.haml %tr %td= tweet['text'] %td= tweet['system_classification'] %td= tweet['human_classification'] %td %form{ :action=>"/tweet/rate", :method=>"post"} = token_tag <input type="submit" value="Positive"/> <input type="hidden" value="positive" name="rating" /> %input{ :type=>"hidden", :value => tweet['id']} %form{ :action=>"/tweet/rate", :method=>"post"} = token_tag <input type="submit" value="Neutral"/> <input type="hidden" value="neutral" name="rating" /> %input{ :type=>"hidden", :value => tweet['id']} %form{ :action=>"/tweet/rate", :method=>"post"} = token_tag <input type="submit" value="Negative"/> <input type="hidden" value="negative" name="rating" /> %input{ :type=>"hidden", :value => tweet['id']} and the list template is simplified to: list.haml %style form {float: left;} %h1 Tweets %table %thead %tr %th %th System %th Human %th %tbody = render(:partial => "tweet", :collection => @tweets) That is definitely an improvement, but then I noticed that _tweet.haml contains three form tags that are nearly identical. Haml Template: Take 3 My first attempt, later aborted, was to use a helper to remove the duplication. A much better solution is to use another partial. _rate_button.haml %form{ :action=>"/tweet/rate", :method=>"post"} = token_tag %input{ :type => "submit", :value => rate_button[:rating].capitalize } %input{ :type => "hidden", :value => rate_button[:rating], :name => 'rating' } %input{ :type => "hidden", :value => rate_button[:id], :name => 'id' } and the tweet template is now simpler: _tweet.haml %tr %td= tweet['text'] %td= tweet['system_classification'] %td= tweet['human_classification'] %td = render( :partial => 'rate_button', :object => {:rating=>'positive', :id=> tweet['id']}) = render( :partial => 'rate_button', :object => {:rating=>'neutral', :id=> tweet['id']}) = render( :partial => 'rate_button', :object => {:rating=>'negative', :id=> tweet['id']}) list.haml remains unchanged. Summary I am extremely happy with the switch. No doubt there are further improvements that I can make, but I feel like what I have now is clean and well factored.

Read the article

How to add/remove rows using SlickGrid

- by lkahtz

How to write such functions and bind them to two buttons like "add row" and "remove row": The now working example code only support adding new row by editing on the blank bottom line. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>SlickGrid example 3: Editing</title> <link rel="stylesheet" href="../slick.grid.css" type="text/css"/> <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/> <link rel="stylesheet" href="examples.css" type="text/css"/> <style> .cell-title { font-weight: bold; } .cell-effort-driven { text-align: center; } </style> </head> <body> <div style="position:relative"> <div style="width:600px;"> <div id="myGrid" style="width:100%;height:500px;"></div> </div> <div class="options-panel"> <h2>Demonstrates:</h2> <ul> <li>adding basic keyboard navigation and editing</li> <li>custom editors and validators</li> <li>auto-edit settings</li> </ul> <h2>Options:</h2> <button onclick="grid.setOptions({autoEdit:true})">Auto-edit ON</button>   <button onclick="grid.setOptions({autoEdit:false})">Auto-edit OFF</button> </div> </div> <script src="../lib/firebugx.js"></script> <script src="../lib/jquery-1.7.min.js"></script> <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> <script src="../lib/jquery.event.drag-2.0.min.js"></script> <script src="../slick.core.js"></script> <script src="../plugins/slick.cellrangedecorator.js"></script> <script src="../plugins/slick.cellrangeselector.js"></script> <script src="../plugins/slick.cellselectionmodel.js"></script> <script src="../slick.formatters.js"></script> <script src="../slick.editors.js"></script> <script src="../slick.grid.js"></script> <script> function requiredFieldValidator(value) { if (value == null || value == undefined || !value.length) { return {valid: false, msg: "This is a required field"}; } else { return {valid: true, msg: null}; } } var grid; var data = []; var columns = [ {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator}, {id: "desc", name: "Description", field: "description", width: 100, editor: Slick.Editors.LongText}, {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text}, {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete}, {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date}, {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date}, {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox} ]; var options = { editable: true, enableAddRow: true, enableCellNavigation: true, asyncEditorLoading: false, autoEdit: false }; $(function () { for (var i = 0; i < 500; i++) { var d = (data[i] = {}); d["title"] = "Task " + i; d["description"] = "This is a sample task description.\n It can be multiline"; d["duration"] = "5 days"; d["percentComplete"] = Math.round(Math.random() * 100); d["start"] = "01/01/2009"; d["finish"] = "01/05/2009"; d["effortDriven"] = (i % 5 == 0); } grid = new Slick.Grid("#myGrid", data, columns, options); grid.setSelectionModel(new Slick.CellSelectionModel()); grid.onAddNewRow.subscribe(function (e, args) { var item = args.item; grid.invalidateRow(data.length); data.push(item); grid.updateRowCount(); grid.render(); }); }) </script> </body> </html>

Read the article

Smooth animation on a persistently refreshing canvas

- by Neurofluxation

Yo everyone! I have been working on an Isometric Tile Game Engine in HTML5/Canvas for a little while now and I have a complete working game. Earlier today I looked back over my code and thought: "hmm, let's try to get this animated smoothly..." And since then, that is all I have tried to do. The problem I would like the character to actually "slide" from tile to tile - but the canvas redrawing doesn't allow this - does anyone have any ideas....? Code and fiddle below... Fiddle with it! http://jsfiddle.net/neuroflux/n7VAu/ <html> <head> <title>tileEngine - Isometric</title> <style type="text/css"> * { margin: 0px; padding: 0px; font-family: arial, helvetica, sans-serif; font-size: 12px; cursor: default; } </style> <script type="text/javascript"> var map = Array( //land [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]], [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]] ); var tileDict = Array("http://www.wikiword.co.uk/release-candidate/canvas/tileEngine/land.png"); var charDict = Array("http://www.wikiword.co.uk/release-candidate/canvas/tileEngine/mario.png"); var objectDict = Array("http://www.wikiword.co.uk/release-candidate/canvas/tileEngine/rock.png"); //last is one more var objectImg = new Array(); var charImg = new Array(); var tileImg = new Array(); var loaded = 0; var loadTimer; var ymouse; var xmouse; var eventUpdate = 0; var playerX = 0; var playerY = 0; function loadImg(){ //preload images and calculate the total loading time for(var i=0;i<tileDict.length;i++){ tileImg[i] = new Image(); tileImg[i].src = tileDict[i]; tileImg[i].onload = function(){ loaded++; } } i = 0; for(var i=0;i<charDict.length;i++){ charImg[i] = new Image(); charImg[i].src = charDict[i]; charImg[i].onload = function(){ loaded++; } } i = 0; for(var i=0;i<objectDict.length;i++){ objectImg[i] = new Image(); objectImg[i].src = objectDict[i]; objectImg[i].onload = function(){ loaded++; } } } function checkKeycode(event) { //key pressed var keycode; if(event == null) { keyCode = window.event.keyCode; } else { keyCode = event.keyCode; } switch(keyCode) { case 38: //left if(!map[playerX-1][playerY][1] > 0){ playerX--; } break; case 40: //right if(!map[playerX+1][playerY][1] > 0){ playerX++; } break; case 39: //up if(!map[playerX][playerY-1][1] > 0){ playerY--; } break; case 37: //down if(!map[playerX][playerY+1][1] > 0){ playerY++; } break; default: break; } } function loadAll(){ //load the game if(loaded == tileDict.length + charDict.length + objectDict.length){ clearInterval(loadTimer); loadTimer = setInterval(gameUpdate,100); } } function drawMap(){ //draw the map (in intervals) var tileH = 25; var tileW = 50; mapX = 80; mapY = 10; for(i=0;i<map.length;i++){ for(j=0;j<map[i].length;j++){ var drawTile= map[i][j][0]; var xpos = (i-j)*tileH + mapX*4.5; var ypos = (i+j)*tileH/2+ mapY*3.0; ctx.drawImage(tileImg[drawTile],xpos,ypos); if(i == playerX && j == playerY){ you = ctx.drawImage(charImg[0],xpos,ypos-(charImg[0].height/2)); } } } } function init(){ //initialise the main functions and even handlers ctx = document.getElementById('main').getContext('2d'); loadImg(); loadTimer = setInterval(loadAll,10); document.onkeydown = checkKeycode; } function gameUpdate() { //update the game, clear canvas etc ctx.clearRect(0,0,904,460); ctx.fillStyle = "rgba(255, 255, 255, 1.0)"; //assign color drawMap(); } </script> </head> <body align="center" style="text-align: center;" onload="init()"> <canvas id="main" width="904" height="465"> <h1 style="color: white; font-size: 24px;">I'll be damned, there be no HTML5 & canvas support on this 'ere electronic machine!<sub>This game, jus' plain ol' won't work!</sub></h1> </canvas> </body> </html>

Read the article

top rounded corners in my jquery

- by Sohail

Hello everybody, I have this jquery for my menu buttons, what I want is to get top-corner rounded for my menu, this is a whole code: <html> <style type="text/css"> #menuBarHolder { width: 860px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;} #menuBarHolder ul{ list-style-type:none; display:block;} .firstchild { border-left:1px solid #ccc;} #container { margin-top:10px;} #menuBar li{ float:left; padding:15px; height:16px; width:70px; border-right:1px solid #ccc; } #menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;} .menuHover { background-color:#999;} .menuInfo { cursor:hand; background-color:#000; color:#fff; width:74px; font-size:11px;height:100px; padding:3px; display:none; position:absolute; margin-left:-15px; margin-top:0px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -khtml-border-radius-bottomright: 5px; -khtml-border-radius-bottomleft: 5px; border-radius-bottomright: 5px;border-radius-bottomleft: 5px; } </style>  <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#menuBar li').click(function() { var url = $(this).find('a').attr('href'); document.location.href = url; }); $('#menuBar li').hover(function() { $(this).find('.menuInfo').slideDown(); }, function() { $(this).find('.menuInfo').slideUp(); }); }); </script> <center> <div id="menuBarHolder"> <ul id="menuBar"> <li class="firstchild"><a href="javascript:#">Home</a><div class="menuInfo">I am some text about the home section</div></li> <li><a href="javascript:#">About Us</a><div class="menuInfo">I am some text about the services section</div></li> <li><a href="javascript:#">News</a><div class="menuInfo">I am some text about the clients section</div></li> <li><a href="javascript:#">Equipment</a><div class="menuInfo">I am some text about the portfolio section</div></li> <li><a href="javascript:#">Services</a><div class="menuInfo">I am some text about the about section</div></li> <li><a href="javascript:#">Project</a><div class="menuInfo">I am some text about the blog section</div></li> <li><a href="javascript:#">Contact Us</a><div class="menuInfo">I am some text about the follow section</div></li> </ul> </div> </div> </center> </html> Thanks for your help.

Read the article

Struts Tiles application

- by rav83

Am trying a tiles application.Below is my code tiles-defs.xml </tiles-definitions> <definition name="${YOUR_DEFINITION_HERE}"> </definition> <definition name="commonPage" path="/jsps/template.jsp"> <put name="header" value="/jsps/header.jsp" /> <put name="menu" value="/jsps/menu.jsp" /> <put name="body" value="/jsps/homebody.jsp" /> <put name="footer" value="/jsps/footer.jsp" /> </definition> <definition name="aboutUsPage" extends="commonPage"> <put name="body" value="/jsps/aboutUsBody.jsp" /> </definition> </tiles-definitions> struts-config.xml <action path="/aboutus" type="java.com.mbest.core.action.AboutUsAction" parameter="method"> <forward name="success" path="aboutUsPage"/> <forward name="failure" path="aboutUsPage"/> </action> </action-mappings> template.jsp <%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %> <html> <head><title></title></head> <body> <table border="1" cellspacing="0" cellpadding="0" style="width: 98%; height: 100%"> <tr> <td colspan="2"> <tiles:insert attribute="header"/> </td> </tr> <tr style="height: 500px"> <td valign="top" style="width: 200px"> <tiles:insert attribute="menu"/> </td> <td valign="baseline" align="left"> <tiles:insert attribute="body"/> </tr> <tr> <td colspan="2"> <tiles:insert attribute="footer"/> </td> </tr> </table> </body> </html> homebody.jsp <%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %> <%@taglib uri="/WEB-INF/struts-html.tld" prefix="html"%> <%@taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %> <html> <head> <title></title> <style type="text/css"> <%@include file="../css/helper.css"%> <%@include file="../css/dropdown.css" %> <%@include file="../css/default.ultimate.css" %> </style> </head> <body> <div id="header"> <ul id="nav" class="dropdown dropdown-horizontal"> <li><span class="dir"><html:link page="/aboutus.do?method=aboutUsPage" >About Us</html:link></span></li> <li><span class="dir"><a href="./">Products</a></span></li> <li><span class="dir"><a href="./">Infrastructure</a></span></li> <li><span class="dir"><a href="./">Pharmaceutical Formulations</a></span></li> <li><span class="dir"><a href="./">Contact Us</a></span></li> </ul> </div> </body> </html> AboutUsAction.java package java.com.mindbest.core.action; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.struts.action.ActionForm; import org.apache.struts.action.ActionForward; import org.apache.struts.action.ActionMapping; import org.apache.struts.actions.DispatchAction; public class AboutUsAction extends DispatchAction { public ActionForward aboutUsPage(ActionMapping mapping,ActionForm form, HttpServletRequest request,HttpServletResponse response)throws Exception { return mapping.findForward("success"); } } aboutUsBody.jsp hello In my above code if i try to access the app using (domainname)/example/aboutus.do its giving 500 error.Can anyone help me figure this out?

Read the article

Tooltips problem, making this javascript work with my smarty foreach loop, help pelase!

- by Kyle Sevenoaks

I am using an example of tooltips from http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm on www.euroworker.no/order I have this code here to work with, but it just doesn't seem to work correctly, I've tried everything I can think of (not a lot of things) Here's the code. {foreach from=$cart.cartItems item="item" name="cart"} <div class="{zebra loop="cart"}"> <div id="sgproductview"> <div id="cart2Varekode"> <p> {if $product.sku} <span class="param">{$item.product.sku}</span> {else} <span>{img src=$item.Product.DefaultImage.paths.1 alt=$item.Product.name_lang|escape}</span> {/if} </p> </div> <div id="cart2Produkt"> <p>{if $item.Product.ID} <a href="{productUrl product=$item.Product}" data-tooltip="sticky{$smarty.foreach.cart.iteration}" target="_blank">{$item.Product.name_lang|truncate:20}</a> {else} <span>{$item.Product.name_lang|truncate:20}</span> </a> {/if} </p> <p> {include file="order/itemVariations.tpl"} {include file="order/block/itemOptions.tpl"} {if $multi} {include file="order/selectItemAddress.tpl" item=$item} {/if} </p> </div> {if $item.Product.DefaultImage.paths.3} <div id="mystickytooltip" class="stickytooltip"> <div style="padding:5px;"> <div id="sticky1" class="atip" style="width:200px;"> <img src="{$item.Product.DefaultImage.paths.3}" alt="{$item.Product.name_lang|escape}"><br> {$item.Product.name_lang} </div> <div id="sticky2" class="atip" style="width:200px;"> <img src={$item.Product.DefaultImage.paths.3} alt="{$item.Product.name_lang|escape}"><br> {$item.formattedPrice} </div> <div id="sticky3" class="atip" style="width:200px;"> <img src="{$item.Product.DefaultImage.paths.3}" alt="{$item.Product.name_lang|escape}"><br> {$item.Product.name_lang}PRODUCT 3 </div> <div id="sticky4" class="atip" style="width:200px;"> <img src="{$item.Product.DefaultImage.paths.3}" alt="{$item.Product.name_lang|escape}"><br> {$item.Product.name_lang} </div> </div> </div> {/if} <div id="cart2Price"> <p class="actualPrice"> {$item.formattedPrice} </p> </div> <div id="salg"></div> <div id="cart2Salg"> <p></p> </div> <div id="antallbox"> <p class="cartQuant"> {textfield name="item_`$item.ID`" class="text"} </p> </div> <div id="cart2Total"> <p> {if $item.count == 1} <span class="basePrice">{$item.formattedBasePrice}</span><span class="actualPrice">{$item.formattedPrice}</span> {else} {$item.formattedDisplaySubTotal} <div class="subTotalCalc"> {$item.count} x <span class="basePrice">{$item.formattedBasePrice}</span><span class="actualPrice">{$item.formattedPrice}</span> </div> {/if} </p> </div> <div id="delete"> {if 'ENABLE_WISHLISTS'|config} <a href="{link controller=order action=moveToWishList id=$item.ID query="return=`$return`"}">{t _move_to_wishlist}</a> {/if} <a id="slett" href="{link controller=order action=delete id=$item.ID query="return=`$return`"}" title="Slett"></a> </div> </div> </div> {/foreach} Anyone can help? {html_image} doesn't work, by the way and all the extensions are present and correct.

Read the article

textbox disappears in paging - php

- by fusion

i'm calling the search.php page via ajax to search.html. the problem is, since i've implemented paging, the textbox with the search keyword from search.html 'disappears' when the user clicks the 'Next' button [because the page goes to search.php which has no textbox element] i'd like the textbox with the search keyword to be there, when the user goes through the records via paging. how'd i achieve this? search.html: <body> <form name="myform" class="wrapper"> <input type="text" name="q" onkeyup="showPage();" class="txt_search"/> <input type="button" name="button" onclick="showPage();" class="button"/> <p> <div id="txtHint"></div> <div id="page"></div> </form> </body> search.php [the relevant part]: $self = $_SERVER['PHP_SELF']; $limit = 5; //Number of results per page $numpages=ceil($totalrows/$limit); $query = $query." ORDER BY idQuotes LIMIT " . ($page-1)*$limit . ",$limit"; $result = mysql_query($query, $conn) or die('Error:' .mysql_error()); ?> <div class="caption">Search Results</div> <div class="center_div"> <table> <?php while ($row= mysql_fetch_array($result, MYSQL_ASSOC)) { $cQuote = highlightWords(htmlspecialchars($row['cQuotes']), $search_result); ?> <tr> <td style="text-align:right; font-size:15px;"><?php h($row['cArabic']); ?></td> <td style="font-size:16px;"><?php echo $cQuote; ?></td> <td style="font-size:12px;"><?php h($row['vAuthor']); ?></td> <td style="font-size:12px; font-style:italic; text-align:right;"><?php h($row['vReference']); ?></td> </tr> <?php } ?> </table> </div> <?php //Create and print the Navigation bar $nav=""; if($page > 1) { $nav .= "<a href=\"$self?page=" . ($page-1) . "&q=" .urlencode($search_result) . "\">< Prev</a>"; $first = "<a href=\"$self?page=1&q=" .urlencode($search_result) . "\"><< First</a>" ; } else { $nav .= " "; $first = " "; } for($i = 1 ; $i <= $numpages ; $i++) { if($i == $page) { $nav .= "<B>$i</B>"; }else{ $nav .= "<a href=\"$self?page=" . $i . "&q=" .urlencode($search_result) . "\">$i</a>"; } } if($page < $numpages) { $nav .= "<a href=\"$self?page=" . ($page+1) . "&q=" .urlencode($search_result) . "\">Next ></a>"; $last = "<a href=\"$self?page=$numpages&q=" .urlencode($search_result) . "\">Last >></a> "; } else { $nav .= " "; $last = " "; } echo "<br /><br />" . $first . $nav . $last; }

Read the article

pagination in css/php

- by fusion

two questions: --1-- it displays all the number of pages. but i'd like it to display as: << Prev . . 3 4 [5] 6 7 . . Next --2-- when i hover on the current page no, it should change color or increase the font-size, but when i modify the css of a:hover, all the page nos change color or size instead of the one which i'm pointing to. also, when modifying a:active, nothing happens. this is my paging code in php: $self = $_SERVER['PHP_SELF']; $limit = 2; //Number of results per page $numpages=ceil($totalrows/$limit); $query = $query." ORDER BY idQuotes LIMIT " . ($page-1)*$limit . ",$limit"; $result = mysql_query($query, $conn) or die('Error:' .mysql_error()); ?> <div class="caption">Search Results</div> <div class="center_div"> <table> <?php while ($row= mysql_fetch_array($result, MYSQL_ASSOC)) { $cQuote = highlightWords(htmlspecialchars($row['cQuotes']), $search_result); ?> <tr> <td style="text-align:right; font-size:15px;"><?php h($row['cArabic']); ?></td> <td style="font-size:16px;"><?php echo $cQuote; ?></td> <td style="font-size:12px;"><?php h($row['vAuthor']); ?></td> <td style="font-size:12px; font-style:italic; text-align:right;"><?php h($row['vReference']); ?></td> </tr> <?php } ?> </table> </div> <div class="searchmain"> <?php //Create and print the Navigation bar $nav=""; $next = $page+1; $prev = $page-1; if($page > 1) { $nav .= "<span class=\"searchpage\"><a onclick=\"showPage('','$prev'); return false;\" href=\"$self?page=" . $prev . "&q=" .urlencode($search_result) . "\">< Prev</a></span>"; $first = "<span class=\"searchpage\"><a onclick=\"showPage('','1'); return false;\" href=\"$self?page=1&q=" .urlencode($search_result) . "\"> << </a></span>" ; } else { $nav .= " "; $first = " "; } for($i = 1 ; $i <= $numpages ; $i++) { if($i == $page) { $nav .= "<span class=\"searchpage\">$i</span>"; }else{ $nav .= "<span class=\"searchpage\"><a onclick=\"showPage('',$i); return false;\" href=\"$self?page=" . $i . "&q=" .urlencode($search_result) . "\">$i</a></span>"; } } if($page < $numpages) { $nav .= "<span class=\"searchpage\"><a onclick=\"showPage('','$next'); return false;\" href=\"$self?page=" . $next . "&q=" .urlencode($search_result) . "\">Next ></a></span>"; $last = "<span class=\"searchpage\"><a onclick=\"showPage('','$numpages'); return false;\" href=\"$self?page=$numpages&q=" .urlencode($search_result) . "\"> >> </a></span>"; } else { $nav .= " "; $last = " "; } echo $first . $nav . $last; ?> </div> and this is how it displays currently: css: .searchmain { margin:30px; text-align: center; } .searchpage { border: solid 1px #ddd; background: #fff; text-align:left; font-size: 16px; padding:9px 12px; color: #FEBE33; margin-left:2px; } .searchpage a{ text-decoration: none; color: #808080; } .searchpage a:hover { color: #FEBE33; border-color: #036; text-decoration: none; } .searchpage a:visited { color: #808080; }

Read the article

Creating a new plugin for mpld3

- by sjp14051

Toward learning how to create a new mpld3 plugin, I took an existing example, LinkedDataPlugin (http://mpld3.github.io/examples/heart_path.html), and modified it slightly by deleting references to lines object. That is, I created the following: class DragPlugin(plugins.PluginBase): JAVASCRIPT = r""" mpld3.register_plugin("drag", DragPlugin); DragPlugin.prototype = Object.create(mpld3.Plugin.prototype); DragPlugin.prototype.constructor = DragPlugin; DragPlugin.prototype.requiredProps = ["idpts", "idpatch"]; DragPlugin.prototype.defaultProps = {} function DragPlugin(fig, props){ mpld3.Plugin.call(this, fig, props); }; DragPlugin.prototype.draw = function(){ var patchobj = mpld3.get_element(this.props.idpatch, this.fig); var ptsobj = mpld3.get_element(this.props.idpts, this.fig); var drag = d3.behavior.drag() .origin(function(d) { return {x:ptsobj.ax.x(d[0]), y:ptsobj.ax.y(d[1])}; }) .on("dragstart", dragstarted) .on("drag", dragged) .on("dragend", dragended); patchobj.path.attr("d", patchobj.datafunc(ptsobj.offsets, patchobj.pathcodes)); patchobj.data = ptsobj.offsets; ptsobj.elements() .data(ptsobj.offsets) .style("cursor", "default") .call(drag); function dragstarted(d) { d3.event.sourceEvent.stopPropagation(); d3.select(this).classed("dragging", true); } function dragged(d, i) { d[0] = ptsobj.ax.x.invert(d3.event.x); d[1] = ptsobj.ax.y.invert(d3.event.y); d3.select(this) .attr("transform", "translate(" + [d3.event.x,d3.event.y] + ")"); patchobj.path.attr("d", patchobj.datafunc(ptsobj.offsets, patchobj.pathcodes)); } function dragended(d, i) { d3.select(this).classed("dragging", false); } } mpld3.register_plugin("drag", DragPlugin); """ def __init__(self, points, patch): print "Points ID : ", utils.get_id(points) self.dict_ = {"type": "drag", "idpts": utils.get_id(points), "idpatch": utils.get_id(patch)} However, when I try to link the plugin to a figure, as in plugins.connect(fig, DragPlugin(points[0], patch)) I get an error, 'module' is not callable, pointing to this line. What does this mean and why doesn't it work? Thanks. I'm adding additional code to show that linking more than one Plugin might be problematic. But this may be entirely due to some silly mistake on my part, or there is a way around it. The following code based on LinkedViewPlugin generates three panels, in which the top and the bottom panel are supposed to be identical. Mouseover in the middle panel was expected to control the display in the top and bottom panels, but updates occur in the bottom panel only. It would be nice to be able to figure out how to reflect the changes in multiple panels. Thanks. import matplotlib import matplotlib.pyplot as plt import numpy as np import mpld3 from mpld3 import plugins, utils class LinkedView(plugins.PluginBase): """A simple plugin showing how multiple axes can be linked""" JAVASCRIPT = """ mpld3.register_plugin("linkedview", LinkedViewPlugin); LinkedViewPlugin.prototype = Object.create(mpld3.Plugin.prototype); LinkedViewPlugin.prototype.constructor = LinkedViewPlugin; LinkedViewPlugin.prototype.requiredProps = ["idpts", "idline", "data"]; LinkedViewPlugin.prototype.defaultProps = {} function LinkedViewPlugin(fig, props){ mpld3.Plugin.call(this, fig, props); }; LinkedViewPlugin.prototype.draw = function(){ var pts = mpld3.get_element(this.props.idpts); var line = mpld3.get_element(this.props.idline); var data = this.props.data; function mouseover(d, i){ line.data = data[i]; line.elements().transition() .attr("d", line.datafunc(line.data)) .style("stroke", this.style.fill); } pts.elements().on("mouseover", mouseover); }; """ def __init__(self, points, line, linedata): if isinstance(points, matplotlib.lines.Line2D): suffix = "pts" else: suffix = None self.dict_ = {"type": "linkedview", "idpts": utils.get_id(points, suffix), "idline": utils.get_id(line), "data": linedata} class LinkedView2(plugins.PluginBase): """A simple plugin showing how multiple axes can be linked""" JAVASCRIPT = """ mpld3.register_plugin("linkedview", LinkedViewPlugin2); LinkedViewPlugin2.prototype = Object.create(mpld3.Plugin.prototype); LinkedViewPlugin2.prototype.constructor = LinkedViewPlugin2; LinkedViewPlugin2.prototype.requiredProps = ["idpts", "idline", "data"]; LinkedViewPlugin2.prototype.defaultProps = {} function LinkedViewPlugin2(fig, props){ mpld3.Plugin.call(this, fig, props); }; LinkedViewPlugin2.prototype.draw = function(){ var pts = mpld3.get_element(this.props.idpts); var line = mpld3.get_element(this.props.idline); var data = this.props.data; function mouseover(d, i){ line.data = data[i]; line.elements().transition() .attr("d", line.datafunc(line.data)) .style("stroke", this.style.fill); } pts.elements().on("mouseover", mouseover); }; """ def __init__(self, points, line, linedata): if isinstance(points, matplotlib.lines.Line2D): suffix = "pts" else: suffix = None self.dict_ = {"type": "linkedview", "idpts": utils.get_id(points, suffix), "idline": utils.get_id(line), "data": linedata} fig, ax = plt.subplots(3) # scatter periods and amplitudes np.random.seed(0) P = 0.2 + np.random.random(size=20) A = np.random.random(size=20) x = np.linspace(0, 10, 100) data = np.array([[x, Ai * np.sin(x / Pi)] for (Ai, Pi) in zip(A, P)]) points = ax[1].scatter(P, A, c=P + A, s=200, alpha=0.5) ax[1].set_xlabel('Period') ax[1].set_ylabel('Amplitude') # create the line object lines = ax[0].plot(x, 0 * x, '-w', lw=3, alpha=0.5) ax[0].set_ylim(-1, 1) ax[0].set_title("Hover over points to see lines") linedata = data.transpose(0, 2, 1).tolist() plugins.connect(fig, LinkedView(points, lines[0], linedata)) # second set of lines exactly the same but in a different panel lines2 = ax[2].plot(x, 0 * x, '-w', lw=3, alpha=0.5) ax[2].set_ylim(-1, 1) ax[2].set_title("Hover over points to see lines #2") plugins.connect(fig, LinkedView2(points, lines2[0], linedata)) mpld3.show()

Search Results

Search found 11482 results on 460 pages for 'style'.

Page 152/460 | < Previous Page | 148 149 150 151 152 153 154 155 156 157 158 159 | Next Page >

- by PRajkumar

- by hajan

- by user169867

- by artlung

- by Shamin

- by Stasio

- by eerongal

- by nikolaosk

- by user277314

- by James

- by user225269

- by Paul White

- by Michal Bozydar Pawlowski

- by user811804

- by sarah

- by Liam McLennan

- by lkahtz

- by Neurofluxation

- by Sohail

- by rav83

- by Kyle Sevenoaks

- by fusion

- by fusion

- by sjp14051

< Previous Page | 148 149 150 151 152 153 154 155 156 157 158 159 | Next Page >