I'm using Rails 3 to create a project that will need a model called Sketch. I've already created a model, controller, and migration to handle Sketch - so far it just creates a 'sketch' object with a name for each sketch.
My problem is that I need to be able to attach an html5 canvas to each sketch object when it is created (or remove it when it is destroyed).
Since 'canvas' is not a datatype that will be stored in the database (like 'string', 'integer', or 'datetime'), how do I go about creating custom html components such as this that need to be treated like any other datatype in a Rails app?
I'm assuming that you would need to add the html components to a Model method and use a callback - like after_save - to initiate the component. But I'm not sure at all how to do this.
Not sure if I'm describing this well enough, so here is a very simple mockup:
I have the Raphael Javascript library in mind for the component that will do the sketching - if that helps.
If you can point me to any tutorials on this subject that would be great.
HTML5 canvases are rendered in the browser, not on the server where your ruby code is actually executed. Therefore I think it's safe to say that what you're asking isn't possible (at least in the way the question is phrased).
Instead you'll need to work with HTML, CSS and Javascript in your view to get the canvas working.
Canvas Tutorial / Reference
Hope this helps.
(On a related note, it's also considered a bad practice to mix view-related concepts in with your models.)
Related
I've been tasked with creating a webapp using AngularDart. I'm new to Dart and therefore AngularDart also, but have worked through the tutorials at https://angulardart.org/tutorial/.
I've read similar SO questions/answers (How to access a AngularDart components attribute (NgOneWay) outside of the component, eg. on the page it is in?) but given my limited knowledge I don't fully understand how to implement Brian's suggestion - or if indeed it relates to my question! Am I also right in thinking that Vink's suggestion is now irrelevant as #Controller's are now deprecated?
In short, I'm trying to figure out if the following is in fact achievable:
create a top-level <custom-component/> complete with attributes;
within <ng-view/> - and therefore nested components - access <custom-component/>'s attributes. More specifically, bind/listen for changes to these attributes and act accordingly.
For example, given the following
<body>
<custom-component att1="val1" att2="val2"></custom-component>
<ng-view></ng-view>
</body>
and on the assumption that <ng-view/> renders the following markup
<div>
...
<other-component att1="{{customComponent.att1}}" att2="{{customComponent.att2}}"></other-component>
<another-component att1="{{customComponent.att1}}" att2="{{customComponent.att2}}"></another-component>
...
</div>
is it possible to bind customComponent.<<attributeName>> to <other-component/> and <another-component/>?
Or, as is likely, am I misunderstanding the use of AngularDart's #Component/#Decorator?
Should the #att1 and #att2 attributes be moved from <custom-component/> to <ng-view/>?
Alternatively, should I look to architect a different solution altogether? My ultimate goal in this instance is to provide the user with att1/att2 select boxes (from yet another component) which in turn determine the rendered content within each of <other-component/> and <another-component/>.
Any and all suggestions welcome, I won't be offended if you dismiss any/all of the above!!!
My current development environment is as follows:
Dart SDK version 1.9.0-dev.8.0
angular 1.0.0
Many thanks, J
What you can do is to move the two components into the content(template) of a wrapper component and bind attributes of both components to fields of the wrapper element.
Usually a better way is to use events like shown in How to communicate between Angular DART controllers or Angular Dart component events (controllers have been merged with components since then)
I'm currently struggling with the problem of multilingualism in an SPA.
I've come up with several solutions, like building a wrapper for the resources resx files, or saving all labels in the database, but I am wondering if any of you have found some solution which automates these steps.
Are there any practices which are specific for this problem?
For a reasonable amount of literals, I suggest to save the resources in the DB or in a .RESX file in the server. When the user logs in or you detect the language that will be used, the literals are requested by the application and saved either in a collection of your translation module or in the LocalStorage of the browser (this could be a good approach for large data).
Then this module could have some methods to retrieve the messages, probably passing a key.
Using this solution you could inject this module in the viewmodels that need to show translated literals and acces them through the view:
<p data-bind="text: resourceManager.get('M01')"></a>
For large applications that would require huge localization data to be transfered, maybe some kind of modularity could be applied and only load the resources really needed for each module/section.
I don't think making recurrent requests to the server to get the translated literals is a good practise. SPA's should provide a good user experience and loading the translated literals from the server could be a blocking issue. Text is not like an image, you can render a page without all the images loaded, imagine rendering a page without the text :o
Anyway, I think the best solution would be to keep the server as repository and create a custom JS module that takes care to get data in one or multiple loads and is able to store it somewhere in the client.
I've solved my own problem, using a custom binding and i18next.
First, I've implemented i18next for translation of my labels/buttons and other resources.
Secondly, I've added a custom Knockout bindingHandler:
ko.bindingHandlers.i18n = {
init: function (element, valueAccessor) {
var translateKey = valueAccessor();
ko.utils.setTextContent(element, $.t(translateKey));
}
};
Finally you can add the following code to your views:
<span data-bind="i18n : 'buttons.cancel'"></span>
This will automatically get the correct resource, and Knockout will handle the bindings.
Hopefully this will help others struggling with the same problem.
I would like to speed up some of my admin-generated modules by hydrating doctrine results with Doctrine::HYDRATE_ARRAY. Is this a good idea? How can I do it?
I don't think that you can do it that easy. All calls in the default admin generator theme use the Doctrine object (i.e. $model->id, and not $model['id']. To use arrays you would probably need to recreate the default theme, as well all calls that retrieve the objects.
Oh, and also the Admin Generator uses the generated forms as it's base for generating the displayed forms.
You would probably be better off optimizing other ways. Make sure you have to correct client side caching headers, optimize the sfViewCacheManager on the server side, use APC, use the doctrine query cache, etc...
This could include some more custom work (for example leveraging the view cache manager), but significantly easier to implement.
I agree with Grad van Horck. Also, make sure your index pages are using the minimum number of queries (easy to see in the development environment's web toolbar). Most of my modules are much more efficient after I create custom table_methods with the proper table joins and also include ONLY the fields I need to have loaded into the object.
I have a small set of css items in a db table that I need to turn into a css file to be included on a page. How can I do this in Rails3?
Is there a way I can call this directly from a stylesheet_link tag? Do I need to go through some ruby to open a file and output it in some directory first? Do I do this in a controller?
The css is actually its own model associated to the item using the css.
I do not know and looking for a solution found little yet, so asking here.
EDIT:
Simple when looked at, I was looking toward a sass or less solution and may still, but this is a simple start
I would create a Controller that retrieves the data from the database that uses a View to render the data to a Cascading Style Sheet.
You could then reference the given URL whenever you need to use the resulting stylesheet.
This is the easiest way that I have found http://blog.hasmanythrough.com/2007/10/18/simpler-than-dirt-restful-dynamic-css
I have a difficult situation.
I let the the user create a form through a Rich Text Editor and then I save this.
So for example, I save this literally into my DB:
http://pastebin.com/DNdeetJp (how can you post HTML here? It gets interpreted, so now I use pastebin...)
On another page I wrap this in a form_tag and it gets presented as it should be.
What I want to do is save this as a template and save the answers as a hashmap to my DB.
This works well, but the problem is I want to recreate what checkbox/radiobutton/... is selected when the user goes back to the page. So I want to fill the form with the answers from the hashmap.
Is there a way to use a 'dummy' model or something else to accomplish this?
Thanks!
Since you're pasting in raw HTML which is not properly configured as a template, it is more difficult to enable the proper options based on whatever might be stored in your DB.
The reliable approach to making this work is to use Hpricot or Nokogiri to manipulate the bit of HTML you have and substitute values accordingly. This isn't too hard so long as you can define the elements in that form using a proper selector. For example, create a div with a unique id and operate on all input elements within it, comparing the name attribute with your properties. There may even be a library for this somewhere.
The second approach is to use JavaScript to enable the options in much the same fashion. This seems like a bit of a hack since the form itself will not have a proper default state.