Uncategorized

hi my name is Oliver from co kinetics today I want to give a tutorial and introduction how to use TT rich text editor in your own projects you might have heard about my TT context it’s already followed by 1000 people on github and this serves as the basis for TT rich text editor it basically provides two two halves the first being converting HTML into NS attributed strings at the second one displaying these and providing some interactivity and UI for it because the built-in methods to draw attributed strings in iOS have not been so great and for example for embedded images and so on I needed to write at myself now DD club text is an open source project which you can licensed for use in your apps either by attributing it to me or by obtain a certain fee it’s called the non attribution license and that gives you display of attributed strings and rich text if you want to edit it and have the magnifying glass then you did dt rich text editor which is a four page component that is available on my pad store which you can find on kinetics cone hard stone and then you move a little bit down rich text editor if you click here you can order it it’s a 500 euros at the moment class text if you don’t have a business or a Texas Senate um by providing the EU about identification number if you fill this out with your correct address I will email you a PDF invoice and once you pay that by a PDF or via paypal or via any transfer then you get an access email to the source code repository where the latest version of DT which 68 is located now I’m now on my desktop and for the sake of this this demonstration I’d like to make em curve you’re rich demo folder and there I will check out svm check out https SPM go kinetics calm TT rich text editor minus minus username you get a user name that’s read-only and from there it a score the password and in the case because I checked it out before it doesn’t so you see it downloads the trunk of rich text editor um into this folder and actually was a bit stupid of me so let let me cancel that because i don’t i don’t want to get the trunk plus the tags um but i just want the current trunk so let’s RM minus RF the TT which text editor ok that’s now empty again so do this again but specify the trunk subfolder here usually when you do it the first time it asks you for a password but my case because i entered before it remembered that so it now downloads the core project which includes a demo app plus static library and several externals to this so let me actually show you how the project looks like to pee mine see I need to go to trunk and here is a pictorial 680 Xcode project it’s set up such you have core core is basically the code necessary for the editing which is all in in sauce you’ve got some external projects which are included as sub-projects so they in turn are you can look at these and they are they follow the same structure there’s

always a core a demo and the demo you might have resources and sauce called so each of these you can look at individually and even use them in the video if you like now the first thing that Xcode does would which we don’t like is it creates schemes for all the targeted files and not just targets of the current project but also the sub-project product target so what we’re going to do menu schemes and throw it all away because we can always create them ourselves the first one that I actually want to show you is our DD context as a demo app so we call this a demo a ET quod text ah and let’s have a look at that say on the iPad simulator just run that I’m showing this to you for a simple reason because it can help you understand what’s going on with the formatting and a display of things like for example any of these files you can it’s actually increase it to original size you put in some HTML in this case it’s the current test dot HTML resource from the demo and then you can turn on the debug frames and it shows you are the rare is the attribute text content part or I called it ET attributed texts layout frame i’m not mistaken and alternating green and red you see the glyph france which are numbers of characters that have the same attributes which attributes you can see on the ranges so you see the first six characters there of this font and have this paragraph style and as one with a different some somehow style and then there’s a third one and all of this might have for example the same font but there’s a small change that somehow makes it different so this breaks it into three errors so what you can do is you can put in HTML where it somehow looks different than you expected and have a look with the view the debug frames the ranges are what it turns out as now there’s also the character use which actually shows that the individual characters like here for example there that a is a paragraph break then here’s an empty paragraph and there’s another paragraph here and you put in HTML you get out and NS it with the three that’s being rendered by the decode text and you probably want to get out HTML in the end as well and there’s a very very simple basic HTML generator built into dt context which goes through the attributes and like these ranges here and turns them back into HTML and in order to preserve or deformity and so on it needs to attach the font attributes wherever they change and in this case for each paragraph it does a style tag so it wouldn’t win any beauty contests but hey the text looks like we should all right let’s that’s it for this demo and encourage you to actually play around with this because if there’s any formatting problems then you would want to turn to the open source project maybe help out there to to get it fixed that much for this the second demoted I’d like to show you is actually the demo that comes from the editor so demo app editor same scenario we just run this scheme as it is and actually what the wrong with me could not load in battle ok I think that’s because I removed a file a little bit earlier in the demo

app delicate and we don’t have any file anymore ah sorry that that was bad that I removed them I need to quickly fix it so in the demo view controller em ah I need to implement a load view and if I run correctly i had a uiview GG rekt frame equals your application share application occasion know what it you I your screen main screen application frame and we create a view that has you and if we frame frame which is the one that we actually assign and we want a desert that’s the wrong one I’m messing around in the wrong project just also put in person there’s the under demo source view controller this is the one that we want to set up our thing because you see it’s just like window but what I need to do here in this liquid water for the demo is I want this ET rich text eight of you right in there so I need to instantiate the rich editor which editor calls this a look in it with frame you bounce I probably want to give it your view up to the sizing flexible width and you have me what is untouchable height and we want to add that to our main view and we also want um do we have it let’s explore the delicate we have text delicate that I want to implement for here yeah equals self and if I’m not mistaken that should be it see you got that so what’s going on here okay you at sup you stupid bridge aight cool i cannot add a view ASAP you of itself and there you are okay i’m going to commit these these changes that was just saw that uh that works with alex if i remove them from the demo now okay about this demo I’ve mounted a toolbar here on top of the keyboard this is the input view and it’s a bit too large if you run it it also works of course on iphone but I didn’t optimize it kind of steak steak this somehow so you see the overlap so not not a nice experience I’d rather have you look at that on the iPad simulator that makes a bit more sense and so you see it already starts out with a bit of text put in here that comes from the rich text editor view controller m which is you controller for the demo and you can see it’s using some basic HTML to format this text so we have some red text then there’s bold italic and the green text with font family courier so you see we’re mixing functions everything and what you get is all the things that you expect from an editor and can push and hold you get the magnifying glass and you can swipe over over the text and have look at it um you

can hi this is me live type in some text and let’s say you want to select the word maybe maybe three and make make it on the line you can you can select the second word and make it’s a bold and let’s say this this we want to highlight I’ve implemented basic highlighting method which is basically just the background can have different colors for this this is all just serving to demonstrate the editor you can have multiple paragraph alignments like in this case natural is the default but you can also make it centered or write the lines can have one Center and one right alive just as you like or even justified though justified only works if you have longer text so this requires no not clicks then see like sixty percent of a line then a certain line so that it justifies another thing thats needs you can add images like there’s a graphic of smiley isn’t it nice and if I had some image in the simulator but I don’t at the moment I could even put this in here and you see the image behaves just like a character so can remove it and it’s gone and this is the editor demo there’s one other feature that I want to show that is if you hide the keyboard and now long press all the text you see you can still select text so you can even use this without being able able to edit but for example to to allow selecting some text and so for example have your own context menu to deal with the text even though I’m not editing it um I can still select it all right okay let’s have a bit of to around what makes up this demo um for this project there’s the static library which is containing all the the code that you need to add to your project a variant of that is a static framework which should in theory contain the arm six armed seven and the simulator code is a fact Universal static framework though I found that the idea in general is nice but hardly nobody is actually using this it’s more like a geekery trick the modern way how to implement components and get them into your project project Israel some some of sub projects which is actually what you see here if you go into court externals the dt rich text editor coil relies on these three subprojects to pull in resources and code to them actually wrap up one final bundle and if you look at the demo app this actually relies on two things it needs the resources for the resource bundle for the dt loop which is the magnifying glass you have special graphics you need for that and one static library that contains all the code and that looks so simple but invalid if you look at the aesthetic library this then links in several things and actually I’m seeing here it’s missing what are two dependencies so just quickly Adam that should actually be depending on dt loop resourcebundle because if that doesn’t exist it needs to build up or I should know that’s not the case because this oh now there is some cold in dt loop so it’s not the resource bundle but it’s a static library needs to be in here and web our country gods but dt context is still missing it detects static library these dependencies basically mean if one

of these sub-projects was changed then xcode knows that it needs to build this target also so it’s like when does this project become dirty yeah so if I changed something in context it means this static library is no longer up-to-date so it needs to rebuild this and before it wasn’t doing them now um this static library requires the text from DD context so for text handling and basic UI the handling of the loop which is a separate project and also support for the web archive paste-pot format and all of these three are you can see them linked binary with libraries and for aesthetic library that actually means that it merges in these libraries objects with the code that’s specific to this library so all odd there’s there’s tons of additional source code this source code gets compiled and then put together with with the code that’s in these static libraries and this way you end up with with one static library that contains all of them now for the demo app this now has the resource bundle because the resource bundle was not really necessary for the static library because you don’t use any resources there but you need to have these resources in your app so that’s why it’s depend in here and the static library that we’re building in this static library target here and of course there’s a bit of code that’s specific to this demo main em you control an app delegate you need to have several frameworks and libraries for this a complete complete list is basically seen here you need clip xml for the HTML parser that’s in dt core text so it’s that parsing HTML with X a loop XML to you need to have the library from this static library here you need the assets library is necessary for getting pictures from photo roll media player is because there’s a possibility to have video embedded in PT cortex and some other things of course quad text the framework as well image I always is needed for some image operations DT lazy image view so that’s this end here’s the copy bundle resources and that has the loop here and it’s a little bit tricky getting the dead in here so i’m going to show this when i set up a brand new project for using this but until here you’ve seen it’s relatively straightforward we have a couple of source files in our app and app delegate view controller some resources and then these links in the static library from the this entire project plus the resources from TT loop right so without further ado we’re going to make a new Xcode project let’s say we want a single View application we want our to demo rich text editor no story part yes automatic referencing reference counting and it can be universal I let’s do that here is well create so first thing is actually we don’t need a view controller as such so we are with we don’t need a wheel controller but we don’t need it to come from zip files let’s see we it makes a new window and we can have the new controller general view controller be independent from what device we are running on and we don’t need a nickname because just just as we did before we can make our own view hierarchy so for our purposes I want to have a PT rich

text editor view do I need that externally probably not because I’m not setting at sm as a property but actually I want just a rich text editor instance variable to be able to reference that so we want a view load you love you load view creates a rich text editor eating rich text editor and lock in it with frame the frame we need is a city rec frame you are screen main screen application thing this frame art and that’s actually the view of our view controller now I haven’t yet added any anything from from this project of mine so what I definitely need is a let me go into fine I generally like to have the folder externals where I put external projects sub-projects external references and I put in here a PT rich text editor folder and this folder actually I want to put in on all the codes that’s contained in the dt which text editor a project I’ve got some uncommitted changes there but these are only related to the demo so for our intents and purposes that’s that’s fine so what I’m going to do is I’m going into this this folder here externally to text editor and I check out the project’s trunk and actually I don’t need the name trunk so I just put a dot here that takes the contents of trunk but put it in the folder where where I am and because I already have one that’s named DTV six other means the core demo project and so on are going to be appearing here ok done so I also want to see this group here so I create a new group or actually another possibilities to just add files to the text editor and rich text anyway I’m an artist a route 68 others externals and there’s 36 either we just check out so I want the externals I don’t want to edit to any target or anything I just wanted to appear for the first because it creates the groups as just like the the tree of the thing and let me demonstrate there’s a problem in Xcode and we’ll work around it so i removed the references so i end up with just basically the xcode project the xcode project is what what i was the only thing that i should be needing but there is a one trick that I need to show you that you need on top of that so well the first thing obviously for our demo app would be to go to build phases and add some dependencies and I wanted to Pete want it to be dependent on the static library okay and I also want it to be dependent on but weirdly I don’t see the external project here so I I probably remove too much um there’s a dt

loop bundle that i should be able to work to add as a dependency as well note so i need something more here i also need the cool externals that’s 83 as well because there I see the xcode projects which are what did I want so or that I did this I just add a piece and then I am removing everything except the Xcode project one and since this looks a bit weird you could want to move these together or somehow it doesn’t really matter as long as X cough has a reference to them because now if I want to add this as a dependency and I’ll see the products of the sub projects and I want the resource bundle for dt loop here as a dependency as well so these are the two things there now I want to link my project with the rich text editor lip and I want the TT loop bundle result dt loop dot bundle I want that to be copied into my app so what happens here is when it builds this app it will make sure that this DT loop bundle plus the static library are done we’ll compile my own sources will link it all together will copy the band resources and then we’re done okay that that’s it that should be the basic setup actually again it’s set up way too many schemes so what we’re doing is we just want to have one for our own demo and that’s it so if I built this let’s see what happens here okay it doesn’t find dt which text editor view now the obvious reason for this is um I want to import dt which text edit or let’s see ET which text was it TT rich text into H okay yeah that’s the one now here’s a problem usually it should be enough to go into build setting and add some the path for the headers so looking for header header search paths so here we add we have a subfolder externals and we want it to be searched recursively let’s see still doesn’t find now here’s a bug that I’ve documented on my blog somehow the index of x co doesn’t find this file even though if you look here it’s under externals it were just a little core and there now so the trick we need to employ to make this file visible to xcode is we need to make a reference to it so i show it in finder somehow does not cooperate why I want to not copy it and doesn’t need to be part of any target I just want it to be referenced here and okay so that that’s it it now finds the editor but doesn’t find the content beyond the editor view dot H so another thing um these are in sauce edit wh content view

edge so again add files these doesn’t need to be part of the target thus doesn’t need to copy and we just teach Xcode that these files exist attribute text content view that’s that’s the same thing but from a different project that now is related to DD context so we go to VT e teco text core source showing find out and it complains about the text content view which is there so on the TT quad text i’m going to add the text content view Oh tired try again edit the text you okay got that and actually if it’s checked it still doesn’t add it to target because haters cannot be members of target okay semantic dt which text editor view you see now we get past the input all right that’s that’s now a different thing you can see these are symbols that can be found and the reason for that is CT font these are in the context framework des one see I transform 3d max scale so what we need to do next is get our frameworks linked that we need here so we get we need quartz Quad Squad was the one then we remember called text framework we need lip xml lip XML to can always build up okay these are the ones that are sufficient for the demo there are some functions that if we use them we would have to add additional frame X but just for a demo that’s now sufficient for it to run and so let’s see what happens okay this is an issue that comes from the linker settings so just to show you what happens here if it says unrecognized selector for instance this ended with HTML options document attributes comes from dt cortex and it’s a category there and in order for a project to be able to use categories there’s a certain build setting that you need to add in the other linker you can flex we want namely minus of you see and we want a minus or load if i’m not mistaken see if that indeed fixes the problem no it does not so I need to look up the flag don’t know that by heart unfortunately I’m kinetics we want minus or load link of flag text anytime minus of your c- or load was this there’s another possibility of course that might be that this is missing here static library target

static i will target of rich text editor now this has the minus obvious obviously and minus or load so it might take a few minutes to figure out what’s missing it okay there were some more things missing cg image sauce that’s core image so again we link we need cool image and cg image size up the data we have core image although this here um quadro we have actually let’s compare to our rich text editor make a player Quad Squad image I oh did I confuse our image with okay and we don’t need your image actually need image I hope so image you again speed annoying that it moves it there okay build succeeded let’s see we have more success yeah now that’s all it takes huh it’s quite a bit but let’s quickly review what’s going on here so I’ve added the necessary dependency I edit the resource bundle which I was able from linking the Xcode project in to hear some someplace that Xcode can see it in the static library we have the static library in the link binary with libraries here and the copy panel resources for the loop we have any compound resources and then we are having our demo just a very simple setup so if we go into the new controller we just create a the view and one thing that’s still missing here it is we also have we need the text text delicate probably herself and in order to be able to get rid of the squiggly line here we have this as DT will text content with delicate and in order to use this again we need ET quod text and DD context it’s the same issues before if it doesn’t find a header even though we have this setup just go in show and find the ET cortex it’s got the header in core so didn’t I have a header for that I thought ahead what text actually I didn’t so it’s the dt other the text content view that we need to use so that this protocol is defined let’s have a look at this protocol and this delegate protocol is used for providing custom sub views it’s in called dt context and one thing that for example it allows you to do is specify sup use to be used for certain dt text attachments didn’t text attachment might be for example an image and you can use the built-in mechanism of drawing the image then the image is

flat with the text wrong not interactive or if you provide this method here then instead of drawing the image it will pass on the text attachment to you and you can configure a uiimageview for example or a button something interactive and there are a couple things like you can have special views for the links for them to be interactive you can have them for the text attachments and also you can have customized drawing of text blocks so if you have a text block with some Invitational and so on it can draw a frame around this and you also get a callback method when it’s done drawing so you might want to draw for example line numbers on on the text the side but these these are things that we are not going to use in this demo here that something you should look at in DD context now one thing though we have this very small here so let’s see if it looks any better on iphone yeah you can see the default text eyes is rather small so one thing that we’re going to do is make this a little bit larger and the way to do that with rich text little view is you have the ability of specifying it either as a text ties multiplier or or are the preferred method actually is by setting the text where is it the default attributes and the default attributes or are they are actually a set of attributes that are passed on to eat with HTML whenever you set HTML so I’m just using the easiest way to set the text size multiply in that case um let’s see if this works if I do which takes into text size multiplier and say make it three times as large haha RBT you see you even get a auto correction that also works okay that’s it for this video on how to integrate it actually sorry I I wanted to recap nicely so first we get the project check out in a subfolder of our one egg we add the Xcode project for the TD matrix editor which is a reference to it and also in order to have access to the loop view resourcebundle target we also need to add this and we need to drag out certain heathers into our Xcode so that they can find them even though we have this set up in the search path but somehow the index of extra doesn’t find it then we need the target dependencies the copying of the boundary sauce the link banner of libraries some build settings namely that other little flags all load and minus Objective C Objective C that it can load objective-c classes from static library and all load then it loads all the categories otherwise the linker thinks categories are not used and then you will get this unrecognized selector thing and finally you need to have some frameworks in place image I all live xml to the cortex framework and the other ones that are stunned anyway and once you have this um you instantiate a view where you want to edit to be may be said that text eyes if you

like and you’re good to go and this gives us an ICU and hi this is our first demo project and finally let me show you the reason why you should actually have a navigation bar on top because if I now drag with my finger here and they go to the top line you see that the magnifying glass disappears behind the status bar so if there was a navigation bar on top and then this would be a slightly better way okay so there you have it our 15 minutes I could have made a little bit quicker but unfortunately I’ve not rehearsed this integration too much can probably make it a bit nicer but I just wanted to put this out there so that you can see me the make of it actually putting it into a project and that should give you some pointers how to do it yourself

You Want To Have Your Favorite Car?

We have a big list of modern & classic cars in both used and new categories.