Text Field in Rails whose size increases dynamically - textbox

I am trying to implement a groups feature similar to that of Facebook in my project. I am using Rails 2.0.2 and Ruby 1.8.7 for project specific purposes. I am using Ubuntu 10.04 OS.
I want to implement a text field for the Discussion Topic and the corresponding comments whose size increases dynamically as there is an increase in the size of the text.
In Rails while defining your migrations there is a way of having a huge text area for attributes like Description, the code for it is some thing like this in the migration t.text :description .
Now this would not look really good in most cases where the discussion topics and the corresponding comments aren't so big.
Considering this, is there any other way around it wherein the the text field can by dynamically controlled based on the size of the text entered during run time. If yes kindly guide me on how can I go about the same.
Also , what type of attribute would I have to name it as for the same.
Any inputs/suggestions on this is highly appreciated..
Thank you...:)

Okay, first I should point out that the t.text in the migrations file is not necessarily the reason why in your view you get a large text area. t.text just informs the rails generator to create a column in the given table that can store large textual data.
But if you use scaffolding, the generated view will use f.text_area to render the corresponding field on the screen and that's why it appears large.
Now if you want to keep the text area small and let it grow according to its content, you need to use JavaScript. And my favorite JavaScript library/framrwork is jQuery and if you are familiar with jQuery you can the use a jQuery plugin like the jQuery expanding text area (demo) to achieve that. However Rails 2 uses Prototype/Scriptaculous by default and if you want to stick with that, then you can use a similar Prototype plugin such as this one or write something from scratch like this.

Related

iOS swift options for spreadsheet tables

I'm new to Xcode but have been able to overcome every hurdle so far. Now I'm at a fork in the road and not sure which direction to go. My iPad app takes user input and then it generates reports based on the input. I want the reports to have as many columns as my entities have attributes, and for each attribute to be a column header and to be sortable, just like a spreadsheet. UITableview seems to let me display a dynamic number of rows, and then if I have a custom cell with several manually created labels mapped to attributes I could sort of simulate columns by having a bunch of buttons on a navigation bar that change how the table is sorted. Problem here is that if I change my data schema i need to redesign the cell view and write new code for for the sort columns. HTML also seems like an option, but it feels and looks very different for the user. There's also 3rd party, but stubbornly, I want to build it myself. Could you guys provide some guidance on the pros and cons of each option for my use case? If I go for the first one, is it possible (feasible) to write something that could auto generate the storyboard layout in the case of adding a new attribute to an entity? Platform: iPad, Language: swift, data set is not enormous (sub 100k rows, worst case), using core data, need flexibility on the reporting side - would love an interface that lets users generate their own reports (don't want my life to become custom reporting)
Are you familiar with the UICollectionView class?
Take a look at this example over at github:
https://github.com/darrarski/DRCollectionViewTableLayout-iOS
This is an excellent way to organize cells as in a spreadsheet.
There is a nice swift tutorial over here:
https://github.com/darrarski/DRCollectionViewTableLayout-iOS

How can I support user edited content in a complex web application?

I'm building a web site (using ASP.NET, MVC 3, Razor) and I'm not using an off the shelf CMS. This is because I evaluated a lot of existing CMS's, and found them all to have a massive learning curve, tons of features I didn't need, and they force you into a page oriented model. By "page oriented model", I mean that you can specify a general page layout and stylesheets, but the object that the user can edit is a whole page, which displays, for example, in a central panel, and maybe you can customize the sidebars as well.
But this site is very design centric, and needs to be much more fluid and granular than this. By "design-centric", I mean that the site was built in Photoshop by a graphic designer, and there is heavy use of images and complex styling to map the design to HTML/css/js. Also, every page on the site is totally different. There are also UI elements such as accordion panels, in which we need the user to be able to edit the content of each panel, but certainly not the jQuery+HTML that powers the accordion. The users are subject matter experts but very non-technical.
So I'll have a page with lots of complex layout and styling, which I don't want the user to access, but within this there will be, say, a div containing text that I would like the user to be able to edit.
How can I best accomplish this?
So far, I'm implementing this by having snippets, which are little units of html, stored in external files, that the user can edit. In run mode, these are loaded and displayed inline (with a little "Edit This Content" button if you're logged in and have permissions). If you click the Edit button, you get a little WYSIWYG editing screen, where you can edit and save changes. So I can control all the messy stuff, and put in little placeholders for user editable content. But this isn't entirely simple for me, and I'm wondering if there's a better way.
Don't mean to necro this, but it seems to be the most relevant question to what I'm currently researching. I recently built something similar as you described above, but I'm pulling data from a database instead of static files. For each page (like /about or /contact) in the Controller I pull data for that page from the DB in the form of a Json string key/value pair. Key is the placeholder tag, Value is the.. value. After deserializing, I simply populate a list and assign it to a ViewBag, then in the CSHTML I ViewBag.List.Keyname to grab the text.
I have a small admin control panel which allows me to modify the text in the database. Having little hover-overs like you do is a great idea though!
Well, I stuck with my original plan:
So far, I'm implementing this by having snippets, which are little
units of html, stored in external files, that the user can edit. In
run mode, these are loaded and displayed inline (with a little "Edit
This Content" button if you're logged in and have permissions). If you
click the Edit button, you get a little WYSIWYG editing screen, where
you can edit and save changes. So I can control all the messy stuff,
and put in little placeholders for user editable content. But this
isn't entirely simple for me, and I'm wondering if there's a better
way.
It works reasonably well for now.

Building a site with Orchard CMS

I'm in the early stages of trying to learn Orchard, and I'm still seem to be struggling with the basics on how to build a page containing a multitude of various content that can be easily managed by non-technical users.
Ideally, what I'm trying to do is the following, I just can't figure out how to fit it into the Orchard architecture using Content Types, Parts, Fields, Widgets, Zones, etc. Also, since I'm still learning, I'm also trying to avoid any custom modules, or hard-coding content into the site (though I'm open to the idea, if that's the best way to get it done!).
Goal: Create a "home page" layout containing a Menu, Image slideshow, and several feature descriptions. For each image in the slideshow, I need a title, sub-title, description, and an image. To make this easy for non-technical users to manage, I would like to define the HTML template (custom Content Type, Part, or whatever), and allow authors to specify just those well-defined properties. I tried using Content Parts for this, but unfortunately, I can only have one Content Part of a particular type on a piece of Content. I also saw recommendations to create multiple Content Parts with the same set of properties, but I don't know how many images will be displayed (and I don't want to assign an arbitrary number).
I need to do something similar for feature descriptions, allowing authors to specify an image, title, description, and a page to link to. I'm running into the same problem as above, I'm not sure how to allow authors to specify a finite list of content, but have each content item be well-defined.
So far, the best option appears to be creating some sort of custom widget to "host" the content, but for some reason, my gut tells me that creating a custom layer for a single page just to specify which content to display is abusing the purpose of layers, which is begin able to customize a particular layout based on some criteria (whether or not the user is authenticated, for example).
I hope that made sense, and I apologize that it took so many words to explain my issue, I've just really reached my peak of frustration, and although I think that the Orchard guys definitely have it figured out in terms of architecture, I just can't get past these seemingly simple problems to build a simple website.
I greatly appreciate any tips, suggestions, advice this community has to offer!
TIA, -Jeremy
What you defined in Orchard terms is a Content Type named Feature.
Go to Contents -> Content Type, and click Create.
Select those parts by default:
Title, because you want your authors to provide a nice title/name for the features
Autoroute, which will create a SEO friendly url based on the Title (can be customized)
Click Save
Add specific Fields
SubTitle, of type TextField. Configure it to Default, Required.
Description, of type TextField. Configure it to TextArea, Required.
Image, of type Media Picker. Configure it to Required.
You can add some Hints to each fields, which will be displayed in the Feature editor to describe what to enter in each field. Very useful for authors.
Now you can create Features by clicking on the link in the top left part of the Dashboard.
Next step is to put those features on the homepage. What I suggest is to create a Projection which will be set as the homepage. A Projection is just a Page with an Url, which will display the result of a query as its content. The Query in your case will be "Give me all Features ordered by Creation Date".
In the dashboard, click on Queries
Click on "Create a new Query"
Enter "All Features"
Click on "Add a new Filter"
Select Content Type, then select Feature, Save
Click on "Add a sort Criterium"
Select "Creation Date", then Descending, Save
At this point, you can already preview the result of the query by clicking on Preview. But what we want is a front-end page.
Create a new Projection by clicking on Projection in the "New" section of the dashboard (top left again)
- Give it a title, and don't forget to check "Set as Home page" to make it the home page
- Select the only available query, named "All Featrues"
- Save
On the home page you should see all the features, ordered by date. But what you want is a slider. At that point you need two more steps:
- Integrate a slider jQuery plugin
- Render the HTML compatible with your jQuery plugin
By default, when you render a Projection it will use the standard "Summary" layout. But using projections you can decide exactly what layout you want to apply, and exactly what html tags and classes.
Edit the query named "All Features"
Add a new Layout
Select Html List
Select "Properties" and Save
Click Add Properties
Select Display Text, Save
Do the same for
Feature:SubTitle
Feature:Description
Feature:Image
Save your query
Edit the home page projection and select this specific Layout instead of the default one.
You will see that each property is rendered in an html container.
By editing each property you can decide which class to apply, and which html tag to use. By changing them you can render exactly what you want, and customize your CSS/HTML to render the slider nicely. This is purely your HTML know have to apply here, or find some articles about that.
For your editors, they just have to go to the dashboard and add/update some feature content items, it will be reflected on the website.
Optionally there is a Slider module on the Orchard Gallery. You can try this one too. But if you want to handle exactly what happens the technique I described is better.
I've just gone through this exact scenario myself. I think that what you want can be accomplished using Orchard Lists. The UX is not exactly intuitive for the end user, but it seems like it's the most straightforward way to accomplish this goal without installing/developing a custom module.
First, make sure you're using Orchard 1.4 because you'll need the built-in support for generating alternates for Container Widgets for each zone. Enable the Shape tracing, Url alternates and Widget alternates modules.
Now, create a list of items as described in the documentation (see http://docs.orchardproject.net/Documentation/Creating-lists). Translate "book review" into "slide" and "book reviews" into "slides" and you get the idea. You can add custom fields to represent your subtitle, description, etc. I'd just keep the image as part of the content itself instead of creating a custom field for it.
If you've followed the steps in the documentation, you should now be seeing a list of your slides rendered as ul/li's. Now you'll want to customize how things are rendered so you can show your custom fields and generally customize the tags. Use the shape tracer and create alternates for the list as you see fit. Now you're free to control all the rendering. See http://weblogs.asp.net/bleroy/archive/2011/03/27/taking-over-list-rendering-in-orchard.aspx and http://weblogs.asp.net/bleroy/archive/2011/05/23/orchard-list-customization-first-item-template.aspx for ideas.
Managing this list from your end-user's perspective is actually quite easy, but I don't really feel that it's very intuitive.
It took me three days of digging through blogs and docs to figure this out for myself.
I'd also recommend this wonderful module called Featured Item Slider. It has all the basic functionalities of a slideshow, including all mentioned in the question, plus some fantastic additional capabilities, such as different animations. You can also fine tune the layout and styling by providing additional css. Get the source here. And here is the slideshow in action. If a module already exists providing the functionality you're looking for, then it's best to use that rather than reinvent the wheel, unless you do it for learning purposes.

Storing formatted text in Resource File .Is it Possible?

Building an asp.net mvc website that has to be multilingual and wondering if it's possible to store formatted text in a resource file and whether it makes sense.
Lots of pages are static and user can edit them and add their own formatting "Bold,italics etc.."
and was wondering what is the best way to approach it.
I dont want to create one page x language and storing in the database involves creating a structure to handle the same info in multiple languages.Seems hard to maintain.
Have you done it before? How did you do it
any suggestions
Thanks a lot
Is it possible?
Certainly.
Does it make sense?
It depends. I would not recommend resource files (via ResourceWriter) for storing dynamic content.
Your problem
Let me rephrase it (I am not sure if I understood you correctly). You want to give your users an ability to change presentation style. User will be able to change the style and that change would be somehow propagated to whatever languages the content is translated to.
In such case, I see some issues:
How to match English contents with translated one?
It is typical for translation to have different order and possibly different number of sentences. There is no way to match them unless...
Storing such information in resource files along with translatable strings would result in something that is hard to maintain. I believe you would need to either add formatting tags or content tags with styling information in order to achieve that. The result would be a mess; hardly readable, as tough to modify.
OK, so what can you do? Actually, what I could recommend is to create Customization Mechanism for CSS files. In your case you need:
Provide CSS classes as well as unique identifiers (HTML id attribute) to each structural elements (tags if you prefer), so that you have something like <div id="main" class="main"><p id="p1" class="normal">.... The id's will give users an ability to target precisely that element leaving others untouched (via #p1.normal { // definition here }).
Store CSS in the Database and create some editor for users.
Create a Handler to serve CSS from database upon web browser's request.
Even with such solution you won't avoid some problems. One is that you need to actually alter font family while translating into certain languages, so you might need language-based CSS files. Another problem pops up when user wants to put bold attribute on certain word - with such solution this is not possible (but to be honest if you want to allow that, this won't be i18n friendly for the reasons I mentioned earlier).
BTW. Bold fonts should be avoided for some languages. For example Chinese characters are pretty hard to read if you manage to output them with bold font.
If your users can post in multiple languages - its probably best to use a database to store the info and accompanying formatting. If it is for labels and other static text on the website - the resource files are a good solution. The resource files store the content as strings - but storing formatted text in there breaks the 'seperate the presentation from the logic' idealogy.

Different Editors for one column in EditorGridPanel ExtJS

I am trying to show/load different editor on different rows of a editorgridpanel. Like a textbox on one row combobox/superboxselect on another and it could be any order, random.
The conditions which dictate which editor will be shown reside in the database.
Please tell me if this is possible and if so, how do i go about it.. I have tried pulling the conditions asynchronously which are pulled on a click event for the respective column, but calling it async causes problems. Please advise
Anything is possible, but what you want to do would take a bit of work. The basic idea would be to configure the needed grid editor(s) dynamically and update the columns with the new editors when needed. Now... what would be required to make that actually work I couldn't say offhand without digging into the Ext source -- it would almost definitely require overriding default behavior in the grid and/or column model.
Pulling your conditions asynchronously would (I imagine) be too slow for the interaction of clicking on a row to edit inline. If it takes a second or more from click to configured editors, that would not be acceptable performance. I would try to find a way to send your conditions down along with the other row data if at all possible (they can be in the store's data model on the client without having to be shown in the grid).
Without knowing more about your business requirements, it might be more appropriate to ditch the editable grid and instead go with a dynamically-configured FormPanel tied to the grid. This way the interaction of clicking and then pausing slightly while the form is configured would appear to be more natural. Also, the functionality of rendering a form with a particular configuration is perfectly standard and would require nothing fancy on your end. See this example as a starting point (your form would be dynamic, but maybe the same type of interaction could work?)

Resources