Styling seaside confirm dialog - seaside

Seaside has a convenient message WAComponent>>confirm: that creates a dialog with yes/no buttons, however there is no CSS styling on this component. Is it possible to add styling to this component or do I need to subclass WAYesOrNoDialog in my app to do that?

There are two ways to apply your styles to the WAYesOrNoDialog:
If your calling it from your top level component, then subclassing it is the way, but you'd still need to implement confirm:onAnswer: on your own component to reference you're own class.
If you call it from within another component (that is not top level), you can render the component that's going to perform the confirm:onAnswer: within a <div> in the parent component.

Related

CKEditor destroys the widget on drag and drop

I'm using the CKEditor's widget functionality to create my own widget with a jquery component there. However when the widget is dragged and dropped it gets destroyed and all the state in the jquery component gets lost.
Can this behavior be avoided? Is it configurable? Why it is required (maybe the CKEditor team can answer this)?
It is true that the widget is destroyed (and re-initialized) during drag and drop, this behavior can't be avoided.
How do you link your jQuery component with the widget object? What does your widget definition look like? (It is the object that you pass in the editor.widgets.add() call). Do you use Widget.setData() / How do you set this jQuery component as widget data?
If it's hard for you to answer these questions, you might just copy paste here the source code of your widget instance (open the browser's developer tools and look for an element with the data-cke-widget-id attribute - do not confuse with source mode view in CKEditor). Paste it with the whole content.
Widgets store their data in the data-cke-widget-data HTML attribute. A blind guess would be that you either do not set the data correctly on the widget or when it is stringified and then parsed back, it doesn't handle the jQuery object properly. Maybe you could initialize your jQuery component using widget.definition.init and keep the data as a plain object (Widget.setData)?
You might also want to look to CKEditor widget documentation for more information.

Marionette Layout object to render tab content

I have a region in which I need to have a tabbed view (simple) however if I want the tab content to be differently layout - not sure how to achieve it. I can create different layout with multiple region and corresponding view, but how do I attach this to tab content, given that applyout can only be attached to region? Or can this be attached to one of the div of tab-content using $el?? Need some pointers.
Not sure I entirely understand your question.. But here goes.
I have implemented a navigation component where I can pass a tabsCollection and region. It will set up a region for the content and a list of tabs above it. When a tab is clicked it will fire the callback on the model in the tabsCollection which can be used to display what ever content you want.
There are more complex ways to handle this to allow for caching of a tabs content. But basically using a Backbone collection for the tabs with their own function for displaying content will do the trick.

Setting the parent elements of Kendo UI content

I'm using some KendoUI web widgets such as DropDownList, which create 'div' elements that are being added to the bottom of the Body. is there a way to configure those to be added as children of one specific div, instead of being direct children of 'body'?
Some widgets have an appendTo configuration option, e.g. kendoWindow, but most don't. kendo.ui.Popup (which is used by widgets like kendoDropDownList and kendoComboBox) appears to be using that configuration option, so it might be relatively easy to make some changes to achieve what you're after.
In response to your follow-up question: there is no document for kendo.ui.Popup because it's not intended to be used independently - it's just a reusable component for the framework itself.
If you're concerned about having to clean up the DOM elements created by a widget, you can achieve that by using the widget's destroy method.

Display part of the data from view's model at a time (ASP.NET MVC 3)

I am completely new to ASP.NET MVC, so the question might sound silly.
I have a view that should display a part of the data from it's model at a time. And there are buttons that should trigger which part of the data gets shown.
So far, I have encapsulated each part of the data into a div and added buttons. I have also added a function that returns CSS style for a given id (basically, it returns display:visible or display:none).
I assume that I'll be able to wire up event handlers for buttons. But I am completely stuck at redrawing/updating of div elements. I mean I don't understand how should I cause divs to update their style.
Could you please help me to show/hide div elements and buttons dynamically?
That should be standard javascript (or in your case jquery). It is unrelated to MVC3. Once you have the view built that includes all your divs with content, you call $('#div_id').show() or $('#div_id').hide() to show or hide. You can also use many other methods that have related animations, but that should get you started.
http://docs.jquery.com/Tutorials:Basic_Show_and_Hide
Like this:
$('buttonClass/IDhere').click(function (){
$('theDivYouWantToShowClass/IDhere').toggle();
});

How can I capture a component's render event in Google Web Toolkit?

I'm building an application using EXT for GWT (i.e. GXT). In GXT, every component that can be added to a page has an associated Render event that can be captured and handled. Due to some limitations I need to step down to pure GWT for a small portion of my application. Specifically, I want to modify the RichTextArea widget by adding some custom styles. This can only be done after a RichTextArea component is rendered. What is GWT's equivalent of GXT's render event?
Each GWT widget has a protected onLoad method, which is called after the widget is attached to it's parent (and I guess it's also rendered at that point). My guess is you need to override and implement this method in the widget you create the RichTextArea widget in and set the custom styles in the onLoad method of that widget, or you can extend the RichTextArea and implement the onLoad in this extended RichTextArea widget.

Resources