Here's the issue, I build a special book reader/browser (For holy quran), my code behind loads the page and constructs how it should look. and then it should bind that look to a some kind of data-bindable custom control to view it properly. the problem is, the look differs from page to page, so I cannot bind to a certain control or wrap panel.
here's how it generally looks:
The decorative border top of the page is always there at any page, it indicates the part and chapter the viewer is in.
If you're starting a new chapter it have additional image under that decorative border or anywhere in the page (there can be multiple chapters in the same page) something like this
or this:
The normal text is not an issue, it's just a special font, however, I put each individual word in its own text block for reasons of user selection by word.
The issue here is, given the previous information, and knowing how random it is to place the decoration picture or the amount of words (text blocks) per page. how can I bind that to some kind of view to separate the view from the VM and Engine that builds the page.
my past solution was to actually build everything in the VM in a wrappanel built inside a scrollviewer having lots of textblocks and images according to the page. but that's naiive solution. I want to rebuild that in a more professional separated way. I also want to do this for Windows RT beside Windows phone so I need to reuse the code behind in a Portable class library.
I think all you need to do is slightly adjust your current design. So perhaps have a VM that represents the entire content, and that would have a Collection of say Pages or Sections. A second VM would represent the Page/Section, allowing you to create a property for the WrapPanel content (i.e. the words) and another property for the Header and or other things.
In the View you would have the scrollviewer and bind to the main VM collection. Then create another View or DataTemplate that represents the Page/Section.
You should be able to do this is a strict MVVM sense quite easily and it will be dynamic based on the content.
You could even cater for advanced scenarios where each section has a different template/view.
Related
I have a wiring diagram drawn in visio that contains many wires (lines) spread over several pages. To follow a certain wire, I often have to jump around multiple pages. The wires always have the same text/label even when propagated to different pages. Normally, I use the find-in-files and type in the specific label I'm hunting for.
It would be even better if I could just click on the wire when it goes off page and a hyperlink would take my to the appropriate place on the appropriate page.
I know how to create hyperlinks manually, but there are a lot of signals and I'd like to somehow automate this, hinged by the fact that the source/destination share a common label.
Is this possible?
If you have rules, where the corresponding shape (link) resides, then you can set up the hyperlink via a SETF(Getref(... formula.
Otherwise, you could use VBA to find the corresponding shape by parsing the whole document and inserting the hyperlink automatically.
HTH,Y.
I have a requirement from my customer where I need to make the footer of the website dynamic in terms of adding sublayouts in footer placeholders via page editor by the Content Author.
The footer shall consist of:
One content slot - to which any sublayout/sublayouts like grid component or rich text can be added.
I want to add a new placeholder 'ContentSlotPH' to my footer which picks up its presentation details and data from a common page at "/sitecore/Content/Common/Footers/FooterContent/" ( where I have added my sublayouts like grid/richtext for the footer); and shall apply to all the pages of the website where the footer is present.
I want this change to be visible on the fly so that in future if the presentation details on FooterContent page change, new presentation and data gets applied to the ContentSlotPH of the footer.
Can someone help me in implementing this?
This functionality is not available out of the box unfortunately, the only way to achieve it with standard features (as Anton mentions in the comments) is to set them as presentation details on the standard values of a base template.
Unfortunately, this is not user friendly or editable through the Experience Editor (out of the box). It would also mean giving Content Editors write access to the templates and standard values, something that is normally locked down since making a mistake could cause exceptions especially on a production system.
Instead you could look to utilise Sitecore Placeholder Fallback. This will allow you to set up the headers/footers on a top level page and then any children will fallback to use the renderings in the placeholder from a parent item if they have not been set.
We have tried to approach this problem by using components that have presentation details on them. We call these Content Blocks, but other accelerators have different names for them with similar functionality. Essentially, this becomes a 'page inside a page'. You add your component to the template and reference a central datasource which has your footer datasource (including presentation details).
This allows for authors to have access to edit the footer by editing the footer component datasource without accessing template details.
Check out my Sitecore Base Layouts project:
http://www.awareweb.com/resources/video?vid=7d52fef2a67c453fa38dd092bd9ae7e2&
https://github.com/BenGGolden/Sitecore.BaseLayouts
I have used bootstrap3 for RWD and customized my breadcrumb. But, it's not fitting in mobile size.
How can I make it responsive?
Attached screenshot of the problem.
Thanks
I have created a snippet on bootsnipp that may fit your needs.
http://bootsnipp.com/snippets/featured/responsive-breadcrumbs
You can configure this breadcrumb to
display only the last n elements. Ellipses are added at the beginning of the list if elements are hidden.
set a maximum size for each elements. Ellipses are added after the label if it's too long.
By setting breakpoints you can set the number of elements to display and their maximum size for different screen sizes and hence make sure there won't be any overflow.
You are going to have to code that yourself. Without your specific code, no one will be able to give you specific answers. That being said, here is how I would get set up to add custom code to my Bootstrap website.
Using less
First, create a new .less file - this file will be your new primary style sheet. In that file, import in the bootstrap.less file. Compile that file and link it in your HTML files. You should now have an exact copy of the out-of-the-box Bootstrap CSS, with access to all of the Bootstrap variables.
To make any additions, add them to that file underneath the import statement. So in your case, I would grab the variables for the media queries and breadcrumbs (found in variables.less), and customize the style of the breadcrumbs at smaller screens.
Note that Bootstrap is mobile first, which means that the default styles will be applied at the smaller screen, and you override for larger.
Not using less
If you are not comfortable using less, I would say this is a great opportunity to start. That being said, if you want to do it the old fashioned way, then just create a second style sheet that you link in, add it underneath the Bootstrap sheet, and code away.
I want to have a header component that is shared across multiple page rendering components. The header component has a text label. How do I make the value of this text label available to all page components.
Do I have to make the path in the <cq:include> to a common format?
Design mode, if properly understood, can work quite well. However, it doesn't replicate content in the same manner as page activation, and thus can be confusing for your authors. Also, the sharing model is limited to the exact page type - which may or may not be the granularity you desire.
From CQ5's Best Practices (https://dev.day.com/docs/en/cq/current/developing/developing_guidelines_bestpractices.html), they strongly encourage the paragraph system (iparsys to inherit/share). iparsys named the same can be shared across different page templates (while design mode will only apply to a single template type).
I can archive that by creating a design dialog that is similar to dialog (http://dev.day.com/docs/en/cq/5-6/developing/components.html#Dialogs) under the header component. You add the text label field to design dialog. And to enter value for the field, you switch the page to the design mode and click on Edit button on the top of the component. The entered value will be available to all pages that contain the header component.
Note: design dialog will be named as design_dialog
This functionality is now offered in ACS AEM Commons as Shared Component Properties - http://adobe-consulting-services.github.io/acs-aem-commons/features/shared-component-properties.html
Supports standard content activation and internationalization (values stored below the homepage) and anything else you would expect from content.
If the component is baked in the template(i,e page rendering component), yes you can make the <cq:include> path attribute to point to some common place where the data for this is stored and all the pages irrespective of , type of the template can get the values configured.
You can create header component and then include it using <cq:include> in base template/page. This base template/page will be inherited by all other templates. This way the header once configured in base page is availble through out different templates/page components.
If the goal is to share "across multiple page rendering components" the design dialog will only help if the page share the same rendering component.
If you want to have the header component displayed in a page and all its subpages, then you should use iparsys.
If you just want to reuse the properties of that header component, then it needs to have a fixed path (cq:include in a page component) and then you can reference the properties you need in other page rendering components. I would not suggest that approach since it breaks the idea of having a component. Everything becomes tightly coupled.
What you could also do is save those properties at the page level (some top parent page) and then use InheritanceValueMap in the subpages to read those properties.
I'm implementing a document viewer with highlighting/annotation capabilities for a custom document format on iPad. The documents are kind of long (100 to 200 pages, if printed on paper) and I've had a hard time finding the right approach. Here are the requirments:
1) Basic rich-text styling: control of left/right margins. Control of font name, size, foreground/background color, and line spacing. Bold, italics, underline, etc.
2) Selection and highlighting of arbitrary text regions (not limited to paragraph boundaries, like in Safari/UIWebView).
3) Customization of the Cut/Copy/Paste popup (UIMenuController) This is one of the essential requirements of the app.
My first implementation was based on UIWebView. I just rendered the document as HTML with CSS for text styling. But I couldn't get the kind of text selection behavior I wanted (across paragraph boundaries) and the UIMenuController can't be customized from within UIWebView.
So I started working on a javascript approach, faking the device text-selection behavior using JQuery to trap touch events and dynamically modifying the DOM to change the background color of selected regions of text. I built a fake UIMenuController control as a hidden DIV, positioning it and unhiding it whenever there was an active selection region.
Not too shabby.
The main problem is that it's SLOOOOOOOW. Scrolling through the document is nice and quick, but dynamically changing the DOM is not very snappy. Plus, I couldn't figure out how to recreate the magnifier loupe, so my fake text-selection GUI doesn't look quite the same as the native implementation. Also, I haven't yet implemented the communication bridge between the javascript layer and the objective-c layer (where the rest of the app lives), but it was shaping up to be a huge hassle.
So I've been looking at CoreText, but there are precious few examples on the web. I spent a little time with this simple little demo:
http://github.com/jonasschnelli/I7CoreTextExample/
It shows how to use CoreText to draw an NSAttributedText string into a UIView. But it has its own problems: It doesn't implement text-selection behavior, and it doesn't present a UIMenuController, so I don't have any idea how to make that happen. And, more importantly, it tries to draw the entire document all at once, with significant performance degradations for long documents. My documents can have thousands of paragraphs, and less than 1% of the document is ever on screen at a time.
On the plus side, these documents already contain precise formatting information. I know the exact page-position of every line of text, so I don't need a layout engine.
Does anyone know how to implement this sort of view using CoreText? I understand that a full-fledged implementation is overkill for a question like this, but I'm looking for a good CoreText example with a few basic requirements:
1) Precise layout & formatting control (using the formatting metrics and text styles I've already calculated).
2) Arbitrary selection of text.
3) Customization of the UIMenuController.
4) Efficient recycling of resources for off-screen objects.
I'd be happy to implement my own recycling when text elements scroll off-screen, but wouldn't that require re-implementing UIScrollView?
I'm brand-new to iPhone development, and still getting used to Objective-C, but I've been working in other languages (Java, C#, flex/actionscript, etc) for more than ten years, so I feel confident in my ability to get the work done, if only I had a better feel for the iPhone SDK and the common coding patterns for stuff like this. Is it just me, or does the SDK documentation really suck?
Anyhow, thanks for your help!
Does your document have any semantic components other than each paragraph? If you already have some concept of sections or pages, I would recommend you render each one of those as an independent tablecell. It's pretty simple to create a tablecell that makes you forget you're actually looking at a UITableView. All you would need to do is override drawRect: and setSelected: and setHighlighted: and tah dah! No More cell dividers unless you want them. Furthermore you could do some nifty things by using a tableview as your base. If you defined sections in the UITableView then you could have a nifty header that scrolls along as you're paging through your document. Another thing you could do is add a "jump to section" bar / a bookmarks menu, and that way you don't have to provide selection across the boundaries of sections.
Massive copy paste blocks would be pretty painful on the system as well. Further, if you went through the trouble to provide this content you might not want to make it too easy for someone to copy it all at once... (Can't follow this line of thought more without more specifics on your project).
If you really do want to provide the copy paste options you could add buttons to each logical page or section that immediately selects and copies the whole section for the user's convenience. (Maybe with citation associated?)
I recommend you lookup the UITableViewCell UITableViewDelegate and UITableViewDataSource in the SDK docs as those pages will significantly help if you choose to use this suggestion.
Just two random observations:
Can you afford to create a paging interface? (As opposed to “endless scrolling”.) It looks like a paging interface would be a lot easier on system resources.
The UIActionBar is actually the UIMenuController class. The interface is a bit weird, as the menu is a singleton (wtf?), but I’m sure you’ll have no trouble figuring it out.
Hope that helps.
Here's a potential solution, but I don't know if it's crazy. Since I'm still so new to iPhone development, this might be a big no-no.
Anyhow, I had the idea to render each paragraph of the document (whose dimensions I've already precisely calculated) as a cell in a UITableView. Since UITableView already has mechanisms for cell recycling, I wouldn't have to implement that from scratch, and the document could be arbitrarily long without causing resource consumption problems.
Of course, I'd want to get rid of the line separators between cells, since I want the UI to look like a document instead of a table.
Or maybe I could render each page of the document (like a typical PDF, this is a paged-document format) as a table cell, and override the cell-separator graphic to look like a page boundary...
But would it be possible to get rid of the default touch behavior within the table, and instead implement text-selection on the table cell contents? Would it be completely impossible to implement text selection that crosses paragraph boundaries (between multiple table cells)?
The UIWebView is a good choise, but we need another application to pre render the pages percisely using each font and each style sheet and store the rendring information into a database table:
chapter_id int primary key,
startlocation int,
end location int,
fontsize int (or stylesheetname string)
Using JavaScript we can calculate how many words fit in a div with out scrolling.
UIWebView is good as it provide rich content and it has selection and highlighting behavior.
Hope this helps.